From bcb2bf8929ed8b0b6345fcef6b12e203a91a81f3 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Fri, 29 May 2020 16:12:41 -0400 Subject: [PATCH 01/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20convert=20project?= =?UTF-8?q?=20form=20to=20rose=20form=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/core/app/components/form/project/index.hbs | 44 +++++++------------ ui/core/app/routes/orgs/org/projects/new.js | 4 +- .../app/routes/orgs/org/projects/project.js | 4 +- 3 files changed, 17 insertions(+), 35 deletions(-) diff --git a/ui/core/app/components/form/project/index.hbs b/ui/core/app/components/form/project/index.hbs index 3842fc226..7541f8ed5 100644 --- a/ui/core/app/components/form/project/index.hbs +++ b/ui/core/app/components/form/project/index.hbs @@ -1,44 +1,30 @@ -
+ - + readonly={{false}} /> - + readonly={{false}} /> -
- - {{t 'actions.save'}} - + - - {{t 'actions.cancel'}} - -
- +
diff --git a/ui/core/app/routes/orgs/org/projects/new.js b/ui/core/app/routes/orgs/org/projects/new.js index d8ffa28ae..15402927d 100644 --- a/ui/core/app/routes/orgs/org/projects/new.js +++ b/ui/core/app/routes/orgs/org/projects/new.js @@ -31,9 +31,7 @@ export default class OrgsOrgProjectsNewRoute extends Route { * @param {Event} e */ @action - async save(project, e) { - // Prevent default behavior, since this was trigger from a form submission. - e.preventDefault(); + async save(project) { try { await project.save(); this.transitionTo('orgs.org.projects.project', project); diff --git a/ui/core/app/routes/orgs/org/projects/project.js b/ui/core/app/routes/orgs/org/projects/project.js index 5441e1aaa..8fa788bd3 100644 --- a/ui/core/app/routes/orgs/org/projects/project.js +++ b/ui/core/app/routes/orgs/org/projects/project.js @@ -44,9 +44,7 @@ export default class OrgsOrgProjectsProjectRoute extends Route { * @param {Event} e */ @action - async save(project, e) { - // Prevent default behavior, since this was trigger from a form submission. - e.preventDefault(); + async save(project) { try { await project.save(); } catch (e) { From e83f9ba40cb44c22475fd1c37e39dc19f9ce536a Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Fri, 29 May 2020 16:24:10 -0400 Subject: [PATCH 02/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20convert=20new=20p?= =?UTF-8?q?roject=20button=20to=20link?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/core/app/routes/orgs/org/projects/index.js | 8 +------- ui/core/app/styles/app.scss | 16 ---------------- .../app/templates/orgs/org/projects/index.hbs | 14 ++++++-------- 3 files changed, 7 insertions(+), 31 deletions(-) diff --git a/ui/core/app/routes/orgs/org/projects/index.js b/ui/core/app/routes/orgs/org/projects/index.js index 717ffbac5..be2068f6d 100644 --- a/ui/core/app/routes/orgs/org/projects/index.js +++ b/ui/core/app/routes/orgs/org/projects/index.js @@ -1,9 +1,3 @@ import Route from '@ember/routing/route'; -import { action } from '@ember/object'; -export default class OrgsOrgProjectsIndexRoute extends Route { - @action - new() { - this.transitionTo('orgs.org.projects.new'); - } -} +export default class OrgsOrgProjectsIndexRoute extends Route {} diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss index 4b6c7f9a3..d7fe5dd9a 100644 --- a/ui/core/app/styles/app.scss +++ b/ui/core/app/styles/app.scss @@ -17,22 +17,6 @@ } } -.project-new-link { - cursor: pointer; - text-decoration: none; - padding: 10px; - color: #ffffff; - text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25); - background: #1563ff; - border: 1px solid #082766; - box-sizing: border-box; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-radius: 2px; - position: relative; - float: right; - top: -50px; -} - .project-overview, .project-new { margin: 0 10px; diff --git a/ui/core/app/templates/orgs/org/projects/index.hbs b/ui/core/app/templates/orgs/org/projects/index.hbs index 312844b0d..c2fb6fa59 100644 --- a/ui/core/app/templates/orgs/org/projects/index.hbs +++ b/ui/core/app/templates/orgs/org/projects/index.hbs @@ -1,13 +1,11 @@
+

{{t "resources.projects"}}

- - {{t 'titles.new'}} - + + + + {{t "titles.new"}} +
    {{#each @model as |project|}} From 4d987c129c4db9a4b8796ae4149c46f2338f0fab Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Fri, 29 May 2020 16:41:38 -0400 Subject: [PATCH 03/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20improve=20project?= =?UTF-8?q?s=20demo=20appearance?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../styles/rose/components/card/_link.scss | 5 +++++ .../styles/rose/components/header/_brand.scss | 1 + ui/core/app/templates/application.hbs | 19 +++++++++++++++++++ ui/core/config/environment.js | 2 +- ui/core/package.json | 1 + ui/core/translations/en-us.yaml | 5 +++++ 6 files changed, 32 insertions(+), 1 deletion(-) diff --git a/addons/rose/addon/styles/rose/components/card/_link.scss b/addons/rose/addon/styles/rose/components/card/_link.scss index 949734531..ba0e367e8 100644 --- a/addons/rose/addon/styles/rose/components/card/_link.scss +++ b/addons/rose/addon/styles/rose/components/card/_link.scss @@ -24,8 +24,13 @@ } &:hover { + $s: sizing.rems(s); // 12 + $xs: sizing.rems(xs); // 8 + $xxs: sizing.rems(xxs); // 4 border-color: var(--ui-gray); background-color: var(--ui-gray-subtler-5); + box-shadow: 0 $xs $s rgba(var(--stark-components), var(--opacity-3)), + 0 $xxs $xxs rgba(var(--stark-components), var(--opacity-4)); } &:active { diff --git a/addons/rose/addon/styles/rose/components/header/_brand.scss b/addons/rose/addon/styles/rose/components/header/_brand.scss index 671e38ffc..8d0438285 100644 --- a/addons/rose/addon/styles/rose/components/header/_brand.scss +++ b/addons/rose/addon/styles/rose/components/header/_brand.scss @@ -20,6 +20,7 @@ .rose-header-brand-text { @include type.type(m, normal); margin: 0; + margin-left: sizing.rems(s); white-space: nowrap; position: absolute; top: -1000px; diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs index ff8c801fe..9a5fa042c 100644 --- a/ui/core/app/templates/application.hbs +++ b/ui/core/app/templates/application.hbs @@ -2,6 +2,25 @@ + + + {{t 'dev.menu-item'}} + {{t 'dev.menu-item'}} + {{t 'dev.button-menu-item'}} + + {{t 'dev.section'}} + {{t 'dev.section'}} + + + + {{t 'dev.menu-item'}} + {{t 'dev.button-menu-item'}} + + diff --git a/ui/core/config/environment.js b/ui/core/config/environment.js index fef9febde..edff9773a 100644 --- a/ui/core/config/environment.js +++ b/ui/core/config/environment.js @@ -41,7 +41,7 @@ module.exports = function (environment) { 'frame-src': ["'self'"], 'font-src': ["'self'"], 'connect-src': ["'self'"], - 'img-src': ["'self'"], + 'img-src': ["'self'", "data:"], 'style-src': ["'self'"], 'media-src': ["'self'"], 'manifest-src': ["'self'"], diff --git a/ui/core/package.json b/ui/core/package.json index 2b89fa8a8..0029a7423 100644 --- a/ui/core/package.json +++ b/ui/core/package.json @@ -60,6 +60,7 @@ "ember-intl": "^5.1.1", "ember-load-initializers": "^2.1.1", "ember-maybe-import-regenerator": "^0.1.6", + "ember-modifier": "^1.0.3", "ember-page-title": "^5.2.1", "ember-qunit": "^4.6.0", "ember-resolver": "^7.0.0", diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml index 0e2b062ad..4487f5698 100644 --- a/ui/core/translations/en-us.yaml +++ b/ui/core/translations/en-us.yaml @@ -10,3 +10,8 @@ form: label: name: Name description: Description +dev: + default-org: Default Org + menu-item: Menu item + button-menu-item: Button menu item + section: Section From a6c3bbdd0310cdcb417f8b7124b03a8754cd15fc Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Fri, 29 May 2020 16:53:29 -0400 Subject: [PATCH 04/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20improve=20sidebar?= =?UTF-8?q?=20appearance?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/addon/styles/rose/components/layout/_index.scss | 4 +++- ui/core/app/styles/app.scss | 9 ++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss index 958cc197d..909cdbc83 100644 --- a/addons/rose/addon/styles/rose/components/layout/_index.scss +++ b/addons/rose/addon/styles/rose/components/layout/_index.scss @@ -1,3 +1,4 @@ +@use '../../variables/sizing'; @use '../../variables/media'; .rose-layout-page { @@ -6,7 +7,7 @@ 'header header header header' 'sidebar main main main'; // Define static grid column for sidebar - grid-template-columns: 12rem auto 1fr; + grid-template-columns: 16rem auto 1fr; grid-template-rows: auto 1fr; height: 100vh; } @@ -21,6 +22,7 @@ .rose-layout-sidebar { grid-area: sidebar; + border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1); } @media (max-width: media.width(small)) { diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss index d7fe5dd9a..a771edd48 100644 --- a/ui/core/app/styles/app.scss +++ b/ui/core/app/styles/app.scss @@ -1,8 +1,10 @@ +@use 'rose/variables/sizing'; + @import 'rose'; .projects-overview { - margin: 0 10px; - + margin: sizing.rems(l); + .projects { display: flex; padding: 20px 0; @@ -19,7 +21,8 @@ .project-overview, .project-new { - margin: 0 10px; + margin: sizing.rems(l); + .breadcrumbs, .breadcrumbs a { color: #6f7682; From c4c25e9b8fea73530ac92140dde9ebcd5a631cc1 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Fri, 29 May 2020 17:00:42 -0400 Subject: [PATCH 05/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20more=20visual=20e?= =?UTF-8?q?nhancements?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../styles/rose/components/form/_input.scss | 2 +- .../styles/rose/components/form/_select.scss | 2 +- ui/core/app/templates/application.hbs | 4 ++-- ui/core/public/logo-hashi.svg | 24 +++++++++++++++++++ 4 files changed, 28 insertions(+), 4 deletions(-) create mode 100644 ui/core/public/logo-hashi.svg diff --git a/addons/rose/addon/styles/rose/components/form/_input.scss b/addons/rose/addon/styles/rose/components/form/_input.scss index c5cd9f8cb..6c0186b50 100644 --- a/addons/rose/addon/styles/rose/components/form/_input.scss +++ b/addons/rose/addon/styles/rose/components/form/_input.scss @@ -2,7 +2,7 @@ @use '../../utilities/type'; .rose-form-input { - margin-bottom: sizing.rems(l); + margin-bottom: sizing.rems(m); .rose-form-input-label { @include type.type(s, semibold); diff --git a/addons/rose/addon/styles/rose/components/form/_select.scss b/addons/rose/addon/styles/rose/components/form/_select.scss index a6293b4f0..f0bdf9f04 100644 --- a/addons/rose/addon/styles/rose/components/form/_select.scss +++ b/addons/rose/addon/styles/rose/components/form/_select.scss @@ -2,7 +2,7 @@ @use '../../utilities/type'; .rose-form-select { - margin-bottom: sizing.rems(l); + margin-bottom: sizing.rems(m); .rose-form-select-label { @include type.type(s, semibold); diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs index 9a5fa042c..b94954380 100644 --- a/ui/core/app/templates/application.hbs +++ b/ui/core/app/templates/application.hbs @@ -1,14 +1,14 @@ - + {{t 'dev.menu-item'}} {{t 'dev.menu-item'}} {{t 'dev.button-menu-item'}} - {{t 'dev.section'}} + {{t 'dev.section'}} {{t 'dev.section'}} diff --git a/ui/core/public/logo-hashi.svg b/ui/core/public/logo-hashi.svg new file mode 100644 index 000000000..0f07cf263 --- /dev/null +++ b/ui/core/public/logo-hashi.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + From 76fefca1c7789325c787b3202f7966bb7f832070 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Fri, 29 May 2020 19:44:46 -0400 Subject: [PATCH 06/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20action=20no?= =?UTF-8?q?tifications=20on=20projects?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../addon/components/rose/notification.js | 2 +- .../components/rose/notification.stories.mdx | 4 +- .../styles/rose/components/_notification.scss | 2 +- .../rose/tests/dummy/app/templates/index.hbs | 2 +- ui/core/app/routes/orgs/org/projects/new.js | 11 ++- .../app/routes/orgs/org/projects/project.js | 13 ++- ui/core/app/styles/_notify.scss | 89 +++++++++++++++++++ ui/core/app/styles/app.scss | 3 +- ui/core/app/templates/application.hbs | 11 +++ ui/core/ember-cli-build.js | 3 + ui/core/package.json | 1 + ui/core/translations/en-us.yaml | 6 ++ yarn.lock | 8 ++ 13 files changed, 143 insertions(+), 12 deletions(-) create mode 100644 ui/core/app/styles/_notify.scss diff --git a/addons/rose/addon/components/rose/notification.js b/addons/rose/addon/components/rose/notification.js index 0ff646e2d..856dbc863 100644 --- a/addons/rose/addon/components/rose/notification.js +++ b/addons/rose/addon/components/rose/notification.js @@ -21,7 +21,7 @@ export default Component.extend({ let icon = 'info-circle-fill'; switch(this.style) { - case 'failure': + case 'error': icon = 'cancel-square-fill'; break; case 'success': diff --git a/addons/rose/addon/components/rose/notification.stories.mdx b/addons/rose/addon/components/rose/notification.stories.mdx index 04cd3f533..a20532158 100644 --- a/addons/rose/addon/components/rose/notification.stories.mdx +++ b/addons/rose/addon/components/rose/notification.stories.mdx @@ -8,7 +8,7 @@ import { text, boolean, select } from '@storybook/addon-knobs'; # Notification Notifications come in four semantic styles: `info` (default), `success`, -`warning`, and `failure`. Heading text is required. Additional block content +`warning`, and `error`. Heading text is required. Additional block content is optional. Notifications may be made dismissible by passing a `@dismiss` function into @@ -69,7 +69,7 @@ handler takes appropriate action and hides the notification. Careful now. + + + + {{message.text}} + + diff --git a/ui/core/ember-cli-build.js b/ui/core/ember-cli-build.js index 9528c38e4..cc31a1b6c 100644 --- a/ui/core/ember-cli-build.js +++ b/ui/core/ember-cli-build.js @@ -15,6 +15,9 @@ module.exports = function (defaults) { onlyIncluded: true, extension: 'scss', }, + emberNotify: { + importCss: false, + }, }); // Use `app.import` to add additional libraries to the generated diff --git a/ui/core/package.json b/ui/core/package.json index 0029a7423..cd4e42ab9 100644 --- a/ui/core/package.json +++ b/ui/core/package.json @@ -61,6 +61,7 @@ "ember-load-initializers": "^2.1.1", "ember-maybe-import-regenerator": "^0.1.6", "ember-modifier": "^1.0.3", + "ember-notify": "^6.0.0", "ember-page-title": "^5.2.1", "ember-qunit": "^4.6.0", "ember-resolver": "^7.0.0", diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml index 4487f5698..3abe145c0 100644 --- a/ui/core/translations/en-us.yaml +++ b/ui/core/translations/en-us.yaml @@ -1,11 +1,17 @@ actions: cancel: Cancel delete: Delete + dismiss: Dismiss save: Save resources: projects: Projects titles: new: New +states: + info: Info + success: Success + warning: Warning + error: Error form: label: name: Name diff --git a/yarn.lock b/yarn.lock index 0f49a405a..b5270240f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7815,6 +7815,14 @@ ember-modifier@^1.0.3: ember-cli-string-utils "^1.1.0" ember-modifier-manager-polyfill "^1.2.0" +ember-notify@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/ember-notify/-/ember-notify-6.0.0.tgz#f92978e3452934f7c9b70d76ad2ec62bf072495a" + integrity sha512-2ewX5xwkGyZtkRRlgT/Tam5PaxGy78IoXltwt4s8roEam1esXNHfafzycvJwcuX7Hgrwr7LlTpmKP+81vWT3QQ== + dependencies: + ember-cli-babel "^7.7.3" + ember-cli-htmlbars "^3.0.1" + ember-page-title@^5.2.1: version "5.2.1" resolved "https://registry.yarnpkg.com/ember-page-title/-/ember-page-title-5.2.1.tgz#12261e010bec96af6200cd132fe4068e717ccbec" From 5e3b3ae92284ea4597a47637f434f46460e84444 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Sat, 30 May 2020 12:42:10 -0400 Subject: [PATCH 07/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20primary=20n?= =?UTF-8?q?av=20component=20for=20sidebar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/addon/components/rose/nav/primary.js | 11 + .../components/rose/nav/primary.stories.mdx | 34 ++ .../addon/styles/rose/components/_index.scss | 1 + .../styles/rose/components/nav/_index.scss | 1 + .../styles/rose/components/nav/_primary.scss | 40 ++ .../styles/rose/variables/color/_css.scss | 2 + .../templates/components/rose/nav/primary.hbs | 17 + .../rose/app/components/rose/nav/primary.js | 1 + .../rose/tests/dummy/app/templates/index.hbs | 367 +++++++++--------- .../components/rose/nav/primary-test.js | 34 ++ ui/core/app/styles/app.scss | 4 + ui/core/app/templates/application.hbs | 10 +- ui/core/translations/en-us.yaml | 2 + 13 files changed, 347 insertions(+), 177 deletions(-) create mode 100644 addons/rose/addon/components/rose/nav/primary.js create mode 100644 addons/rose/addon/components/rose/nav/primary.stories.mdx create mode 100644 addons/rose/addon/styles/rose/components/nav/_index.scss create mode 100644 addons/rose/addon/styles/rose/components/nav/_primary.scss create mode 100644 addons/rose/addon/templates/components/rose/nav/primary.hbs create mode 100644 addons/rose/app/components/rose/nav/primary.js create mode 100644 addons/rose/tests/integration/components/rose/nav/primary-test.js diff --git a/addons/rose/addon/components/rose/nav/primary.js b/addons/rose/addon/components/rose/nav/primary.js new file mode 100644 index 000000000..47266ffef --- /dev/null +++ b/addons/rose/addon/components/rose/nav/primary.js @@ -0,0 +1,11 @@ +import Component from '@ember/component'; +import layout from '../../../templates/components/rose/nav/primary'; +import ComponentAutoId from '../../../mixins/component-auto-id'; + +/** + * A simple navigation component intended for the sidebar layout region. + */ +export default Component.extend(ComponentAutoId, { + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/nav/primary.stories.mdx b/addons/rose/addon/components/rose/nav/primary.stories.mdx new file mode 100644 index 000000000..36e0e4d4c --- /dev/null +++ b/addons/rose/addon/components/rose/nav/primary.stories.mdx @@ -0,0 +1,34 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; +import { action } from '@storybook/addon-actions'; +import { text, boolean, select } from '@storybook/addon-knobs'; + + + +# Primary Navigation + +A simple navigation component intended for use in the sidebar layout region. + + + {{ + template: hbs` + + Item Name + Item Name + + `, + context: { + title: text('title', 'Title'), + }, + }} + + +_Note_: do not assign the `active` class directly. This is done by the link +component automatically. We use it in this story for illustrative purposes. + +```htmlbars + + Item Name + Item Name + +``` diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss index bbd2ebcda..ec7bd22af 100644 --- a/addons/rose/addon/styles/rose/components/_index.scss +++ b/addons/rose/addon/styles/rose/components/_index.scss @@ -4,3 +4,4 @@ @import 'layout'; @import 'notification'; @import 'card'; +@import 'nav'; diff --git a/addons/rose/addon/styles/rose/components/nav/_index.scss b/addons/rose/addon/styles/rose/components/nav/_index.scss new file mode 100644 index 000000000..77d16beb5 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/nav/_index.scss @@ -0,0 +1 @@ +@import "primary"; diff --git a/addons/rose/addon/styles/rose/components/nav/_primary.scss b/addons/rose/addon/styles/rose/components/nav/_primary.scss new file mode 100644 index 000000000..e91f6de8f --- /dev/null +++ b/addons/rose/addon/styles/rose/components/nav/_primary.scss @@ -0,0 +1,40 @@ +@use '../../variables/sizing'; +@use '../../utilities/type'; + +.rose-nav-primary { + $threePX: sizing.rems(xxxs) + sizing.rems(xxxxs); + + .rose-nav-title { + @include type.type(xs, semibold); + display: block; + color: var(--ui-gray); + text-transform: uppercase; + $lineHeight: 20 / 12; + line-height: $lineHeight; + padding: 0 sizing.rems(m); + margin-bottom: $threePX; + border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); + } + + .rose-nav-link { + @include type.type(s); + display: block; + color: var(--stark); + $lineHeight: 36 / 14; + line-height: $lineHeight; + text-decoration: none; + padding: 0 sizing.rems(m); + border-right: $threePX solid transparent; + + &.active { + color: var(--action); + border-color: currentColor; + } + + &:hover { + text-decoration: underline; + color: var(--action); + background-color: var(--action-subtler-1h); + } + } +} diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss index ca6df5c3d..a0644f2e4 100644 --- a/addons/rose/addon/styles/rose/variables/color/_css.scss +++ b/addons/rose/addon/styles/rose/variables/color/_css.scss @@ -56,6 +56,7 @@ --success-starker-1: #{color(green, 800)}; --action-subtler-2: #{color(blue, 010)}; + --action-subtler-1h: #{color(blue, 050)}; --action-subtler-1: #{color(blue, 100)}; --action: #{color(blue)}; --action-starker-1: #{color(blue, 700)}; @@ -115,6 +116,7 @@ --success-starker-1: #{color(green, 200)}; --action-subtler-2: #{color(blue, 900)}; + --action-subtler-1h: #{color(blue, 800)}; --action-subtler-1: #{color(blue, 800)}; --action: #{color(blue)}; --action-starker-1: #{color(blue, 300)}; diff --git a/addons/rose/addon/templates/components/rose/nav/primary.hbs b/addons/rose/addon/templates/components/rose/nav/primary.hbs new file mode 100644 index 000000000..dd0406587 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/nav/primary.hbs @@ -0,0 +1,17 @@ + diff --git a/addons/rose/app/components/rose/nav/primary.js b/addons/rose/app/components/rose/nav/primary.js new file mode 100644 index 000000000..adaf57f51 --- /dev/null +++ b/addons/rose/app/components/rose/nav/primary.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/nav/primary'; \ No newline at end of file diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index e47846e50..0eb142a9b 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -1,187 +1,202 @@ - + + + - + - - - Menu item - Menu item - Button menu item - - Section - Section - + + + Menu item + Menu item + Button menu item + + Section + Section + - - + + Menu item + Menu item + Button menu item + + + + + + + + + Item Name + Item Name + Item Name + Item Name + + + + + + Dummy app index template + + - Menu item - Menu item - Button menu item - - + An error occurred. + - +

    Icon

    + + + + +

    Button

    + Primary +
    + Primary +
    + + Secondary +
    + Secondary +
    + +

    Form

    + + +

    Inputs

    + + + + + +

    Textareas

    + + + + + +

    Selects

    + + + Choose an option + Value 1 + Value 2 + Value 3 + + + + + Choose an option + + -Dummy app index template +

    Radio Group

    + + + + + - - An error occurred. - +

    Checkboxes

    + + + + + -

    Icon

    - - - + +     -

    Button

    -Primary -
    -Primary -
    - -Secondary -
    -Secondary -
    - -

    Form

    - - -

    Inputs

    - - - - - -

    Textareas

    - - - - - -

    Selects

    - - - Choose an option - Value 1 - Value 2 - Value 3 - - - - - Choose an option - - - - -

    Radio Group

    - - - - - - -

    Checkboxes

    - - - - - - - -     - - - - + + + + + diff --git a/addons/rose/tests/integration/components/rose/nav/primary-test.js b/addons/rose/tests/integration/components/rose/nav/primary-test.js new file mode 100644 index 000000000..20229e9e3 --- /dev/null +++ b/addons/rose/tests/integration/components/rose/nav/primary-test.js @@ -0,0 +1,34 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, find } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; + +module('Integration | Component | rose/nav/primary', function(hooks) { + setupRenderingTest(hooks); + + test('it renders', async function(assert) { + assert.expect(2) + await render(hbs` + + Item Name + + `); + assert.equal(find('.rose-nav-title').textContent.trim(), 'Title'); + assert.equal(find('.rose-nav-link').textContent.trim(), 'Item Name'); + }); + + test('it associates title with nav via aria-labelledby', async function (assert) { + assert.expect(2) + await render(hbs` + + Item Name + + `); + const el = find('.rose-nav-primary'); + const id = el.id; + const titleId = `title-${id}`; + const titleEl = find('.rose-nav-title'); + assert.equal(titleEl.id, titleId); + assert.equal(el.getAttribute('aria-labelledby').trim(), titleId); + }); +}); diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss index ae92ab2d8..d04a9ed2b 100644 --- a/ui/core/app/styles/app.scss +++ b/ui/core/app/styles/app.scss @@ -3,6 +3,10 @@ @import 'rose'; @import 'notify'; +.rose-nav-primary { + margin-top: sizing.rems(xxl); +} + .projects-overview { margin: sizing.rems(l); diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs index 4a6e12e89..a3f55929f 100644 --- a/ui/core/app/templates/application.hbs +++ b/ui/core/app/templates/application.hbs @@ -29,7 +29,15 @@ {{outlet}} - + + + {{t 'dev.item-name'}} + {{t 'dev.item-name'}} + {{t 'dev.item-name'}} + {{t 'dev.item-name'}} + + + diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml index 3abe145c0..ca4bc7961 100644 --- a/ui/core/translations/en-us.yaml +++ b/ui/core/translations/en-us.yaml @@ -21,3 +21,5 @@ dev: menu-item: Menu item button-menu-item: Button menu item section: Section + title: Title + item-name: Item Name From f8e2b79bbe23b9535d1b3cc8237636e3a4edb846 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Mon, 1 Jun 2020 09:42:30 -0400 Subject: [PATCH 08/11] chore: remove unnecessary links --- ui/core/app/templates/application.hbs | 2 -- 1 file changed, 2 deletions(-) diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs index a3f55929f..f89c94b7c 100644 --- a/ui/core/app/templates/application.hbs +++ b/ui/core/app/templates/application.hbs @@ -33,8 +33,6 @@ {{t 'dev.item-name'}} {{t 'dev.item-name'}} - {{t 'dev.item-name'}} - {{t 'dev.item-name'}} From 3baaffbe69eeb1ecabf8bc59868b0d986da310f2 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Mon, 1 Jun 2020 15:57:15 -0400 Subject: [PATCH 09/11] chore: minor ux improvements --- ui/core/app/routes/orgs/org/projects/new.js | 4 ++-- ui/core/app/routes/orgs/org/projects/project.js | 4 ++-- ui/core/app/styles/app.scss | 12 ++++++++++++ 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/ui/core/app/routes/orgs/org/projects/new.js b/ui/core/app/routes/orgs/org/projects/new.js index 02252e1f1..23012cbfa 100644 --- a/ui/core/app/routes/orgs/org/projects/new.js +++ b/ui/core/app/routes/orgs/org/projects/new.js @@ -6,7 +6,7 @@ export default class OrgsOrgProjectsNewRoute extends Route { // =services @service notify; - + // =methods /** @@ -44,7 +44,7 @@ export default class OrgsOrgProjectsNewRoute extends Route { this.notify.success('Project created.'); } catch (e) { // TODO: replace with translated strings - this.notify.error('Project could not be created.'); + this.notify.error('Project could not be created.', {closeAfter: null}); } } } diff --git a/ui/core/app/routes/orgs/org/projects/project.js b/ui/core/app/routes/orgs/org/projects/project.js index c352475a8..a6b9947bf 100644 --- a/ui/core/app/routes/orgs/org/projects/project.js +++ b/ui/core/app/routes/orgs/org/projects/project.js @@ -52,7 +52,7 @@ export default class OrgsOrgProjectsProjectRoute extends Route { this.notify.success('Save succeeded.'); } catch (e) { // TODO: replace with translated strings - this.notify.error('An error occurred.'); + this.notify.error('An error occurred.', {closeAfter: null}); } } @@ -69,7 +69,7 @@ export default class OrgsOrgProjectsProjectRoute extends Route { this.notify.success('Deleted project succesfully.'); } catch (e) { // TODO: replace with translated strings - this.notify.error('An error occurred.'); + this.notify.error('An error occurred.', {closeAfter: null}); } } } diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss index d04a9ed2b..64fed4405 100644 --- a/ui/core/app/styles/app.scss +++ b/ui/core/app/styles/app.scss @@ -7,6 +7,18 @@ margin-top: sizing.rems(xxl); } +.rose-form { + width: 66%; + + .rose-form-input { + width: 100%; + + .rose-form-input-field { + width: 100%; + } + } +} + .projects-overview { margin: sizing.rems(l); From ba095fb0bea9db5e3e70c9799355d1cfc3cbdd82 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Mon, 1 Jun 2020 16:22:06 -0400 Subject: [PATCH 10/11] fix: fix broken page titles --- ui/core/app/templates/application.hbs | 5 ++++- ui/core/app/templates/orgs/org/projects.hbs | 2 ++ ui/core/app/templates/orgs/org/projects/new.hbs | 2 ++ ui/core/app/templates/orgs/org/projects/project.hbs | 2 ++ 4 files changed, 10 insertions(+), 1 deletion(-) diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs index f89c94b7c..d9bc7b05e 100644 --- a/ui/core/app/templates/application.hbs +++ b/ui/core/app/templates/application.hbs @@ -1,3 +1,7 @@ + + +{{title (app-name)}} + @@ -25,7 +29,6 @@ - {{title (app-name)}} {{outlet}} diff --git a/ui/core/app/templates/orgs/org/projects.hbs b/ui/core/app/templates/orgs/org/projects.hbs index c24cd6895..1f709c7f7 100644 --- a/ui/core/app/templates/orgs/org/projects.hbs +++ b/ui/core/app/templates/orgs/org/projects.hbs @@ -1 +1,3 @@ +{{title (t "resources.projects")}} + {{outlet}} diff --git a/ui/core/app/templates/orgs/org/projects/new.hbs b/ui/core/app/templates/orgs/org/projects/new.hbs index 8a101b818..920983b02 100644 --- a/ui/core/app/templates/orgs/org/projects/new.hbs +++ b/ui/core/app/templates/orgs/org/projects/new.hbs @@ -1,3 +1,5 @@ +{{title (t "titles.new")}} +
    {{t "resources.projects"}} diff --git a/ui/core/app/templates/orgs/org/projects/project.hbs b/ui/core/app/templates/orgs/org/projects/project.hbs index 625c499a6..4c360b74c 100644 --- a/ui/core/app/templates/orgs/org/projects/project.hbs +++ b/ui/core/app/templates/orgs/org/projects/project.hbs @@ -1,3 +1,5 @@ +{{title @model.name}} +
    {{t "resources.projects"}} From a9a87d948c456e1e2454faee9f0dc2553a367272 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 4 Jun 2020 12:23:06 -0400 Subject: [PATCH 11/11] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20rename=20to=20?= =?UTF-8?q?sidebar=20nav;=20tweak=20test?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/nav/{primary.js => sidebar.js} | 2 +- .../{primary.stories.mdx => sidebar.stories.mdx} | 14 +++++++------- .../addon/styles/rose/components/nav/_index.scss | 2 +- .../nav/{_primary.scss => _sidebar.scss} | 2 +- .../rose/nav/{primary.hbs => sidebar.hbs} | 2 +- addons/rose/app/components/rose/nav/primary.js | 1 - addons/rose/app/components/rose/nav/sidebar.js | 1 + addons/rose/tests/dummy/app/templates/index.hbs | 4 ++-- .../rose/nav/{primary-test.js => sidebar-test.js} | 15 +++++++-------- ui/core/app/styles/app.scss | 2 +- ui/core/app/templates/application.hbs | 4 ++-- 11 files changed, 24 insertions(+), 25 deletions(-) rename addons/rose/addon/components/rose/nav/{primary.js => sidebar.js} (79%) rename addons/rose/addon/components/rose/nav/{primary.stories.mdx => sidebar.stories.mdx} (74%) rename addons/rose/addon/styles/rose/components/nav/{_primary.scss => _sidebar.scss} (97%) rename addons/rose/addon/templates/components/rose/nav/{primary.hbs => sidebar.hbs} (91%) delete mode 100644 addons/rose/app/components/rose/nav/primary.js create mode 100644 addons/rose/app/components/rose/nav/sidebar.js rename addons/rose/tests/integration/components/rose/nav/{primary-test.js => sidebar-test.js} (71%) diff --git a/addons/rose/addon/components/rose/nav/primary.js b/addons/rose/addon/components/rose/nav/sidebar.js similarity index 79% rename from addons/rose/addon/components/rose/nav/primary.js rename to addons/rose/addon/components/rose/nav/sidebar.js index 47266ffef..40b8900e4 100644 --- a/addons/rose/addon/components/rose/nav/primary.js +++ b/addons/rose/addon/components/rose/nav/sidebar.js @@ -1,5 +1,5 @@ import Component from '@ember/component'; -import layout from '../../../templates/components/rose/nav/primary'; +import layout from '../../../templates/components/rose/nav/sidebar'; import ComponentAutoId from '../../../mixins/component-auto-id'; /** diff --git a/addons/rose/addon/components/rose/nav/primary.stories.mdx b/addons/rose/addon/components/rose/nav/sidebar.stories.mdx similarity index 74% rename from addons/rose/addon/components/rose/nav/primary.stories.mdx rename to addons/rose/addon/components/rose/nav/sidebar.stories.mdx index 36e0e4d4c..353cf0e86 100644 --- a/addons/rose/addon/components/rose/nav/primary.stories.mdx +++ b/addons/rose/addon/components/rose/nav/sidebar.stories.mdx @@ -3,19 +3,19 @@ import { hbs } from 'ember-cli-htmlbars'; import { action } from '@storybook/addon-actions'; import { text, boolean, select } from '@storybook/addon-knobs'; - + -# Primary Navigation +# Sidebar Navigation A simple navigation component intended for use in the sidebar layout region. - {{ + {{ template: hbs` - + Item Name Item Name - + `, context: { title: text('title', 'Title'), @@ -27,8 +27,8 @@ _Note_: do not assign the `active` class directly. This is done by the link component automatically. We use it in this story for illustrative purposes. ```htmlbars - + Item Name Item Name - + ``` diff --git a/addons/rose/addon/styles/rose/components/nav/_index.scss b/addons/rose/addon/styles/rose/components/nav/_index.scss index 77d16beb5..0abffa8bd 100644 --- a/addons/rose/addon/styles/rose/components/nav/_index.scss +++ b/addons/rose/addon/styles/rose/components/nav/_index.scss @@ -1 +1 @@ -@import "primary"; +@import "sidebar"; diff --git a/addons/rose/addon/styles/rose/components/nav/_primary.scss b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss similarity index 97% rename from addons/rose/addon/styles/rose/components/nav/_primary.scss rename to addons/rose/addon/styles/rose/components/nav/_sidebar.scss index e91f6de8f..7dae497d6 100644 --- a/addons/rose/addon/styles/rose/components/nav/_primary.scss +++ b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss @@ -1,7 +1,7 @@ @use '../../variables/sizing'; @use '../../utilities/type'; -.rose-nav-primary { +.rose-nav-sidebar { $threePX: sizing.rems(xxxs) + sizing.rems(xxxxs); .rose-nav-title { diff --git a/addons/rose/addon/templates/components/rose/nav/primary.hbs b/addons/rose/addon/templates/components/rose/nav/sidebar.hbs similarity index 91% rename from addons/rose/addon/templates/components/rose/nav/primary.hbs rename to addons/rose/addon/templates/components/rose/nav/sidebar.hbs index dd0406587..40e3e9eaf 100644 --- a/addons/rose/addon/templates/components/rose/nav/primary.hbs +++ b/addons/rose/addon/templates/components/rose/nav/sidebar.hbs @@ -1,6 +1,6 @@