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

Remove old stack designs

This commit is contained in:
Evan Fiordeliso 2025-07-05 22:21:47 -04:00
parent 6811f07536
commit 18aa687647
5 changed files with 0 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,6 @@
<script lang="ts">
import { Color, isColorName, type ColorName } from "@utils/color";
import BookText from "./BookText.svelte";
import BookStackColoredSpine from "./designs/stack/BookStackColoredSpine.svelte";
import BookStackDefault from "./designs/stack/BookStackDefault.svelte";
import BookStackDualTopBands from "./designs/stack/BookStackDualTopBands.svelte";
import BookStackSplitBands from "./designs/stack/BookStackSplitBands.svelte";
interface Props {
title?: string;

53
src/ui/components/bookshelf/designs/stack/BookStackColoredSpine.svelte
View File

@ -1,53 +0,0 @@
<script lang="ts">
import type { Snippet } from "svelte";
import chroma from "chroma-js";
import { Color } from "@utils/color";
interface Props {
children?: Snippet;
color?: string;
onClick?: () => void;
}
let { children, color = "green", onClick }: Props = $props();
const borderLeftColor = $derived(chroma(color).mix("white", 0.04));
const borderRightColor = $derived(chroma(color).mix("black", 0.04));
const backgroundColor = $derived(chroma(color).mix("black", 0.14));
const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
</script>
<div
class="bookshelf__book-wrapper"
style:--book-border-left-color={borderLeftColor.css()}
style:--book-border-right-color={borderRightColor.css()}
style:--book-background-color={backgroundColor.css()}
style:color={textColor}
onclick={onClick}
onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
role="link"
tabindex="0"
>
{@render children?.()}
</div>
<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);
&:before {
content: " ";
display: block;
background: var(--book-background-color);
height: 40px;
width: calc(100% + 4px);
border-radius: 4px;
position: absolute;
top: 0px;
left: -2px;
}
}
</style>

40
src/ui/components/bookshelf/designs/stack/BookStackDefault.svelte
View File

@ -1,40 +0,0 @@
<script lang="ts">
import type { Snippet } from "svelte";
import chroma from "chroma-js";
import { Color } from "@utils/color";
interface Props {
children?: Snippet;
color?: string;
onClick?: () => void;
}
let { children, color = "green", onClick }: Props = $props();
const backgroundColor = $derived(chroma(color));
const borderLeftColor = $derived(chroma(color).mix("white", 0.04));
const borderRightColor = $derived(chroma(color).mix("black", 0.04));
const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
</script>
<div
class="bookshelf__book-wrapper"
style:--book-color={backgroundColor.css()}
style:--book-border-left-color={borderLeftColor.css()}
style:--book-border-right-color={borderRightColor.css()}
style:color={textColor}
onclick={onClick}
onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
role="link"
tabindex="0"
>
{@render children?.()}
</div>
<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);
}
</style>

72
src/ui/components/bookshelf/designs/stack/BookStackDualTopBands.svelte
View File

@ -1,72 +0,0 @@
<script lang="ts">
import type { Snippet } from "svelte";
import chroma from "chroma-js";
import { Color } from "@utils/color";
interface Props {
children?: Snippet;
color?: string;
onClick?: () => void;
}
let { children, color = "green", onClick }: Props = $props();
const backgroundColor = $derived(chroma(color));
const borderLeftColor = $derived(chroma(color).mix("white", 0.04));
const borderRightColor = $derived(chroma(color).mix("black", 0.04));
const bandColor = $derived(chroma(color).mix("black", 0.14));
const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
</script>
<div
class="bookshelf__book-wrapper"
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"
>
{@render children?.()}
</div>
<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);
&:after {
content: " ";
display: block;
background: var(--book-band-color);
height: 40px;
width: 10px;
position: absolute;
top: 0px;
left: 6px;
}
&:before {
content: " ";
display: block;
background: var(--book-band-color);
height: 40px;
width: 15px;
position: absolute;
top: 0px;
left: 24px;
z-index: 2;
}
:global(.bookshelf__book-content) {
width: calc(200px - 31px) !important;
margin: 0 31px;
}
}
</style>

72
src/ui/components/bookshelf/designs/stack/BookStackSplitBands.svelte
View File

@ -1,72 +0,0 @@
<script lang="ts">
import type { Snippet } from "svelte";
import chroma from "chroma-js";
import { Color } from "@utils/color";
interface Props {
children?: Snippet;
color?: string;
onClick?: () => void;
}
let { children, color = "green", onClick }: Props = $props();
const backgroundColor = $derived(chroma(color));
const borderLeftColor = $derived(chroma(color).mix("white", 0.04));
const borderRightColor = $derived(chroma(color).mix("black", 0.04));
const bandColor = $derived(chroma(color).mix("black", 0.14));
const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
</script>
<div
class="bookshelf__book-wrapper"
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"
>
{@render children?.()}
</div>
<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);
&:after {
content: " ";
display: block;
background: var(--book-band-color);
height: 40px;
width: 20px;
position: absolute;
top: 0px;
left: 10px;
}
&:before {
content: " ";
display: block;
background: var(--book-band-color);
height: 40px;
width: 20px;
position: absolute;
top: 0px;
right: 10px;
z-index: 2;
}
:global(.bookshelf__book-content) {
width: calc(200px - 60px) !important;
margin: 0 30px;
}
}
</style>