From 3258342783548d63bcf1eed51ec7d4d1c0021586 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 16 Mar 2016 14:33:23 -0700 Subject: [PATCH] [Frontend] Further cleanups to form elements #700 #689 #740 Removed _selects.scss and moved classes into _controls.scss; Reorg'd _controls; Moved classes into _elems.scss; Added and fixed cssclass defs in multiple bundle.js files to allow better field widths in overlay dialogs; Fixed overlay custom scrollbar colors; Fixed alignment of required glyphs in forms; --- example/generator/bundle.js | 2 +- platform/commonUI/general/res/sass/_main.scss | 1 - .../general/res/sass/controls/_controls.scss | 131 +++++++++++++----- .../general/res/sass/forms/_elems.scss | 34 ----- .../general/res/sass/forms/_selects.scss | 51 ------- .../general/res/sass/overlay/_overlay.scss | 14 +- .../themes/espresso/res/sass/_constants.scss | 3 + .../themes/snow/res/sass/_constants.scss | 7 +- platform/core/bundle.js | 2 +- platform/features/clock/bundle.js | 7 +- platform/features/layout/bundle.js | 4 +- platform/features/pages/bundle.js | 3 +- 12 files changed, 122 insertions(+), 137 deletions(-) delete mode 100644 platform/commonUI/general/res/sass/forms/_selects.scss diff --git a/example/generator/bundle.js b/example/generator/bundle.js index 0c68e4509c..0a055a1bae 100644 --- a/example/generator/bundle.js +++ b/example/generator/bundle.js @@ -126,7 +126,7 @@ define([ { "name": "Period", "control": "textfield", - "cssclass": "l-small l-numeric", + "cssclass": "l-input-sm l-numeric", "key": "period", "required": true, "property": [ diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index 0376064759..bc20fe9e1c 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -45,7 +45,6 @@ /********************************* FORMS */ @import "forms/elems"; -@import "forms/selects"; @import "forms/channel-selector"; @import "forms/datetime"; @import "forms/validation"; diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 5cdb890732..e9d986ecf6 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -74,6 +74,12 @@ .l-composite-control { vertical-align: middle; + &:not(.l-inline) { + margin-bottom: $interiorMargin; + } + &.l-inline { + display: inline-block; + } &.l-checkbox { .composite-control-label { line-height: 18px; @@ -108,6 +114,7 @@ font-size: 0.7rem; } +/******************************************************** CUSTOM CHECKBOXES */ label.checkbox.custom, label.radio.custom { $bg: pullForward($colorBodyBg, 10%); @@ -162,7 +169,40 @@ label.radio.custom { label.checkbox.custom input:checked ~ em:before { content: "\32"; } label.radio.custom input:checked ~ em:before { content: "\e619"; } +.s-menu-btn label.checkbox.custom { + margin-left: 5px; +} + +.item .checkbox { + &.checked label { + box-shadow: none; + border-bottom: none; + } +} + +label.form-control.checkbox { + input { + margin-right: $interiorMargin; + vertical-align: top; + } +} + +/******************************************************** INPUTS */ +input[type="text"], +input[type="search"] { + @include nice-input(); + &.numeric { + text-align: right; + } +} + +.l-input-lg input[type="text"] { width: 100% !important; } +.l-input-med input[type="text"] { width: 200px !important; } +.l-input-sm input[type="text"] { width: 50px !important; } +.l-numeric input[type="text"] { text-align: right; } + .input-labeled { + // Used in toolbar margin-left: $interiorMargin; label { display: inline-block; @@ -176,28 +216,36 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; } } } -.s-menu-btn label.checkbox.custom { - margin-left: 5px; -} - -.item .checkbox { - &.checked label { - box-shadow: none; - border-bottom: none; +/******************************************************** SELECTS */ +.select { + @include btnSubtle($colorSelectBg); + @if $shdwBtns != none { + margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers } -} - -.context-available, -.s-icon-btn { - $c: $colorKey; - color: $c; - &:hover { - color: lighten($c, 10%); + padding: 0 $interiorMargin; + overflow: hidden; + position: relative; + line-height: $formInputH; + select { + @include appearance(none); + box-sizing: border-box; + background: none; + color: $colorSelectFg; + cursor: pointer; + border: none !important; + padding: 4px 25px 2px 0px; + width: 130%; + option { + margin: $interiorMargin 0; // Firefox + } + } + &:after { + @include contextArrow(); + pointer-events: none; + color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent)); + position: absolute; + right: $interiorMargin; top: 0; } -} - -.view-switcher { - @include trans-prop-nice-fade($controlFadeMs); } /******************************************************** OBJECT-HEADER */ @@ -331,7 +379,6 @@ body.desktop .object-header { } /******************************************************** SLIDERS */ - .slider { $knobH: 100%; .slot { @@ -425,7 +472,7 @@ body.desktop .object-header { border-top: 1px solid $colorInteriorBorder } .l-time-selects { - line-height: $formInputH; + line-height: inherit; //$formInputH; } } @@ -479,11 +526,31 @@ body.desktop .object-header { } } -/******************************************************** BROWSER ELEMENTS */ +/******************************************************** TEXTAREA */ +textarea { + @include nice-textarea($colorInputBg, $colorInputFg); + position: absolute; + height: 100%; + width: 100%; +} +/******************************************************** MISC */ +.context-available, +.s-icon-btn { + $c: $colorKey; + color: $c; + &:hover { + color: lighten($c, 10%); + } +} + +.view-switcher { + @include trans-prop-nice-fade($controlFadeMs); +} + +/******************************************************** BROWSER ELEMENTS */ body.desktop { ::-webkit-scrollbar { - border-radius: 2px; box-sizing: border-box; box-shadow: inset $scrollbarTrackShdw; background-color: $scrollbarTrackColorBg; @@ -492,15 +559,15 @@ body.desktop { } ::-webkit-scrollbar-thumb { - $bg: $scrollbarThumbColor; - $hc: $scrollbarThumbColorHov; - $gr: 5%; - @include background-image(linear-gradient(lighten($bg, $gr), $bg 20px)); - border-radius: 2px; box-sizing: border-box; - &:hover { - @include background-image(linear-gradient(lighten($hc, $gr), $hc 20px)); - } + background: $scrollbarThumbColor; + &:hover { background: $scrollbarThumbColorHov; } + } + + .overlay ::-webkit-scrollbar-thumb { + $lr: 15%; + background: $scrollbarThumbColorOverlay; + &:hover { background: $scrollbarThumbColorOverlayHov; } } ::-webkit-scrollbar-corner { diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss index ec027ac079..cabf4287d5 100644 --- a/platform/commonUI/general/res/sass/forms/_elems.scss +++ b/platform/commonUI/general/res/sass/forms/_elems.scss @@ -139,13 +139,6 @@ } } -label.form-control.checkbox { - input { - margin-right: $interiorMargin; - vertical-align: top; - } -} - .hint, .s-hint { font-size: 0.9em; @@ -165,31 +158,4 @@ label.form-control.checkbox { color: lighten($colorFormInvalid, 30%); padding: $interiorMargin; } -} - -input[type="text"], -input[type="search"] { - @include nice-input(); - &.numeric { - text-align: right; - } -} - -.l-input-med input[type="text"] { - width: 200px !important; -} - -.l-input-sm input[type="text"] { - width: 50px !important; -} - -.l-numeric input[type="text"] { - text-align: right; -} - -textarea { - @include nice-textarea($colorInputBg, $colorInputFg); - position: absolute; - height: 100%; - width: 100%; } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/forms/_selects.scss b/platform/commonUI/general/res/sass/forms/_selects.scss deleted file mode 100644 index 73fe1a547e..0000000000 --- a/platform/commonUI/general/res/sass/forms/_selects.scss +++ /dev/null @@ -1,51 +0,0 @@ -/***************************************************************************** - * Open MCT Web, Copyright (c) 2014-2015, United States Government - * as represented by the Administrator of the National Aeronautics and Space - * Administration. All rights reserved. - * - * Open MCT Web 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 Web 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. - *****************************************************************************/ -.select { - @include btnSubtle($colorSelectBg); - @if $shdwBtns != none { - margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers - } - padding: 0 $interiorMargin; - overflow: hidden; - position: relative; - line-height: $formInputH; - select { - @include appearance(none); - box-sizing: border-box; - background: none; - color: $colorSelectFg; - cursor: pointer; - border: none !important; - padding: 4px 25px 2px 0px; - width: 130%; - option { - margin: $interiorMargin 0; // Firefox - } - } - &:after { - @include contextArrow(); - pointer-events: none; - color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent)); - position: absolute; - right: $interiorMargin; top: 0; - } -} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss index d49a2ee97c..bfacefa951 100644 --- a/platform/commonUI/general/res/sass/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss @@ -35,7 +35,6 @@ z-index: 100; } > .holder { - //$i: 15%; @include containerSubtle($colorOvrBg, $colorOvrFg); border-radius: $basicCr * 3; color: $colorOvrFg; @@ -57,15 +56,8 @@ right: $m; bottom: $m; left: $m; - - //.top-bar, - //.editor, - //.bottom-bar { - // @include absPosDefault(); - //} } } - .title { @include ellipsize(); font-size: 1.2em; @@ -120,7 +112,6 @@ bottom: 0; left: 0; overflow: visible; - //font-size: 1em; height: $ovrFooterH; } @@ -132,11 +123,14 @@ margin: .5em 0; width: 100%; } + + .select { + box-shadow: $shdwBtnsOverlay; + } } .t-dialog-sm .overlay > .holder { // Used for blocker and in-progress dialogs, modal alerts, etc. - //@include test(red); $h: 225px; min-height: $h; height: $h; diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 3ed6cc276e..9c201db6df 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -27,6 +27,7 @@ $colorBtnIcon: $colorKey; $colorInvokeMenu: #fff; $contrastInvokeMenuPercent: 20%; $shdwBtns: rgba(black, 0.2) 0 1px 2px; +$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px; $sliderColorBase: $colorKey; $sliderColorRangeHolder: rgba(black, 0.1); $sliderColorRange: rgba($sliderColorBase, 0.3); @@ -173,6 +174,8 @@ $scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px; $scrollbarTrackColorBg: rgba(#000, 0.4); $scrollbarThumbColor: lighten($colorBodyBg, 10%); $scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%); +$scrollbarThumbColorOverlay: lighten($colorOvrBg, 10%); +$scrollbarThumbColorOverlayHov: lighten($scrollbarThumbColorOverlay, 2%); // Splitter $splitterD: 25px; // splitterD and HandleD should both be odd, or even diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 4390bd092c..6283f1aedb 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -27,6 +27,7 @@ $colorBtnIcon: #eee; $colorInvokeMenu: #000; $contrastInvokeMenuPercent: 40%; $shdwBtns: none; +$shdwBtnsOverlay: none; $sliderColorBase: $colorKey; $sliderColorRangeHolder: rgba(black, 0.07); $sliderColorRange: rgba($sliderColorBase, 0.2); @@ -170,9 +171,11 @@ $shdwItemTreeIcon: none; // Scrollbar $scrollbarTrackSize: 10px; $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px; -$scrollbarTrackColorBg: rgba(#000, 0.1); -$scrollbarThumbColor: darken($colorBodyBg, 50%);// +$scrollbarTrackColorBg: rgba(#000, 0.2); +$scrollbarThumbColor: darken($colorBodyBg, 50%); $scrollbarThumbColorHov: $colorKey; +$scrollbarThumbColorOverlay: darken($colorOvrBg, 15%); +$scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov; // Splitter $splitterD: 24px; diff --git a/platform/core/bundle.js b/platform/core/bundle.js index 8f7b9f865b..3c56e7e51b 100644 --- a/platform/core/bundle.js +++ b/platform/core/bundle.js @@ -248,7 +248,7 @@ define([ "property": "name", "pattern": "\\S+", "required": true, - "cssclass": "l-med" + "cssclass": "l-input-lg" } ] }, diff --git a/platform/features/clock/bundle.js b/platform/features/clock/bundle.js index 1d22a3f8a0..dbc6d42e03 100644 --- a/platform/features/clock/bundle.js +++ b/platform/features/clock/bundle.js @@ -182,7 +182,8 @@ define([ "value": "hh:mm:ss", "name": "hh:mm:ss" } - ] + ], + "cssclass": "l-inline" }, { "control": "select", @@ -195,7 +196,8 @@ define([ "value": "clock24", "name": "24hr" } - ] + ], + "cssclass": "l-inline" } ] } @@ -223,6 +225,7 @@ define([ { "key": "timerFormat", "control": "select", + "name": "Display Format", "options": [ { "value": "long", diff --git a/platform/features/layout/bundle.js b/platform/features/layout/bundle.js index 493a910b97..37a7990b99 100644 --- a/platform/features/layout/bundle.js +++ b/platform/features/layout/bundle.js @@ -278,12 +278,12 @@ define([ { "name": "Horizontal grid (px)", "control": "textfield", - "cssclass": "l-small l-numeric" + "cssclass": "l-input-sm l-numeric" }, { "name": "Vertical grid (px)", "control": "textfield", - "cssclass": "l-small l-numeric" + "cssclass": "l-input-sm l-numeric" } ], "key": "layoutGrid", diff --git a/platform/features/pages/bundle.js b/platform/features/pages/bundle.js index 70119db5bd..03ee4c5a07 100644 --- a/platform/features/pages/bundle.js +++ b/platform/features/pages/bundle.js @@ -49,7 +49,8 @@ define([ "name": "URL", "control": "textfield", "pattern": "^(ftp|https?)\\:\\/\\/\\w+(\\.\\w+)*(\\:\\d+)?(\\/\\S*)*$", - "required": true + "required": true, + "cssclass": "l-input-lg" } ] }