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

[stable7] fix toggle overlapping other stuff #4149

Merged
merged 4 commits into from May 24, 2023
Merged

[stable7] fix toggle overlapping other stuff #4149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
57c9810
fix toggle overlapping other stuff
szaimen May 17, 2023
4f0b7a8
Show collapse button on the right
raimund-schluessler May 17, 2023
5700456
Fix lint
raimund-schluessler May 19, 2023
fb7419b
Use Chevron up/down for NcAppNavigationCollapsible
raimund-schluessler May 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
View file
Open in desktop
Expand Up @@ -28,9 +28,9 @@
:aria-label="labelButton"
@click="onClick">
<template #icon>
<ChevronDown v-if="open"
<ChevronUp v-if="open"
:size="20" />
<ChevronRight v-else
<ChevronDown v-else
:size="20" />
</template>
</NcButton>
Expand All @@ -40,16 +40,16 @@
import NcButton from '../NcButton/index.js'
import { t } from '../../l10n.js'

import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'

export default {
name: 'NcAppNavigationIconCollapsible',

components: {
NcButton,
ChevronRight,
ChevronDown,
ChevronUp,
},

props: {
Expand Down Expand Up @@ -78,7 +78,7 @@ export default {

<style lang="scss" scoped>
.button-vue.icon-collapse {
position: absolute;
position: relative;
z-index: 105; // above a, under button
color: var(--color-main-text);
right: 0;
Expand Down
71 changes: 58 additions & 13 deletions src/components/NcAppNavigationItem/NcAppNavigationItem.vue
View file
Open in desktop
Expand Up @@ -137,15 +137,59 @@ Just nest the counter in a template within `<NcAppNavigationItem>` and add `#cou
Wrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose wether to allow or
prevent the user from collapsing the items.

```
<NcAppNavigationItem name="Item with children" :allowCollapse="true" :open="true">
```vue
<template>
<NcAppNavigationItem name="AppNavigationItemChild1" />
<NcAppNavigationItem name="AppNavigationItemChild2" />
<NcAppNavigationItem name="AppNavigationItemChild3" />
<NcAppNavigationItem name="AppNavigationItemChild4" />
<NcAppNavigationItem name="Item with children" :allowCollapse="true" :open="true">
<template #icon>
<Folder :size="20" />
</template>
<template #counter>
<NcCounterBubble>
99+
</NcCounterBubble>
</template>
<template #actions>
<NcActionButton @click="alert('Edit')">
<template #icon>
<Pencil :size="20" />
</template>
Edit
</NcActionButton>
<NcActionButton @click="alert('Delete')">
<template #icon>
<Delete :size="20" />
</template>
Delete
</NcActionButton>
<NcActionLink name="Link" href="https://nextcloud.com">
<template #icon>
<OpenInNew :size="20" />
</template>
</NcActionLink>
</template>
<template>
<NcAppNavigationItem name="AppNavigationItemChild1" />
<NcAppNavigationItem name="AppNavigationItemChild2" />
<NcAppNavigationItem name="AppNavigationItemChild3" />
<NcAppNavigationItem name="AppNavigationItemChild4" />
</template>
</NcAppNavigationItem>
</template>
</NcAppNavigationItem>
<script>
import Folder from 'vue-material-design-icons/Folder'
import Delete from 'vue-material-design-icons/Delete'
import OpenInNew from 'vue-material-design-icons/OpenInNew'
import Pencil from 'vue-material-design-icons/Pencil'

export default {
components: {
Folder,
Delete,
OpenInNew,
Pencil,
},
}
</script>
```

### Editable element
Expand Down Expand Up @@ -253,7 +297,6 @@ Just set the `pinned` prop.
</div>
</a>

<NcAppNavigationIconCollapsible 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">
Expand Down Expand Up @@ -302,6 +345,7 @@ Just set the `pinned` prop.
<slot name="actions" />
</NcActions>
</div>
<NcAppNavigationIconCollapsible v-if="collapsible" :open="opened" @click.prevent.stop="toggleCollapse" />

<!-- Anything (virtual) that should be mounted in the component, like a related modal -->
<slot name="extra" />
Expand Down Expand Up @@ -878,20 +922,21 @@ export default {
}

/* Makes the icon of the collapsible element disappear
* When hovering on the root element */
* When hovering on the root element
*/
.app-navigation-entry--collapsible {
//shows the triangle button
// hides the triangle button
.icon-collapse {
visibility: hidden;
display: none;
}
&.app-navigation-entry--no-icon,
&:hover, &:focus {
a .app-navigation-entry-icon {
visibility: visible;
}
.icon-collapse {
//shows the triangle button
visibility: visible;
// shows the triangle button
display: initial;
}
// prevent the icon of children elements from being hidden
// by the previous rule
Expand Down