kemko/nomad
1
0
Fork 0
mirror of https://github.com/kemko/nomad.git synced 2026-01-09 20:05:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

Styleguide entry to the gutter menu

Browse Source
This commit is contained in:
Michael Lange
2018-06-29 23:36:40 -07:00
parent 83e5c23dba
commit f97cd93b85
4 changed files with 176 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ui/app/styles/core/menu.scss
View File

@@ -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%);
}
}

9
ui/app/styles/styleguide.scss
View File

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

156
ui/app/templates/components/freestyle/sg-gutter-menu.hbs Normal file
View File

@@ -0,0 +1,156 @@
{{#freestyle-usage "gutter-nav" title="Gutter Menu"}}
<div class="columns">
<div class="column is-4">
<div class="gutter">
<aside class="menu">
<p class="menu-label">Places</p>
<ul class="menu-list">
<li><a href="#" class="is-active">Place One</a></li>
<li><a href="#">Place Two</a></li>
</ul>
<p class="menu-label">Features</p>
<ul class="menu-list">
<li><a href="#">Feature One</a></li>
<li><a href="#">Feature Two</a></li>
</ul>
</aside>
</div>
</div>
<div class="column">
<div class="mock-content">
<div class="mock-vague"></div>
</div>
</div>
</div>
{{/freestyle-usage}}
{{#freestyle-usage "gutter-nav-rich-components" title="Gutter Navigation with Rich Components"}}
<div class="columns">
<div class="column is-4">
<div class="gutter">
<aside class="menu">
<p class="menu-label">Places</p>
<ul class="menu-list">
<li>
<div class="menu-item">
{{#power-select
selected=(or selection "One")
options=(array "One" "Two" "Three")
onchange=(action (mut selection))
as |option|}}
{{option}}
{{/power-select}}
</div>
</li>
<li><a href="#" class="is-active">Place One</a></li>
<li><a href="#">Place Two</a></li>
</ul>
<p class="menu-label">Features</p>
<ul class="menu-list">
<li><a href="#">Feature One</a></li>
<li><a href="#">Feature Two</a></li>
</ul>
</aside>
</div>
</div>
<div class="column">
<div class="mock-content">
<div class="mock-vague"></div>
</div>
</div>
</div>
{{/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"}}
<div class="columns">
<div class="column is-4">
<div class="gutter">
<aside class="menu">
<p class="menu-label">Places</p>
<ul class="menu-list">
{{#each (array "One Two" "Three" "Four" "Five" "Six" "Seven") as |item|}}
<li><a href="#">Place {{item}}</a></li>
{{/each}}
</ul>
<p class="menu-label">Features</p>
<ul class="menu-list">
{{#each (array "One Two" "Three" "Four" "Five" "Six" "Seven") as |item|}}
<li><a href="#">Feature {{item}}</a></li>
{{/each}}
</ul>
<p class="menu-label">Other</p>
<ul class="menu-list">
<li><a href="#" class="is-active">The one that didn't fit in</a></li>
</ul>
<p class="menu-label">Things</p>
<ul class="menu-list">
{{#each (array "One Two" "Three" "Four" "Five" "Six" "Seven") as |item|}}
<li><a href="#">Thing {{item}}</a></li>
{{/each}}
</ul>
</aside>
</div>
</div>
<div class="column">
<div class="mock-content">
<div class="mock-vague"></div>
</div>
</div>
</div>
{{/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"}}
<div class="columns">
<div class="column is-4">
<div class="gutter">
<aside class="menu">
<p class="menu-label">Places</p>
<ul class="menu-list">
<li><a href="#">{{x-icon "clock"}} Place One</a></li>
<li><a href="#" class="is-active">{{x-icon "history"}} Place Two</a></li>
</ul>
<p class="menu-label">Features</p>
<ul class="menu-list">
<li><a href="#">{{x-icon "warning"}} Feature One</a></li>
<li><a href="#">{{x-icon "media-pause"}} Feature Two</a></li>
</ul>
</aside>
</div>
</div>
<div class="column">
<div class="mock-content">
<div class="mock-vague"></div>
</div>
</div>
</div>
{{/freestyle-usage}}
{{#freestyle-annotation}}
In the future, the gutter menu may have icons.
{{/freestyle-annotation}}
{{#freestyle-usage "gutter-nav-global" title="Global Gutter Navigation"}}
<div class="columns">
<div class="column is-4">
{{#gutter-menu}}
{{!-- Page content here --}}
{{/gutter-menu}}
</div>
</div>
{{/freestyle-usage}}
{{#freestyle-annotation}}
<p>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.</p>
<p><strong>Note:</strong> 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.</p>
{{/freestyle-annotation}}

4
ui/app/templates/freestyle.hbs
View File

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