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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 5 commits into from
May 25, 2022
Merged

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

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3afa288
Put the children of AppNavigationItem outide of the main item
quentinguidee Mar 23, 2022
767baf5
Adjust children style to new component structure
raimund-schluessler May 20, 2022
c85aa53
Add pinned class to item wrapper
raimund-schluessler May 20, 2022
d70dd19
Fix collapsing AppNavigationItem children
raimund-schluessler May 20, 2022
eca26a9
Adjust padding right of appnavigation item children
raimund-schluessler May 20, 2022
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
View file
Open in desktop
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