From a61f219dfc7f00e5d135ef693afb33ddbc7f76dc Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Wed, 16 Jan 2019 11:32:15 +0300
Subject: [PATCH] problems: font size for alert list layout

---
 .../components/AlertList/AlertList.tsx        |  5 +-
 src/sass/_panel-triggers.scss                 | 51 +++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/src/panel-triggers/components/AlertList/AlertList.tsx b/src/panel-triggers/components/AlertList/AlertList.tsx
index 9f2a70b..e893bbd 100644
--- a/src/panel-triggers/components/AlertList/AlertList.tsx
+++ b/src/panel-triggers/components/AlertList/AlertList.tsx
@@ -58,11 +58,14 @@ export default class AlertList extends PureComponent<AlertListProps, AlertListSt
   render() {
     const { problems, panelOptions } = this.props;
     const currentProblems = this.getCurrentProblems(this.state.page);
+    let fontSize = parseInt(panelOptions.fontSize.slice(0, panelOptions.fontSize.length - 1), 10);
+    fontSize = fontSize && fontSize !== 100 ? fontSize : null;
+    const alertListClass = classNames('alert-rule-list', { [`font-size--${fontSize}`]: fontSize });
 
     return (
       <div className="triggers-panel-container" key="alertListContainer">
         <section className="card-section card-list-layout-list">
-          <ol className="alert-rule-list">
+          <ol className={alertListClass}>
             {currentProblems.map(problem =>
               <AlertCard
                 key={problem.triggerid}
diff --git a/src/sass/_panel-triggers.scss b/src/sass/_panel-triggers.scss
index 50dde22..220440e 100644
--- a/src/sass/_panel-triggers.scss
+++ b/src/sass/_panel-triggers.scss
@@ -19,6 +19,7 @@
           display: flex;
           max-height: 1.6em;
           overflow: hidden;
+          align-items: center;
           padding-right: 1em;
 
           &.zbx-description--newline {
@@ -37,6 +38,56 @@
 
         }
       }
+
+      @for $i from 8 through 9 {
+        &.font-size--#{$i * 10} {
+          &,
+          .alert-rule-item__name {
+            font-size: 1% * $i * 10;
+          }
+
+          .alert-rule-item__icon {
+            width: unset;
+            font-size: 1% * $i * 10;
+          }
+
+          .alert-rule-item__time,
+          .alert-rule-item__text,
+          .zabbix-hostname {
+            font-size: 1% * $i * 10 * 0.8;
+          }
+
+          .zbx-trigger-tags .label-tag {
+            font-size: 1% * $i * 10 * 0.6;
+            padding: 0.3em 0.3em;
+          }
+        }
+      }
+
+      @for $i from 11 through 25 {
+        &.font-size--#{$i * 10} {
+          &,
+          .alert-rule-item__name {
+            font-size: 1% * $i * 10;
+          }
+
+          .alert-rule-item__icon {
+            width: unset;
+            font-size: 1% * $i * 10;
+          }
+
+          .alert-rule-item__time,
+          .alert-rule-item__text,
+          .zabbix-hostname {
+            font-size: 1% * $i * 10 * 0.8;
+          }
+
+          .zbx-trigger-tags .label-tag {
+            font-size: 1% * $i * 10 * 0.6;
+            padding: 0.3em 0.3em;
+          }
+        }
+      }
     }
   }