Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Put the children of AppNavigationItem outside of the main item #2704

Merged
merged 5 commits into from
May 25, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 34 additions & 24 deletions src/components/AppNavigationItem/AppNavigationItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ prevent the user from collapsing the items.
<AppNavigationItem title="Item with children" :allowCollapse="true" :open="true">
<template>
<AppNavigationItem title="AppNavigationItemChild1" />
<AppNavigationItem class="active" title="AppNavigationItemChild2" />
<AppNavigationItem title="AppNavigationItemChild2" />
<AppNavigationItem title="AppNavigationItemChild3" />
<AppNavigationItem title="AppNavigationItemChild4" />
</template>
Expand Down Expand Up @@ -111,16 +111,18 @@ Just set the `pinned` prop.
</docs>

<template>
<!-- Navigation item, can be either an <li> or a <router-link> depending on the props -->
<nav-element v-bind="navElement"
<li class="app-navigation-entry-wrapper"
:class="{
'app-navigation-entry--no-icon': !isIconShown,
'app-navigation-entry--opened': opened,
'app-navigation-entry--pinned': pinned,
'app-navigation-entry--collapsible': collapsible,
}">
<nav-element v-bind="navElement"
:class="{
'app-navigation-entry--no-icon': !isIconShown,
'app-navigation-entry--editing': editingActive,
'app-navigation-entry--deleted': undo,
'app-navigation-entry--collapsible': collapsible,
'active': isActive
'active': isActive,
}"
class="app-navigation-entry">
<!-- Icon and title -->
Expand Down Expand Up @@ -191,29 +193,29 @@ Just set the `pinned` prop.
</Actions>
</div>

<!-- Anything (virtual) that should be mounted in the component, like a related modal -->
<slot name="extra" />
</nav-element>
<!-- Children elements -->
<ul v-if="canHaveChildren && hasChildren" class="app-navigation-entry__children">
<slot />
</ul>

<!-- Anything (virtual) that should be mounted in the component, like a related modal -->
<slot name="extra" />
</nav-element>
</li>
</template>

<script>
import AppNavigationIconCollapsible from './AppNavigationIconCollapsible.vue'
import InputConfirmCancel from './InputConfirmCancel.vue'
import { directive as ClickOutside } from 'v-click-outside'

import Actions from '../Actions/index.js'
import ActionButton from '../ActionButton/index.js'
import AppNavigationIconCollapsible from './AppNavigationIconCollapsible.vue'
import isMobile from '../../mixins/isMobile/index.js'
import InputConfirmCancel from './InputConfirmCancel.vue'
import { t } from '../../l10n.js'

import Pencil from 'vue-material-design-icons/Pencil'
import Undo from 'vue-material-design-icons/Undo'

import { directive as ClickOutside } from 'v-click-outside'

export default {
name: 'AppNavigationItem',

Expand Down Expand Up @@ -400,18 +402,17 @@ export default {
}
},
// This is used to decide which outer element type to use
// li or router-link
navElement() {
if (this.to) {
return {
is: 'router-link',
tag: 'li',
tag: 'div',
to: this.to,
exact: this.exact,
}
}
return {
is: 'li',
is: 'div',
}
},
isActive() {
Expand Down Expand Up @@ -495,6 +496,20 @@ export default {
min-height: $clickable-area;
padding-right: 8px;

&-wrapper {
position: relative;
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
box-sizing: border-box;
width: 100%;

&.app-navigation-entry--collapsible:not(.app-navigation-entry--opened) > ul {
// NO ANIMATE because if not really hidden, we can still tab through it
display: none;
}
}

// When .active class is applied, change color background of link and utils. The
// !important prevents the focus state to override the active state.
&.active {
Expand All @@ -513,13 +528,10 @@ export default {
}

/* hide deletion/collapse of subitems */
&.app-navigation-entry--deleted,
&.app-navigation-entry--collapsible:not(.app-navigation-entry--opened) {
> ul {
&.app-navigation-entry--deleted > ul {
// NO ANIMATE because if not really hidden, we can still tab through it
display: none;
}
}

&:not(.app-navigation-entry--editing) {
.app-navigation-entry-link, .app-navigation-entry-div {
Expand Down Expand Up @@ -565,7 +577,7 @@ export default {
margin: auto;
}
}

}
/* Second level nesting for lists */
.app-navigation-entry__children {
position: relative;
Expand All @@ -578,8 +590,6 @@ export default {
display: inline-flex;
flex-wrap: wrap;
padding-left: $icon-size;
padding-right: 0;
}
}
}

Expand Down