Fix design update after 5 vue components updgrade

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
nextcloud · May 3, 2022 · a2d8267 · a2d8267
1 parent e65a7bd
commit a2d8267
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 23 deletions.
diff --git a/src/components/Videos.vue b/src/components/Videos.vue
@@ -27,6 +27,7 @@
 		<VuePlyr ref="plyr"
 			:options="options"
 			:style="{
+				height: height + 'px',
 				width: width + 'px'
 			}">
 			<video ref="video"
@@ -126,8 +127,8 @@ export default {
 	methods: {
 		// Updates the dimensions of the modal
 		updateVideoSize() {
-			this.naturalHeight = this.$refs.video && this.$refs.video.videoHeight
-			this.naturalWidth = this.$refs.video && this.$refs.video.videoWidth
+			this.naturalHeight = this.$refs.video?.videoHeight
+			this.naturalWidth = this.$refs.video?.videoWidth
 			this.updateHeightWidth()
 		},
 

diff --git a/src/mixins/Mime.js b/src/mixins/Mime.js
@@ -155,11 +155,9 @@ export default {
 			const modalWrapper = this.$parent.$el.querySelector('.modal-wrapper')
 			if (modalWrapper && this.naturalHeight > 0 && this.naturalWidth > 0) {
 				const modalContainer = modalWrapper.querySelector('.modal-container')
-				const wrapperMaxHeight = Number(window.getComputedStyle(modalContainer).maxHeight.replace('%', ''))
-				const wrapperMaxWidth = Number(window.getComputedStyle(modalContainer).maxWidth.replace('%', ''))
 
-				const parentHeight = Math.round(modalWrapper.clientHeight * wrapperMaxHeight / 100) - 50 // minus header
-				const parentWidth = Math.round(modalWrapper.clientWidth * wrapperMaxWidth / 100)
+				const parentHeight = modalContainer.clientHeight - 50 // header height
+				const parentWidth = modalContainer.clientWidth
 
 				const heightRatio = parentHeight / this.naturalHeight
 				const widthRatio = parentWidth / this.naturalWidth

diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue
@@ -24,7 +24,7 @@
 <template>
 	<Modal v-if="initiated || currentFile.modal"
 		id="viewer"
-		size="large"
+		size="full"
 		:class="{'icon-loading': !currentFile.loaded && !currentFile.failed,
 			'theme--undefined': theme === null, 'theme--dark': theme === 'dark', 'theme--light': theme === 'light', 'theme--default': theme === 'default'}"
 		:clear-view-delay="-1 /* disable fade-out because of accessibility reasons */"
@@ -785,25 +785,34 @@ export default {
 
 	::v-deep .modal-container,
 	&__content {
-		// center views
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
+		overflow: visible !important;
 		cursor: pointer;
 	}
 
 	::v-deep .modal-wrapper {
 		.modal-container {
+			// 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;
 		}
 	}
 
+	&__content {
+		// center views
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+
 	&__file {
 		transition: height 100ms ease,
-			width 100ms ease;
+		width 100ms ease;
 
 		// display on page but make it invisible
 		&--hidden {
@@ -819,21 +828,18 @@ export default {
 
 	&.theme--light {
 		&.modal-mask {
-			background-color: rgba(255, 255, 255, 0.92) !important;
+			background-color: rgba(255, 255, 255, .92) !important;
 		}
 		::v-deep .modal-title,
 		::v-deep .modal-header .icons-menu button svg {
-			color: #000000 !important;
-		}
-		::v-deep .modal-container {
-			box-shadow: none;
+			color: #000 !important;
 		}
 	}
 
 	&.theme--default {
 		&.modal-mask {
 			body.theme--light & {
-				background-color: rgba(255, 255, 255, 0.92) !important;
+				background-color: rgba(255, 255, 255, .92) !important;
 			}
 		}
 		::v-deep .modal-title,
@@ -844,9 +850,6 @@ export default {
 				color: var(--color-main-text) !important;
 			}
 		}
-		::v-deep .modal-container {
-			box-shadow: none;
-		}
 	}
 }