Editor design fixes

Signed-off-by: John Molakvoæ <[email protected]>
nextcloud · Aug 17, 2022 · 9e42436 · 9e42436
1 parent 34f2a29
commit 9e42436
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 24 deletions.
diff --git a/cypress/snapshots/base/visual-regression.cy.js/image-base.png b/cypress/snapshots/base/visual-regression.cy.js/image-base.png
diff --git a/js/viewer-main.js b/js/viewer-main.js
diff --git a/js/viewer-main.js.map b/js/viewer-main.js.map
diff --git a/src/components/ImageEditor.vue b/src/components/ImageEditor.vue
@@ -194,36 +194,53 @@ export default {
 	left: 0;
 	position: absolute;
 	z-index: 10100;
+}
+</style>
 
-	&::v-deep * {
+<style lang="scss">
+// Make sure the editor and its modals are above everything
+.SfxModal-Wrapper {
+	z-index: 10101 !important;
+}
+
+.SfxPopper-wrapper {
+	z-index: 10102 !important;
+}
+
+// Default styling
+.viewer__image-editor,
+.SfxModal-Wrapper,
+.SfxPopper-wrapper {
+	* {
 		// Fix font size for the entire image editor
 		font-size: var(--default-font-size) !important;
 	}
 
-	&::v-deep label,
-	&::v-deep button {
+	label,
+	button {
 		color: var(--color-main-text);
 		> span {
 			font-size: var(--default-font-size) !important;
 		}
 	}
-}
-</style>
 
-<style lang="scss">
-// Make sure the editor and its modals are above everything
-.SfxModal-Wrapper {
-	z-index: 10101 !important;
-}
-.SfxPopper-wrapper {
-	z-index: 10102 !important;
+	// Fix button ratio and center content
+	button {
+		padding: 6px 12px;
+		min-width: 44px;
+		min-height: 44px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 }
 
 // Input styling
 .SfxInput-root {
 	height: auto !important;
 	padding: 0 !important;
 }
+
 .SfxInput-root .SfxInput-Base {
 	margin: 0 !important;
 }
@@ -260,6 +277,13 @@ export default {
 // Menu items
 .SfxMenuItem-root {
 	height: 44px;
+	padding-left: 0 !important;
+	// Center the menu entry icon and fix width
+	> div {
+		cursor: pointer;
+		margin-right: 0;
+		padding: 14px;
+	}
 }
 
 // Modal
@@ -272,6 +296,7 @@ export default {
 	.SfxModalTitle-root {
 		flex: 1 1 100%;
 		justify-content: center;
+		color: var(--color-main-text);
 	}
 	.SfxModalTitle-Icon {
 		background: none !important;
@@ -297,14 +322,6 @@ export default {
 }
 
 // Header buttons
-.FIE_topbar button {
-	padding: 6px 12px;
-	min-width: 44px;
-	min-height: 44px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
 .FIE_topbar-center-options > button,
 .FIE_topbar-center-options > label {
 	margin-left: 6px !important;
@@ -314,6 +331,7 @@ export default {
 .FIE_tabs {
 	padding: 6px !important;
 }
+
 .FIE_tab {
 	padding: 8px;
 	width: 80px !important;
@@ -358,6 +376,8 @@ export default {
 	border: none !important;
 	padding: 5px !important;
 	padding-left: 10px !important;
+	// override default button width
+	min-width: 0px !important;
 }
 
 // Force icon-only style
@@ -417,7 +437,7 @@ export default {
 }
 
 // Disable jpeg saving (jpg is already here)
-.SfxMenuItem-root[value="jpeg"] {
+.SfxMenuItem-root[value='jpeg'] {
 	display: none;
 }
 
@@ -431,9 +451,11 @@ export default {
 .FIE_spinner-label {
 	display: none !important;
 }
+
 .FIE_spinner-wrapper {
 	background-color: transparent !important;
 }
+
 .FIE_spinner::before {
 	z-index: 2;
 	content: '';

diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue
@@ -396,6 +396,7 @@ export default {
 
 			// prevent scrolling while opened
 			document.body.style.overflow = 'hidden'
+			document.documentElement.style.overflow = 'hidden'
 
 			// swap title with original one
 			const title = document.getElementsByTagName('head')[0].getElementsByTagName('title')[0]
@@ -693,6 +694,7 @@ export default {
 
 			// restore default
 			document.body.style.overflow = null
+			document.documentElement.style.overflow = null
 
 			// Callback before updating the title
 			// If the callback creates a new entry in browser history