Skip to content
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

Fix design update after 5 vue components updgrade #1229

Merged
merged 2 commits into from
May 3, 2022
Merged

Fix design update after 5 vue components updgrade #1229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
423c1fa
Fix design update after 5 vue components updgrade
skjnldsv Apr 29, 2022
634a20c
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
Binary file added cypress/fixtures/test-card.mp4
View file
Open in desktop
Binary file not shown.
Binary file added cypress/fixtures/test-card.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 0 additions & 4 deletions cypress/integration/image.png.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,6 @@ describe('Open image.png in viewer', function() {
.and('not.have.class', 'icon-loading')
})

it('Is not in mobile fullscreen mode', function() {
cy.get('body > .viewer .modal-wrapper').should('not.have.class', 'modal-wrapper--full')
})

it('See the menu icon and title on the viewer header', function() {
cy.get('body > .viewer .modal-title').should('contain', 'image.png')
cy.get('body > .viewer .modal-header button.action-item__menutoggle').should('be.visible')
Expand Down
4 changes: 0 additions & 4 deletions cypress/integration/image.webp.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,6 @@ describe('Open image.webp in viewer', function() {
.and('not.have.class', 'icon-loading')
})

it('Is not in mobile fullscreen mode', function() {
cy.get('body > .viewer .modal-wrapper').should('not.have.class', 'modal-wrapper--full')
})

it('See the menu icon and title on the viewer header', function() {
cy.get('body > .viewer .modal-title').should('contain', 'image.webp')
cy.get('body > .viewer .modal-header button.action-item__menutoggle').should('be.visible')
Expand Down
22 changes: 11 additions & 11 deletions cypress/integration/visual-regression.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ describe('Open mp4 videos in viewer', function() {
cy.login(randUser, 'password')

// Upload test file
cy.uploadFile('video1.mp4', 'video/mp4')
cy.uploadFile('image1.jpg', 'image/jpeg')
cy.uploadFile('test-card.mp4', 'video/mp4')
cy.uploadFile('test-card.png', 'image/png')
cy.visit('/apps/files')

// wait a bit for things to be settled
Expand All @@ -42,19 +42,19 @@ describe('Open mp4 videos in viewer', function() {
})

it('See files in the list', function() {
cy.get('#fileList tr[data-file="video1.mp4"]', { timeout: 10000 })
.should('contain', 'video1.mp4')
cy.get('#fileList tr[data-file="image1.jpg"]', { timeout: 10000 })
.should('contain', 'image1.jpg')
cy.get('#fileList tr[data-file="test-card.mp4"]', { timeout: 10000 })
.should('contain', 'test-card.mp4')
cy.get('#fileList tr[data-file="test-card.png"]', { timeout: 10000 })
.should('contain', 'test-card.png')
})

it('Open the viewer on file click', function() {
cy.openFile('video1.mp4')
cy.openFile('test-card.mp4')
cy.get('body > .viewer').should('be.visible')
})

it('See the menu icon and title on the viewer header', function() {
cy.get('body > .viewer .modal-title').should('contain', 'video1.mp4')
cy.get('body > .viewer .modal-title').should('contain', 'test-card.mp4')
cy.get('body > .viewer .modal-header button.action-item__menutoggle').should('be.visible')
cy.get('body > .viewer .modal-header button.header-close').should('be.visible')
})
Expand All @@ -63,7 +63,7 @@ describe('Open mp4 videos in viewer', function() {
cy.get('body > .viewer .modal-container video').should('have.length', 1)
cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active video')
.should('have.attr', 'src')
.and('contain', `/remote.php/dav/files/${randUser}/video1.mp4`)
.and('contain', `/remote.php/dav/files/${randUser}/test-card.mp4`)
cy.get('body > .viewer a.next').should('be.visible')
cy.get('body > .viewer a.next').should('be.visible')
})
Expand All @@ -75,7 +75,7 @@ describe('Open mp4 videos in viewer', function() {
.and('not.have.class', 'icon-loading')
})

it('Take screenshot 1', function() {
it('Take test-card.mp4 screenshot', function() {
cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active video').then(video => {
video.get(0).pause()
video.get(0).currentTime = 1
Expand All @@ -100,7 +100,7 @@ describe('Open mp4 videos in viewer', function() {
.and('not.have.class', 'icon-loading')
})

it('Take screenshot 2', function() {
it('Take test-card.png screenshot', function() {
cy.compareSnapshot('image')
})
})
Binary file modified cypress/snapshots/base/visual-regression.spec.js/image-base.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified cypress/snapshots/base/visual-regression.spec.js/video-base.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions js/viewer-main.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/viewer-main.js.map
View file
Open in desktop

Large diffs are not rendered by default.

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
35 changes: 19 additions & 16 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,22 +785,31 @@ 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;
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