Skip to content

Commit

Permalink
chore: Make the NcAppNavigationSearch a fully separated component
Browse files Browse the repository at this point in the history 
Co-authored-by: Grigorii K. Shartsev <me@shgk.me>
Co-authored-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
@susnux @ShGKme
susnux and ShGKme committed Jul 22, 2024
1 parent 02e8cc0 commit eacab9a
Show file tree
Hide file tree
Showing 9 changed files with 309 additions and 298 deletions.
4 changes: 2 additions & 2 deletions l10n/messages.pot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -332,10 +332,10 @@ msgstr ""
msgid "Search for time zone"
msgstr ""

msgid "Search in app…"
msgid "Search results"
msgstr ""

msgid "Search results"
msgid "Search…"
msgstr ""

#. FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
Expand Down
174 changes: 15 additions & 159 deletions src/components/NcAppNavigation/NcAppNavigation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,117 +33,6 @@ emit('toggle-navigation', {
})
```

#### With in-app search

```vue
<template>
<div class="styleguide-wrapper">
<NcContent app-name="styleguide-app-navigation" class="content-styleguidist">
<NcAppNavigation show-search :search.sync="searchQuery">
<template #search-actions>
<NcActions aria-label="Filters">
<template #icon>
<IconFilter :size="20" />
</template>
<NcActionButton>
<template #icon>
<IconAccount :size="20" />
</template>
Filter by name
</NcActionButton>
<NcActionButton>
<template #icon>
<IconCalendarAccount :size="20" />
</template>
Filter by year
</NcActionButton>
</NcActions>
<NcButton aria-label="Search globally" type="tertiary">
<template #icon>
<IconSearchGlobal :size="20" />
</template>
</NcButton>
</template>
<template #list>
<NcAppNavigationItem name="First navigation entry">
<template #icon>
<IconStar :size="20" />
</template>
</NcAppNavigationItem>
<NcAppNavigationItem name="Second navigation entry">
<template #icon>
<IconStar :size="20" />
</template>
</NcAppNavigationItem>
</template>
</NcAppNavigation>
<NcAppContent>
<ul class="fake-content">
<li>Search query: {{ searchQuery }}</li>
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>
</NcAppContent>
</NcContent>
</div>
</template>
<script>
import IconAccount from 'vue-material-design-icons/Account.vue'
import IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'
import IconFilter from 'vue-material-design-icons/Filter.vue'
import IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'
import IconStar from 'vue-material-design-icons/Star.vue'
const exampleItem = ['Mary', 'Patricia', 'James', 'Michael']
export default {
components: {
IconAccount,
IconCalendarAccount,
IconFilter,
IconSearchGlobal,
IconStar,
},
data() {
return {
searchQuery: '',
}
},
computed: {
items() {
return exampleItem.filter((item) => item.toLocaleLowerCase().includes(this.searchQuery.toLocaleLowerCase()))
},
},
}
</script>
<style scoped>
/* This styles just mock NcContent and NcAppContent */
.content-styleguidist {
position: relative !important;
margin: 0 !important;
/* prevent jumping */
min-height: 200px;
}
.content-styleguidist > * {
height: auto;
}
.fake-content {
padding: var(--app-navigation-padding);
padding-top: calc(2 * var(--app-navigation-padding) + var(--default-clickable-area));
}
.styleguide-wrapper {
background-color: var(--color-background-plain);
padding: var(--body-container-margin);
}
</style>
```

</docs>

<template>
Expand All @@ -157,28 +46,21 @@ export default {
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 }">
<NcAppNavigationSearch v-if="showSearch"
:label="searchLabel || undefined"
:no-inline-actions="noSearchInlineActions"
:value="search"
@update:value="$emit('update:search', $event)">
<template #actions>
<!-- @slot Optional actions, like NcActions or icon only buttons, to show next to the search input -->
<slot name="search-actions" />
</template>
</NcAppNavigationSearch>

<!-- 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 @@ -192,7 +74,6 @@ import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
import { createFocusTrap } from 'focus-trap'
import NcAppNavigationList from '../NcAppNavigationList/index.js'
import NcAppNavigationSearch from './NcAppNavigationSearch.vue'
import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
import Vue from 'vue'
Expand All @@ -201,7 +82,6 @@ export default {
components: {
NcAppNavigationList,
NcAppNavigationSearch,
NcAppNavigationToggle,
},
Expand Down Expand Up @@ -229,38 +109,6 @@ export default {
type: String,
default: '',
},
/**
* If set an in-app search is shown as the first entry
*/
showSearch: {
type: Boolean,
default: false,
},
/**
* The current search query
*/
search: {
type: String,
default: '',
},
/**
* Label of in-app search input
*/
searchLabel: {
type: String,
default: null,
},
/**
* Force a menu if there is more than one search action
*/
noSearchInlineActions: {
type: Boolean,
default: false,
},
},
setup() {
Expand Down Expand Up @@ -399,6 +247,14 @@ export default {
margin-left: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));
}
&__search {
width: 100%;
}
&__body {
overflow-y: scroll;
}
// 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
123 changes: 0 additions & 123 deletions src/components/NcAppNavigation/NcAppNavigationSearch.vue
View file

This file was deleted.

Loading

0 comments on commit eacab9a

Please sign in to comment.