From 9f43a4b276d36596a08ba9acf2f6bd045773e6af Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 1 Oct 2020 16:19:53 -0400 Subject: [PATCH 1/7] 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 2/7] 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 3/7] 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 4/7] 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 5/7] 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 6/7] =?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 7/7] 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 {