aboutsummaryrefslogtreecommitdiffstats
path: root/apps
diff options
context:
space:
mode:
authorFerdinand Thiessen <opensource@fthiessen.de>2024-10-16 12:04:52 +0200
committerFerdinand Thiessen <opensource@fthiessen.de>2024-10-23 20:43:05 +0200
commit6bf7dc1491ad4b15dcd3fcb4c439e1813387645d (patch)
tree45de7dde391793000e5585d44a080628581c82f7 /apps
parent7b2a614ca5eabfed24b33e76e03ad18a3df1fc71 (diff)
downloadnextcloud-server-6bf7dc1491ad4b15dcd3fcb4c439e1813387645d.tar.gz
nextcloud-server-6bf7dc1491ad4b15dcd3fcb4c439e1813387645d.zip
fix(files): Adjust NavigationQuota for Nextcloud 30 design
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Diffstat (limited to 'apps')
-rw-r--r--apps/files/src/components/NavigationQuota.vue13
-rw-r--r--apps/files/src/views/Navigation.cy.ts10
2 files changed, 14 insertions, 9 deletions
diff --git a/apps/files/src/components/NavigationQuota.vue b/apps/files/src/components/NavigationQuota.vue
index 11867afea09..389d3f346da 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)));
}
}
</style>
diff --git a/apps/files/src/views/Navigation.cy.ts b/apps/files/src/views/Navigation.cy.ts
index 46360a2357a..9c799116650 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
})
})