mirror of https://github.com/nextcloud/bookmarks
NC 20: Readd app-only search
Signed-off-by: Marcel Klehr <mklehr@gmx.net>
This commit is contained in:
parent
9e25c3f4c3
commit
c5403d4006
|
@ -7,34 +7,44 @@
|
|||
<template>
|
||||
<div :class="['controls', isPublic && 'wide']">
|
||||
<div class="controls__left">
|
||||
<template v-if="$route.name === routes.FOLDER || $route.name === routes.HOME || $route.name === routes.TAGS">
|
||||
<template v-if="$route.name === routes.FOLDER || $route.name === routes.HOME">
|
||||
<a :class="!isPublic? 'icon-home' : 'icon-public'" @click="onSelectHome" />
|
||||
<span class="icon-breadcrumb" />
|
||||
</template>
|
||||
<template v-if="$route.name === routes.FOLDER">
|
||||
<template v-for="folder in folderPath">
|
||||
<a
|
||||
:key="'a' + folder.id"
|
||||
href="#"
|
||||
tabindex="0"
|
||||
@click.prevent="onSelectFolder(folder.id)">{{ folder.title }}</a>
|
||||
<span :key="'b' + folder.id" class="icon-breadcrumb" />
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="$route.name === routes.TAGS">
|
||||
<span class="icon-tag" />
|
||||
<Multiselect
|
||||
class="controls__tags"
|
||||
:value="tags"
|
||||
:auto-limit="false"
|
||||
:limit="7"
|
||||
:options="allTags"
|
||||
:multiple="true"
|
||||
:placeholder="t('bookmarks', 'Select one or more tags')"
|
||||
@input="onTagsChange" />
|
||||
<button
|
||||
v-if="$route.name !== routes.SEARCH"
|
||||
v-tooltip="t('bookmarks', 'Search')"
|
||||
class="custom-button"
|
||||
:title="t('bookmarks', 'Search')"
|
||||
@click="openSearch">
|
||||
<MagnifyIcon :fill-color="colorMainText" class="action-button-mdi-icon" />
|
||||
</button>
|
||||
<template v-if="$route.name === routes.FOLDER || $route.name === routes.HOME">
|
||||
<a :class="!isPublic? 'icon-home' : 'icon-public'" @click="onSelectHome" />
|
||||
<span class="icon-breadcrumb" />
|
||||
</template>
|
||||
<template v-if="$route.name === routes.FOLDER">
|
||||
<template v-for="folder in folderPath">
|
||||
<a
|
||||
:key="'a' + folder.id"
|
||||
href="#"
|
||||
tabindex="0"
|
||||
@click.prevent="onSelectFolder(folder.id)">{{ folder.title }}</a>
|
||||
<span :key="'b' + folder.id" class="icon-breadcrumb" />
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="$route.name === routes.TAGS">
|
||||
<span class="icon-tag" />
|
||||
<Multiselect
|
||||
class="controls__tags"
|
||||
:value="tags"
|
||||
:auto-limit="false"
|
||||
:limit="7"
|
||||
:options="allTags"
|
||||
:multiple="true"
|
||||
:placeholder="t('bookmarks', 'Select one or more tags')"
|
||||
@input="onTagsChange" />
|
||||
</template>
|
||||
<template v-if="$route.name === routes.SEARCH">
|
||||
<MagnifyIcon :fill-color="colorMainText" />
|
||||
<input ref="search" v-model="search" type="search">
|
||||
</template>
|
||||
<Actions
|
||||
v-if="!isPublic"
|
||||
class="controls__AddFolder"
|
||||
|
@ -107,16 +117,18 @@ import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
|
|||
import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
|
||||
import RssIcon from 'vue-material-design-icons/Rss'
|
||||
import FolderMoveIcon from 'vue-material-design-icons/FolderMove'
|
||||
import MagnifyIcon from 'vue-material-design-icons/Magnify'
|
||||
import { actions, mutations } from '../store/'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
|
||||
export default {
|
||||
name: 'Controls',
|
||||
components: { Multiselect, Actions, ActionButton, ActionSeparator, FolderMoveIcon, RssIcon },
|
||||
components: { Multiselect, Actions, ActionButton, ActionSeparator, FolderMoveIcon, RssIcon, MagnifyIcon },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
url: '',
|
||||
search: this.$route.params.search || '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
@ -139,6 +151,9 @@ export default {
|
|||
hasSelection() {
|
||||
return this.$store.state.selection.bookmarks.length || this.$store.state.selection.folders.length
|
||||
},
|
||||
selectedFolders() {
|
||||
return this.$store.state.selection.folders
|
||||
},
|
||||
selectionDescription() {
|
||||
if (this.$store.state.selection.bookmarks.length !== 0 && this.$store.state.selection.folders.length !== 0) {
|
||||
return this.t('bookmarks',
|
||||
|
@ -178,6 +193,11 @@ export default {
|
|||
)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
search() {
|
||||
this.$router.push({ name: this.routes.SEARCH, params: { search: this.search } })
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
onSelectHome() {
|
||||
|
@ -237,6 +257,13 @@ export default {
|
|||
openRssUrl() {
|
||||
window.open(this.rssURL)
|
||||
},
|
||||
|
||||
openSearch() {
|
||||
this.$router.push({ name: this.routes.SEARCH, params: { search: '' } })
|
||||
setTimeout(() => {
|
||||
this.$refs.search.focus()
|
||||
}, 100)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -242,5 +242,7 @@ export default {
|
|||
margin: 10px;
|
||||
margin-top: 6px;
|
||||
height: 21px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue