mirror of
https://github.com/Icinga/icingaweb2-module-businessprocess.git
synced 2026-02-04 01:09:25 -05:00
RenderedProcessActionBar: Make the mode toggle a single anchor
It's a toggle, there's no need for two distinct urls. Even more important, there's no need for two different click areas.
This commit is contained in:
parent
195b3bf7b7
commit
df7e72398d
2 changed files with 48 additions and 39 deletions
|
|
@ -15,27 +15,34 @@ class RenderedProcessActionBar extends ActionBar
|
|||
{
|
||||
$meta = $config->getMetadata();
|
||||
|
||||
$toggle = Html::tag('div', ['class' => 'view-toggle']);
|
||||
$toggle->add(Html::tag('span', null, mt('businessprocess', 'View')));
|
||||
$toggle->add(Html::tag(
|
||||
'a',
|
||||
[
|
||||
'href' => $url->with('mode', 'tile'),
|
||||
'title' => mt('businessprocess', 'Switch to Tile view'),
|
||||
'class' => $renderer instanceof TreeRenderer ? '' : 'active'
|
||||
],
|
||||
Html::tag('i', ['class' => 'icon icon-dashboard'])
|
||||
));
|
||||
$toggle->add(Html::tag(
|
||||
'a',
|
||||
[
|
||||
'href' => $url->with('mode', 'tree'),
|
||||
'title' => mt('businessprocess', 'Switch to Tree view'),
|
||||
'class' => $renderer instanceof TreeRenderer ? 'active' : ''
|
||||
],
|
||||
Html::tag('i', ['class' => 'icon icon-sitemap'])
|
||||
));
|
||||
$this->add($toggle);
|
||||
if ($renderer instanceof TreeRenderer) {
|
||||
$link = Html::tag(
|
||||
'a',
|
||||
[
|
||||
'href' => $url->with('mode', 'tile'),
|
||||
'title' => mt('businessprocess', 'Switch to Tile view')
|
||||
]
|
||||
);
|
||||
} else {
|
||||
$link = Html::tag(
|
||||
'a',
|
||||
[
|
||||
'href' => $url->with('mode', 'tree'),
|
||||
'title' => mt('businessprocess', 'Switch to Tree view')
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
$link->add([
|
||||
Html::tag('i', ['class' => 'icon icon-dashboard' . ($renderer instanceof TreeRenderer ? '' : ' active')]),
|
||||
Html::tag('i', ['class' => 'icon icon-sitemap' . ($renderer instanceof TreeRenderer ? ' active' : '')])
|
||||
]);
|
||||
|
||||
$this->add(
|
||||
Html::tag('div', ['class' => 'view-toggle'])
|
||||
->add(Html::tag('span', null, mt('businessprocess', 'View')))
|
||||
->add($link)
|
||||
);
|
||||
|
||||
$this->add(Html::tag(
|
||||
'a',
|
||||
|
|
|
|||
|
|
@ -44,27 +44,29 @@ a:focus {
|
|||
}
|
||||
|
||||
a {
|
||||
padding: .25em .5em;
|
||||
border: 1px solid @icinga-blue;
|
||||
display: inline-block;
|
||||
|
||||
i::before {
|
||||
margin-right: 0;
|
||||
}
|
||||
i {
|
||||
padding: .25em .5em;
|
||||
border: 1px solid @icinga-blue;
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
background-color: @icinga-blue;
|
||||
}
|
||||
&:before {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
border-right-width: 0;
|
||||
border-top-left-radius: .25em;
|
||||
border-bottom-left-radius: .25em;
|
||||
}
|
||||
&:last-of-type {
|
||||
border-left-width: 0;
|
||||
border-top-right-radius: .25em;
|
||||
border-bottom-right-radius: .25em;
|
||||
&.active {
|
||||
color: white;
|
||||
background-color: @icinga-blue;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
border-top-left-radius: .25em;
|
||||
border-bottom-left-radius: .25em;
|
||||
}
|
||||
&:last-of-type {
|
||||
border-top-right-radius: .25em;
|
||||
border-bottom-right-radius: .25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue