lib
/
obsidian-book-tracker
generated from tpl/obsidian-sample-plugin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

A bit of cleanup and add min height to bookshelf

This commit is contained in:
Evan Fiordeliso 2025-07-05 22:21:20 -04:00
parent 63221fb946
commit 6811f07536
5 changed files with 179 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/ui/components/bookshelf/Book.svelte
View File

@ -76,12 +76,8 @@
</BookTilted>
{:else if orientation === "on-display"}
<BookOnDisplay color={color.hex} {onClick}>
<div
class="book-display-crease"
style:--book-color={color.hex}
></div>
{#if title}
<BookText {title} {subtitle} />
<BookText {title} {subtitle} allowWrap />
<p class="bookshelf__book-author">By: {author}</p>
{/if}
</BookOnDisplay>
@ -110,15 +106,6 @@
{/if}
<style lang="scss">
.book-display-crease {
background-color: color-mix(in srgb, var(--book-color), black 14%);
width: 5px;
height: 100%;
position: absolute;
top: 0;
left: 8px;
}
div.bookshelf__book-wrapper {
background: var(--book-color);
border-left: 2px solid var(--book-border-left-color);
@ -136,7 +123,7 @@
&:before {
content: " ";
display: block;
background: var(--book-background-color);
background: var(--book-band-color);
height: 100%;
width: calc(var(--book-width));
border-radius: 4px;
@ -147,7 +134,8 @@
}
}
&.dual-top-bands {
&.dual-top-bands,
&.split-bands {
&:after,
&:before {
content: "";
@ -159,6 +147,16 @@
left: -2px;
}
&:before {
z-index: 2;
}
:global(.bookshelf__book-content) {
height: calc(var(--book-width));
}
}
&.dual-top-bands {
&:after {
height: 10px;
top: 8px;
@ -167,56 +165,30 @@
&:before {
height: 15px;
top: 26px;
z-index: 2;
}
:global(.bookshelf__book-content) {
height: calc(var(--book-width));
width: calc(200px - 41px) !important;
margin: 41px var(--book-width);
width: calc(200px - 61px) !important;
margin: 40px var(--book-width);
}
}
&.split-bands {
&:after,
&:before {
content: "";
display: block;
background: var(--book-band-color);
height: 20px;
width: calc(100% + 4px);
position: absolute;
left: -2px;
}
&:after {
content: "";
display: block;
background: var(--book-band-color);
height: 20px;
width: calc(100% + 4px);
position: absolute;
top: 10px;
left: -2px;
}
&:before {
content: "";
display: block;
background: var(--book-band-color);
height: 20px;
width: calc(100% + 4px);
position: absolute;
bottom: 10px;
z-index: 2;
}
:global(.bookshelf__book-content) {
height: calc(var(--book-width));
width: calc(200px - 60px) !important;
width: calc(200px - 62px) !important;
margin: 30px var(--book-width);
}
}

41
src/ui/components/bookshelf/BookOnDisplay.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
import type { Snippet } from "svelte";
import chroma from "chroma-js";
interface Props {
children?: Snippet;
@ -8,21 +9,57 @@
}
let { children, color = "green", onClick }: Props = $props();
let backgroundColor = $derived(chroma(color));
let bandColor = $derived(chroma(color).mix("black", 0.14));
</script>
<div
class="bookshelf__book-wrapper bookshelf__book-onDisplay"
style:--book-color={color}
style:--book-color={backgroundColor.css()}
style:--book-band-color={bandColor.css()}
onclick={onClick}
onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
role="link"
tabindex="0"
>
<div class="book-display-crease"></div>
{@render children?.()}
</div>
<style lang="scss">
div {
$band-width: 5px;
$band-offset: 8px;
div.bookshelf__book-onDisplay {
width: 150px;
height: 200px;
background: var(--book-color);
display: flex;
flex-flow: column wrap;
justify-content: space-between;
align-items: center;
text-align: center;
margin: 20px 2px 10px 2px;
position: relative;
padding-left: calc($band-offset + $band-width);
padding-right: 8px;
&:before {
content: " ";
display: block;
background: var(--book-band-color);
width: $band-width;
height: 100%;
position: absolute;
top: 0;
left: $band-offset;
}
&:global(.bookshelf__book-author) {
font-size: 0.8em;
margin-left: 13px;
}
}
</style>

122
src/ui/components/bookshelf/BookStackElement.svelte
View File

@ -27,24 +27,112 @@
? Color.fromName(colorRaw).darken()
: Color.fromCSSColor(colorRaw),
);
const backgroundColor = $derived(
design === "colored-spine"
? color.chroma.mix("black", 0.14)
: color.chroma,
);
const borderLeftColor = $derived(color.chroma.mix("white", 0.04));
const borderRightColor = $derived(color.chroma.mix("black", 0.04));
const bandColor = $derived(color.chroma.mix("black", 0.14));
const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
</script>
<li class="bookshelf__bookstack-elem">
{#if design === "split-bands"}
<BookStackSplitBands color={color.hex} {onClick}>
<BookText {title} {subtitle} />
</BookStackSplitBands>
{:else if design === "dual-top-bands"}
<BookStackDualTopBands color={color.hex} {onClick}>
<BookText {title} {subtitle} />
</BookStackDualTopBands>
{:else if design === "colored-spine"}
<BookStackColoredSpine color={color.hex} {onClick}>
<BookText {title} {subtitle} />
</BookStackColoredSpine>
{:else}
<BookStackDefault color={color.hex} {onClick}>
<BookText {title} {subtitle} />
</BookStackDefault>
{/if}
<div
class="bookshelf__book-wrapper"
class:default={design === "default"}
class:colored-spine={design === "colored-spine"}
class:dual-top-bands={design === "dual-top-bands"}
class:split-bands={design === "split-bands"}
style:--book-color={backgroundColor.css()}
style:--book-border-left-color={borderLeftColor.css()}
style:--book-border-right-color={borderRightColor.css()}
style:--book-band-color={bandColor.css()}
style:color={textColor}
onclick={onClick}
onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
role="link"
tabindex="0"
>
<BookText {title} {subtitle} />
</div>
</li>
<style lang="scss">
div {
background: var(--book-color);
border-left: 2px solid var(--book-border-left-color);
border-right: 2px solid var(--book-border-right-color);
&.colored-spine {
&:before {
content: " ";
display: block;
background: var(--book-band-color);
height: 40px;
width: calc(100% + 4px);
border-radius: 4px;
position: absolute;
top: 0px;
left: -2px;
}
}
&.split-bands,
&.dual-top-bands {
&:after,
&:before {
content: " ";
display: block;
background: var(--book-band-color);
height: 40px;
border-radius: 4px;
position: absolute;
top: 0px;
}
&:before {
z-index: 2;
}
}
&.split-bands {
&:after {
width: 20px;
left: 10px;
}
&:before {
width: 20px;
right: 10px;
}
:global(.bookshelf__book-content) {
width: calc(200px - 60px) !important;
margin: 0 30px;
}
}
&.dual-top-bands {
&:after {
width: 10px;
left: 6px;
}
&:before {
width: 15px;
left: 24px;
z-index: 2;
}
:global(.bookshelf__book-content) {
width: calc(200px - 31px) !important;
margin: 0 31px;
}
}
}
</style>

28
src/ui/components/bookshelf/BookText.svelte
View File

@ -1,12 +1,14 @@
<script lang="ts">
import { fitText } from "@ui/directives";
import { wrap } from "module";
interface Props {
title?: string;
subtitle?: string;
allowWrap?: boolean;
}
let { title, subtitle }: Props = $props();
let { title, subtitle, allowWrap }: Props = $props();
</script>
<div
@ -16,8 +18,12 @@
{#if title}
<h2
class="bookshelf__book-title"
style:width="100%"
use:fitText={{ minFontSize: 12, maxFontSize: 16 }}
class:wrap={allowWrap}
use:fitText={{
minFontSize: 12,
maxFontSize: 16,
multiLine: allowWrap,
}}
>
{title}
</h2>
@ -25,8 +31,11 @@
{#if subtitle}
<h4
class="bookshelf__book-subtitle"
style:width="100%"
use:fitText={{ minFontSize: 12, maxFontSize: 16 }}
use:fitText={{
minFontSize: 10,
maxFontSize: 14,
multiLine: allowWrap,
}}
>
{subtitle}
</h4>
@ -36,6 +45,8 @@
<style lang="scss">
.bookshelf__book-title,
.bookshelf__book-subtitle {
width: 100% !important;
:global(.textFitted) {
width: 100%;
word-wrap: break-word;
@ -43,11 +54,6 @@
}
.bookshelf__book-subtitle {
:global(.textFitted) {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
overflow: hidden;
}
</style>

11
src/ui/components/bookshelf/bookshelf.scss
View File

@ -12,6 +12,7 @@ $bookEdge: 2px;
margin: 0 auto;
overflow: hidden;
background-size: 10px 230px;
min-height: 230px;
.bookshelf__bookStack-wrapper {
width: 200px;
@ -186,16 +187,6 @@ $bookEdge: 2px;
}
.bookshelf__book-onDisplay {
width: 150px;
height: 200px;
display: flex;
flex-flow: column wrap;
justify-content: space-between;
align-items: center;
text-align: center;
margin: 20px 2px 10px 2px;
position: relative;
.bookshelf__book-content {
width: calc(100% - 11px);
margin-left: 11px;