Merge pull request 'To add option to filter left menu (fix #282)' (#291) from feature/issue282 into develop
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Reviewed-on: #291
This commit is contained in:
commit
320f4cca3c
|
@ -318,12 +318,35 @@
|
||||||
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-always-displayed .side-menu-search {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
@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;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#side-menu.hide-opener.side-menu-big .side-menu-search {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
.side-menu-categories {
|
.side-menu-categories {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0;
|
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: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()
|
||||||
|
|
|
@ -92,3 +92,4 @@
|
||||||
"These applications must be selected in the previous option.": "Tyto aplikace je třeba vybrat v předchozí volbě."
|
"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"
|
"Hide labels on mouse over": "Skrýt popisky při najetím ukazatele myši"
|
||||||
"Except the hovered app": "Except the hovered app"
|
"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."
|
"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"
|
"Hide labels on mouse over": "Hide labels on mouse over"
|
||||||
"Except the hovered app": "Except the hovered app"
|
"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."
|
"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"
|
"Hide labels on mouse over": "Ocultar las etiquetas al pasar el ratón"
|
||||||
"Except the hovered app": "Except the hovered app"
|
"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."
|
"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"
|
"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"
|
"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."
|
"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"
|
"Hide labels on mouse over": "Hide labels on mouse over"
|
||||||
"Except the hovered app": "Except the hovered app"
|
"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."
|
"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"
|
"Except the hovered app": "Except the hovered app"
|
||||||
|
"Search": "Search"
|
||||||
|
|
|
@ -94,3 +94,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": ""
|
||||||
|
|
|
@ -92,3 +92,4 @@
|
||||||
"These applications must be selected in the previous option.": "These applications must be selected in the previous option."
|
"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"
|
"Hide labels on mouse over": "Hide labels on mouse over"
|
||||||
"Except the hovered app": "Except the hovered app"
|
"Except the hovered app": "Except the hovered app"
|
||||||
|
"Search": "Search"
|
||||||
|
|
|
@ -42,10 +42,16 @@
|
||||||
top: 49px;
|
top: 49px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#side-menu.hide-opener .side-menu-header {
|
#side-menu.hide-opener .side-menu-header .side-menu-opener.side-menu-closer
|
||||||
|
{
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#side-menu.hide-opener.side-menu-with-categories .side-menu-search
|
||||||
|
{
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
<?php if ($_['size-text'] === 'hidden'): ?>
|
<?php if ($_['size-text'] === 'hidden'): ?>
|
||||||
#side-menu, .side-menu-apps-list {
|
#side-menu, .side-menu-apps-list {
|
||||||
<?php if ($_['size-icon'] === 'big'): ?>
|
<?php if ($_['size-icon'] === 'big'): ?>
|
||||||
|
|
Loading…
Reference in a new issue