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

feat(NcAppNavigation): Provide consistent in-app search #5831

Merged
merged 2 commits into from
Jul 22, 2024
Merged

feat(NcAppNavigation): Provide consistent in-app search #5831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
02e8cc0
feat(NcAppNavigation): Provide consistent in-app search
susnux Jul 18, 2024
eacab9a
chore: Make the `NcAppNavigationSearch` a fully separated component
susnux Jul 22, 2024
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
3 changes: 3 additions & 0 deletions l10n/messages.pot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,9 @@ msgstr ""
msgid "Search results"
msgstr ""

msgid "Search…"
msgstr ""

#. FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
msgid "sec. ago"
msgstr ""
Expand Down
24 changes: 18 additions & 6 deletions src/components/NcAppNavigation/NcAppNavigation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,17 +46,21 @@ emit('toggle-navigation', {
class="app-navigation__content"
:inert="!open || undefined"
@keydown.esc="handleEsc">
<div class="app-navigation__search">
<!-- @slot For in-app search you can pass a `NcAppNavigationSearch` component as the slot content. -->
<slot name="search" />
</div>
<div class="app-navigation__body" :class="{ 'app-navigation__body--no-list': !$scopedSlots.list }">
<!-- The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->
<!-- @slot The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->
<slot />
</div>

<NcAppNavigationList v-if="$scopedSlots.list" class="app-navigation__list">
<!-- List for Navigation list items. Stretched between the main content and the footer -->
<!-- @slot List for Navigation list items. Stretched between the main content and the footer -->
<slot name="list" />
</NcAppNavigationList>

<!-- Footer for e.g. NcAppNavigationSettings -->
<!-- @slot Footer for e.g. NcAppNavigationSettings -->
<slot name="footer" />
</nav>
<NcAppNavigationToggle :open="open" @update:open="toggleNavigation" />
Expand All @@ -69,8 +73,8 @@ import { getTrapStack } from '../../utils/focusTrap.js'
import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
import { createFocusTrap } from 'focus-trap'

import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
import NcAppNavigationList from '../NcAppNavigationList/index.js'
import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
import Vue from 'vue'

export default {
Expand Down Expand Up @@ -159,7 +163,7 @@ export default {
* @param {boolean} [state] set the state instead of inverting the current one
*/
toggleNavigation(state) {
// Early return if alreay in that state
// Early return if already in that state
if (this.open === state) {
emit('navigation-toggled', {
open: this.open,
Expand Down Expand Up @@ -206,7 +210,7 @@ export default {
<style lang="scss">
.app-navigation,
.app-content {
/** Distance of the app naviation toggle and the first navigation item to the top edge of the app content container */
/** Distance of the app navigation toggle and the first navigation item to the top edge of the app content container */
--app-navigation-padding: #{$app-navigation-padding};
}
</style>
Expand Down Expand Up @@ -243,6 +247,14 @@ export default {
margin-left: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));
}

&__search {
width: 100%;
}

&__body {
overflow-y: scroll;
Copy link
Contributor

Choose a reason for hiding this comment

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

What's the idea behind this? It causes scrolling in Mail:
image

Copy link
Contributor

Choose a reason for hiding this comment

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

replace <template #default> with <template #search>

Copy link
Contributor Author

Choose a reason for hiding this comment

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

replace <template #default> with <template #search>

Only if for the search component

Copy link
Contributor Author

Choose a reason for hiding this comment

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

What's the idea behind this? It causes scrolling in Mail:

To have the app navigation scroll but not the search, see this:
#5831 (comment)

But I see, we should fix this.

}

// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot
// Same styles as NcAppNavigationList
&__content > ul {
Expand Down
20 changes: 10 additions & 10 deletions src/components/NcAppNavigationItem/NcAppNavigationItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@

<docs>

# Usage
### Usage

### Simple element
#### Simple element

* With an icon:

Expand Down Expand Up @@ -46,7 +46,7 @@
</ul>
```

### Element with actions
#### Element with actions
Wrap the children in a template. If you have more than 2 actions, a popover menu and a menu
button will be automatically created.

Expand Down Expand Up @@ -98,7 +98,7 @@
</script>
```

### Element with counter
#### Element with counter
Just nest the counter in a template within `<NcAppNavigationItem>` and add `#counter` to it.

```vue
Expand Down Expand Up @@ -127,7 +127,7 @@
</script>
```

### Element with children
#### Element with children

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.
Expand Down Expand Up @@ -189,7 +189,7 @@
</script>
```

### Editable element
#### Editable element
Add the prop `:editable=true` and an edit placeholder if you need it. By default
the placeholder is the previous name of the element.

Expand All @@ -215,7 +215,7 @@
</script>
```

### Undo element
#### Undo element
Just set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.

```
Expand All @@ -224,7 +224,7 @@
</ul>
```

### Link element
#### Link element
Href that start by http will be treated as external and opened in a new tab
```
<div>
Expand All @@ -235,14 +235,14 @@
</div>
```

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

### Pinned element
#### Pinned element
Just set the `pinned` prop.
```
<ul>
Expand Down Expand Up @@ -613,7 +613,7 @@
this.actionsBoundariesElement = document.querySelector('#content-vue') || undefined
},

data() {

Check warning on line 616 in src/components/NcAppNavigationItem/NcAppNavigationItem.vue

View workflow job for this annotation

GitHub Actions / NPM lint 

The "data" property should be above the "mounted" property on line 612
return {
editingValue: '',
opened: this.open, // Collapsible state
Expand All @@ -629,7 +629,7 @@
}
},

computed: {

Check warning on line 632 in src/components/NcAppNavigationItem/NcAppNavigationItem.vue

View workflow job for this annotation

GitHub Actions / NPM lint 

The "computed" property should be above the "mounted" property on line 612
isRouterLink() {
return this.to && !this.href
},
Expand Down Expand Up @@ -660,7 +660,7 @@
},
},

watch: {

Check warning on line 663 in src/components/NcAppNavigationItem/NcAppNavigationItem.vue

View workflow job for this annotation

GitHub Actions / NPM lint 

The "watch" property should be above the "mounted" property on line 612
open(newVal) {
this.opened = newVal
},
Expand Down
6 changes: 3 additions & 3 deletions src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
-->

<docs>
# Usage
### Usage

### New Item element
#### New Item element
```vue
<template>
<NcAppNavigationNewItem name="New Item" @new-item="function(value){alert(value)}">
Expand All @@ -26,7 +26,7 @@
</script>
```

### New Item element with a loading animation instead of the icon
#### New Item element with a loading animation instead of the icon
```vue
<template>
<NcAppNavigationNewItem name="New Item" :loading="true">
Expand Down
Loading
Loading