From 26b1632d4ddcb84f248c6ab6faef2883570a676a Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 1 Oct 2020 13:48:41 -0400 Subject: [PATCH 1/9] =?UTF-8?q?style:=20=F0=9F=92=84=20tweak=20the=20sideb?= =?UTF-8?q?ar=20to=20better=20align=20with=20design?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/addon/components/rose/nav/sidebar/index.hbs | 1 + .../addon/styles/rose/components/nav/_sidebar.scss | 12 +++++++++++- ui/core/app/styles/app.scss | 5 ++--- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/addons/rose/addon/components/rose/nav/sidebar/index.hbs b/addons/rose/addon/components/rose/nav/sidebar/index.hbs index 40e3e9eaf..28250c8d6 100644 --- a/addons/rose/addon/components/rose/nav/sidebar/index.hbs +++ b/addons/rose/addon/components/rose/nav/sidebar/index.hbs @@ -2,6 +2,7 @@ ...attributes class="rose-nav-sidebar" id={{this.id}} + title={{@title}} aria-labelledby={{if @title (concat "title-" this.id)}}> {{#if @title}} diff --git a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss index 010a3bd52..101f3753f 100644 --- a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss +++ b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss @@ -3,10 +3,20 @@ .rose-nav-sidebar { $threePX: sizing.rems(xxxs) + sizing.rems(xxxxs); + $yPadding: sizing.rems(xs); + padding-top: $yPadding; + padding-bottom: $yPadding; + border-bottom: sizing.rems(xxxxs) solid var(--ui-border-subtler-1); + + &:last-child { + border-bottom: 0; + } + + // TODO revisit the title .rose-nav-title { @include type.type(xs, semibold); - display: block; + display: none; color: var(--ui-gray); text-transform: uppercase; $lineHeight: 20 / 12; diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss index 108e7c619..fbdbea206 100644 --- a/ui/core/app/styles/app.scss +++ b/ui/core/app/styles/app.scss @@ -19,7 +19,6 @@ } .rose-nav-sidebar { - margin-bottom: sizing.rems(l); margin-top: sizing.rems(xxl); & + .rose-nav-sidebar { @@ -96,9 +95,9 @@ .copyable { .copyable-button { + margin: 0; + padding: 0 sizing.rems(xxs); position: relative; top: -2px; - padding: 0 sizing.rems(xxs); - margin: 0; } } From 816efec6ed3838b26c29144b3ac771c4f4821efa Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 1 Oct 2020 14:15:20 -0400 Subject: [PATCH 2/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20show=20login=20name?= =?UTF-8?q?=20in=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addons/auth/addon/authenticators/password.js | 9 +++++++-- ui/core/app/templates/application.hbs | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/addons/auth/addon/authenticators/password.js b/addons/auth/addon/authenticators/password.js index 7403eae65..aa0b13e87 100644 --- a/addons/auth/addon/authenticators/password.js +++ b/addons/auth/addon/authenticators/password.js @@ -93,19 +93,24 @@ export default class PasswordAuthenticator extends BaseAuthenticator { const authEndpointURL = this.buildAuthEndpointURL(options); const response = await fetch(authEndpointURL, { method: 'post', body }); const json = await response.json(); - return response.status < 400 ? resolve(this.normalizeData(json)) : reject(); + return response.status < 400 + ? resolve(this.normalizeData(json, login_name)) + : reject(); } /** * Normalizes the auth data. Adds convenience booleans depending on the * scope within which the session is authenticated: isGlobal, isOrg. + * If a `username` is provided, appends this to the data. * @param {object} data + * @param {string} username * @return {object} */ - normalizeData(data) { + normalizeData(data, username) { // Add booleans indicated the scope type data.isGlobal = (data?.scope?.type === 'global'); data.isOrg = (data?.scope?.type === 'org'); + if (username) data.username = username; return data; } diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs index 80472c19a..29dfe48eb 100644 --- a/ui/core/app/templates/application.hbs +++ b/ui/core/app/templates/application.hbs @@ -34,7 +34,7 @@ {{!-- From 9f43a4b276d36596a08ba9acf2f6bd045773e6af Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 1 Oct 2020 16:19:53 -0400 Subject: [PATCH 3/9] chore: tweak styles to align with design --- addons/rose/addon/styles/rose/components/card/_link.scss | 4 ++++ addons/rose/addon/styles/rose/components/header/_index.scss | 3 ++- addons/rose/addon/styles/rose/variables/color/_css.scss | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/addons/rose/addon/styles/rose/components/card/_link.scss b/addons/rose/addon/styles/rose/components/card/_link.scss index a62df13f8..c31ccbdbd 100644 --- a/addons/rose/addon/styles/rose/components/card/_link.scss +++ b/addons/rose/addon/styles/rose/components/card/_link.scss @@ -1,6 +1,8 @@ @use '../../variables/sizing'; @use '../../utilities/type'; +$xxxs: sizing.rems(xxxs); // 2 + .rose-card-link { @include type.type(s); border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); @@ -9,6 +11,8 @@ display: inline-flex; flex-direction: column; margin: 0 sizing.rems(m) sizing.rems(m) 0; + box-shadow: 0 $xxxs $xxxs rgba(var(--stark-components), var(--opacity-4)), + 0 $xxxs $xxxs rgba(var(--stark-components), var(--opacity-4)); a { text-decoration: none; diff --git a/addons/rose/addon/styles/rose/components/header/_index.scss b/addons/rose/addon/styles/rose/components/header/_index.scss index 6ba8aba30..f464a4f80 100644 --- a/addons/rose/addon/styles/rose/components/header/_index.scss +++ b/addons/rose/addon/styles/rose/components/header/_index.scss @@ -12,7 +12,8 @@ display: grid; grid-template-areas: 'brand nav utilities'; grid-template-columns: 0.01fr auto 1fr; - background: var(--black) linear-gradient(90deg, #191a1c 0%, #1b212d 100%); + background: var(--black); + box-shadow: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-border-subtler-1); } @media (max-width: media.width(small)) { diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss index cb000c5df..5c910e93a 100644 --- a/addons/rose/addon/styles/rose/variables/color/_css.scss +++ b/addons/rose/addon/styles/rose/variables/color/_css.scss @@ -83,7 +83,7 @@ @media (prefers-color-scheme: dark) { :root { // poles - --subtle: #{darken(color(ui-gray, 900), 3%)}; + --subtle: var(--black); --stark: #{color(ui-gray, 100)}; --stark-components: 255, 255, 255; From 5200f03417d561cf2a24e8caf42efab3833e4d14 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 1 Oct 2020 16:31:39 -0400 Subject: [PATCH 4/9] chore: generate more realistic scope IDs --- ui/core/mirage/factories/org.js | 3 --- ui/core/mirage/factories/project.js | 3 --- ui/core/mirage/factories/scope.js | 6 ++++++ 3 files changed, 6 insertions(+), 6 deletions(-) delete mode 100644 ui/core/mirage/factories/org.js delete mode 100644 ui/core/mirage/factories/project.js diff --git a/ui/core/mirage/factories/org.js b/ui/core/mirage/factories/org.js deleted file mode 100644 index fe119cba6..000000000 --- a/ui/core/mirage/factories/org.js +++ /dev/null @@ -1,3 +0,0 @@ -import factory from '../generated/factories/org'; - -export default factory.extend(); diff --git a/ui/core/mirage/factories/project.js b/ui/core/mirage/factories/project.js deleted file mode 100644 index 2a3aae2be..000000000 --- a/ui/core/mirage/factories/project.js +++ /dev/null @@ -1,3 +0,0 @@ -import factory from '../generated/factories/project'; - -export default factory.extend(); diff --git a/ui/core/mirage/factories/scope.js b/ui/core/mirage/factories/scope.js index d60486d15..e008c8249 100644 --- a/ui/core/mirage/factories/scope.js +++ b/ui/core/mirage/factories/scope.js @@ -1,10 +1,16 @@ import factory from '../generated/factories/scope'; import { trait } from 'ember-cli-mirage'; +import { random } from 'faker'; export default factory.extend({ type: 'global', + id() { + const id = new Array(10).fill(0).map(() => random.alphaNumeric()).join(''); + return `s_${id}`; + }, + withChildren: trait({ afterCreate(record, server) { if (record.type === 'global') { From f2d6960ad915981c777ac2d14c036122cf27a4ac Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 1 Oct 2020 16:40:55 -0400 Subject: [PATCH 5/9] chore: improve loading animation --- addons/rose/addon/styles/rose/components/header/_index.scss | 4 ++++ ui/core/app/styles/app.scss | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/addons/rose/addon/styles/rose/components/header/_index.scss b/addons/rose/addon/styles/rose/components/header/_index.scss index f464a4f80..8885c0207 100644 --- a/addons/rose/addon/styles/rose/components/header/_index.scss +++ b/addons/rose/addon/styles/rose/components/header/_index.scss @@ -14,6 +14,10 @@ grid-template-columns: 0.01fr auto 1fr; background: var(--black); box-shadow: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-border-subtler-1); + + @media (prefers-color-scheme: light) { + box-shadow: none; + } } @media (max-width: media.width(small)) { diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss index fbdbea206..052ca77c0 100644 --- a/ui/core/app/styles/app.scss +++ b/ui/core/app/styles/app.scss @@ -76,7 +76,7 @@ &::after { animation: gradient 1s linear infinite; background: repeating-linear-gradient(to right, var(--subtle), var(--subtle), var(--info), var(--subtle), var(--subtle)); - background-position: 0 100%; + background-position: -100% 0; background-size: 200% auto; content: ' '; height: 3px; @@ -86,7 +86,7 @@ top: 100%; @keyframes gradient { - 0% { background-position: 0 0; } + 0% { background-position: -100% 0; } 100% { background-position: -200% 0; } } } From b2052382a871a0f6a814b1c96aa102cd4a0e2df7 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 1 Oct 2020 16:51:16 -0400 Subject: [PATCH 6/9] fix: mock IDs should be deterministic --- ui/core/mirage/factories/scope.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/ui/core/mirage/factories/scope.js b/ui/core/mirage/factories/scope.js index e008c8249..1b3b868b1 100644 --- a/ui/core/mirage/factories/scope.js +++ b/ui/core/mirage/factories/scope.js @@ -6,9 +6,14 @@ export default factory.extend({ type: 'global', - id() { - const id = new Array(10).fill(0).map(() => random.alphaNumeric()).join(''); - return `s_${id}`; + /** + * Generates realistic-ish IDs while still being deterministic. + */ + id(i) { + let id = 'tv6fv3yz8p'; + if (i % 3) id = 'xk1i4dk50v'; + if (i % 2) id = 's9n819zgko'; + return `s_${id}${i}`; }, withChildren: trait({ From 7a4c6cf5fbb92fdfb708f1be5a49d847846d8dec Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 1 Oct 2020 17:38:47 -0400 Subject: [PATCH 7/9] chore: swap position of card description and ID --- ui/core/app/templates/scopes/scope/orgs/index.hbs | 4 ++-- ui/core/app/templates/scopes/scope/projects/index.hbs | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/core/app/templates/scopes/scope/orgs/index.hbs b/ui/core/app/templates/scopes/scope/orgs/index.hbs index ed79b4e04..f073d3dcf 100644 --- a/ui/core/app/templates/scopes/scope/orgs/index.hbs +++ b/ui/core/app/templates/scopes/scope/orgs/index.hbs @@ -30,8 +30,8 @@ {{#each @model as |org|}} diff --git a/ui/core/app/templates/scopes/scope/projects/index.hbs b/ui/core/app/templates/scopes/scope/projects/index.hbs index 0d05ddf30..5995e29fe 100644 --- a/ui/core/app/templates/scopes/scope/projects/index.hbs +++ b/ui/core/app/templates/scopes/scope/projects/index.hbs @@ -30,8 +30,8 @@ {{#each @model as |project|}} From 362d31ec4014ac227fdb144a0f08a5ad8a03e333 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 1 Oct 2020 17:42:55 -0400 Subject: [PATCH 8/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20prevent=20unnecessa?= =?UTF-8?q?ry=20auth-method=20loading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit which prevents unnecessary loading indicator jank --- .../app/routes/scopes/scope/authenticate.js | 22 +++++++++---------- ui/core/mirage/factories/scope.js | 1 - 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/ui/core/app/routes/scopes/scope/authenticate.js b/ui/core/app/routes/scopes/scope/authenticate.js index d011a6b45..883bbb704 100644 --- a/ui/core/app/routes/scopes/scope/authenticate.js +++ b/ui/core/app/routes/scopes/scope/authenticate.js @@ -9,6 +9,17 @@ export default class ScopesScopeAuthenticateRoute extends Route { // =methods + beforeModel() { + if (this.session.isAuthenticated) { + const scope = this.modelFor('scopes.scope'); + if (scope.isGlobal) { + this.transitionTo('scopes.scope.orgs'); + } else { + this.transitionTo('scopes.scope.projects'); + } + } + } + /** * Returns all auth methods for the current scope, along with the current * scope and all scopes (for org navigation). @@ -28,15 +39,4 @@ export default class ScopesScopeAuthenticateRoute extends Route { // }]) }); } - - redirect() { - if (this.session.isAuthenticated) { - const scope = this.modelFor('scopes.scope'); - if (scope.isGlobal) { - this.transitionTo('scopes.scope.orgs'); - } else { - this.transitionTo('scopes.scope.projects'); - } - } - } } diff --git a/ui/core/mirage/factories/scope.js b/ui/core/mirage/factories/scope.js index 1b3b868b1..a14dbc719 100644 --- a/ui/core/mirage/factories/scope.js +++ b/ui/core/mirage/factories/scope.js @@ -1,6 +1,5 @@ import factory from '../generated/factories/scope'; import { trait } from 'ember-cli-mirage'; -import { random } from 'faker'; export default factory.extend({ From 50b2a9cc8eab7d52a24be9b063f45fe3acd33437 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 1 Oct 2020 17:46:23 -0400 Subject: [PATCH 9/9] style: tweak sidebar selection style to be more apparent --- addons/rose/addon/styles/rose/components/nav/_sidebar.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss index 101f3753f..fcc29ca45 100644 --- a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss +++ b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss @@ -39,6 +39,7 @@ &.active { color: var(--action); border-color: currentColor; + background-color: var(--action-subtler-1h); } &:hover {