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

Lots of work on upgrading to Tailwind CSS 4. Still more to go. Need to fix Modals everywhere.

Browse Source
This commit is contained in:
Scott Idem
2025-06-18 20:36:09 -04:00
parent 13912fd145
commit 376837950e
15 changed files with 319 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/ae_events_stores.ts
View File

@@ -462,6 +462,11 @@ let events_session_data_struct: key_val = {
show_fields__presentation: true,
show_fields__session: true,
show_modal__presenter_agree: false,
show__session_poc_profile: false,
show_modal__session_poc_agree: false,
status_rpt: {
recent_files: null,
presenters_agree: null,

2
src/lib/ae_stores.ts
View File

@@ -371,6 +371,8 @@ let ae_app_session_data_defaults: key_val = {
qry_limit__people: 99,
},
show__modal_change_password: false,
'download': {},
// For API download and upload progress status per file.

37
src/lib/components/shad-editor/editor.css
View File

@@ -1,5 +1,18 @@
@import "tailwindcss/preflight";
@tailwind utilities;
@import 'tailwindcss';
@import "@skeletonlabs/skeleton";
@import "@skeletonlabs/skeleton/optional/presets";
/* @import "tailwindcss/preflight"; */
/* @tailwind utilities; */
@import '@skeletonlabs/skeleton/themes/cerberus';
@import '@skeletonlabs/skeleton/themes/modern';
@import '@skeletonlabs/skeleton/themes/wintry';
@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
@import "tailwindcss/utilities.css" layer(utilities);
.tiptap :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
@@ -9,7 +22,7 @@
.tiptap code:not(pre code) {
/* Remove the before and after pseudo elements */
@apply rounded-sm border bg-muted/50 p-1 before:content-[''] after:content-[''];
@apply rounded-sm border bg-black/50 p-1 before:content-[''] after:content-[''];
}
.tiptap blockquote p {
@@ -54,11 +67,12 @@ ul[data-type='taskList'] li label {
}
ul[data-type='taskList'] li[data-checked='true'] div {
@apply text-muted-foreground line-through;
@apply text-black/50 line-through;
}
input[type='checkbox'] {
@apply size-4 cursor-pointer rounded-sm !important;
@apply size-4 cursor-pointer rounded-sm;
/* This kills compiling !important */
}
ul[data-type='taskList'] ul[data-type='taskList'] {
@@ -71,7 +85,7 @@ ul[data-type='taskList'] ul[data-type='taskList'] {
}
.color::before {
@apply mb-[0.15rem] mr-[0.1rem] inline-block size-[1rem] rounded-sm border border-muted align-middle;
@apply mb-[0.15rem] mr-[0.1rem] inline-block size-[1rem] rounded-sm border border-black/50 align-middle;
background-color: var(--color);
content: ' ';
}
@@ -87,7 +101,7 @@ ul[data-type='taskList'] ul[data-type='taskList'] {
.tiptap table td,
.tiptap table th {
@apply border border-muted;
@apply border border-black/50;
box-sizing: border-box;
min-width: 1em;
padding: 6px 8px;
@@ -101,17 +115,20 @@ ul[data-type='taskList'] ul[data-type='taskList'] {
}
.tiptap table th {
@apply bg-muted/50 text-left font-bold;
@apply bg-black/50 text-left;
/* Kills compile: font-bold */
font-weight: bold;
}
.tiptap table .selectedCell:after {
@apply pointer-events-none absolute bottom-0 left-0 right-0 top-0 border-[2px] border-muted-foreground;
@apply pointer-events-none absolute bottom-0 left-0 right-0 top-0 border-[2px] border-black/50;
content: '';
z-index: 2;
}
.tiptap table .column-resize-handle {
@apply pointer-events-none absolute -bottom-[2px] -right-[2px] top-0 w-1 bg-muted;
@apply pointer-events-none absolute -bottom-[2px] -right-[2px] top-0 w-1 bg-black/50;
}
.tiptap .tableWrapper {

4
src/lib/components/shad-editor/onedark.css
View File

@@ -63,7 +63,9 @@
}
.hljs-strong {
@apply font-bold;
/* @apply font-bold; */
/* Kills compile: font-bold */
font-weight: bold;
}
/* Base styles */

64
src/lib/e_app_clipboard.svelte Normal file
View File

@@ -0,0 +1,64 @@
<script lang="ts">
interface Props {
log_lvl?: number;
value: any;
success: boolean;
btn_text: string;
btn_title?: string;
btn_class?: string;
}
let {
log_lvl = 1,
value = $bindable(''),
success = $bindable(false),
btn_text = 'Copy to Clipboard',
btn_title = 'Copy to Clipboard',
btn_class = 'btn btn-sm preset-tonal-warning text-warning-500 m-1'
}: Props = $props();
if (log_lvl) {
console.log(`Clipboard component initialized with value:`, value);
}
// Select your trigger element
const elemButton: HTMLButtonElement | null = document.querySelector('[data-button]');
// Add a click event handler to the trigger
// elemButton?.addEventListener('click', () => {
// // Call the Clipboard API
// navigator.clipboard
// // Use the `writeText` method write content to the clipboard
// .writeText(value)
// // Handle confirmation
// .then(() => {
// if (log_lvl) {
// console.log(`Clipboard write successful: ${value}`);
// }
// success = true;
// });
// });
</script>
<button
data-button
onclick={() => {
// Call the Clipboard API
navigator.clipboard
// Use the `writeText` method write content to the clipboard
.writeText(value)
// Handle confirmation
.then(() => {
if (log_lvl) {
console.log(`Clipboard write successful: ${value}`);
}
success = true;
});
}}
class={btn_class}
title={btn_title}
>
{btn_text}
</button>

10
src/lib/e_app_debug_menu.svelte
View File

@@ -106,7 +106,7 @@ hover:opacity-100 -->
$ae_loc.debug_mode = !$ae_loc?.debug_mode;
}}
class="
btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-tonal-warning border border-warning-500
btn btn-sm preset-tonal-surface border-sm border-surface-500 hover:preset-tonal-warning
transition-all *:hover:inline-block
@@ -141,7 +141,7 @@ hover:opacity-100 -->
$ae_loc.debug_menu = !$ae_loc?.debug_menu;
}}
class="
btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-tonal-warning border border-warning-500
btn btn-sm preset-tonal-surface border-sm border-surface-500 hover:preset-tonal-warning
transition-all *:hover:inline-block
"
title="Turn debug content and styles off and on"
@@ -166,8 +166,8 @@ hover:opacity-100 -->
id="AE-Quick-Debug"
class="
btn btn-icon
preset-tonal-surface border border-surface-500
hover:preset-tonal-warning border border-warning-500
preset-tonal-surface border-sm border-surface-500
hover:preset-tonal-warning
transition-all
fixed bottom-2 left-2
text-gray-400 hover:text-gray-800
@@ -182,5 +182,5 @@ hover:opacity-100 -->
</section>
<style lang="postcss">
<style lang="css">
</style>

86
src/lib/element_manage_event_file_li.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
export let log_lvl: number = 0;
import { onMount } from 'svelte';
// import { liveQuery } from "dexie";
import { Clipboard } from "flowbite-svelte";
import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
@@ -15,19 +15,33 @@ import { db_events } from "$lib/ae_events/db_events";
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';
export let container_class_li: string|Array<string> = [];
export let lq__event_file_obj_li: any;
export let link_to_type: string;
export let link_to_id: string;
export let allow_basic: boolean = false;
export let allow_moderator: boolean = false;
export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
interface Props {
log_lvl?: number;
container_class_li?: string|Array<string>;
lq__event_file_obj_li: any;
link_to_type: string;
link_to_id: string;
allow_basic?: boolean;
allow_moderator?: boolean;
display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
}
let {
log_lvl = 0,
container_class_li = [],
lq__event_file_obj_li,
link_to_type,
link_to_id,
allow_basic = false,
allow_moderator = false,
display_mode = 'default'
}: Props = $props();
// export let show_convert_btn: null|boolean = null;
// let ae_placeholder_li: key_val = {};
let ae_promises: key_val = {};
let ae_tmp: key_val = {};
let ae_promises: key_val = $state({});
let ae_tmp: key_val = $state({});
ae_tmp.show__file_li = true;
ae_tmp.show__direct_download = $events_loc.pres_mgmt.show__direct_download;
// let ae_triggers: key_val = {};
@@ -38,6 +52,8 @@ onMount(() => {
console.log(`allow_basic: ${allow_basic}; allow_moderator: ${allow_moderator}`);
}
});
let clipboard_success = $state(false);
</script>
@@ -46,7 +62,7 @@ onMount(() => {
>
<button
type="button"
on:click={() => {
onclick={() => {
console.log('*** Refresh button clicked ***');
db_events.files.clear();
@@ -81,7 +97,7 @@ onMount(() => {
<button
type="button"
on:click={() => {
onclick={() => {
console.log('*** Show Alt Download button clicked ***');
ae_tmp.show__direct_download = !ae_tmp.show__direct_download;
}}
@@ -152,7 +168,7 @@ onMount(() => {
<button
type="button"
disabled={!allow_basic && !allow_moderator && !$ae_loc.trusted_access}
on:click={() => {
onclick={() => {
// ae_promises[event_file_obj.event_file_id_random]
ae_promises[event_file_obj.event_file_id_random] = api.download_hosted_file({
api_cfg: $ae_api,
@@ -215,7 +231,7 @@ onMount(() => {
Download
</span>
</a>
<button
<!-- <button
type="button"
use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download`)}
class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
@@ -225,7 +241,15 @@ onMount(() => {
<span class="hidden">
Copy Link
</span>
</button>
</button> -->
<Clipboard
value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download`)}
bind:success={clipboard_success}
class="w-24"
>
{#if clipboard_success}Copied!{:else}Copy Link{/if}
</Clipboard>
</div>
<div class="flex flex-row gap-0.5">
@@ -242,7 +266,7 @@ onMount(() => {
Renamed
</span>
</a>
<button
<!-- <button
type="button"
use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
@@ -252,7 +276,14 @@ onMount(() => {
<span class="hidden">
Copy Renamed
</span>
</button>
</button> -->
<Clipboard
value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
bind:success={clipboard_success}
class="w-24"
>
{#if clipboard_success}Copied!{:else}Copy Renamed{/if}
</Clipboard>
</div>
<div class="flex flex-row gap-0.5">
@@ -269,7 +300,7 @@ onMount(() => {
Renamed
</span>
</a>
<button
<!-- <button
type="button"
use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
@@ -279,7 +310,14 @@ onMount(() => {
<span class="hidden">
Copy Renamed
</span>
</button>
</button> -->
<Clipboard
value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
bind:success={clipboard_success}
class="w-24"
>
{#if clipboard_success}Copied!{:else}Copy Renamed{/if}
</Clipboard>
</div>
</span>
@@ -301,7 +339,7 @@ onMount(() => {
{#if $events_sess.pres_mgmt.tmp_val__filename_no_ext.trim() != event_file_obj.filename_no_ext}
<button
type="button"
on:click={async () => {
onclick={async () => {
let new_filename = $events_sess.pres_mgmt.tmp_val__filename_no_ext.trim()
// Remove possible double extension
new_filename = new_filename.replace('.'+event_file_obj.extension, '');
@@ -353,7 +391,7 @@ onMount(() => {
<button
type="button"
disabled={!allow_basic && !$ae_loc.trusted_access}
on:click={() => {
onclick={() => {
if ($events_sess.pres_mgmt.show_field_edit__filename == event_file_obj.event_file_id_random) {
$events_sess.pres_mgmt.tmp_val__filename_no_ext = '';
$events_sess.pres_mgmt.show_field_edit__filename = false;
@@ -377,7 +415,7 @@ onMount(() => {
<button
type="button"
disabled={!allow_basic && !$ae_loc.trusted_access}
on:click={async () => {
onclick={async () => {
let event_file_data = {
hide: !event_file_obj.hide,
};
@@ -433,7 +471,7 @@ onMount(() => {
<button
type="button"
disabled={!allow_basic && !$ae_loc.trusted_access}
on:click={async () => {
onclick={async () => {
if (!confirm(`Are you sure you want to delete this file?\n${event_file_obj.filename} [${event_file_obj.event_file_id_random}]`)) {return false;}
// ae_promises[event_file_obj.event_file_id_random] = handle_delete__event_file({event_file_id: event_file_obj.event_file_id_random});
@@ -487,7 +525,7 @@ onMount(() => {
name="file_purpose"
disabled={!allow_basic && !allow_moderator && !$ae_loc.trusted_access}
value={event_file_obj.file_purpose}
on:change={e => {
onchange={e => {
// ae_tmp[event_file_obj.event_file_id_random].file_purpose = e.target.value;
console.log(`Selected file_purpose: ${e.target.value}`);