v1.2.0 Side Bar & Menu rework (#189)

* Basic side tool bar skeleton + Theme toggle (#164)

* Side bar skeleton

* Fix grid layout

* nit

* Add theme toggle logic

* Change primevue color theme to blue to match beta menu UI

* Add litegraph canvas splitter overlay (#177)

* Add vue wrapper

* Splitter overlay

* Move teleport to side bar comp

* Toolbar placeholder

* Move settings button from top menu to side bar (#178)

* Reverse relationship between splitter overlay and sidebar component (#180)

* Reverse relationship between splitter overlay and sidebar component

* nit

* Remove border on splitter

* Fix canvas shift (#186)

* Move queue/history display to side bar (#185)

* Side bar placeholder

* Pinia store for queue items

* Flatten task item

* Fix schema

* computed

* Switch running / pending order

* Use class-transformer

* nit

* Show display status

* Add tag severity style

* Add execution time

* nit

* Rename to execution success

* Add time display

* Sort queue desc order

* nit

* Add remove item feature

* Load workflow

* Add confirmation popup

* Add empty table placeholder

* Remove beta menu UI's queue button/list

* Add tests on litegraph widget text truncate (#191)

* Add tests on litegraph widget text truncate

* Updated screenshots

* Revert port change

* Remove screenshots

* Update test expectations [skip ci]

* Add back menu.settingsGroup for compatibility (#192)

* Close side bar on menu location set as disabled (#194)

* Remove placeholder side bar tabs (#196)

---------

Co-authored-by: bymyself <abolkonsky.rem@gmail.com>
Co-authored-by: github-actions <github-actions@github.com>

src/assets/css/style.css

@@ -47,9 +47,34 @@ body {
 	font-family: Arial, sans-serif;
 }
 
+/**
++------------------+------------------+------------------+
+|                                                        |
+|  .comfyui-body-                                        |
+|       top                                              |
+| (spans all cols)                                       |
+|                                                        |
++------------------+------------------+------------------+
+|                  |                  |                  |
+| .comfyui-body-   |   #graph-canvas  | .comfyui-body-   |
+|      left        |                  |      right       |
+|                  |                  |                  |
+|                  |                  |                  |
++------------------+------------------+------------------+
+|                                                        |
+|  .comfyui-body-                                        |
+|      bottom                                            |
+| (spans all cols)                                       |
+|                                                        |
++------------------+------------------+------------------+
+*/
+
 .comfyui-body-top {
 	order: -5;
+	/* Span across all columns */
 	grid-column: 1/-1;
+	/* Position at the first row */
+	grid-row: 1;
 	z-index: 10;
 	display: flex;
 	flex-direction: column;
@@ -57,25 +82,41 @@ body {
 
 .comfyui-body-left {
 	order: -4;
+	 /* Position in the first column */
+	grid-column: 1;
+	/* Position below the top element */
+  grid-row: 2;
 	z-index: 10;
 	display: flex;
 }
 
+#graph-canvas-container {
+	width: 100%;
+	height: 100%;
+	order: -3;
+	grid-column: 2;
+  grid-row: 2;
+	position: relative;
+	overflow: hidden;
+}
+
 #graph-canvas {
 	width: 100%;
 	height: 100%;
-	order: -3;
 }
 
 .comfyui-body-right {
 	order: -2;
 	z-index: 10;
-	display: flex;
+	grid-column: 3;
+  grid-row: 2;
 }
 
 .comfyui-body-bottom {
-	order: -1;
+	order: 4;
+	 /* Span across all columns */
 	grid-column: 1/-1;
+  grid-row: 3;
 	z-index: 10;
 	display: flex;
 	flex-direction: column;