neuro_llc/ComfyBox
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Better add tab button

Browse Source
This commit is contained in:
space-nuko
2023-05-20 23:34:29 -05:00
parent 1014afc9ab
commit 8990050ae0
1 changed files with 15 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/lib/components/ComfyWorkflowsView.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Pane, Splitpanes } from 'svelte-splitpanes'; import { Pane, Splitpanes } from 'svelte-splitpanes';
import { PlusSquareIcon as PlusSquare } from 'svelte-feather-icons';
import { Button } from "@gradio/button"; import { Button } from "@gradio/button";
import { BlockTitle } from "@gradio/atoms"; import { BlockTitle } from "@gradio/atoms";
import ComfyWorkflowView from "./ComfyWorkflowView.svelte"; import ComfyWorkflowView from "./ComfyWorkflowView.svelte";
@@ -251,7 +252,7 @@
</div> </div>
<button class="workflow-add-new-button" <button class="workflow-add-new-button"
on:click={createNewWorkflow}> on:click={createNewWorkflow}>
➕ <PlusSquare size="100%" strokeWidth={1.5} />
</button> </button>
</div> </div>
<div id="bottombar"> <div id="bottombar">
@@ -376,69 +377,30 @@
#workflow-tabs, .workflow-tab-items { #workflow-tabs, .workflow-tab-items {
display: flex; display: flex;
margin-top: auto;
overflow-x: auto; overflow-x: auto;
} }
#workflow-tabs { #workflow-tabs {
background: var(--neutral-800);
padding-right: 1em; padding-right: 1em;
} height: 3rem;
/*
#topbar {
background: var(--neutral-900);
height: 100%;
flex-direction: column;
float: left;
position: sticky;
top: 0px;
padding: 0;
width: 4rem;
.topbar-button {
background: var(--neutral-800);
color: var(--neutral-500);
padding: 0.5rem;
border-right: 3px solid transparent;
display: flex;
flex-direction: column;
justify-content: center;
&:last-child {
border-right: 1px solid var(--neutral-600);
}
&:hover {
background: var(--neutral-700);
color: var(--neutral-300);
}
&.selected {
background: var(--neutral-700);
color: var(--neutral-300);
border-right-color: var(--primary-500);
}
}
} */
#workflow-tabs {
background: var(--neutral-800);
.workflow-tab { .workflow-tab {
background: var(--neutral-800); background: var(--neutral-800);
color: var(--neutral-500); color: var(--neutral-500);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-top: 3px solid transparent; border-top: 3px solid var(--neutral-600);
border-left: 1px solid var(--neutral-600); border-left: 1px solid var(--neutral-600);
height: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
text-align: center;
gap: var(--size-4); gap: var(--size-4);
cursor: pointer !important; cursor: pointer !important;
&:last-child { > span {
border-right: 1px solid var(--neutral-600); margin: auto;
} }
&:hover:not(:has(.workflow-close-button:hover)) { &:hover:not(:has(.workflow-close-button:hover)) {
@@ -473,10 +435,12 @@
.workflow-add-new-button { .workflow-add-new-button {
background: var(--neutral-700); background: var(--neutral-700);
filter: brightness(80%); color: var(--neutral-400);
color: var(--neutral-500); opacity: 50%;
padding: 0.5rem 1rem; padding: 0.5rem;
border-top: 3px solid var(--neutral-600); border-top: 3px solid var(--neutral-600);
aspect-ratio: 1/1;
height: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -485,6 +449,7 @@
&:hover { &:hover {
filter: brightness(100%); filter: brightness(100%);
opacity: 100%;
border-top-color: var(--neutral-600); border-top-color: var(--neutral-600);
} }
} }