triggers panel: allow to set text color, closes #361

dist/panel-triggers/partials/module.html

@@ -49,23 +49,22 @@
             </div>
           </td>
 
-          <td ng-if="ctrl.panel.statusField"
-            class="zbx-field-colored"
-            style="background-color: {{trigger.color}};">
+          <td ng-if="ctrl.panel.statusField" class="zbx-field-colored"
+            ng-style="{background: trigger.color, color: ctrl.panel.fontColor}">
             <div>
               {{ctrl.triggerStatusMap[trigger.value]}}
             </div>
           </td>
 
-          <td ng-if="ctrl.panel.severityField"
-            class="zbx-field-colored"
-            style="background-color: {{trigger.color}};">
+          <td ng-if="ctrl.panel.severityField" class="zbx-field-colored"
+            ng-style="{background: trigger.color, color: ctrl.panel.fontColor}">
             <div>
               {{trigger.severity}}
             </div>
           </td>
 
-          <td class="zbx-field-colored" style="background-color: {{trigger.color}};">
+          <td class="zbx-field-colored"
+            ng-style="{background: trigger.color, color: ctrl.panel.fontColor}">
             <div>
               {{trigger.description}}
               <a  ng-if="trigger.comments"

dist/panel-triggers/partials/options_tab.html

@@ -104,6 +104,12 @@
             ng-change="editor.panelCtrl.render()"></select>
       </div>
     </div>
+    <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>
+      </span>
+    </div>
     <div class="gf-form">
       <label class="gf-form-label width-8">Page size</label>
       <input class="gf-form-input width-6"
@@ -149,8 +155,7 @@
           class="gf-form-input width-12"
           empty-to-null
           ng-model="trigger.severity"
-          style="color: white"
-          ng-style="{background: trigger.color}"
+          ng-style="{background: trigger.color, color: editor.panel.fontColor}"
           ng-model-onblur
           ng-change="editor.panelCtrl.refresh()">
         <span class="gf-form-label">
@@ -169,7 +174,7 @@
       <div class="gf-form">
         <label class="gf-form-label width-3">&nbsp;</label>
         <label class="gf-form-input width-12"
-          ng-style="{background:editor.panel.ackEventColor}">
+          ng-style="{background:editor.panel.ackEventColor, color: editor.panel.fontColor}">
           Acknowledged color
         </label>
         <span class="gf-form-label">
@@ -187,7 +192,7 @@
       <div class="gf-form">
         <label class="gf-form-label width-3">&nbsp;</label>
         <label class="gf-form-input width-12"
-          ng-style="{background:editor.panel.okEventColor}">
+          ng-style="{background:editor.panel.okEventColor, color: editor.panel.fontColor}">
           OK event color
         </label>
         <span class="gf-form-label">

dist/panel-triggers/specs/migrations.spec.js

@@ -60,6 +60,7 @@ describe('Triggers Panel schema migration', () => {
       showEvents: { text: 'Problems', value: '1' },
       limit: 10,
       fontSize: '100%',
+      fontColor: null,
       pageSize: 10,
       scroll: true,
       customLastChangeFormat: false,
@@ -95,6 +96,7 @@ describe('Triggers Panel schema migration', () => {
       showEvents: { text: 'Problems', value: '1' },
       limit: 10,
       fontSize: '100%',
+      fontColor: null,
       pageSize: 10,
       scroll: true,
       customLastChangeFormat: false,

dist/panel-triggers/triggers_panel_ctrl.js

@@ -118,6 +118,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
         limit: 10,
         // View options
         fontSize: '100%',
+        fontColor: null,
         pageSize: 10,
         scroll: true,
         customLastChangeFormat: false,
@@ -523,7 +524,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
 
       _export('TriggerPanelCtrl', TriggerPanelCtrl);
 
-      TriggerPanelCtrl.templateUrl = 'panel-triggers/module.html';
+      TriggerPanelCtrl.templateUrl = 'public/plugins/alexanderzobnin-zabbix-app/panel-triggers/partials/module.html';
     }
   };
 });