Skip to content

Commit

Permalink
Really lean into DocumentListItem customization
Browse files Browse the repository at this point in the history
  • Loading branch information
@allanlasser
allanlasser committed Dec 5, 2024
1 parent 198f11b commit af2f3f9
Show file tree
Hide file tree
Showing 6 changed files with 290 additions and 75 deletions.
52 changes: 33 additions & 19 deletions src/lib/components/common/KV.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,63 @@
export let href: null | string = null;
export let inline: boolean = false;
export let tag: boolean = false;
let el = href ? "a" : "span";
</script>

<div class="kv" class:inline>
<svelte:element
this={el}
class="kv"
class:link={href}
class:inline
{...$$restProps}
>
{#if !tag}
<span class="key">{key}</span>
{/if}

<span class="value">
{#if href}
<a {href}>{value}</a>
{:else}
{value}
{/if}
{value}
</span>
</div>
</svelte:element>

<style>
.kv {
display: flex;
align-items: baseline;
padding: 0.1875rem 0.375rem;
align-items: flex-start;
gap: 0.625rem;
gap: 0.375rem;
border-radius: 0.25rem;
border: 1px solid var(--blue-2, #b5ceed);
background: var(--blue-1, #eef3f9);
border: 1px solid var(--gray-2, #b5ceed);
color: var(--gray-5, #5c717c);
font-size: var(--font-xs, 0.75rem);
font-style: italic;
font-weight: var(--font-regular, 400);
line-height: normal;
}
.link.kv {
color: var(--blue-5, #153359);
border-color: var(--blue-2);
background: var(--blue-1);
}
.link.kv:hover {
cursor: pointer;
filter: brightness(1.025);
}
.kv.inline {
display: inline-flex;
}
.key,
.value {
color: var(--gray-4, #5c717c);
font-size: var(--font-xs, 0.75rem);
font-style: italic;
font-weight: var(--font-regular, 400);
line-height: normal;
.key {
font-style: normal;
font-size: var(--font-sm);
}
.value {
color: var(--blue-5, #153359);
font-style: normal;
word-break: break-all;
}
Expand Down
178 changes: 135 additions & 43 deletions src/lib/components/documents/DocumentListItem.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,26 @@ 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 {
fullTitle: boolean;
meta: boolean;
thumbnail: boolean;
description: boolean;
projects: boolean;
data: boolean;
}
export const defaultVisibleFields: VisibleFields = {
fullTitle: true,
meta: true,
thumbnail: true,
description: false,
projects: true,
data: false,
};
</script>

<script lang="ts">
import type { Document, Project } from "$lib/api/types";
Expand All @@ -15,10 +35,12 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
import DocAccess, { getLevel } from "../common/Access.svelte";
import KV from "../common/KV.svelte";
import { canonicalUrl, userOrgString } from "@/lib/api/documents";
import { canonicalUrl as projectUrl } from "@/lib/api/projects";
import Thumbnail from "./Thumbnail.svelte";
export let document: Document;
export let visibleFields: Partial<VisibleFields> = defaultVisibleFields;
const embed: boolean = getContext("embed");
Expand All @@ -28,6 +50,7 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
: []; // only show projects if we've loaded them
$: level = getLevel(document.access);
$: visible = Object.assign({}, defaultVisibleFields, visibleFields);
function clean(html: string) {
return DOMPurify.sanitize(html, { ALLOWED_TAGS: [] });
Expand All @@ -36,73 +59,137 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
let width: number;
</script>

<a
href={canonicalUrl(document).href}
<div
class="document-list-item"
class:small={width < 400}
target={embed ? "_blank" : undefined}
bind:clientWidth={width}
>
{#if width >= 400}
<Thumbnail {document} />
{#if width >= 400 && visible.thumbnail}
<a
href={canonicalUrl(document).href}
class="document-link thumbnail-link"
target={embed ? "_blank" : undefined}
>
<Thumbnail {document} />
</a>
{/if}

<div class="documentInfo">
<div class="document-info">
<div class="head">
<h3 class="title">{document.title}</h3>
<h3 class="title" class:ellipsis={!visible.fullTitle}>
<a
href={canonicalUrl(document).href}
class="document-link title-link"
target={embed ? "_blank" : undefined}>{document.title}</a
>
</h3>
{#if !embed && level}
<div class="access">
<DocAccess {level} />
</div>
{/if}
</div>
<!-- {#if document.description}
{#if visible.meta}
<p class="meta">
<a
class="document-link"
href={`${canonicalUrl(document).href}?mode=grid`}
>{$_("documents.pageCount", {
values: { n: document.page_count },
})}</a
>
-
{#if document.notes && document.notes.length > 0}
<a
class="document-link"
href={`${canonicalUrl(document).href}?mode=notes`}
>{$_("documents.noteCount", {
values: { n: document.notes.length },
})}</a
> -
{/if}
{#if userOrgString(document)}
{userOrgString(document)} -
{/if}
{date}
</p>
{/if}
{#if document.description && visible.description}
<p class="description">
{clean(document.description)}
</p>
{/if} -->
<p class="meta">
{$_("documents.pageCount", { values: { n: document.page_count } })} -
{#if document.notes && document.notes.length > 0}
{$_("documents.noteCount", { values: { n: document.notes.length } })} -
{/if}
<div class="data" class:hide={width < 400}>
{#if visible.projects}
{#each projects as project}
<KV
key="Project"
value={project.title}
href={projectUrl(project).href}
title={project.title}
target={embed ? "_blank" : undefined}
/>
{/each}
{/if}
{#if userOrgString(document)}
{userOrgString(document)} -
{#if visible.data}
{#each Object.entries(document.data) as [key, values]}
{#each values as value}
<KV {key} {value} />
{/each}
{/each}
{/if}
{date}
</p>
<div class="data" class:hide={width < 400}>
{#each projects as project}
<KV key="Project" value={project.title} />
{/each}
</div>
</div>
</a>
</div>

<style>
.document-list-item {
flex: 1 0 0;
display: flex;
align-items: flex-start;
max-width: 100%;
min-width: 0;
align-self: stretch;
gap: 1rem;
padding: 0.75rem;
border-radius: 0.25rem;
gap: 0.5rem 1rem;
color: var(--gray-5);
}
.thumbnail-link {
position: relative;
}
.thumbnail-link:hover::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--blue-3);
background-blend-mode: multiply;
opacity: 0.25;
}
.document-link {
color: inherit;
text-decoration: none;
background-color: transparent;
border: 1px solid transparent;
text-decoration-color: var(--blue-2);
}
.document-list-item.small {
padding: 0.75rem 0.75rem 1.5rem;
.document-link:hover,
.document-link:focus {
color: var(--blue-4);
background-color: var(--blue-1);
border-color: var(--blue-2);
box-decoration-break: clone;
}
.head {
flex: 1 1 100%;
width: 100%;
display: flex;
justify-content: space-between;
justify-content: flex-start;
gap: 0.5rem;
align-items: baseline;
}
Expand All @@ -117,19 +204,14 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
font-size: var(--font-md, 1rem);
}
.document-list-item:hover,
.document-list-item:focus {
background-color: var(--blue-1);
border-color: var(--blue-2);
}
.documentInfo {
.document-info {
display: flex;
flex-direction: column;
flex-flow: row wrap;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
flex: 1 0 0;
align-self: stretch;
align-self: center;
min-width: 0;
}
Expand All @@ -140,14 +222,18 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
font-style: normal;
font-weight: var(--font-semibold, 600);
line-height: normal;
overflow: hidden;
text-overflow: ellipsis;
/* white-space: nowrap; */
max-width: 100%;
margin: 0;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.meta {
flex: 1 1 100%;
color: var(--gray-4, #5c717c);
font-size: 0.75rem;
font-style: normal;
Expand All @@ -162,14 +248,20 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
font-weight: var(--font-regular, 400);
line-height: normal;
overflow: hidden;
display: block;
display: -webkit-box;
text-overflow: ellipsis;
white-space: nowrap;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-width: 100ch;
width: 100%;
}
.access {
flex: 0 0 8rem;
font-size: var(--font-sm);
transform: translateY(0.125em);
}
.small .access {
Expand Down
Loading

0 comments on commit af2f3f9

Please sign in to comment.