add compatibility badges for each options
This commit is contained in:
parent
7f6f606d75
commit
81f5dfcf2d
GPG Key ID:
579388D585F70417
|
|
@ -73,7 +73,7 @@
|
|||
|
||||
.side-menu-setting-list {
|
||||
margin: 10px 4px 4px 0px;
|
||||
border: 1px solid var(--color-border-dark);
|
||||
border: 2px solid var(--color-border-dark);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -175,3 +175,42 @@
|
|||
.btn-reset--progress {
|
||||
transform: rotate(-359deg);
|
||||
}
|
||||
|
||||
.badges {
|
||||
margin-bottom: 14px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
border-size: 1px;
|
||||
padding: 2px 8px;
|
||||
margin-right: 2px;
|
||||
margin-bottom: 5px;
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.badge-1 {
|
||||
background: #d4ce14;
|
||||
border-color: #cad413;
|
||||
color: #373a05;
|
||||
}
|
||||
|
||||
.badge-2 {
|
||||
background: #96d47f;
|
||||
border-color: #7ed49b;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.badge-3 {
|
||||
background: #d4540a;
|
||||
border-color: #d4700c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.badge-4 {
|
||||
background: #9d81d4;
|
||||
border-color: #c681d4;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,8 +41,104 @@ $choicesSizes = [
|
|||
|
||||
$labelShowHideApps = 'Show and hide the list of applications';
|
||||
$labelReset = 'Reset to default';
|
||||
|
||||
?>
|
||||
<div id="side-menu-section">
|
||||
|
||||
<div class="section">
|
||||
<h2>
|
||||
<?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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<div>
|
||||
<label for="side-menu-opener">
|
||||
<?php p($l->t('Always displayed')); ?>
|
||||
</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="side-with-categories"
|
||||
id="side-menu-side-with-categories"
|
||||
value="<?php echo (int) $_['side-with-categories'] ?>"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>
|
||||
<?php p($l->t('Colors')); ?>
|
||||
|
|
@ -50,6 +146,13 @@ $labelReset = 'Reset to default';
|
|||
<small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
|
||||
</h2>
|
||||
|
||||
<div class="badges">
|
||||
<span class="badge badge-1"><?php p($l->t('Default')); ?></span>
|
||||
<span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
|
||||
<span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
|
||||
<span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
|
||||
</div>
|
||||
|
||||
<div class="side-menu-setting-table">
|
||||
<div class="side-menu-setting-row">
|
||||
<div class="side-menu-setting-label side-menu-setting-label-short">
|
||||
|
|
@ -234,6 +337,13 @@ $labelReset = 'Reset to default';
|
|||
<?php p($l->t('Dark mode colors')); ?>
|
||||
</h2>
|
||||
|
||||
<div class="badges">
|
||||
<span class="badge badge-1"><?php p($l->t('Default')); ?></span>
|
||||
<span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
|
||||
<span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
|
||||
<span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<?php echo $l->t('This parameters are used when Dark theme or Breeze Dark Theme are enabled.'); ?>
|
||||
</p>
|
||||
|
|
@ -422,6 +532,13 @@ $labelReset = 'Reset to default';
|
|||
<?php p($l->t('Opener')); ?>
|
||||
</h2>
|
||||
|
||||
<div class="badges">
|
||||
<span class="badge badge-1"><?php p($l->t('Default')); ?></span>
|
||||
<span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
|
||||
<span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
|
||||
<span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
|
||||
</div>
|
||||
|
||||
<div class="side-menu-setting-table">
|
||||
<div class="side-menu-setting-row">
|
||||
<?php
|
||||
|
|
@ -473,105 +590,7 @@ $labelReset = 'Reset to default';
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>
|
||||
<?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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<div>
|
||||
<label for="side-menu-opener">
|
||||
<?php p($l->t('Always displayed')); ?>
|
||||
</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="side-with-categories"
|
||||
id="side-menu-side-with-categories"
|
||||
value="<?php echo (int) $_['side-with-categories'] ?>"
|
||||
>
|
||||
<br>
|
||||
|
||||
|
||||
<div class="side-menu-setting-table">
|
||||
<div class="side-menu-setting-row">
|
||||
<div class="side-menu-setting-label">
|
||||
<?php p($l->t('Open the menu when the mouse is hover the opener (automatically disabled on touch screens)')); ?>
|
||||
|
|
@ -589,16 +608,18 @@ $labelReset = 'Reset to default';
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="side-menu-setting-table">
|
||||
<div class="side-menu-setting-row">
|
||||
<div class="side-menu-setting-label">
|
||||
<?php p($l->t('Display the logo')); ?>
|
||||
<br>
|
||||
<em>
|
||||
<?php echo $l->t('This feature is not compatible with the <code>big menu</code> display.'); ?>
|
||||
<br>
|
||||
<?php p($l->t('The logo will be hidden when the menu is always displayed.')); ?>
|
||||
</em>
|
||||
|
||||
<div class="badges">
|
||||
<span class="badge badge-1"><?php p($l->t('Default')); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-menu-setting-form">
|
||||
<select id="side-menu-display-logo" name="display-logo" class="side-menu-setting">
|
||||
|
|
@ -614,6 +635,10 @@ $labelReset = 'Reset to default';
|
|||
<div class="side-menu-setting-row">
|
||||
<div class="side-menu-setting-label">
|
||||
<?php p($l->t('Use the avatar instead of the logo')); ?>
|
||||
|
||||
<div class="badges">
|
||||
<span class="badge badge-1"><?php p($l->t('Default')); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-menu-setting-form">
|
||||
<select id="side-menu-use-avatar" name="use-avatar" class="side-menu-setting">
|
||||
|
|
@ -629,6 +654,10 @@ $labelReset = 'Reset to default';
|
|||
<div class="side-menu-setting-row">
|
||||
<div class="side-menu-setting-label">
|
||||
<?php p($l->t('The logo is a link to the default app')); ?>
|
||||
|
||||
<div class="badges">
|
||||
<span class="badge badge-1"><?php p($l->t('Default')); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-menu-setting-form">
|
||||
<select id="side-menu-add-logo-link" name="add-logo-link" class="side-menu-setting">
|
||||
|
|
@ -644,8 +673,11 @@ $labelReset = 'Reset to default';
|
|||
<div class="side-menu-setting-row">
|
||||
<div class="side-menu-setting-label">
|
||||
<?php p($l->t('Apps that should not be displayed in the menu')); ?>
|
||||
<br>
|
||||
<em><?php echo $l->t('This feature is only compatible with the <code>big menu</code> display.'); ?></em>
|
||||
|
||||
<div class="badges">
|
||||
<span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
|
||||
<span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-menu-setting-form">
|
||||
<a class="side-menu-toggler" data-target="#big-menu-hidden-apps" href="#_">
|
||||
|
|
@ -765,10 +797,17 @@ $labelReset = 'Reset to default';
|
|||
<?php p($l->t('Top menu')); ?>
|
||||
</h2>
|
||||
|
||||
<div class="badges">
|
||||
<span class="badge badge-1"><?php p($l->t('Default')); ?></span>
|
||||
<span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
|
||||
<span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
|
||||
<span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
|
||||
</div>
|
||||
|
||||
<div class="side-menu-setting-table">
|
||||
<div class="side-menu-setting-row">
|
||||
<div class="side-menu-setting-label">
|
||||
<?php p($l->t('Apps only visible in the top menu')); ?>
|
||||
<?php p($l->t('Applications kept in the top menu')); ?>
|
||||
</div>
|
||||
<div class="side-menu-setting-form">
|
||||
<a class="side-menu-toggler" data-target="#top-menu-apps" href="#_">
|
||||
|
|
@ -799,7 +838,9 @@ $labelReset = 'Reset to default';
|
|||
|
||||
<div class="side-menu-setting-row">
|
||||
<div class="side-menu-setting-label">
|
||||
<?php p($l->t('Apps visible in the top and side menus')); ?>
|
||||
<?php p($l->t('Applications kept in the top menu but also shown in side menu')); ?>
|
||||
<br>
|
||||
<em><?php p($l->t('These applications must be selected in the previous option.')); ?></em>
|
||||
</div>
|
||||
<div class="side-menu-setting-form">
|
||||
<a class="side-menu-toggler" data-target="#top-side-menu-apps" href="#_">
|
||||
|
|
@ -835,6 +876,13 @@ $labelReset = 'Reset to default';
|
|||
<?php p($l->t('Applications')); ?>
|
||||
</h2>
|
||||
|
||||
<div class="badges">
|
||||
<span class="badge badge-1"><?php p($l->t('Default')); ?></span>
|
||||
<span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
|
||||
<span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
|
||||
<span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
|
||||
</div>
|
||||
|
||||
<div class="side-menu-setting-table">
|
||||
<div class="side-menu-setting-row">
|
||||
<div class="side-menu-setting-label">
|
||||
|
|
@ -875,6 +923,11 @@ $labelReset = 'Reset to default';
|
|||
<?php p($l->t('Categories')); ?>
|
||||
</h2>
|
||||
|
||||
<div class="badges">
|
||||
<span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
|
||||
<span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
|
||||
</div>
|
||||
|
||||
<div class="side-menu-setting-table">
|
||||
<div class="side-menu-setting-row">
|
||||
<?php
|
||||
|
|
@ -985,6 +1038,13 @@ $labelReset = 'Reset to default';
|
|||
<?php p($l->t('Tips')); ?>
|
||||
</h2>
|
||||
|
||||
<div class="badges">
|
||||
<span class="badge badge-1"><?php p($l->t('Default')); ?></span>
|
||||
<span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
|
||||
<span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
|
||||
<span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<em><?php echo $l->t('Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to navigate.'); ?></em>
|
||||
</p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue