fix #63: add a new side menu with categories

This commit is contained in:
Simon Vieille
2021-10-21 21:37:32 +02:00
parent 1896bb399d
commit 3975f3be28
13 changed files with 453 additions and 35 deletions
+22 -6
View File
@@ -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; ?>
})();
+49 -17
View File
@@ -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>