Style improvements
This commit is contained in:
@@ -11,7 +11,8 @@ import { goto } from '$app/navigation';
|
||||
import {
|
||||
BookPlus,
|
||||
FolderPlus, Library,
|
||||
SquareLibrary
|
||||
SquareLibrary,
|
||||
Wrench
|
||||
} from '@lucide/svelte';
|
||||
import { liveQuery } from "dexie";
|
||||
import { Modal } from 'flowbite-svelte';
|
||||
@@ -21,7 +22,7 @@ import { Modal } from 'flowbite-svelte';
|
||||
import { db_journals } from "$lib/ae_journals/db_journals";
|
||||
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
||||
import { journals_loc, journals_slct, journals_trig } from '$lib/ae_journals/ae_journals_stores';
|
||||
import { journals_loc, journals_sess, journals_slct, journals_trig } from '$lib/ae_journals/ae_journals_stores';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
interface Props {
|
||||
data: any;
|
||||
@@ -31,7 +32,6 @@ let { data }: Props = $props();
|
||||
|
||||
|
||||
import Journal_obj_li from './ae_comp__journal_obj_li.svelte';
|
||||
import { journals_sess } from '$lib/ae_journals/ae_journals_stores';
|
||||
|
||||
// import Element_data_store from '$lib/element_data_store_v2.svelte';
|
||||
|
||||
@@ -161,24 +161,55 @@ async function create_journal() {
|
||||
Journals for {$ae_loc.account_name ?? 'Æ loading...'}
|
||||
</h1>
|
||||
|
||||
<div class="flex flex-row items-center justify-center w-full border-gray-200 border-y-2 py-2">
|
||||
<div
|
||||
class="flex flex-row flex-wrap gap-1 items-center justify-center w-full border-gray-200 border-y-2 py-2"
|
||||
class:hidden={!$ae_loc.edit_mode}
|
||||
>
|
||||
<!-- Add new journal button -->
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
btn btn-sm
|
||||
variant-ghost-secondary
|
||||
hover:variant-filled-secondary
|
||||
transition
|
||||
"
|
||||
btn btn-sm
|
||||
variant-ghost-secondary
|
||||
hover:variant-filled-secondary
|
||||
transition
|
||||
"
|
||||
onclick={
|
||||
() => {
|
||||
$journals_sess.show__modal_new__journal_obj = true;
|
||||
}
|
||||
}
|
||||
title="Create a new journal"
|
||||
>
|
||||
<!-- <FolderPlus class="mx-1" /> -->
|
||||
<BookPlus />
|
||||
New Journal
|
||||
<BookPlus class="mx-1" />
|
||||
<span class="hidden md:inline">
|
||||
New Journal
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- Show Journals Config button -->
|
||||
<button
|
||||
disabled={true}
|
||||
type="button"
|
||||
class="
|
||||
btn btn-sm
|
||||
variant-ghost-secondary
|
||||
hover:variant-filled-secondary
|
||||
transition
|
||||
"
|
||||
onclick={
|
||||
() => {
|
||||
// Redirect to the journals config page
|
||||
// goto('/journals/config');
|
||||
}
|
||||
}
|
||||
title="Configure Journals"
|
||||
>
|
||||
<Wrench class="mx-1" />
|
||||
<span class="hidden md:inline">
|
||||
Journals Config
|
||||
</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -726,7 +726,14 @@ $effect(() => {
|
||||
tabindex={$ae_loc.edit_mode ? 0 : -1}
|
||||
class:bg-orange-100={$ae_loc.edit_mode}
|
||||
class:hidden={!$ae_loc.trusted_access || $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]}
|
||||
class="flex-grow w-full font-mono shadow-md rounded-lg border-gray-500 bg-gray-100 p-2"
|
||||
class="
|
||||
flex-grow min-h-48 w-full max-w-6xl
|
||||
p-2
|
||||
font-mono shadow-md rounded-lg
|
||||
border border-gray-200 dark:border-gray-700
|
||||
hover:border-gray-500 dark:hover:border-gray-500
|
||||
"
|
||||
|
||||
>
|
||||
<article
|
||||
class="prose"
|
||||
@@ -739,7 +746,10 @@ $effect(() => {
|
||||
|
||||
<div
|
||||
class:hidden={!$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] && $lq__journal_entry_obj?.content?.length}
|
||||
class="flex-grow flex flex-col items-center justify-center w-full max-w-6xl"
|
||||
class="
|
||||
flex-grow flex flex-col items-center justify-center
|
||||
w-full max-w-6xl
|
||||
"
|
||||
>
|
||||
|
||||
<textarea
|
||||
@@ -752,9 +762,15 @@ $effect(() => {
|
||||
}
|
||||
}}
|
||||
class:bg-orange-100={$ae_loc.edit_mode}
|
||||
class="flex-grow w-full min-h-48 h-full p-2 border border-gray-300 rounded-lg"
|
||||
placeholder="Edit journal entry content here..."
|
||||
></textarea>
|
||||
class="
|
||||
flex-grow min-h-48 w-full h-full
|
||||
p-2
|
||||
bg-white shadow-lg rounded-lg
|
||||
border border-gray-200 dark:border-gray-700
|
||||
hover:border-gray-500 dark:hover:border-gray-500
|
||||
"
|
||||
placeholder="Edit journal entry content here..."
|
||||
></textarea>
|
||||
|
||||
<!-- Only enable editing if the user has trusted access -->
|
||||
<button
|
||||
|
||||
@@ -95,12 +95,12 @@ let tmp_entry_obj: key_val = $state({});
|
||||
});
|
||||
}}
|
||||
class:hidden={journals_journal_entry_obj.template}
|
||||
class="btn btn-sm p-1 variant-soft-secondary hover:variant-filled-secondary *:hover:inline lg:text-xs"
|
||||
class="btn btn-sm p-1 variant-soft-secondary hover:variant-filled-secondary *:hover:inline text-xs lg:text-sm"
|
||||
title="Copy the markdown content"
|
||||
>
|
||||
<!-- <span class="fas fa-copy mx-1"></span> -->
|
||||
<Copy size="1em" />
|
||||
<RemoveFormatting size="2em" />
|
||||
<RemoveFormatting size="1.25em" />
|
||||
<span class="hidden">
|
||||
Copy Plaintext Markdown
|
||||
</span>
|
||||
@@ -127,7 +127,7 @@ let tmp_entry_obj: key_val = $state({});
|
||||
>
|
||||
<!-- <span class="fas fa-copy mx-1"></span> -->
|
||||
<Copy size="1em" />
|
||||
<CodeXml size="2em" />
|
||||
<CodeXml size="1.25em" />
|
||||
<span class="hidden">
|
||||
Copy Rendered HTML
|
||||
</span>
|
||||
@@ -168,7 +168,7 @@ let tmp_entry_obj: key_val = $state({});
|
||||
>
|
||||
<!-- class="btn btn-sm variant-soft-surface hover:variant-filled-warning transition py-1 px-2" -->
|
||||
<!-- <Copy strokeWidth="1" /> -->
|
||||
<Copy size="2em" />
|
||||
<Copy size="1.25em" />
|
||||
<span class="hidden md:inline">Clone</span>
|
||||
</button>
|
||||
|
||||
@@ -205,7 +205,7 @@ let tmp_entry_obj: key_val = $state({});
|
||||
title="Copy the rich text (rendered HTML) content"
|
||||
>
|
||||
<Copy size="1em" />
|
||||
<TypeOutline size="2em" />
|
||||
<TypeOutline size="1.25em" />
|
||||
<span class="hidden">Copy Rich Text</span>
|
||||
</button>
|
||||
|
||||
@@ -270,17 +270,21 @@ let tmp_entry_obj: key_val = $state({});
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
{#if journals_journal_entry_obj.content}
|
||||
<div
|
||||
class:hidden={journals_journal_entry_obj.hide}
|
||||
class="
|
||||
journal__content w-full p-2 bg-white shadow-md rounded-lg text-wrap text-sm font-mono whitespace-pre-wrap
|
||||
journal__content
|
||||
w-full p-1
|
||||
bg-white shadow-lg rounded-lg
|
||||
border border-gray-200 dark:border-gray-700
|
||||
hover:border-gray-500 dark:hover:border-gray-500
|
||||
text-wrap text-sm font-mono whitespace-pre-wrap
|
||||
|
||||
{$journals_slct.journal_obj.cfg_json.entry_li_max_height ? `${$journals_slct.journal_obj.cfg_json.entry_li_max_height} overflow-scroll` : ''}
|
||||
"
|
||||
>
|
||||
{@html journals_journal_entry_obj.content}
|
||||
{@html journals_journal_entry_obj.content}
|
||||
</div>
|
||||
|
||||
<!-- This needs to remain hidden for the copy function to work and us not seeing the rendered HTML version. -->
|
||||
|
||||
@@ -67,7 +67,7 @@ let { lq__journal_obj_li }: Props = $props();
|
||||
|
||||
<section
|
||||
class="ae_section ae_footer ae_meta journal__meta mt-2 flex flex-col sm:flex-row gap-1 items-center justify-center text-sm text-gray-500"
|
||||
class:hidden={!$ae_loc.administrator_access && !$ae_loc.edit_mode}
|
||||
class:hidden={!$ae_loc.administrator_access || !$ae_loc.edit_mode}
|
||||
>
|
||||
<div class="ae_group">
|
||||
{#if !journals_journal_obj.updated_on}
|
||||
|
||||
Reference in New Issue
Block a user