Make layouts more consistent

MuckRock · Nov 22, 2024 · afb1fb7 · afb1fb7
1 parent 48e8097
commit afb1fb7
Show file tree

Hide file tree

Showing 24 changed files with 508 additions and 341 deletions.
diff --git a/src/langs/json/en.json b/src/langs/json/en.json
@@ -258,7 +258,7 @@
     "collaborators": {
       "title": "Collaborators",
       "empty": "No collaborators",
-      "add": "Invite users to this project"
+      "add": "Invite"
     },
     "fields": {
       "title": "Title",
@@ -343,9 +343,11 @@
     "contributed": "Contributed by",
     "share": "Share",
     "shareEmbed": "Share & Embed",
+    "shareEmbedProject": "Share & Embed Project",
     "sharedWith": "Shared with",
     "revisions": "Revision History",
     "edit": "Edit Metadata",
+    "editProject": "Edit Project Metadata",
     "upload": "Upload Documents",
     "uploadToProject": "Upload to Project",
     "download": "Download File",

diff --git a/src/lib/components/layouts/DocumentBrowser.svelte b/src/lib/components/layouts/DocumentBrowser.svelte
@@ -36,7 +36,7 @@
 
   // Form components
   import Dropzone from "$lib/components/inputs/Dropzone.svelte";
-  import BulkActions from "$lib/components/documents/BulkActions.svelte";
+  import DocumentActions from "$lib/components/sidebar/DocumentActions.svelte";
   import Search from "$lib/components/forms/Search.svelte";
   import {
     filesToUpload,
@@ -226,7 +226,7 @@
                 </SidebarItem>
 
                 <Menu slot="default" let:close>
-                  <BulkActions afterClick={() => close()} />
+                  <DocumentActions afterClick={() => close()} />
                 </Menu>
               </Dropdown>
             </Flex>

diff --git a/src/lib/components/layouts/DocumentLayout.svelte b/src/lib/components/layouts/DocumentLayout.svelte
@@ -11,8 +11,8 @@ Assumes it's a child of a ViewerContext
   } from "$lib/api/types";
   import { _ } from "svelte-i18n";
 
-  import Actions from "../documents/Actions.svelte";
-  import AddOns from "@/lib/components/sidebar/AddOns.svelte";
+  import ViewerActions from "$lib/components/sidebar/ViewerActions.svelte";
+  import AddOns from "$lib/components/sidebar/AddOns.svelte";
   import Avatar from "../accounts/Avatar.svelte";
   import Data from "../documents/Data.svelte";
   import DocumentHeader from "../documents/Header.svelte";
@@ -62,9 +62,8 @@ Assumes it's a child of a ViewerContext
         </Metadata>
       {/if}
       {#if $me}
-        <Actions {document} user={$me} {action} />
+        <ViewerActions {document} user={$me} {action} />
       {/if}
-
       <AddOns pinnedAddOns={addons} query="+document:{document.id}" />
     </Flex>
     {#await text then text}

diff --git a/src/lib/components/layouts/Project.svelte b/src/lib/components/layouts/Project.svelte
@@ -10,11 +10,15 @@
     ProjectUser,
   } from "$lib/api/types";
   import AddOns from "@/lib/components/sidebar/AddOns.svelte";
-  import Collaborators from "$lib/components/projects/Collaborators.svelte";
-  import ProjectActions from "$lib/components/projects/ProjectActions.svelte";
+  import ProjectCollaborators from "$lib/components/projects/Collaborators.svelte";
+  import ProjectActions from "$lib/components/sidebar/ProjectActions.svelte";
   import ProjectHeader from "$lib/components/projects/ProjectHeader.svelte";
   import DocumentBrowser from "./DocumentBrowser.svelte";
   import SidebarLayout from "./SidebarLayout.svelte";
+  import Collaborators from "$lib/components/projects/Collaborators.svelte";
+  import Documents from "../sidebar/Documents.svelte";
+  import Projects from "../sidebar/Projects.svelte";
+  import DocumentActions from "../sidebar/DocumentActions.svelte";
 
   export let project: Project;
   export let users: ProjectUser[];
@@ -27,7 +31,9 @@
 
 <SidebarLayout>
   <svelte:fragment slot="navigation">
-    <Collaborators {users} {project} />
+    <Documents />
+    <Projects />
+    <AddOns pinnedAddOns={addons} query={combinedQuery} />
   </svelte:fragment>
 
   <article slot="content">
@@ -48,8 +54,11 @@
   </article>
 
   <svelte:fragment slot="action">
+    <h4>Document Actions</h4>
+    <DocumentActions />
+    <h4>Project Actions</h4>
     <ProjectActions {project} />
-    <AddOns pinnedAddOns={addons} query={combinedQuery} />
+    <Collaborators {users} {project} />
   </svelte:fragment>
 </SidebarLayout>
 
@@ -72,4 +81,13 @@
     border: 1px solid var(--gray-2);
     box-shadow: inset var(--shadow-2);
   }
+  h4 {
+    margin: 0;
+    font-size: var(--font-xs);
+    font-weight: 600;
+    color: var(--gray-4);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    padding: 0.5rem;
+  }
 </style>
diff --git a/src/lib/components/layouts/stories/AppLayout.stories.svelte b/src/lib/components/layouts/stories/AppLayout.stories.svelte
@@ -10,7 +10,7 @@
   import Projects from "@/lib/components/sidebar/Projects.svelte";
   import Button from "../../common/Button.svelte";
   import { PlusCircle16 } from "svelte-octicons";
-  import BulkActions from "$lib/components/documents/BulkActions.svelte";
+  import BulkActions from "@/lib/components/sidebar/DocumentActions.svelte";
   import AddOns from "@/lib/components/sidebar/AddOns.svelte";
 
   import { documentsList } from "@/test/fixtures/documents";
@@ -47,6 +47,7 @@
       <svelte:fragment slot="navigation">
         <Documents />
         <Projects />
+        <AddOns pinnedAddOns={Promise.resolve({ data: activeAddons })} />
       </svelte:fragment>
 
       <DocumentBrowser slot="content" {documents} />
@@ -56,7 +57,6 @@
           <PlusCircle16 />{$_("sidebar.upload")}
         </Button>
         <BulkActions />
-        <AddOns pinnedAddOns={Promise.resolve({ data: activeAddons })} />
       </svelte:fragment>
     </SidebarLayout>
   </AppLayout>

diff --git a/src/lib/components/layouts/stories/SidebarLayout.stories.svelte b/src/lib/components/layouts/stories/SidebarLayout.stories.svelte
@@ -2,15 +2,14 @@
   import { Story, Template } from "@storybook/addon-svelte-csf";
 
   import { _ } from "svelte-i18n";
-  import { PlusCircle16 } from "svelte-octicons";
 
   import SidebarLayout from "../SidebarLayout.svelte";
   import DocumentBrowser from "../DocumentBrowser.svelte";
-  import AddOns from "@/lib/components/sidebar/AddOns.svelte";
-  import Button from "$lib/components/common/Button.svelte";
-  import BulkActions from "$lib/components/documents/BulkActions.svelte";
-  import Documents from "$lib/components/sidebar/Documents.svelte";
-  import Projects from "$lib/components/sidebar/Projects.svelte";
+  import UploadButton from "$lib/components/sidebar/UploadButton.svelte";
+  import DocumentActions from "$lib/components/sidebar/DocumentActions.svelte";
+  import AddOnsNavigation from "$lib/components/sidebar/AddOns.svelte";
+  import DocumentsNavigation from "$lib/components/sidebar/Documents.svelte";
+  import ProjectsNavigation from "$lib/components/sidebar/Projects.svelte";
 
   import { documentsList } from "@/test/fixtures/documents";
   import { activeAddons } from "@/test/fixtures/addons";
@@ -43,18 +42,18 @@
   <div class="vh-100 vw-100">
     <SidebarLayout {...args}>
       <svelte:fragment slot="navigation">
-        <Documents />
-        <Projects />
+        <DocumentsNavigation />
+        <ProjectsNavigation />
+        <AddOnsNavigation
+          pinnedAddOns={Promise.resolve({ data: activeAddons })}
+        />
       </svelte:fragment>
       <svelte:fragment slot="content">
         <DocumentBrowser {documents} />
       </svelte:fragment>
       <svelte:fragment slot="action">
-        <Button mode="primary" href="/upload/">
-          <PlusCircle16 />{$_("sidebar.upload")}
-        </Button>
-        <BulkActions />
-        <AddOns pinnedAddOns={Promise.resolve({ data: activeAddons })} />
+        <UploadButton />
+        <DocumentActions />
       </svelte:fragment>
     </SidebarLayout>
   </div>

diff --git a/src/lib/components/navigation/OrgMenu.svelte b/src/lib/components/navigation/OrgMenu.svelte
@@ -226,6 +226,7 @@
     font-family: var(--font-sans, "Source Sans Pro");
     font-weight: var(--font-semibold, 600);
     line-height: 1rem;
+    margin-bottom: 0;
   }
 
   .arrow {

diff --git a/src/lib/components/projects/Collaborators.svelte b/src/lib/components/projects/Collaborators.svelte
@@ -26,6 +26,7 @@
 
   import { getUserName } from "$lib/api/accounts";
   import { getCurrentUser } from "@/lib/utils/permissions";
+  import Tooltip from "../common/Tooltip.svelte";
 
   export let project: Project;
   export let users: ProjectUser[];
@@ -69,6 +70,20 @@
         getUserName(a.user).localeCompare(getUserName(b.user)),
     );
   }
+
+  function group(users: ProjectUser[]) {
+    const groups: Record<ProjectAccess, ProjectUser[]> = {
+      admin: [],
+      edit: [],
+      view: [],
+    };
+
+    users.forEach((user) => {
+      groups[user.access].push(user);
+    });
+
+    return groups;
+  }
 </script>
 
 <SidebarGroup name="collaborators">
@@ -77,56 +92,73 @@
     {$_("projects.collaborators.title")}
   </SidebarItem>
 
-  {#if users.length > 0 && project.add_remove_access}
-    <SidebarItem hover small on:click={() => (show = "invite")}>
-      <PlusCircle16 slot="start" />
-      {$_("projects.collaborators.add")}
-    </SidebarItem>
-  {/if}
-
-  {#each sort(users) as user}
-    {#if isProjectUser || project.edit_access}
-      <SidebarItem small>
-        <Avatar user={user.user} slot="start" />
-        {getUserName(user.user)}
-        <Flex slot="end">
-          <span class="badge">{$_(accessLabels[user.access])}</span>
-          {#if project.add_remove_access && !isMe(user, $me)}
-            <Button
-              ghost
-              mode="primary"
-              minW={false}
-              size="small"
-              title={actions.update}
-              on:click={() => {
-                user_to_update = user;
-                show = "update";
-              }}
-            >
-              <Pencil16 />
-            </Button>
-            <Button
-              ghost
-              mode="danger"
-              minW={false}
-              size="small"
-              title={actions.remove}
-              on:click={() => {
-                user_to_update = user;
-                show = "remove";
-              }}
-            >
-              <XCircle16 />
-            </Button>
-          {/if}
-        </Flex>
-      </SidebarItem>
-    {:else}
-      <SidebarItem small>
-        <Avatar user={user.user} slot="start" />
-        {getUserName(user.user)}
-      </SidebarItem>
+  <span slot="action">
+    {#if project.add_remove_access}
+      <Button
+        ghost
+        mode="primary"
+        size="small"
+        minW={false}
+        on:click={() => (show = "invite")}
+        slot="action"
+      >
+        <PlusCircle16 height={14} width={14} />
+        {$_("projects.collaborators.add")}
+      </Button>
     {/if}
+  </span>
+
+  {#each Object.entries(group(sort(users))) as [key, members]}
+    <header>
+      <h4>{$_(accessLabels[key])}</h4>
+    </header>
+    {#each members as user}
+      {#if isProjectUser || project.edit_access}
+        <SidebarItem small>
+          <Avatar user={user.user} slot="start" />
+          {getUserName(user.user)}
+          <Flex gap={0} slot="end">
+            {#if project.add_remove_access && !isMe(user, $me)}
+              <Tooltip caption={actions.update}>
+                <Button
+                  ghost
+                  mode="primary"
+                  minW={false}
+                  size="small"
+                  title={actions.update}
+                  on:click={() => {
+                    user_to_update = user;
+                    show = "update";
+                  }}
+                >
+                  <Pencil16 height={14} width={14} />
+                </Button>
+              </Tooltip>
+              <Tooltip caption={actions.remove}>
+                <Button
+                  ghost
+                  mode="danger"
+                  minW={false}
+                  size="small"
+                  title={actions.remove}
+                  on:click={() => {
+                    user_to_update = user;
+                    show = "remove";
+                  }}
+                >
+                  <XCircle16 height={14} width={14} />
+                </Button>
+              </Tooltip>
+            {/if}
+          </Flex>
+        </SidebarItem>
+      {:else}
+        <SidebarItem small>
+          <Avatar user={user.user} slot="start" />
+          {getUserName(user.user)}
+        </SidebarItem>
+      {/if}
+    {/each}
   {:else}
     <Empty>
       {$_("projects.collaborators.empty")}
@@ -160,14 +192,13 @@
 {/if}
 
 <style>
-  .badge {
-    margin-left: 1em;
-    font-size: 0.75em;
+  header h4 {
+    margin: 0;
+    font-size: var(--font-xs);
+    font-weight: 600;
+    color: var(--gray-4);
     text-transform: uppercase;
-    letter-spacing: 0.1ch;
-    color: var(--primary);
-
-    display: flex;
-    align-items: center;
+    letter-spacing: 1px;
+    padding: 0.5rem;
   }
 </style>