From 8a7f762c712513f7e54c43ee6de965a0d34e98d9 Mon Sep 17 00:00:00 2001 From: Samuel Georges Date: Sat, 28 May 2016 06:43:20 +1000 Subject: [PATCH] Restyle system status report widget Fixes styling on popover-danger and popover-head with customization --- .../assets/less/controls/reportwidgets.less | 10 +-- .../fileupload/partials/_fileupload.htm | 2 +- .../backend/models/brandsetting/custom.less | 23 ------ .../controllers/themes/_theme_list_item.htm | 2 +- modules/system/assets/ui/docs/chart.md | 44 +++++++++- modules/system/assets/ui/less/chart.less | 82 +++++++++++++------ modules/system/assets/ui/less/popover.less | 7 ++ modules/system/assets/ui/storm.css | 47 +++++++---- modules/system/reportwidgets/Status.php | 10 ++- .../reportwidgets/status/partials/_widget.htm | 69 +++++++++++----- 10 files changed, 204 insertions(+), 92 deletions(-) diff --git a/modules/backend/assets/less/controls/reportwidgets.less b/modules/backend/assets/less/controls/reportwidgets.less index d2c1de230..d044bef37 100644 --- a/modules/backend/assets/less/controls/reportwidgets.less +++ b/modules/backend/assets/less/controls/reportwidgets.less @@ -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; diff --git a/modules/backend/formwidgets/fileupload/partials/_fileupload.htm b/modules/backend/formwidgets/fileupload/partials/_fileupload.htm index 2936ab0fe..84cc65aa5 100644 --- a/modules/backend/formwidgets/fileupload/partials/_fileupload.htm +++ b/modules/backend/formwidgets/fileupload/partials/_fileupload.htm @@ -32,7 +32,7 @@
- +
diff --git a/modules/backend/models/brandsetting/custom.less b/modules/backend/models/brandsetting/custom.less index 7db84e2bd..582ca4372 100644 --- a/modules/backend/models/brandsetting/custom.less +++ b/modules/backend/models/brandsetting/custom.less @@ -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 // diff --git a/modules/cms/controllers/themes/_theme_list_item.htm b/modules/cms/controllers/themes/_theme_list_item.htm index 8ea25c13e..1e058c362 100644 --- a/modules/cms/controllers/themes/_theme_list_item.htm +++ b/modules/cms/controllers/themes/_theme_list_item.htm @@ -3,7 +3,7 @@ ?>
-
+

getConfigValue('name', $theme->getDirName())) ?>

diff --git a/modules/system/assets/ui/docs/chart.md b/modules/system/assets/ui/docs/chart.md index 95f507e8e..8e32176d6 100644 --- a/modules/system/assets/ui/docs/chart.md +++ b/modules/system/assets/ui/docs/chart.md @@ -62,4 +62,46 @@ The next example shows a bar chart markup. The **wrap-legend** class is optional
  • Label 2 100
  • Label 3 100
    • -
    \ No newline at end of file + + + + +## Status list + +A list of statuses and values + +# Example + +
    + +
    diff --git a/modules/system/assets/ui/less/chart.less b/modules/system/assets/ui/less/chart.less index 62bf12638..8259d1d02 100644 --- a/modules/system/assets/ui/less/chart.less +++ b/modules/system/assets/ui/less/chart.less @@ -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 { + .status-text { + margin: 0 5px; + + &.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); } + } + + .status-label { + float: right; display: inline-block; padding: 1px 5px; - color: white; + font-size: @font-size-base; .border-radius(@border-radius-base); - &.circle { - .border-radius(10px); - width: 12px; - height: 12px; - vertical-align: middle; - position: relative; - top: -1px; + &:not(.link) { + color: white; + letter-spacing: 1px; + font-family: @font-family-monospace; } + } - &.success {background: @brand-success;} - &.primary {background: @brand-primary;} - &.warning {background: @brand-warning;} - &.danger {background: @brand-danger;} - &.info {background: @brand-info;} + .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; } -} \ No newline at end of file +} diff --git a/modules/system/assets/ui/less/popover.less b/modules/system/assets/ui/less/popover.less index d31b3ec7d..379b17635 100644 --- a/modules/system/assets/ui/less/popover.less +++ b/modules/system/assets/ui/less/popover.less @@ -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; + } } } diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css index e41adcf76..2f4f1c106 100644 --- a/modules/system/assets/ui/storm.css +++ b/modules/system/assets/ui/storm.css @@ -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"} diff --git a/modules/system/reportwidgets/Status.php b/modules/system/reportwidgets/Status.php index 90e765048..938c88617 100644 --- a/modules/system/reportwidgets/Status.php +++ b/modules/system/reportwidgets/Status.php @@ -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(); } } diff --git a/modules/system/reportwidgets/status/partials/_widget.htm b/modules/system/reportwidgets/status/partials/_widget.htm index 8779e5b66..27bbb54f7 100644 --- a/modules/system/reportwidgets/status/partials/_widget.htm +++ b/modules/system/reportwidgets/status/partials/_widget.htm @@ -2,28 +2,57 @@

    property('title'))) ?>

    - +

    - \ No newline at end of file +