From 79d7b4f4a83525bfab846d3847b91f4867be98be Mon Sep 17 00:00:00 2001 From: Fabio Caccamo Date: Wed, 30 Aug 2023 18:42:53 +0200 Subject: [PATCH 1/5] Add toggle-fullscreen control with temp icons. --- src/fontra/client/images/fullscreen-enter.svg | 11 +++++ src/fontra/client/images/fullscreen-exit.svg | 11 +++++ src/fontra/views/editor/editor.css | 4 ++ src/fontra/views/editor/editor.html | 10 ++++ src/fontra/views/editor/editor.js | 49 +++++++++++++++++++ 5 files changed, 85 insertions(+) create mode 100644 src/fontra/client/images/fullscreen-enter.svg create mode 100644 src/fontra/client/images/fullscreen-exit.svg diff --git a/src/fontra/client/images/fullscreen-enter.svg b/src/fontra/client/images/fullscreen-enter.svg new file mode 100644 index 000000000..e08ab8984 --- /dev/null +++ b/src/fontra/client/images/fullscreen-enter.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/fontra/client/images/fullscreen-exit.svg b/src/fontra/client/images/fullscreen-exit.svg new file mode 100644 index 000000000..0ac6cc15e --- /dev/null +++ b/src/fontra/client/images/fullscreen-exit.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/fontra/views/editor/editor.css b/src/fontra/views/editor/editor.css index ec2b409f7..95591f7fe 100644 --- a/src/fontra/views/editor/editor.css +++ b/src/fontra/views/editor/editor.css @@ -408,6 +408,10 @@ body { transform: scale(1.1, 1.1); } +.tool-icon--hidden { + display: none; +} + .tool-button:hover { background-color: var(--editor-tool-button-hover-background-color); } diff --git a/src/fontra/views/editor/editor.html b/src/fontra/views/editor/editor.html index ada5e0d2b..83cdffb96 100644 --- a/src/fontra/views/editor/editor.html +++ b/src/fontra/views/editor/editor.html @@ -50,6 +50,16 @@
+
+ + +
diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index 044dbc8ef..13d450aa7 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -399,10 +399,19 @@ export class EditorController { case "zoom-fit-selection": this.zoomFit(); break; + case "toggle-fullscreen": + this.toggleFullscreen(); + break; } this.canvasController.canvas.focus(); }; } + + // init fullscreen button + this.updateFullscreenButton(); + document.addEventListener("fullscreenchange", () => { + this.updateFullscreenButton(); + }); } addEditTool(tool) { @@ -1574,6 +1583,46 @@ export class EditorController { this.sceneController.autoViewBox = false; } + toggleFullscreen() { + if (document.fullscreenElement) { + if (document.exitFullscreen) { + document.exitFullscreen(); + } + } else { + const element = document.documentElement; + if (element.requestFullscreen) { + element.requestFullscreen(); + } + } + } + + updateFullscreenButton() { + // hide button in case fullscreen is not enabled on device + const fullscreenButtonEl = document.querySelector( + ".tool-button[data-tool='toggle-fullscreen']" + ); + if (!document.fullscreenEnabled) { + fullscreenButtonEl.style.display = "none"; + return; + } + // fullscreen is enabled, show the right icon depending on the fullscreen state + const fullscreenEnterIconEl = fullscreenButtonEl.querySelector( + ".tool-icon--fullscreen-enter" + ); + const fullscreenExitIconEl = fullscreenButtonEl.querySelector( + ".tool-icon--fullscreen-exit" + ); + if (document.fullscreenElement) { + // fullscreen state is on, display exit-fullscreen button icon + fullscreenEnterIconEl.classList.add("tool-icon--hidden"); + fullscreenExitIconEl.classList.remove("tool-icon--hidden"); + } else { + // fullscreen state is off, display enter-fullscreen button icon + fullscreenEnterIconEl.classList.remove("tool-icon--hidden"); + fullscreenExitIconEl.classList.add("tool-icon--hidden"); + } + } + animateToViewBox(viewBox) { const startViewBox = this.sceneSettings.viewBox; const deltaViewBox = subItemwise(viewBox, startViewBox); From a92d984b1f1a61cd3616d9d7f02838d6cb30d24a Mon Sep 17 00:00:00 2001 From: Fabio Caccamo Date: Thu, 31 Aug 2023 11:52:17 +0200 Subject: [PATCH 2/5] Update icon. --- src/fontra/client/tabler-icons/maximize.svg | 7 +++++++ src/fontra/client/tabler-icons/minimize.svg | 7 +++++++ src/fontra/views/editor/editor.html | 4 ++-- 3 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 src/fontra/client/tabler-icons/maximize.svg create mode 100644 src/fontra/client/tabler-icons/minimize.svg diff --git a/src/fontra/client/tabler-icons/maximize.svg b/src/fontra/client/tabler-icons/maximize.svg new file mode 100644 index 000000000..bf8b29839 --- /dev/null +++ b/src/fontra/client/tabler-icons/maximize.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/fontra/client/tabler-icons/minimize.svg b/src/fontra/client/tabler-icons/minimize.svg new file mode 100644 index 000000000..5abf8ac87 --- /dev/null +++ b/src/fontra/client/tabler-icons/minimize.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/fontra/views/editor/editor.html b/src/fontra/views/editor/editor.html index 83cdffb96..9761332f5 100644 --- a/src/fontra/views/editor/editor.html +++ b/src/fontra/views/editor/editor.html @@ -53,11 +53,11 @@
From 85e5a50ab0cc941d67ae4d055c249466dc11452c Mon Sep 17 00:00:00 2001 From: Fabio Caccamo Date: Thu, 31 Aug 2023 12:01:16 +0200 Subject: [PATCH 3/5] Remove temp icons. --- src/fontra/client/images/fullscreen-enter.svg | 11 ----------- src/fontra/client/images/fullscreen-exit.svg | 11 ----------- 2 files changed, 22 deletions(-) delete mode 100644 src/fontra/client/images/fullscreen-enter.svg delete mode 100644 src/fontra/client/images/fullscreen-exit.svg diff --git a/src/fontra/client/images/fullscreen-enter.svg b/src/fontra/client/images/fullscreen-enter.svg deleted file mode 100644 index e08ab8984..000000000 --- a/src/fontra/client/images/fullscreen-enter.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/src/fontra/client/images/fullscreen-exit.svg b/src/fontra/client/images/fullscreen-exit.svg deleted file mode 100644 index 0ac6cc15e..000000000 --- a/src/fontra/client/images/fullscreen-exit.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - From cfb3d7832f8401f7ec1c573f72a4abf6d82a6920 Mon Sep 17 00:00:00 2001 From: Fabio Caccamo Date: Thu, 31 Aug 2023 12:36:48 +0200 Subject: [PATCH 4/5] Reduce icon stroke width. --- src/fontra/views/editor/editor.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/fontra/views/editor/editor.css b/src/fontra/views/editor/editor.css index 95591f7fe..5f80e24c6 100644 --- a/src/fontra/views/editor/editor.css +++ b/src/fontra/views/editor/editor.css @@ -412,6 +412,11 @@ body { display: none; } +.tool-icon--fullscreen-enter .icon, +.tool-icon--fullscreen-exit .icon { + stroke-width: 1.7px; +} + .tool-button:hover { background-color: var(--editor-tool-button-hover-background-color); } From 1a019f7393fe019360deb63b2d5a839e8c4dc6a0 Mon Sep 17 00:00:00 2001 From: Fabio Caccamo Date: Thu, 31 Aug 2023 13:00:17 +0200 Subject: [PATCH 5/5] Remove unnecessary conditions. --- src/fontra/views/editor/editor.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index 13d450aa7..2bda1ae6e 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -1585,14 +1585,10 @@ export class EditorController { toggleFullscreen() { if (document.fullscreenElement) { - if (document.exitFullscreen) { - document.exitFullscreen(); - } + document.exitFullscreen(); } else { const element = document.documentElement; - if (element.requestFullscreen) { - element.requestFullscreen(); - } + element.requestFullscreen(); } }