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

fix toggle overlapping other stuff #4134

Merged
merged 4 commits into from
May 23, 2023
Merged

fix toggle overlapping other stuff #4134

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
fad88ef
fix toggle overlapping other stuff
szaimen May 17, 2023
1b3e0fd
Show collapse button on the right
raimund-schluessler May 17, 2023
e60ccab
Fix lint
raimund-schluessler May 19, 2023
87b5870
Use Chevron up/down for NcAppNavigationCollapsible
raimund-schluessler May 19, 2023
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
10 changes: 5 additions & 5 deletions src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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 @@ -859,20 +903,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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@raimund-schluessler can the above be addressed by simply setting this to display:initial?

}
&.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;
Comment on lines -864 to +920
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think one of this changes now reverted the idea of #4103...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @Jerome-Herbinet

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The dropdown arrow isn't visible at the moment either. I just had to switch from visibility to display as otherwise the button takes space even if it's not visible.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see

}
// prevent the icon of children elements from being hidden
// by the previous rule
Expand Down