diff options
| author | Ferdinand Thiessen <opensource@fthiessen.de> | 2024-08-05 13:08:16 +0200 |
|---|---|---|
| committer | Andy Scherzinger <info@andy-scherzinger.de> | 2024-08-07 21:29:00 +0200 |
| commit | 91f78936c94e2124d14defead1fa4ce14e7ee734 (patch) | |
| tree | 60c09bbec93a38e50f9c1fa6b6ee07bac4119af5 /core/src/components/AppMenuEntry.vue | |
| parent | 609fa7d5db69c7724ad42615e2146bef4f714c76 (diff) | |
| download | nextcloud-server-91f78936c94e2124d14defead1fa4ce14e7ee734.tar.gz nextcloud-server-91f78936c94e2124d14defead1fa4ce14e7ee734.zip | |
fix: Ensure app overflow menu is rendered centered
1. Fix app menu overflow button to be centered
2. Ensure the overflow calculation always just removed one element (incl. refactor to use `@vueuse`)
3. Ensure we use 1.5 line height for app menu, otherwise some languages look squashed under the app icon
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Diffstat (limited to 'core/src/components/AppMenuEntry.vue')
| -rw-r--r-- | core/src/components/AppMenuEntry.vue | 10 |
1 files changed, 7 insertions, 3 deletions
diff --git a/core/src/components/AppMenuEntry.vue b/core/src/components/AppMenuEntry.vue index aada0c63930..ead86759e4a 100644 --- a/core/src/components/AppMenuEntry.vue +++ b/core/src/components/AppMenuEntry.vue @@ -33,6 +33,7 @@ defineProps<{ <style scoped lang="scss"> .app-menu-entry { + --app-menu-entry-font-size: 12px; width: var(--header-height); height: var(--header-height); position: relative; @@ -54,8 +55,7 @@ defineProps<{ &__label { opacity: 0; position: absolute; - font-size: 12px; - line-height: 1.25; + font-size: var(--app-menu-entry-font-size); // this is shown directly on the background color: var(--color-background-plain-text); text-align: center; @@ -71,6 +71,10 @@ defineProps<{ letter-spacing: -0.5px; } + &__icon { + font-size: var(--app-menu-entry-font-size); + } + &--active { // When hover or focus, show the label and make it bolder than the other entries .app-menu-entry__label { @@ -117,7 +121,7 @@ defineProps<{ .app-menu__list:focus-within { // Move icon up so that the name does not overflow the icon .app-menu-entry__icon { - margin-block-end: calc(1.5 * 12px); // font size of label * line height + margin-block-end: 1lh; } // Make the label visible |