From e268e357b3beb187a2743a52a67a1dfee7fbf987 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 8 Feb 2017 15:32:04 -0800 Subject: [PATCH] [Frontend] WIP Style Guide Fixes #1233 Added colors page content and display code; Added conditional hide/show per theme; --- example/styleguide/bundle.js | 13 +-- .../res/sass/_style-guide-base.scss | 39 ++++++++- .../res/sass/style-guide-espresso.scss | 5 +- .../styleguide/res/sass/style-guide-snow.scss | 5 +- example/styleguide/res/templates/colors.html | 84 +++++++++++++++++++ .../src/ExampleStyleGuideModelProvider.js | 3 +- 6 files changed, 138 insertions(+), 11 deletions(-) create mode 100644 example/styleguide/res/templates/colors.html diff --git a/example/styleguide/bundle.js b/example/styleguide/bundle.js index 05ec61c6fb..8de5fe9661 100644 --- a/example/styleguide/bundle.js +++ b/example/styleguide/bundle.js @@ -15,18 +15,20 @@ define([ "types": [ { "key": "styleguide.intro", "name": "Introduction", "cssclass": "icon-page", "description": "Introduction and overview to the style guide" }, { "key": "styleguide.standards", "name": "Standards", "cssclass": "icon-page", "description": "" }, + { "key": "styleguide.colors", "name": "Colors", "cssclass": "icon-page", "description": "" }, + { "key": "styleguide.glyphs", "name": "Glyphs", "cssclass": "icon-page", "description": "Glyphs overview" }, { "key": "styleguide.controls", "name": "Controls", "cssclass": "icon-page", "description": "Buttons, selects, HTML controls" }, { "key": "styleguide.input", "name": "Text Inputs", "cssclass": "icon-page", "description": "Various text inputs" }, - { "key": "styleguide.menus", "name": "Menus", "cssclass": "icon-page", "description": "Context menus, dropdowns, pickers" }, - { "key": "styleguide.glyphs", "name": "Glyphs", "cssclass": "icon-page", "description": "Glyphs overview" } + { "key": "styleguide.menus", "name": "Menus", "cssclass": "icon-page", "description": "Context menus, dropdowns" } ], "views": [ { "key": "styleguide.intro", "type": "styleguide.intro", "name": "Introduction", "cssclass": "icon-page", "templateUrl": "templates/intro.html", "editable": false }, { "key": "styleguide.standards", "type": "styleguide.standards", "name": "Standards", "cssclass": "icon-page", "templateUrl": "templates/standards.html", "editable": false }, + { "key": "styleguide.colors", "type": "styleguide.colors", "name": "Colors", "cssclass": "icon-page", "templateUrl": "templates/colors.html", "editable": false }, + { "key": "styleguide.glyphs", "type": "styleguide.glyphs", "name": "Glyphs", "cssclass": "icon-page", "templateUrl": "templates/glyphs.html", "editable": false }, { "key": "styleguide.controls", "type": "styleguide.controls", "name": "Controls", "cssclass": "icon-page", "templateUrl": "templates/controls.html", "editable": false }, { "key": "styleguide.input", "type": "styleguide.input", "name": "Text Inputs", "cssclass": "icon-page", "templateUrl": "templates/input.html", "editable": false }, - { "key": "styleguide.menus", "type": "styleguide.menus", "name": "Menus", "cssclass": "icon-page", "templateUrl": "templates/menus.html", "editable": false }, - { "key": "styleguide.glyphs", "type": "styleguide.glyphs", "name": "Glyphs", "cssclass": "icon-page", "templateUrl": "templates/glyphs.html", "editable": false } + { "key": "styleguide.menus", "type": "styleguide.menus", "name": "Menus", "cssclass": "icon-page", "templateUrl": "templates/menus.html", "editable": false } ], "roots": [ { @@ -44,6 +46,7 @@ define([ "composition": [ "intro", "standards", + "colors", "glyphs", "styleguide:ui-elements" ] @@ -54,7 +57,7 @@ define([ "priority" : "preferred", "model": { "type": "folder", - "name": "Style Guide UI Elements", + "name": "UI Elements", "location": "styleguide:home", "composition": [ "controls", diff --git a/example/styleguide/res/sass/_style-guide-base.scss b/example/styleguide/res/sass/_style-guide-base.scss index d0b8208d0e..33f7b83c88 100644 --- a/example/styleguide/res/sass/_style-guide-base.scss +++ b/example/styleguide/res/sass/_style-guide-base.scss @@ -79,6 +79,10 @@ margin-bottom: $interiorMarginLg; } + .themed { + display: none; // Each themed styleguide file will set this to block. + } + .doc-title { color: rgba(#fff, 0.3); text-transform: uppercase; @@ -138,11 +142,11 @@ // Example grid of glyphs .items-holder.grid { - .item.glyph-item { + .item.glyph-item, + .item.swatch-item { margin-bottom: 50px; margin-right: 10px; - height: 200px; - width: 225px; + position: relative; text-align: left; .glyph { color: $colorGlyphExample; @@ -160,6 +164,35 @@ } } } + + .item.glyph-item { + width: 225px; + height: 200px; + } + + .item.swatch-item { + $h: 150px; + $d: 75px; + width: 200px; + height: $h; + .glyph { + text-shadow: 0px 1px 10px rgba(black, 0.3); + } + + .h-swatch { + position: relative; + height: $d + $interiorMarginLg; + } + + .swatch { + height: $d; width: $d; + border: 1px solid $colorInteriorBorder; + border-radius: 100%; + position: absolute; + left: 50%; + @include transform(translateX(-50%)); + } + } } } diff --git a/example/styleguide/res/sass/style-guide-espresso.scss b/example/styleguide/res/sass/style-guide-espresso.scss index 9ceb5a5906..a3b8dcb9ac 100644 --- a/example/styleguide/res/sass/style-guide-espresso.scss +++ b/example/styleguide/res/sass/style-guide-espresso.scss @@ -31,4 +31,7 @@ $colorCode: rgba(black, 0.2); $colorGlyphExample: #fff; -@import "style-guide-base"; \ No newline at end of file +@import "style-guide-base"; + +div.themed.espresso { display: block; } +span.themed.espresso { display: inline; } diff --git a/example/styleguide/res/sass/style-guide-snow.scss b/example/styleguide/res/sass/style-guide-snow.scss index f29d2299ff..a48aec3756 100644 --- a/example/styleguide/res/sass/style-guide-snow.scss +++ b/example/styleguide/res/sass/style-guide-snow.scss @@ -31,4 +31,7 @@ $colorCode: rgba(black, 0.1); $colorGlyphExample: darken($colorBodyBg, 30%); -@import "style-guide-base"; \ No newline at end of file +@import "style-guide-base"; + +div.themed.snow { display: block; } +span.themed.snow { display: inline; } \ No newline at end of file diff --git a/example/styleguide/res/templates/colors.html b/example/styleguide/res/templates/colors.html new file mode 100644 index 0000000000..47631b0cff --- /dev/null +++ b/example/styleguide/res/templates/colors.html @@ -0,0 +1,84 @@ + +
+ + + +
+

Open MCT Style Guide

+

Colors

+ +
+

Overview

+

In mission operations, color is used to convey meaning. Alerts, warnings and status conditions are by convention communicated with colors in the green, yellow and red families. Colors must also be reserved for use in plots. As a result, Open MCT uses color selectively and sparingly. Follow these guidelines:

+
    +
  • Don't use red, orange, yellow or green colors in any element that isn't conveying some kind of status information.
    • +
  • Each theme has a key color (typically blue-ish) that should be used to emphasize interactive elements and important UI controls.
    • +
  • Within each theme values are used to push elements back or bring them forward, lowering or raising them in visual importance. + In this theme, Espresso, lighter colors are placed on a dark background. The lighter a color is, the more it comes toward the observer and is raised in importance. + In this theme, Snow, darker colors are placed on a light background. The darker a color is, the more it comes toward the observer and is raised in importance. +
    • +
  • For consistency, use a theme's pre-defined status colors.
    • +
+
+ +
+

{{ colorSet.category }}

+

{{ colorSet.description }}

+
+
+
+
+
+
+ + + + +
Name{{color.name}}
SASS{{color.constant}}
Value + {{color.valEspresso}} + {{color.valSnow}} +
+
+
+
+
\ No newline at end of file diff --git a/example/styleguide/src/ExampleStyleGuideModelProvider.js b/example/styleguide/src/ExampleStyleGuideModelProvider.js index 2a7aa6b05e..87d7f020fa 100644 --- a/example/styleguide/src/ExampleStyleGuideModelProvider.js +++ b/example/styleguide/src/ExampleStyleGuideModelProvider.js @@ -32,10 +32,11 @@ define( // Add pages pages['intro'] = { name: "Introduction", type: "styleguide.intro", location: "styleguide:home" }; pages['standards'] = { name: "Standards", type: "styleguide.standards", location: "styleguide:home" }; + pages['colors'] = { name: "Colors", type: "styleguide.colors", location: "styleguide:home" }; + pages['glyphs'] = { name: "Glyphs", type: "styleguide.glyphs", location: "styleguide:home" }; pages['controls'] = { name: "Controls", type: "styleguide.controls", location: "styleguide:ui-elements" }; pages['input'] = { name: "Text Inputs", type: "styleguide.input", location: "styleguide:ui-elements" }; pages['menus'] = { name: "Menus", type: "styleguide.menus", location: "styleguide:ui-elements" }; - pages['glyphs'] = { name: "Glyphs", type: "styleguide.glyphs", location: "styleguide:home" }; return { getModels: function () {