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

fix(NcAppNavigationItem): fix style when using active prop #4989

Merged
merged 4 commits into from
Dec 24, 2023
Merged

fix(NcAppNavigationItem): fix style when using active prop #4989

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
cb5e6e2
fix(NcAppNavigationItem): fix styling when using active prop
raimund-schluessler Dec 23, 2023
22fb60f
fix(NcAppNavigationItem): remove unused CSS class
raimund-schluessler Dec 23, 2023
3378be1
fix(NcAppNavigationItem): fix HTML structure of docs
raimund-schluessler Dec 23, 2023
194e3ad
fix(NcAppNavigationItem): adjust tests to cover active prop
raimund-schluessler Dec 23, 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
Binary file added ...avigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry-menu-active.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ts/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .../base/AppNavigationItem.cy.ts/NcAppNavigationItem-tertiary-non-active-entry.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 22 additions & 1 deletion cypress/visual/AppNavigationItem.cy.ts
View file
Open in desktop
Expand Up @@ -7,7 +7,13 @@ import NcAppNavigationItem from '../../src/components/NcAppNavigationItem/NcAppN
describe('NcAppNavigationItem', () => {
describe('With router link', () => {
const RouterComponent = defineComponent({
template: '<div style="width: 300px; background: white;"><NcAppNavigationItem name="Home" to="/" :editable="true" /><NcAppNavigationItem name="Foo" to="/foo" :editable="true" /></div>',
template: `
<div style="width: 300px; background: white;">
<NcAppNavigationItem name="Home" to="/" :editable="true" />
<NcAppNavigationItem name="Foo" to="/foo" :editable="true" />
<NcAppNavigationItem name="Back" active :editable="true" />
<NcAppNavigationItem name="Bar" :editable="true" />
</div>`,
components: { NcAppNavigationItem },
})

Expand Down Expand Up @@ -41,5 +47,20 @@ describe('NcAppNavigationItem', () => {
cy.contains('.app-navigation-entry', 'Home').find('.app-navigation-entry__actions').click()
cy.get('.app-navigation-entry--editing').compareSnapshot('NcAppNavigationItem-primary-on-active-route-menu-active')
})

// Entries without router

it('has tertiary styling on non active entry', () => {
cy.contains('.app-navigation-entry', 'Bar').compareSnapshot('NcAppNavigationItem-tertiary-non-active-entry')
})

it('has primary styling on active entry', () => {
cy.contains('.app-navigation-entry', 'Back').compareSnapshot('NcAppNavigationItem-primary-on-active-entry')
})

it('has primary button styling on active entry with editing=true', () => {
cy.contains('.app-navigation-entry', 'Back').find('.app-navigation-entry__actions').click()
cy.get('.app-navigation-entry--editing').compareSnapshot('NcAppNavigationItem-primary-on-active-entry-menu-active')
})
})
})
10 changes: 4 additions & 6 deletions src/assets/NcAppNavigationItem.scss
View file
Open in desktop
Expand Up @@ -34,7 +34,7 @@
}

// overwrite active text color
.app-navigation-entry-link, .app-navigation-entry-button {
.app-navigation-entry-link {
color: var(--color-primary-element-text) !important;
}
}
Expand Down Expand Up @@ -68,14 +68,12 @@
display: none;
}

&:not(.app-navigation-entry--editing) {
.app-navigation-entry-link, .app-navigation-entry-button {
padding-right: $icon-margin;
}
&:not(.app-navigation-entry--editing) .app-navigation-entry-link {
padding-right: $icon-margin;
}

// Main entry link
.app-navigation-entry-link, .app-navigation-entry-button {
.app-navigation-entry-link {
z-index: 100; /* above the bullet to allow click*/
display: flex;
overflow: hidden;
Expand Down
8 changes: 4 additions & 4 deletions src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
View file
Open in desktop
@@ -1,7 +1,7 @@
<docs>
```vue
<template>
<ul>
<ul class="nav">
<NcAppNavigationCaption
name="Your caption goes here">
<template #actions>
Expand All @@ -26,7 +26,7 @@
</script>
<style scoped>
/* mock the appnavigation */
ul {
ul.nav {
background-color: #cce6f4;
}
</style>
Expand All @@ -35,7 +35,7 @@
### Element with a slot for custom actions icon
```vue
<template>
<ul>
<ul class="nav">
<NcAppNavigationCaption
name="Your caption goes here">
<template #actionsTriggerIcon>
Expand Down Expand Up @@ -89,7 +89,7 @@
</script>
<style scoped>
/* mock the appnavigation */
ul {
ul.nav {
background-color: #cce6f4;
}
</style>
Expand Down
199 changes: 110 additions & 89 deletions src/components/NcAppNavigationItem/NcAppNavigationItem.vue
View file
Open in desktop
Expand Up @@ -33,11 +33,13 @@

```vue
<template>
<NcAppNavigationItem name="My name">
<template #icon>
<Check :size="20" />
</template>
</NcAppNavigationItem>
<ul>
<NcAppNavigationItem name="My name">
<template #icon>
<Check :size="20" />
</template>
</NcAppNavigationItem>
</ul>
</template>
<script>
import Check from 'vue-material-design-icons/Check'
Expand All @@ -52,12 +54,16 @@
* With a spinning loader instead of the icon:

```vue
<NcAppNavigationItem name="Loading Item" :loading="true" />
<ul>
<NcAppNavigationItem name="Loading Item" :loading="true" />
</ul>
```
* With an active state (only needed when not using `vue-router` and the `to` property, otherwise this is set automatically)

```vue
<ul>
<NcAppNavigationItem name="Current page" :active="true" />
</ul>
```

### Element with actions
Expand All @@ -67,30 +73,32 @@ button will be automatically created.
```vue
<template>
<div id="app-navigation-vue"><!-- Just a wrapper necessary in the docs. Not needed when NcAppNavigation is correctly used as parent. -->
<NcAppNavigationItem name="Item with actions">
<template #icon>
<Check :size="20" />
</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>
</NcAppNavigationItem>
<ul>
<NcAppNavigationItem name="Item with actions">
<template #icon>
<Check :size="20" />
</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>
</NcAppNavigationItem>
</ul>
</div>
</template>
<script>
Expand All @@ -115,16 +123,18 @@ Just nest the counter in a template within `<NcAppNavigationItem>` and add `#cou

```vue
<template>
<NcAppNavigationItem name="Item with counter">
<template #icon>
<Folder :size="20" />
</template>
<template #counter>
<NcCounterBubble>
99+
</NcCounterBubble>
</template>
</NcAppNavigationItem>
<ul>
<NcAppNavigationItem name="Item with counter">
<template #icon>
<Folder :size="20" />
</template>
<template #counter>
<NcCounterBubble>
99+
</NcCounterBubble>
</template>
</NcAppNavigationItem>
</ul>
</template>
<script>
import Folder from 'vue-material-design-icons/Folder'
Expand All @@ -144,41 +154,43 @@ prevent the user from collapsing the items.

```vue
<template>
<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>
<ul>
<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>
</ul>
</template>
<script>
import Folder from 'vue-material-design-icons/Folder'
Expand All @@ -203,12 +215,14 @@ the placeholder is the previous name of the element.

```vue
<template>
<NcAppNavigationItem name="Editable Item" :editable="true"
editPlaceholder="your_placeholder_here" @update:name="function(value){alert(value)}">
<template #icon>
<Folder :size="20" />
</template>
</NcAppNavigationItem>
<ul>
<NcAppNavigationItem name="Editable Item" :editable="true"
editPlaceholder="your_placeholder_here" @update:name="function(value){alert(value)}">
<template #icon>
<Folder :size="20" />
</template>
</NcAppNavigationItem>
</ul>
</template>
<script>
import Folder from 'vue-material-design-icons/Folder'
Expand All @@ -225,28 +239,35 @@ the placeholder is the previous name of the element.
Just set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.

```
<NcAppNavigationItem :undo="true" name="Deleted important entry" @undo="alert('undo delete')" />

<ul>
<NcAppNavigationItem :undo="true" name="Deleted important entry" @undo="alert('undo delete')" />
</ul>
```

### Link element
Href that start by http will be treated as external and opened in a new tab
```
<div>
<NcAppNavigationItem name="Files" href="/index.php/apps/files" />
<NcAppNavigationItem name="Nextcloud" href="https://nextcloud.com" />
<ul>
<NcAppNavigationItem name="Files" href="/index.php/apps/files" />
<NcAppNavigationItem name="Nextcloud" href="https://nextcloud.com" />
</ul>
</div>
```

### Custom title
```
<NcAppNavigationItem name="Nextcloud" title="Open the Nextcloud website" href="https://nextcloud.com" />
<ul>
<NcAppNavigationItem name="Nextcloud" title="Open the Nextcloud website" href="https://nextcloud.com" />
</ul>
```

### Pinned element
Just set the `pinned` prop.
```
<NcAppNavigationItem name="Pinned item" :pinned="true" />
<ul>
<NcAppNavigationItem name="Pinned item" :pinned="true" />
</ul>
```
</docs>

Expand Down Expand Up @@ -298,7 +319,7 @@ Just set the `pinned` prop.
<NcInputConfirmCancel ref="editingInput"
v-model="editingValue"
:placeholder="editPlaceholder !== '' ? editPlaceholder : name"
:primary="isActive && to"
:primary="(isActive && to) || active"
@cancel="cancelEditing"
@confirm="handleEditingDone" />
</div>
Expand Down Expand Up @@ -328,7 +349,7 @@ Just set the `pinned` prop.
:boundaries-element="actionsBoundariesElement"
:placement="menuPlacement"
:open="menuOpen"
:type="isActive && to ? 'primary' : null"
:type="(isActive && to) || active ? 'primary' : null"
:force-menu="forceMenu"
:default-icon="menuIcon"
@update:open="onMenuToggle">
Expand Down