From da7c6367243db93b4138e4ecd035bd9801dd2464 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 20 Jul 2016 18:22:20 -0700
Subject: [PATCH] [Frontend] Time Conductor v2 styling

Fixes #933
Redo TC icon to use font symbol, added
new symbol for brackets to font files; font
anti-aliasing mod for .ui-symbol class;
layout tweaks; mobile tweaks.
---
 .../general/res/fonts/symbols/wtdsymbols.eot  | Bin 13660 -> 13760 bytes
 .../general/res/fonts/symbols/wtdsymbols.svg  |   1 +
 .../general/res/fonts/symbols/wtdsymbols.ttf  | Bin 13484 -> 13584 bytes
 .../general/res/fonts/symbols/wtdsymbols.woff | Bin 13560 -> 13660 bytes
 .../commonUI/general/res/sass/_icons.scss     |   1 +
 .../conductor-v2/res/sass/time-conductor.scss |  67 +++++++++---------
 .../res/templates/time-conductor.html         |   4 +-
 7 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
index ac6f815eedf4aac84792d5ab8b2c27482891bc21..2d11981e2aede065345d4aa71c0d857d28d10c6f 100755
GIT binary patch
delta 330
zcmcbUbs(GVfGGomfaydwGZy2GGnP(tm|UOCz`!U2#6IbX#RUvNSq28C3?R*so>Q5&
z^@bN0kPj5s{gaWJn8MY0zL|l+AO|RKmH`xCKft02<Szm8RWfo*Dw;T0E&}-{faXoe
z$xluc*~6*Ez+e;sls}c5SW&=G#8Ae-V5|b<E952SrpjLtdm9H7Z~<yqRghm?!oUoa
zVleqIIfL;$qsn9prpc^|KrzP27nwXZOEB~5@-s0o{6E0Lz<hv#pFx3vVRDO>qA0V&
z0U+=%Ed2WsLi-<JJ}|jKOnmZO@j1$jKofzwmd@B{9M5m_m4TZDWCz3Ltw$SS^yDW7
r=8P$uWemF+CoeWSBf3HCA5aRUF@>RoffuBVfeGja;mwncPci}kP~2N^

delta 259
zcmX?*eJ6`8#*~3!jmbndGnU_z`ZFgwOs-F4U|^I1VxRQH;sOQ+1_1^JrVJp>k)BhT
zmY>l33&;nG>n_MhO-$ipl@VrOFaWAyFv|c6upeMi0rEY7e3gvcl8QPGmWx1s4$!=w
zoc!d(zxz1d7#IwH0Oe2QCRP+M6f%@CFc=*G@)hzDb5rH7h`o&i3OoR6SXGc;T*AN%
zlwvUHnVi9Ro>6(S1=D0!1)vz?<cmxmn<bcebtg9(ESAaapY%JP-{va=Hw#EP!{y@a
jlQ4R+gP}QN^5zP|ZpO*%#wXY>Ffan8k~iNne#Qs@rYuJ1

diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
index 09dc0ed8147..ca9374cd7b4 100755
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
@@ -101,5 +101,6 @@
 <glyph unicode="&#xe621;" glyph-name="icon-tabular-lad" d="M896 960h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128zM64 704h256v-192h-256v192zM64 448h256v-192h-256v192zM128 0c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192h-192zM384 0v192h256v-192h-256zM960 64c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128zM960 448v-192h-576v192h64v64h-64v192h576v-192h-64v-64h64zM782.32 412.62l-110.32 55.16v172.22c0 17.673-14.327 32-32 32s-32-14.327-32-32v-211.78l145.68-72.84c4.172-2.133 9.1-3.383 14.32-3.383 17.675 0 32.003 14.328 32.003 32.003 0 12.454-7.114 23.247-17.501 28.536z" />
 <glyph unicode="&#xe622;" glyph-name="icon-tabular-lad-set" d="M128 192v576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979l-576 0.021c-70.606 0.215-127.785 57.394-128 127.979zM896 960h-576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v576.021c-0.215 70.606-57.394 127.785-127.979 128zM256 768h192v-128h-192v128zM256 576h192v-192h-192v192zM320 192c-35.26 0.214-63.786 28.74-64 63.98v64.020h192v-128h-128zM512 192v128h192v-128h-192zM960 256c-0.214-35.26-28.74-63.786-63.98-64h-128.020v128h192v-64zM960 384h-448v384h448v-384zM832 480c0.002 0 0.005 0 0.007 0 17.673 0 32 14.327 32 32 0 14.055-9.062 25.994-21.662 30.293l-74.345 24.767v104.94c0 17.673-14.327 32-32 32s-32-14.327-32-32v-151.060l117.88-39.3c3.018-1.040 6.495-1.64 10.113-1.64 0.003 0 0.005 0 0.008 0z" />
 <glyph unicode="&#xe623;" glyph-name="icon-download" d="M832 384v-255.66l-0.34-0.34-639.66 0.34v255.66h-192v-256c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v256h-192zM512 320l448 448h-256v192h-384v-192h-256l448-448z" />
+<glyph unicode="&#xe624;" glyph-name="icon-brackets" d="M832 960h-192v-192h191.66l0.34-0.34v-639.32l-0.34-0.34h-191.66v-192h192c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM384 128h-191.66l-0.34 0.34v639.32l0.34 0.34h191.66v192h-192c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h192v192z" />
 <glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
index 9e1521d16b0b4aae8cb9059e3fce054d5838008c..f7e657046be037c8509bd56f31dec7923be37de7 100755
GIT binary patch
delta 313
zcmZ3JIU#F;a(yxb1EUNO`=lop7cej|2rw`(WdLc8^qk7Htv9^5fPA31?w^d*#1yX1
z^UVwl201`^vkagB`vDeJAb$yvuac2lQqjc0auLWs0W@zyPJVKt$R18L1_q-Dp!})a
z#EJrjB8D;s24fW<Um-6sH&y<M*xNXufD2H=s)GFD5(Z|V6obi!i960Ss!Z-+oXn~S
z6k?pL$mFp(gNav{pNWCt{{a>T<^v4;3<?YkldothiZVMK00RHQ!oMFOwEqF-1CuX^
zicfwkHb<EeXdqD6(it0#<N0mAGH|nitYEmj^=KoEo@`=Z&X}?}$Do^W@@K;{q8r5i
a0i{41Qy5AZctOe-n1F5&-u&3;BqIRw(N^F9

delta 242
zcmbP`wI*|da(yBL1EUNO`=lop7cej|2rw`(WdLc8^qk7H{Dj_LKt51hcR@yKVhR_l
zj4%U(0Z<KtSq4ym{Q!#!knaKHt7PPsRMc^>Tm<rSfadk&<R>To-N)(1z+m_TD1Rb1
zv7&&XkfDr$!RP>xuaK9Rn<{@r>}?!S-~mv>s)GFD5(Z|V6oX06#2x1ul_z&FPG(gA
z3NcPrWb)XY!NjXO`J(<}nauu4zvKCBzA|vLfK)SFF3vs)qbE-=FlS8Oe8QlcadNoP
R3HA#Nj6kX6&05CK7y<CkLCydG

diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
index 296048ff3888d165c7fb9bb89c55c1bcef425632..48b510c95290531c7be0d2070881e01757322b97 100755
GIT binary patch
delta 358
zcmey7c_&M(+~3WOfsp|SOk)_h!L$Ga)8s-Xv57kB^~vdp#RUuuOk02w98fHfo>Q3y
z6x+kVp!)}ex8CsL%1BL2VPG)W0aRlK!d#u_n=^odK(P-%z6uDlA7D|<$StX0U@#P6
zU|^g8!c8137jyEHf$EHw0M(oVVUazYYPpFOKzp@}fdqpB7#A^=<t65(GB6l}G_C?+
z`73YZ3i69ffNr;$_~$yK%H%7IlUWrRm>C#>9&nl5z{I+FD-(|{KNADP{{t)x%m*0w
zL8eVs&{7m-b~pe8{)L5qKSF5#1Iz~|3-F0gKB&J~X6cNL#_{|%Um3VrfVML*T;6)L
u5k^mLFfeCK*}TJ`n{l$e(HYSVV*h|rj6j^iP{P0qQU(q|;m!KSCm8|C1z%GD

delta 308
zcmcbU^&?ZP+~3WOfsp|SOnxwMgXuL4Op^<l#3t&f*C(bY78fuuFl_-!a6qv@dQN2;
zP;3tagYE(l&QIw5m64j5!oXk<15{%M!d$E}!Wlq8px6{3Uj>BO53s0Y<d#$b#da_-
zF!q3O9S6(Bocv^<IwKdLniC-WcOR!)Zej({UM*uDpnw7x7c!LPCFZ6wFc|9qHLe0-
z`73YZ3i69ffNsAr@y~Te<;hnVC$lOrFf%X$J>W9Afr)kVRwf?Z$+8BEWitCG{f_6i
z`O3h}0yK|-;c{{INf<r(j)6I2@@5gkZpO)rjZO$&0Eb92LkR;fSS=_#gf~w%KFJ6G
D#<5LE

diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss
index b41a15d6eb6..fbcbc6a3268 100644
--- a/platform/commonUI/general/res/sass/_icons.scss
+++ b/platform/commonUI/general/res/sass/_icons.scss
@@ -30,6 +30,7 @@
 
 .ui-symbol {
     font-family: 'symbolsfont';
+    -webkit-font-smoothing: antialiased;
 	&.type-icon {
 		color: $colorObjHdrIc;
 	}
diff --git a/platform/features/conductor-v2/res/sass/time-conductor.scss b/platform/features/conductor-v2/res/sass/time-conductor.scss
index df0866e88ef..ef35bc2ad46 100644
--- a/platform/features/conductor-v2/res/sass/time-conductor.scss
+++ b/platform/features/conductor-v2/res/sass/time-conductor.scss
@@ -45,40 +45,27 @@
 
 .time-conductor-icon {
     $c: $colorObjHdrIc;
-    $d: 20px;
-    background: $c;
-    border-radius: 4px;
+    $d: 18px;
     height: $d !important;
     width: $d;
     position: relative;
 
-    // Icon shape: brackets
-    &:before,
-    &:after {
-        content: '';
-        background: $colorBodyBg;
-        position: absolute;
-    }
     &:before {
-        $in: 7px;
-        left: $in;
-        top: 0;
-        right: $in;
-        bottom: 0;
-
-    }
-    &:after {
-        $in: 4px;
-        left: $in;
-        top: $in;
-        right: $in;
-        bottom: $in;
+        @extend .ui-symbol;
+        color: $c;
+        content: '\e624';
+        font-size: $d;
+        line-height: normal;
+        display: block;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
     }
 
     // Clock hands
     div[class*="hand"] {
         $handW: 2px;
-        $handH: 8px;
+        $handH: $d * 0.4; //8px;
         @include transform(translate(-50%, -50%));
         @include animation-iteration-count(infinite);
         @include animation-timing-function(linear);
@@ -260,15 +247,11 @@
         }
     }
 
-    .l-data-visualization {
-        background: $colorTimeCondDataVisRtBg !important
-    }
-
     // Real-time, latest modes
     &.realtime-mode,
     &.latest-mode {
         .time-conductor-icon {
-            background: $colorTimeCondKeyBg;
+            &:before { color: $colorTimeCondKeyBg; }
             div[class*="hand"] {
                 @include animation-name(clock-hands);
                 &:before {
@@ -308,6 +291,10 @@
             }
         }
 
+        .l-data-visualization {
+            background: $colorTimeCondDataVisRtBg !important
+        }
+
         .mode-selector .s-menu-btn {
             @include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg);
         }
@@ -383,8 +370,15 @@
 @include phone {
     .l-time-conductor {
         min-width: 0;
-        .l-time-conductor-inputs-and-ticks mct-conductor-axis {
-            display: none;
+        .l-time-conductor-inputs-and-ticks {
+            .l-time-conductor-inputs-holder {
+                .l-time-range-w {
+                    background-image: none !important;
+                }
+            }
+            mct-conductor-axis {
+                display: none;
+            }
         }
     }
 }
@@ -413,6 +407,14 @@
                     &:not(:first-child) {
                         margin-top: $interiorMargin;
                     }
+                }
+            }
+        }
+
+        // Fixed mode
+        &.fixed-mode {
+            .l-time-conductor-inputs-and-ticks {
+                .l-time-range-w {
                     .title {
                         width: 30px;
                     }
@@ -425,9 +427,6 @@
         &.latest-mode {
             .l-time-conductor-inputs-and-ticks {
                 .l-time-range-w {
-                    .title {
-                        width: 30px;
-                    }
                     &.start-w {
                         display: none;
                     }
diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html
index 257e16004de..f8a2ca81400 100644
--- a/platform/features/conductor-v2/res/templates/time-conductor.html
+++ b/platform/features/conductor-v2/res/templates/time-conductor.html
@@ -9,7 +9,7 @@
 
     <div class="flex-elem holder grows l-flex-col l-time-conductor-inner">
         <!-- Holds inputs and ticks -->
-        <div class="l-time-conductor-inputs-and-ticks l-row-elem l-flex-row flex-elem no-margin">
+        <div class="l-time-conductor-inputs-and-ticks l-row-elem flex-elem no-margin">
             <form class="l-time-conductor-inputs-holder"
                   ng-submit="tcController.updateBoundsFromForm(formModel)">
                 <span class="l-time-range-w start-w">
@@ -80,7 +80,7 @@
         </div>
 
         <!-- Holds data availability, time of interest -->
-        <div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
+        <div class="l-data-visualization l-row-elem flex-elem"></div>
 
         <!-- Holds time system and session selectors, and zoom control -->
         <div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">