Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add some missing styles #207

Merged
merged 4 commits into from
Apr 11, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,30 @@ 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-application`: This class should be applied to, the parent of the `frost-navigation`
element.
* `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
<div class='frost-application'>
{{frost-navigation ...}}
<div class='frost-application-content'>
<!-- the rest of your page here -->
</div>
</div>
```

### 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 `<ul>` that holds the list items of the 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
Expand Down
72 changes: 72 additions & 0 deletions addon/styles/_mixins.scss
Original file line number Diff line number Diff line change
@@ -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 <a> 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;
}
}
22 changes: 22 additions & 0 deletions addon/styles/_variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
//
// 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;
$frost-color-nav-route-focus-box-shadow: #fff !default;

$frost-navigation-bar-height: 50px !default;
$z-index-application-bar: 3 !default;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI I've been trying to centralize all z-index values in core so that we know how they'll compete https://github.com/ciena-frost/ember-frost-core/blob/master/addon/styles/_z-index.scss

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good. I was just renaming existing variables and putting them in a variables file.

$z-index-modal: 2 !default;
$z-index-modal-hidden: -1 !default;
124 changes: 66 additions & 58 deletions addon/styles/addon.scss
Original file line number Diff line number Diff line change
@@ -1,21 +1,7 @@
@import 'node_modules/ember-frost-core/addon/styles/frost-theme';
@import 'node_modules/ember-frost-core/addon/styles/frost-app';

$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);

$z-index-application-bar: 3 !default;
$z-index-modal: 2 !default;
$z-index-modal-hidden: -1 !default;

$frost-navigation-bar-height: 50px !default;
$frost-navigation-bar-bg-color: $frost-color-night-2 !default;
@import 'variables';
@import 'mixins';

.frost-application-bar {
display: flex;
Expand All @@ -24,7 +10,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 {
Expand Down Expand Up @@ -61,6 +47,8 @@ $frost-navigation-bar-bg-color: $frost-color-night-2 !default;
}

.nav-modal {
@include keep-link-icon-colors-inherited;

display: flex;
position: fixed;
top: $frost-navigation-bar-height;
Expand All @@ -73,7 +61,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,
Expand Down Expand Up @@ -101,7 +89,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;
}
}

Expand Down Expand Up @@ -193,8 +181,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;
Expand All @@ -207,8 +195,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;
Expand Down Expand Up @@ -277,59 +265,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;
@include keep-link-icon-colors-inherited;
}

&-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;
}
}
}

.frost-application {
display: flex;
flex-direction: column;
height: 100%;

&-content {
position: relative;
flex: 1;
overflow: auto;
}
}
21 changes: 0 additions & 21 deletions blueprints/ember-frost-navigation/index.js

This file was deleted.

12 changes: 7 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,15 @@
"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",
Expand All @@ -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": [
Expand All @@ -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",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we at the stage where core can work without a blueprint run? @dafortin

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought I put a note, maybe it wasn't in this PR, where the core install won't actually work, but I don't think it really matters for addons that depend on core. I don't think anyone is getting core by installing some other addon in their app. I think it's safe (for this transition period at least) to just tell people to install core and test independently.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that's fine - I doubt we have any scenarios where only the nav is used currently anyway

"liquid-fire": "0.26.1"
},
"ember-addon": {
Expand All @@ -101,4 +103,4 @@
"pr-bumper": {
"coverage": 96.7
}
}
}
Loading