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:
Johannes Meyer 2019-02-14 13:50:43 +01:00
parent 195b3bf7b7
commit df7e72398d
2 changed files with 48 additions and 39 deletions

View file

@ -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',

View file

@ -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;
}
}
}
}