From ee917b0e1d4513cb4bd299377e87fce5e4608a40 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 1 Sep 2016 10:55:07 -0700 Subject: [PATCH] [Frontend] Initial styling for selectable styling Fixes #1161 New .s-selectable, .s-hover, .s-selected and .s-moveable classes New supporting color constants Markup in layouts, fixed position/panels updated Removed old commented code --- .../general/res/sass/_fixed-position.scss | 20 +-------- platform/commonUI/general/res/sass/_main.scss | 1 + .../general/res/sass/edit/_editor.scss | 2 +- .../res/sass/user-environ/_selecting.scss | 39 +++++++++++++++++ .../themes/espresso/res/sass/_constants.scss | 3 ++ .../themes/snow/res/sass/_constants.scss | 3 ++ .../features/layout/res/templates/fixed.html | 2 +- .../features/layout/res/templates/layout.html | 43 +++---------------- 8 files changed, 54 insertions(+), 59 deletions(-) create mode 100644 platform/commonUI/general/res/sass/user-environ/_selecting.scss diff --git a/platform/commonUI/general/res/sass/_fixed-position.scss b/platform/commonUI/general/res/sass/_fixed-position.scss index 66c9baf7a6..03364c1983 100644 --- a/platform/commonUI/general/res/sass/_fixed-position.scss +++ b/platform/commonUI/general/res/sass/_fixed-position.scss @@ -21,7 +21,6 @@ *****************************************************************************/ .t-fixed-position { &.l-fixed-position { - // @include test(red); position: absolute; top: 0; right: 0; @@ -35,7 +34,6 @@ height: 100%; width: 100%; .l-grid { - // @include test(orange); position: absolute; height: 100%; width: 100%; @@ -49,11 +47,6 @@ position: absolute; border: 1px solid transparent; - &.s-selected { - @include boxShdwLarge(); - border-color: $colorKey; - cursor: move; - } &.s-not-selected { opacity: 0.8; } @@ -76,26 +69,19 @@ } .l-fixed-position-text { - //@include txtShdwSubtle(); border: 1px solid transparent; font-size: 0.8rem; - $p: 1px; //$interiorMarginSm; + $p: 1px; line-height: 100%; &.l-static-text { - // overflow: auto; padding: $p; } &.l-telemetry { .l-elem { - //@include absPosDefault($p); - //@include absPosDefault(0); box-sizing: border-box; display: block; padding: 2px; - //width: 50%; &.l-title { - //right: auto; - //left: $p; float: none; overflow: hidden; text-overflow: ellipsis; @@ -103,9 +89,6 @@ width: auto; } &.l-value { - // @include test(blue); - // right: $p; - // left: auto; border-radius: $smallCr; $valPad: 5px; float: right; @@ -125,7 +108,6 @@ .l-fixed-position-item-handle { $brd: 1px solid $colorKey; - // border-radius: $controlCr; background: rgba($colorKey, 0.5); cursor: crosshair; border: $brd; diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index a3d6f5e665..e092f1474a 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -65,6 +65,7 @@ @import "user-environ/frame"; @import "user-environ/top-bar"; @import "user-environ/tool-bar"; +@import "user-environ/selecting"; /********************************* VIEWS */ @import "fixed-position"; diff --git a/platform/commonUI/general/res/sass/edit/_editor.scss b/platform/commonUI/general/res/sass/edit/_editor.scss index 565e9e0666..20132161b6 100644 --- a/platform/commonUI/general/res/sass/edit/_editor.scss +++ b/platform/commonUI/general/res/sass/edit/_editor.scss @@ -97,7 +97,7 @@ .frame.child-frame.panel { &:hover { @include boxShdwLarge(); - border-color: $colorKey; + border-color: $colorSelectableSelectedPrimary; .view-switcher { opacity: 1; } diff --git a/platform/commonUI/general/res/sass/user-environ/_selecting.scss b/platform/commonUI/general/res/sass/user-environ/_selecting.scss new file mode 100644 index 0000000000..e20a19872f --- /dev/null +++ b/platform/commonUI/general/res/sass/user-environ/_selecting.scss @@ -0,0 +1,39 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2016, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +.s-selectable { + border: 1px solid transparent; + + &.s-hover { + // Styles when hovering over a selectable object + border-color: $colorSelectableHov !important; + } + + &.s-selected { + // Styles for a selected object. Also used by legacy Fixed Position/Panel objects. + border-color: $colorSelectableSelectedPrimary !important; + } + + &.s-moveable { + @include boxShdwLarge(); + cursor: move; + } +} \ No newline at end of file diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index ae4607a15d..12c8d45ebf 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -63,6 +63,9 @@ $colorInvokeMenu: #fff; $colorObjHdrTxt: $colorBodyFg; $colorObjHdrIc: pullForward($colorObjHdrTxt, 20%); $colorTick: rgba(white, 0.2); +$colorSelectableSelectedPrimary: $colorKey; +$colorSelectableSelectedSecondary: pushBack($colorSelectableSelectedPrimary, 20%); +$colorSelectableHov: $colorSelectableSelectedSecondary; // Menu colors $colorMenuBg: pullForward($colorBodyBg, 23%); diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 492444e737..f119559ba6 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -63,6 +63,9 @@ $colorInvokeMenu: #fff; $colorObjHdrTxt: $colorBodyFg; $colorObjHdrIc: pushBack($colorObjHdrTxt, 30%); $colorTick: rgba(black, 0.2); +$colorSelectableSelectedPrimary: $colorKey; +$colorSelectableSelectedSecondary: pushBack($colorSelectableSelectedPrimary, 20%); +$colorSelectableHov: $colorSelectableSelectedSecondary; // Menu colors $colorMenuBg: pushBack($colorBodyBg, 10%); diff --git a/platform/features/layout/res/templates/fixed.html b/platform/features/layout/res/templates/fixed.html index 76fc991102..4db5addf43 100644 --- a/platform/features/layout/res/templates/fixed.html +++ b/platform/features/layout/res/templates/fixed.html @@ -44,7 +44,7 @@ -
- - - - - - - -