From c57e1b77c087a57928e9eb53455a6927499c0549 Mon Sep 17 00:00:00 2001 From: Dariusz Olszewski Date: Sun, 26 Mar 2023 14:32:25 +0200 Subject: [PATCH 01/16] Full screen mode - initial implementation Signed-off-by: Dariusz Olszewski --- src/views/Viewer.vue | 66 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue index e0d7f0230..6bf103e26 100644 --- a/src/views/Viewer.vue +++ b/src/views/Viewer.vue @@ -78,6 +78,22 @@ {{ t('viewer', 'Edit') }} + + + {{ t('viewer', 'Full screen') }} + + + + {{ t('viewer', 'Exit full screen') }} + From c5e14e21936636dc9b259ad9cd702f7cb78a8a7b Mon Sep 17 00:00:00 2001 From: Dariusz Olszewski Date: Sun, 26 Mar 2023 15:05:49 +0200 Subject: [PATCH 02/16] lint Signed-off-by: Dariusz Olszewski --- src/views/Viewer.vue | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue index 6bf103e26..780990fac 100644 --- a/src/views/Viewer.vue +++ b/src/views/Viewer.vue @@ -1010,33 +1010,33 @@ export default { requestFullscreen() { const el = document.documentElement if (el.requestFullscreen) { - el.requestFullscreen(); + el.requestFullscreen() } else if (el.webkitRequestFullscreen) { - el.webkitRequestFullscreen(); + el.webkitRequestFullscreen() } }, exitFullscreen() { if (document.exitFullscreen) { - document.exitFullscreen(); + document.exitFullscreen() } else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen(); + document.webkitExitFullscreen() } }, addFullscreenEventListeners() { - document.addEventListener('fullscreenchange', this.onFullscreenchange); - document.addEventListener('webkitfullscreenchange', this.onFullscreenchange); + document.addEventListener('fullscreenchange', this.onFullscreenchange) + document.addEventListener('webkitfullscreenchange', this.onFullscreenchange) }, removeFullscreenEventListeners() { - document.addEventListener('fullscreenchange', this.onFullscreenchange); - document.addEventListener('webkitfullscreenchange', this.onFullscreenchange); + document.addEventListener('fullscreenchange', this.onFullscreenchange) + document.addEventListener('webkitfullscreenchange', this.onFullscreenchange) }, onFullscreenchange() { - if (document.fullscreenElement === document.documentElement || - document.webkitFullscreenElement === document.documentElement) { + if (document.fullscreenElement === document.documentElement + || document.webkitFullscreenElement === document.documentElement) { this.isFullscreenMode = true } else { this.isFullscreenMode = false From cddde002a6e647853b528491b0a097b95c58c20b Mon Sep 17 00:00:00 2001 From: Dariusz Olszewski Date: Sun, 26 Mar 2023 21:33:38 +0200 Subject: [PATCH 03/16] Experiment - 100% height for content Signed-off-by: Dariusz Olszewski --- src/views/Viewer.vue | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue index 780990fac..4b08ac300 100644 --- a/src/views/Viewer.vue +++ b/src/views/Viewer.vue @@ -428,6 +428,18 @@ export default { } } }, + + isFullscreenMode(mode) { + const modalContainer = document.getElementsByClassName('modal-container').item(0) + if (mode) { + modalContainer.classList.remove('modal-container-regular') + modalContainer.classList.add('modal-container-fullscreen') + } else { + modalContainer.classList.remove('modal-container-fullscreen') + modalContainer.classList.add('modal-container-regular') + } + }, + }, beforeMount() { @@ -1059,15 +1071,25 @@ export default { cursor: pointer; } + :deep(.modal-header) { + background-color: rgba(0, 0, 0, 0.2); + } + :deep(.modal-wrapper) { .modal-container { + // let the mime components manage their own background-color + background-color: transparent; + box-shadow: none; + } + .modal-container-regular { // Ensure some space at the bottom top: var(--header-height); bottom: var(--header-height); height: auto; - // let the mime components manage their own background-color - background-color: transparent; - box-shadow: none; + } + .modal-container-fullscreen { + top: 0; + height: 100%; } } From 73d3cba65c636f4b3078616079443e359937f2a1 Mon Sep 17 00:00:00 2001 From: Dariusz Olszewski Date: Tue, 28 Mar 2023 00:05:13 +0200 Subject: [PATCH 04/16] Minor corrections/simplification Signed-off-by: Dariusz Olszewski --- src/views/Viewer.vue | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue index 4b08ac300..6400f9d93 100644 --- a/src/views/Viewer.vue +++ b/src/views/Viewer.vue @@ -432,11 +432,9 @@ export default { isFullscreenMode(mode) { const modalContainer = document.getElementsByClassName('modal-container').item(0) if (mode) { - modalContainer.classList.remove('modal-container-regular') modalContainer.classList.add('modal-container-fullscreen') } else { modalContainer.classList.remove('modal-container-fullscreen') - modalContainer.classList.add('modal-container-regular') } }, @@ -839,7 +837,9 @@ export default { OCA.Files.Sidebar.setFullScreenMode(false) } - this.exitFullscreen() + if (this.isFullscreenMode) { + this.exitFullscreen() + } }, keyboardDeleteFile(event) { @@ -1077,18 +1077,17 @@ export default { :deep(.modal-wrapper) { .modal-container { - // let the mime components manage their own background-color - background-color: transparent; - box-shadow: none; - } - .modal-container-regular { // Ensure some space at the bottom top: var(--header-height); bottom: var(--header-height); height: auto; + // let the mime components manage their own background-color + background-color: transparent; + box-shadow: none; } .modal-container-fullscreen { top: 0; + bottom: 0; height: 100%; } } From f09a4cdafac30de0183314b2311e9ba9bdf2db27 Mon Sep 17 00:00:00 2001 From: Dariusz Olszewski Date: Tue, 28 Mar 2023 21:47:06 +0200 Subject: [PATCH 05/16] Code review - BEM syntax Signed-off-by: Dariusz Olszewski --- src/views/Viewer.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue index 6400f9d93..beb977ed0 100644 --- a/src/views/Viewer.vue +++ b/src/views/Viewer.vue @@ -432,9 +432,9 @@ export default { isFullscreenMode(mode) { const modalContainer = document.getElementsByClassName('modal-container').item(0) if (mode) { - modalContainer.classList.add('modal-container-fullscreen') + modalContainer.classList.add('modal-container--fullscreen') } else { - modalContainer.classList.remove('modal-container-fullscreen') + modalContainer.classList.remove('modal-container--fullscreen') } }, @@ -1085,7 +1085,7 @@ export default { background-color: transparent; box-shadow: none; } - .modal-container-fullscreen { + .modal-container--fullscreen { top: 0; bottom: 0; height: 100%; From 3a2f496dfeae41bd5e77a93bd7c1ff86ad4e469d Mon Sep 17 00:00:00 2001 From: Dariusz Olszewski Date: Wed, 29 Mar 2023 21:13:12 +0200 Subject: [PATCH 06/16] Code review - single button to toggle full screen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: John Molakvoæ Signed-off-by: Dariusz Olszewski --- src/views/Viewer.vue | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue index beb977ed0..34ef31685 100644 --- a/src/views/Viewer.vue +++ b/src/views/Viewer.vue @@ -78,21 +78,14 @@ {{ t('viewer', 'Edit') }} - + @click="toggleFullScreen"> - {{ t('viewer', 'Full screen') }} - - - - {{ t('viewer', 'Exit full screen') }} + {{ isFullscreenMode ? t('viewer', 'Exit full screen') : t('viewer', 'Full screen') }} Date: Sun, 16 Apr 2023 23:59:17 +0200 Subject: [PATCH 07/16] Use entire screen height only for images Signed-off-by: Dariusz Olszewski --- src/views/Viewer.vue | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue index 34ef31685..98af54fe9 100644 --- a/src/views/Viewer.vue +++ b/src/views/Viewer.vue @@ -292,6 +292,10 @@ export default { return this.currentIndex === this.fileList.length - 1 }, + isImage() { + return ['image/jpeg', 'image/png', 'image/webp'].includes(this.currentFile?.mime) + }, + /** * Returns the path to the current opened file in the sidebar. * @@ -341,7 +345,7 @@ export default { return !this.isMobile && canDownload() && this.currentFile?.permissions?.includes('W') - && ['image/jpeg', 'image/png', 'image/webp'].includes(this.currentFile?.mime) + && this.isImage }, modalClass() { @@ -423,10 +427,21 @@ export default { }, isFullscreenMode(mode) { + if (!this.isImage) { + return + } + + // Use 100% of screen height to display images and make the header semitransparent + // + // NOTE: This fragment depends on internal structure of the NcModal component. + // + const modalHeader = document.getElementsByClassName('modal-header').item(0) const modalContainer = document.getElementsByClassName('modal-container').item(0) if (mode) { + modalHeader.classList.add('modal-header--semitransparent') modalContainer.classList.add('modal-container--fullscreen') } else { + modalHeader.classList.remove('modal-header--semitransparent') modalContainer.classList.remove('modal-container--fullscreen') } }, @@ -1072,7 +1087,7 @@ export default { cursor: pointer; } - :deep(.modal-header) { + :deep(.modal-header--semitransparent) { background-color: rgba(0, 0, 0, 0.2); } From 0b2e652657335ac2fbd928b8462fd0c1f9d14a4c Mon Sep 17 00:00:00 2001 From: Dariusz Olszewski Date: Mon, 17 Apr 2023 22:32:14 +0200 Subject: [PATCH 08/16] Simplify header bar for images in full screen Signed-off-by: Dariusz Olszewski --- src/views/Viewer.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue index 98af54fe9..67a050b22 100644 --- a/src/views/Viewer.vue +++ b/src/views/Viewer.vue @@ -1088,7 +1088,12 @@ export default { } :deep(.modal-header--semitransparent) { - background-color: rgba(0, 0, 0, 0.2); + .modal-title { + opacity: 0; + } + .icons-menu { + background-color: rgba(0, 0, 0, 0.2); + } } :deep(.modal-wrapper) { From 25b0a28f464370d874a725498d08f57246f6a3c7 Mon Sep 17 00:00:00 2001 From: Dariusz Olszewski Date: Wed, 19 Apr 2023 21:56:28 +0200 Subject: [PATCH 09/16] Full screen mode - lint again Signed-off-by: Dariusz Olszewski --- src/views/Viewer.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue index 67a050b22..bac56e060 100644 --- a/src/views/Viewer.vue +++ b/src/views/Viewer.vue @@ -78,8 +78,7 @@ {{ t('viewer', 'Edit') }} -