From f97cd93b8530ed6fc5145ce871223170f8c3fc9d Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Fri, 29 Jun 2018 23:36:40 -0700 Subject: [PATCH] Styleguide entry to the gutter menu --- ui/app/styles/core/menu.scss | 9 + ui/app/styles/styleguide.scss | 9 +- .../components/freestyle/sg-gutter-menu.hbs | 156 ++++++++++++++++++ ui/app/templates/freestyle.hbs | 4 +- 4 files changed, 176 insertions(+), 2 deletions(-) create mode 100644 ui/app/templates/components/freestyle/sg-gutter-menu.hbs diff --git a/ui/app/styles/core/menu.scss b/ui/app/styles/core/menu.scss index 06fd74a56..0811337af 100644 --- a/ui/app/styles/core/menu.scss +++ b/ui/app/styles/core/menu.scss @@ -13,6 +13,15 @@ background: transparent; box-shadow: inset -3px 0 0 $blue; color: $blue; + + .icon { + fill: $blue; + } + } + + .icon { + margin-right: 0.5em; + fill: lighten($text, 30%); } } diff --git a/ui/app/styles/styleguide.scss b/ui/app/styles/styleguide.scss index f77df0655..3b0a21785 100644 --- a/ui/app/styles/styleguide.scss +++ b/ui/app/styles/styleguide.scss @@ -1,7 +1,8 @@ #styleguide { .mock-content { display: flex; - height: 250px; + min-height: 250px; + height: 100%; .mock-image, .mock-copy { @@ -40,5 +41,11 @@ transparent 14px ); } + + .mock-vague { + background: lighten($grey-blue, 15%); + width: 100%; + height: 100%; + } } } diff --git a/ui/app/templates/components/freestyle/sg-gutter-menu.hbs b/ui/app/templates/components/freestyle/sg-gutter-menu.hbs new file mode 100644 index 000000000..8ccc3e759 --- /dev/null +++ b/ui/app/templates/components/freestyle/sg-gutter-menu.hbs @@ -0,0 +1,156 @@ +{{#freestyle-usage "gutter-nav" title="Gutter Menu"}} +
+
+
+ +
+
+
+
+
+
+
+
+{{/freestyle-usage}} + +{{#freestyle-usage "gutter-nav-rich-components" title="Gutter Navigation with Rich Components"}} +
+
+
+ +
+
+
+
+
+
+
+
+{{/freestyle-usage}} +{{#freestyle-annotation}} + In order to keep the gutter navigation streamlined and easy to navigation, rich components should be avoided when possible. When not possible, they should be kept near the top. +{{/freestyle-annotation}} + +{{#freestyle-usage "gutter-nav-many-items" title="Hypothetical Gutter Navigation with Many Items"}} +
+
+
+ +
+
+
+
+
+
+
+
+{{/freestyle-usage}} +{{#freestyle-annotation}} + There will only ever be one gutter menu in the Nomad UI, but it helps to imagine a situation where there are many navigation items in the gutter. +{{/freestyle-annotation}} + +{{#freestyle-usage "gutter-nav-icon-items" title="Hypothetical Gutter Navigation with Icon Items"}} +
+
+
+ +
+
+
+
+
+
+
+
+{{/freestyle-usage}} +{{#freestyle-annotation}} + In the future, the gutter menu may have icons. +{{/freestyle-annotation}} + +{{#freestyle-usage "gutter-nav-global" title="Global Gutter Navigation"}} +
+
+ {{#gutter-menu}} + {{!-- Page content here --}} + {{/gutter-menu}} +
+
+{{/freestyle-usage}} +{{#freestyle-annotation}} +

Since there will only ever be one gutter menu in the UI, it makes sense to express the menu as a singleton component. This is what that singleton component looks like.

+ +

Note: Normally the gutter menu is rendered within a page layout and is fixed position. The columns shown in this example are only to imitate the actual width without applying fixed positioning.

+{{/freestyle-annotation}} diff --git a/ui/app/templates/freestyle.hbs b/ui/app/templates/freestyle.hbs index 387befe99..5b2001a06 100644 --- a/ui/app/templates/freestyle.hbs +++ b/ui/app/templates/freestyle.hbs @@ -36,8 +36,10 @@ {{freestyle/sg-dropdown}} {{/section.subsection}} - {{#section.subsection name="Gutter navigation"}} + {{#section.subsection name="Gutter menu"}} + {{freestyle/sg-gutter-menu}} {{/section.subsection}} + {{#section.subsection name="Header"}} {{/section.subsection}} {{#section.subsection name="Inline definitions"}}