sascha
/
nextcloud-server
mirror of https://github.com/nextcloud/server.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: Make focussed app menu entry wider to see full name 

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
pull/47140/head
Ferdinand Thiessen 2024-08-08 16:14:03 +07:00
parent e49c55df12
commit ed16793089
No known key found for this signature in database
GPG Key ID: 45FAE7268762B400
2 changed files with 43 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
core/src/components/AppMenu.vue
Unescape Escape View File

@ -7,7 +7,8 @@
<nav ref="appMenu"
class="app-menu"
:aria-label="t('core', 'Applications menu')">
<ul class="app-menu__list">
<ul :aria-label="t('core', 'Apps')"
class="app-menu__list">
<AppMenuEntry v-for="app in mainAppList"
:key="app.id"
:app="app" />
@ -112,6 +113,8 @@ export default defineComponent({
<style scoped lang="scss">
.app-menu {
// The size the currently focussed entry will grow to show the full name
--app-menu-entry-growth: calc(var(--default-grid-baseline) * 4);
display: flex;
flex: 1 1;
width: 0;
@ -119,6 +122,17 @@ export default defineComponent({
&__list {
display: flex;
flex-wrap: nowrap;
margin-inline: calc(var(--app-menu-entry-growth) / 2);
transition: margin-inline var(--animation-quick) ease-in-out;
// Remove padding if the first child is focussed
&:has(.app-menu-entry:hover:first-child, .app-menu-entry:focus-within:first-child) {
margin-inline: 0 calc(var(--app-menu-entry-growth) / 2);
}
// Remove padding if the last child is focussed
&:has(.app-menu-entry:hover:last-child, .app-menu-entry:focus-within:last-child) {
margin-inline: calc(var(--app-menu-entry-growth) / 2) 0;
}
}
&__overflow {

30
core/src/components/AppMenuEntry.vue
Unescape Escape View File

@ -37,6 +37,8 @@ defineProps<{
width: var(--header-height);
height: var(--header-height);
position: relative;
// Needed to prevent jumping when hover an entry (keep in sync with :hover styles)
transition: width var(--animation-quick) ease-in-out;
&__link {
position: relative;
@ -95,14 +97,14 @@ defineProps<{
left: 50%;
bottom: 8px;
display: block;
transition: all 0.1s ease-in-out;
transition: all var(--animation-quick) ease-in-out;
opacity: 1;
}
}
&__icon,
&__label {
transition: all 0.1s ease-in-out;
transition: all var(--animation-quick) ease-in-out;
}
// Make the hovered entry bold to see that it is hovered
@ -110,6 +112,30 @@ defineProps<{
&:focus-within .app-menu-entry__label {
font-weight: bold;
}
// Adjust the width when an entry is focussed
// The focussed / hovered entry should grow, while both neighbors need to shrink
&:hover,
&:focus-within {
width: calc(var(--header-height) + var(--app-menu-entry-growth));
// The next entry needs to shrink half the growth
+ .app-menu-entry {
width: calc(var(--header-height) - (var(--app-menu-entry-growth) / 2));
.app-menu-entry__icon {
margin-inline-end: calc(var(--app-menu-entry-growth) / 2);
}
}
}
// The previous entry needs to shrink half the growth
&:has(+ .app-menu-entry:hover),
&:has(+ .app-menu-entry:focus-within) {
width: calc(var(--header-height) - (var(--app-menu-entry-growth) / 2));
.app-menu-entry__icon {
margin-inline-start: calc(var(--app-menu-entry-growth) / 2);
}
}
}
</style>