Mobile overhaul

src/mobile/GenToolbar.svelte

@@ -3,13 +3,14 @@
  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 { Link, Toolbar } from "framework7-svelte"
  import ProgressBar from "$lib/components/ProgressBar.svelte";
  import Progressbar from "$lib/components/f7/progressbar.svelte";
-	import Indicator from "./Indicator.svelte";
-	import interfaceState from "$lib/stores/interfaceState";
-	import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
+ 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;
@@ -74,31 +75,21 @@
      progressText = "??.?%"
  }
 
+ let centerHref = "/workflows/"
+ $: if ($interfaceState.selectedWorkflowID) {
+     centerHref = `/workflows/${$interfaceState.selectedWorkflowID}/`
+ }
+ else {
+     centerHref = "/workflows/";
+ }
+
 </script>
 
-<div class="bottom">
-    <div class="bars">
-        {#if queued}
-            <div class="node-name">
-                <span>Node: {getNodeInfo($queueState.runningNodeID)} ({progressText})</span>
-            </div>
-        {/if}
-    </div>
-    <div class="wrapper">
-        {#if queued}
-            {#if progress}
-                <Progressbar color="blue" progress={progressPercent} />
-            {:else if running}
-                <Progressbar color="blue" infinite />
-            {/if}
-        {/if}
-    </div>
-</div>
-<Toolbar bottom>
+<Toolbar bottom color="red" style="bottom: calc(var(--f7-toolbar-height))">
     {#if workflow != null && workflow.attrs.queuePromptButtonName != ""}
         <Link on:click={queuePrompt}>
         {workflow.attrs.queuePromptButtonName}
-        </Link>
+    </Link>
     {/if}
     <Link on:click={refreshCombos}>🔄</Link>
     <Link on:click={doSave}>Save</Link>
@@ -106,56 +97,9 @@
     <Link on:click={doLoad}>Load</Link>
     <input bind:this={fileInput} id="comfy-file-input" type="file" accept=".json" on:change={loadWorkflow} />
 </Toolbar>
-{#if $interfaceState.showIndicator}
-    <Indicator value={$interfaceState.indicatorValue} />
-{/if}
 
 <style lang="scss">
  #comfy-file-input {
      display: none;
  }
-
- .bottom {
-     position: absolute;
-     text-align: center;
-     width: 100%;
-     font-size: 13pt;
-     bottom: calc(var(--f7-toolbar-height));
-     z-index: var(--layer-top);
- }
-
- .bars {
-     display: flex;
-     flex-direction: row;
-
-     .bars {
-         display: flex;
-         flex-direction: row;
-     }
-
-     .node-name {
-         flex-grow: 1;
-         background-color: var(--secondary-300);
-         padding: 0.2em;
-         display: flex;
-         justify-content: center;
-         align-items: center;
-     }
-
-     .progress-bar {
-         flex-grow: 10;
-         background-color: var(--color-red-300);
-         display: flex;
-         justify-content: center;
-         align-items: center;
-     }
-
-     .queue-remaining {
-         flex-grow: 1;
-         padding: 0.2em;
-         &.in-progress {
-             background-color: var(--secondary-300);
-         }
-     }
- }
 </style>