Skip to content
Snippets Groups Projects
Commit d7b3ffbf authored by Sascha Eggenberger's avatar Sascha Eggenberger :speech_balloon:
Browse files

Nav Switch Context fix focus

Changelog: changed
parent 4ab2d88e
No related branches found
No related tags found
1 merge request!121930Navigation: Switch Context focus improvements
...@@ -194,6 +194,7 @@ export default { ...@@ -194,6 +194,7 @@ export default {
:key="item.link" :key="item.link"
:item="item" :item="item"
:link-classes="{ [item.link_classes]: item.link_classes }" :link-classes="{ [item.link_classes]: item.link_classes }"
is-subitem
/> />
</ul> </ul>
</li> </li>
......
...@@ -64,7 +64,7 @@ export default { ...@@ -64,7 +64,7 @@ export default {
:search-results="searchResults" :search-results="searchResults"
> >
<template #view-all-items> <template #view-all-items>
<nav-item v-bind="viewAllProps" /> <nav-item v-bind="viewAllProps" is-subitem />
</template> </template>
</search-results> </search-results>
<frequent-items-list <frequent-items-list
...@@ -75,7 +75,7 @@ export default { ...@@ -75,7 +75,7 @@ export default {
:pristine-text="$options.i18n.pristineText" :pristine-text="$options.i18n.pristineText"
> >
<template #view-all-items> <template #view-all-items>
<nav-item v-bind="viewAllProps" /> <nav-item v-bind="viewAllProps" is-subitem />
</template> </template>
</frequent-items-list> </frequent-items-list>
</template> </template>
...@@ -24,6 +24,7 @@ export default { ...@@ -24,6 +24,7 @@ export default {
:key="item.id" :key="item.id"
:item="item" :item="item"
:link-classes="{ 'gl-py-2!': true }" :link-classes="{ 'gl-py-2!': true }"
is-subitem
> >
<template #icon> <template #icon>
<project-avatar <project-avatar
...@@ -32,6 +33,7 @@ export default { ...@@ -32,6 +33,7 @@ export default {
:project-avatar-url="item.avatar" :project-avatar-url="item.avatar"
:size="24" :size="24"
aria-hidden="true" aria-hidden="true"
class="gl-mr-n2"
/> />
</template> </template>
<template #actions> <template #actions>
......
...@@ -51,6 +51,11 @@ export default { ...@@ -51,6 +51,11 @@ export default {
required: false, required: false,
default: () => ({}), default: () => ({}),
}, },
isSubitem: {
type: Boolean,
required: false,
default: false,
},
}, },
computed: { computed: {
pillData() { pillData() {
...@@ -99,6 +104,7 @@ export default { ...@@ -99,6 +104,7 @@ export default {
return { return {
'gl-py-2': this.isPinnable, 'gl-py-2': this.isPinnable,
'gl-py-3': !this.isPinnable, 'gl-py-3': !this.isPinnable,
'gl-mx-2': this.isSubitem,
[this.item.link_classes]: this.item.link_classes, [this.item.link_classes]: this.item.link_classes,
...this.linkClasses, ...this.linkClasses,
}; };
...@@ -106,6 +112,9 @@ export default { ...@@ -106,6 +112,9 @@ export default {
navItemLinkComponent() { navItemLinkComponent() {
return this.item.to ? NavItemRouterLink : NavItemLink; return this.item.to ? NavItemRouterLink : NavItemLink;
}, },
iconClasses() {
return this.isSubitem === true ? 'gl-ml-2 gl-mr-4' : 'gl-w-6 gl-mx-3';
},
}, },
}; };
</script> </script>
...@@ -128,7 +137,7 @@ export default { ...@@ -128,7 +137,7 @@ export default {
style="width: 3px; border-radius: 3px; margin-right: 1px" style="width: 3px; border-radius: 3px; margin-right: 1px"
data-testid="active-indicator" data-testid="active-indicator"
></div> ></div>
<div class="gl-flex-shrink-0 gl-w-6 gl-mx-3"> <div :class="iconClasses" class="gl-flex-shrink-0">
<slot name="icon"> <slot name="icon">
<gl-icon v-if="item.icon" :name="item.icon" class="gl-ml-2 item-icon" /> <gl-icon v-if="item.icon" :name="item.icon" class="gl-ml-2 item-icon" />
<gl-icon <gl-icon
......
...@@ -65,7 +65,7 @@ export default { ...@@ -65,7 +65,7 @@ export default {
:search-results="searchResults" :search-results="searchResults"
> >
<template #view-all-items> <template #view-all-items>
<nav-item v-bind="viewAllProps" /> <nav-item v-bind="viewAllProps" is-subitem />
</template> </template>
</search-results> </search-results>
<frequent-items-list <frequent-items-list
...@@ -76,7 +76,7 @@ export default { ...@@ -76,7 +76,7 @@ export default {
:pristine-text="$options.i18n.pristineText" :pristine-text="$options.i18n.pristineText"
> >
<template #view-all-items> <template #view-all-items>
<nav-item v-bind="viewAllProps" /> <nav-item v-bind="viewAllProps" is-subitem />
</template> </template>
</frequent-items-list> </frequent-items-list>
</template> </template>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment