add options to select the size of icons and texts or hide them
This commit is contained in:
parent
18314b260f
commit
95f7eb5980
GPG Key ID:
03383D15A1D31745
|
|
@ -63,6 +63,8 @@ class CssController extends Controller
|
|||
'opener' => $this->config->getAppValue('side_menu', 'opener', 'side-menu-opener'),
|
||||
],
|
||||
'display-logo' => (bool) $this->config->getAppValue('side_menu', 'display-logo', 1),
|
||||
'size-icon' => $this->config->getAppValue('side_menu', 'size-icon', 'normal'),
|
||||
'size-text' => $this->config->getAppValue('side_menu', 'size-text', 'normal'),
|
||||
];
|
||||
|
||||
$response = new TemplateResponse('side_menu', 'css/stylesheet', $parameters, 'blank');
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@ class Admin implements ISettings
|
|||
'display-logo' => $this->config->getAppValue('side_menu', 'display-logo', '1'),
|
||||
'opener-position' => $this->config->getAppValue('side_menu', 'opener-position', 'before'),
|
||||
'opener-hover' => $this->config->getAppValue('side_menu', 'opener-hover', '0'),
|
||||
'size-icon' => $this->config->getAppValue('side_menu', 'size-icon', 'normal'),
|
||||
'size-text' => $this->config->getAppValue('side_menu', 'size-text', 'normal'),
|
||||
];
|
||||
|
||||
return new TemplateResponse('side_menu', 'settings/admin-form', $parameters, '');
|
||||
|
|
|
|||
|
|
@ -28,8 +28,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<li v-for="app in apps" v-bind:class="{'side-menu-app': true, 'active': app.active}">
|
||||
<a v-bind:href="app.href">
|
||||
<span class="side-menu-app-icon" v-html="app.icon"></span>
|
||||
|
||||
{{ app.name }}
|
||||
<span class="side-menu-app-text" v-html="app.name"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -54,10 +53,14 @@ export default {
|
|||
let href = element.getAttribute('href')
|
||||
|
||||
if (href !== '#') {
|
||||
let svg = element.querySelector('svg').outerHTML
|
||||
|
||||
svg = svg.replace(/(height|width)="20"/, '')
|
||||
|
||||
this.apps.push({
|
||||
href: href,
|
||||
name: element.querySelector('span').innerHTML,
|
||||
icon: element.querySelector('svg').outerHTML,
|
||||
icon: svg,
|
||||
active: element.classList.contains('active')
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,8 @@ const elements = [
|
|||
'side-menu-opener-position',
|
||||
'side-menu-opener-hover',
|
||||
'side-menu-display-logo',
|
||||
'side-menu-size-icon',
|
||||
'side-menu-size-text',
|
||||
'side-menu-cache',
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -30,4 +30,57 @@
|
|||
height: calc(100vh);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
<?php if ($_['size-text'] === 'hidden'): ?>
|
||||
#side-menu, .side-menu-apps-list {
|
||||
<?php if ($_['size-icon'] === 'big'): ?>
|
||||
width: 55px;
|
||||
<?php else: ?>
|
||||
width: 52px;
|
||||
<?php endif; ?>
|
||||
}
|
||||
|
||||
#side-menu .side-menu-opener {
|
||||
<?php if ($_['size-icon'] === 'big'): ?>
|
||||
margin-left: 6px;
|
||||
<?php else: ?>
|
||||
margin-left: 4px;
|
||||
<?php endif; ?>
|
||||
}
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($_['size-icon'] === 'hidden'): ?>
|
||||
.side-menu-app-icon {
|
||||
display: none;
|
||||
}
|
||||
<?php elseif ($_['size-icon'] === 'small'): ?>
|
||||
.side-menu-app-icon svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
<?php elseif ($_['size-icon'] === 'normal'): ?>
|
||||
.side-menu-app-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
<?php elseif ($_['size-icon'] === 'big'): ?>
|
||||
.side-menu-app-icon svg {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
}
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($_['size-text'] === 'hidden'): ?>
|
||||
.side-menu-app-text {
|
||||
display: none;
|
||||
}
|
||||
<?php elseif ($_['size-text'] === 'small'): ?>
|
||||
.side-menu-app-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
<?php elseif ($_['size-text'] === 'big'): ?>
|
||||
.side-menu-app-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
<?php endif; ?>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,13 @@ $choicesYesNo = [
|
|||
'No' => '0',
|
||||
'Yes' => '1',
|
||||
];
|
||||
|
||||
$choicesSizes = [
|
||||
'Hidden' => 'hidden',
|
||||
'Small' => 'small',
|
||||
'Normal' => 'normal',
|
||||
'Big' => 'big',
|
||||
];
|
||||
?>
|
||||
|
||||
<div id="side-menu-section">
|
||||
|
|
@ -165,6 +172,30 @@ $choicesYesNo = [
|
|||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="settings-hint">
|
||||
<?php p($l->t('Icons and texts')); ?>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<select id="side-menu-size-icon" name="size-icon">
|
||||
<?php foreach ($choicesSizes as $label => $value): ?>
|
||||
<option value="<?php echo $value ?>" <?php if ($value === $_['size-icon']): ?>selected<?php endif; ?>>
|
||||
<?php echo $l->t($label); ?> icon
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
|
||||
<select id="side-menu-size-text" name="size-text">
|
||||
<?php foreach ($choicesSizes as $label => $value): ?>
|
||||
<option value="<?php echo $value ?>" <?php if ($value === $_['size-text']): ?>selected<?php endif; ?>>
|
||||
<?php echo $l->t($label); ?> text
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
|
|
|
|||
Loading…
Reference in New Issue