To add option to filter left menu (fix #282) #291
|
@ -318,12 +318,35 @@
|
|||
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);
|
||||
}
|
||||
|
||||
.side-menu-always-displayed .side-menu-search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
#side-menu.side-menu-big {
|
||||
max-width: 290px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#side-menu.hide-opener.side-menu-big .side-menu-search {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.side-menu-categories {
|
||||
display: block;
|
||||
padding: 0;
|
||||
|
|
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:label="settings.name"
|
||||
v-bind:avatar="settings.avatar" />
|
||||
|
||||
<AppSearch v-model:search="search" />
|
||||
<OpenerButton />
|
||||
|
||||
<Logo
|
||||
v-if="!avatar && !alwaysDisplayed && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}"
|
||||
v-bind:image="logo"
|
||||
v-bind:link="logoLink"
|
||||
/>
|
||||
|
||||
<Logo
|
||||
v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}"
|
||||
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}">
|
||||
<SideMenuApp
|
||||
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:key="key"
|
||||
v-bind:icon="app.icon"
|
||||
|
@ -58,6 +56,7 @@ import axios from 'axios'
|
|||
import OpenerButton from './OpenerButton'
|
||||
import SettingsButton from './SettingsButton'
|
||||
import SideMenuApp from './SideMenuApp'
|
||||
import AppSearch from './AppSearch'
|
||||
import Logo from './Logo'
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
|
||||
|
@ -68,6 +67,7 @@ export default {
|
|||
OpenerButton,
|
||||
SideMenuApp,
|
||||
Logo,
|
||||
AppSearch,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
@ -81,6 +81,7 @@ export default {
|
|||
settings: null,
|
||||
openerHover: false,
|
||||
alwaysDisplayed: false,
|
||||
search: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -125,6 +126,28 @@ export default {
|
|||
|
||||
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() {
|
||||
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 class="side-menu-header">
|
||||
<CloserButton />
|
||||
|
||||
<SettingsButton
|
||||
v-if="settings"
|
||||
v-bind:href="settings.href"
|
||||
v-bind:label="settings.name"
|
||||
v-bind:avatar="settings.avatar"
|
||||
/>
|
||||
|
||||
<AppSearch v-model:search="search" />
|
||||
<OpenerButton />
|
||||
</div>
|
||||
|
||||
|
@ -33,12 +32,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<div class="side-menu-categories">
|
||||
<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>
|
||||
|
||||
<ul class="side-menu-apps-list">
|
||||
<SideMenuBigApp
|
||||
v-for="(app, appId) in category.apps"
|
||||
v-if="searchMatch(app.name)"
|
||||
v-bind:key="appId"
|
||||
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
||||
v-bind:icon="app.icon"
|
||||
|
@ -59,6 +59,7 @@ import OpenerButton from './OpenerButton'
|
|||
import CloserButton from './CloserButton'
|
||||
import SettingsButton from './SettingsButton'
|
||||
import Loader from './Loader'
|
||||
import AppSearch from './AppSearch'
|
||||
import SideMenuBigApp from './SideMenuBigApp'
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
|
||||
|
@ -70,6 +71,7 @@ export default {
|
|||
CloserButton,
|
||||
Loader,
|
||||
SideMenuBigApp,
|
||||
AppSearch,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
@ -78,6 +80,7 @@ export default {
|
|||
targetBlank: false,
|
||||
targetBlankApps: [],
|
||||
settings: null,
|
||||
search: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -120,6 +123,28 @@ export default {
|
|||
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() {
|
||||
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:avatar="settings.avatar"
|
||||
/>
|
||||
|
||||
<AppSearch v-model:search="search" />
|
||||
<OpenerButton />
|
||||
</div>
|
||||
|
||||
|
@ -31,12 +31,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<div class="side-menu-categories">
|
||||
<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>
|
||||
|
||||
<ul class="side-menu-apps-list">
|
||||
<SideMenuBigApp
|
||||
v-for="(app, appId) in category.apps"
|
||||
v-if="searchMatch(app.name)"
|
||||
v-bind:key="appId"
|
||||
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
||||
v-bind:icon="app.icon"
|
||||
|
@ -56,6 +57,7 @@ import axios from 'axios'
|
|||
import OpenerButton from './OpenerButton'
|
||||
import SettingsButton from './SettingsButton'
|
||||
import Loader from './Loader'
|
||||
import AppSearch from './AppSearch'
|
||||
import SideMenuBigApp from './SideMenuBigApp'
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
|
||||
|
@ -66,6 +68,7 @@ export default {
|
|||
OpenerButton,
|
||||
Loader,
|
||||
SideMenuBigApp,
|
||||
AppSearch,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
@ -74,6 +77,7 @@ export default {
|
|||
targetBlank: false,
|
||||
targetBlankApps: [],
|
||||
settings: null,
|
||||
search: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -116,6 +120,28 @@ export default {
|
|||
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() {
|
||||
this.retrieveConfig()
|
||||
|
|
|
@ -92,3 +92,4 @@
|
|||
"These applications must be selected in the previous option.": "Tyto aplikace je třeba vybrat v předchozí volbě."
|
||||
"Hide labels on mouse over": "Skrýt popisky při najetím ukazatele myši"
|
||||
"Except the hovered app": "Except the hovered app"
|
||||
"Search": "Search"
|
||||
|
|
|
@ -92,3 +92,4 @@
|
|||
"These applications must be selected in the previous option.": "These applications must be selected in the previous option."
|
||||
"Hide labels on mouse over": "Hide labels on mouse over"
|
||||
"Except the hovered app": "Except the hovered app"
|
||||
"Search": "Search"
|
||||
|
|
|
@ -92,3 +92,4 @@
|
|||
"These applications must be selected in the previous option.": "Estas aplicaciones deben ser seleccionadas en las opciones anteriores."
|
||||
"Hide labels on mouse over": "Ocultar las etiquetas al pasar el ratón"
|
||||
"Except the hovered app": "Except the hovered app"
|
||||
"Search": "Search"
|
||||
|
|
|
@ -92,3 +92,4 @@
|
|||
"These applications must be selected in the previous option.": "Ces applications doivent également être sélectionnées dans l'option précédente."
|
||||
"Hide labels on mouse over": "Masquer le libellé des applications au passage de la souris"
|
||||
"Except the hovered app": "À l'exception de l'application survolée"
|
||||
"Search": "Rechercher"
|
||||
|
|
|
@ -92,3 +92,4 @@
|
|||
"These applications must be selected in the previous option.": "Deze toepassingen moeten bij de vorige optie zijn geselecteerd."
|
||||
"Hide labels on mouse over": "Hide labels on mouse over"
|
||||
"Except the hovered app": "Except the hovered app"
|
||||
"Search": "Search"
|
||||
|
|
|
@ -92,3 +92,4 @@
|
|||
"These applications must be selected in the previous option.": "These applications must be selected in the previous option."
|
||||
"Hide labels on mouse over": "Скрыть название при наведении мыши"
|
||||
"Except the hovered app": "Except the hovered app"
|
||||
"Search": "Search"
|
||||
|
|
|
@ -94,3 +94,4 @@
|
|||
"These applications must be selected in the previous option.": ""
|
||||
"Hide labels on mouse over": ""
|
||||
"Except the hovered app": ""
|
||||
"Search": ""
|
||||
|
|
|
@ -92,3 +92,4 @@
|
|||
"These applications must be selected in the previous option.": "These applications must be selected in the previous option."
|
||||
"Hide labels on mouse over": "Hide labels on mouse over"
|
||||
"Except the hovered app": "Except the hovered app"
|
||||
"Search": "Search"
|
||||
|
|
|
@ -42,10 +42,16 @@
|
|||
top: 49px;
|
||||
}
|
||||
|
||||
#side-menu.hide-opener .side-menu-header {
|
||||
#side-menu.hide-opener .side-menu-header .side-menu-opener.side-menu-closer
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#side-menu.hide-opener.side-menu-with-categories .side-menu-search
|
||||
{
|
||||
float: none;
|
||||
}
|
||||
|
||||
<?php if ($_['size-text'] === 'hidden'): ?>
|
||||
#side-menu, .side-menu-apps-list {
|
||||
<?php if ($_['size-icon'] === 'big'): ?>
|
||||
|
|
Loading…
Reference in a new issue