Simplify choices with optional advanced customization

MuckRock · Dec 10, 2024 · f9804c7 · f9804c7
1 parent 11237d2
commit f9804c7
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 91 deletions.
diff --git a/src/langs/json/en.json b/src/langs/json/en.json
@@ -241,7 +241,6 @@
     "fieldsAnchor": "Fields",
     "fields": {
       "concise": "Concise",
-      "balanced": "Balanced",
       "detailed": "Detailed",
       "customize": "Customize",
       "access": "Access",
@@ -250,8 +249,7 @@
       "description": "Description",
       "projects": "Projects",
       "data": "Data",
-      "fullTitle": "Full Title",
-      "fullDescription": "Full Description"
+      "wrapTitle": "Wrap Title"
     }
   },
   "projects": {

diff --git a/src/lib/components/common/KV.svelte b/src/lib/components/common/KV.svelte
@@ -41,6 +41,7 @@
     color: var(--blue-5, #153359);
     border-color: var(--blue-2);
     background: var(--blue-1);
+    text-decoration: none;
   }
   .link.kv:hover {
     cursor: pointer;

diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
@@ -5,30 +5,6 @@ It's deliberately minimal and can be wrapped in other components to add addition
 
 If we're in an embed, we want to open links to documents in new tabs and hide the access label.
 -->
-<script lang="ts" context="module">
-  export interface VisibleFields {
-    access: boolean;
-    thumbnail: boolean;
-    meta: boolean;
-    description: boolean;
-    projects: boolean;
-    data: boolean;
-    fullTitle: boolean;
-    fullDescription: boolean;
-  }
-
-  export const defaultVisibleFields: VisibleFields = {
-    access: true,
-    thumbnail: true,
-    meta: true,
-    description: false,
-    projects: true,
-    data: false,
-    fullTitle: true,
-    fullDescription: false,
-  };
-</script>
-
 <script lang="ts">
   import type { Document, Project } from "$lib/api/types";
 
@@ -43,6 +19,10 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
   import { canonicalUrl, userOrgString } from "$lib/api/documents";
   import { canonicalUrl as projectUrl } from "$lib/api/projects";
   import { searchUrl, kv } from "$lib/utils/search";
+  import {
+    defaultVisibleFields,
+    type VisibleFields,
+  } from "./VisibleFields.svelte";
 
   export let document: Document;
   export let visibleFields: Partial<VisibleFields> = defaultVisibleFields;
@@ -81,7 +61,7 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
 
   <div class="document-info">
     <div class="head">
-      <h3 class="title" class:ellipsis={!visible.fullTitle}>
+      <h3 class="title" class:ellipsis={!visible.wrapTitle}>
         <a
           href={canonicalUrl(document).href}
           class="document-link title-link"
@@ -122,7 +102,7 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
       </p>
     {/if}
     {#if document.description && visible.description}
-      <p class="description" class:fullDescription={visible.fullDescription}>
+      <p class="description">
         {clean(document.description)}
       </p>
     {/if}
@@ -278,7 +258,7 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
   }
 
   .access {
-    flex: 0 0 8rem;
+    flex: 0 0 auto;
     font-size: var(--font-sm);
     transform: translateY(0.125em);
   }

diff --git a/src/lib/components/documents/VisibleFields.svelte b/src/lib/components/documents/VisibleFields.svelte
@@ -6,21 +6,9 @@
     description: boolean;
     projects: boolean;
     data: boolean;
-    fullTitle: boolean;
-    fullDescription: boolean;
+    wrapTitle: boolean;
   }
 
-  export const defaultVisibleFields: VisibleFields = {
-    access: true,
-    thumbnail: true,
-    meta: true,
-    description: false,
-    projects: true,
-    data: false,
-    fullTitle: true,
-    fullDescription: false,
-  };
-
   export const defaultViews: Array<{
     label: string;
     icon: typeof SvgComponent;
@@ -36,39 +24,25 @@
         description: false,
         projects: false,
         data: false,
-        fullTitle: true,
-        fullDescription: false,
-      },
-    },
-    {
-      label: "documentBrowser.fields.balanced",
-      icon: Rows24,
-      fields: {
-        access: true,
-        thumbnail: true,
-        meta: true,
-        description: false,
-        projects: true,
-        data: false,
-        fullTitle: true,
-        fullDescription: false,
+        wrapTitle: false,
       },
     },
     {
       label: "documentBrowser.fields.detailed",
-      icon: Note24,
+      icon: Rows24,
       fields: {
         access: true,
         thumbnail: true,
         meta: true,
         description: true,
         projects: true,
         data: true,
-        fullTitle: true,
-        fullDescription: false,
+        wrapTitle: true,
       },
     },
   ];
+
+  export const defaultVisibleFields = defaultViews[1]?.fields!;
 </script>
 
 <script lang="ts">
@@ -80,7 +54,6 @@
 
   import {
     ListUnordered24,
-    Note24,
     Paintbrush16,
     Rows24,
     type SvgComponent,
@@ -90,17 +63,18 @@
   import SidebarItem from "../sidebar/SidebarItem.svelte";
   import { remToPx } from "$lib/utils/layout";
 
-  const visibleFields = getContext<Writable<VisibleFields>>("visibleFields");
+  export let showAdvanced = false;
+  export let visibleFields: Writable<VisibleFields> =
+    getContext("visibleFields");
 
   const labels: Record<keyof VisibleFields, string> = {
     access: "documentBrowser.fields.access",
-    fullTitle: "documentBrowser.fields.fullTitle",
     meta: "documentBrowser.fields.meta",
     thumbnail: "documentBrowser.fields.thumbnail",
     description: "documentBrowser.fields.description",
     projects: "documentBrowser.fields.projects",
     data: "documentBrowser.fields.data",
-    fullDescription: "documentBrowser.fields.fullDescription",
+    wrapTitle: "documentBrowser.fields.wrapTitle",
   };
 
   let width: number;
@@ -125,20 +99,26 @@
       </div>
     {/each}
   </div>
-  <fieldset class="fields">
-    <legend>
-      <SidebarItem small>
-        <Paintbrush16 slot="start" height={14} width={14} />
-        {$_("documentBrowser.fields.customize")}
-      </SidebarItem>
-    </legend>
-    {#each Object.keys($visibleFields) as key}
-      <label class="field">
-        <input type="checkbox" name={key} bind:checked={$visibleFields[key]} />
-        <FieldLabel>{$_(labels[key])}</FieldLabel>
-      </label>
-    {/each}
-  </fieldset>
+  {#if showAdvanced}
+    <fieldset class="fields">
+      <legend>
+        <SidebarItem small>
+          <Paintbrush16 slot="start" height={14} width={14} />
+          {$_("documentBrowser.fields.customize")}
+        </SidebarItem>
+      </legend>
+      {#each Object.keys($visibleFields) as key}
+        <label class="field">
+          <input
+            type="checkbox"
+            name={key}
+            bind:checked={$visibleFields[key]}
+          />
+          <FieldLabel>{$_(labels[key])}</FieldLabel>
+        </label>
+      {/each}
+    </fieldset>
+  {/if}
 </div>
 
 <style>

diff --git a/src/lib/components/documents/stories/VisibleFields.stories.svelte b/src/lib/components/documents/stories/VisibleFields.stories.svelte
@@ -2,11 +2,12 @@
   import { Story, Template } from "@storybook/addon-svelte-csf";
   import VisibleFieldsComponent, {
     defaultVisibleFields,
+    defaultViews,
   } from "../VisibleFields.svelte";
 
   import { documentExpanded, data } from "@/test/fixtures/documents";
   import { setContext } from "svelte";
-  import { writable } from "svelte/store";
+  import { get, writable } from "svelte/store";
 
   export const meta = {
     title: "Components / Documents / Visible Fields",
@@ -19,28 +20,39 @@
 
 <script lang="ts">
   import DocumentListItem from "../DocumentListItem.svelte";
+  import Menu from "../../common/Menu.svelte";
 
-  const visibleFields = writable(defaultVisibleFields);
-  setContext("visibleFields", visibleFields);
+  const vF = writable(defaultVisibleFields);
+  setContext("visibleFields", vF);
 </script>
 
 <Template let:args>
   <div class="wrapper">
-    <VisibleFieldsComponent {...args} />
-    <DocumentListItem
-      document={{ ...documentExpanded, data }}
-      visibleFields={$visibleFields}
-    />
+    <Menu><VisibleFieldsComponent {...args} /></Menu>
+    <div class="item">
+      <DocumentListItem
+        document={{ ...documentExpanded, data }}
+        visibleFields={$vF}
+      />
+    </div>
   </div>
 </Template>
 
-<Story name="Balanced" />
+<Story name="Simple" />
+<Story name="Advanced" args={{ showAdvanced: true }} />
 
 <style>
   .wrapper {
-    max-width: 24rem;
+    max-width: 48rem;
     display: flex;
-    flex-direction: column;
+    align-items: flex-start;
     gap: 2rem;
   }
+  .item {
+    flex: 1 1 auto;
+    min-width: 0;
+    border: 1px solid var(--gray-2);
+    border-radius: 0.5rem;
+    padding: 1rem;
+  }
 </style>