tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-25 14:54:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

PreferenceForm: Style theme mode control

Browse Source
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; namespace Icinga\Forms;
use Exception;
use DateTimeZone; use DateTimeZone;
use Exception;
use Icinga\Application\Config; use Icinga\Application\Config;
use Icinga\Application\Icinga; use Icinga\Application\Icinga;
use Icinga\Application\Logger; use Icinga\Application\Logger;
@ -16,6 +16,7 @@ use Icinga\Web\Form;
use Icinga\Web\Notification; use Icinga\Web\Notification;
use Icinga\Web\Session; use Icinga\Web\Session;
use Icinga\Web\StyleSheet; use Icinga\Web\StyleSheet;
use ipl\Html\HtmlElement;
use ipl\I18n\GettextTranslator; use ipl\I18n\GettextTranslator;
use ipl\I18n\Locale; use ipl\I18n\Locale;
use ipl\I18n\StaticTranslator; use ipl\I18n\StaticTranslator;
@ -218,18 +219,30 @@ class PreferenceForm extends Form
} }
} }
} }
$this->addElement( $this->addElement(
'radio', 'radio',
'theme_mode', 'theme_mode',
[ [
'label' => $this->translate('Theme Mode'), 'class' => 'theme-mode-input',
'multiOptions' => [ 'label' => $this->translate('Theme Mode'),
'' => $this->translate('Dark'), 'multiOptions' => [
'light' => $this->translate('Light'), '' => HtmlElement::create(
'system' => $this->translate('System') '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 : '', 'value' => isset($value) ? $value : '',
'disable' => isset($disabled) ? $disabled : [], '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 { .flyover-content .control-label-group {
text-align: left; 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;
}
}