add options to select the size of icons and texts or hide them
This commit is contained in:
parent
18314b260f
commit
95f7eb5980
|
@ -63,6 +63,8 @@ class CssController extends Controller
|
||||||
'opener' => $this->config->getAppValue('side_menu', 'opener', 'side-menu-opener'),
|
'opener' => $this->config->getAppValue('side_menu', 'opener', 'side-menu-opener'),
|
||||||
],
|
],
|
||||||
'display-logo' => (bool) $this->config->getAppValue('side_menu', 'display-logo', 1),
|
'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');
|
$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'),
|
'display-logo' => $this->config->getAppValue('side_menu', 'display-logo', '1'),
|
||||||
'opener-position' => $this->config->getAppValue('side_menu', 'opener-position', 'before'),
|
'opener-position' => $this->config->getAppValue('side_menu', 'opener-position', 'before'),
|
||||||
'opener-hover' => $this->config->getAppValue('side_menu', 'opener-hover', '0'),
|
'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, '');
|
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}">
|
<li v-for="app in apps" v-bind:class="{'side-menu-app': true, 'active': app.active}">
|
||||||
<a v-bind:href="app.href">
|
<a v-bind:href="app.href">
|
||||||
<span class="side-menu-app-icon" v-html="app.icon"></span>
|
<span class="side-menu-app-icon" v-html="app.icon"></span>
|
||||||
|
<span class="side-menu-app-text" v-html="app.name"></span>
|
||||||
{{ app.name }}
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -54,10 +53,14 @@ export default {
|
||||||
let href = element.getAttribute('href')
|
let href = element.getAttribute('href')
|
||||||
|
|
||||||
if (href !== '#') {
|
if (href !== '#') {
|
||||||
|
let svg = element.querySelector('svg').outerHTML
|
||||||
|
|
||||||
|
svg = svg.replace(/(height|width)="20"/, '')
|
||||||
|
|
||||||
this.apps.push({
|
this.apps.push({
|
||||||
href: href,
|
href: href,
|
||||||
name: element.querySelector('span').innerHTML,
|
name: element.querySelector('span').innerHTML,
|
||||||
icon: element.querySelector('svg').outerHTML,
|
icon: svg,
|
||||||
active: element.classList.contains('active')
|
active: element.classList.contains('active')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -24,6 +24,8 @@ const elements = [
|
||||||
'side-menu-opener-position',
|
'side-menu-opener-position',
|
||||||
'side-menu-opener-hover',
|
'side-menu-opener-hover',
|
||||||
'side-menu-display-logo',
|
'side-menu-display-logo',
|
||||||
|
'side-menu-size-icon',
|
||||||
|
'side-menu-size-text',
|
||||||
'side-menu-cache',
|
'side-menu-cache',
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -30,4 +30,57 @@
|
||||||
height: calc(100vh);
|
height: calc(100vh);
|
||||||
top: 0;
|
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; ?>
|
<?php endif; ?>
|
||||||
|
|
|
@ -24,6 +24,13 @@ $choicesYesNo = [
|
||||||
'No' => '0',
|
'No' => '0',
|
||||||
'Yes' => '1',
|
'Yes' => '1',
|
||||||
];
|
];
|
||||||
|
|
||||||
|
$choicesSizes = [
|
||||||
|
'Hidden' => 'hidden',
|
||||||
|
'Small' => 'small',
|
||||||
|
'Normal' => 'normal',
|
||||||
|
'Big' => 'big',
|
||||||
|
];
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div id="side-menu-section">
|
<div id="side-menu-section">
|
||||||
|
@ -165,6 +172,30 @@ $choicesYesNo = [
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
|
|
Loading…
Reference in a new issue