Merge pull request #29 from nextcloud/fixes/design/img-bg_border-radius_use-modal-max

Fixes/design/img bg border radius use modal max

Author: jancborchardt

apps/viewer/package-lock.json

@@ -38,7 +38,7 @@
     "debounce": "^1.2.0",
     "mime-types": "^2.1.22",
     "nextcloud-server": "^0.15.9",
-    "nextcloud-vue": "^0.9.0",
+    "nextcloud-vue": "^0.9.1",
     "vue": "^2.6.8",
     "vue-async-computed": "^3.6.1"
   },

apps/viewer/package.json

@@ -94,11 +94,13 @@ img {
 	max-height: 100%;
 	align-self: center;
 	justify-self: center;
-	background-image: linear-gradient(45deg, #{$checkered-color} 25%, transparent 25%),
-		linear-gradient(45deg, transparent 75%, #{$checkered-color} 75%),
-		linear-gradient(45deg, transparent 75%, #{$checkered-color} 75%),
-		linear-gradient(45deg, #{$checkered-color} 25%, #fff 25%);
-	background-size: 2 * $checkered-size 2 * $checkered-size;
-	background-position: 0 0, 0 0, -#{$checkered-size} -#{$checkered-size}, $checkered-size $checkered-size;
+	&:hover {
+		background-image: linear-gradient(45deg, #{$checkered-color} 25%, transparent 25%),
+			linear-gradient(45deg, transparent 75%, #{$checkered-color} 75%),
+			linear-gradient(45deg, transparent 75%, #{$checkered-color} 75%),
+			linear-gradient(45deg, #{$checkered-color} 25%, #fff 25%);
+		background-size: 2 * $checkered-size 2 * $checkered-size;
+		background-position: 0 0, 0 0, -#{$checkered-size} -#{$checkered-size}, $checkered-size $checkered-size;
+	}
 }
 </style>

apps/viewer/src/components/Images.vue

@@ -64,13 +64,13 @@ export default {
 			this.$emit('loaded', event)
 		},
 		updateHeightWidth(contentHeight, contentWidth) {
-			const modalContainer = this.$parent.$el.querySelector('#modal-wrapper')
+			const modalContainer = this.$parent.$el.querySelector('.modal-wrapper')
 			if (modalContainer) {
-				// ! modal container have maxHeight:80% AND maxWidth: 900px
-				const parentHeight = Math.round(modalContainer.clientHeight * 0.8) - 50 // minus header
-				const parentWidth = modalContainer.clientWidth > 900
-					? 900
-					: modalContainer.clientWidth
+				const wrapperMaxHeight = window.getComputedStyle(modalContainer.children[0]).maxHeight.replace('%', '')
+				const wrapperMaxWidth = window.getComputedStyle(modalContainer.children[0]).maxWidth.replace('%', '')
+
+				const parentHeight = Math.round(modalContainer.clientHeight * Number(wrapperMaxHeight) / 100) - 50 // minus header
+				const parentWidth = Math.round(modalContainer.clientWidth * Number(wrapperMaxWidth) / 100)
 
 				const heightRatio = parentHeight / contentHeight
 				const widthRatio = parentWidth / contentWidth

apps/viewer/src/mixins/Mime.js

@@ -21,6 +21,7 @@
  */
 
 import axios from 'axios'
+import { generateRemoteUrl } from 'nextcloud-server/dist/router'
 
 /**
  *
@@ -31,7 +32,7 @@ import axios from 'axios'
 export default async function(user, path, mimes) {
 	const response = await axios({
 		method: 'PROPFIND',
-		url: `/remote.php/dav/files/${user}${path}`,
+		url: generateRemoteUrl(`/dav/files/${user}${path}`),
 		headers: {
 			requesttoken: OC.requestToken,
 			'content-Type': 'text/xml'

apps/viewer/src/services/FileList.js

@@ -23,13 +23,17 @@
 <template>
 	<modal
 		v-if="currentFile.modal"
+		id="viewer-content"
 		:class="{'icon-loading': loading}"
 		:view="currentFile.modal"
 		:actions="actions"
 		:enable-slideshow="true"
 		:has-previous="hasPrevious"
 		:has-next="hasNext"
 		:title="currentFileName"
+		:disable-swipe="disableSwipe"
+		:size="isMobile ? 'full' : 'large'"
+		:style="{width: showSidebar ? `calc(100% - ${sidebarWidth}px)` : null}"
 		@close="close"
 		@previous="previous"
 		@next="next">
@@ -84,6 +88,7 @@ import Mime from 'mime-types'
 import Vue from 'vue'
 
 import Modal from 'nextcloud-vue/dist/Components/Modal'
+import { generateRemoteUrl } from 'nextcloud-server/dist/router'
 
 import Error from 'Components/Error'
 import FileList from 'Services/FileList'
@@ -111,11 +116,15 @@ export default {
 
 		fileList: [],
 
-		failed: false,
+		isMobile: window.outerWidth < 768,
+		showSidebar: false,
+		sidebarWidth: 0,
 
+		disableSwipe: false,
+		failed: false,
 		loading: true,
 
-		root: `/remote.php/dav/files/${OC.getCurrentUser().uid}`
+		root: generateRemoteUrl(`/dav/files/${OC.getCurrentUser().uid}`)
 	}),
 
 	computed: {
@@ -160,6 +169,11 @@ export default {
 			})
 		})
 
+		window.addEventListener('resize', this.onResize)
+	},
+
+	beforeDestroy() {
+		window.removeEventListener('resize', this.onResize)
 	},
 
 	methods: {
@@ -172,6 +186,10 @@ export default {
 		async openFile(fileName, fileInfo) {
 			this.loading = true
 			this.failed = false
+
+			// prevent scrolling while opened
+			document.body.style.overflow = 'hidden'
+
 			const relativePath = `${fileInfo.dir !== '/' ? fileInfo.dir : ''}/${fileName}`
 			const path = `${this.root}${relativePath}`
 
@@ -193,7 +211,7 @@ export default {
 			this.fileList = await FileList(OC.getCurrentUser().uid, fileInfo.dir, mimes)
 
 			// store current position
-			this.currentIndex = this.fileList.findIndex(file => decodeURI(file.href) === this.root + relativePath)
+			this.currentIndex = this.fileList.findIndex(file => file.name === fileName)
 
 			this.updatePreviousNext()
 		},
@@ -362,6 +380,9 @@ export default {
 			this.currentFile = {}
 			this.currentModal = null
 			this.fileList = []
+			this.hideAppsSidebar()
+			// restore default
+			document.body.style.overflow = null
 		},
 
 		/**
@@ -416,16 +437,56 @@ export default {
 		showSharingSidebar() {
 			// Open the sidebar sharing tab
 			OCA.Files.App.fileList.showDetailsView(this.currentFileName, 'shareTabView')
-			this.close()
+			this.showAppsSidebar()
+		},
+
+		showAppsSidebar() {
+			this.showSidebar = true
+			const sidebar = document.getElementById('app-sidebar')
+			if (sidebar) {
+				sidebar.classList.add('app-sidebar--full')
+			}
+
+			// overriding closing function
+			const origHideAppsSidebar = OC.Apps.hideAppSidebar
+			OC.Apps.hideAppSidebar = ($el) => {
+				this.hideAppsSidebar()
+				origHideAppsSidebar($el)
+			}
+
+			this.sidebarWidth = sidebar.offsetWidth
+		},
+
+		hideAppsSidebar() {
+			this.showSidebar = false
+			const sidebar = document.getElementById('app-sidebar')
+			if (sidebar) {
+				sidebar.classList.remove('app-sidebar--full')
+			}
+		},
+
+		onResize(event) {
+			// Update mobile mode
+			this.isMobile = window.outerWidth < 768
+			// update sidebar width
+			const sidebar = document.getElementById('app-sidebar')
+			if (sidebar) {
+				this.sidebarWidth = sidebar.offsetWidth
+			}
 		}
 	}
 }
 </script>
 
 <style lang="scss">
-#modal-mask #modal-container {
-	display: flex !important;
-	width: auto !important;
+#viewer-content.modal-mask {
+	transition: width ease 100ms;
+	.modal-container {
+		display: flex !important;
+		width: auto !important;
+		border-radius: 0 !important;
+		background-color: black;
+	}
 }
 
 .component-fade-enter-active, .component-fade-leave-active {
@@ -445,4 +506,14 @@ export default {
 	transition: height 100ms ease,
 		width 100ms ease;
 }
+
+#app-sidebar.app-sidebar--full {
+	position: absolute;
+	top: 0;
+	height: 100%;
+	z-index: 15000;
+	.thumbnailContainer {
+		display: none;
+	}
+}
 </style>