Skip to content

[stable24] Fix design update after 5 vue components upgrade #1239

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
skjnldsv merged 6 commits into from
May 3, 2022
Merged

[stable24] Fix design update after 5 vue components upgrade #1239

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7b72af2
Add visual regression testing
skjnldsv Apr 29, 2022
3a558f4
Bump @nextcloud/webpack-vue-config
skjnldsv May 3, 2022
c4f2af6
Lint fix
skjnldsv May 3, 2022
e65a7bd
Compile assets
nextcloud-command May 3, 2022
a2d8267
Fix design update after 5 vue components updgrade
skjnldsv Apr 29, 2022
3a4b708
Update tests
skjnldsv May 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix design update after 5 vue components updgrade 
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
  • Loading branch information
@skjnldsv
skjnldsv committed May 3, 2022
commit a2d826730f7dc56bf475751e8207473005b005a8
5 changes: 3 additions & 2 deletions src/components/Videos.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
<VuePlyr ref="plyr"
:options="options"
:style="{
height: height + 'px',
width: width + 'px'
}">
<video ref="video"
Expand Down Expand Up @@ -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()
},

Expand Down
6 changes: 2 additions & 4 deletions src/mixins/Mime.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
37 changes: 20 additions & 17 deletions src/views/Viewer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */"
Expand Down Expand Up @@ -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 {
Expand All @@ -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,
Expand All @@ -844,9 +850,6 @@ export default {
color: var(--color-main-text) !important;
}
}
::v-deep .modal-container {
box-shadow: none;
}
}
}

Expand Down