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 #2572

Closed
wants to merge 3 commits into from
Closed

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

Changes from all commits
Commits
Show all changes
3 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
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
201 changes: 105 additions & 96 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,109 +111,111 @@ 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--editing' : editingActive,
'app-navigation-entry--deleted': undo,
'app-navigation-entry--collapsible': collapsible,
'active': isActive
}"
class="app-navigation-entry">
<!-- Icon and title -->
<a v-if="!undo"
class="app-navigation-entry-link"
:aria-description="ariaDescription"
href="#"
@click="onClick">

<!-- icon if not collapsible -->
<!-- never show the icon over the collapsible if mobile -->
<div :class="{ 'icon-loading-small': loading, [icon]: icon && isIconShown }"
class="app-navigation-entry-icon">
<slot v-show="!loading && isIconShown" name="icon" />
}">
<nav-element v-bind="navElement"
GretaD marked this conversation as resolved.
Show resolved Hide resolved
:class="{
'app-navigation-entry--no-icon': !isIconShown,
'app-navigation-entry--editing': editingActive,
'app-navigation-entry--deleted': undo,
'active': isActive,
}"
class="app-navigation-entry">
<!-- Icon and title -->
<a v-if="!undo"
class="app-navigation-entry-link"
:aria-description="ariaDescription"
href="#"
@click="onClick">

<!-- icon if not collapsible -->
<!-- never show the icon over the collapsible if mobile -->
<div :class="{ 'icon-loading-small': loading, [icon]: icon && isIconShown }"
class="app-navigation-entry-icon">
<slot v-show="!loading && isIconShown" name="icon" />
</div>
<span v-if="!editingActive" class="app-navigation-entry__title" :title="title">
{{ title }}
</span>
<div v-if="editingActive" class="editingContainer">
<InputConfirmCancel ref="editingInput"
v-model="editingValue"
:placeholder="editPlaceholder !== '' ? editPlaceholder : title"
@cancel="cancelEditing"
@confirm="handleEditingDone" />
</div>
</a>

<AppNavigationIconCollapsible v-if="collapsible" :open="opened" @click.prevent.stop="toggleCollapse" />
<!-- undo entry -->
<div v-if="undo" class="app-navigation-entry__deleted">
<div class="app-navigation-entry__deleted-description">
{{ title }}
</div>
</div>
<span v-if="!editingActive" class="app-navigation-entry__title" :title="title">
{{ title }}
</span>
<div v-if="editingActive" class="editingContainer">
<InputConfirmCancel ref="editingInput"
v-model="editingValue"
:placeholder="editPlaceholder !== '' ? editPlaceholder : title"
@cancel="cancelEditing"
@confirm="handleEditingDone" />
</div>
</a>

<AppNavigationIconCollapsible v-if="collapsible" :open="opened" @click.prevent.stop="toggleCollapse" />
<!-- undo entry -->
<div v-if="undo" class="app-navigation-entry__deleted">
<div class="app-navigation-entry__deleted-description">
{{ title }}
</div>
</div>

<!-- Counter and Actions -->
<div v-if="hasUtils && !editingActive" class="app-navigation-entry__utils">
<div v-if="$slots.counter"
class="app-navigation-entry__counter-wrapper">
<slot name="counter" />
</div>
<Actions menu-align="right"
:placement="menuPlacement"
:open="menuOpen"
:force-menu="forceMenu"
:default-icon="menuIcon"
@update:open="onMenuToggle">
<template #icon>
<!-- @slot Slot for the custom menu icon -->
<slot name="menu-icon" />
</template>
<ActionButton v-if="editable && !editingActive"
:aria-label="editButtonAriaLabel"
@click="handleEdit">
<!-- Counter and Actions -->
<div v-if="hasUtils && !editingActive" class="app-navigation-entry__utils">
<div v-if="$slots.counter"
class="app-navigation-entry__counter-wrapper">
<slot name="counter" />
</div>
<Actions menu-align="right"
:placement="menuPlacement"
:open="menuOpen"
:force-menu="forceMenu"
:default-icon="menuIcon"
@update:open="onMenuToggle">
<template #icon>
<Pencil :size="20" decorative />
<!-- @slot Slot for the custom menu icon -->
<slot name="menu-icon" />
</template>
{{ editLabel }}
</ActionButton>
<ActionButton v-if="undo"
:aria-label="undoButtonAriaLabel"
@click="handleUndo">
<template #icon>
<Undo :size="20" decorative />
</template>
</ActionButton>
<slot name="actions" />
</Actions>
</div>
<ActionButton v-if="editable && !editingActive"
:aria-label="editButtonAriaLabel"
@click="handleEdit">
<template #icon>
<Pencil :size="20" decorative />
</template>
{{ editLabel }}
</ActionButton>
<ActionButton v-if="undo"
:aria-label="undoButtonAriaLabel"
@click="handleUndo">
<template #icon>
<Undo :size="20" decorative />
</template>
</ActionButton>
<slot name="actions" />
</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">
raimund-schluessler marked this conversation as resolved.
Show resolved Hide resolved
<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,15 @@ 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%;
}

// 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 Down Expand Up @@ -565,21 +575,20 @@ export default {
margin: auto;
}
}

}
/* Second level nesting for lists */
.app-navigation-entry__children {
position: relative;
display: flex;
flex: 0 1 auto;
flex-direction: column;
width: 100%;
.app-navigation-entry__children {
position: relative;
display: flex;
flex: 0 1 auto;
flex-direction: column;
width: 100%;

.app-navigation-entry {
display: inline-flex;
flex-wrap: wrap;
padding-left: $icon-size;
padding-right: 0;
}
.app-navigation-entry {
display: inline-flex;
flex-wrap: wrap;
padding-left: $icon-size;
padding-right: 0;
}
}

Expand Down