From 0f9cc0b4e9fa11fc47d764d857a9b092bcc0be1a Mon Sep 17 00:00:00 2001 From: Jeff Daley Date: Fri, 6 Oct 2023 14:20:58 -0400 Subject: [PATCH] Improved dashboard --- .../dashboard/docs-awaiting-review/doc.hbs | 38 ++-- web/app/components/doc/thumbnail-new.hbs | 52 +++-- web/app/components/doc/thumbnail.hbs | 6 +- web/app/services/recently-viewed-docs.ts | 1 + .../header/active-filter-list-item.scss | 23 ++- web/app/styles/components/product-avatar.scss | 14 ++ web/app/templates/authenticated/dashboard.hbs | 194 ++++++------------ web/tailwind.config.js | 6 + 8 files changed, 152 insertions(+), 182 deletions(-) diff --git a/web/app/components/dashboard/docs-awaiting-review/doc.hbs b/web/app/components/dashboard/docs-awaiting-review/doc.hbs index efd944217..7937b2703 100644 --- a/web/app/components/dashboard/docs-awaiting-review/doc.hbs +++ b/web/app/components/dashboard/docs-awaiting-review/doc.hbs @@ -3,7 +3,7 @@ data-test-doc-awaiting-review-link @route="authenticated.document" @model={{@doc.objectID}} - class="group w-full overflow-hidden border-t border-color-border-faint pl-2 py-3 pr-6" + class="group w-full overflow-hidden border-t border-color-border-faint py-3 pl-2 pr-6" >
{{! Avatar }} @@ -44,33 +44,21 @@
- {{! Email }}
- - {{get @doc.owners 0}} - + + {{@doc.docType}} + + + · + + + {{@doc.status}} +
- - {{! Product & DocType }} -
- {{!-- - {{@doc.product}} - --}} - -
diff --git a/web/app/components/doc/thumbnail-new.hbs b/web/app/components/doc/thumbnail-new.hbs index 3232f167c..9262a3b71 100644 --- a/web/app/components/doc/thumbnail-new.hbs +++ b/web/app/components/doc/thumbnail-new.hbs @@ -3,43 +3,63 @@ >
- + {{! Thumbnail icon }} + {{!
+ +
}} {{! Text }}
-

- {{@title}} -

+
- {{!-- --}} {{#if (eq @status "Draft")}}{{/if}} {{!-- --}} -
- +
+ + + {{@docType}} + + · + {{@status}}
+

+ {{@title}} +

+

Modified 3 minutes + ago

- {{! Thumbnail }} -
-
+ {{! Thumbnail w/ badge }} + {{!--
+
-
+
--}} + + {{! Thumbnail w/o badge }} + {{!
+
+ +
+
}}
diff --git a/web/app/components/doc/thumbnail.hbs b/web/app/components/doc/thumbnail.hbs index 7f261e983..9786cfd66 100644 --- a/web/app/components/doc/thumbnail.hbs +++ b/web/app/components/doc/thumbnail.hbs @@ -3,12 +3,12 @@ class="doc-thumbnail {{if @isLarge 'large'}} {{if this.isObsolete 'obsolete'}} - bg-color-palette-neutral-100 rounded" + rounded bg-color-palette-neutral-100" ...attributes > - + -
+
{{#if this.isObsolete}} {{/if}} diff --git a/web/app/services/recently-viewed-docs.ts b/web/app/services/recently-viewed-docs.ts index 4609dd94d..c7f1f19af 100644 --- a/web/app/services/recently-viewed-docs.ts +++ b/web/app/services/recently-viewed-docs.ts @@ -36,6 +36,7 @@ export default class RecentlyViewedDocsService extends Service { get doubleAllRandomized() { assert("all should be set", this.all); + console.log(this.all); const all = this.all; const doubleAll = all.concat(all); return doubleAll.sort(() => Math.random() - 0.5); diff --git a/web/app/styles/components/header/active-filter-list-item.scss b/web/app/styles/components/header/active-filter-list-item.scss index fad52c07b..f03563de2 100644 --- a/web/app/styles/components/header/active-filter-list-item.scss +++ b/web/app/styles/components/header/active-filter-list-item.scss @@ -1,25 +1,32 @@ .tag { - @apply flex items-center rounded border border-color-border-primary bg-color-surface-interactive py-[3px] px-1.5 text-color-foreground-primary no-underline; + @apply text-body-100; - &:hover { - @apply bg-color-surface-interactive-hover; + &.in-review { + @apply text-color-foreground-highlight-on-surface; } - &.in-review { - @apply border-transparent bg-color-surface-highlight text-color-foreground-highlight; + &.approved { + @apply text-color-foreground-success-on-surface; } &.draft { - @apply border-transparent bg-color-palette-neutral-400 text-color-page-primary; + // @apply text-color-foreground-faint; } &.doctype { - @apply border-transparent bg-color-palette-neutral-100; + } + + & + .tag { + @apply ml-1.5; } } .filter-tag { - @apply my-0.5 mr-1 rounded-full py-0.5 pl-2 pr-3.5; + @apply my-0.5 mr-1 flex items-center rounded-full border border-color-border-primary bg-color-surface-interactive py-0.5 pl-2 pr-3.5 text-color-foreground-primary; + + &:hover { + @apply bg-color-surface-interactive-hover; + } .flight-icon { @apply mr-1 scale-75; diff --git a/web/app/styles/components/product-avatar.scss b/web/app/styles/components/product-avatar.scss index b3bed14b4..a46049c83 100644 --- a/web/app/styles/components/product-avatar.scss +++ b/web/app/styles/components/product-avatar.scss @@ -9,3 +9,17 @@ @apply text-[9px]; } } + +.doc-thumbnail { + .letter-avatar { + @apply text-[13px]; + + &.letter-count-2 { + @apply text-[11px]; + } + + &.letter-count-3 { + @apply text-[11px]; + } + } +} diff --git a/web/app/templates/authenticated/dashboard.hbs b/web/app/templates/authenticated/dashboard.hbs index 52444302e..2ead8276c 100644 --- a/web/app/templates/authenticated/dashboard.hbs +++ b/web/app/templates/authenticated/dashboard.hbs @@ -18,7 +18,7 @@ class="w-full overflow-hidden border-r border-r-color-border-faint pt-2 pb-10" > - {{#if @moXdel}} + {{#if @model}}

- Latest @ HashiCorp + Here's the Latest

    {{#each this.recentDocs.doubleAllRandomized as |r|}}
  1. -
    +
    -
    +
    {{r.doc.docType}} - | + · - - {{r.doc.docNumber}} + + {{r.doc.status}} - | + · {{r.doc.product}}
    - + + + {{time-ago r.doc.createdTime}} + + {{!-- --}}

    {{#if r.doc.summary}} -

    +

    {{r.doc.summary}}

    {{/if}}
    -
    +
    - + {{get r.doc.owners 0}} - - - {{time-ago r.doc.createdTime}} -
    @@ -128,9 +128,9 @@

    -
    +
    -
    +

    {{#if true}}
      - {{!-- {{! PROJECT: hidden }} -
    • -
      -
      -

      Listbox Rollout (Ember)

      - -
      -
      -
      -
      - -

      - HERMES-045 -

      -
      -
      -
      - - 2 -
      -
      - {{! }} -
      -
      • --}} + {{! PROJECT: }} +
    • + {{!
      + +
      }} +
      +
      + + + + +
      + {{! }} + Project +
      +
      +
      +

      Listbox Rollout (Ember)

      +
      +
      +
      +
      + +

      + HERMES-045 +

      +
      + +
      + +
      +
      +
      • - {{#if true}} - - + See older - - {{/if}} {{else}}
      @@ -222,80 +230,6 @@ {{/if}}
      - {{! Currently hidden }} -

    diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 5f6c9c9cd..b978d7cc1 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -67,6 +67,7 @@ module.exports = { "var(--token-color-surface-interactive-active)", "color-surface-primary": "var(--token-color-surface-primary)", "color-surface-strong": "var(--token-color-surface-strong)", + "color-surface-success": "var(--token-color-surface-success)", "color-surface-warning": "var(--token-color-surface-warning)", // Border @@ -99,8 +100,13 @@ module.exports = { "color-foreground-high-contrast": "var(--token-color-foreground-high-contrast)", "color-foreground-highlight": "var(--token-color-foreground-highlight)", + "color-foreground-highlight-on-surface": + "var(--token-color-foreground-highlight-on-surface)", "color-foreground-primary": "var(--token-color-foreground-primary)", "color-foreground-strong": "var(--token-color-foreground-strong)", + "color-foreground-success": "var(--token-color-foreground-success)", + "color-foreground-success-on-surface": + "var(--token-color-foreground-success-on-surface)", "color-foreground-warning": "var(--token-color-foreground-warning)", "color-foreground-warning-on-surface": "var(--token-color-foreground-warning-on-surface)",