Skip to content

Fix color theme inconsistencies. #856

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
judah-sotomayor wants to merge 1 commit into
base: main
Choose a base branch
from
+50 −17
Draft

Fix color theme inconsistencies. #856

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/lib/components/CardMenu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ A drop-down menu for use in ColorCard, HistoryCard, and IconCard.
Dispatches a menuaction event when an option is selected from the menu.
-->
<script lang="ts">
import { monoIconColor } from '$lib/data/stores';
import { monoIconColor, themeColors } from '$lib/data/stores';
import MoreVertIcon from '$lib/icons/MoreVertIcon.svelte';

let { menuaction, actions = [''] } = $props();
Expand All @@ -26,12 +26,17 @@ Dispatches a menuaction event when an option is selected from the menu.
<MoreVertIcon color={$monoIconColor} />
</div>
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
<ul tabindex="0" class="dy-dropdown-content dy-menu shadow bg-base-100 z-10">
<ul
style:background={$themeColors['PopupBackgroundColor']}
tabindex="0"
color=""
class="dy-dropdown-content dy-menu shadow bg-base-100 z-10"
>
{#each actions as a}
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_missing_attribute -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<li><a onclick={() => handleAction(a)}>{a}</a></li>
<li><a color={$monoIconColor} onclick={() => handleAction(a)}>{a}</a></li>
{/each}
</ul>
</div>
9 changes: 7 additions & 2 deletions src/lib/components/IconCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ TODO:
<script lang="ts">
import { base } from '$app/paths';
import config from '$lib/data/config';
import { direction, refs } from '$lib/data/stores';
import { direction, refs, themeColors } from '$lib/data/stores';
import CardMenu from './CardMenu.svelte';

let {
Expand Down Expand Up @@ -67,7 +67,12 @@ TODO:
</a>
</div>

<div class="annotation-item-date col-span-3 justify-self-end">{date}</div>
<div
style:color={$themeColors['TextColor']}
class="annotation-item-date col-span-3 justify-self-end"
>
{date}
</div>
</div>
</div>

Expand Down
40 changes: 32 additions & 8 deletions src/lib/components/NoteDialog.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,14 @@

<script lang="ts">
import { addNote, editNote } from '$lib/data/notes';
import { bodyFontSize, currentFont, selectedVerses, t } from '$lib/data/stores';
import {
bodyFontSize,
currentFont,
monoIconColor,
selectedVerses,
t,
themeColors
} from '$lib/data/stores';
import { EditIcon } from '$lib/icons';
import Modal from './Modal.svelte';

Expand Down Expand Up @@ -56,7 +63,11 @@
<Modal bind:this={modal} {id} onclose={reset}>
<div class="flex flex-col justify-evenly">
<div class="w-full flex justify-between">
<div class="w-full pb-3" style:font-weight={editing ? 'normal' : 'bold'}>
<div
style:color={$themeColors['TitlesColor']}
class="w-full pb-3"
style:font-weight={editing ? 'normal' : 'bold'}
>
{heading}
</div>
{#if !editing}
Expand All @@ -65,17 +76,26 @@
editing = true;
}}
>
<EditIcon />
<EditIcon color={$monoIconColor} />
</button>
{/if}
</div>
<div style:word-wrap="break-word">
{#if editing}
<textarea bind:value={text} class="dy-textarea w-full"></textarea>
<textarea
style:color={$themeColors['TextColor']}
style:background={$themeColors['PopupBackgroundColor']}
bind:value={text}
class="dy-textarea w-full"
></textarea>
{:else if text !== undefined}
{#each text.split(/\r?\n/) as line}
{#if line}
<p style:font-family={$currentFont} style:font-size="{$bodyFontSize}px">
<p
style:color={$themeColors['TextColor']}
style:font-family={$currentFont}
style:font-size="{$bodyFontSize}px"
>
{line}
</p>
{:else}
Expand All @@ -86,9 +106,13 @@
</div>
{#if editing}
<div class="w-full flex mt-4 justify-between">
<button class="dy-btn dy-btn-sm dy-btn-ghost">{$t['Button_Cancel']}</button>
<button onclick={modifyNote} class="dy-btn dy-btn-sm dy-btn-ghost"
>{$t['Button_OK']}</button
<button style:color={$monoIconColor} class="dy-btn dy-btn-sm dy-btn-ghost"
>{$t['Button_Cancel']}</button
>
<button
onclick={modifyNote}
style:color={$monoIconColor}
class="dy-btn dy-btn-sm dy-btn-ghost">{$t['Button_OK']}</button
>
</div>
{/if}
Expand Down
7 changes: 3 additions & 4 deletions src/lib/components/ScriptureViewSofria.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ LOGGING:
logs,
modal,
MODAL_NOTE,
monoIconColor,
plan,
refs,
t,
Expand Down Expand Up @@ -681,9 +682,7 @@ LOGGING:
}
el?.parentNode.insertBefore(notesSpan, el.nextSibling);
}
const noteSvg = () => {
return '<svg fill="#000000" style="display:inline" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 96 96"><path d="M 21.07 74.80 L 8.76 87.35 Q 8.00 88.12 8.00 87.03 Q 8.00 52.12 8.00 18.00 Q 8.00 7.73 18.00 7.80 Q 48.00 8.00 78.00 8.00 Q 88.27 8.00 88.18 18.00 Q 88.00 40.13 88.09 62.25 Q 88.13 72.31 78.00 72.22 C 72.03 72.17 25.23 70.89 23.56 72.37 Q 22.78 73.07 21.07 74.80 Z M 72.00 21.60 A 0.60 0.60 0.0 0 0 71.40 21.00 L 24.60 21.00 A 0.60 0.60 0.0 0 0 24.00 21.60 L 24.00 28.40 A 0.60 0.60 0.0 0 0 24.60 29.00 L 71.40 29.00 A 0.60 0.60 0.0 0 0 72.00 28.40 L 72.00 21.60 Z M 72.00 35.60 A 0.60 0.60 0.0 0 0 71.40 35.00 L 24.60 35.00 A 0.60 0.60 0.0 0 0 24.00 35.60 L 24.00 42.40 A 0.60 0.60 0.0 0 0 24.60 43.00 L 71.40 43.00 A 0.60 0.60 0.0 0 0 72.00 42.40 L 72.00 35.60 Z M 60.00 49.60 A 0.60 0.60 0.0 0 0 59.40 49.00 L 24.60 49.00 A 0.60 0.60 0.0 0 0 24.00 49.60 L 24.00 56.40 A 0.60 0.60 0.0 0 0 24.60 57.00 L 59.40 57.00 A 0.60 0.60 0.0 0 0 60.00 56.40 L 60.00 49.60 Z"</path></svg>';
};
$: noteSvg = `<svg fill="${$monoIconColor}" style="display:inline" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 96 96"><path d="M 21.07 74.80 L 8.76 87.35 Q 8.00 88.12 8.00 87.03 Q 8.00 52.12 8.00 18.00 Q 8.00 7.73 18.00 7.80 Q 48.00 8.00 78.00 8.00 Q 88.27 8.00 88.18 18.00 Q 88.00 40.13 88.09 62.25 Q 88.13 72.31 78.00 72.22 C 72.03 72.17 25.23 70.89 23.56 72.37 Q 22.78 73.07 21.07 74.80 Z M 72.00 21.60 A 0.60 0.60 0.0 0 0 71.40 21.00 L 24.60 21.00 A 0.60 0.60 0.0 0 0 24.00 21.60 L 24.00 28.40 A 0.60 0.60 0.0 0 0 24.60 29.00 L 71.40 29.00 A 0.60 0.60 0.0 0 0 72.00 28.40 L 72.00 21.60 Z M 72.00 35.60 A 0.60 0.60 0.0 0 0 71.40 35.00 L 24.60 35.00 A 0.60 0.60 0.0 0 0 24.00 35.60 L 24.00 42.40 A 0.60 0.60 0.0 0 0 24.60 43.00 L 71.40 43.00 A 0.60 0.60 0.0 0 0 72.00 42.40 L 72.00 35.60 Z M 60.00 49.60 A 0.60 0.60 0.0 0 0 59.40 49.00 L 24.60 49.00 A 0.60 0.60 0.0 0 0 24.00 49.60 L 24.00 56.40 A 0.60 0.60 0.0 0 0 24.60 57.00 L 59.40 57.00 A 0.60 0.60 0.0 0 0 60.00 56.40 L 60.00 49.60 Z"</path></svg>`;
function editNote(note) {
modal.open(MODAL_NOTE, note);
}
Expand All @@ -701,7 +700,7 @@ LOGGING:
if (!existingNoteSpan) {
let noteSpan = document.createElement('span');
noteSpan.id = 'note' + k;
noteSpan.innerHTML = noteSvg();
noteSpan.innerHTML = noteSvg;
noteSpan.onclick = (event) => editNote(note);
bookmarksSpan.appendChild(noteSpan);
}
Expand Down