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

Merge branch 'feature/refresh-control-7968' 

resolves #7968
This commit is contained in:
Alexander Fuhr 2015-02-25 14:28:25 +01:00
parent d68c636359 797d37735d
commit 453e0af987
19 changed files with 217 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
application/fonts/fontello-ifont/LICENSE.txt
View File

@ -37,3 +37,12 @@ Font license info
Homepage: http://www.entypo.com
## Fontelico
Copyright (C) 2012 by Fontello project
Author: Crowdsourced, for Fontello project
License: SIL (http://scripts.sil.org/OFL)
Homepage: http://fontello.com

6
application/fonts/fontello-ifont/config.json
View File

@ -6,6 +6,12 @@
"units_per_em": 1000,
"ascent": 850,
"glyphs": [
{
"uid": "9bc2902722abb366a213a052ade360bc",
"css": "spin6",
"code": 59508,
"src": "fontelico"
},
{
"uid": "9dd9e835aebe1060ba7190ad2b2ed951",
"css": "search",

3
application/fonts/fontello-ifont/css/ifont-codes.css vendored
View File

@ -114,4 +114,5 @@
.icon-chart-area:before { content: '\e870'; } /* '' */
.icon-chart-bar:before { content: '\e871'; } /* '' */
.icon-beaker:before { content: '\e872'; } /* '' */
.icon-magic:before { content: '\e873'; } /* '' */
.icon-magic:before { content: '\e873'; } /* '' */
.icon-spin6:before { content: '\e874'; } /* '' */

13
application/fonts/fontello-ifont/css/ifont-embedded.css vendored
View File

File diff suppressed because one or more lines are too long

3
application/fonts/fontello-ifont/css/ifont-ie7-codes.css vendored
View File

@ -114,4 +114,5 @@
.icon-chart-area { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-chart-bar { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-beaker { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-magic { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-magic { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-spin6 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

3
application/fonts/fontello-ifont/css/ifont-ie7.css vendored
View File

@ -125,4 +125,5 @@
.icon-chart-area { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-chart-bar { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-beaker { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-magic { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-magic { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-spin6 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

15
application/fonts/fontello-ifont/css/ifont.css vendored
View File

@ -1,10 +1,10 @@
@font-face {
font-family: 'ifont';
src: url('../font/ifont.eot?81587324');
src: url('../font/ifont.eot?81587324#iefix') format('embedded-opentype'),
url('../font/ifont.woff?81587324') format('woff'),
url('../font/ifont.ttf?81587324') format('truetype'),
url('../font/ifont.svg?81587324#ifont') format('svg');
src: url('../font/ifont.eot?6491776');
src: url('../font/ifont.eot?6491776#iefix') format('embedded-opentype'),
url('../font/ifont.woff?6491776') format('woff'),
url('../font/ifont.ttf?6491776') format('truetype'),
url('../font/ifont.svg?6491776#ifont') format('svg');
font-weight: normal;
font-style: normal;
}
@ -14,7 +14,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'ifont';
src: url('../font/ifont.svg?81587324#ifont') format('svg');
src: url('../font/ifont.svg?6491776#ifont') format('svg');
}
}
*/
@ -165,4 +165,5 @@
.icon-chart-area:before { content: '\e870'; } /* '' */
.icon-chart-bar:before { content: '\e871'; } /* '' */
.icon-beaker:before { content: '\e872'; } /* '' */
.icon-magic:before { content: '\e873'; } /* '' */
.icon-magic:before { content: '\e873'; } /* '' */
.icon-spin6:before { content: '\e874'; } /* '' */

3
application/fonts/fontello-ifont/demo.html
View File

@ -428,6 +428,9 @@ body {
<div title="Code: 0xe872" class="the-icons span3"><i class="icon-beaker"></i> <span class="i-name">icon-beaker</span><span class="i-code">0xe872</span></div>
<div title="Code: 0xe873" class="the-icons span3"><i class="icon-magic"></i> <span class="i-name">icon-magic</span><span class="i-code">0xe873</span></div>
</div>
<div class="row">
<div title="Code: 0xe874" class="the-icons span3"><i class="icon-spin6 animate-spin"></i> <span class="i-name">icon-spin6</span><span class="i-code">0xe874</span></div>
</div>
</div>
<div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
</body>

1
library/Icinga/Web/StyleSheet.php
View File

@ -13,6 +13,7 @@ class StyleSheet
'../application/fonts/fontello-ifont/css/ifont-embedded.css',
'css/vendor/tipsy.css',
'css/icinga/defaults.less',
'css/icinga/animation.less',
'css/icinga/layout-colors.less',
'css/icinga/layout-structure.less',
'css/icinga/menu.less',

20
library/Icinga/Web/Widget/Tab.php
View File

@ -42,6 +42,11 @@ class Tab extends AbstractWidget
*/
private $title = '';
/**
* The label displayed for this tab
*
* @var string
*/
private $label = '';
/**
@ -118,11 +123,26 @@ class Tab extends AbstractWidget
return $this->name;
}
/**
* Set the tab label
*
* @param string $label
*/
public function setLabel($label)
{
$this->label = $label;
}
/**
* Get the tab label
*
* @return string
*/
public function getLabel()
{
return $this->label;
}
/**
* @param mixed $title
*/

50
library/Icinga/Web/Widget/Tabs.php
View File

@ -4,6 +4,7 @@
namespace Icinga\Web\Widget;
use Icinga\Exception\ProgrammingError;
use Icinga\Web\Url;
use Icinga\Web\Widget\Tabextension\Tabextension;
use Icinga\Application\Icinga;
use Countable;
@ -23,6 +24,7 @@ class Tabs extends AbstractWidget implements Countable
<ul class="tabs">
{TABS}
{DROPDOWN}
{REFRESH}
{CLOSE}
</ul>
EOT;
@ -59,6 +61,18 @@ EOT;
</li>
EOT;
/**
* Template used for the refresh icon
*
* @var string
*/
private $refreshTpl = <<< 'EOT'
<li>
<a class="spinner" href="{URL}" title="{TITLE}" aria-label="{LABEL}">
<i aria-hidden="true" class="icon-cw"></i>
</a>
</li>
EOT;
/**
* This is where single tabs added to this container will be stored
@ -308,6 +322,39 @@ EOT;
return $this->closeTpl;
}
private function renderRefreshTab()
{
$url = Url::fromRequest()->without('renderLayout');
$tab = $this->get($this->getActiveName());
if ($tab !== null) {
$caption = $this->view()->escape(
$tab->getLabel()
);
} else {
$caption = t('Content');
}
$label = t(sprintf('Refresh the %s', $caption));
$title = $label;
$tpl = str_replace(
array(
'{URL}',
'{TITLE}',
'{LABEL}'
),
array(
$url,
$title,
$label
),
$this->refreshTpl
);
return $tpl;
}
/**
* Render to HTML
*
@ -323,11 +370,13 @@ EOT;
$drop = $this->renderDropdownTabs();
}
$close = $this->closeTab ? $this->renderCloseTab() : '';
$refresh = $this->renderRefreshTab();
return str_replace(
array(
'{TABS}',
'{DROPDOWN}',
'{REFRESH}',
'{CLOSE}',
'{HEADER}'
),
@ -335,6 +384,7 @@ EOT;
$tabs,
$drop,
$close,
$refresh,
$this->renderHeader()
),
$this->baseTpl

2
modules/monitoring/application/forms/Command/Object/CheckNowCommandForm.php
View File

@ -39,7 +39,7 @@ class CheckNowCommandForm extends ObjectsCommandForm
. $this->translate('Check now'),
'decorators' => array('ViewHelper'),
'escape' => false,
'class' => 'link-like',
'class' => 'link-like spinner',
'title' => $this->translate('Schedule the next active check to run immediately')
)
)

82
public/css/icinga/animation.less Normal file
View File

@ -0,0 +1,82 @@
.animate(@animate) {
-moz-animation: @animate;
-o-animation: @animate;
-webkit-animation: @animate;
animation: @animate;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-ms-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}

12
public/css/icinga/tabs.less
View File

@ -136,3 +136,15 @@ ul.tabs img.icon {
a.close-tab {
display: none;
}
.spinner > i {
line-height: 1;
}
.spinner.active > i {
.animate(spin 2s infinite linear);
&:before {
// icon-spin6
content: '\e874';
}
}

BIN
public/font/ifont.eot
View File

Binary file not shown.

3
public/font/ifont.svg
View File

@ -1,7 +1,7 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2014 by original authors @ fontello.com</metadata>
<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
<defs>
<font id="ifont" horiz-adv-x="1000" >
<font-face font-family="ifont" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
@ -122,6 +122,7 @@
<glyph glyph-name="chart-bar" unicode="&#xe871;" d="m357 350v-286h-143v286h143z m214 286v-572h-142v572h142z m572-643v-72h-1143v858h71v-786h1072z m-357 500v-429h-143v429h143z m214 214v-643h-143v643h143z" horiz-adv-x="1142.9" />
<glyph glyph-name="beaker" unicode="&#xe872;" d="m852 42q31-50 12-85t-78-36h-643q-59 0-79 36t12 85l281 442v223h-36q-14 0-25 11t-10 25 10 25 25 11h286q15 0 25-11t11-25-11-25-25-11h-36v-223z m-435 405l-151-240h397l-152 240-11 17v243h-71v-243z" horiz-adv-x="928.6" />
<glyph glyph-name="magic" unicode="&#xe873;" d="m664 526l164 163-60 60-164-164z m249 163q0-15-10-25l-717-718q-10-10-25-10t-25 10l-111 111q-10 10-10 25t10 25l718 718q10 10 25 10t25-10l110-111q10-10 10-25z m-753 106l54-16-54-17-17-55-17 55-55 17 55 16 17 55z m195-90l109-34-109-33-34-109-33 109-109 33 109 34 33 109z m519-267l55-17-55-16-17-55-17 55-54 16 54 17 17 55z m-357 357l54-16-54-17-17-55-17 55-54 17 54 16 17 55z" horiz-adv-x="928.6" />
<glyph glyph-name="spin6" unicode="&#xe874;" d="m855 9c-189-190-520-172-705 13-190 190-200 494-28 695 11 13 21 26 35 34 36 23 85 18 117-13 30-31 35-76 16-112-5-9-9-15-16-22-140-151-145-379-8-516 153-153 407-121 542 34 106 122 142 297 77 451-83 198-305 291-510 222l0 1c236 82 492-24 588-252 71-167 37-355-72-493-11-15-23-29-36-42z" horiz-adv-x="1000" />
</font>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 53 KiB

BIN
public/font/ifont.ttf
View File

Binary file not shown.

BIN
public/font/ifont.woff
View File

Binary file not shown.

10
public/js/icinga/events.js
View File

@ -226,6 +226,11 @@
event.stopPropagation();
event.preventDefault();
// activate spinner indicator
if ($button.hasClass('spinner')) {
$button.addClass('active');
}
icinga.logger.debug('Submitting form: ' + method + ' ' + url, method);
$target = self.getLinkTargetFor($form);
@ -438,6 +443,11 @@
return;
}
// activate spinner indicator
if ($a.hasClass('spinner')) {
$a.addClass('active');
}
// If link has hash tag...
if (href.match(/#/)) {
if (href === '#') {