fix #63: add a new side menu with categories
This commit is contained in:
parent
1896bb399d
commit
3975f3be28
|
|
@ -162,23 +162,23 @@
|
|||
transition-property: width;
|
||||
}
|
||||
|
||||
#side-menu.side-menu-big {
|
||||
#side-menu.side-menu-big, #side-menu.side-menu-with-categories {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.side-menu-big .side-menu-header {
|
||||
.side-menu-big .side-menu-header, .side-menu-with-categories .side-menu-header {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.side-menu-big .side-menu-apps-list {
|
||||
.side-menu-big .side-menu-apps-list, .side-menu-with-categories .side-menu-apps-list {
|
||||
height: auto;
|
||||
position: static;
|
||||
max-width: 100vw;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.side-menu-big .side-menu-app a {
|
||||
.side-menu-big .side-menu-app a, .side-menu-with-categories .side-menu-app a {
|
||||
padding: 7px 0 7px 7px;
|
||||
}
|
||||
|
||||
|
|
@ -217,7 +217,7 @@
|
|||
stroke: var(--side-menu-text-color, #fff);
|
||||
}
|
||||
|
||||
.side-menu-big .side-menu-app-icon {
|
||||
.side-menu-with-categories .side-menu-app-icon, .side-menu-big .side-menu-app-icon {
|
||||
vertical-align: middle;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
|
@ -271,6 +271,20 @@
|
|||
transform: translateX(calc(-100% + 50px)) !important;
|
||||
}
|
||||
|
||||
#side-menu.side-menu-with-categories {
|
||||
max-width: 290px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.side-menu-with-categories .side-menu-categories {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.side-menu-with-categories .side-menu-category {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
#side-menu.side-menu-big {
|
||||
max-width: 290px;
|
||||
|
|
|
|||
223
img/admin/layout-side-with-categories.svg
Normal file
223
img/admin/layout-side-with-categories.svg
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="571.907"
|
||||
height="156.921"
|
||||
viewBox="0 0 151.317 41.519"
|
||||
version="1.1"
|
||||
id="svg901"
|
||||
sodipodi:docname="layout-side-menu-with-categories.svg"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
|
||||
<metadata
|
||||
id="metadata907">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs905" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1918"
|
||||
inkscape:window-height="1036"
|
||||
id="namedview903"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.6086532"
|
||||
inkscape:cx="455.61054"
|
||||
inkscape:cy="16.694081"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="21"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg901" />
|
||||
<path
|
||||
style="marker:none"
|
||||
color="#000"
|
||||
overflow="visible"
|
||||
fill="#fff"
|
||||
stroke="#b3b3b3"
|
||||
stroke-width=".359"
|
||||
stroke-linecap="square"
|
||||
paint-order="fill markers stroke"
|
||||
d="M.18.18h58.532v41.16H.18zM62.735.18h58.532v41.16H62.735z"
|
||||
id="path853" />
|
||||
<g
|
||||
fill="#b3b3b3"
|
||||
stroke="#ccc"
|
||||
fill-rule="evenodd"
|
||||
stroke-width="1.465"
|
||||
stroke-linecap="round"
|
||||
id="g857">
|
||||
<path
|
||||
d="M84.066 21.35l5.055-5.056M82.925 29.835l18.152-18.151M95.893 25.225l3.585-3.586"
|
||||
id="path855" />
|
||||
</g>
|
||||
<path
|
||||
style="marker:none"
|
||||
color="#000"
|
||||
overflow="visible"
|
||||
fill="none"
|
||||
stroke="#b3b3b3"
|
||||
stroke-width=".359"
|
||||
stroke-linecap="square"
|
||||
paint-order="fill markers stroke"
|
||||
d="M62.735.18h58.532v41.16H62.735z"
|
||||
id="path861" />
|
||||
<path
|
||||
style="marker:none"
|
||||
color="#000"
|
||||
overflow="visible"
|
||||
fill="#f9f9f9"
|
||||
stroke="#ccc"
|
||||
stroke-width=".359"
|
||||
stroke-linecap="square"
|
||||
paint-order="fill markers stroke"
|
||||
d="M.18.18h58.532v5.063H.18z"
|
||||
id="path877" />
|
||||
<path
|
||||
style="marker:none"
|
||||
color="#000"
|
||||
overflow="visible"
|
||||
fill="none"
|
||||
stroke="#b3b3b3"
|
||||
stroke-width=".359"
|
||||
stroke-linecap="square"
|
||||
paint-order="fill markers stroke"
|
||||
d="M.18.18h58.532v41.16H.18z"
|
||||
id="path879" />
|
||||
<path
|
||||
style="marker:none"
|
||||
color="#000"
|
||||
overflow="visible"
|
||||
fill="#666"
|
||||
stroke="#ccc"
|
||||
stroke-width=".359"
|
||||
stroke-linecap="square"
|
||||
paint-order="fill markers stroke"
|
||||
d="M1.357 1.034h3.496V4.39H1.357z"
|
||||
id="path881" />
|
||||
<path
|
||||
style="marker:none"
|
||||
color="#000"
|
||||
overflow="visible"
|
||||
fill="#e6e6e6"
|
||||
stroke="#ccc"
|
||||
stroke-width=".359"
|
||||
stroke-linecap="square"
|
||||
paint-order="fill markers stroke"
|
||||
d="M6.068 1.034h6.102V4.39H6.068z"
|
||||
id="path883" />
|
||||
<g
|
||||
fill="#b3b3b3"
|
||||
stroke="#ccc"
|
||||
fill-rule="evenodd"
|
||||
stroke-width="1.465"
|
||||
stroke-linecap="round"
|
||||
id="g887">
|
||||
<path
|
||||
d="M21.51 21.35l5.056-5.056M20.37 29.835L38.52 11.684M33.337 25.225l3.586-3.586"
|
||||
id="path885" />
|
||||
</g>
|
||||
<path
|
||||
style="marker:none"
|
||||
color="#000"
|
||||
overflow="visible"
|
||||
fill="#fff"
|
||||
stroke="#b3b3b3"
|
||||
stroke-width=".359"
|
||||
stroke-linecap="square"
|
||||
paint-order="fill markers stroke"
|
||||
d="M125.857.18h25.28v41.16h-25.28z"
|
||||
id="path889" />
|
||||
<path
|
||||
style="marker:none"
|
||||
color="#000"
|
||||
overflow="visible"
|
||||
fill="#f9f9f9"
|
||||
stroke="#ccc"
|
||||
stroke-width=".359"
|
||||
stroke-linecap="square"
|
||||
paint-order="fill markers stroke"
|
||||
d="M125.857.18h25.257v5.063h-25.257z"
|
||||
id="path891" />
|
||||
<path
|
||||
style="marker:none"
|
||||
color="#000"
|
||||
overflow="visible"
|
||||
fill="none"
|
||||
stroke="#b3b3b3"
|
||||
stroke-width=".359"
|
||||
stroke-linecap="square"
|
||||
paint-order="fill markers stroke"
|
||||
d="M125.857.18h25.257v41.16h-25.257z"
|
||||
id="path893" />
|
||||
<path
|
||||
style="marker:none"
|
||||
color="#000"
|
||||
overflow="visible"
|
||||
fill="#4d4d4d"
|
||||
stroke="#b3b3b3"
|
||||
stroke-width=".359"
|
||||
stroke-linecap="square"
|
||||
paint-order="fill markers stroke"
|
||||
d="M125.857.18h20.829v41.16h-20.83z"
|
||||
id="path895" />
|
||||
<path
|
||||
style="marker:none"
|
||||
color="#000"
|
||||
overflow="visible"
|
||||
fill="#666"
|
||||
stroke="#ccc"
|
||||
stroke-width=".359"
|
||||
stroke-linecap="square"
|
||||
paint-order="fill markers stroke"
|
||||
d="M127.034 1.034h3.496V4.39h-3.496z"
|
||||
id="path897" />
|
||||
<path
|
||||
style="marker:none"
|
||||
color="#000"
|
||||
overflow="visible"
|
||||
fill="#e6e6e6"
|
||||
stroke="#ccc"
|
||||
stroke-width=".359"
|
||||
stroke-linecap="square"
|
||||
paint-order="fill markers stroke"
|
||||
d="M127.569 10.155h1.893v1.81h-1.893zM130.498 10.486h12.463v1.148h-12.463zM127.569 13.696h1.893v1.81h-1.893zM130.498 14.027h10.592v1.148h-10.592zM127.569 17.104h1.893v1.81h-1.893zM130.498 17.435h12.997v1.148h-12.997zM127.569 24.708h1.893v1.81h-1.893zM130.498 25.04h7.585v1.147h-7.585zM127.569 28.116h1.893v1.81h-1.893zM130.498 28.447h11.46v1.148h-11.46zM127.569 31.657h1.893v1.81h-1.893zM130.498 31.988h9.322v1.148h-9.322zM127.569 35.065h1.893v1.81h-1.893zM130.498 35.396h11.126v1.148h-11.126zM127.616 6.848h11.518v1.148h-11.518zM127.569 21.311h9.344v1.148h-9.344z"
|
||||
id="path899" />
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
style="color:#000000;overflow:visible;fill:#4d4d4d;stroke:#b3b3b3;stroke-width:0.359;stroke-linecap:square;marker:none;paint-order:fill markers stroke"
|
||||
overflow="visible"
|
||||
d="m 62.728587,0.17999881 h 20.829 V 41.34 h -20.83 z"
|
||||
id="path895-5" />
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
style="color:#000000;overflow:visible;fill:#666666;stroke:#cccccc;stroke-width:0.359;stroke-linecap:square;marker:none;paint-order:fill markers stroke"
|
||||
overflow="visible"
|
||||
d="m 63.905587,1.0339988 h 3.496 V 4.389999 h -3.496 z"
|
||||
id="path897-3" />
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
style="color:#000000;overflow:visible;fill:#e6e6e6;stroke:#cccccc;stroke-width:0.359;stroke-linecap:square;marker:none;paint-order:fill markers stroke"
|
||||
overflow="visible"
|
||||
d="m 64.440587,10.154999 h 1.893 v 1.81 h -1.893 z m 2.929,0.331 h 12.463 v 1.148 h -12.463 z m -2.929,3.21 h 1.893 v 1.81 h -1.893 z m 2.929,0.331 h 10.592 v 1.148 h -10.592 z m -2.929,3.077 h 1.893 v 1.81 h -1.893 z m 2.929,0.331 h 12.997 v 1.148 h -12.997 z m -2.929,7.273 h 1.893 V 26.518 h -1.893 z m 2.929,0.332 h 7.585 v 1.147 h -7.585 z m -2.929,3.076001 h 1.893 v 1.81 h -1.893 z m 2.929,0.330999 h 11.46 v 1.147999 h -11.46 z m -2.929,3.21 h 1.893 v 1.809999 h -1.893 z m 2.929,0.330999 h 9.322 v 1.148001 h -9.322 z m -2.929,3.077001 h 1.893 v 1.809999 h -1.893 z m 2.929,0.331001 h 11.126 v 1.147999 h -11.126 z m -2.882,-28.5480012 h 11.518 v 1.1480001 h -11.518 z m -0.047,14.4630002 h 9.344 v 1.148 h -9.344 z"
|
||||
id="path899-5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.3 KiB |
|
|
@ -152,6 +152,7 @@ class JsController extends Controller
|
|||
'hide-when-no-apps' => $this->config->getAppValueBool('hide-when-no-apps', '0'),
|
||||
'loader-enabled' => $this->config->getAppValueBool('loader-enabled', '1'),
|
||||
'always-displayed' => $this->config->getAppValueBool('always-displayed', '0'),
|
||||
'side-with-categories' => $this->config->getAppValueBool('side-with-categories', '0'),
|
||||
'big-menu' => $this->config->getAppValueBool('big-menu', '0'),
|
||||
'big-menu-hidden-apps' => $this->config->getAppValueArray('big-menu-hidden-apps', '[]'),
|
||||
'avatar' => $avatar,
|
||||
|
|
|
|||
|
|
@ -102,6 +102,7 @@ class Admin implements ISettings
|
|||
'cache' => $this->config->getAppValue('cache', '0'),
|
||||
'always-displayed' => $this->config->getAppValue('always-displayed', '0'),
|
||||
'big-menu' => $this->config->getAppValue('big-menu', '0'),
|
||||
'side-with-categories' => $this->config->getAppValue('side-with-categories', '0'),
|
||||
'big-menu-hidden-apps' => $this->config->getAppValueArray('big-menu-hidden-apps', '[]'),
|
||||
'display-logo' => $this->config->getAppValue('display-logo', '1'),
|
||||
'add-logo-link' => $this->config->getAppValue('add-logo-link', '1'),
|
||||
|
|
|
|||
|
|
@ -18,11 +18,9 @@
|
|||
import Vue from 'vue'
|
||||
import SideMenu from './SideMenu.vue'
|
||||
import SideMenuBig from './SideMenuBig.vue'
|
||||
import SideMenuWithCategories from './SideMenuWithCategories.vue'
|
||||
|
||||
// Vue.prototype.t = t
|
||||
Vue.prototype.OC = OC
|
||||
// Vue.prototype.OC = OCP
|
||||
|
||||
|
||||
const mountSideMenuComponent = () => {
|
||||
const sideMenuContainer = document.querySelector('#side-menu')
|
||||
|
|
@ -32,6 +30,8 @@ const mountSideMenuComponent = () => {
|
|||
|
||||
if (sideMenuContainer.getAttribute('data-bigmenu')) {
|
||||
component = SideMenuBig
|
||||
} else if(sideMenuContainer.getAttribute('data-sidewithcategories')) {
|
||||
component = SideMenuWithCategories
|
||||
} else {
|
||||
component = SideMenu
|
||||
}
|
||||
|
|
|
|||
126
src/SideMenuWithCategories.vue
Normal file
126
src/SideMenuWithCategories.vue
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<!--
|
||||
@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 id="side-menu" class="side-menu-with-categories">
|
||||
<div class="side-menu-header">
|
||||
<SettingsButton
|
||||
v-if="settings"
|
||||
v-bind:href="settings.href"
|
||||
v-bind:label="settings.name"
|
||||
v-bind:avatar="settings.avatar"
|
||||
/>
|
||||
|
||||
<OpenerButton />
|
||||
</div>
|
||||
|
||||
<div class="side-menu-categories-wrapper">
|
||||
<div class="side-menu-categories">
|
||||
<Loader v-if="!items.length" />
|
||||
|
||||
<div class="side-menu-category" v-for="category in items">
|
||||
<h2 class="side-menu-category-title" v-if="category.name != ''" v-html="category.name"></h2>
|
||||
|
||||
<ul class="side-menu-apps-list">
|
||||
<SideMenuBigApp
|
||||
v-for="(app, appId) in category.apps"
|
||||
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
||||
v-bind:icon="app.icon"
|
||||
v-bind:label="app.name"
|
||||
v-bind:href="app.href"
|
||||
v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import trim from 'trim'
|
||||
import axios from 'axios'
|
||||
import OpenerButton from './OpenerButton'
|
||||
import CloserButton from './CloserButton'
|
||||
import SettingsButton from './SettingsButton'
|
||||
import Loader from './Loader'
|
||||
import SideMenuBigApp from './SideMenuBigApp'
|
||||
|
||||
export default {
|
||||
name: 'SideMenuWithCategories',
|
||||
components: {
|
||||
SettingsButton,
|
||||
OpenerButton,
|
||||
CloserButton,
|
||||
Loader,
|
||||
SideMenuBigApp,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
activeApp: null,
|
||||
targetBlank: false,
|
||||
targetBlankApps: [],
|
||||
settings: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
retrieveApps() {
|
||||
this.apps = []
|
||||
let that = this
|
||||
|
||||
axios
|
||||
.get(OC.generateUrl('/apps/side_menu/nav/items'))
|
||||
.then(function(response) {
|
||||
that.items = response.data.items
|
||||
|
||||
let apps = []
|
||||
|
||||
for (let category of that.items) {
|
||||
for (let a in category.apps) {
|
||||
apps.push(category.apps[a])
|
||||
}
|
||||
}
|
||||
|
||||
jQuery('body').trigger('side-menu.apps', [apps])
|
||||
});
|
||||
},
|
||||
|
||||
retrieveActiveApp() {
|
||||
let activeAppLink = document.querySelector('#appmenu a.active')
|
||||
this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
|
||||
},
|
||||
|
||||
retrieveConfig() {
|
||||
let that = this
|
||||
|
||||
axios
|
||||
.get(OC.generateUrl('/apps/side_menu/js/config'))
|
||||
.then(function(response) {
|
||||
const config = response.data
|
||||
|
||||
that.targetBlankApps = config['target-blank-apps']
|
||||
that.settings = config['settings']
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.retrieveConfig()
|
||||
this.retrieveApps()
|
||||
this.retrieveActiveApp()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -103,6 +103,7 @@ jQuery(document).ready(() => {
|
|||
|
||||
jQuery('#side-menu-always-displayed').val(target.attr('data-alwaysdiplayed'))
|
||||
jQuery('#side-menu-big-menu').val(target.attr('data-bigmenu'))
|
||||
jQuery('#side-menu-side-with-categories').val(target.attr('data-sidewithcategories'))
|
||||
})
|
||||
|
||||
jQuery('.side-menu-setting-live').on('change', (event) => {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
"Panel": "Panel"
|
||||
"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Otevřít nabídku při najetím ukazatelem na tlačítko nabídky (automaticky vypnuto pro dotykové obrazovky)."
|
||||
"Display the big menu": "Zobrazit velkou nabídku"
|
||||
"The big menu is not compatible with AppOrder.": "Velká nabídka není kompatibilní s jinou aplikací (doplňkem) „Pořadí aplikací“."
|
||||
"This menu is not compatible with AppOrder.": "Nabídka není kompatibilní s jinou aplikací (doplňkem) „Pořadí aplikací“."
|
||||
"Display the logo": "Zobrazit logo"
|
||||
"This feature is not compatible with the <code>big menu</code> display.": "Tato funkce není kompatibilní se zobrazením <code>velké nabídky</code>."
|
||||
"Icons and texts": "Ikony a texty"
|
||||
|
|
@ -76,3 +76,4 @@
|
|||
"Show and hide the list of categories": "Zobrazit/skrýt seznam kategorií"
|
||||
"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Tyto parametry jsou použity v případě, že je zapnutý (Breeze) tmavý motiv vzhledu."
|
||||
"Dark mode colors": "Barvy tmavého režimu"
|
||||
"With categories": "S kategoriemi"
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
"Panel": "Panel"
|
||||
"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Öffne das Menü, wenn die Maus über das Menü-Symbol bewegt wird (auf Touchscreens automatisch deaktiviert)."
|
||||
"Display the big menu": "Großes Menü anzeigen"
|
||||
"The big menu is not compatible with AppOrder.": "Das große Menü ist nicht mit <code>AppOrder</code> kompatibel."
|
||||
"This menu is not compatible with AppOrder.": "Dieses Menü ist nicht mit <code>AppOrder</code> kompatibel."
|
||||
"Display the logo": "Logo anzeigen"
|
||||
"This feature is not compatible with the <code>big menu</code> display.": "Diese Funktion ist nicht mit dem <code>großen Menü</code> kompatibel."
|
||||
"Icons and texts": "Symbole und Texte"
|
||||
|
|
@ -76,3 +76,4 @@
|
|||
"Show and hide the list of categories": "Liste der Kategorien ein- und ausblenden"
|
||||
"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Diese Optionen werden auf <code>Dark Theme</code> oder <code>Breeze Dark Theme</code> angewendet."
|
||||
"Dark mode colors": "Farben für den dunklen Modus"
|
||||
"With categories": "Mit Kategorien"
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
"Panel": "Panneau"
|
||||
"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Ouvrir le menu au passage de la souris (automatiquement désactivé sur les écrans tactiles)"
|
||||
"Display the big menu": "Afficher le menu large"
|
||||
"The big menu is not compatible with AppOrder.": "Le menu large n'est pas compatible avec l'application AppOrder"
|
||||
"This menu is not compatible with AppOrder.": "Ce menu n'est pas compatible avec l'application AppOrder"
|
||||
"Display the logo": "Afficher le logo"
|
||||
"This feature is not compatible with the <code>big menu</code> display.": "Cette fonctionnalité n'est pas compatible avec l'affichage du menu large."
|
||||
"Icons and texts": "Icônes et textes"
|
||||
|
|
@ -76,3 +76,4 @@
|
|||
"Show and hide the list of categories": "Afficher et masquer la liste des catégories"
|
||||
"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Ces paramètres sont utilisés lorsque le thème sombre ou le thème Breeze Dark sont activés."
|
||||
"Dark mode colors": "Couleurs du mode sombre"
|
||||
"With categories": "Avec les catégories"
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
"Panel": "面板"
|
||||
"Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "鼠标悬停时打开菜单 (触摸屏时将自动禁用)"
|
||||
"Display the big menu": "显示大型菜单"
|
||||
"The big menu is not compatible with AppOrder.": "大型菜单与应用顺序不兼容"
|
||||
"This menu is not compatible with AppOrder.": "型菜单与应用顺序不兼容"
|
||||
"Display the logo": "显示logo"
|
||||
"This feature is not compatible with the <code>big menu<\/code> display.": "此功能与显示<code>大型菜单<\/code>不兼容。"
|
||||
"Icons and texts": "图标与文字"
|
||||
|
|
@ -76,3 +76,4 @@
|
|||
"Show and hide the list of categories": "显示或隐藏类别列表"
|
||||
"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "此参数将应用于暗黑主题激活时。"
|
||||
"Dark mode colors": "暗黑模式颜色"
|
||||
"With categories": "有类别"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,17 @@
|
|||
<?php
|
||||
|
||||
$display = 'default';
|
||||
|
||||
if ($_['always-displayed']) {
|
||||
$display = 'always-displayed';
|
||||
} elseif ($_['big-menu']) {
|
||||
$display = 'big-menu';
|
||||
} elseif ($_['side-with-categories']) {
|
||||
$display = 'side-with-categories';
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
(function() {
|
||||
var sideMenuContainer = jQuery('<div id="side-menu-container">')
|
||||
var sideMenuOpener = jQuery('<button class="side-menu-opener"></button>')
|
||||
|
|
@ -6,8 +20,10 @@
|
|||
var html = jQuery('html')
|
||||
var isTouchDevice = window.matchMedia("(pointer: coarse)").matches
|
||||
|
||||
<?php if ($_['big-menu']): ?>
|
||||
<?php if ($display === 'big-menu'): ?>
|
||||
sideMenu.attr('data-bigmenu', '1')
|
||||
<?php elseif ($display === 'side-with-categories'): ?>
|
||||
sideMenu.attr('data-sidewithcategories', '1')
|
||||
<?php endif; ?>
|
||||
|
||||
var targetBlankApps = <?php echo json_encode($_['target-blank-apps']) ?>;
|
||||
|
|
@ -25,7 +41,7 @@
|
|||
sideMenuOpener.removeClass('hide')
|
||||
}
|
||||
|
||||
<?php if ($_['always-displayed'] && !$_['big-menu']): ?>
|
||||
<?php if ($display === 'always-displayed'): ?>
|
||||
if (apps.length === 0) {
|
||||
html.removeClass('side-menu-always-displayed');
|
||||
} else {
|
||||
|
|
@ -33,7 +49,7 @@
|
|||
}
|
||||
<?php endif; ?>
|
||||
<?php else: ?>
|
||||
<?php if ($_['always-displayed'] && !$_['big-menu']): ?>
|
||||
<?php if ($display === 'always-displayed'): ?>
|
||||
if (apps.length === 0) {
|
||||
html.removeClass('side-menu-always-displayed');
|
||||
} else {
|
||||
|
|
@ -61,7 +77,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
<?php if ($_['opener-hover'] || ($_['always-displayed'] && !$_['big-menu'])): ?>
|
||||
<?php if ($_['opener-hover'] || $display === 'always-displayed'): ?>
|
||||
var sideMenuMouseLeave = function() {
|
||||
sideMenu
|
||||
.removeClass('open')
|
||||
|
|
@ -97,7 +113,7 @@
|
|||
sideMenu.find('.side-menu-app.active a').focus()
|
||||
})
|
||||
|
||||
<?php if ($_['always-displayed'] && !$_['big-menu']): ?>
|
||||
<?php if ($display === 'always-displayed'): ?>
|
||||
sideMenuOpener.on('click', function() {
|
||||
sideMenu.toggleClass('open')
|
||||
})
|
||||
|
|
@ -138,7 +154,7 @@
|
|||
<?php require_once __DIR__.'/_topMenuApps.js'; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($_['always-displayed'] && !$_['big-menu']): ?>
|
||||
<?php if ($display === 'always-displayed'): ?>
|
||||
<?php require_once __DIR__.'/_alwaysDisplayed.js'; ?>
|
||||
<?php endif; ?>
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -441,41 +441,56 @@ $choicesSizes = [
|
|||
<?php p($l->t('Panel')); ?>
|
||||
</h2>
|
||||
|
||||
<?php
|
||||
$displays = [
|
||||
'default' => !$_['always-displayed'] && !$_['big-menu'] && !$_['side-with-categories'],
|
||||
'always-displayed' => $_['always-displayed'] && !$_['big-menu'] && !$_['side-with-categories'],
|
||||
'side-with-categories' => $_['side-with-categories'] && !$_['always-displayed'] && !$_['big-menu'],
|
||||
'big-menu' => $_['big-menu'] && !$_['always-displayed'] && !$_['side-with-categories'],
|
||||
];
|
||||
?>
|
||||
|
||||
<div>
|
||||
<label>
|
||||
<?php p($l->t('Default')); ?>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$displays = [
|
||||
'default' => !$_['always-displayed'] && !$_['big-menu'],
|
||||
'always-displayed' => $_['always-displayed'] && !$_['big-menu'],
|
||||
'big-menu' => $_['big-menu'],
|
||||
];
|
||||
?>
|
||||
|
||||
<p>
|
||||
<img
|
||||
class="side-menu-display <?php echo $displays['default'] ? 'is-active' : '' ?>"
|
||||
data-alwaysdiplayed="0"
|
||||
data-bigmenu="0"
|
||||
data-sidewithcategories="0"
|
||||
src="<?php print_unescaped(image_path('side_menu', 'admin/layout-default.svg')); ?>" alt="<?php p($l->t('Default')); ?>">
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<label>
|
||||
<?php p($l->t('With categories')); ?>
|
||||
</label>
|
||||
</div>
|
||||
<p><em><?php echo $l->t('This menu is not compatible with AppOrder.'); ?></em></p>
|
||||
<p>
|
||||
<img
|
||||
class="side-menu-display <?php echo $displays['side-with-categories'] ? 'is-active' : '' ?>"
|
||||
data-alwaysdiplayed="0"
|
||||
data-bigmenu="0"
|
||||
data-sidewithcategories="1"
|
||||
src="<?php print_unescaped(image_path('side_menu', 'admin/layout-side-with-categories.svg')); ?>" alt="<?php p($l->t('With categories')); ?>">
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<label for="side-menu-opener">
|
||||
<?php p($l->t('Big menu')); ?>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p><em><?php echo $l->t('The big menu is not compatible with AppOrder.'); ?></em></p>
|
||||
|
||||
<p><em><?php echo $l->t('This menu is not compatible with AppOrder.'); ?></em></p>
|
||||
<p>
|
||||
<img
|
||||
class="side-menu-display <?php echo $displays['big-menu'] ? 'is-active' : '' ?>"
|
||||
data-alwaysdiplayed="0"
|
||||
data-bigmenu="1"
|
||||
data-sidewithcategories="0"
|
||||
src="<?php print_unescaped(image_path('side_menu', 'admin/layout-big-menu.svg')); ?>" alt="<?php p($l->t('Big menu')); ?>">
|
||||
</p>
|
||||
|
||||
|
|
@ -485,20 +500,37 @@ $choicesSizes = [
|
|||
<small><span class="warning"><?php p($l->t('Experimental')); ?></span></small>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p><em><?php p($l->t('Not compatible with touch screens.')); ?></em></p>
|
||||
|
||||
<p>
|
||||
<img
|
||||
class="side-menu-display <?php echo $displays['always-displayed'] ? 'is-active' : '' ?>"
|
||||
data-alwaysdiplayed="1"
|
||||
data-bigmenu="0"
|
||||
data-sidewithcategories="0"
|
||||
src="<?php print_unescaped(image_path('side_menu', 'admin/layout-always-displayed.svg')); ?>" alt="<?php p($l->t('Always displayed')); ?>">
|
||||
</p>
|
||||
|
||||
<input type="hidden" class="side-menu-setting" name="always-displayed" id="side-menu-always-displayed" value="<?php echo (int) $_['always-displayed'] ?>">
|
||||
<input type="hidden" class="side-menu-setting" name="big-menu" id="side-menu-big-menu" value="<?php echo (int) $_['big-menu'] ?>">
|
||||
|
||||
<input
|
||||
type="hidden"
|
||||
class="side-menu-setting"
|
||||
name="always-displayed"
|
||||
id="side-menu-always-displayed"
|
||||
value="<?php echo (int) $_['always-displayed'] ?>"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
class="side-menu-setting"
|
||||
name="big-menu"
|
||||
id="side-menu-big-menu"
|
||||
value="<?php echo (int) $_['big-menu'] ?>"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
class="side-menu-setting"
|
||||
name="side-with-categories"
|
||||
id="side-menu-side-with-categories"
|
||||
value="<?php echo (int) $_['side-with-categories'] ?>"
|
||||
>
|
||||
<br>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue