From d8ac97cb8766ac6bb33ddf5d315824c327168e2f Mon Sep 17 00:00:00 2001 From: space-nuko <24979496+space-nuko@users.noreply.github.com> Date: Wed, 31 May 2023 16:58:34 -0500 Subject: [PATCH] More mobile overhauling --- src/AppMobile.svelte | 38 ++++++++++++++++++++++++------ src/lib/notify.ts | 3 ++- src/lib/stores/interfaceState.ts | 6 ++++- src/mobile/GenToolbar.svelte | 4 ++++ src/mobile/MainToolbar.svelte | 36 +++++++++++++++++++++++----- src/mobile/routes/workflow.svelte | 18 +++++++------- src/mobile/routes/workflows.svelte | 4 ++-- src/scss/global.scss | 6 ++--- 8 files changed, 85 insertions(+), 30 deletions(-) diff --git a/src/AppMobile.svelte b/src/AppMobile.svelte index 5de223d..67a3e21 100644 --- a/src/AppMobile.svelte +++ b/src/AppMobile.svelte @@ -56,7 +56,16 @@ let loading = true; let lastSize = Number.POSITIVE_INFINITY; + $: f7 && f7.setDarkMode($interfaceState.isDarkMode) + onMount(async () => { + let isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + $interfaceState.isDarkMode = isDarkMode; + + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { + $interfaceState.isDarkMode = event.matches; + }); + appSetupPromise = app.setup().then(() => { loading = false }); @@ -75,12 +84,12 @@ }) }) - /* - Now we need to map components to routes. - We need to pass them along with the F7 app parameters to component - */ + /* + Now we need to map components to routes. + We need to pass them along with the F7 app parameters to component + */ - let f7params: Framework7Parameters = { + let f7params: Framework7Parameters = { routes: [ { path: '/', @@ -112,7 +121,7 @@ // } // }, { - path: '/workflows/:workflowID/', + path: '/workflows/:workflowIndex/', component: WorkflowPage, options: { props: { app } @@ -135,8 +144,23 @@ tapHold: true } } + + let body; + const bindBody = (node) => (body = node); + function setDarkClass(isDark: boolean) { + if (!body) + return; + if (isDark) { + body.classList.add("dark"); + } else { + body.classList.remove("dark"); + } + }; + $: setDarkClass($interfaceState.isDarkMode); + + {#if appSetupPromise} {#await appSetupPromise} @@ -159,7 +183,7 @@ {/if} - {:catch error} + {:catch error}
Error loading app diff --git a/src/lib/notify.ts b/src/lib/notify.ts index 3de3405..378c2ce 100644 --- a/src/lib/notify.ts +++ b/src/lib/notify.ts @@ -34,7 +34,8 @@ function notifyf7(text: string, options: NotifyOptions) { text: text, closeOnClick: true, closeTimeout, - on + on, + icon: options.imageUrl }); notification.open(); } diff --git a/src/lib/stores/interfaceState.ts b/src/lib/stores/interfaceState.ts index 61c43dc..de43ecf 100644 --- a/src/lib/stores/interfaceState.ts +++ b/src/lib/stores/interfaceState.ts @@ -16,6 +16,8 @@ export type InterfaceState = { selectedWorkflowID: WorkflowInstID | null showingWorkflow: boolean + + isDarkMode: boolean } type InterfaceStateOps = { @@ -34,7 +36,9 @@ const store: Writable = writable( isJumpingToNode: false, selectedWorkflowID: null, - showingWorkflow: false + showingWorkflow: false, + + isDarkMode: false, }) const debounceDrag = debounce(() => { store.update(s => { s.showIndicator = false; return s }) }, 1000) diff --git a/src/mobile/GenToolbar.svelte b/src/mobile/GenToolbar.svelte index 6112ac1..16634ba 100644 --- a/src/mobile/GenToolbar.svelte +++ b/src/mobile/GenToolbar.svelte @@ -102,4 +102,8 @@ #comfy-file-input { display: none; } + + :global(.dark .toolbar.color-red) { + background: var(--neutral-700) !important; + } diff --git a/src/mobile/MainToolbar.svelte b/src/mobile/MainToolbar.svelte index 0d32306..6b19a71 100644 --- a/src/mobile/MainToolbar.svelte +++ b/src/mobile/MainToolbar.svelte @@ -3,7 +3,7 @@ import queueState from "$lib/stores/queueState"; import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState"; import { getNodeInfo } from "$lib/utils" - import { Image, LayoutTextSidebarReverse } from "svelte-bootstrap-icons"; + import { LayoutTextSidebarReverse, Image, Grid } from "svelte-bootstrap-icons"; import { Link, Toolbar } from "framework7-svelte" import ProgressBar from "$lib/components/ProgressBar.svelte"; @@ -86,6 +86,7 @@ let toolbarCount = 0; $: toolbarCount = $interfaceState.showingWorkflow ? 2 : 1; + const ICON_SIZE = "1.5rem";
@@ -106,10 +107,16 @@ {/if}
- - Tab 1 - - + 1 ? "hasGenToolbar" : ""}> + + + + + + + + + {#if $interfaceState.showIndicator} @@ -120,6 +127,22 @@ display: none; } + :global(.progressbar.color-blue) { + background: var(--neutral-400) !important; + } + + :global(.dark .progressbar.color-blue) { + background: var(--neutral-500) !important; + } + + :global(.dark .toolbar.color-blue) { + background: var(--neutral-800) !important; + } + + :global(.dark .toolbar.color-blue.hasGenToolbar) { + border-top: 2px solid var(--neutral-600); + } + .bottom { --toolbarCount: 1; position: absolute; @@ -141,7 +164,8 @@ .node-name { flex-grow: 1; - background-color: var(--secondary-300); + background-color: var(--comfy-node-name-background); + color: var(--comfy-node-name-foreground); padding: 0.2em; display: flex; justify-content: center; diff --git a/src/mobile/routes/workflow.svelte b/src/mobile/routes/workflow.svelte index b1909d0..3696d58 100644 --- a/src/mobile/routes/workflow.svelte +++ b/src/mobile/routes/workflow.svelte @@ -9,7 +9,7 @@ import { onMount } from "svelte"; import GenToolbar from '../GenToolbar.svelte' - export let workflowID: WorkflowInstID; + export let workflowIndex: number; export let app: ComfyApp let workflow: ComfyBoxWorkflow; @@ -17,7 +17,13 @@ let title = "" function onPageBeforeIn() { - $interfaceState.selectedWorkflowID = workflowID; + workflow = $workflowState.openedWorkflows[workflowIndex-1] + if (workflow) { + $interfaceState.selectedWorkflowID = workflow.id; + } + else { + $interfaceState.selectedWorkflowID = null; + } $interfaceState.showingWorkflow = true; } @@ -25,14 +31,8 @@ $interfaceState.showingWorkflow = false; } - $: { - workflow = workflowState.getWorkflow(workflowID); - if (workflow) { - workflowState.setActiveWorkflow(app.lCanvas, workflow.id); - } - } $: layoutState = workflow?.layout; - $: title = workflow?.attrs?.title || `Workflow: ${workflowID}`; + $: title = workflow?.attrs?.title || `Workflow: ${workflow?.id || workflowIndex}`; $: if (layoutState && $layoutState.root) { root = $layoutState.root diff --git a/src/mobile/routes/workflows.svelte b/src/mobile/routes/workflows.svelte index 9899647..f51135e 100644 --- a/src/mobile/routes/workflows.svelte +++ b/src/mobile/routes/workflows.svelte @@ -32,8 +32,8 @@ {#if $workflowState.openedWorkflows} - {#each $workflowState.openedWorkflows as workflow} - + {#each $workflowState.openedWorkflows as workflow, i} +
onClickDelete(workflow, e)}> diff --git a/src/scss/global.scss b/src/scss/global.scss index 1f967ca..8e5d873 100644 --- a/src/scss/global.scss +++ b/src/scss/global.scss @@ -77,11 +77,9 @@ body { --comfy-node-name-foreground: var(--body-text-color); --comfy-spinner-main-color: var(--neutral-600); --comfy-spinner-accent-color: var(--secondary-600); -} -.mobile { - --comfy-progress-bar-background: lightgrey; - --comfy-progress-bar-foreground: #B3D8A9 + --f7-navbar-color: var(--body-text-color); + --f7-navbar-bg-color: var(--neutral-800); } @mixin square-button {