+
+ {:then}
+
+
+
+
+ {/await}
+ {/if}
+
+ Error loading app
+
+ {error}
+ {#if error != null && error.stack}
+ {@const lines = error.stack.split("\n")}
+ {#each lines as line}
+ {line}
+ {/each}
+ {/if}
+
+
{#if filteredItems.length > 0}
{@const itemSize = isMobile ? 50 : 25}
{@const itemsToShow = isMobile ? 10 : 30}
@@ -291,9 +281,14 @@
.comfy-select-list {
--maxLabelWidth: 100;
+ --maxListWidth: 50vw;
+ &.mobile {
+ --maxListWidth: 80vw;
+ }
+
font-size: 14px;
- width: min(calc((var(--maxLabelWidth) + 10) * 1ch), 50vw);
color: var(--item-color);
+ width: min(calc((var(--maxLabelWidth) + 10) * 1ch), var(--maxListWidth));
> :global(.virtual-list-wrapper) {
box-shadow: var(--block-shadow);
diff --git a/src/lib/widgets/GalleryWidget.svelte b/src/lib/widgets/GalleryWidget.svelte
index 7873448..c820d34 100644
--- a/src/lib/widgets/GalleryWidget.svelte
+++ b/src/lib/widgets/GalleryWidget.svelte
@@ -11,6 +11,7 @@
import { clamp, comfyBoxImageToComfyURL, type ComfyBoxImageMetadata } from "$lib/utils";
import { f7 } from "framework7-svelte";
import type { ComfyGalleryNode } from "$lib/nodes/widgets";
+ import { showMobileLightbox } from "$lib/components/utils";
export let widget: WidgetLayout | null = null;
export let isMobile: boolean = false;
@@ -47,19 +48,8 @@
object_fit: "cover",
// preview: true
}
- let element: HTMLDivElement;
-
- let mobileLightbox = null;
-
- function showMobileLightbox(source: HTMLImageElement) {
- if (!f7)
- return
-
- if (mobileLightbox) {
- mobileLightbox.destroy();
- mobileLightbox = null;
- }
+ function showMobileLightbox_(source: HTMLImageElement, selectedImage: number) {
const galleryElem = source.closest("div.block")
console.debug("[ImageViewer] showModal", source, galleryElem);
if (!galleryElem || ImageViewer.all_gallery_buttons(galleryElem).length === 0) {
@@ -72,23 +62,16 @@
const images = allGalleryButtons.map(button => {
return {
url: (button.children[0] as HTMLImageElement).src,
- caption: "Image"
+ // caption: "Image"
}
})
- history.pushState({ type: "gallery" }, "");
-
- mobileLightbox = f7.photoBrowser.create({
- photos: images,
- thumbs: images.map(i => i.url),
- type: 'popup',
- });
- mobileLightbox.open($selected_image)
+ showMobileLightbox(images, selectedImage, { thumbs: images });
}
function onClicked(e: CustomEvent) {
if (isMobile) {
- showMobileLightbox(e.detail)
+ showMobileLightbox_(e.detail, $selected_image)
}
else {
ImageViewer.instance.showLightbox(e.detail)
@@ -103,7 +86,7 @@
{#if widget && node && nodeValue && $nodeValue}
{#if widget.attrs.variant === "image"}
-
+
{:else}
{@const images = $nodeValue.map(comfyBoxImageToComfyURL)}
-
+
import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
- import queueState from "$lib/stores/queueState";
import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
- import { getNodeInfo } from "$lib/utils"
import { Link, Toolbar } from "framework7-svelte"
- import ProgressBar from "$lib/components/ProgressBar.svelte";
- import Indicator from "./Indicator.svelte";
- import interfaceState from "$lib/stores/interfaceState";
- import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
export let subworkflowID: number = -1;
export let app: ComfyApp = undefined;
- let layoutState: WritableLayoutStateStore = null;
- let fileInput: HTMLInputElement = undefined;
let workflow: ComfyBoxWorkflow | null = null;
$: workflow = $workflowState.activeWorkflow;
@@ -22,111 +14,28 @@
navigator.vibrate(20)
app.runDefaultQueueAction()
}
-
- async function refreshCombos() {
- navigator.vibrate(20)
- await app.refreshComboInNodes()
- }
-
- function doSave(): void {
- if (!fileInput)
- return;
-
- navigator.vibrate(20)
- app.querySave()
- }
-
- function doLoad(): void {
- if (!fileInput)
- return;
-
- navigator.vibrate(20)
- fileInput.value = null;
- fileInput.click();
- }
-
- function loadWorkflow(): void {
- app.handleFile(fileInput.files[0]);
-}
-
- function doSaveLocal(): void {
- navigator.vibrate(20)
- app.saveStateToLocalStorage();
- }
-
+
{#if workflow != null && workflow.attrs.queuePromptButtonName != ""}
-
- {workflow.attrs.queuePromptButtonName}
-
+
-{#if $interfaceState.showIndicator}
- 1 ? "hasGenToolbar" : ""}>
+
+
+{#if $interfaceState.showIndicator}
+
+
+ Gallery
+
+ 🗑️
+
+
+
+
+ {#each allEntries as group, i}
+
+
+
+
diff --git a/src/mobile/routes/home.svelte b/src/mobile/routes/home.svelte
deleted file mode 100644
index 71c64d8..0000000
--- a/src/mobile/routes/home.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-
-
-
- Yo
-
-
-
-
-
-
-
-
diff --git a/src/mobile/routes/list-subworkflows.svelte b/src/mobile/routes/list-subworkflows.svelte
deleted file mode 100644
index 1e2138a..0000000
--- a/src/mobile/routes/list-subworkflows.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
diff --git a/src/mobile/routes/queue.svelte b/src/mobile/routes/queue.svelte
new file mode 100644
index 0000000..a3f6ecd
--- /dev/null
+++ b/src/mobile/routes/queue.svelte
@@ -0,0 +1,155 @@
+
+
+
+
+ Queue
+
+ 🛑️
+ 🗑️
+
+
+
+
+
+
+
+
diff --git a/src/mobile/routes/subworkflow.svelte b/src/mobile/routes/subworkflow.svelte
deleted file mode 100644
index a302ada..0000000
--- a/src/mobile/routes/subworkflow.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-
-
-
-
-
-
diff --git a/src/mobile/routes/workflow.svelte b/src/mobile/routes/workflow.svelte
new file mode 100644
index 0000000..4cc6dcb
--- /dev/null
+++ b/src/mobile/routes/workflow.svelte
@@ -0,0 +1,114 @@
+
+
+
+
+ {title}
+
+ {actionsOpened = true;}}>
+
+
+
+ {#if workflow}
+ {#if root}
+
+
+ Actions
+ Refresh Dropdowns
+ Save to Local Storage
+
+ Cancel
+
+
+
+
+
diff --git a/src/mobile/routes/workflows.svelte b/src/mobile/routes/workflows.svelte
new file mode 100644
index 0000000..5b423e3
--- /dev/null
+++ b/src/mobile/routes/workflows.svelte
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 1f967ca..8e738b4 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -41,7 +41,7 @@ body {
--comfy-dropdown-item-background-active: var(--secondary-600);
--comfy-progress-bar-background: var(--neutral-300);
--comfy-progress-bar-foreground: var(--secondary-300);
- --comfy-node-name-background: var(--color-red-300);
+ --comfy-node-name-background: var(--color-blue-200);
--comfy-node-name-foreground: var(--body-text-color);
--comfy-spinner-main-color: var(--neutral-400);
--comfy-spinner-accent-color: var(--secondary-500);
@@ -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 {
@@ -252,3 +250,15 @@ button {
:global([data-is-dnd-shadow-item]) {
min-height: 5rem;
}
+
+:global(.dark .photo-browser-popup) {
+ background: var(--neutral-700);
+}
+
+:global(.dark .photo-browser-popup-) {
+ background: var(--neutral-700);
+}
+
+:global(.photo-browser-exposed .toolbar ~ .toolbar.photo-browser-thumbs) {
+ transform: translate3d(0, calc(var(--f7-toolbar-height) * 2), 0);
+}
diff --git a/vite.config.ts b/vite.config.ts
index 25f1aab..1373ffd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -55,6 +55,7 @@ export default defineConfig({
},
},
build: {
+ minify: isProduction,
sourcemap: true,
rollupOptions: {
input: {
- {#if $queueState.runningNodeID || $queueState.progress}
-
-
- Node: {getNodeInfo($queueState.runningNodeID)}
-
-
- {/if}
- {#if typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0}
-
-
- {/if}
-
- Queued prompts: {$queueState.queueRemaining}.
-
-
+
+ {workflow.attrs.queuePromptButtonName}
+
+
{/if}
- 🔄
- Save
- Save Local
- Load
-
+
+
+
+ {#if queued}
+ {#if progress}
+
+
+ {#each group as [entry, image], j}
+ {@const index = i * gridCols + j}
+
+ {/each}
+
+
+ ![]()
handleClick(e, entry, index)}
+ src={image}
+ loading="lazy"
+ alt="thumbnail" />
+
+ {/each}
+ {app} Nodes
- -
+ {#each _entries as entry, i}
+ {@const prompt = findPrompt(entry)}
+
+ {prompt} +
+{entry.date}
+ {/if} +
-
- {/if}
-
+
+ {/if}
+ {:else}
+
+ Workflow not found.
+
+ {/if}
+
+ + + +
+