feat: emphasize feed card content

This commit is contained in:
DecafDev 2024-07-26 20:20:41 -06:00
parent 5b9dd779df
commit 740bfba78a
3 changed files with 52 additions and 50 deletions

View file

@ -24,17 +24,16 @@
import Icon from "src/svelte/shared/components/icon.svelte";
import { getIconIdForFile } from "../services/file-icon";
import { PluginEvent } from "src/event/types";
import Wrap from "src/svelte/shared/components/wrap.svelte";
import { openInCurrentTab } from "../services/open-file";
import { openContextMenu } from "../services/context-menu";
import { HOVER_LINK_SOURCE_ID } from "src/constants";
import { SCREEN_SIZE_LG, SCREEN_SIZE_MD } from "../constants";
import Spacer from "src/svelte/shared/components/spacer.svelte";
export let displayName: string;
export let baseName: string;
export let extension: string;
export let path: string;
export let tags: string[] | null;
export let createdMillis: number;
export let content: string | null;
export let isFavorite: boolean | null;
@ -249,57 +248,50 @@
on:focus={() => {}}
on:mouseover={handleCardMouseOver}
>
<Stack spacing="sm" direction="column">
<div
tabindex="0"
role="link"
class="vault-explorer-feed-card__title"
on:focus={() => {}}
on:click={(e) => {
<div
tabindex="0"
role="link"
class="vault-explorer-feed-card__title"
on:focus={() => {}}
on:click={(e) => {
e.preventDefault();
handleTitleClick();
}}
on:contextmenu={(e) => {
e.preventDefault();
handleTitleContextMenu(e);
}}
on:keydown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleTitleClick();
}}
on:contextmenu={(e) => {
e.preventDefault();
handleTitleContextMenu(e);
}}
on:keydown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleTitleClick();
}
}}
}
}}
>
<Stack spacing="xs">
{#if enableFileIcons}
<Icon iconId={getIconIdForFile(baseName, extension)} />
{/if}
<div class="vault-explorer-feed-card__title-text">
{displayName}
</div>
</Stack>
</div>
{#if displayContent != null && displayContent.length > 0}
<Spacer size="sm" />
<div
class="vault-explorer-feed-card__content"
style="-webkit-line-clamp: {currentLineClamp};"
>
<Stack spacing="xs">
{#if enableFileIcons}
<Icon iconId={getIconIdForFile(baseName, extension)} />
{/if}
<div class="vault-explorer-feed-card__title-text">
{displayName}
</div>
</Stack>
{@html displayContent}
</div>
{#if displayContent != null && displayContent.length > 0}
<div
class="vault-explorer-feed-card__content"
style="-webkit-line-clamp: {currentLineClamp};"
>
{@html displayContent}
</div>
{/if}
{#if tags != null}
<div class="vault-explorer-feed-card__tags">
<Wrap spacingX="xs" spacingY="xs">
{#each tags as tag}
<Tag name={tag} variant="unstyled" />
{/each}
</Wrap>
</div>
{/if}
<div class="vault-explorer-feed-card__creation-time">
{creationString}
</div>
</Stack>
{/if}
{#if displayContent != null}
<Spacer size="sm" />
{/if}
<div class="vault-explorer-feed-card__creation-time">
{creationString}
</div>
</div>
<style>

View file

@ -44,7 +44,6 @@
extension={fileRenderData.extension}
baseName={fileRenderData.baseName}
path={fileRenderData.path}
tags={fileRenderData.tags}
content={fileRenderData.content}
createdMillis={fileRenderData.createdMillis}
isFavorite={fileRenderData.isFavorite}

View file

@ -1,3 +1,14 @@
---
tags:
- tag1
- tag2
- tag3
- tag4
- tag5
- tag6
- tag7
- tag8
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui justo, tempus eu vulputate eu, fringilla et nunc. Duis id nunc vel nulla fermentum varius. Integer mattis metus eu tellus commodo maximus. In hac habitasse platea dictumst. Curabitur id luctus nisi, ac ornare ante. Pellentesque quis elit nec nibh tempor tempor et in sapien. Suspendisse in lacus nec sem luctus consequat suscipit a tellus.
Sed ornare est sed erat pulvinar, a rhoncus urna volutpat. Nunc sed gravida dui, nec venenatis justo. Cras tempor porttitor odio posuere tincidunt. Donec vitae lectus commodo, consequat ipsum sit amet, pharetra eros. Aliquam ac lacus risus. Fusce pretium viverra tellus, non rutrum sem cursus vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus eget sem metus.