зеркало из https://github.com/nextcloud/viewer.git
Merge pull request #29 from nextcloud/fixes/design/img-bg_border-radius_use-modal-max
Fixes/design/img bg border radius use modal max
This commit is contained in:
Jan-Christoph Borchardt
GitHub
Коммит
3f7c41a7c8
|
|
@ -6939,9 +6939,9 @@
|
|||
}
|
||||
},
|
||||
"nextcloud-vue": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.9.0.tgz",
|
||||
"integrity": "sha512-5ryV0XCa/kS8ArHhP8+MZouprky7di5oSBRPoIsXxTQSy50RaoHqgSeXTZy3sYEN+XMc5yGoyYtKZGq2I5kMCA==",
|
||||
"version": "0.9.1",
|
||||
"resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.9.1.tgz",
|
||||
"integrity": "sha512-8Lmout8Y6+zNPHqZ8rV7GcuKRbFpM8EserkvhkXAJYymq9mblz2NkfmOzhOGxhRICfPHnZ/xFUTxUuaSus4p+Q==",
|
||||
"requires": {
|
||||
"hammerjs": "^2.0.8",
|
||||
"md5": "^2.2.1",
|
||||
|
|
@ -10939,9 +10939,9 @@
|
|||
"integrity": "sha512-yaX2its9XAJKGuQqf7LsiZHHSkxsIK8rmCOQOvEGEoF41blKRK8qr9my4qYoD6ikdLss4n8tKqYBecmaY0+WJg=="
|
||||
},
|
||||
"vue2-datepicker": {
|
||||
"version": "2.10.0",
|
||||
"resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-2.10.0.tgz",
|
||||
"integrity": "sha512-WGL7ou0TdBiJQuHVp29BtBw3rSkLrIYwXWU/ELmaLdnAerI0EdGVAu7DvZV2iIxY4lsHyjqocApxdvXTmwLrAw==",
|
||||
"version": "2.10.1",
|
||||
"resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-2.10.1.tgz",
|
||||
"integrity": "sha512-DRCcf7NUwDYKbKSxVbSNWV5YvY3efcw/NjKPE7RKWiD1b9N6oygouF/CI4dskJFFoMPASiIp6ifWSfdfZ/JSSQ==",
|
||||
"requires": {
|
||||
"fecha": "^2.3.3"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
<template>
|
||||
<modal
|
||||
v-if="currentFile.modal"
|
||||
id="viewer-content"
|
||||
:class="{'icon-loading': loading}"
|
||||
:view="currentFile.modal"
|
||||
:actions="actions"
|
||||
|
|
@ -30,6 +31,9 @@
|
|||
: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>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче