Improved dashboard

hashicorp-forge · Oct 6, 2023 · 0f9cc0b · 0f9cc0b
1 parent 9b9105c
commit 0f9cc0b
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 182 deletions.
diff --git 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"
   >
     <div class="w-full">
       <div
@@ -14,7 +14,7 @@
           <ProductAvatar
             @productArea={{@doc.product}}
             @iconSize={{16}}
-            class="p-1.5 w-7 h-7 shrink-0"
+            class="h-7 w-7 shrink-0 p-1.5"
           />
           {{! Avatar }}
           <Person::Avatar
@@ -34,7 +34,7 @@
               <TruncatedText
                 @tagName="h4"
                 @startingBreakpoint="md"
-                class="text-display-200 font-semibold text-color-foreground-strong"
+                class="text-display-300 font-semibold text-color-foreground-strong"
                 data-test-doc-awaiting-review-number-and-title
               >
                 <span class="mr-0.5">
@@ -44,33 +44,21 @@
               </TruncatedText>
             </div>
 
-            {{! Email }}
             <div
-              class="my-1 flex w-full space-x-2 self-center md:my-0 md:ml-2 md:w-auto md:max-w-[40%]"
+              class="ml-3 flex items-center gap-1.5 text-body-100 leading-none"
             >
-              <TruncatedText
-                @startingBreakpoint="md"
-                class="w-full text-body-200"
-                data-test-doc-awaiting-review-owner
-              >
-                {{get @doc.owners 0}}
-              </TruncatedText>
+              <span>
+                {{@doc.docType}}
+              </span>
+              <span class="opacity-50">
+                ·
+              </span>
+              <span class="tag {{dasherize @doc.status}}">
+                {{@doc.status}}
+              </span>
             </div>
           </div>
         </div>
-
-        {{! Product & DocType }}
-        <div
-          class="absolute top-[3px] left-9 flex shrink-0 items-center space-x-1 md:relative md:top-0 md:left-0"
-        >
-          {{!-- <span class="mr-3 text-color-foreground-faint">
-            {{@doc.product}}
-          </span> --}}
-          <Hds::Badge
-            data-test-doc-awaiting-review-doctype-badge
-            @text={{@doc.docType}}
-          />
-        </div>
       </div>
     </div>
   </LinkTo>

diff --git a/web/app/components/doc/thumbnail-new.hbs b/web/app/components/doc/thumbnail-new.hbs
@@ -3,43 +3,63 @@
 >
   <div class="w-full overflow-hidden">
     <div class="flex w-full items-start gap-3">
-
+      {{! Thumbnail icon }}
+      {{! <div
+        class="relative mt-0.5 flex shrink-0 justify-center text-color-foreground-faint opacity-50"
+      >
+        <FlightIcon @name="file-text" />
+      </div> }}
       {{! Text }}
       <div class="w-full">
-        <h4 class="mb-1.5">
-          {{@title}}
-        </h4>
+
         <div class="flex items-center justify-between">
           <div class="flex items-center gap-1.5 overflow-hidden">
-            {{!-- <Person::Avatar
-              class="shrink-0"
-              @size="small"
-              @email=""
-              @imgURL={{@avatarURL}}
-            /> --}}
             {{#if (eq @status "Draft")}}{{/if}}
             {{!-- <Doc::State @state={{@status}} @hideProgress={{true}} /> --}}
-            <div class="flex gap-[3px]">
-              <span class="tag doctype">
+            <div class="flex items-center gap-1">
+              <ProductAvatar class="shrink-0" @productArea={{@product}} />
+              <Person::Avatar
+                class="shrink-0"
+                F
+                @size="small"
+                @email=""
+                @imgURL={{@avatarURL}}
+              />
+              <span class="tag doctype ml-1.5">
                 {{@docType}}
               </span>
+              <span class="text-color-foreground-disabled">
+                ·
+              </span>
               <span class="tag {{dasherize @status}}">
                 {{@status}}
               </span>
             </div>
           </div>
         </div>
+        <h4 class="mt-1.5 mb-1 truncate text-body-200">
+          {{@title}}
+        </h4>
+        <p class="text-body-100 text-color-foreground-faint">Modified 3 minutes
+          ago</p>
       </div>
 
-      {{! Thumbnail }}
-      <div class="relative flex shrink-0 justify-center">
-        <div class="doc-thumbnail w-9 self-start">
+      {{! Thumbnail w/ badge }}
+      {{!-- <div class="relative flex shrink-0 justify-center">
+        <div class="doc-thumbnail w-6 self-start">
           <img src="/images/document.png" class="h-auto w-full" />
           <div class="absolute bottom-0 left-0">
             <ProductAvatar @productArea={{@product}} @iconSize={{16}} />
           </div>
         </div>
-      </div>
+      </div> --}}
+
+      {{! Thumbnail w/o badge }}
+      {{! <div class="relative flex shrink-0 justify-center">
+        <div class="doc-thumbnail w-6 self-start">
+          <img src="/images/document.png" class="h-auto w-full" />
+        </div>
+      </div> }}
 
     </div>
   </div>

diff --git 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
 >
-  <img src="/images/document.png" class="w-full h-auto" />
+  <img src="/images/document.png" class="h-auto w-full" />
 
-  <div class="w-full h-full absolute">
+  <div class="absolute h-full w-full">
     {{#if this.isObsolete}}
       <Doc::FolderAffordance @isLarge={{@isLarge}} />
     {{/if}}

diff --git 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
@@ -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
@@ -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];
+    }
+  }
+}