mirror of https://github.com/nextcloud/bookmarks
UI: Move search from nextcloud bar to our own toolbar
This commit is contained in:
Marcel Klehr
parent
12c31e8d25
commit
40cfd02bed
|
|
@ -59,6 +59,7 @@
|
|||
{{ t('bookmarks', 'RSS Feed') }}
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
<Search />
|
||||
<div v-if="hasSelection" class="breadcrumbs__bulkediting">
|
||||
{{
|
||||
selectionDescription
|
||||
|
|
@ -92,10 +93,11 @@ import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
|
|||
import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
|
||||
import { actions, mutations } from '../store/'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import Search from './Search'
|
||||
|
||||
export default {
|
||||
name: 'Breadcrumbs',
|
||||
components: { Multiselect, Actions, ActionButton, ActionSeparator },
|
||||
components: { Search, Multiselect, Actions, ActionButton, ActionSeparator },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -126,7 +128,10 @@ export default {
|
|||
if (this.$store.state.selection.bookmarks.length !== 0 && this.$store.state.selection.folders.length !== 0) {
|
||||
return this.t('bookmarks',
|
||||
'Selected {folders} folders and {bookmarks} bookmarks',
|
||||
{ folders: this.$store.state.selection.folders.length, bookmarks: this.$store.state.selection.bookmarks.length }
|
||||
{
|
||||
folders: this.$store.state.selection.folders.length,
|
||||
bookmarks: this.$store.state.selection.bookmarks.length,
|
||||
}
|
||||
)
|
||||
}
|
||||
if (this.$store.state.selection.bookmarks.length !== 0) {
|
||||
|
|
@ -146,22 +151,21 @@ export default {
|
|||
return ''
|
||||
},
|
||||
rssURL() {
|
||||
return (
|
||||
window.location.origin
|
||||
+ generateUrl(
|
||||
'/apps/bookmarks/public/rest/v2/bookmark?'
|
||||
+ new URLSearchParams(
|
||||
Object.assign({}, this.$store.state.fetchState.query, {
|
||||
format: 'rss',
|
||||
page: -1,
|
||||
...(this.$store.state.public && { token: this.$store.state.authToken }),
|
||||
})
|
||||
).toString()
|
||||
)
|
||||
return (window.location.origin
|
||||
+ generateUrl('/apps/bookmarks/public/rest/v2/bookmark?'
|
||||
+ new URLSearchParams(
|
||||
Object.assign({}, this.$store.state.fetchState.query, {
|
||||
format: 'rss',
|
||||
page: -1,
|
||||
...(this.$store.state.public && { token: this.$store.state.authToken }),
|
||||
}))
|
||||
.toString()
|
||||
)
|
||||
)
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
onSelectHome() {
|
||||
this.$router.push({ name: this.routes.HOME })
|
||||
|
|
@ -224,67 +228,67 @@ export default {
|
|||
</script>
|
||||
<style>
|
||||
.breadcrumbs {
|
||||
padding: 0 8px 0 44px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
background: var(--color-main-background-translucent);
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 0 8px 0 44px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
background: var(--color-main-background-translucent);
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.breadcrumbs + * {
|
||||
margin-top: 50px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.breadcrumbs__path {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.breadcrumbs__path > * {
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
padding: 5px 7px;
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
padding: 5px 7px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.breadcrumbs__path > *:not(.icon-breadcrumb) {
|
||||
min-width: 30px;
|
||||
opacity: 0.7;
|
||||
min-width: 30px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.breadcrumbs__path > *:hover {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.breadcrumbs__tags {
|
||||
width: 300px;
|
||||
flex: 1;
|
||||
width: 300px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.breadcrumbs__tags .multiselect__tags {
|
||||
border-top: none !important;
|
||||
border-left: none !important;
|
||||
border-right: none !important;
|
||||
border-top: none !important;
|
||||
border-left: none !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.breadcrumbs__AddFolder {
|
||||
margin-left: 5px;
|
||||
padding: 0;
|
||||
margin-top: -10px;
|
||||
margin-left: 5px;
|
||||
padding: 0;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.breadcrumbs__controls {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
padding: 0;
|
||||
flex: 2;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.breadcrumbs__controls > * {
|
||||
min-width: 30px;
|
||||
min-width: 30px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<div>
|
||||
<input v-show="show"
|
||||
ref="searchInput"
|
||||
type="text"
|
||||
:placeholder="t('bookmarks', 'Search')"
|
||||
@keyup="onSearch($event.target.value)">
|
||||
<Actions>
|
||||
<ActionButton icon="icon-search" @click="toggleSearchInput">
|
||||
{{ t('bookmarks', 'Search') }}
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { privateRoutes, publicRoutes } from '../router'
|
||||
import Actions from '@nextcloud/vue/dist/Components/Actions'
|
||||
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
|
||||
|
||||
export default {
|
||||
name: 'Search',
|
||||
components: { ActionButton, Actions },
|
||||
data() {
|
||||
return { show: false }
|
||||
},
|
||||
computed: {
|
||||
routes() {
|
||||
return this.$store.state.public ? privateRoutes : publicRoutes
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleSearchInput() {
|
||||
this.show = !this.show
|
||||
setTimeout(() => {
|
||||
this.$refs.searchInput.focus()
|
||||
}, 100)
|
||||
},
|
||||
onSearch(search) {
|
||||
this.$router.push({ name: this.routes.SEARCH, params: { search } })
|
||||
},
|
||||
onResetSearch() {
|
||||
this.$router.push({ name: this.routes.HOME })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
input[type=text] {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin: 0;
|
||||
left: 42px;
|
||||
padding-right: 40px;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -60,7 +60,6 @@ export default {
|
|||
},
|
||||
|
||||
async created() {
|
||||
this.search = new OCA.Search(this.onSearch, this.onResetSearch)
|
||||
// set loading indicator
|
||||
this.$store.commit(mutations.FETCH_START, { type: 'bookmarks' })
|
||||
await Promise.all([
|
||||
|
|
@ -115,14 +114,6 @@ export default {
|
|||
async reloadCount() {
|
||||
return this.$store.dispatch(actions.COUNT_BOOKMARKS, -1)
|
||||
},
|
||||
|
||||
onSearch(search) {
|
||||
this.$router.push({ name: privateRoutes.SEARCH, params: { search } })
|
||||
},
|
||||
|
||||
onResetSearch() {
|
||||
this.$router.push({ name: privateRoutes.HOME })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -88,14 +88,6 @@ export default {
|
|||
async reloadFolders() {
|
||||
return this.$store.dispatch(actions.LOAD_FOLDERS)
|
||||
},
|
||||
|
||||
onSearch(search) {
|
||||
this.$router.push({ name: this.routes.SEARCH, params: { search } })
|
||||
},
|
||||
|
||||
onResetSearch() {
|
||||
this.$router.push({ name: this.routes.HOME })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue