Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More config options. Work on click to expand Entry contents when in a list.

Browse Source
This commit is contained in:
Scott Idem
2025-05-15 16:02:54 -04:00
parent 53856a913b
commit e794a4c23a
2 changed files with 77 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/routes/journals/[journal_id]/+layout.svelte
View File

@@ -9,7 +9,7 @@ import {
ArrowDown01, ArrowDown10, ArrowDownUp,
BookHeart, BookImage, Bookmark, BookOpenText, BriefcaseBusiness,
Check, Copy,
Eye, EyeOff,
Expand, Eye, EyeOff,
Flag, FlagOff, FilePlus, Fingerprint,
Globe,
Library,
@@ -19,7 +19,7 @@ import {
RemoveFormatting,
SquareLibrary,
Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
Tags, ToggleLeft, ToggleRight, Trash2, TypeOutline,
Tags, Target, ToggleLeft, ToggleRight, Trash2, TypeOutline,
X
} from '@lucide/svelte';
@@ -547,6 +547,74 @@ async function handle_update_journal() {
</select>
</div>
<!-- Select click max height options (Tailwind CSS) -->
<div class="flex flex-row gap-1 items-center justify-start">
<span class="text-sm text-gray-500 hidden sm:inline">
Journal Entry List Active (click/press) Max Height:
</span>
<select
bind:value={$journals_slct.tmp_journal_obj.cfg_json.entry_li_click_max_height}
onchange={(event) => {
$journals_slct.tmp_journal_obj.cfg_json.entry_li_click_max_height = event.target.value;
console.log('Selected max height:', $journals_slct.tmp_journal_obj.cfg_json.entry_li_click_max_height);
}}
class="btn btn-sm variant-ghost-surface hover:variant-filled-surface transition text-xs w-full mb-2 max-w-48"
title="Select maximum height for journal entries in the list"
>
<option value="">Default (auto)</option>
<!-- <option value="none">None (no limit)</option> -->
<option value="active:max-h-8">Small (8)</option>
<option value="active:max-h-16">Medium (16)</option>
<option value="active:max-h-32">Large (32)</option>
<option value="active:max-h-96">Extra Large (96)</option>
<option value="active:max-h-full">Full (no limit)</option>
</select>
</div>
<!-- Toggles for the hover or click to expand Entry content when in a list -->
<div class="flex flex-row flex-wrap gap-1 items-center justify-start">
<span class="text-sm text-gray-500 hidden sm:inline">
Journal Entry List Expand Contents:
</span>
<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
<button
type="button"
onclick={() => {
if ($journals_slct.tmp_journal_obj.cfg_json.expand_li_content == 'hover') {
$journals_slct.tmp_journal_obj.cfg_json.expand_li_content = 'click';
} else {
$journals_slct.tmp_journal_obj.cfg_json.expand_li_content = 'hover';
}
}}
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition *:hover:inline"
title="Toggle visibility of Markdown copy button(s) on Journal Entry view page"
>
{#if $journals_slct.tmp_journal_obj.cfg_json.expand_li_content == 'hover'}
<!-- <EyeOff strokeWidth="1" color="red" /> -->
<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
<Target strokeWidth="2.5" color="green" />
<span class="hidden">
Hover
</span>
{:else}
<!-- <Eye strokeWidth="2.5" color="green" /> -->
<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
<Expand strokeWidth="2.5" color="green" />
<span class="hidden">
Click
</span>
{/if}
<span class="hidden">
Expand Entry Content
</span>
</button>
</span>
</div>
<!-- Select color scheme for the journal entries -->
<!-- Should select from the common Tailwind CSS options. Examples: slate, blue, gray, green, orange, red, yellow, etc. -->
<!-- Saves to cfg_json.color_scheme -->

10
src/routes/journals/ae_comp__journal_entry_obj_li.svelte
View File

@@ -436,10 +436,14 @@ $effect(() => {
border border-gray-200 dark:border-gray-700
text-wrap text-sm font-mono whitespace-pre-wrap
delay-1000 duration-300 hover:delay-1000 hover:duration-300 transition-all hover:transition-all ease-out
hover:z-10 hover:h-auto
hover:z-10
hover:bg-blue-100 hover:border-blue-500 dark:hover:border-blue-500
{$journals_slct.journal_obj.cfg_json.entry_li_max_height ? `${$journals_slct.journal_obj.cfg_json.entry_li_max_height} overflow-scroll` : ''}
{$journals_slct.journal_obj.cfg_json.entry_li_hover_max_height ? `${$journals_slct.journal_obj.cfg_json.entry_li_hover_max_height} hover:overflow-scroll` : ''}
overflow-scroll
{$journals_slct.journal_obj.cfg_json.entry_li_max_height ? `${$journals_slct.journal_obj.cfg_json.entry_li_max_height}` : ''}
{$journals_slct.journal_obj.cfg_json.entry_li_click_max_height ? `${$journals_slct.journal_obj.cfg_json.entry_li_click_max_height}` : ''}
{$journals_slct.journal_obj.cfg_json.entry_li_hover_max_height ? `${$journals_slct.journal_obj.cfg_json.entry_li_hover_max_height}` : ''}
"
>
{@html journals_journal_entry_obj.content}