From 10dcb3a667313b7c4fc3f5cf379b84c709849f94 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 6 Feb 2017 11:42:39 -0800 Subject: [PATCH] [Frontend] WIP Style Guide Fixes #1233 More content --- example/styleguide/bundle.js | 28 ++- .../res/sass/_style-guide-base.scss | 3 +- .../styleguide/res/templates/controls.html | 6 +- example/styleguide/res/templates/input.html | 6 +- example/styleguide/res/templates/menus.html | 168 ++++++++++++++++++ .../styleguide/res/templates/standards.html | 0 .../src/ExampleStyleGuideModelProvider.js | 10 +- 7 files changed, 204 insertions(+), 17 deletions(-) create mode 100644 example/styleguide/res/templates/menus.html create mode 100644 example/styleguide/res/templates/standards.html diff --git a/example/styleguide/bundle.js b/example/styleguide/bundle.js index 864025860d..05ec61c6fb 100644 --- a/example/styleguide/bundle.js +++ b/example/styleguide/bundle.js @@ -14,34 +14,52 @@ define([ { "types": [ { "key": "styleguide.intro", "name": "Introduction", "cssclass": "icon-page", "description": "Introduction and overview to the style guide" }, - { "key": "styleguide.controls", "name": "Controls", "cssclass": "icon-page", "description": "Buttons, selects, menus, etc." }, + { "key": "styleguide.standards", "name": "Standards", "cssclass": "icon-page", "description": "" }, + { "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" } ], "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.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 } ], "roots": [ { - "id": "styleguide:folder" + "id": "styleguide:home" } ], "models": [ { - "id": "styleguide:folder", + "id": "styleguide:home", "priority" : "preferred", "model": { "type": "folder", - "name": "Style Guide", + "name": "Style Guide Home", "location": "ROOT", "composition": [ "intro", + "standards", + "glyphs", + "styleguide:ui-elements" + ] + } + }, + { + "id": "styleguide:ui-elements", + "priority" : "preferred", + "model": { + "type": "folder", + "name": "Style Guide UI Elements", + "location": "styleguide:home", + "composition": [ "controls", "input", - "glyphs" + "menus" ] } } diff --git a/example/styleguide/res/sass/_style-guide-base.scss b/example/styleguide/res/sass/_style-guide-base.scss index cc273e8ba1..942f8313a5 100644 --- a/example/styleguide/res/sass/_style-guide-base.scss +++ b/example/styleguide/res/sass/_style-guide-base.scss @@ -50,7 +50,7 @@ background-color: $colorCode; border-radius: $interiorMargin; display: block; - padding: $interiorMargin $interiorMarginLg; + padding: $interiorMarginLg $interiorMarginLg; position: relative; } @@ -69,6 +69,7 @@ pre { display: block; margin: 0; + max-height: 300px; overflow: auto; padding-bottom: $interiorMarginLg; white-space: pre; diff --git a/example/styleguide/res/templates/controls.html b/example/styleguide/res/templates/controls.html index 8dab7368e7..9668c87d6e 100644 --- a/example/styleguide/res/templates/controls.html +++ b/example/styleguide/res/templates/controls.html @@ -22,9 +22,6 @@

Open MCT Style Guide

Controls

-
-

Intro about controls

-

Standard Buttons

@@ -79,6 +76,7 @@
+

Checkboxes

@@ -146,5 +144,5 @@
- + diff --git a/example/styleguide/res/templates/input.html b/example/styleguide/res/templates/input.html index 1984e42d6b..eae33098bb 100644 --- a/example/styleguide/res/templates/input.html +++ b/example/styleguide/res/templates/input.html @@ -23,14 +23,14 @@

Open MCT Style Guide

Text Input

-

Intro about text input elements.

+

Text inputs and textareas have a consistent look-and-feel across the application. The input's placeholder attribute is styled to appear visually different from an entered value.

Text Inputs

-

Text inputs have a consistent look-and-feel across the application. The input's placeholder is styled to appear visually different from an entered value.

+

Use a text input where the user should enter relatively short text entries.

A variety of size styles are available: .lg, .med and .sm. .lg text inputs dynamically scale their width to 100% of their container's width. Numeric inputs that benefit from right-alignment can be styled by adding .numeric.

@@ -52,7 +52,7 @@

Textareas

-

Textareas are styled in a similar fashion to text inputs. The textarea's placeholder is styled to appear visually different from an entered value.

+

Use a textarea where the user should enter relatively longer or multi-line text entries.

By default, textareas are styled to expand to 100% of the width and height of their container; additionally there are three size styles available that control the height of the element: .lg, .med and .sm.

diff --git a/example/styleguide/res/templates/menus.html b/example/styleguide/res/templates/menus.html new file mode 100644 index 0000000000..e24494d8e2 --- /dev/null +++ b/example/styleguide/res/templates/menus.html @@ -0,0 +1,168 @@ + +
+

Open MCT Style Guide

+

Menus

+ +
+

Context Menus

+
+
+

Context menus are used extensively in Open MCT. They are created dynamically upon a contextual click and positioned at the user's cursor position coincident with the element that invoked them. Context menus must use absolute position and utilize a z-index that places them above other in-page elements.

+

See User Interface Standards for more details on z-indexing in Open MCT. Context menus should be destroyed if the user clicks outside the menu element.

+
+
+
+
+
    +
  • Open In New Tab
    • +
  • Remove
    • +
  • Create Link
    • +
+
+
+
 +
+
+ +
+

Dropdown Menus

+
+
+

Dropdown menus are a dedicated, more discoverable context menu for a given object. Like context menus, dropdown menus are used extensively in Open MCT, and are most often associated with object header elements. They visually manifest as a downward pointing arrow associated with an element, and when clicked displays a context menu at that location. See guidelines above about context menus in regards to z-indexing and element lifecycle.

+

Use a dropdown menu to encapsulate important the actions of an object in the object's header, or in a place that you'd use a context menu, but want to make the availability of the menu more apparent.

+
+
+ +
+ + + Object Header + + + + + + +
+ +
 +
+
+ +
+

Checkbox Menus

+
+
+

Checkbox menus add checkbox options to each item of a dropdown menu. Use this to

+

Use a dropdown menu to encapsulate important the actions of an object in the object's header, or in a place that you'd use a context menu, but want to make the availability of the menu more apparent.

+
+
+
+
+
    + +
  • + + All +
    • +
  • + + Folder +
    • +
  • + + Display Layout +
    • +
  • + + Fixed Position Display +
    • +
+
+
+
+ +
+
+ +
+

Palettes

+
+
+

Use a palette to provide color choices. Similar to context menus and dropdowns, palettes should be dismissed when a choice is made within them, or if the user clicks outside one.

+

Note that while this example uses static markup for illustrative purposes, don't do this - use a front-end framework with repeaters to build the color choices.

+
+
+ +
+ + +
+
+
+ None +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
 +
+
+ +
diff --git a/example/styleguide/res/templates/standards.html b/example/styleguide/res/templates/standards.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/example/styleguide/src/ExampleStyleGuideModelProvider.js b/example/styleguide/src/ExampleStyleGuideModelProvider.js index a2ad28195c..2a7aa6b05e 100644 --- a/example/styleguide/src/ExampleStyleGuideModelProvider.js +++ b/example/styleguide/src/ExampleStyleGuideModelProvider.js @@ -30,10 +30,12 @@ define( var pages = {}; // Add pages - pages['intro'] = { name: "Introduction", type: "styleguide.intro", location: "styleguide:folder" }; - pages['controls'] = { name: "Controls", type: "styleguide.controls", location: "styleguide:folder" }; - pages['input'] = { name: "Text Inputs", type: "styleguide.input", location: "styleguide:folder" }; - pages['glyphs'] = { name: "Glyphs", type: "styleguide.glyphs", location: "styleguide:folder" }; + pages['intro'] = { name: "Introduction", type: "styleguide.intro", location: "styleguide:home" }; + pages['standards'] = { name: "Standards", type: "styleguide.standards", 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 () {