From f45edaf2aa5070443b75c2bf2f99cabf4bb4fb8c Mon Sep 17 00:00:00 2001 From: Adam Meadows Date: Fri, 31 Mar 2017 15:18:22 -0600 Subject: [PATCH 1/4] Add some missing styles --- README.md | 20 ++ addon/styles/_variables.scss | 19 ++ addon/styles/addon.scss | 175 ++++++++++++------ blueprints/ember-frost-navigation/index.js | 21 --- package.json | 14 +- .../{user-pane => user-menu}/component.js | 4 +- .../pods/components/user-menu/template.hbs | 46 +++++ .../pods/components/user-pane/template.hbs | 2 - tests/dummy/app/pods/demo/template.hbs | 105 +++++------ tests/dummy/app/styles/app.scss | 23 +-- 10 files changed, 269 insertions(+), 160 deletions(-) create mode 100644 addon/styles/_variables.scss delete mode 100644 blueprints/ember-frost-navigation/index.js rename tests/dummy/app/pods/components/{user-pane => user-menu}/component.js (60%) create mode 100644 tests/dummy/app/pods/components/user-menu/template.hbs delete mode 100644 tests/dummy/app/pods/components/user-pane/template.hbs diff --git a/README.md b/README.md index b63fc27..1e42bc5 100644 --- a/README.md +++ b/README.md @@ -219,6 +219,26 @@ Router.map(function () { */ ``` +### CSS +The following CSS classes are defined by this addon to make it easier to layout a page using `frost-navigation`: + + * `frost-navigation-parent`: This class should be applied to, you guessed it, the parent of the `frost-navigation` + element. + * `frost-navigation-below`: This class should be applied to, surprise surprise, the element below the + `frost-navigation` element. It will ensure that that element takes up all the space below the navigation. + +```handlebars +
+ {{frost-navigation ...}} +
+ +
+
+``` + +### User menu +An example of a user-menu is defined in the dummy app at `tests/dummy/app/pods/components/user-menu` + ## Testing with [ember-hook](https://www.npmjs.com/package/ember-hook) The navigation component is accessible using ember-hook with the top level hook names, or you can access the internal diff --git a/addon/styles/_variables.scss b/addon/styles/_variables.scss new file mode 100644 index 0000000..64fd460 --- /dev/null +++ b/addon/styles/_variables.scss @@ -0,0 +1,19 @@ +// +// Variables used by +// + + +$frost-color-nav-bar-bg: $frost-color-night-2 !default; +$frost-color-nav-border-left: rgba($frost-color-white, .2) !default; +$frost-color-nav-category-border-right: rgba($frost-color-white, .2) !default; +$frost-color-nav-category-active-bg: rgba(39, 36, 37, .5) !default; +$frost-color-nav-column-border: rgba($frost-color-white, .3) !default; +$frost-color-nav-modal-bg: rgba(51, 66, 79, .97) !default; +$frost-color-nav-route-focus-bg: rgba(0, 0, 0, .2) !default; +$frost-color-nav-route-active-bg: rgba($frost-color-nav-route-focus-bg, .05) !default; +$frost-color-nav-route-focus-box-shadow: #fff !default; + +$frost-navigation-bar-height: 50px !default; +$z-index-application-bar: 3 !default; +$z-index-modal: 2 !default; +$z-index-modal-hidden: -1 !default; diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss index 265a03a..6e8d769 100644 --- a/addon/styles/addon.scss +++ b/addon/styles/addon.scss @@ -1,21 +1,66 @@ @import 'node_modules/ember-frost-core/addon/styles/frost-theme'; @import 'node_modules/ember-frost-core/addon/styles/frost-app'; +@import 'variables'; -$nav-modal-bg: rgba(51, 66, 79, .97); -$nav-column-border: rgba($frost-color-white, .3); -$nav-route-focus-bg: rgba(0, 0, 0, .2); -$nav-route-active-bg: rgba($nav-route-focus-bg, .05); -$nav-route-focus-box-shadow: #fff; -$frost-nav-border-left: rgba($frost-color-white, .2); -$nav-category-border-right: rgba($frost-color-white, .2); -$nav-category-active-bg: rgba(39, 36, 37, .5); +@mixin category-styles { + display: flex; + flex-direction: row; + align-items: center; + padding: 10px 20px; + transition: background .5s ease; + border-right: 1px solid $frost-color-nav-category-border-right; + cursor: pointer; + user-select: none; + + .nav-category-icon { + .frost-icon { + width: 30px; + height: 30px; + margin-right: 10px; + } + } -$z-index-application-bar: 3 !default; -$z-index-modal: 2 !default; -$z-index-modal-hidden: -1 !default; + .nav-category-name { + transition: color .5s ease; + color: $frost-color-grey-6; + font-size: 18px; + font-weight: 300; + } -$frost-navigation-bar-height: 50px !default; -$frost-navigation-bar-bg-color: $frost-color-night-2 !default; + &:hover { + .nav-category-name { + color: $frost-color-white; + } + } + + &.active { + background: $frost-color-nav-category-active-bg; + + .nav-category-name { + color: $frost-color-white; + } + } + + &.disabled { + color: $frost-color-grey-5; + } +} + +@mixin tertiary-button-color ($color) { + .frost-button { + &.tertiary { + color: $color; + } + } +} + +@mixin do-not-expand-links { + .frost-link { + .content { + min-width: inherit; + } + } +} .frost-application-bar { display: flex; @@ -24,7 +69,7 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default; left: 0; width: 100%; height: inherit; - background-color: $frost-navigation-bar-bg-color; + background-color: $frost-color-nav-bar-bg; z-index: $z-index-application-bar; .branding { @@ -73,7 +118,7 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default; padding: 0; border: 0; outline: 0; - background: $nav-modal-bg; + background: $frost-color-nav-modal-bg; overflow-x: hidden; .liquid-container, @@ -101,7 +146,7 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default; padding: 30px; &+ .nav-column { - border-left: 1px solid $nav-column-border; + border-left: 1px solid $frost-color-nav-column-border; } } @@ -193,8 +238,8 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default; } &.active { - background: $nav-route-active-bg; - box-shadow: 0 0 1px $nav-route-focus-box-shadow; + background: $frost-color-nav-route-active-bg; + box-shadow: 0 0 1px $frost-color-nav-route-focus-box-shadow; .nav-route-name { color: $frost-color-lgrey-1; @@ -207,8 +252,8 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default; &:focus { outline: none; - background: $nav-route-focus-bg; - box-shadow: 0 0 6px $nav-route-focus-box-shadow; + background: $frost-color-nav-route-focus-bg; + box-shadow: 0 0 6px $frost-color-nav-route-focus-box-shadow; .nav-route-name { color: $frost-color-white; @@ -277,59 +322,79 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default; flex-direction: row; height: $frost-navigation-bar-height; - & > div { + &> div { &:first-of-type { border-bottom: 1px solid $frost-color-grey-2; - border-left: 1px solid $frost-nav-border-left; - overflow: hidden; - - .user { - border-left: 0; - } + border-left: 1px solid $frost-color-nav-border-left; + overflow: inherit; // allows frost-popover for the user drop-down to display } } .nav-category { + @include category-styles; + @include do-not-expand-links; + } + + &-user { display: flex; flex-direction: row; align-items: center; - padding: 10px 20px; - transition: background .5s ease; - border-right: 1px solid $nav-category-border-right; - cursor: pointer; - user-select: none; + height: 50px; + margin-left: auto; + padding-right: 15px; + padding-left: 15px; + border-right: 0; + color: $frost-color-white; + vertical-align: middle; - .nav-category-icon { - .frost-icon { - width: 30px; - height: 30px; - margin-right: 10px; - } + .frost-icon { + width: 35px; + height: 35px; + padding-left: 5px; } + } - .nav-category-name { - transition: color .5s ease; - color: $frost-color-grey-6; - font-size: 18px; - font-weight: 300; - } + &-user-menu { + padding: 0; + } - &:hover { - .nav-category-name { - color: $frost-color-white; - } - } + &-user-menu-list { + min-width: 200px; + margin: 0; + padding: 0; + list-style: none; - &.active { - background: $nav-category-active-bg; + > li { + @include tertiary-button-color($frost-color-grey-3); + border-top: 1px solid $frost-color-lgrey-1; + color: $frost-color-grey-3; - .nav-category-name { - color: $frost-color-white; + &:first-child { + border-top: 0; + } + + &:last-child { + @include tertiary-button-color($frost-color-blue-1); + border-top: 5px solid $frost-color-lgrey-5; } } - &.disabled { - color: $frost-color-grey-5; + .frost-button { + width: 100%; + text-align: left; } } + + &-parent { + display: flex; + position: relative; + flex-direction: column; + height: 100%; + } + + &-below { + flex: 1; + height: 100%; + overflow: auto; + } } diff --git a/blueprints/ember-frost-navigation/index.js b/blueprints/ember-frost-navigation/index.js deleted file mode 100644 index 4108e78..0000000 --- a/blueprints/ember-frost-navigation/index.js +++ /dev/null @@ -1,21 +0,0 @@ -module.exports = { - description: '', - normalizeEntityName: function () {}, - - /** - Installs specified packages at the root level of the application. - Triggered by 'ember install '. - - @returns {Promise} package names and versions - */ - afterInstall: function () { - return this.addAddonsToProject({ - packages: [ - { - name: 'ember-frost-core', - target: '^1.0.0' - } - ] - }) - } -} diff --git a/package.json b/package.json index c0e3ece..f3f1c70 100644 --- a/package.json +++ b/package.json @@ -54,19 +54,20 @@ "ember-computed-decorators": "0.2.2", "ember-concurrency": "0.7.19", "ember-disable-proxy-controllers": "^1.0.1", + "ember-elsewhere": "0.4.1", "ember-engines": "~0.3.4", "ember-export-application-global": "^1.0.5", - "ember-frost-core": "1.9.6", "ember-frost-notifier": "4.2.1", - "ember-frost-test": "1.0.1", + "ember-frost-popover": "4.2.5", + "ember-frost-test": "1.0.2", "ember-hook": "1.4.1", "ember-load-initializers": "^0.5.1", - "ember-prop-types": "3.10.3", + "ember-prop-types": "3.10.4", "ember-redux": "^1.0.0", "ember-resolver": "^2.0.3", "ember-sinon": "0.6.0", "ember-spread": "1.1.0", - "ember-test-utils": "^3.0.0", + "ember-test-utils": "1.11.0", "ember-truth-helpers": "1.3.0", "eslint": "^3.0.0", "eslint-config-frost-standard": "^6.0.0", @@ -78,7 +79,7 @@ "remark-cli": "^2.0.0", "remark-lint": "^5.1.0", "sass-lint": "^1.0.0", - "sinon-chai": "^2.8.0", + "sinon-chai": "^2.9.0", "typescript": "^2.0.0" }, "keywords": [ @@ -90,6 +91,7 @@ "ember-computed-decorators": "^0.2.2", "ember-cli-htmlbars": "^1.0.1", "ember-cli-sass": "5.6.0", + "ember-frost-core": "^1.0.0", "liquid-fire": "0.26.1" }, "ember-addon": { @@ -101,4 +103,4 @@ "pr-bumper": { "coverage": 96.7 } -} \ No newline at end of file +} diff --git a/tests/dummy/app/pods/components/user-pane/component.js b/tests/dummy/app/pods/components/user-menu/component.js similarity index 60% rename from tests/dummy/app/pods/components/user-pane/component.js rename to tests/dummy/app/pods/components/user-menu/component.js index 7aebd71..be3c1ce 100644 --- a/tests/dummy/app/pods/components/user-pane/component.js +++ b/tests/dummy/app/pods/components/user-menu/component.js @@ -1,6 +1,6 @@ -import Ember from 'ember' +import {Component} from 'ember-frost-core' + import layout from './template' -const {Component} = Ember export default Component.extend({ layout diff --git a/tests/dummy/app/pods/components/user-menu/template.hbs b/tests/dummy/app/pods/components/user-menu/template.hbs new file mode 100644 index 0000000..46e3aee --- /dev/null +++ b/tests/dummy/app/pods/components/user-menu/template.hbs @@ -0,0 +1,46 @@ +{{frost-button + class=(concat css '-user-button') + hook=(concat hookPrefix '-userButton') + hookQualifiers=hookQualifiers + icon='user' + pack='frost-nav' + text=username +}} + +{{#frost-popover + class='frost-navigation-user-menu' + hook=(concat hookPrefix '-userMenu') + hookQualifiers=hookQualifiers + position='bottom' + target=(concat '.' css '-user-button') +}} + +{{/frost-popover}} diff --git a/tests/dummy/app/pods/components/user-pane/template.hbs b/tests/dummy/app/pods/components/user-pane/template.hbs deleted file mode 100644 index d909a74..0000000 --- a/tests/dummy/app/pods/components/user-pane/template.hbs +++ /dev/null @@ -1,2 +0,0 @@ -{{model.label}} -{{component model.logo}} diff --git a/tests/dummy/app/pods/demo/template.hbs b/tests/dummy/app/pods/demo/template.hbs index bb99006..196d4f1 100644 --- a/tests/dummy/app/pods/demo/template.hbs +++ b/tests/dummy/app/pods/demo/template.hbs @@ -1,61 +1,58 @@ - -{{frost-navigation - hook='my-navigation' - navActions=(hash - myAction=(action 'myAction') - ) - logo=(component 'custom-logo' - hook='my-custom-logo' - class='nav-category navigation-logo' - ) - menu=(component 'user-pane' - class='nav-category user' - model=(hash - logo=(component 'frost-icon' - hook='my-custom-menu' - icon='user' - pack='frost-nav' - ) - label='Username' +
+ + + {{frost-navigation + hook='my-navigation' + navActions=(hash + myAction=(action 'myAction') + ) + logo=(component 'custom-logo' + hook='my-custom-logo' + class='nav-category navigation-logo' ) - ) -}} - -
-
-
-
-
-

Click me

+ menu=(component 'user-menu' + class='nav-category frost-navigation-user' + username='Username' + ) + }} + - {{frost-button - icon='add' - priority='primary' - size='small' - hook='my-incrementer' - onClick=(action 'incrementCount') - }} - {{count}} -
-
-
-
-

Router

- {{code-snippet name='router.js'}} -
-
-

Controller

- {{code-snippet name='controller.js'}} +
+
+
+
+
+

Click me

+ + {{frost-button + icon='add' + priority='primary' + size='small' + hook='my-incrementer' + onClick=(action 'incrementCount') + }} + {{count}} +
-
-
-
-

Template

- {{code-snippet name='template.hbs'}} +
+
+

Router

+ {{code-snippet name='router.js'}} +
+
+

Controller

+ {{code-snippet name='controller.js'}} +
-
-

Outlet

- {{outlet}} +
+
+

Template

+ {{code-snippet name='template.hbs'}} +
+
+

Outlet

+ {{outlet}} +
diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss index dff9454..2a81fb6 100644 --- a/tests/dummy/app/styles/app.scss +++ b/tests/dummy/app/styles/app.scss @@ -60,6 +60,8 @@ } } } + +/* .frost-application-bar { .navigation-logo { border-right: solid 1px #666; @@ -78,24 +80,5 @@ } } } - - .user { - align-items: center; - border-left: solid 1px $frost-color-grey-3; - border-right: 0; - color: $frost-color-white; - display: flex; - flex-direction: row; - height: 50px; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; - vertical-align: middle; - - .frost-icon { - height: 35px; - padding-left: 5px; - width: 35px; - } - } } +*/ From 9d57461eabec75e5236b769c66c6da0914e643dc Mon Sep 17 00:00:00 2001 From: Adam Meadows Date: Mon, 3 Apr 2017 10:13:14 -0600 Subject: [PATCH 2/4] Fix styles and css class names --- addon/styles/_mixins.scss | 72 +++++++++++++++ addon/styles/addon.scss | 79 +++-------------- .../dummy/app/pods/application/controller.js | 28 ++++++ tests/dummy/app/pods/application/template.hbs | 23 ++++- tests/dummy/app/pods/demo/controller.js | 41 +++------ tests/dummy/app/pods/demo/template.hbs | 88 +++++++------------ tests/dummy/app/styles/app.scss | 84 ++++++++---------- 7 files changed, 216 insertions(+), 199 deletions(-) create mode 100644 addon/styles/_mixins.scss create mode 100644 tests/dummy/app/pods/application/controller.js diff --git a/addon/styles/_mixins.scss b/addon/styles/_mixins.scss new file mode 100644 index 0000000..cf1bd91 --- /dev/null +++ b/addon/styles/_mixins.scss @@ -0,0 +1,72 @@ +// +// Mixins used for ember-frost-navigation styles +// + +@mixin category-styles { + display: flex; + flex-direction: row; + align-items: center; + padding: 10px 20px; + transition: background .5s ease; + border-right: 1px solid $frost-color-nav-category-border-right; + cursor: pointer; + user-select: none; + + .nav-category-icon { + .frost-icon { + width: 30px; + height: 30px; + margin-right: 10px; + } + } + + .nav-category-name { + transition: color .5s ease; + color: $frost-color-grey-6; + font-size: 18px; + font-weight: 300; + } + + &:hover { + .nav-category-name { + color: $frost-color-white; + } + } + + &.active { + background: $frost-color-nav-category-active-bg; + + .nav-category-name { + color: $frost-color-white; + } + } + + &.disabled { + color: $frost-color-grey-5; + } +} + +@mixin tertiary-button-color ($color) { + .frost-button { + &.tertiary { + color: $color; + } + } +} + +@mixin do-not-expand-links { + .frost-link { + .content { + min-width: inherit; + } + } +} + +// In some instances, the tag gets a color that we don't want, +// based on browser default styles, so we want to make sure the color +// of the link, and by extension the color on the frost-icon is inherited (ARM 2017-04-03) +@mixin keep-link-icon-colors-inherited { + .frost-link { + color: inherit; + } +} diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss index 6e8d769..331f37e 100644 --- a/addon/styles/addon.scss +++ b/addon/styles/addon.scss @@ -1,66 +1,7 @@ @import 'node_modules/ember-frost-core/addon/styles/frost-theme'; @import 'node_modules/ember-frost-core/addon/styles/frost-app'; @import 'variables'; - -@mixin category-styles { - display: flex; - flex-direction: row; - align-items: center; - padding: 10px 20px; - transition: background .5s ease; - border-right: 1px solid $frost-color-nav-category-border-right; - cursor: pointer; - user-select: none; - - .nav-category-icon { - .frost-icon { - width: 30px; - height: 30px; - margin-right: 10px; - } - } - - .nav-category-name { - transition: color .5s ease; - color: $frost-color-grey-6; - font-size: 18px; - font-weight: 300; - } - - &:hover { - .nav-category-name { - color: $frost-color-white; - } - } - - &.active { - background: $frost-color-nav-category-active-bg; - - .nav-category-name { - color: $frost-color-white; - } - } - - &.disabled { - color: $frost-color-grey-5; - } -} - -@mixin tertiary-button-color ($color) { - .frost-button { - &.tertiary { - color: $color; - } - } -} - -@mixin do-not-expand-links { - .frost-link { - .content { - min-width: inherit; - } - } -} +@import 'mixins'; .frost-application-bar { display: flex; @@ -106,6 +47,8 @@ } .nav-modal { + @include keep-link-icon-colors-inherited; + display: flex; position: fixed; top: $frost-navigation-bar-height; @@ -333,6 +276,7 @@ .nav-category { @include category-styles; @include do-not-expand-links; + @include keep-link-icon-colors-inherited; } &-user { @@ -384,17 +328,16 @@ text-align: left; } } +} - &-parent { - display: flex; - position: relative; - flex-direction: column; - height: 100%; - } +.frost-application { + display: flex; + flex-direction: column; + height: 100%; - &-below { + &-content { + position: relative; flex: 1; - height: 100%; overflow: auto; } } diff --git a/tests/dummy/app/pods/application/controller.js b/tests/dummy/app/pods/application/controller.js new file mode 100644 index 0000000..618bbd5 --- /dev/null +++ b/tests/dummy/app/pods/application/controller.js @@ -0,0 +1,28 @@ + import Ember from 'ember' + const {Controller, Logger, inject} = Ember + + export default Controller.extend({ + + frostNavigation: inject.service(), + notifier: inject.service(), + + _notify (type, message) { + this.get('notifier').addNotification({ + message, + type, + autoClear: true, + clearDuration: 1200 + }) + }, + + actions: { + myAction (item) { + this._notify( + 'success', + `Item '${item.action}' fired` + ) + + Logger.log(item) + } + } + }) diff --git a/tests/dummy/app/pods/application/template.hbs b/tests/dummy/app/pods/application/template.hbs index 3a979a5..e2d862d 100644 --- a/tests/dummy/app/pods/application/template.hbs +++ b/tests/dummy/app/pods/application/template.hbs @@ -1,2 +1,23 @@ {{frost-notifier}} -{{outlet}} +
+ + {{frost-navigation + hook='my-navigation' + navActions=(hash + myAction=(action 'myAction') + ) + logo=(component 'custom-logo' + hook='my-custom-logo' + class='nav-category navigation-logo' + ) + menu=(component 'user-menu' + class='nav-category frost-navigation-user' + username='Username' + ) + }} + + +
+ {{outlet}} +
+
diff --git a/tests/dummy/app/pods/demo/controller.js b/tests/dummy/app/pods/demo/controller.js index da1396d..5998a91 100644 --- a/tests/dummy/app/pods/demo/controller.js +++ b/tests/dummy/app/pods/demo/controller.js @@ -1,28 +1,13 @@ import Ember from 'ember' -const { - Controller, - Logger: { - log - }, - get, - inject: { - service - }, - set -} = Ember +const {Controller, get, inject, set} = Ember + // BEGIN-SNIPPET controller export default Controller.extend({ + + frostNavigation: inject.service(), + count: 0, - frostNavigation: service(), - notifier: service(), - _notify (type, message) { - get(this, 'notifier').addNotification({ - message, - type, - autoClear: true, - clearDuration: 1200 - }) - }, + init () { this._super(...arguments) let customRouteObject = Ember.Object.extend({}).create({ @@ -45,25 +30,21 @@ export default Controller.extend({ } ] ] - get(this, 'frostNavigation.categories').push({ + + this.get('frostNavigation.categories').push({ name: 'Custom Category', columns }) - get(this, 'frostNavigation.categories').push({ + + this.get('frostNavigation.categories').push({ name: 'NPM', pack: 'frost-nav', url: 'http://npmjs.org', icon: 'application' }) }, + actions: { - myAction (item) { - this._notify( - 'success', - `Item '${item.action}' fired` - ) - log(item) - }, incrementCount () { let count = get(this, 'count') + 1 diff --git a/tests/dummy/app/pods/demo/template.hbs b/tests/dummy/app/pods/demo/template.hbs index 196d4f1..d1129a7 100644 --- a/tests/dummy/app/pods/demo/template.hbs +++ b/tests/dummy/app/pods/demo/template.hbs @@ -1,59 +1,37 @@ -
+
+
+
+
+

Click me

- - {{frost-navigation - hook='my-navigation' - navActions=(hash - myAction=(action 'myAction') - ) - logo=(component 'custom-logo' - hook='my-custom-logo' - class='nav-category navigation-logo' - ) - menu=(component 'user-menu' - class='nav-category frost-navigation-user' - username='Username' - ) - }} - - -
-
-
-
-
-

Click me

- - {{frost-button - icon='add' - priority='primary' - size='small' - hook='my-incrementer' - onClick=(action 'incrementCount') - }} - {{count}} -
-
-
-
-

Router

- {{code-snippet name='router.js'}} -
-
-

Controller

- {{code-snippet name='controller.js'}} -
-
-
-
-

Template

- {{code-snippet name='template.hbs'}} -
-
-

Outlet

- {{outlet}} -
-
+ {{frost-button + icon='add' + priority='primary' + size='small' + hook='my-incrementer' + onClick=(action 'incrementCount') + }} + {{count}} +
+
+
+
+

Router

+ {{code-snippet name='router.js'}} +
+
+

Controller

+ {{code-snippet name='controller.js'}} +
+
+
+
+

Template

+ {{code-snippet name='template.hbs'}} +
+
+

Outlet

+ {{outlet}}
diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss index 2a81fb6..e8d49c7 100644 --- a/tests/dummy/app/styles/app.scss +++ b/tests/dummy/app/styles/app.scss @@ -1,62 +1,56 @@ @import 'node_modules/ember-frost-core/addon/styles/frost-theme'; -.page-content { - align-items: center; - display: flex; - justify-content: center; +.row { + display: flex; + flex-direction: row; - .row { + .column { display: flex; - flex-direction: row; + flex-direction: column; + } - .column { - display: flex; - flex-direction: column; - } + .item { + width: 90%; + } +} + +.hljs { + background: #21252E; + border-radius: 3px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0,.2); + color: #98A0B0; + max-height: 50vh; + // font-size: .85em; + overflow: scroll; + padding: .9em; + width: 90%; - .item { - width: 90%; - } + .hljs-keyword { + color: #B959D8; } - .hljs { - background: #21252E; - border-radius: 3px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0,.2); - color: #98A0B0; - max-height: 50vh; - // font-size: .85em; - overflow: scroll; - padding: .9em; - width: 90%; + .hljs-built_in { + color: #DFB563; + } - .hljs-keyword { - color: #B959D8; - } + .hljs-string { + color: #86BB62; + } - .hljs-built_in { - color: #DFB563; - } + .hljs-number, + .hljs-subst { + color: #C7894F; + } - .hljs-string { - color: #86BB62; - } + .hljs-tag { + color: inherit; - .hljs-number, - .hljs-subst { - color: #C7894F; + .hljs-name { + color: #D95360; } - .hljs-tag { - color: inherit; - - .hljs-name { - color: #D95360; - } - - .hljs-attr { - color: #C7894F; - } + .hljs-attr { + color: #C7894F; } } } From a41c10a8b46c3a2aee29257fdaa98ade9fb2bc7c Mon Sep 17 00:00:00 2001 From: Adam Meadows Date: Mon, 3 Apr 2017 11:13:32 -0600 Subject: [PATCH 3/4] Fix demo layout --- README.md | 16 ++++--- package.json | 2 +- tests/dummy/app/pods/demo/template.hbs | 60 ++++++++++++-------------- tests/dummy/app/styles/app.scss | 44 +++++-------------- 4 files changed, 50 insertions(+), 72 deletions(-) diff --git a/README.md b/README.md index 1e42bc5..320c4c2 100644 --- a/README.md +++ b/README.md @@ -222,22 +222,26 @@ Router.map(function () { ### CSS The following CSS classes are defined by this addon to make it easier to layout a page using `frost-navigation`: - * `frost-navigation-parent`: This class should be applied to, you guessed it, the parent of the `frost-navigation` + * `frost-application`: This class should be applied to, the parent of the `frost-navigation` element. - * `frost-navigation-below`: This class should be applied to, surprise surprise, the element below the - `frost-navigation` element. It will ensure that that element takes up all the space below the navigation. + * `frost-application-content`: This class should be applied to the element below the `frost-navigation` element. + It will ensure that that element takes up all the space below the navigation. ```handlebars -
+
{{frost-navigation ...}} -
+
``` ### User menu -An example of a user-menu is defined in the dummy app at `tests/dummy/app/pods/components/user-menu` +An example of a user-menu is defined in the dummy app at `tests/dummy/app/pods/components/user-menu` There are also +a couple classes defined in this addon that will format your own user-menu properly: + * `frost-navigation-user` for the actual user menu button + * `frost-navigation-user-menu` for the popover menu that is expanded when clicking on the above button + * `frost-navigation-user-menu-list` for the `
    ` that holds the list items of the user menu ## Testing with [ember-hook](https://www.npmjs.com/package/ember-hook) diff --git a/package.json b/package.json index f3f1c70..dd4c8b6 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "ember-resolver": "^2.0.3", "ember-sinon": "0.6.0", "ember-spread": "1.1.0", - "ember-test-utils": "1.11.0", + "ember-test-utils": "^3.0.0", "ember-truth-helpers": "1.3.0", "eslint": "^3.0.0", "eslint-config-frost-standard": "^6.0.0", diff --git a/tests/dummy/app/pods/demo/template.hbs b/tests/dummy/app/pods/demo/template.hbs index d1129a7..f6d93f6 100644 --- a/tests/dummy/app/pods/demo/template.hbs +++ b/tests/dummy/app/pods/demo/template.hbs @@ -1,38 +1,34 @@ -
    -
    -
    -
    -

    Click me

    +
    +
    +

    Click me

    - {{frost-button - icon='add' - priority='primary' - size='small' - hook='my-incrementer' - onClick=(action 'incrementCount') - }} - {{count}} -
    + {{frost-button + icon='add' + priority='primary' + size='small' + hook='my-incrementer' + onClick=(action 'incrementCount') + }} + {{count}} +
    +
    +
    +

    Router

    + {{code-snippet name='router.js'}} +
    +
    +

    Controller

    + {{code-snippet name='controller.js'}}
    -
    -
    -

    Router

    - {{code-snippet name='router.js'}} -
    -
    -

    Controller

    - {{code-snippet name='controller.js'}} -
    +
    +
    +
    +

    Template

    + {{code-snippet name='template.hbs'}}
    -
    -
    -

    Template

    - {{code-snippet name='template.hbs'}} -
    -
    -

    Outlet

    - {{outlet}} -
    +
    +

    Outlet

    + {{outlet}}
    diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss index e8d49c7..55c35c3 100644 --- a/tests/dummy/app/styles/app.scss +++ b/tests/dummy/app/styles/app.scss @@ -1,17 +1,17 @@ @import 'node_modules/ember-frost-core/addon/styles/frost-theme'; -.row { - display: flex; - flex-direction: row; - - .column { - display: flex; - flex-direction: column; - } +.page-content { + display: flex; + flex-direction: column; + width: 90%; + margin: 0 5%; +} - .item { - width: 90%; - } +.row { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; } .hljs { @@ -54,25 +54,3 @@ } } } - -/* -.frost-application-bar { - .navigation-logo { - border-right: solid 1px #666; - cursor: pointer; - height: 50px; - - .frost-icon { - width: 125px; - } - - > div { - &.frost-svg { - width: 125px; - height: 40px; - margin: 0px 24px; - } - } - } -} -*/ From 7f8d4560ef5ca52970489389e238582ca31b0a10 Mon Sep 17 00:00:00 2001 From: Adam Meadows Date: Mon, 3 Apr 2017 11:34:41 -0600 Subject: [PATCH 4/4] Add some TODO comments --- addon/styles/_variables.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/addon/styles/_variables.scss b/addon/styles/_variables.scss index 64fd460..e47e656 100644 --- a/addon/styles/_variables.scss +++ b/addon/styles/_variables.scss @@ -2,12 +2,15 @@ // Variables used by // - $frost-color-nav-bar-bg: $frost-color-night-2 !default; $frost-color-nav-border-left: rgba($frost-color-white, .2) !default; $frost-color-nav-category-border-right: rgba($frost-color-white, .2) !default; + +// TODO: should this be a variable in ember-frost-core? (ARM 2017-04-03) $frost-color-nav-category-active-bg: rgba(39, 36, 37, .5) !default; $frost-color-nav-column-border: rgba($frost-color-white, .3) !default; + +// TODO: should this be a variable in ember-frost-core? (ARM 2017-04-03) $frost-color-nav-modal-bg: rgba(51, 66, 79, .97) !default; $frost-color-nav-route-focus-bg: rgba(0, 0, 0, .2) !default; $frost-color-nav-route-active-bg: rgba($frost-color-nav-route-focus-bg, .05) !default;