upstream/icingaweb2-module-businessprocess
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2-module-businessprocess.git synced 2026-05-28 04:34:08 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

ActionBar: Add toggle to switch between tile- and tree-view

Browse source
This commit is contained in:
Johannes Meyer 2019-01-22 13:23:30 +01:00
parent f58e1844a1
commit 5fe4983c3c
2 changed files with 58 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
library/Businessprocess/Web/Component/RenderedProcessActionBar.php
View file

@ -15,27 +15,27 @@ class RenderedProcessActionBar extends ActionBar
{
$meta = $config->getMetadata();
if ($renderer instanceof TreeRenderer) {
$this->add(Html::tag(
'a',
[
'href' => $url->with('mode', 'tile'),
'title' => mt('businessprocess', 'Switch to Tile view'),
'class' => 'icon-dashboard'
],
mt('businessprocess', 'Tiles')
));
} else {
$this->add(Html::tag(
'a',
[
'href' => $url->with('mode', 'tree'),
'title' => mt('businessprocess', 'Switch to Tree view'),
'class' => 'icon-sitemap'
],
mt('businessprocess', 'Tree')
));
}
$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);
$this->add(Html::tag(
'a',

41
public/css/module.less
View file

@ -9,11 +9,10 @@ a:focus {
.action-bar {
display: flex;
align-items: center;
font-size: 1.3em;
color: @icinga-blue;
a {
font-size: 1.3em;
color: @icinga-blue;
> a {
&:hover::before {
text-decoration: none;
}
@ -35,6 +34,40 @@ a:focus {
}
}
}
> div.view-toggle {
margin-right: 1em;
span {
color: @gray;
margin-right: .5em;
}
a {
padding: .25em .5em;
border: 1px solid @icinga-blue;
i::before {
margin-right: 0;
}
&.active {
color: white;
background-color: @icinga-blue;
}
&: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;
}
}
}
}
form a {