Merge pull request #86 from zero01101/testing

Just Some QOL and bugfixes
zero01101 · Dec 12, 2022 · 2499aa2 · 2499aa2
2 parents e8bc32e + 4601303
commit 2499aa2
Show file tree

Hide file tree

Showing 12 changed files with 388 additions and 187 deletions.
diff --git a/css/fonts.css b/css/fonts.css
@@ -0,0 +1,4 @@
+@font-face {
+	font-family: "Open Sans", sans-serif;
+	src: url("/res/fonts/OpenSans.ttf") format("truetype");
+}
diff --git a/css/index.css b/css/index.css
@@ -33,18 +33,49 @@ body {
 	border: none;
 	text-align: center;
 	outline: none;
-	font-size: 15px;
-	padding: 5px;
+	padding: 0px;
+}
+
+.collapsible {
+	background-color: var(--c-primary);
+
+	margin-bottom: 2px;
 	margin-top: 5px;
-	margin-bottom: 5px;
+
+	transition-duration: 50ms;
+}
+
+.collapsible::before {
+	content: "";
+	display: block;
+
+	position: absolute;
+
+	width: 21px;
+	height: 21px;
+
+	background-color: var(--c-text);
+	mask-image: url("/res/icons/chevron-up.svg");
+	-webkit-mask-image: url("/res/icons/chevron-up.svg");
+	mask-size: contain;
+	-webkit-mask-size: contain;
+	rotate: 90deg;
+}
+
+.collapsible.active::before {
+	rotate: 180deg;
 }
 
 .display-none {
 	display: none;
 }
 
 .collapsible:hover {
-	background-color: #777;
+	background-color: var(--c-hover);
+}
+
+.collapsible:active {
+	filter: brightness(110%);
 }
 
 .content {
@@ -259,7 +290,7 @@ body {
 	color: #3f1f1f;
 }
 
-.host-field-wrapper .connection-status.cors-issue {
+.host-field-wrapper .connection-status.webui-issue {
 	background-color: #dddd49;
 	color: #3f3f1f;
 }

diff --git a/css/ui/generic.css b/css/ui/generic.css
@@ -145,6 +145,24 @@ div.autocomplete > .autocomplete-list > .autocomplete-option:hover {
 	background-color: #dddf;
 }
 
+div.autocomplete > .autocomplete-list > .autocomplete-option.selected::after {
+	content: "";
+
+	position: absolute;
+	right: 5px;
+	top: 0;
+
+	height: 100%;
+	aspect-ratio: 1;
+
+	background-color: darkgreen;
+
+	-webkit-mask-image: url("/res/icons/check.svg");
+	-webkit-mask-size: contain;
+	mask-image: url("/res/icons/check.svg");
+	mask-size: contain;
+}
+
 /* Select Input */
 select > option:checked::after {
 	content: "";
@@ -218,3 +236,112 @@ select > option:checked::after {
 	mask-repeat: no-repeat;
 	background-color: var(--c-text);
 }
+
+/**
+ * Generic list
+ */
+
+.list {
+	height: 200px;
+
+	overflow-y: auto;
+
+	background-color: var(--c-primary);
+
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+}
+
+.list > *:first-child {
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+}
+
+.list .list-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	height: 25px;
+	padding-left: 5px;
+	padding-right: 5px;
+
+	cursor: pointer;
+
+	color: var(--c-text);
+
+	transition-duration: 50ms;
+}
+
+.list .list-item.active {
+	background-color: var(--c-active);
+}
+.list .list-item.active:hover,
+.list .list-item:hover {
+	background-color: var(--c-hover);
+}
+.list .list-item.active:active,
+.list .list-item:active {
+	background-color: var(--c-hover);
+	filter: brightness(120%);
+}
+
+.list .list-item > .title {
+	flex: 1;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+
+	background-color: transparent;
+
+	border: 0;
+	color: var(--c-text);
+}
+
+.list .list-item > .actions {
+	display: flex;
+	align-self: stretch;
+}
+
+.list .actions > button {
+	display: flex;
+	align-items: stretch;
+
+	padding: 0;
+
+	width: 25px;
+	aspect-ratio: 1;
+
+	background-color: transparent;
+	border: 0;
+	cursor: pointer;
+}
+
+.list .list-item > .actions > *:hover > * {
+	margin: 2px;
+}
+
+.list .actions > button > *:first-child {
+	flex: 1;
+	margin: 3px;
+
+	-webkit-mask-size: contain;
+	mask-size: contain;
+	background-color: var(--c-text);
+}
+
+/* Generic buttons */
+.list .actions > .delete-btn > *:first-child {
+	-webkit-mask-image: url("/res/icons/trash.svg");
+	mask-image: url("/res/icons/trash.svg");
+}
+
+.list .actions > .rename-btn > *:first-child {
+	-webkit-mask-image: url("/res/icons/edit.svg");
+	mask-image: url("/res/icons/edit.svg");
+}
+
+.list .actions > .download-btn > *:first-child {
+	-webkit-mask-image: url("/res/icons/download.svg");
+	mask-image: url("/res/icons/download.svg");
+}
diff --git a/css/ui/tool/stamp.css b/css/ui/tool/stamp.css
@@ -28,89 +28,13 @@
 .resource-manager > .resource-list {
 	height: 200px;
 
-	background-color: #ffffff66;
-
 	border-top-left-radius: 5px;
 	border-top-right-radius: 5px;
 
 	overflow-y: scroll;
 	overflow-x: hidden;
 }
 
-.resource-manager > .resource-list > * {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	cursor: pointer;
-	white-space: nowrap;
-}
-
-.resource-manager > .resource-list > * > .resource-title {
-	overflow: hidden;
-	margin: 5px;
-	text-overflow: ellipsis;
-}
-
-.resource-manager > .resource-list > * > .actions {
-	display: flex;
-	align-items: center;
-}
-
-.resource-manager .actions > button {
-	display: flex;
-	align-items: stretch;
-
-	padding: 0;
-
-	width: 30px;
-	aspect-ratio: 1;
-
-	background-color: transparent;
-	border: 0;
-	cursor: pointer;
-}
-
-.resource-manager .actions > button:hover {
-	background-color: rgba(255, 255, 255, 0.5);
-}
-
-.resource-manager .actions > button:active {
-	background-color: rgba(255, 255, 255, 0.7);
-}
-
-.resource-manager .actions > button > *:first-child {
-	flex: 1;
-	margin: 3px;
-
-	-webkit-mask-size: contain;
-	mask-size: contain;
-	background-color: var(--c-primary);
-}
-
-.resource-manager .actions > .rename-btn > *:first-child {
-	-webkit-mask-image: url("/res/icons/edit.svg");
-	mask-image: url("/res/icons/edit.svg");
-}
-
-.resource-manager .actions > .delete-btn > *:first-child {
-	-webkit-mask-image: url("/res/icons/trash.svg");
-	mask-image: url("/res/icons/trash.svg");
-}
-
-.resource-manager > .resource-list > .selected:hover,
-.resource-manager > .resource-list > *:hover {
-	background-color: #fff8;
-}
-.resource-manager > .resource-list > .selected {
-	background-color: #fff6;
-}
-
-.resource-manager > .resource-list.dragging {
-	background-color: #ffffff88;
-	transition-duration: 0.3s;
-}
-
 .resource-manager > .upload-button {
 	display: block;
 	width: 100%;

diff --git a/index.html b/index.html
@@ -62,11 +62,7 @@
 						<textarea id="negPrompt"></textarea>
 					</div>
 					<label for="styleSelect">Styles:</label>
-					<select
-						id="styleSelect"
-						class="wideSelect"
-						onchange="changeStyles()"
-						multiple></select>
+					<div id="style-ac-mselect"></div>
 					<!-- <hr /> -->
 				</div>
 				<!-- SD section -->