From 6bf7dc1491ad4b15dcd3fcb4c439e1813387645d Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Wed, 16 Oct 2024 12:04:52 +0200 Subject: [PATCH] fix(files): Adjust NavigationQuota for Nextcloud 30 design Signed-off-by: Ferdinand Thiessen --- apps/files/src/components/NavigationQuota.vue | 13 ++++++++----- apps/files/src/views/Navigation.cy.ts | 10 ++++++---- cypress/support/component.ts | 4 ++++ 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/apps/files/src/components/NavigationQuota.vue b/apps/files/src/components/NavigationQuota.vue index 11867afea0973..389d3f346dad9 100644 --- a/apps/files/src/components/NavigationQuota.vue +++ b/apps/files/src/components/NavigationQuota.vue @@ -167,15 +167,18 @@ export default { // User storage stats display .app-navigation-entry__settings-quota { // Align title with progress and icon - &--not-unlimited::v-deep .app-navigation-entry__name { - margin-top: -6px; + --app-navigation-quota-margin: calc((var(--default-clickable-area) - 24px) / 2); // 20px icon size and 4px progress bar + + &--not-unlimited :deep(.app-navigation-entry__name) { + line-height: 1; + margin-top: var(--app-navigation-quota-margin); } progress { position: absolute; - bottom: 12px; - margin-left: 44px; - width: calc(100% - 44px - 22px); + bottom: var(--app-navigation-quota-margin); + margin-inline-start: var(--default-clickable-area); + width: calc(100% - (1.5 * var(--default-clickable-area))); } } diff --git a/apps/files/src/views/Navigation.cy.ts b/apps/files/src/views/Navigation.cy.ts index 46360a2357aa9..9c799116650c2 100644 --- a/apps/files/src/views/Navigation.cy.ts +++ b/apps/files/src/views/Navigation.cy.ts @@ -216,8 +216,9 @@ describe('Quota rendering', () => { cy.get('[data-cy-files-navigation-settings-quota]').should('be.visible') cy.get('[data-cy-files-navigation-settings-quota]').should('contain.text', '1 GB of 5 GB used') - cy.get('[data-cy-files-navigation-settings-quota] progress').should('be.visible') - cy.get('[data-cy-files-navigation-settings-quota] progress').should('have.attr', 'value', '20') + cy.get('[data-cy-files-navigation-settings-quota] progress') + .should('exist') + .and('have.attr', 'value', '20') }) it('Reached quota', () => { @@ -237,7 +238,8 @@ describe('Quota rendering', () => { cy.get('[data-cy-files-navigation-settings-quota]').should('be.visible') cy.get('[data-cy-files-navigation-settings-quota]').should('contain.text', '5 GB of 1 GB used') - cy.get('[data-cy-files-navigation-settings-quota] progress').should('be.visible') - cy.get('[data-cy-files-navigation-settings-quota] progress').should('have.attr', 'value', '100') // progress max is 100 + cy.get('[data-cy-files-navigation-settings-quota] progress') + .should('exist') + .and('have.attr', 'value', '100') // progress max is 100 }) }) diff --git a/cypress/support/component.ts b/cypress/support/component.ts index 765ed6155f945..e1c33f55eb66b 100644 --- a/cypress/support/component.ts +++ b/cypress/support/component.ts @@ -4,6 +4,10 @@ */ import 'cypress-axe' +// styles +import '../../apps/theming/css/default.css' +import '../../core/css/server.css' + /* eslint-disable */ import { mount } from '@cypress/vue2'