Auto calc img size and center

Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>
nextcloud · Jul 20, 2020 · 4b32185 · 4b32185
1 parent 7b47f2f
commit 4b32185
Show file tree

Hide file tree

Showing 8 changed files with 3 additions and 159 deletions.
diff --git a/cypress/integration/image-small.png.spec.js b/cypress/integration/image-small.png.spec.js
@@ -68,14 +68,6 @@ describe('Open image-small.png in viewer', function() {
 		cy.get('#viewer-content a.next').should('not.be.visible')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			.should('match', /width: 252px/i)
-			.should('match', /height: 120px/i)
-	})
-
 	it('Does not have any visual regression', function() {
 		cy.matchImageSnapshot()
 	})

diff --git a/cypress/integration/image.gif.spec.js b/cypress/integration/image.gif.spec.js
@@ -69,14 +69,6 @@ describe('Open image.gif in viewer', function() {
 		cy.get('#viewer-content a.next').should('not.be.visible')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			.should('match', /width: 273px/i)
-			.should('match', /height: 273px/i)
-	})
-
 	it('Take screenshot', function() {
 		// gif is impossible to match with existing screenshot
 		// just taking a screenshot to manually compare if needed

diff --git a/cypress/integration/image.png.spec.js b/cypress/integration/image.png.spec.js
@@ -72,16 +72,6 @@ describe('Open image.png in viewer', function() {
 		cy.get('#viewer-content a.next').should('not.be.visible')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			// 70% max width (see cypress config)
-			.should('match', new RegExp(`width: ${Math.round(Cypress.config('viewportWidth') * 0.7)}px`, 'i'))
-			// capped by the width, keeping ratio
-			.should('match', new RegExp(`height: ${Math.round(Cypress.config('viewportWidth') * 0.7 / 3000 * 2000)}px`, 'i'))
-	})
-
 	it('Does not have any visual regression', function() {
 		cy.matchImageSnapshot()
 	})

diff --git a/cypress/integration/images-custom-list-loadmore.spec.js b/cypress/integration/images-custom-list-loadmore.spec.js
@@ -142,16 +142,6 @@ describe('Open custom list of images in viewer with pagination', function() {
 		cy.get('#viewer-content a.next').should('be.visible')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			// 70% max width (see cypress config)
-			.should('match', new RegExp(`width: ${Math.round(Cypress.config('viewportWidth') * 0.7)}px`, 'i'))
-			// capped by the width, keeping ratio
-			.should('match', new RegExp(`height: ${Math.round(Cypress.config('viewportWidth') * 0.7 / 3000 * 2000)}px`, 'i'))
-	})
-
 	it('Does not have any visual regression 1', function() {
 		cy.matchImageSnapshot()
 	})
@@ -170,16 +160,6 @@ describe('Open custom list of images in viewer with pagination', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			// 70% max width (see cypress config)
-			.should('match', new RegExp(`width: ${Math.round(Cypress.config('viewportWidth') * 0.7)}px`, 'i'))
-			// capped by the width, keeping ratio
-			.should('match', new RegExp(`height: ${Math.round(Cypress.config('viewportWidth') * 0.7 / 3000 * 1688)}px`, 'i'))
-	})
-
 	it('Does not have any visual regression 2', function() {
 		cy.matchImageSnapshot()
 	})
@@ -198,16 +178,6 @@ describe('Open custom list of images in viewer with pagination', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			// 70% max width (see cypress config)
-			.should('match', new RegExp(`width: ${Math.round(Cypress.config('viewportWidth') * 0.7)}px`, 'i'))
-			// capped by the width, keeping ratio
-			.should('match', new RegExp(`height: ${Math.round(Cypress.config('viewportWidth') * 0.7 / 3000 * 2002)}px`, 'i'))
-	})
-
 	it('Does not have any visual regression 3', function() {
 		cy.matchImageSnapshot()
 	})
@@ -226,16 +196,6 @@ describe('Open custom list of images in viewer with pagination', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			// 70% max width (see cypress config)
-			.should('match', new RegExp(`width: ${Math.round(Cypress.config('viewportWidth') * 0.7)}px`, 'i'))
-			// capped by the width, keeping ratio
-			.should('match', new RegExp(`height: ${Math.round(Cypress.config('viewportWidth') * 0.7 / 3000 * 2000)}px`, 'i'))
-	})
-
 	it('Does not have any visual regression 4', function() {
 		cy.matchImageSnapshot()
 	})
@@ -254,16 +214,6 @@ describe('Open custom list of images in viewer with pagination', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			// 70% max width (see cypress config)
-			.should('match', new RegExp(`width: ${Math.round(Cypress.config('viewportWidth') * 0.7)}px`, 'i'))
-			// capped by the width, keeping ratio
-			.should('match', new RegExp(`height: ${Math.round(Cypress.config('viewportWidth') * 0.7 / 3000 * 2000)}px`, 'i'))
-	})
-
 	it('Does not have any visual regression 5', function() {
 		cy.matchImageSnapshot()
 	})

diff --git a/cypress/integration/images-custom-list.spec.js b/cypress/integration/images-custom-list.spec.js
@@ -109,16 +109,6 @@ describe('Open custom images list in viewer', function() {
 		cy.get('#viewer-content a.next').should('be.visible')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			// 70% max width (see cypress config)
-			.should('match', new RegExp(`width: ${Math.round(Cypress.config('viewportWidth') * 0.7)}px`, 'i'))
-			// capped by the width, keeping ratio
-			.should('match', new RegExp(`height: ${Math.round(Cypress.config('viewportWidth') * 0.7 / 3000 * 2000)}px`, 'i'))
-	})
-
 	it('Does not have any visual regression 1', function() {
 		cy.matchImageSnapshot()
 	})
@@ -143,16 +133,6 @@ describe('Open custom images list in viewer', function() {
 		cy.get('#viewer-content .modal-header button.icon-close').should('be.visible')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			// 70% max width (see cypress config)
-			.should('match', new RegExp(`width: ${Math.round(Cypress.config('viewportWidth') * 0.7)}px`, 'i'))
-			// capped by the width, keeping ratio
-			.should('match', new RegExp(`height: ${Math.round(Cypress.config('viewportWidth') * 0.7 / 3000 * 2002)}px`, 'i'))
-	})
-
 	it('Does not have any visual regression 2', function() {
 		cy.matchImageSnapshot()
 	})
@@ -177,16 +157,6 @@ describe('Open custom images list in viewer', function() {
 		cy.get('#viewer-content .modal-header button.icon-close').should('be.visible')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			// 70% max width (see cypress config)
-			.should('match', new RegExp(`width: ${Math.round(Cypress.config('viewportWidth') * 0.7)}px`, 'i'))
-			// capped by the width, keeping ratio
-			.should('match', new RegExp(`height: ${Math.round(Cypress.config('viewportWidth') * 0.7 / 3000 * 2000)}px`, 'i'))
-	})
-
 	it('Does not have any visual regression 3', function() {
 		cy.matchImageSnapshot()
 	})

diff --git a/cypress/integration/images.spec.js b/cypress/integration/images.spec.js
@@ -80,16 +80,6 @@ describe('Open images in viewer', function() {
 		cy.get('#viewer-content a.next').should('be.visible')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			// 70% max width (see cypress config)
-			.should('match', new RegExp(`width: ${Math.round(Cypress.config('viewportWidth') * 0.7)}px`, 'i'))
-			// capped by the width, keeping ratio
-			.should('match', new RegExp(`height: ${Math.round(Cypress.config('viewportWidth') * 0.7 / 3000 * 2000)}px`, 'i'))
-	})
-
 	it('Does not have any visual regression 1', function() {
 		cy.matchImageSnapshot()
 	})
@@ -108,16 +98,6 @@ describe('Open images in viewer', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			// 70% max width (see cypress config)
-			.should('match', new RegExp(`width: ${Math.round(Cypress.config('viewportWidth') * 0.7)}px`, 'i'))
-			// capped by the width, keeping ratio
-			.should('match', new RegExp(`height: ${Math.round(Cypress.config('viewportWidth') * 0.7 / 3000 * 1688)}px`, 'i'))
-	})
-
 	it('Does not have any visual regression 2', function() {
 		cy.matchImageSnapshot()
 	})
@@ -136,16 +116,6 @@ describe('Open images in viewer', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			// 70% max width (see cypress config)
-			.should('match', new RegExp(`width: ${Math.round(Cypress.config('viewportWidth') * 0.7)}px`, 'i'))
-			// capped by the width, keeping ratio
-			.should('match', new RegExp(`height: ${Math.round(Cypress.config('viewportWidth') * 0.7 / 3000 * 2002)}px`, 'i'))
-	})
-
 	it('Does not have any visual regression 3', function() {
 		cy.matchImageSnapshot()
 	})
@@ -165,16 +135,6 @@ describe('Open images in viewer', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			// 70% max width (see cypress config)
-			.should('match', new RegExp(`width: ${Math.round(Cypress.config('viewportWidth') * 0.7)}px`, 'i'))
-			// capped by the width, keeping ratio
-			.should('match', new RegExp(`height: ${Math.round(Cypress.config('viewportWidth') * 0.7 / 3000 * 2000)}px`, 'i'))
-	})
-
 	it('Does not have any visual regression 4', function() {
 		cy.matchImageSnapshot()
 	})
@@ -193,16 +153,6 @@ describe('Open images in viewer', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Have the proper height and width values', function() {
-		// not using should('have.css'), we want the inline styling
-		cy.get('#viewer-content .modal-container img.active')
-			.should('have.attr', 'style')
-			// 70% max width (see cypress config)
-			.should('match', new RegExp(`width: ${Math.round(Cypress.config('viewportWidth') * 0.7)}px`, 'i'))
-			// capped by the width, keeping ratio
-			.should('match', new RegExp(`height: ${Math.round(Cypress.config('viewportWidth') * 0.7 / 3000 * 2000)}px`, 'i'))
-	})
-
 	it('Does not have any visual regression 5', function() {
 		cy.matchImageSnapshot()
 	})

diff --git a/src/components/Images.vue b/src/components/Images.vue
@@ -29,8 +29,6 @@
 		}"
 		:src="data"
 		:style="{
-			height: minHeight,
-			width: minWidth,
 			marginTop: shiftY + 'px',
 			marginLeft: shiftX + 'px'
 		}"

diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue
@@ -683,12 +683,14 @@ export default {
 	transition: width ease 100ms;
 	.modal-container {
 		display: flex !important;
-		width: auto !important;
 		border-radius: 0 !important;
 		// let the mime components manage their own background-color
 		background-color: transparent;
 		justify-content: center;
 		align-items: center;
+		// Override max-height & max-width
+		width: 85% !important;
+		height: 90% !important;
 	}
 }