ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-21 22:17:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] WIP Style Guide

Browse Source 
Fixes #1233
More content
This commit is contained in:
Charles Hacskaylo 2017-02-06 11:42:39 -08:00
parent f306180ab6
commit 10dcb3a667
7 changed files with 204 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
example/styleguide/bundle.js
View File

@ -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"
]
}
}

3
example/styleguide/res/sass/_style-guide-base.scss
View File

@ -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;

6
example/styleguide/res/templates/controls.html
View File

@ -22,9 +22,6 @@
<div class="l-style-guide s-text">
<p class="doc-title">Open MCT Style Guide</p>
<h1>Controls</h1>
<div class="l-section">
<p>Intro about controls</p>
</div>
<div class="l-section">
<h2>Standard Buttons</h2>
@ -79,6 +76,7 @@
<mct-example><a class="s-icon-button icon-pencil" title="Edit"></a>
</mct-example>
</div>
</div>
<div class="l-section">
<h2>Checkboxes</h2>
@ -146,5 +144,5 @@
</mct-example>
</div>
</div>
</div>
</div>

6
example/styleguide/res/templates/input.html
View File

@ -23,14 +23,14 @@
<p class="doc-title">Open MCT Style Guide</p>
<h1>Text Input</h1>
<div class="l-section">
<p>Intro about text input elements.</p>
<p>Text inputs and textareas have a consistent look-and-feel across the application. The input's <code>placeholder</code> attribute is styled to appear visually different from an entered value.</p>
</div>
<div class="l-section">
<h2>Text Inputs</h2>
<div class="cols cols1-1">
<div class="col">
<p>Text inputs have a consistent look-and-feel across the application. The input's <code>placeholder</code> is styled to appear visually different from an entered value.</p>
<p>Use a text input where the user should enter relatively short text entries.</p>
<p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>. <code>.lg</code> 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 <code>.numeric</code>.</p>
</div>
<mct-example><input type="text" placeholder="Enter a value" />
@ -52,7 +52,7 @@
<h2>Textareas</h2>
<div class="cols cols1-1">
<div class="col">
<p>Textareas are styled in a similar fashion to text inputs. The textarea's <code>placeholder</code> is styled to appear visually different from an entered value.</p>
<p>Use a textarea where the user should enter relatively longer or multi-line text entries.</p>
<p>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: <code>.lg</code>, <code>.med</code> and <code>.sm</code>.</p>
</div>
<mct-example><div style="position: relative; height: 100px">

168
example/styleguide/res/templates/menus.html Normal file
View File

@ -0,0 +1,168 @@
<!--
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.
-->
<div class="l-style-guide s-text">
<p class="doc-title">Open MCT Style Guide</p>
<h1>Menus</h1>
<div class="l-section">
<h2>Context Menus</h2>
<div class="cols cols1-1">
<div class="col">
<p>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.</p>
<p>See <a class="link" href="http://localhost:8080/#/browse/styleguide:home/controls?view=styleguide.standards">User Interface Standards</a> for more details on z-indexing in Open MCT. Context menus should be destroyed if the user clicks outside the menu element.</p>
</div>
<mct-example><div style="height: 120px">
<div class="menu-element context-menu-wrapper mobile-disable-select">
<div class="menu context-menu">
<ul>
<li onclick="alert('Perform an action')" title="Open in a new browser tab" class="icon-new-window">Open In New Tab</li>
<li onclick="alert('Perform an action')" title="Remove this object from its containing object." class="icon-trash">Remove</li>
<li onclick="alert('Perform an action')" title="Create Link to object in another location." class="icon-link">Create Link</li>
</ul>
</div>
</div>
</div></mct-example>
</div>
</div>
<div class="l-section">
<h2>Dropdown Menus</h2>
<div class="cols cols1-1">
<div class="col">
<p>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 <span class="context-available"></span> 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.</p>
<p>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.</p>
</div>
<mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
<div class="l-flex-row flex-elem grows object-header">
<span class="type-icon flex-elem icon-layout"></span>
<span class="l-elem-wrapper l-flex-row flex-elem grows">
<span class="title-label flex-elem holder flex-can-shrink ng-binding">Object Header</span>
<span class="flex-elem context-available-w">
<span ng-controller="MenuArrowController as menuArrow" class="ng-scope">
<a class="context-available" ng-click="menuArrow.showMenu($event)"></a>
</span>
</span>
</span>
</div>
</div></mct-example>
</div>
</div>
<div class="l-section">
<h2>Checkbox Menus</h2>
<div class="cols cols1-1">
<div class="col">
<p>Checkbox menus add checkbox options to each item of a dropdown menu. Use this to </p>
<p>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.</p>
</div>
<mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
<div ng-controller="SearchMenuController as controller" class="ng-scope">
<div class="menu checkbox-menu" mct-click-elsewhere="parameters.menuVisible(false)">
<ul>
<!-- First element is special - it's a reset option -->
<li class="search-menu-item special icon-asterisk" title="Select all filters" ng-click="ngModel.checkAll = !ngModel.checkAll; controller.checkAll()">
<label class="checkbox custom no-text">
<input type="checkbox" class="checkbox ng-untouched ng-valid ng-dirty" ng-model="ngModel.checkAll" ng-change="controller.checkAll()">
<em></em>
</label>
All
</li>
<li class="search-menu-item icon-folder">
<label class="checkbox custom no-text">
<input type="checkbox" class="checkbox">
<em></em>
</label>
Folder
</li>
<li class="search-menu-item icon-layout">
<label class="checkbox custom no-text">
<input type="checkbox" class="checkbox">
<em></em>
</label>
Display Layout
</li>
<li class="search-menu-item icon-box-with-dashed-lines">
<label class="checkbox custom no-text">
<input type="checkbox" class="checkbox">
<em></em>
</label>
Fixed Position Display
</li>
</ul>
</div>
</div>
</div>
</mct-example>
</div>
</div>
<div class="l-section">
<h2>Palettes</h2>
<div class="cols cols1-1">
<div class="col">
<p>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.</p>
<p>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.</p>
</div>
<mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
<div class="s-button s-menu-button menu-element t-color-palette icon-paint-bucket" ng-controller="ClickAwayController as toggle">
<span class="l-click-area" ng-click="toggle.toggle()"></span>
<span class="color-swatch" style="background: rgb(255, 0, 0);"></span>
<div class="menu l-color-palette" ng-show="toggle.isActive()">
<div class="l-palette-row l-option-row">
<div class="l-palette-item s-palette-item " ng-click="ngModel[field] = 'transparent'"></div>
<span class="l-palette-item-label">None</span>
</div>
<div class="l-palette-row">
<div class="l-palette-item s-palette-item" style="background: rgb(0, 0, 0);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(28, 28, 28);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(57, 57, 57);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(85, 85, 85);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(113, 113, 113);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(142, 142, 142);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(170, 170, 170);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(198, 198, 198);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(227, 227, 227);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(255, 255, 255);"></div>
</div>
<div class="l-palette-row">
<div class="l-palette-item s-palette-item" style="background: rgb(136, 32, 32);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(224, 64, 64);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(240, 160, 72);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(255, 248, 96);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(128, 240, 72);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(128, 248, 248);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(88, 144, 224);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(0, 72, 240);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(136, 80, 240);"></div>
<div class="l-palette-item s-palette-item" style="background: rgb(224, 96, 248);"></div>
</div>
</div>
</div>
</div></mct-example>
</div>
</div>
</div>

0
example/styleguide/res/templates/standards.html Normal file
View File

10
example/styleguide/src/ExampleStyleGuideModelProvider.js
View File

@ -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 () {