From b1464efdaf60e8bc5b1ea19f06b7f8a4c035bc08 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 14 Nov 2016 18:12:06 -0800 Subject: [PATCH] [Frontend] Styling for controls Fixes #1324 CSS, markup, new glyphs for brightness and contrast --- .../fonts/symbols/openmct-symbols-16px.eot | Bin 14104 -> 14536 bytes .../fonts/symbols/openmct-symbols-16px.svg | 2 + .../fonts/symbols/openmct-symbols-16px.ttf | Bin 13888 -> 14320 bytes .../fonts/symbols/openmct-symbols-16px.woff | Bin 13964 -> 14396 bytes .../commonUI/general/res/sass/_glyphs.scss | 4 ++ .../general/res/sass/controls/_controls.scss | 11 +++++- .../general/res/sass/features/_imagery.scss | 23 ++++++++++++ .../imagery/res/templates/imagery.html | 35 ++++++------------ 8 files changed, 50 insertions(+), 25 deletions(-) diff --git a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot index a6b919620bacd68febf7dfcab865cff4fb5eab28..c3a3688fffc5eeec7d7cf0371da12f8145832658 100755 GIT binary patch delta 783 zcmYjPO=uHQ5T5rElO~1DZnF6?)-)tdN-BglyZI5)5XB}^L4&6Xk{UE=TADu^+bGx+ z@gTNHNDF8BnCeEZ5iU7a@&;y%m=basCSfZ00Bc7%I3@R_3OmmcK~r4^SilJr3fWh1n{q6 zY|p21X-n|Hok8LS4sjF<3uRD9y@DU=HS$&SO2YUt^%Z*8%Z7kq&tez@hC`CmAijv6 zMLUW3DtbGb2l4gBfa12biju!gB`BKE2OLK7wa@Y(3$Gnb%ks_d3XQ(G0>n`XO;=ucg! z2#bT0BP2bxblx^{$$qb?{hvF0)Mdy!xv(v(+n!i55J<*6vZwdUUG)!HLke=IWOr__ z{EtxWQc=0AHQybZUC;C5bWV2E?nF~;GNMqZ_+Ft@du zNUUznb^UX3?Fvb(&W6LHqItwyj|qP7i(v(XXQdK9K%;iL%nx+NTI=fAASz+enCli^fuVnqQ%K0_Ihe+S4{$V<#kl`#LMmIf5~1GGe`AiubT zff*>pV5Ts60^@VeH6S(+@J?=Es!|eUVBizv1ajSgv;YuG0@(pTS^tBRV7R>h8<+v2Cm%63XH41r$5@_mv9c+na}@6+-W_~; zd^voF_{I2J_&4!?5Ks{C5y%pFA;=|YBDh7!PUxJliSQy3IgwMMOrlMq-^A?1>coY_ QbATo@0&&XbEVDQ!0H7;X + + diff --git a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf index a920e86179c58130992ec16b0ed79bbd3a7ffa0e..4ba5deaccc7d7fb9b9fc7c2cb1aff90601c0d15b 100755 GIT binary patch delta 781 zcmYjOO=uHQ5T5rEnpHvOXx{w3&n?e?Gn~K==VI6yP5obV($k)a0Ab`v&mu}=3oIJw1Tx`HkqBYMGieF zB;Mi>XFfMy0FB}m`ShgrO z1`r_iIv6Vx)LXqxhdN6rughA{$j}ZPbb=Gk;Kidb4A%kpUWVwbF%mHnJF!N5q?f3S z8w(wh4ORiF!ma2PRijY>yueVG(?>(W7!?C{di26A8ss*IEhZaEqG!$OXd|XmLq&0+ zd#sO4`WG+S`z|@|$%g-DM~|8ed9OC^sOlYWJP{5j;$Ah=`-P_Zr>Y@2)hW@O+iL$S zmYUR{+SVFN29NuqKfWK()@$+L!oTTcs9CV%Rx#YpM|p<0`kj6bmoy7)ItnxEWl1Wp z&ouMv;K~&um8YZ8phj-+oyP=!_JdIkM5mRO5J0uoRS>!k&W#+58>7FVL#tc>b|lM$ znk%FJ2uW3!{oSN;KG6Q^Wq^!)WGLfd63heU&^TaxY}{ofc8T3!_c$9D=H79iO<-E) k4g8t_!mRM!{M5W{xop|88mwd1ueJfSCK##eu9%?z0N-4;vj6}9 delta 338 zcmey6e;{XqVtt9-bOr`S86eh3Pb@BAU|yp{48}k+ z8BXOURunMgGn4`OcYu6_yu{p83G-iSX+VKLKueSg@{3Ctn1NCZW(pH`Jm*{kVgdp0 zJ9kn@tsZ?rntX#2(%=xCR@@lN91!KcTU!*_^ZjK76{6aNPR1pyy{ zEP)q-T!JQoTZHU{&Iy|cFA|XxIVH*@+9di-%ucLMTu3|zXfh)Zr)-{N8pi|xQ^`?w diff --git a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff index 1e9f1acecd34988548963442d5982c4d65041eef..9263a50af312f8e8919cbe4065bc5bac84575be7 100755 GIT binary patch delta 806 zcmYjQ-%C?*6hGguOWg){_qw|unQdd{M3b@Y-u(z}!y;!`?bI##>FLxomnl%?j zBM~5gC!~O$ac~=GITtW54cJRE0FlY!SbRJ_lLes9@V>nPethbB615iq9=!8phu%Lf zq!RI~0FsEF0E2!lcOr!%YG*M&!qB#^ai!AvB5GJio-o|iYUZXgSJ3BY{WlqY9q?^^ zNym$5^1nmDQAZADr{n1aYCmzflOee4N@g=NdEB9EY45A{H5%FB%HPQiHy;9yKZa=p zH~~dLi}7h>9&r%k^T-ZFAI6s|i}YG&2`zuB8fdBFwgPm56OMue3Jk$T0Anvl+ALub zG!PrH1l^>Us7eneZ79}N7O0LM=4Y;YAq$KmN4uSF>X*Y*^4aMA(;i7zZFN|~Rb5GP zEn6I|q~p-3qBLtC=_d(q;iRqqjN@ii_wR21UPB>o)WVwTuJuJ?fj}(Mr!u{rZ@9my z9+FWz#Ts*)<-es14QWsaS|k7f diff --git a/platform/commonUI/general/res/sass/_glyphs.scss b/platform/commonUI/general/res/sass/_glyphs.scss index 876cf36c0a..12d7242248 100644 --- a/platform/commonUI/general/res/sass/_glyphs.scss +++ b/platform/commonUI/general/res/sass/_glyphs.scss @@ -74,6 +74,8 @@ $glyph-icon-thumbs-strip: '\e1033'; $glyph-icon-two-parts-both: '\e1034'; $glyph-icon-two-parts-one-only: '\e1035'; $glyph-icon-x-in-circle: '\e1036'; +$glyph-icon-brightness: '\e1038'; +$glyph-icon-contrast: '\e1039'; $glyph-icon-activity: '\e1100'; $glyph-icon-activity-mode: '\e1101'; $glyph-icon-autoflow-tabular: '\e1102'; @@ -173,6 +175,8 @@ $glyph-icon-box-with-dashed-lines: '\e1129'; .icon-two-parts-both { @include glyph($glyph-icon-two-parts-both); } .icon-two-parts-one-only { @include glyph($glyph-icon-two-parts-one-only); } .icon-x-in-circle { @include glyph($glyph-icon-x-in-circle); } +.icon-brightness { @include glyph($glyph-icon-brightness); } +.icon-contrast { @include glyph($glyph-icon-contrast); } .icon-activity { @include glyph($glyph-icon-activity); } .icon-activity-mode { @include glyph($glyph-icon-activity-mode); } .icon-autoflow-tabular { @include glyph($glyph-icon-autoflow-tabular); } diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index ad32ea0515..b7680c11c7 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -122,13 +122,20 @@ // Default position is upper right $p: $interiorMargin; position: absolute; - top: $p; - right: $p; + top: $p; right: $p; bottom: auto; left: $p; + text-align: right; z-index: 5; } .s-local-controls { font-size: 0.7rem; + &.s-wrapper-transluc { + // Semi-opaque wrapper to visually distinguish a control + // from the background + background: rgba($colorBodyFg, 0.2); + box-sizing: border-box; + border-radius: $controlCr; + } } /******************************************************** CUSTOM CHECKBOXES */ diff --git a/platform/commonUI/general/res/sass/features/_imagery.scss b/platform/commonUI/general/res/sass/features/_imagery.scss index e33970b0e9..5cd123058a 100644 --- a/platform/commonUI/general/res/sass/features/_imagery.scss +++ b/platform/commonUI/general/res/sass/features/_imagery.scss @@ -134,6 +134,29 @@ } } +/*************************************** LOCAL CONTROLS */ +.l-local-controls { + max-width: 200px; + width: 35%; + input[type="range"] { + display: block; + width: 100%; + &:not(:first-child) { + margin-top: $interiorMarginLg; + } + + &:before { + margin-right: $interiorMarginSm; + } + } + + &.s-wrapper-transluc { + display: inline-block; + left: auto; + padding: $interiorMargin $interiorMarginLg; + } +} + /*************************************** WHEN IN FRAME */ .frame .t-imagery { .l-image-main-wrapper { diff --git a/platform/features/imagery/res/templates/imagery.html b/platform/features/imagery/res/templates/imagery.html index 9c222c6715..8df37ec1c2 100644 --- a/platform/features/imagery/res/templates/imagery.html +++ b/platform/features/imagery/res/templates/imagery.html @@ -2,20 +2,19 @@
-
- - +
+ + - - + +
{{imagery.getDate()}}
- - - -