tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

PreferenceForm: Style theme mode control

This commit is contained in:
Florian Strohmaier 2021-06-22 12:39:38 +02:00 committed by Johannes Meyer
parent 1c137ee6e6
commit 4b75f94573
2 changed files with 48 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
application/forms/PreferenceForm.php
View File

@ -3,8 +3,8 @@
namespace Icinga\Forms;
use Exception;
use DateTimeZone;
use Exception;
use Icinga\Application\Config;
use Icinga\Application\Icinga;
use Icinga\Application\Logger;
@ -16,6 +16,7 @@ use Icinga\Web\Form;
use Icinga\Web\Notification;
use Icinga\Web\Session;
use Icinga\Web\StyleSheet;
use ipl\Html\HtmlElement;
use ipl\I18n\GettextTranslator;
use ipl\I18n\Locale;
use ipl\I18n\StaticTranslator;
@ -218,18 +219,30 @@ class PreferenceForm extends Form
}
}
}
$this->addElement(
'radio',
'theme_mode',
[
'label' => $this->translate('Theme Mode'),
'multiOptions' => [
'' => $this->translate('Dark'),
'light' => $this->translate('Light'),
'system' => $this->translate('System')
'class' => 'theme-mode-input',
'label' => $this->translate('Theme Mode'),
'multiOptions' => [
'' => HtmlElement::create(
'img',
['src' => $this->getView()->href('img/theme-mode-thumbnail-dark.svg')]
) . HtmlElement::create('span', [], $this->translate('Dark')),
'light' => HtmlElement::create(
'img',
['src' => $this->getView()->href('img/theme-mode-thumbnail-light.svg')]
) . HtmlElement::create('span', [], $this->translate('Light')),
'system' => HtmlElement::create(
'img',
['src' => $this->getView()->href('img/theme-mode-thumbnail-system.svg')]
) . HtmlElement::create('span', [], $this->translate('System'))
],
'value' => isset($value) ? $value : '',
'disable' => isset($disabled) ? $disabled : [],
'value' => isset($value) ? $value : '',
'disable' => isset($disabled) ? $disabled : [],
'escape' => false
]
);

27
public/css/icinga/forms.less
View File

@ -513,3 +513,30 @@ form.icinga-form .form-info {
.flyover-content .control-label-group {
text-align: left;
}
.theme-mode-input {
display: none;
&:checked + img {
border-color: @icinga-blue;
border-radius: .25em;
}
& + img {
margin: 0 auto;
border: .25em solid transparent;
display: block;
width: 6em;
overflow: hidden;
box-shadow: 0 0 .25em 0 rgba(0,0,0,.4);
}
&[disabled] ~ * {
opacity: .25;
}
& ~ span {
display: block;
text-align: center;
}
}