Restyle system status report widget
Fixes styling on popover-danger and popover-head with customization
This commit is contained in:
Samuel Georges
parent
759d5e8e29
commit
8a7f762c71
|
|
@ -13,11 +13,11 @@
|
|||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.height-100 {height: 100px;}
|
||||
.height-200 {height: 200px;}
|
||||
.height-300 {height: 300px;}
|
||||
.height-400 {height: 400px;}
|
||||
.height-500 {height: 500px;}
|
||||
.height-100 { height: 100px; }
|
||||
.height-200 { height: 200px; }
|
||||
.height-300 { height: 300px; }
|
||||
.height-400 { height: 400px; }
|
||||
.height-500 { height: 500px; }
|
||||
|
||||
p.report-description {
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<button type="button" class="close" data-dismiss="popover" aria-hidden="true">×</button>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<button class="btn btn-default" data-remove-file><?= e(trans('backend::lang.fileupload.remove_file')) ?></button>
|
||||
<button class="btn btn-secondary" data-remove-file><?= e(trans('backend::lang.fileupload.remove_file')) ?></button>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -73,28 +73,6 @@ body.outer {
|
|||
background-image: url('@{logo-image}');
|
||||
}
|
||||
|
||||
//
|
||||
// Popover
|
||||
//
|
||||
|
||||
div.control-popover {
|
||||
.popover-head {
|
||||
background: @custom-dark-secondary;
|
||||
}
|
||||
|
||||
&.placement-bottom .popover-head:before {
|
||||
border-bottom-color: @custom-dark-secondary;
|
||||
}
|
||||
|
||||
&.placement-left .popover-head:before {
|
||||
border-left-color: @custom-dark-secondary;
|
||||
}
|
||||
|
||||
&.placement-right .popover-head:before {
|
||||
border-right-color: @custom-dark-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// List
|
||||
//
|
||||
|
|
@ -116,7 +94,6 @@ table.table.data {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Fancy Layout
|
||||
//
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
?>
|
||||
|
||||
<div class="layout-cell min-height theme-thumbnail">
|
||||
<div class="thumbnail-container"><img src="<?= $theme->getPreviewImageUrl() ?>"/></div>
|
||||
<div class="thumbnail-container"><img src="<?= $theme->getPreviewImageUrl() ?>" alt="" /></div>
|
||||
</div>
|
||||
<div class="layout-cell min-height theme-description">
|
||||
<h3><?= e($theme->getConfigValue('name', $theme->getDirName())) ?></h3>
|
||||
|
|
|
|||
|
|
@ -63,3 +63,45 @@ The next example shows a bar chart markup. The **wrap-legend** class is optional
|
|||
<li>Label 3 <span>100</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<a name="bar-chart" class="anchor" href="#bar-chart"></a>
|
||||
## Status list
|
||||
|
||||
A list of statuses and values
|
||||
|
||||
# Example
|
||||
|
||||
<div class="control-status-list">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="status-icon success"><i class="icon-check"></i></span>
|
||||
<span class="status-text success">Software is up to date</span>
|
||||
<a href="#" class="status-label link">Update</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="status-icon warning"><i class="icon-exclamation"></i></span>
|
||||
<span class="status-text warning">Some issues need attention</span>
|
||||
<a href="#" class="status-label link">View</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="status-icon"><i class="icon-info"></i></span>
|
||||
<span class="status-text">System build</span>
|
||||
<span class="status-label primary">313</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="status-icon"><i class="icon-info"></i></span>
|
||||
<span class="status-text">Event log items</span>
|
||||
<span class="status-label primary">200</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="status-icon"><i class="icon-info"></i></span>
|
||||
<span class="status-text">Online since</span>
|
||||
<span class="status-label link">4th April 2014</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -299,19 +299,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
ul.status-list {
|
||||
//
|
||||
// Status list
|
||||
// --------------------------------------------------
|
||||
|
||||
.control-status-list > ul {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0 15px 0 0;
|
||||
margin: 0;
|
||||
padding: 7px 15px;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
font-size: @font-size-base - 1;
|
||||
color: @color-status-list-text;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -322,36 +328,66 @@ ul.status-list {
|
|||
}
|
||||
}
|
||||
|
||||
span.status {
|
||||
display: inline-block;
|
||||
padding: 1px 5px;
|
||||
color: white;
|
||||
.border-radius(@border-radius-base);
|
||||
.status-text {
|
||||
margin: 0 5px;
|
||||
|
||||
&.circle {
|
||||
.border-radius(10px);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
&.muted { color: @text-muted; }
|
||||
&.primary { .text-emphasis-variant(@brand-primary); }
|
||||
&.success { .text-emphasis-variant(@state-success-text); }
|
||||
&.info { .text-emphasis-variant(@state-info-text); }
|
||||
&.warning { .text-emphasis-variant(@state-warning-text); }
|
||||
&.danger { .text-emphasis-variant(@state-danger-text); }
|
||||
}
|
||||
|
||||
&.success {background: @brand-success;}
|
||||
&.primary {background: @brand-primary;}
|
||||
&.warning {background: @brand-warning;}
|
||||
&.danger {background: @brand-danger;}
|
||||
&.info {background: @brand-info;}
|
||||
.status-label {
|
||||
float: right;
|
||||
display: inline-block;
|
||||
padding: 1px 5px;
|
||||
font-size: @font-size-base;
|
||||
.border-radius(@border-radius-base);
|
||||
|
||||
&:not(.link) {
|
||||
color: white;
|
||||
letter-spacing: 1px;
|
||||
font-family: @font-family-monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: white;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
.border-radius(100px);
|
||||
|
||||
> i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-icon,
|
||||
.status-label {
|
||||
background: #aaa;
|
||||
&.success { background: @brand-success; }
|
||||
&.primary { background: @brand-primary; }
|
||||
&.warning { background: @brand-warning; }
|
||||
&.danger { background: @brand-danger; }
|
||||
&.info { background: @brand-info; }
|
||||
&.link { background: transparent; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gecko ul.status-list li span.status.circle {
|
||||
.gecko .control-status-list > ul li span.status.circle {
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.report-container {
|
||||
ul.status-list {
|
||||
margin-top: -10px;
|
||||
.control-status-list > ul {
|
||||
margin: -15px;
|
||||
}
|
||||
}
|
||||
|
|
@ -235,7 +235,14 @@ div.control-popover {
|
|||
}
|
||||
|
||||
.popover-head {
|
||||
color: #fff;
|
||||
background-color: @color-popover-danger-bg;
|
||||
border-bottom: 2px solid rgba(255,255,255,.15);
|
||||
|
||||
.close {
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1366,7 +1366,8 @@ div.control-popover.popover-danger.placement-bottom > div:after{content:'';displ
|
|||
div.control-popover.popover-danger.placement-top > div:after{content:'';display:block;width:0;height:0;border-left:7.5px solid transparent;border-right:7.5px solid transparent;border-top:8px solid #ab2a1c;border-bottom-width:0}
|
||||
div.control-popover.popover-danger.placement-left > div:after{content:'';display:block;width:0;height:0;border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;border-left:8px solid #ab2a1c}
|
||||
div.control-popover.popover-danger.placement-right > div:after{content:'';display:block;width:0;height:0;border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;border-right:8px solid #ab2a1c}
|
||||
div.control-popover.popover-danger .popover-head{background-color:#ab2a1c}
|
||||
div.control-popover.popover-danger .popover-head{color:#fff;background-color:#ab2a1c;border-bottom:2px solid rgba(255,255,255,0.15)}
|
||||
div.control-popover.popover-danger .popover-head .close{color:#fff;text-shadow:none}
|
||||
div.control-popover div.popover-fixed-height{height:300px}
|
||||
.popover-highlight{position:relative;z-index:598 !important}
|
||||
.popover-highlight:hover,.popover-highlight:active,.popover-highlight:focus{z-index:598 !important}
|
||||
|
|
@ -1620,20 +1621,36 @@ to{background-position:0 0}
|
|||
.report-container .title-value p.negative:after,.report-container .title-value p.positive:after{top:-8px}
|
||||
.report-container .title-value span.goal-meter-indicator{height:31px;top:4px;width:15px;margin-right:10px}
|
||||
.report-container .title-value span.goal-meter-indicator span{width:15px}
|
||||
ul.status-list{margin-bottom:0;padding:0}
|
||||
ul.status-list li{margin:0 15px 0 0;list-style:none;display:inline-block;font-size:14px;color:#7e8c8d}
|
||||
ul.status-list li:last-child{margin-right:0}
|
||||
ul.status-list li a{color:#7e8c8d}
|
||||
ul.status-list li a:hover{color:#0181b9;text-decoration:none}
|
||||
ul.status-list li span.status{display:inline-block;padding:1px 5px;color:white;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
|
||||
ul.status-list li span.status.circle{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;width:12px;height:12px;vertical-align:middle;position:relative;top:-1px}
|
||||
ul.status-list li span.status.success{background:#31ac5f}
|
||||
ul.status-list li span.status.primary{background:#34495e}
|
||||
ul.status-list li span.status.warning{background:#f0ad4e}
|
||||
ul.status-list li span.status.danger{background:#ab2a1c}
|
||||
ul.status-list li span.status.info{background:#5bc0de}
|
||||
.gecko ul.status-list li span.status.circle{top:-2px}
|
||||
.report-container ul.status-list{margin-top:-10px}
|
||||
.control-status-list > ul{margin-bottom:0;padding:0}
|
||||
.control-status-list > ul li{margin:0;padding:7px 15px;list-style:none;display:block;font-size:13px;color:#7e8c8d;border-bottom:1px solid #f0f0f0}
|
||||
.control-status-list > ul li:last-child{border-bottom:none}
|
||||
.control-status-list > ul li a{color:#7e8c8d}
|
||||
.control-status-list > ul li a:hover{color:#0181b9;text-decoration:none}
|
||||
.control-status-list > ul li .status-text{margin:0 5px}
|
||||
.control-status-list > ul li .status-text.muted{color:#999999}
|
||||
.control-status-list > ul li .status-text.primary{color:#34495e}
|
||||
a.control-status-list > ul li .status-text.primary:hover{color:#222f3d}
|
||||
.control-status-list > ul li .status-text.success{color:#3c763d}
|
||||
a.control-status-list > ul li .status-text.success:hover{color:#2b542c}
|
||||
.control-status-list > ul li .status-text.info{color:#31708f}
|
||||
a.control-status-list > ul li .status-text.info:hover{color:#245269}
|
||||
.control-status-list > ul li .status-text.warning{color:#8a6d3b}
|
||||
a.control-status-list > ul li .status-text.warning:hover{color:#66512c}
|
||||
.control-status-list > ul li .status-text.danger{color:#a94442}
|
||||
a.control-status-list > ul li .status-text.danger:hover{color:#843534}
|
||||
.control-status-list > ul li .status-label{float:right;display:inline-block;padding:1px 5px;font-size:14px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
|
||||
.control-status-list > ul li .status-label:not(.link){color:white;letter-spacing:1px;font-family:monospace}
|
||||
.control-status-list > ul li .status-icon{display:inline-block;text-align:center;color:white;width:22px;height:22px;line-height:22px;position:relative;top:-1px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px}
|
||||
.control-status-list > ul li .status-icon > i{font-size:10px}
|
||||
.control-status-list > ul li .status-icon,.control-status-list > ul li .status-label{background:#aaa}
|
||||
.control-status-list > ul li .status-icon.success,.control-status-list > ul li .status-label.success{background:#31ac5f}
|
||||
.control-status-list > ul li .status-icon.primary,.control-status-list > ul li .status-label.primary{background:#34495e}
|
||||
.control-status-list > ul li .status-icon.warning,.control-status-list > ul li .status-label.warning{background:#f0ad4e}
|
||||
.control-status-list > ul li .status-icon.danger,.control-status-list > ul li .status-label.danger{background:#ab2a1c}
|
||||
.control-status-list > ul li .status-icon.info,.control-status-list > ul li .status-label.info{background:#5bc0de}
|
||||
.control-status-list > ul li .status-icon.link,.control-status-list > ul li .status-label.link{background:transparent}
|
||||
.gecko .control-status-list > ul li span.status.circle{top:-2px}
|
||||
.report-container .control-status-list > ul{margin:-15px}
|
||||
.control-toolbar{font-size:0;padding:0 0 20px 0;position:relative;display:table;table-layout:fixed;width:100%}
|
||||
.control-toolbar:after,.control-toolbar:before{display:none;position:absolute;top:50%;margin-top:-7px;height:9px;font-size:10px;color:#bbbbbb}
|
||||
.control-toolbar:before{left:-6px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f104"}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,9 @@
|
|||
use BackendAuth;
|
||||
use System\Models\Parameters;
|
||||
use System\Classes\UpdateManager;
|
||||
use Cms\Models\MaintenanceSetting;
|
||||
use Backend\Classes\ReportWidgetBase;
|
||||
use System\Models\EventLog;
|
||||
use System\Models\RequestLog;
|
||||
use Exception;
|
||||
|
||||
/**
|
||||
|
|
@ -46,8 +47,11 @@ class Status extends ReportWidgetBase
|
|||
protected function loadData()
|
||||
{
|
||||
$manager = UpdateManager::instance();
|
||||
$this->vars['inMaintenance'] = MaintenanceSetting::get('is_enabled');
|
||||
$this->vars['showUpdates'] = BackendAuth::getUser()->hasAccess('system.manage_updates');
|
||||
$this->vars['canUpdate'] = BackendAuth::getUser()->hasAccess('system.manage_updates');
|
||||
$this->vars['updates'] = $manager->check();
|
||||
$this->vars['warnings'] = false;
|
||||
$this->vars['coreBuild'] = Parameters::get('system::core.build');
|
||||
$this->vars['eventLog'] = EventLog::count();
|
||||
$this->vars['requestLog'] = RequestLog::count();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,27 +2,56 @@
|
|||
<h3><?= e(trans($this->property('title'))) ?></h3>
|
||||
|
||||
<?php if (!isset($error)): ?>
|
||||
<ul class="status-list">
|
||||
<div class="control-status-list">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="<?= Backend::url('system/settings/update/october/cms/maintenance_settings') ?>">
|
||||
<?php if ($inMaintenance): ?>
|
||||
<span class="status circle warning"></span>
|
||||
<?= e(trans('backend::lang.dashboard.status.maintenance')) ?>
|
||||
<?php if ($updates): ?>
|
||||
<span class="status-icon warning"><i class="icon-exclamation"></i></span>
|
||||
<span class="status-text warning">Pending software updates</span>
|
||||
<?php if ($canUpdate): ?>
|
||||
<a href="<?= Backend::url('system/updates') ?>" class="status-label link">Update</a>
|
||||
<?php endif ?>
|
||||
<?php else: ?>
|
||||
<span class="status circle success"></span>
|
||||
<?= e(trans('backend::lang.dashboard.status.online')) ?>
|
||||
<span class="status-icon success"><i class="icon-check"></i></span>
|
||||
<span class="status-text success">Software is up to date</span>
|
||||
<?php endif ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php if ($showUpdates): ?>
|
||||
<li>
|
||||
<a href="<?= Backend::url('system/updates') ?>">
|
||||
<span class="status primary"><?= $updates ?></span>
|
||||
<?= e(trans_choice('backend::lang.dashboard.status.update_available', $updates)) ?>
|
||||
</a>
|
||||
<?php if ($warnings): ?>
|
||||
<span class="status-icon warning"><i class="icon-exclamation"></i></span>
|
||||
<span class="status-text warning">Some issues need attention</span>
|
||||
<a href="#todo" class="status-label link">View</a>
|
||||
<?php else: ?>
|
||||
<span class="status-icon success"><i class="icon-check"></i></span>
|
||||
<span class="status-text success">No warnings to display</span>
|
||||
<?php endif ?>
|
||||
</li>
|
||||
<?php if ($coreBuild): ?>
|
||||
<li>
|
||||
<span class="status-icon"><i class="icon-info"></i></span>
|
||||
<span class="status-text">System build</span>
|
||||
<span class="status-label primary"><?= $coreBuild ?></span>
|
||||
</li>
|
||||
<?php endif ?>
|
||||
<li>
|
||||
<span class="status-icon"><i class="icon-info"></i></span>
|
||||
<span class="status-text">Event log items</span>
|
||||
<span class="status-label primary"><?= $eventLog ?></span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="status-icon"><i class="icon-info"></i></span>
|
||||
<span class="status-text">Request log items</span>
|
||||
<span class="status-label primary"><?= $requestLog ?></span>
|
||||
</li>
|
||||
<!--
|
||||
<li>
|
||||
<span class="status-icon"><i class="icon-info"></i></span>
|
||||
<span class="status-text">Online since</span>
|
||||
<span class="status-label link">4th April 2014</span>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<p class="flash-message static warning"><?= e($error) ?></p>
|
||||
<?php endif ?>
|
||||
|
|
|
|||
Loading…
Reference in New Issue