A fun tool for painting things

.github/workflows/autoformat.yml

@@ -13,8 +13,9 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v2
+        with:
+          ref: ${{ github.head_ref }}
       - name: Prettify
         uses: creyD/[email protected]
         with:
-          ref: ${{ github.head_ref }}
           prettier_options: --write **/*.{js,html,css,md}

css/index.css

@@ -1,6 +1,12 @@
 * {
 	font-size: 100%;
 	font-family: Arial, Helvetica, sans-serif;
+	user-select: none;
+}
+
+input,
+textarea {
+	user-select: auto;
 }
 
 /* Body is stuck with no scroll */
@@ -136,7 +142,7 @@ body {
 	color: #fff;
 }
 
-#models {
+.wideSelect {
 	width: 100%;
 	text-overflow: ellipsis;
 }
@@ -146,59 +152,83 @@ body {
 	position: relative;
 	display: flex;
 
-	align-items: center;
+	align-items: stretch;
 	justify-content: space-between;
 
 	width: 100%;
-	height: fit-content;
 }
 
 .host-field-wrapper input {
+	flex-shrink: 0;
+	width: calc(100% - 15px);
+
 	display: block;
+
+	border: 0;
 }
 
 .host-field-wrapper .connection-status {
 	width: 15px;
-	height: 15px;
 
-	box-sizing: inherit;
+	position: absolute;
+	left: calc(100% - 15px);
 
-	border-radius: 50%;
-	margin: 5px;
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+
+	box-sizing: inherit;
 
 	cursor: pointer;
 
-	aspect-ratio: 1;
-}
+	transition-duration: 50ms;
+
+	padding-top: 1px;
+	padding-bottom: 1px;
 
+	overflow: hidden;
+}
+.host-field-wrapper .connection-status:active,
 .host-field-wrapper .connection-status:hover {
-	width: 19px;
-	height: 19px;
+	width: fit-content;
+	padding-left: 5px;
+	padding-right: 6px;
 
-	margin: 3px;
+	filter: brightness(110%);
 }
 
 .host-field-wrapper .connection-status:active {
-	width: 17px;
-	height: 17px;
+	filter: brightness(80%);
+}
+
+.host-field-wrapper .connection-status > #connection-status-indicator-text {
+	opacity: 0%;
+	transition-duration: 20ms;
+}
 
-	margin: 4px;
+.host-field-wrapper
+	.connection-status:hover
+	> #connection-status-indicator-text {
+	opacity: 100%;
 }
 
 .host-field-wrapper .connection-status.online {
 	background-color: #49dd49;
+	color: #1f3f1f;
 }
 
 .host-field-wrapper .connection-status.offline {
 	background-color: #dd4949;
+	color: #3f1f1f;
 }
 
 .host-field-wrapper .connection-status.cors-issue {
 	background-color: #dddd49;
+	color: #3f3f1f;
 }
 
 .host-field-wrapper .connection-status.before {
 	background-color: #777;
+	color: #1f1f1f;
 }
 
 input#host {
@@ -222,6 +252,19 @@ div.prompt-wrapper > textarea:focus {
 	width: 700px;
 }
 
+/* Style Field */
+select > .style-select-option {
+	cursor: pointer;
+}
+
+select > .style-select-option:hover {
+	background-color: #999;
+}
+
+select > .style-select-option:active {
+	background-color: #aaa;
+}
+
 /* Tool buttons */
 .button-array {
 	display: flex;

css/ui/generic.css

@@ -90,8 +90,26 @@ div.slider-wrapper > input.text {
 	appearance: textfield;
 	border: 0px;
 
-	padding-top: 5px;
-	height: 15px;
+	height: 100%;
 	text-align: center;
 	background-color: transparent;
 }
+
+/* Select Input */
+select > option:checked::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;
+}

css/ui/tool/stamp.css

@@ -38,14 +38,69 @@
 }
 
 .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;
-	white-space: nowrap;
 }
 
+.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: #ffff;
+	background-color: #fff8;
 }
 .resource-manager > .resource-list > .selected {
 	background-color: #fff6;

css/ui/toolbar.css

@@ -43,8 +43,6 @@
 
 	padding: 0;
 
-	background-color: var(--c-text);
-
 	right: 2px;
 	top: 10px;
 
@@ -78,6 +76,8 @@
 	border-radius: 5px;
 
 	cursor: pointer;
+
+	transition-duration: 50ms;
 }
 
 #ui-toolbar .tool.using {
@@ -87,3 +87,8 @@
 #ui-toolbar .tool:hover {
 	background-color: var(--c-hover);
 }
+
+#ui-toolbar .tool:active {
+	background-color: var(--c-hover);
+	filter: brightness(120%);
+}

index.html

@@ -36,7 +36,9 @@
 						<input id="host" value="http://127.0.0.1:7860" />
 						<div
 							id="connection-status-indicator"
-							class="connection-status"></div>
+							class="connection-status before">
+							<span id="connection-status-indicator-text">Waiting</span>
+						</div>
 					</div>
 				</label>
 				<!-- Prompts section -->
@@ -51,6 +53,12 @@
 					<div class="prompt-wrapper">
 						<textarea id="negPrompt"></textarea>
 					</div>
+					<label for="styleSelect">Styles:</label>
+					<select
+						id="styleSelect"
+						class="wideSelect"
+						onchange="changeStyles()"
+						multiple></select>
 					<!-- <hr /> -->
 				</div>
 				<!-- SD section -->
@@ -59,7 +67,10 @@
 				</button>
 				<div class="content">
 					<label for="models">Model:</label>
-					<select id="models" onchange="changeModel()"></select>
+					<select
+						id="models"
+						class="wideSelect"
+						onchange="changeModel()"></select>
 					<br />
 					<label for="samplerSelect">Sampler:</label>
 					<select id="samplerSelect" onchange="changeSampler()"></select>
@@ -104,7 +115,7 @@
 					<button onclick="downloadCanvas()">Save canvas</button>
 					<br />
 					<label for="upscalers">Choose upscaler</label>
-					<select id="upscalers"></select>
+					<select id="upscalers" class="wideSelect"></select>
 					<button onclick="upscaleAndDownload()">
 						Upscale (might take a sec)
 					</button>
@@ -136,6 +147,10 @@
 					<label for="heldButton">Mouse button:</label>
 					<span id="heldButton"></span>
 					<br />
+					<button id="resetToDefaults" onclick="resetToDefaults()">
+						Reset to defaults
+					</button>
+					<br />
 					<span id="version">
 						<a href="https://github.com/zero01101/openOutpaint" target="_blank">
 							Alpha release v0.0.7.5
@@ -200,31 +215,34 @@
 		<script src="js/lib/layers.js" type="text/javascript"></script>
 		<script src="js/lib/commands.js" type="text/javascript"></script>
 
-		<script src="js/settingsbar.js" type="text/javascript"></script>
-
 		<script src="js/lib/toolbar.js" type="text/javascript"></script>
+		<script src="js/lib/ui.js" type="text/javascript"></script>
 
 		<script
 			src="js/initalize/layers.populate.js"
 			type="text/javascript"></script>
 
 		<!-- Content -->
 		<script src="js/index.js" type="text/javascript"></script>
-		<script src="js/shortcuts.js" type="text/javascript"></script>
 		<script src="js/ui/floating/history.js" type="text/javascript"></script>
 
 		<!-- Load Tools -->
 		<script src="js/ui/tool/dream.js" type="text/javascript"></script>
 		<script src="js/ui/tool/maskbrush.js" type="text/javascript"></script>
+		<script src="js/ui/tool/colorbrush.js" type="text/javascript"></script>
 		<script src="js/ui/tool/select.js" type="text/javascript"></script>
 		<script src="js/ui/tool/stamp.js" type="text/javascript"></script>
 
 		<!-- Initialize -->
+		<script
+			src="js/initalize/shortcuts.populate.js"
+			type="text/javascript"></script>
 		<script
 			src="js/initalize/toolbar.populate.js"
 			type="text/javascript"></script>
 		<script
 			src="js/initalize/debug.populate.js"
 			type="text/javascript"></script>
+		<script src="js/initalize/ui.populate.js" type="text/javascript"></script>
 	</body>
 </html>