+
{#key $propsChanged}
- {#if node !== null && nodeValue !== null}
-
- {/if}
+ {#key $comboRefreshed}
+ {#if node !== null && nodeValue !== null}
+
+ {/if}
+ {/key}
{/key}
@@ -116,7 +136,9 @@
:global(.svelte-select) {
width: auto;
- max-width: 30rem;
+ max-width: 16rem;
+ --font-size: 13px;
+ --height: 32px;
}
:global(.svelte-select-list) {
diff --git a/src/lib/widgets/GalleryWidget.svelte b/src/lib/widgets/GalleryWidget.svelte
index 5c06043..04cffe6 100644
--- a/src/lib/widgets/GalleryWidget.svelte
+++ b/src/lib/widgets/GalleryWidget.svelte
@@ -1,16 +1,19 @@
-
+{/if}
diff --git a/src/lib/widgets/RadioWidget.svelte b/src/lib/widgets/RadioWidget.svelte
new file mode 100644
index 0000000..c22eef9
--- /dev/null
+++ b/src/lib/widgets/RadioWidget.svelte
@@ -0,0 +1,64 @@
+
+
+
+
+ {#key $propsChanged}
+ {#key $attrsChanged}
+ {#if node !== null && node.properties.choices}
+
+
+
+ {/if}
+ {/key}
+ {/key}
+
+
+
+
diff --git a/src/lib/widgets/RangeWidget.svelte b/src/lib/widgets/RangeWidget.svelte
index a3c0431..a54a8ab 100644
--- a/src/lib/widgets/RangeWidget.svelte
+++ b/src/lib/widgets/RangeWidget.svelte
@@ -1,13 +1,18 @@
-
+
{#if node !== null && option !== null}
{/if}
-
diff --git a/src/lib/widgets/TextWidget.svelte b/src/lib/widgets/TextWidget.svelte
index 67d8565..db0a08e 100644
--- a/src/lib/widgets/TextWidget.svelte
+++ b/src/lib/widgets/TextWidget.svelte
@@ -3,7 +3,9 @@
import type { ComfyComboNode } from "$lib/nodes/index";
import { type WidgetLayout } from "$lib/stores/layoutState";
import { get, type Writable } from "svelte/store";
+ import { isDisabled } from "./utils"
export let widget: WidgetLayout | null = null;
+ export let isMobile: boolean = false;
let node: ComfyComboNode | null = null;
let nodeValue: Writable
| null = null;
let propsChanged: Writable | null = null;
@@ -32,7 +34,7 @@
{ s.app = comfyApp; return s; })
+
const app = new AppMobile({
- target: document.getElementById('app'),
+ target: document.getElementById('app'),
+ props: { app: comfyApp }
})
export default app;
diff --git a/src/mobile/GenToolbar.svelte b/src/mobile/GenToolbar.svelte
index d9f73d0..6cf0258 100644
--- a/src/mobile/GenToolbar.svelte
+++ b/src/mobile/GenToolbar.svelte
@@ -1,38 +1,104 @@
+
+ {#if $queueState.runningNodeId || $queueState.progress}
+
+ Node: {getNodeInfo($queueState.runningNodeId)}
+
+
+ {/if}
+ {#if typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0}
+
+
+ Queued prompts: {$queueState.queueRemaining}.
+
+
+ {/if}
+
-
-
diff --git a/src/mobile/routes/list-subworkflows.svelte b/src/mobile/routes/list-subworkflows.svelte
index c9a4fea..1e2138a 100644
--- a/src/mobile/routes/list-subworkflows.svelte
+++ b/src/mobile/routes/list-subworkflows.svelte
@@ -1,19 +1,8 @@
diff --git a/src/mobile/routes/subworkflow.svelte b/src/mobile/routes/subworkflow.svelte
index 88840b8..c910e3f 100644
--- a/src/mobile/routes/subworkflow.svelte
+++ b/src/mobile/routes/subworkflow.svelte
@@ -1,26 +1,30 @@
- Workflow!
+
+
+
-
diff --git a/src/scss/global.scss b/src/scss/global.scss
index c949b66..4e1a03e 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -2,4 +2,7 @@
body {
overflow: hidden;
+
+ // Disable pull to refresh
+ overscroll-behavior-y: contain;
}
diff --git a/src/scss/ux.scss b/src/scss/ux.scss
index d15bb9a..b95b463 100644
--- a/src/scss/ux.scss
+++ b/src/scss/ux.scss
@@ -173,14 +173,17 @@ body {
background: var(--ae-panel-bg-color) !important;
}
-.container {
- .z-index0, .z-index1, .z-index2 {
- > .block > .v-pane > .animation-wrapper > .widget:not(.edit) {
- padding: var(--ae-inside-padding-size) !important;
- border: 1px solid var(--ae-panel-border-color) !important;
- }
- }
-}
+// Add blocks for components not located in a physical container
+// TODO make it work with accordions/tabs
+// .container {
+// .z-index0, .z-index1, .z-index2 {
+// > .block > .v-pane > .animation-wrapper > .widget:not(.edit) {
+// padding: var(--ae-inside-padding-size) !important;
+// border: 1px solid var(--ae-panel-border-color) !important;
+// }
+// }
+// }
+
.widget:has(> .gradio-button) {
height: 100%;
@@ -390,8 +393,8 @@ div.block.padded {
fieldset.block.padded
{
background-color: var(--ae-panel-bg-color) !important;
- /*border-width: var(--ae-border-width) !important;*/
- /*border-color: var(--ae-panel-border-color) !important;*/
+ border-width: var(--ae-border-width) !important;
+ border-color: var(--ae-panel-border-color) !important;
border-radius: var(--ae-panel-border-radius) !important;
}
@@ -440,7 +443,7 @@ div.gradio-row>.form{
}
.wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt label,
-.wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 label,
+.gradio-radio label,
button.tool.secondary,
button.secondary,
.gradio-dropdown label .wrap,
@@ -495,6 +498,7 @@ button.secondary{
white-space: break-spaces !important;
}
+.gradio-radio fieldset > .wrap > label,
[type=text],
[type=email],
[type=url],
@@ -510,8 +514,8 @@ button.secondary{
[multiple],
textarea,
select {
- line-height: 1.5rem;
- padding: 4px 8px;
+ line-height: 1.5rem !important;
+ padding: 4px 8px !important;
}
button.tool.secondary,
@@ -571,12 +575,6 @@ input[type=email] {
align-self: flex-start;
}
-span.svelte-1gfkn6j:not(.has-info) {
- margin-top: 1px;
- margin-left: 1px;
- margin-bottom: var(--ae-inside-padding-size);
-}
-
/* input column alignment */
label.block{
display: flex;
@@ -873,6 +871,11 @@ input[type=range]::-ms-fill-upper {
}
}
+.comfy-image-widget > .block {
+ background: var(--ae-main-bg-color);
+ border-color: var(--ae-panel-border-color);
+}
+
.comfy-toggle-button {
> .lg {
border-color: var(--ae-subpanel-border-color) !important;