add search component
This commit is contained in:
parent
c9bae926f1
commit
3ec823c856
|
@ -318,6 +318,21 @@
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.side-menu-search {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-search input {
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
color: var(--side-menu-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-search input::placeholder {
|
||||||
|
color: var(--side-menu-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1024px) {
|
@media screen and (max-width: 1024px) {
|
||||||
#side-menu.side-menu-big {
|
#side-menu.side-menu-big {
|
||||||
max-width: 290px;
|
max-width: 290px;
|
||||||
|
|
32
src/AppSearch.vue
Normal file
32
src/AppSearch.vue
Normal file
|
@ -0,0 +1,32 @@
|
||||||
|
<!--
|
||||||
|
@license GNU AGPL version 3 or any later version
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as
|
||||||
|
published by the Free Software Foundation, either version 3 of the
|
||||||
|
License, or (at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="side-menu-search">
|
||||||
|
<input type="text" :value="value" :placeholder="t('side_menu', 'Search')" @input="$emit('input', $event.target.value)">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'AppSearch',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -22,15 +22,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
v-bind:href="settings.href"
|
v-bind:href="settings.href"
|
||||||
v-bind:label="settings.name"
|
v-bind:label="settings.name"
|
||||||
v-bind:avatar="settings.avatar" />
|
v-bind:avatar="settings.avatar" />
|
||||||
|
<AppSearch v-model:search="search" />
|
||||||
<OpenerButton />
|
<OpenerButton />
|
||||||
|
|
||||||
<Logo
|
<Logo
|
||||||
v-if="!avatar && !alwaysDisplayed && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}"
|
v-if="!avatar && !alwaysDisplayed && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}"
|
||||||
v-bind:image="logo"
|
v-bind:image="logo"
|
||||||
v-bind:link="logoLink"
|
v-bind:link="logoLink"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Logo
|
<Logo
|
||||||
v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}"
|
v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}"
|
||||||
v-bind:image="avatar"
|
v-bind:image="avatar"
|
||||||
|
@ -41,7 +39,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<ul class="side-menu-apps-list" :class="{'side-menu-apps-list--with-settings': !!settings}">
|
<ul class="side-menu-apps-list" :class="{'side-menu-apps-list--with-settings': !!settings}">
|
||||||
<SideMenuApp
|
<SideMenuApp
|
||||||
v-for="(app, key) in apps"
|
v-for="(app, key) in apps"
|
||||||
v-if="!hiddenApps.includes(app.id)"
|
v-if="!hiddenApps.includes(app.id) && searchMatch(app.name)"
|
||||||
v-bind:classes="{'side-menu-app': true, 'active': app.active}"
|
v-bind:classes="{'side-menu-app': true, 'active': app.active}"
|
||||||
v-bind:key="key"
|
v-bind:key="key"
|
||||||
v-bind:icon="app.icon"
|
v-bind:icon="app.icon"
|
||||||
|
@ -58,6 +56,7 @@ import axios from 'axios'
|
||||||
import OpenerButton from './OpenerButton'
|
import OpenerButton from './OpenerButton'
|
||||||
import SettingsButton from './SettingsButton'
|
import SettingsButton from './SettingsButton'
|
||||||
import SideMenuApp from './SideMenuApp'
|
import SideMenuApp from './SideMenuApp'
|
||||||
|
import AppSearch from './AppSearch'
|
||||||
import Logo from './Logo'
|
import Logo from './Logo'
|
||||||
import { loadState } from '@nextcloud/initial-state'
|
import { loadState } from '@nextcloud/initial-state'
|
||||||
|
|
||||||
|
@ -68,6 +67,7 @@ export default {
|
||||||
OpenerButton,
|
OpenerButton,
|
||||||
SideMenuApp,
|
SideMenuApp,
|
||||||
Logo,
|
Logo,
|
||||||
|
AppSearch,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -81,6 +81,7 @@ export default {
|
||||||
settings: null,
|
settings: null,
|
||||||
openerHover: false,
|
openerHover: false,
|
||||||
alwaysDisplayed: false,
|
alwaysDisplayed: false,
|
||||||
|
search: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -125,6 +126,28 @@ export default {
|
||||||
|
|
||||||
retrieveConfig() {
|
retrieveConfig() {
|
||||||
},
|
},
|
||||||
|
|
||||||
|
hasSearchMatch(apps) {
|
||||||
|
if (this.search.trim() === '') {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let key in apps) {
|
||||||
|
if (this.searchMatch(apps[key].name)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
|
||||||
|
searchMatch(name) {
|
||||||
|
if (this.search.trim() === '') {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
return name.toLowerCase().includes(this.search.toLowerCase())
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
axios
|
axios
|
||||||
|
|
|
@ -18,14 +18,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<div id="side-menu" class="side-menu-big">
|
<div id="side-menu" class="side-menu-big">
|
||||||
<div class="side-menu-header">
|
<div class="side-menu-header">
|
||||||
<CloserButton />
|
<CloserButton />
|
||||||
|
|
||||||
<SettingsButton
|
<SettingsButton
|
||||||
v-if="settings"
|
v-if="settings"
|
||||||
v-bind:href="settings.href"
|
v-bind:href="settings.href"
|
||||||
v-bind:label="settings.name"
|
v-bind:label="settings.name"
|
||||||
v-bind:avatar="settings.avatar"
|
v-bind:avatar="settings.avatar"
|
||||||
/>
|
/>
|
||||||
|
<AppSearch v-model:search="search" />
|
||||||
<OpenerButton />
|
<OpenerButton />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -33,12 +32,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<div class="side-menu-categories">
|
<div class="side-menu-categories">
|
||||||
<Loader v-if="!items.length" />
|
<Loader v-if="!items.length" />
|
||||||
|
|
||||||
<div class="side-menu-category" v-for="(category, key) in items" v-bind:key="key">
|
<div class="side-menu-category" v-for="(category, key) in items" v-if="hasSearchMatch(category.apps)" v-bind:key="key">
|
||||||
<h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
|
<h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
|
||||||
|
|
||||||
<ul class="side-menu-apps-list">
|
<ul class="side-menu-apps-list">
|
||||||
<SideMenuBigApp
|
<SideMenuBigApp
|
||||||
v-for="(app, appId) in category.apps"
|
v-for="(app, appId) in category.apps"
|
||||||
|
v-if="searchMatch(app.name)"
|
||||||
v-bind:key="appId"
|
v-bind:key="appId"
|
||||||
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
||||||
v-bind:icon="app.icon"
|
v-bind:icon="app.icon"
|
||||||
|
@ -59,6 +59,7 @@ import OpenerButton from './OpenerButton'
|
||||||
import CloserButton from './CloserButton'
|
import CloserButton from './CloserButton'
|
||||||
import SettingsButton from './SettingsButton'
|
import SettingsButton from './SettingsButton'
|
||||||
import Loader from './Loader'
|
import Loader from './Loader'
|
||||||
|
import AppSearch from './AppSearch'
|
||||||
import SideMenuBigApp from './SideMenuBigApp'
|
import SideMenuBigApp from './SideMenuBigApp'
|
||||||
import { loadState } from '@nextcloud/initial-state'
|
import { loadState } from '@nextcloud/initial-state'
|
||||||
|
|
||||||
|
@ -70,6 +71,7 @@ export default {
|
||||||
CloserButton,
|
CloserButton,
|
||||||
Loader,
|
Loader,
|
||||||
SideMenuBigApp,
|
SideMenuBigApp,
|
||||||
|
AppSearch,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -78,6 +80,7 @@ export default {
|
||||||
targetBlank: false,
|
targetBlank: false,
|
||||||
targetBlankApps: [],
|
targetBlankApps: [],
|
||||||
settings: null,
|
settings: null,
|
||||||
|
search: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -120,6 +123,28 @@ export default {
|
||||||
this.settings = config['settings']
|
this.settings = config['settings']
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
hasSearchMatch(apps) {
|
||||||
|
if (this.search.trim() === '') {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let key in apps) {
|
||||||
|
if (this.searchMatch(apps[key].name)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
|
||||||
|
searchMatch(name) {
|
||||||
|
if (this.search.trim() === '') {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
return name.toLowerCase().includes(this.search.toLowerCase())
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.retrieveConfig()
|
this.retrieveConfig()
|
||||||
|
|
|
@ -23,7 +23,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
v-bind:label="settings.name"
|
v-bind:label="settings.name"
|
||||||
v-bind:avatar="settings.avatar"
|
v-bind:avatar="settings.avatar"
|
||||||
/>
|
/>
|
||||||
|
<AppSearch v-model:search="search" />
|
||||||
<OpenerButton />
|
<OpenerButton />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -31,12 +31,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<div class="side-menu-categories">
|
<div class="side-menu-categories">
|
||||||
<Loader v-if="!items.length" />
|
<Loader v-if="!items.length" />
|
||||||
|
|
||||||
<div class="side-menu-category" v-for="(category, key) in items" v-bind:key="key">
|
<div class="side-menu-category" v-for="(category, key) in items" v-if="hasSearchMatch(category.apps)" v-bind:key="key">
|
||||||
<h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
|
<h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
|
||||||
|
|
||||||
<ul class="side-menu-apps-list">
|
<ul class="side-menu-apps-list">
|
||||||
<SideMenuBigApp
|
<SideMenuBigApp
|
||||||
v-for="(app, appId) in category.apps"
|
v-for="(app, appId) in category.apps"
|
||||||
|
v-if="searchMatch(app.name)"
|
||||||
v-bind:key="appId"
|
v-bind:key="appId"
|
||||||
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
||||||
v-bind:icon="app.icon"
|
v-bind:icon="app.icon"
|
||||||
|
@ -56,6 +57,7 @@ import axios from 'axios'
|
||||||
import OpenerButton from './OpenerButton'
|
import OpenerButton from './OpenerButton'
|
||||||
import SettingsButton from './SettingsButton'
|
import SettingsButton from './SettingsButton'
|
||||||
import Loader from './Loader'
|
import Loader from './Loader'
|
||||||
|
import AppSearch from './AppSearch'
|
||||||
import SideMenuBigApp from './SideMenuBigApp'
|
import SideMenuBigApp from './SideMenuBigApp'
|
||||||
import { loadState } from '@nextcloud/initial-state'
|
import { loadState } from '@nextcloud/initial-state'
|
||||||
|
|
||||||
|
@ -66,6 +68,7 @@ export default {
|
||||||
OpenerButton,
|
OpenerButton,
|
||||||
Loader,
|
Loader,
|
||||||
SideMenuBigApp,
|
SideMenuBigApp,
|
||||||
|
AppSearch,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -74,6 +77,7 @@ export default {
|
||||||
targetBlank: false,
|
targetBlank: false,
|
||||||
targetBlankApps: [],
|
targetBlankApps: [],
|
||||||
settings: null,
|
settings: null,
|
||||||
|
search: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -116,6 +120,28 @@ export default {
|
||||||
this.settings = config['settings']
|
this.settings = config['settings']
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
hasSearchMatch(apps) {
|
||||||
|
if (this.search.trim() === '') {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let key in apps) {
|
||||||
|
if (this.searchMatch(apps[key].name)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
|
||||||
|
searchMatch(name) {
|
||||||
|
if (this.search.trim() === '') {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
return name.toLowerCase().includes(this.search.toLowerCase())
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.retrieveConfig()
|
this.retrieveConfig()
|
||||||
|
|
Loading…
Reference in a new issue