triggers panel: redesign, unify with Alert List panel

dist/css/grafana-zabbix.dark.css

@@ -1,20 +1,27 @@
-.triggers-panel-wrapper .panel-content {
-  padding: 0; }
-
-.triggers-panel-wrapper .panel-title-container {
-  padding-bottom: 4px; }
-
 .triggers-panel-scroll {
   overflow: auto; }
 
 .triggers-panel-container {
-  padding-top: 2.2em;
   position: relative; }
+  .triggers-panel-container .zabbix-hostname {
+    color: #8e8e8e;
+    margin-left: 1rem;
+    font-weight: bold; }
+  .triggers-panel-container .alert-list-info.alert-list-info-left {
+    color: #b3b3b3; }
+  .triggers-panel-container .trigger-info-block {
+    display: inline; }
+    .triggers-panel-container .trigger-info-block i {
+      margin-right: 0.4rem; }
+    .triggers-panel-container .trigger-info-block i,
+    .triggers-panel-container .trigger-info-block a {
+      color: #8e8e8e; }
 
 .triggers-panel-footer {
   text-align: center;
   font-size: 90%;
-  line-height: 2px; }
+  line-height: 2px;
+  padding-top: 4px; }
   .triggers-panel-footer ul {
     position: relative;
     display: inline-block;
@@ -33,50 +40,6 @@
       font-weight: bold;
       color: #33B5E5; }
 
-.triggers-panel-table {
-  width: 100%;
-  border-collapse: collapse; }
-  .triggers-panel-table th {
-    padding: 0; }
-    .triggers-panel-table th:first-child .triggers-panel-table-header-inner {
-      padding-left: 15px; }
-  .triggers-panel-table td {
-    padding: 0.45em 0 0.45em 1.1em;
-    border-bottom: 2px solid #141414;
-    border-right: 2px solid #141414; }
-    .triggers-panel-table td:first-child {
-      padding-left: 15px; }
-    .triggers-panel-table td:last-child {
-      border-right: none; }
-  .triggers-panel-table .zbx-field-colored {
-    color: #f4f5f8; }
-  .triggers-panel-table .zbx-description-icon {
-    float: right;
-    padding-right: 8px;
-    color: #f4f5f8; }
-
-.triggers-panel-header-bg {
-  background: #242222;
-  border-top: 2px solid #141414;
-  border-bottom: 2px solid #141414;
-  height: 2.0em;
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0; }
-
-.triggers-panel-table-header-inner {
-  padding: 0.45em 0 0.45em 1.1em;
-  text-align: left;
-  color: #33B5E5;
-  position: absolute;
-  top: 0; }
-
-.triggers-panel-width-hack {
-  visibility: hidden;
-  height: 0px;
-  line-height: 0px; }
-
 .ack-tooltip .drop-content {
   max-width: 70rem !important;
   min-width: 30rem !important; }

dist/css/grafana-zabbix.dark.css.map

@@ -8,6 +8,6 @@
 		"../../src/sass/_variables.scss",
 		"../../src/sass/_panel-triggers.scss"
 	],
-	"mappings": "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",
+	"mappings": "AIAA,AAAA,sBAAsB,CAAC;EACrB,QAAQ,EAAE,IAAK,GAChB;;AAED,AAAA,yBAAyB,CAAC;EACxB,QAAQ,EAAE,QAAS,GAsBpB;EAvBD,AAGE,yBAHuB,CAGvB,gBAAgB,CAAC;IACf,KAAK,EHCU,OAAO;IGAtB,WAAW,EAAE,IAAK;IAClB,WAAW,EAAE,IAAK,GACnB;EAPH,AASkB,yBATO,CASvB,gBAAgB,AAAA,qBAAqB,CAAC;IACpC,KAAK,EHJU,OAAO,GGKvB;EAXH,AAaE,yBAbuB,CAavB,mBAAmB,CAAC;IAClB,OAAO,EAAE,MAAO,GAQjB;IAtBH,AAeI,yBAfqB,CAavB,mBAAmB,CAEjB,CAAC,CAAC;MACA,YAAY,EAAE,MAAO,GACtB;IAjBL,AAkBI,yBAlBqB,CAavB,mBAAmB,CAKjB,CAAC;IAlBL,AAmBI,yBAnBqB,CAavB,mBAAmB,CAMjB,CAAC,CAAC;MACA,KAAK,EHfQ,OAAO,GGgBrB;;AAIL,AAAA,sBAAsB,CAAC;EACrB,UAAU,EAAE,MAAO;EACnB,SAAS,EAAE,GAAI;EACf,WAAW,EAAE,GAAI;EACjB,WAAW,EAAE,GAAI,GA0BlB;EA9BD,AAME,sBANoB,CAMpB,EAAE,CAAC;IACD,QAAQ,EAAE,QAAS;IACnB,OAAO,EAAE,YAAa;IACtB,WAAW,EAAE,CAAE;IACf,aAAa,EAAE,CAAE,GAClB;EAXH,AAYO,sBAZe,CAYpB,EAAE,GAAG,EAAE,CAAC;IACN,OAAO,EAAE,MAAO,GACjB;EAdH,AAeY,sBAfU,CAepB,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IACV,KAAK,EAAE,IAAK;IACZ,OAAO,EAAE,QAAS;IAClB,eAAe,EAAE,IAAK;IACtB,iBAAiB,EAAE,CAAE,GAUtB;IA7BH,AAeY,sBAfU,CAepB,EAAE,GAAG,EAAE,GAAG,CAAC,AAMR,MAAM,CAAC;MACN,gBAAgB,EHjBE,IAAI,GGkBvB;IAvBL,AAeY,sBAfU,CAepB,EAAE,GAAG,EAAE,GAAG,CAAC,AAUR,OAAO,CAAC;MACP,WAAW,EAAE,IAAK;MAClB,KAAK,EHnCa,OAAO,GGoC1B;;AAIL,AACE,YADU,CACV,aAAa,CAAC;EAEZ,SAAS,EAAE,gBAAiB;EAC5B,SAAS,EAAE,gBAAiB,GAC7B;;AALH,AAOE,YAPU,CAOV,aAAa,CAAC;EACZ,KAAK,EAAE,GAAI,GACZ;;AATH,AAWE,YAXU,CAWV,eAAe,CAAC;EACd,WAAW,EAAE,IAAK,GACnB;;AAbH,AAeQ,YAfI,CAeV,KAAK,CAAC,EAAE,EAfV,AAeY,YAfA,CAeA,EAAE,CAAC;EACX,aAAa,EAAE,IAAK,GACrB;;AAjBH,AAmBE,YAnBU,CAmBV,gBAAgB,CAAC;EACf,WAAW,EAAE,IAAK,GAWnB;EA/BH,AAsBI,YAtBQ,CAmBV,gBAAgB,CAGd,KAAK,CAAC;IACJ,MAAM,EAAE,SAAU;IAClB,aAAa,EAAE,GAAI;IACnB,KAAK,EAAE,GAAI,GACZ;EA1BL,AA4BI,YA5BQ,CAmBV,gBAAgB,CASd,MAAM,CAAC;IACL,WAAW,EAAE,IAAK,GACnB",
 	"names": []
 }

dist/css/grafana-zabbix.light.css

@@ -1,20 +1,27 @@
-.triggers-panel-wrapper .panel-content {
-  padding: 0; }
-
-.triggers-panel-wrapper .panel-title-container {
-  padding-bottom: 4px; }
-
 .triggers-panel-scroll {
   overflow: auto; }
 
 .triggers-panel-container {
-  padding-top: 2.2em;
   position: relative; }
+  .triggers-panel-container .zabbix-hostname {
+    color: #767980;
+    margin-left: 1rem;
+    font-weight: bold; }
+  .triggers-panel-container .alert-list-info.alert-list-info-left {
+    color: #acb6bf; }
+  .triggers-panel-container .trigger-info-block {
+    display: inline; }
+    .triggers-panel-container .trigger-info-block i {
+      margin-right: 0.4rem; }
+    .triggers-panel-container .trigger-info-block i,
+    .triggers-panel-container .trigger-info-block a {
+      color: #767980; }
 
 .triggers-panel-footer {
   text-align: center;
   font-size: 90%;
-  line-height: 2px; }
+  line-height: 2px;
+  padding-top: 4px; }
   .triggers-panel-footer ul {
     position: relative;
     display: inline-block;
@@ -28,55 +35,11 @@
     text-decoration: none;
     border-left-width: 0; }
     .triggers-panel-footer ul > li > a:hover {
-      background-color: #ECECEC; }
+      background-color: #dde4ed; }
     .triggers-panel-footer ul > li > a.active {
       font-weight: bold;
       color: #2AB2E4; }
 
-.triggers-panel-table {
-  width: 100%;
-  border-collapse: collapse; }
-  .triggers-panel-table th {
-    padding: 0; }
-    .triggers-panel-table th:first-child .triggers-panel-table-header-inner {
-      padding-left: 15px; }
-  .triggers-panel-table td {
-    padding: 0.45em 0 0.45em 1.1em;
-    border-bottom: 2px solid #fff;
-    border-right: 2px solid #fff; }
-    .triggers-panel-table td:first-child {
-      padding-left: 15px; }
-    .triggers-panel-table td:last-child {
-      border-right: none; }
-  .triggers-panel-table .zbx-field-colored {
-    color: #f4f5f8; }
-  .triggers-panel-table .zbx-description-icon {
-    float: right;
-    padding-right: 8px;
-    color: #f4f5f8; }
-
-.triggers-panel-header-bg {
-  background: #ECECEC;
-  border-top: 2px solid #fff;
-  border-bottom: 2px solid #fff;
-  height: 2.0em;
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0; }
-
-.triggers-panel-table-header-inner {
-  padding: 0.45em 0 0.45em 1.1em;
-  text-align: left;
-  color: #2AB2E4;
-  position: absolute;
-  top: 0; }
-
-.triggers-panel-width-hack {
-  visibility: hidden;
-  height: 0px;
-  line-height: 0px; }
-
 .ack-tooltip .drop-content {
   max-width: 70rem !important;
   min-width: 30rem !important; }

dist/css/grafana-zabbix.light.css.map

@@ -8,6 +8,6 @@
 		"../../src/sass/_variables.scss",
 		"../../src/sass/_panel-triggers.scss"
 	],
-	"mappings": "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",
+	"mappings": "AIAA,AAAA,sBAAsB,CAAC;EACrB,QAAQ,EAAE,IAAK,GAChB;;AAED,AAAA,yBAAyB,CAAC;EACxB,QAAQ,EAAE,QAAS,GAsBpB;EAvBD,AAGE,yBAHuB,CAGvB,gBAAgB,CAAC;IACf,KAAK,EHCU,OAAO;IGAtB,WAAW,EAAE,IAAK;IAClB,WAAW,EAAE,IAAK,GACnB;EAPH,AASkB,yBATO,CASvB,gBAAgB,AAAA,qBAAqB,CAAC;IACpC,KAAK,EHJU,OAAO,GGKvB;EAXH,AAaE,yBAbuB,CAavB,mBAAmB,CAAC;IAClB,OAAO,EAAE,MAAO,GAQjB;IAtBH,AAeI,yBAfqB,CAavB,mBAAmB,CAEjB,CAAC,CAAC;MACA,YAAY,EAAE,MAAO,GACtB;IAjBL,AAkBI,yBAlBqB,CAavB,mBAAmB,CAKjB,CAAC;IAlBL,AAmBI,yBAnBqB,CAavB,mBAAmB,CAMjB,CAAC,CAAC;MACA,KAAK,EHfQ,OAAO,GGgBrB;;AAIL,AAAA,sBAAsB,CAAC;EACrB,UAAU,EAAE,MAAO;EACnB,SAAS,EAAE,GAAI;EACf,WAAW,EAAE,GAAI;EACjB,WAAW,EAAE,GAAI,GA0BlB;EA9BD,AAME,sBANoB,CAMpB,EAAE,CAAC;IACD,QAAQ,EAAE,QAAS;IACnB,OAAO,EAAE,YAAa;IACtB,WAAW,EAAE,CAAE;IACf,aAAa,EAAE,CAAE,GAClB;EAXH,AAYO,sBAZe,CAYpB,EAAE,GAAG,EAAE,CAAC;IACN,OAAO,EAAE,MAAO,GACjB;EAdH,AAeY,sBAfU,CAepB,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IACV,KAAK,EAAE,IAAK;IACZ,OAAO,EAAE,QAAS;IAClB,eAAe,EAAE,IAAK;IACtB,iBAAiB,EAAE,CAAE,GAUtB;IA7BH,AAeY,sBAfU,CAepB,EAAE,GAAG,EAAE,GAAG,CAAC,AAMR,MAAM,CAAC;MACN,gBAAgB,EHvCH,OAAO,GGwCrB;IAvBL,AAeY,sBAfU,CAepB,EAAE,GAAG,EAAE,GAAG,CAAC,AAUR,OAAO,CAAC;MACP,WAAW,EAAE,IAAK;MAClB,KAAK,EHpCa,OAAO,GGqC1B;;AAIL,AACE,YADU,CACV,aAAa,CAAC;EAEZ,SAAS,EAAE,gBAAiB;EAC5B,SAAS,EAAE,gBAAiB,GAC7B;;AALH,AAOE,YAPU,CAOV,aAAa,CAAC;EACZ,KAAK,EAAE,GAAI,GACZ;;AATH,AAWE,YAXU,CAWV,eAAe,CAAC;EACd,WAAW,EAAE,IAAK,GACnB;;AAbH,AAeQ,YAfI,CAeV,KAAK,CAAC,EAAE,EAfV,AAeY,YAfA,CAeA,EAAE,CAAC;EACX,aAAa,EAAE,IAAK,GACrB;;AAjBH,AAmBE,YAnBU,CAmBV,gBAAgB,CAAC;EACf,WAAW,EAAE,IAAK,GAWnB;EA/BH,AAsBI,YAtBQ,CAmBV,gBAAgB,CAGd,KAAK,CAAC;IACJ,MAAM,EAAE,SAAU;IAClB,aAAa,EAAE,GAAI;IACnB,KAAK,EAAE,GAAI,GACZ;EA1BL,AA4BI,YA5BQ,CAmBV,gBAAgB,CASd,MAAM,CAAC;IACL,WAAW,EAAE,IAAK,GACnB",
 	"names": []
 }

dist/panel-triggers/partials/module.html

@@ -1,7 +1,7 @@
 <div class="triggers-panel-container">
-  <div class="triggers-panel-header-bg"></div>
+  <!-- <div class="triggers-panel-header-bg"></div> -->
   <div class="triggers-panel-scroll">
-    <table class="triggers-panel-table">
+    <table class="triggers-panel-table" ng-if="false">
       <thead>
         <tr>
           <th ng-if="ctrl.panel.hostField" class="zbx-field-host">
@@ -121,6 +121,65 @@
         </tr>
       </tbody>
     </table>
+
+    <section class="card-section card-list-layout-list">
+      <ol class="card-list">
+        <li class="card-item-wrapper" ng-repeat="trigger in ctrl.currentTriggersPage">
+          <div class="alert-list card-item card-item--alert">
+            <div class="alert-list-body">
+              <div class="alert-list-icon alert-list-item-state"
+                ng-style="{color: trigger.color}">
+                <i class="icon-gf"
+                  ng-class="trigger.value === '1' ? 'icon-gf-critical' : 'icon-gf-online'"></i>
+              </div>
+              <div class="alert-list-main">
+                <p class="alert-list-title">
+                  {{trigger.description}}
+                  <span class="zabbix-hostname" ng-if="ctrl.panel.hostField || ctrl.panel.hostTechNameField">
+                    {{ ctrl.formatHostName(trigger) }}
+                  </span>
+                </p>
+
+                <p class="alert-list-text">
+                  <span ng-if="ctrl.panel.statusField" class="alert-list-state"
+                    ng-class="trigger.value === '1' ? 'alert-state-critical' : 'alert-state-ok'">
+                    {{ctrl.triggerStatusMap[trigger.value]}}
+                  </span>
+                  <span ng-if="ctrl.panel.severityField" class="alert-list-state"
+                    ng-style="{color: trigger.color}">
+                    {{trigger.severity}}
+                  </span>
+                  for {{trigger.age}}
+
+                  <span class="alert-list-info alert-list-info-left">{{trigger.comments}}</span>
+                </p>
+              </div>
+            </div>
+            <div class="alert-list-footer">
+              <span class="alert-list-text">{{trigger.lastchange}}</span>
+              <span class="alert-list-text">
+                <!--Img Link-->
+              </span>
+
+              <div class="trigger-info-block">
+                <a ng-if="trigger.url" href="{{trigger.url}}" target="_blank">
+                  <i class="fa fa-external-link"></i>
+                </a>
+
+                <span ng-if="trigger.state === '1'" bs-tooltip="'{{trigger.error}}'">
+                  <i class="fa fa-question-circle"></i>
+                </span>
+
+                <ack-tooltip ack="trigger.acknowledges" trigger="trigger"
+                  on-ack="ctrl.acknowledgeTrigger" context="ctrl">
+                </ack-tooltip>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ol>
+    </section>
   </div>
 </div>
+
 <div class="triggers-panel-footer"></div>

dist/panel-triggers/partials/options_tab.html

@@ -69,7 +69,7 @@
         <select class="gf-form-input"
           ng-model="editor.panel.sortTriggersBy"
           ng-options="f.text for f in editor.sortByFields track by f.value"
-          ng-change="editor.panelCtrl.refresh()">
+          ng-change="ctrl.render()">
         </select>
       </div>
     </div>
@@ -107,7 +107,7 @@
     <div class="gf-form max-width-14">
       <label class="gf-form-label width-8">Font color</label>
       <span class="gf-form-label">
-        <spectrum-picker ng-model="editor.panel.fontColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
+        <spectrum-picker ng-model="editor.panel.fontColor" ng-change="ctrl.render()"></spectrum-picker>
       </span>
     </div>
     <div class="gf-form">
@@ -116,7 +116,7 @@
         type="number"
         ng-model="editor.panel.pageSize"
         ng-model-onblur
-        ng-change="editor.panelCtrl.refresh()">
+        ng-change="ctrl.render()">
     </div>
     <gf-form-switch class="gf-form"
       label-class="width-8"
@@ -128,7 +128,7 @@
       label-class="width-16"
       label="Custom Last change format"
       checked="editor.panel.customLastChangeFormat"
-      on-change="editor.panelCtrl.refresh()">
+      on-change="ctrl.render()">
     </gf-form-switch>
     <div class="gf-form" ng-if="editor.panel.customLastChangeFormat">
       <label class="gf-form-label width-3">
@@ -142,7 +142,7 @@
         empty-to-null
         ng-model-onblur
         ng-model="editor.panel.lastChangeFormat"
-        ng-change="editor.panelCtrl.refresh()">
+        ng-change="ctrl.render()">
     </div>
   </div>
 
@@ -157,9 +157,9 @@
           ng-model="trigger.severity"
           ng-style="{background: trigger.color, color: editor.panel.fontColor}"
           ng-model-onblur
-          ng-change="editor.panelCtrl.refresh()">
+          ng-change="ctrl.render()">
         <span class="gf-form-label">
-          <spectrum-picker ng-model="trigger.color" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
+          <spectrum-picker ng-model="trigger.color" ng-change="ctrl.render()"></spectrum-picker>
         </span>
       </div>
       <gf-form-switch class="gf-form"
@@ -178,7 +178,7 @@
           Acknowledged color
         </label>
         <span class="gf-form-label">
-          <spectrum-picker ng-model="editor.panel.ackEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
+          <spectrum-picker ng-model="editor.panel.ackEventColor" ng-change="ctrl.render()"></spectrum-picker>
         </span>
       </div>
       <gf-form-switch class="gf-form"
@@ -196,7 +196,7 @@
           OK event color
         </label>
         <span class="gf-form-label">
-          <spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
+          <spectrum-picker ng-model="editor.panel.okEventColor" ng-change="ctrl.render()"></spectrum-picker>
         </span>
       </div>
     </div>

dist/panel-triggers/triggers_panel_ctrl.js

@@ -134,7 +134,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
 
       triggerStatusMap = {
         '0': 'OK',
-        '1': 'Problem'
+        '1': 'PROBLEM'
       };
 
       _export('TriggerPanelCtrl', TriggerPanelCtrl = function (_PanelCtrl) {
@@ -227,6 +227,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
             delete this.error;
             this.loading = true;
             this.setTimeQueryStart();
+            this.pageIndex = 0;
 
             return this.getTriggers().then(function (triggerList) {
               // Notify panel that request is finished
@@ -292,10 +293,6 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
 
             return Promise.all(promises).then(function (results) {
               return _.flatten(results);
-            }).then(function (triggers) {
-              return _.map(triggers, _this4.formatTrigger.bind(_this4));
-            }).then(function (triggers) {
-              return _this4.sortTriggers(triggers);
             });
           }
         }, {
@@ -327,11 +324,6 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
                     ack.user = ack.alias + ' (' + ack.name + ' ' + ack.surname + ')';
                     return ack;
                   });
-
-                  // Mark acknowledged triggers with different color
-                  if (_this5.panel.markAckEvents && trigger.acknowledges.length) {
-                    trigger.color = _this5.panel.ackEventColor;
-                  }
                 }
               });
 
@@ -372,45 +364,68 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
           key: 'sortTriggers',
           value: function sortTriggers(triggerList) {
             if (this.panel.sortTriggersBy.value === 'priority') {
-              triggerList = _.sortBy(triggerList, 'priority').reverse();
+              triggerList = _.sortBy(triggerList, ['priority', 'triggerid']).reverse();
             } else {
-              triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
+              triggerList = _.sortBy(triggerList, ['lastchangeUnix', 'triggerid']).reverse();
             }
             return triggerList;
           }
         }, {
           key: 'formatTrigger',
-          value: function formatTrigger(trigger) {
+          value: function formatTrigger(zabbixTrigger) {
+            var trigger = _.cloneDeep(zabbixTrigger);
             var triggerObj = trigger;
 
-            // Format last change and age
-            trigger.lastchangeUnix = Number(trigger.lastchange);
-            var timestamp = moment.unix(trigger.lastchangeUnix);
-            if (this.panel.customLastChangeFormat) {
-              // User defined format
-              triggerObj.lastchange = timestamp.format(this.panel.lastChangeFormat);
-            } else {
-              triggerObj.lastchange = timestamp.format(this.defaultTimeFormat);
-            }
-            triggerObj.age = timestamp.fromNow(true);
-
             // Set host that the trigger belongs
             if (trigger.hosts.length) {
               triggerObj.host = trigger.hosts[0].name;
               triggerObj.hostTechName = trigger.hosts[0].host;
             }
 
-            // Set color
+            // Format last change and age
+            trigger.lastchangeUnix = Number(trigger.lastchange);
+            triggerObj = this.setTriggerLastChange(triggerObj);
+            triggerObj = this.setTriggerSeverity(triggerObj);
+            return triggerObj;
+          }
+        }, {
+          key: 'updateTriggerFormat',
+          value: function updateTriggerFormat(trigger) {
+            trigger = this.setTriggerLastChange(trigger);
+            trigger = this.setTriggerSeverity(trigger);
+            return trigger;
+          }
+        }, {
+          key: 'setTriggerSeverity',
+          value: function setTriggerSeverity(trigger) {
             if (trigger.value === '1') {
               // Problem state
-              triggerObj.color = this.panel.triggerSeverity[trigger.priority].color;
+              trigger.color = this.panel.triggerSeverity[trigger.priority].color;
             } else {
               // OK state
-              triggerObj.color = this.panel.okEventColor;
+              trigger.color = this.panel.okEventColor;
+            }
+            trigger.severity = this.panel.triggerSeverity[trigger.priority].severity;
+
+            // Mark acknowledged triggers with different color
+            if (this.panel.markAckEvents && trigger.acknowledges && trigger.acknowledges.length) {
+              trigger.color = this.panel.ackEventColor;
             }
 
-            triggerObj.severity = this.panel.triggerSeverity[trigger.priority].severity;
+            return trigger;
-            return triggerObj;
+          }
+        }, {
+          key: 'setTriggerLastChange',
+          value: function setTriggerLastChange(trigger) {
+            var timestamp = moment.unix(trigger.lastchangeUnix);
+            if (this.panel.customLastChangeFormat) {
+              // User defined format
+              trigger.lastchange = timestamp.format(this.panel.lastChangeFormat);
+            } else {
+              trigger.lastchange = timestamp.format(this.defaultTimeFormat);
+            }
+            trigger.age = timestamp.fromNow(true);
+            return trigger;
           }
         }, {
           key: 'switchComment',
@@ -437,22 +452,32 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
             this.currentTriggersPage = this.triggerList.slice(startPos, endPos);
             return this.currentTriggersPage;
           }
+        }, {
+          key: 'formatHostName',
+          value: function formatHostName(trigger) {
+            if (this.panel.hostField && this.panel.hostTechNameField) {
+              return trigger.host + ' (' + trigger.hostTechName + ')';
+            } else if (this.panel.hostField || this.panel.hostTechNameField) {
+              return trigger.host || trigger.hostTechName;
+            } else {
+              return "";
+            }
+          }
         }, {
           key: 'link',
           value: function link(scope, elem, attrs, ctrl) {
-            var data;
             var panel = ctrl.panel;
             var pageCount = 0;
-            data = ctrl.triggerList;
+            var data = ctrl.triggerList;
 
-            function getTableHeight() {
+            function getContentHeight() {
               var panelHeight = ctrl.height;
 
               if (pageCount > 1) {
-                panelHeight -= 26;
+                panelHeight -= 36;
               }
 
-              return panelHeight - 31 + 'px';
+              return panelHeight + 'px';
             }
 
             function switchPage(e) {
@@ -492,16 +517,26 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
               footerElem.append(paginationList);
             }
 
+            function setFontSize() {
+              var fontSize = parseInt(panel.fontSize.slice(0, panel.fontSize.length - 1));
+              var triggerCardElem = elem.find('.card-item-wrapper');
+              if (fontSize && fontSize !== 100) {
+                triggerCardElem.find('.alert-list-icon').css({ 'font-size': fontSize + '%' });
+                triggerCardElem.find('.alert-list-title').css({ 'font-size': fontSize + '%' });
+                triggerCardElem.find('.alert-list-text').css({ 'font-size': fontSize * 0.8 + '%' });
+              } else {
+                // remove css
+                triggerCardElem.find('.alert-list-icon').css({ 'font-size': fontSize + '%' });
+              }
+            }
+
             function renderPanel() {
-              var panelElem = elem.parents('.panel');
               var rootElem = elem.find('.triggers-panel-scroll');
               var footerElem = elem.find('.triggers-panel-footer');
-
-              elem.css({ 'font-size': panel.fontSize });
-              panelElem.addClass('triggers-panel-wrapper');
               appendPaginationControls(footerElem);
-
+              setFontSize();
-              rootElem.css({ 'max-height': panel.scroll ? getTableHeight() : '' });
+              rootElem.css({ 'max-height': panel.scroll ? getContentHeight() : '' });
+              rootElem.css({ 'height': getContentHeight() });
               ctrl.renderingCompleted();
             }
 
@@ -513,11 +548,17 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
             });
 
             ctrl.events.on('render', function (renderData) {
-              data = renderData || data;
+              if (renderData) {
+                renderData = _.map(renderData, ctrl.formatTrigger.bind(ctrl));
+                data = renderData;
+              } else {
+                data = _.map(data, ctrl.updateTriggerFormat.bind(ctrl));
+              }
+              data = ctrl.sortTriggers(data);
               if (data) {
-                scope.$apply(function () {
+                ctrl.triggerList = data;
-                  renderPanel();
+                ctrl.getCurrentTriggersPage();
-                });
+                renderPanel();
               }
             });
           }

src/panel-triggers/partials/module.html

@@ -1,7 +1,7 @@
 <div class="triggers-panel-container">
-  <div class="triggers-panel-header-bg"></div>
+  <!-- <div class="triggers-panel-header-bg"></div> -->
   <div class="triggers-panel-scroll">
-    <table class="triggers-panel-table">
+    <table class="triggers-panel-table" ng-if="false">
       <thead>
         <tr>
           <th ng-if="ctrl.panel.hostField" class="zbx-field-host">
@@ -121,6 +121,65 @@
         </tr>
       </tbody>
     </table>
+
+    <section class="card-section card-list-layout-list">
+      <ol class="card-list">
+        <li class="card-item-wrapper" ng-repeat="trigger in ctrl.currentTriggersPage">
+          <div class="alert-list card-item card-item--alert">
+            <div class="alert-list-body">
+              <div class="alert-list-icon alert-list-item-state"
+                ng-style="{color: trigger.color}">
+                <i class="icon-gf"
+                  ng-class="trigger.value === '1' ? 'icon-gf-critical' : 'icon-gf-online'"></i>
+              </div>
+              <div class="alert-list-main">
+                <p class="alert-list-title">
+                  {{trigger.description}}
+                  <span class="zabbix-hostname" ng-if="ctrl.panel.hostField || ctrl.panel.hostTechNameField">
+                    {{ ctrl.formatHostName(trigger) }}
+                  </span>
+                </p>
+
+                <p class="alert-list-text">
+                  <span ng-if="ctrl.panel.statusField" class="alert-list-state"
+                    ng-class="trigger.value === '1' ? 'alert-state-critical' : 'alert-state-ok'">
+                    {{ctrl.triggerStatusMap[trigger.value]}}
+                  </span>
+                  <span ng-if="ctrl.panel.severityField" class="alert-list-state"
+                    ng-style="{color: trigger.color}">
+                    {{trigger.severity}}
+                  </span>
+                  for {{trigger.age}}
+
+                  <span class="alert-list-info alert-list-info-left">{{trigger.comments}}</span>
+                </p>
+              </div>
+            </div>
+            <div class="alert-list-footer">
+              <span class="alert-list-text">{{trigger.lastchange}}</span>
+              <span class="alert-list-text">
+                <!--Img Link-->
+              </span>
+
+              <div class="trigger-info-block">
+                <a ng-if="trigger.url" href="{{trigger.url}}" target="_blank">
+                  <i class="fa fa-external-link"></i>
+                </a>
+
+                <span ng-if="trigger.state === '1'" bs-tooltip="'{{trigger.error}}'">
+                  <i class="fa fa-question-circle"></i>
+                </span>
+
+                <ack-tooltip ack="trigger.acknowledges" trigger="trigger"
+                  on-ack="ctrl.acknowledgeTrigger" context="ctrl">
+                </ack-tooltip>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ol>
+    </section>
   </div>
 </div>
+
 <div class="triggers-panel-footer"></div>

src/panel-triggers/partials/options_tab.html

@@ -69,7 +69,7 @@
         <select class="gf-form-input"
           ng-model="editor.panel.sortTriggersBy"
           ng-options="f.text for f in editor.sortByFields track by f.value"
-          ng-change="editor.panelCtrl.refresh()">
+          ng-change="ctrl.render()">
         </select>
       </div>
     </div>
@@ -107,7 +107,7 @@
     <div class="gf-form max-width-14">
       <label class="gf-form-label width-8">Font color</label>
       <span class="gf-form-label">
-        <spectrum-picker ng-model="editor.panel.fontColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
+        <spectrum-picker ng-model="editor.panel.fontColor" ng-change="ctrl.render()"></spectrum-picker>
       </span>
     </div>
     <div class="gf-form">
@@ -116,7 +116,7 @@
         type="number"
         ng-model="editor.panel.pageSize"
         ng-model-onblur
-        ng-change="editor.panelCtrl.refresh()">
+        ng-change="ctrl.render()">
     </div>
     <gf-form-switch class="gf-form"
       label-class="width-8"
@@ -128,7 +128,7 @@
       label-class="width-16"
       label="Custom Last change format"
       checked="editor.panel.customLastChangeFormat"
-      on-change="editor.panelCtrl.refresh()">
+      on-change="ctrl.render()">
     </gf-form-switch>
     <div class="gf-form" ng-if="editor.panel.customLastChangeFormat">
       <label class="gf-form-label width-3">
@@ -142,7 +142,7 @@
         empty-to-null
         ng-model-onblur
         ng-model="editor.panel.lastChangeFormat"
-        ng-change="editor.panelCtrl.refresh()">
+        ng-change="ctrl.render()">
     </div>
   </div>
 
@@ -157,9 +157,9 @@
           ng-model="trigger.severity"
           ng-style="{background: trigger.color, color: editor.panel.fontColor}"
           ng-model-onblur
-          ng-change="editor.panelCtrl.refresh()">
+          ng-change="ctrl.render()">
         <span class="gf-form-label">
-          <spectrum-picker ng-model="trigger.color" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
+          <spectrum-picker ng-model="trigger.color" ng-change="ctrl.render()"></spectrum-picker>
         </span>
       </div>
       <gf-form-switch class="gf-form"
@@ -178,7 +178,7 @@
           Acknowledged color
         </label>
         <span class="gf-form-label">
-          <spectrum-picker ng-model="editor.panel.ackEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
+          <spectrum-picker ng-model="editor.panel.ackEventColor" ng-change="ctrl.render()"></spectrum-picker>
         </span>
       </div>
       <gf-form-switch class="gf-form"
@@ -196,7 +196,7 @@
           OK event color
         </label>
         <span class="gf-form-label">
-          <spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
+          <spectrum-picker ng-model="editor.panel.okEventColor" ng-change="ctrl.render()"></spectrum-picker>
         </span>
       </div>
     </div>

src/panel-triggers/triggers_panel_ctrl.js

@@ -59,7 +59,7 @@ export const PANEL_DEFAULTS = {
 
 const triggerStatusMap = {
   '0': 'OK',
-  '1': 'Problem'
+  '1': 'PROBLEM'
 };
 
 export class TriggerPanelCtrl extends PanelCtrl {
@@ -135,6 +135,7 @@ export class TriggerPanelCtrl extends PanelCtrl {
     delete this.error;
     this.loading = true;
     this.setTimeQueryStart();
+    this.pageIndex = 0;
 
     return this.getTriggers()
     .then(triggerList => {
@@ -199,13 +200,7 @@ export class TriggerPanelCtrl extends PanelCtrl {
     });
 
     return Promise.all(promises)
-    .then(results => _.flatten(results))
+    .then(results => _.flatten(results));
-    .then(triggers => {
-      return _.map(triggers, this.formatTrigger.bind(this));
-    })
-    .then((triggers) => {
-      return this.sortTriggers(triggers);
-    });
   }
 
   getAcknowledges(triggerList, ds) {
@@ -234,11 +229,6 @@ export class TriggerPanelCtrl extends PanelCtrl {
             ack.user = ack.alias + ' (' + ack.name + ' ' + ack.surname + ')';
             return ack;
           });
-
-          // Mark acknowledged triggers with different color
-          if (this.panel.markAckEvents && trigger.acknowledges.length) {
-            trigger.color = this.panel.ackEventColor;
-          }
         }
       });
 
@@ -275,44 +265,64 @@ export class TriggerPanelCtrl extends PanelCtrl {
 
   sortTriggers(triggerList) {
     if (this.panel.sortTriggersBy.value === 'priority') {
-      triggerList = _.sortBy(triggerList, 'priority').reverse();
+      triggerList = _.sortBy(triggerList, ['priority', 'triggerid']).reverse();
     } else {
-      triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
+      triggerList = _.sortBy(triggerList, ['lastchangeUnix', 'triggerid']).reverse();
     }
     return triggerList;
   }
 
-  formatTrigger(trigger) {
+  formatTrigger(zabbixTrigger) {
+    let trigger = _.cloneDeep(zabbixTrigger);
     let triggerObj = trigger;
 
-    // Format last change and age
-    trigger.lastchangeUnix = Number(trigger.lastchange);
-    let timestamp = moment.unix(trigger.lastchangeUnix);
-    if (this.panel.customLastChangeFormat) {
-      // User defined format
-      triggerObj.lastchange = timestamp.format(this.panel.lastChangeFormat);
-    } else {
-      triggerObj.lastchange = timestamp.format(this.defaultTimeFormat);
-    }
-    triggerObj.age = timestamp.fromNow(true);
-
     // Set host that the trigger belongs
     if (trigger.hosts.length) {
       triggerObj.host = trigger.hosts[0].name;
       triggerObj.hostTechName = trigger.hosts[0].host;
     }
 
-    // Set color
+    // Format last change and age
+    trigger.lastchangeUnix = Number(trigger.lastchange);
+    triggerObj = this.setTriggerLastChange(triggerObj);
+    triggerObj = this.setTriggerSeverity(triggerObj);
+    return triggerObj;
+  }
+
+  updateTriggerFormat(trigger) {
+    trigger = this.setTriggerLastChange(trigger);
+    trigger = this.setTriggerSeverity(trigger);
+    return trigger;
+  }
+
+  setTriggerSeverity(trigger) {
     if (trigger.value === '1') {
       // Problem state
-      triggerObj.color = this.panel.triggerSeverity[trigger.priority].color;
+      trigger.color = this.panel.triggerSeverity[trigger.priority].color;
     } else {
       // OK state
-      triggerObj.color = this.panel.okEventColor;
+      trigger.color = this.panel.okEventColor;
+    }
+    trigger.severity = this.panel.triggerSeverity[trigger.priority].severity;
+
+    // Mark acknowledged triggers with different color
+    if (this.panel.markAckEvents && trigger.acknowledges && trigger.acknowledges.length) {
+      trigger.color = this.panel.ackEventColor;
     }
 
-    triggerObj.severity = this.panel.triggerSeverity[trigger.priority].severity;
+    return trigger;
-    return triggerObj;
+  }
+
+  setTriggerLastChange(trigger) {
+    let timestamp = moment.unix(trigger.lastchangeUnix);
+    if (this.panel.customLastChangeFormat) {
+      // User defined format
+      trigger.lastchange = timestamp.format(this.panel.lastChangeFormat);
+    } else {
+      trigger.lastchange = timestamp.format(this.defaultTimeFormat);
+    }
+    trigger.age = timestamp.fromNow(true);
+    return trigger;
   }
 
   switchComment(trigger) {
@@ -339,20 +349,29 @@ export class TriggerPanelCtrl extends PanelCtrl {
     return this.currentTriggersPage;
   }
 
-  link(scope, elem, attrs, ctrl) {
+  formatHostName(trigger) {
-    var data;
+    if (this.panel.hostField && this.panel.hostTechNameField) {
-    var panel = ctrl.panel;
+      return `${trigger.host} (${trigger.hostTechName})`;
-    var pageCount = 0;
+    } else if (this.panel.hostField || this.panel.hostTechNameField) {
-    data = ctrl.triggerList;
+      return trigger.host || trigger.hostTechName;
+    } else {
+      return "";
+    }
+  }
 
-    function getTableHeight() {
+  link(scope, elem, attrs, ctrl) {
-      var panelHeight = ctrl.height;
+    let panel = ctrl.panel;
+    let pageCount = 0;
+    let data = ctrl.triggerList;
+
+    function getContentHeight() {
+      let panelHeight = ctrl.height;
 
       if (pageCount > 1) {
-        panelHeight -= 26;
+        panelHeight -= 36;
       }
 
-      return (panelHeight - 31) + 'px';
+      return panelHeight + 'px';
     }
 
     function switchPage(e) {
@@ -372,52 +391,68 @@ export class TriggerPanelCtrl extends PanelCtrl {
     function appendPaginationControls(footerElem) {
       footerElem.empty();
 
-      var pageSize = ctrl.panel.pageSize || 5;
+      let pageSize = ctrl.panel.pageSize || 5;
       pageCount = Math.ceil(data.length / pageSize);
       if (pageCount === 1) {
         return;
       }
 
-      var startPage = Math.max(ctrl.pageIndex - 3, 0);
+      let startPage = Math.max(ctrl.pageIndex - 3, 0);
-      var endPage = Math.min(pageCount, startPage + 9);
+      let endPage = Math.min(pageCount, startPage + 9);
 
-      var paginationList = $('<ul></ul>');
+      let paginationList = $('<ul></ul>');
 
-      for (var i = startPage; i < endPage; i++) {
+      for (let i = startPage; i < endPage; i++) {
-        var activeClass = i === ctrl.pageIndex ? 'active' : '';
+        let activeClass = i === ctrl.pageIndex ? 'active' : '';
-        var pageLinkElem = $('<li><a class="triggers-panel-page-link pointer ' + activeClass + '">' + (i+1) + '</a></li>');
+        let pageLinkElem = $('<li><a class="triggers-panel-page-link pointer ' + activeClass + '">' + (i+1) + '</a></li>');
         paginationList.append(pageLinkElem);
       }
 
       footerElem.append(paginationList);
     }
 
+    function setFontSize() {
+      const fontSize = parseInt(panel.fontSize.slice(0, panel.fontSize.length - 1));
+      let triggerCardElem = elem.find('.card-item-wrapper');
+      if (fontSize && fontSize !== 100) {
+        triggerCardElem.find('.alert-list-icon').css({'font-size': fontSize + '%'});
+        triggerCardElem.find('.alert-list-title').css({'font-size': fontSize + '%'});
+        triggerCardElem.find('.alert-list-text').css({'font-size': fontSize * 0.8 + '%'});
+      } else {
+        // remove css
+        triggerCardElem.find('.alert-list-icon').css({'font-size': fontSize + '%'});
+      }
+    }
+
     function renderPanel() {
-      var panelElem = elem.parents('.panel');
+      let rootElem = elem.find('.triggers-panel-scroll');
-      var rootElem = elem.find('.triggers-panel-scroll');
+      let footerElem = elem.find('.triggers-panel-footer');
-      var footerElem = elem.find('.triggers-panel-footer');
-
-      elem.css({'font-size': panel.fontSize});
-      panelElem.addClass('triggers-panel-wrapper');
       appendPaginationControls(footerElem);
-
+      setFontSize();
-      rootElem.css({'max-height': panel.scroll ? getTableHeight() : '' });
+      rootElem.css({'max-height': panel.scroll ? getContentHeight() : '' });
+      rootElem.css({'height': getContentHeight()});
       ctrl.renderingCompleted();
     }
 
     elem.on('click', '.triggers-panel-page-link', switchPage);
 
-    var unbindDestroy = scope.$on('$destroy', function() {
+    let unbindDestroy = scope.$on('$destroy', function() {
       elem.off('click', '.triggers-panel-page-link');
       unbindDestroy();
     });
 
     ctrl.events.on('render', (renderData) => {
-      data = renderData || data;
+      if (renderData) {
+        renderData = _.map(renderData, ctrl.formatTrigger.bind(ctrl));
+        data = renderData;
+      } else {
+        data = _.map(data, ctrl.updateTriggerFormat.bind(ctrl));
+      }
+      data = ctrl.sortTriggers(data);
       if (data) {
-        scope.$apply(() => {
+        ctrl.triggerList = data;
-          renderPanel();
+        ctrl.getCurrentTriggersPage();
-        });
+        renderPanel();
       }
     });
   }

src/sass/_panel-triggers.scss

@@ -1,25 +1,37 @@
-.triggers-panel-wrapper {
-  .panel-content {
-    padding: 0;
-  }
-  .panel-title-container {
-    padding-bottom: 4px;
-  }
-}
-
 .triggers-panel-scroll {
   overflow: auto;
 }
 
 .triggers-panel-container {
-  padding-top: 2.2em;
   position: relative;
+
+  .zabbix-hostname {
+    color: $gray-2;
+    margin-left: 1rem;
+    font-weight: bold;
+  }
+
+  .alert-list-info.alert-list-info-left {
+    color: $gray-3;
+  }
+
+  .trigger-info-block {
+    display: inline;
+    i {
+      margin-right: 0.4rem;
+    }
+    i,
+    a {
+      color: $gray-2;
+    }
+  }
 }
 
 .triggers-panel-footer {
   text-align: center;
   font-size: 90%;
   line-height: 2px;
+  padding-top: 4px;
 
   ul {
     position: relative;
@@ -47,89 +59,6 @@
   }
 }
 
-.triggers-panel-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  th {
-    padding: 0;
-
-    &:first-child {
-      .triggers-panel-table-header-inner {
-        padding-left: 15px;
-      }
-    }
-  }
-
-  td {
-    padding: 0.45em 0 0.45em 1.1em;
-    border-bottom: 2px solid $body-bg;
-    border-right: 2px solid $body-bg;
-
-    &:first-child {
-      padding-left: 15px;
-    }
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .zbx-field-colored {
-    color: $gray-6;
-  }
-
-  .zbx-description-icon {
-    float: right;
-    padding-right: 8px;
-    color: $gray-6;
-  }
-
-  // .zbx-field-info {
-  //   width: 7%;
-  // }
-
-  // .zbx-field-host {
-  //   width: 15%;
-  // }
-
-  // .zbx-field-status {
-  //   width: 9rem;
-  // }
-
-  // .zbx-field-severity {
-  //   width: 7%;
-  // }
-
-  // .zbx-field-lastchange {
-  //   width: 15%;
-  // }
-}
-
-.triggers-panel-header-bg {
-  background: $grafanaListAccent;
-  border-top: 2px solid $body-bg;
-  border-bottom: 2px solid $body-bg;
-  height: 2.0em;
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-}
-
-.triggers-panel-table-header-inner {
-  padding: 0.45em 0 0.45em 1.1em;
-  text-align: left;
-  color: $blue;
-  position: absolute;
-  top: 0;
-}
-
-.triggers-panel-width-hack {
-  visibility: hidden;
-  height: 0px;
-  line-height: 0px;
-}
-
 .ack-tooltip {
   .drop-content {
     // Rewrite tooltip width

src/sass/_variables.dark.scss

@@ -2,17 +2,18 @@
 // -------------------------
 $black:            #000;
 $dark-1:           #141414;
-$dark-2:           #1f1d1d;
+$dark-2:           #1f1f20;
-$dark-3:           #292929;
+$dark-3:           #262628;
 $dark-4:           #333333;
 $dark-5:           #444444;
 $gray-1:           #555555;
-$gray-2:           #7B7B7B;
+$gray-2:           #8e8e8e;
 $gray-3:           #b3b3b3;
 $gray-4:           #D8D9DA;
 $gray-5:           #ECECEC;
 $gray-6:           #f4f5f8;
 $gray-7:           #fbfbfb;
+$gray-blue:				 #292a2d;
 
 $white:            #fff;
 

src/sass/_variables.light.scss

@@ -1,18 +1,18 @@
 // Grays
 // -------------------------
 $black:            #000;
-$dark-1:           #141414;
+$dark-1:           #13161d;
-$dark-2:           #1f1d1d;
+$dark-2:           #1e2028;
-$dark-3:           #292929;
+$dark-3:           #303133;
-$dark-4:           #373737;
+$dark-4:           #35373f;
-$dark-5:           #444444;
+$dark-5:           #41444b;
-$gray-1:           #555555;
+$gray-1:           #52545c;
-$gray-2:           #7B7B7B;
+$gray-2:           #767980;
-$gray-3:           #b3b3b3;
+$gray-3:           #acb6bf;
-$gray-4:           #D8D9DA;
+$gray-4:           #c7d0d9;
-$gray-5:           #ECECEC;
+$gray-5:           #dde4ed;
-$gray-6:           #f4f5f8;
+$gray-6:           #e9edf2;
-$gray-7:           #fbfbfb;
+$gray-7:           #f7f8fa;
 
 $white:            #fff;