Restyle system status report widget

Fixes styling on popover-danger and popover-head with customization
wisnurdi · May 27, 2016 · 8a7f762 · 8a7f762
1 parent 759d5e8
commit 8a7f762
Show file tree

Hide file tree

Showing 10 changed files with 202 additions and 90 deletions.
diff --git 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
@@ -32,7 +32,7 @@ <h3><?= e(trans('backend::lang.fileupload.upload_error')) ?></h3>
             <button type="button" class="close" data-dismiss="popover" aria-hidden="true">&times;</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>
 

diff --git 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
@@ -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>

diff --git 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
             <li>Label 2 <span>100</span></li>
             <li>Label 3 <span>100</span></li>
         </ul>
-    </div>
+    </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>
diff --git 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;
     }
-}
+}
diff --git 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
@@ -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
@@ -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 @@ public function defineProperties()
     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();
     }
 }