From 5fd96301635d3b0050b7b54d0507bf2ccbde1ee1 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Wed, 26 Dec 2018 12:49:27 +0300
Subject: [PATCH] problems: more work on styles

---
 .../components/ProblemTimeline.tsx            | 66 ++++++++++---------
 src/sass/_panel-problems.scss                 | 50 +++++++++-----
 src/sass/_variables.dark.scss                 |  8 ++-
 src/sass/_variables.light.scss                |  6 ++
 4 files changed, 81 insertions(+), 49 deletions(-)

diff --git a/src/panel-triggers/components/ProblemTimeline.tsx b/src/panel-triggers/components/ProblemTimeline.tsx
index a71d2ec..193c62b 100644
--- a/src/panel-triggers/components/ProblemTimeline.tsx
+++ b/src/panel-triggers/components/ProblemTimeline.tsx
@@ -116,14 +116,14 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
       return <div className="event-timeline" ref={this.setRootRef} />;
     }
 
-    const { timeRange, eventPointSize, eventRegionHeight, problemColor, okColor } = this.props;
+    const { timeRange, eventPointSize, eventRegionHeight } = this.props;
     const events = this.sortEvents();
     const boxWidth = this.state.width + eventPointSize;
-    const boxHeight = eventPointSize * 2;
+    const boxHeight = Math.round(eventPointSize * 2.5);
     const width = boxWidth - eventPointSize;
     const padding = Math.round(eventPointSize / 2);
     const pointsYpos = eventRegionHeight / 2;
-    const timelineYpos = Math.round(boxHeight / 2);
+    const timelineYpos = Math.round(boxHeight / 2 - eventPointSize / 2);
 
     return (
       <div className="event-timeline" ref={this.setRootRef} style={{ transform: `translate(${-padding}px, 0)`}}>
@@ -144,8 +144,6 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
                 timeRange={timeRange}
                 width={width}
                 height={eventRegionHeight}
-                okColor={okColor}
-                problemColor={problemColor}
                 highlightedRegion={this.state.highlightedRegion}
               />
             </g>
@@ -155,8 +153,6 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
                 timeRange={timeRange}
                 width={width}
                 pointSize={eventPointSize}
-                okColor={okColor}
-                problemColor={problemColor}
                 onPointHighlight={this.handlePointHighlight}
                 onPointUnHighlight={this.handlePointUnHighlight}
               />
@@ -227,18 +223,27 @@ class TimelineInfoContainer extends PureComponent<TimelineInfoContainerProps> {
       const ts = moment(Number(event.clock) * 1000);
       const tsFormatted = ts.format('HH:mm:ss');
       infoItems = [
-        <span key="ts" className="event-timestamp">{tsFormatted}</span>
+        <span key="ts" className="event-timestamp">
+          <span className="event-timestamp-label">Time:&nbsp;</span>
+          <span className="event-timestamp-value">{tsFormatted}</span>
+        </span>
       ];
     }
     if (eventInfo && eventInfo.duration) {
       const duration = eventInfo.duration;
       const durationFormatted = moment.utc(duration).format('HH:mm:ss');
-      durationItem = <span key="duration" className="event-timestamp">duration: {durationFormatted}</span>;
+      durationItem = (
+        <span key="duration" className="event-timestamp">
+          <span className="event-timestamp-label">Duration:&nbsp;</span>
+          <span className="event-timestamp-value">{durationFormatted}</span>
+        </span>
+      );
     }
-    const containerStyle: React.CSSProperties = {
-      opacity: show ? 1 : 0,
-      left,
-    };
+    const containerStyle: React.CSSProperties = { left };
+    if (!show) {
+      containerStyle.opacity = 0;
+    }
+
     return (
       <div className={className} style={containerStyle}>
         <div>
@@ -257,8 +262,8 @@ interface TimelineRegionsProps {
   timeRange: GFTimeRange;
   width: number;
   height: number;
-  okColor: string;
-  problemColor: string;
+  okColor?: string;
+  problemColor?: string;
   highlightedRegion?: number | null;
 }
 
@@ -268,7 +273,7 @@ class TimelineRegions extends PureComponent<TimelineRegionsProps> {
   };
 
   render() {
-    const { events, timeRange, width, height, okColor, problemColor, highlightedRegion } = this.props;
+    const { events, timeRange, width, height, highlightedRegion } = this.props;
     const { timeFrom, timeTo } = timeRange;
     const range = timeTo - timeFrom;
 
@@ -277,15 +282,14 @@ class TimelineRegions extends PureComponent<TimelineRegionsProps> {
       const firstTs = events.length ? Number(events[0].clock) : timeTo;
       const duration = (firstTs - timeFrom) / range;
       const regionWidth = Math.round(duration * width);
-      const firstEventColor = events[0].value !== '1' ? problemColor : okColor;
       const highlighted = highlightedRegion === 0;
-      const className = `problem-event-region ${highlighted ? 'highlighted' : ''}`;
+      const valueClass = `problem-event--${events[0].value !== '1' ? 'problem' : 'ok'}`;
+      const className = `problem-event-region ${valueClass} ${highlighted ? 'highlighted' : ''}`;
       const firstEventAttributes = {
         x: 0,
         y: 0,
         width: regionWidth,
         height: height,
-        fill: firstEventColor,
       };
       firstItem = (
         <rect key='0' className={className} {...firstEventAttributes}></rect>
@@ -298,15 +302,14 @@ class TimelineRegions extends PureComponent<TimelineRegionsProps> {
       const duration = (nextTs - ts) / range;
       const regionWidth = Math.round(duration * width);
       const posLeft = Math.round((ts - timeFrom) / range * width);
-      const eventColor = event.value === '1' ? problemColor : okColor;
       const highlighted = highlightedRegion && highlightedRegion - 1 === index;
-      const className = `problem-event-region ${highlighted ? 'highlighted' : ''}`;
+      const valueClass = `problem-event--${event.value === '1' ? 'problem' : 'ok'}`;
+      const className = `problem-event-region ${valueClass} ${highlighted ? 'highlighted' : ''}`;
       const attributes = {
         x: posLeft,
         y: 0,
         width: regionWidth,
         height: height,
-        fill: eventColor,
       };
 
       return (
@@ -326,8 +329,8 @@ interface TimelinePointsProps {
   timeRange: GFTimeRange;
   width: number;
   pointSize: number;
-  okColor: string;
-  problemColor: string;
+  okColor?: string;
+  problemColor?: string;
   highlightRegion?: boolean;
   onPointHighlight?: (index: number, secondIndex?: number) => void;
   onPointUnHighlight?: () => void;
@@ -407,23 +410,22 @@ class TimelinePoints extends PureComponent<TimelinePointsProps, TimelinePointsSt
   }
 
   render() {
-    const { events, timeRange, width, pointSize, okColor, problemColor } = this.props;
+    const { events, timeRange, width, pointSize } = this.props;
     const { timeFrom, timeTo } = timeRange;
     const range = timeTo - timeFrom;
     const pointR = pointSize / 2;
     const eventsItems = events.map((event, i) => {
       const ts = Number(event.clock);
       const posLeft = Math.round((ts - timeFrom) / range * width - pointR);
-      const eventColor = event.value === '1' ? problemColor : okColor;
+      const className = `problem-event-item problem-event--${event.value === '1' ? 'problem' : 'ok'}`;
       const highlighted = this.state.highlighted.indexOf(i) !== -1;
 
       return (
         <TimelinePoint
           key={event.eventid}
-          className="problem-event-item"
+          className={className}
           x={posLeft}
           r={pointR}
-          color={eventColor}
           highlighted={highlighted}
           onPointHighlight={this.highlightPoint(i)}
           onPointUnHighlight={this.unHighlightPoint(i)}
@@ -440,7 +442,7 @@ class TimelinePoints extends PureComponent<TimelinePointsProps, TimelinePointsSt
 interface TimelinePointProps {
   x: number;
   r: number;
-  color: string;
+  color?: string;
   highlighted?: boolean;
   className?: string;
   onPointHighlight?: () => void;
@@ -477,7 +479,7 @@ class TimelinePoint extends PureComponent<TimelinePointProps, TimelinePointState
   }
 
   render() {
-    const { x, color } = this.props;
+    const { x } = this.props;
     const r = this.state.highlighted ? Math.round(this.props.r * HIGHLIGHTED_POINT_SIZE) : this.props.r;
     const cx = x + this.props.r;
     const rInner = Math.round(r * INNER_POINT_SIZE);
@@ -488,8 +490,8 @@ class TimelinePoint extends PureComponent<TimelinePointProps, TimelinePointState
         filter="url(#dropShadow)"
         onMouseOver={this.handleMouseOver}
         onMouseLeave={this.handleMouseLeave}>
-        <circle cx={0} cy={0} r={r} fill={color} className="point-border" />
-        <circle cx={0} cy={0} r={rInner} fill="#000000" className="point-core" />
+        <circle cx={0} cy={0} r={r} className="point-border" />
+        <circle cx={0} cy={0} r={rInner} className="point-core" />
       </g>
     );
   }
diff --git a/src/sass/_panel-problems.scss b/src/sass/_panel-problems.scss
index 646dc40..c492618 100644
--- a/src/sass/_panel-problems.scss
+++ b/src/sass/_panel-problems.scss
@@ -394,8 +394,8 @@
 
       .event-timeline {
         position: relative;
-        margin-bottom: 0.6rem;
-        padding-top: 2rem;
+        margin: 0.6rem 0;
+        padding-top: 2.6rem;
         // margin-top: auto;
 
         .timeline-info-container {
@@ -403,29 +403,34 @@
           top: 0;
           left: 0;
           transition: all 0.2s ease-out;
-          // border: 1px solid $text-muted;
-          // border-radius: 2px;
-          display: block;
+          // opacity: 0.8;
 
           .event-timestamp {
             font-weight: 500;
-            color: $text-muted;
+
+            .event-timestamp-label {
+              color: $text-muted;
+            }
+
+            .event-timestamp-value {
+              float: right;
+            }
           }
         }
 
-        // svg.event-timeline-canvas {
-        //   // height: 40px;
-
-        //   g.event-timeline-group {
-        //     // height: 40px;
-        //     // transform: translate(0px, 14px);
-        //   }
-        // }
-
         .problem-event-region {
           // transition: all 0.2s ease-out;
           // opacity: 0.7;
 
+          &.problem-event {
+            &--ok {
+              fill: $problem-event-ok-color;
+            }
+            &--problem {
+              fill: $problem-event-problem-color;
+            }
+          }
+
           &:hover,
           &.highlighted {
             // opacity: 1;
@@ -439,6 +444,19 @@
             transition: all 0.2s ease-out;
           }
 
+          &.problem-event {
+            &--ok .point-border {
+              fill: $problem-event-ok-color;
+            }
+            &--problem .point-border {
+              fill: $problem-event-problem-color;
+            }
+          }
+
+          .point-core {
+            fill: $problem-event-core;
+          }
+
           &:hover,
           &.highlighted {
             circle.point-border {
@@ -447,7 +465,7 @@
               filter: url(#glowShadow);
             }
             .point-core {
-              fill: $problem-event-highlighted;
+              fill: $problem-event-core-highlighted;
             }
           }
         }
diff --git a/src/sass/_variables.dark.scss b/src/sass/_variables.dark.scss
index 83c135c..95c0a96 100644
--- a/src/sass/_variables.dark.scss
+++ b/src/sass/_variables.dark.scss
@@ -2,6 +2,7 @@ $regex: #d69e2e;
 
 $zbx-tag-color: $gray-5;
 $zbx-text-highlighted: $white;
+$zbx-text-color-disabled: $gray-1;
 $action-button-color: $blue-dark;
 $action-button-text-color: $gray-4;
 $problems-border-color: $dark-1;
@@ -14,6 +15,11 @@ $problem-statusbar-muted: $dark-3;
 $problem-statusbar-fired: $orange;
 $problem-statusbar-glow: 0px 0px 10px rgba($problem-statusbar-fired, 0.1);
 
-$problem-event-highlighted: $white;
+$problem-event-highlighted: rgba($white, 0.7);
+$problem-event-core-highlighted: $white;
+$problem-event-core: #000000;
+$problem-event-ok-color: #38bd71;
+$problem-event-problem-color: #d70000;
+
 $problem-expander-highlighted: lighten($problems-table-stripe, 8%);
 $problem-container-shadow: rgba($gray-2, 0.2)
diff --git a/src/sass/_variables.light.scss b/src/sass/_variables.light.scss
index 85440d8..cd99b86 100644
--- a/src/sass/_variables.light.scss
+++ b/src/sass/_variables.light.scss
@@ -2,6 +2,7 @@ $regex: #d69e2e;
 
 $zbx-tag-color: $gray-6;
 $zbx-text-highlighted: $black;
+$zbx-text-color-disabled: $gray-3;
 $action-button-color: #497dc0;
 $action-button-text-color: $gray-6;
 $problems-border-color: $dark-1;
@@ -15,5 +16,10 @@ $problem-statusbar-fired: #ca4c17;
 $problem-statusbar-glow: inset 0px 0px 10px rgba($problem-statusbar-fired, 0.5);
 
 $problem-event-highlighted: $white;
+$problem-event-core-highlighted: $white;
+$problem-event-core: $gray-6;
+$problem-event-ok-color: #2baf63;
+$problem-event-problem-color: #d70000;
+
 $problem-expander-highlighted: darken($problems-table-stripe, 20%);
 $problem-container-shadow: rgba($gray-2, 0.5)