Very crude settings interface

Very crude settings interface with only canvas size for now. Canvas size
only affects canvas on next page load. Dynamic resizing in the horizon,
but will take a while.

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

css/icons.css

@@ -37,3 +37,8 @@
 	mask-image: url("/res/icons/chevron-first.svg");
 	transform: rotate(-90deg);
 }
+
+.ui.icon > .icon-settings {
+	-webkit-mask-image: url("/res/icons/settings.svg");
+	mask-image: url("/res/icons/settings.svg");
+}

css/index.css

@@ -20,6 +20,10 @@ body {
 	overflow: clip;
 }
 
+.invisible {
+	display: none !important;
+}
+
 .collapsible {
 	background-color: rgb(0, 0, 0);
 	color: rgb(255, 255, 255);
@@ -68,6 +72,89 @@ body {
 	cursor: auto;
 }
 
+#page-overlay-wrapper {
+	position: fixed;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+
+	background-color: #fff6;
+	backdrop-filter: blur(5px);
+
+	transition-duration: 50ms;
+
+	z-index: 1000;
+}
+
+.page-overlay-window {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+
+	border-radius: 10px;
+
+	color: var(--c-text);
+
+	overflow: hidden;
+
+	position: absolute;
+
+	margin: auto;
+
+	background-color: var(--c-primary);
+}
+
+.page-overlay-window .close {
+	position: absolute;
+
+	cursor: pointer;
+
+	top: 0;
+	right: 0;
+
+	margin: 5px;
+
+	width: 25px;
+	height: 25px;
+
+	-webkit-mask-image: url("/res/icon/x.svg");
+	mask-image: url("/res/icons/x.svg");
+
+	background-color: var(--c-text);
+}
+
+.page-overlay-window .close:hover {
+	transform: scale(1.1);
+}
+
+.page-overlay-window .title {
+	padding: 10px;
+	padding-top: 7px;
+
+	font-size: large;
+	font-weight: bold;
+
+	margin: auto;
+
+	background-color: var(--c-primary);
+}
+
+#page-overlay {
+	border: 0;
+
+	max-width: 300px;
+	max-height: 400px;
+
+	width: 100%;
+	height: 100%;
+}
+
 /* Mask colors for mask inversion */
 /* Filters are some magic acquired at https://codepen.io/sosuke/pen/Pjoqqp */
 .mask-canvas {
@@ -186,6 +273,31 @@ input#host {
 	box-sizing: border-box;
 }
 
+/* Settings button */
+.ui.icon.header-button {
+	padding: 0;
+	border: 0;
+
+	cursor: pointer;
+
+	background-color: transparent;
+}
+
+.ui.icon.header-button > *:first-child {
+	background-color: black;
+
+	-webkit-mask-size: contain;
+	mask-size: contain;
+
+	width: 28px;
+	height: 28px;
+	transition-duration: 30ms;
+}
+
+.ui.icon.header-button:hover > *:last-child {
+	transform: scale(1.1);
+}
+
 /* Prompt Fields */
 
 div.prompt-wrapper {

css/ui/generic.css

@@ -7,15 +7,18 @@
 }
 
 .floating-window-title {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
 	cursor: move;
 	background-color: rgba(104, 104, 104, 0.75);
 
 	user-select: none;
 
-	padding-left: 5px;
+	padding: 5px;
-	padding-right: 5px;
+	padding-left: 10px;
-	padding-top: 5px;
+
-	padding-bottom: 5px;
 	margin-bottom: auto;
 	font-size: 1.5em;
 	color: black;

index.html

@@ -32,6 +32,10 @@
 			style="left: 10px; top: 10px">
 			<div id="infoTitleBar" class="draggable floating-window-title">
 				openOutpaint 🐠
+				<div style="flex: 1"></div>
+				<button id="settings-btn" class="ui icon header-button">
+					<div class="icon-settings"></div>
+				</button>
 			</div>
 			<div id="info" class="menu-container" style="min-width: 200px">
 				<label>
@@ -272,6 +276,18 @@
 		<!-- Overlay -->
 		<canvas id="layer-overlay" class="layer-overlay"></canvas>
 
+		<!-- Page Overlay -->
+		<div id="page-overlay-wrapper" class="page-overlay invisible">
+			<div class="page-overlay-window">
+				<div class="title">
+					Settings
+					<button id="settings-btn-close" class="close"></button>
+				</div>
+				<div class="ui separator"></div>
+				<iframe id="page-overlay" src="/pages/configuration.html"></iframe>
+			</div>
+		</div>
+
 		<!-- Base Libs -->
 		<script src="js/lib/util.js" type="text/javascript"></script>
 		<script src="js/lib/input.js" type="text/javascript"></script>

js/initalize/layers.populate.js

@@ -1,7 +1,14 @@
 // Layering
 const imageCollection = layers.registerCollection(
 	"image",
-	{w: 2560, h: 1536},
+	{
+		w: parseInt(
+			(localStorage && localStorage.getItem("settings.canvas-width")) || 2048
+		),
+		h: parseInt(
+			(localStorage && localStorage.getItem("settings.canvas-height")) || 2048
+		),
+	},
 	{
 		name: "Image Layers",
 	}

js/initalize/ui.populate.js

@@ -1,3 +1,6 @@
+/**
+ * Floating window setup
+ */
 document.querySelectorAll(".floating-window").forEach(
 	/**
 	 * Runs for each floating window
@@ -24,6 +27,9 @@ document.querySelectorAll(".floating-window").forEach(
 	}
 );
 
+/**
+ * Collapsible element setup
+ */
 var coll = document.getElementsByClassName("collapsible");
 for (var i = 0; i < coll.length; i++) {
 	let active = false;
@@ -55,3 +61,14 @@ for (var i = 0; i < coll.length; i++) {
 		}
 	});
 }
+
+/**
+ * Settings overlay setup
+ */
+document.getElementById("settings-btn").addEventListener("click", () => {
+	document.getElementById("page-overlay-wrapper").classList.toggle("invisible");
+});
+
+document.getElementById("settings-btn-close").addEventListener("click", () => {
+	document.getElementById("page-overlay-wrapper").classList.toggle("invisible");
+});

pages/configuration.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en-US">
+	<head>
+		<meta charset="utf-8" />
+		<title>openOutpaint 🐠</title>
+		<!-- CSS Variables -->
+		<link href="/css/colors.css" rel="stylesheet" />
+		<link href="/css/icons.css" rel="stylesheet" />
+
+		<link href="/css/index.css" rel="stylesheet" />
+		<link href="/css/layers.css" rel="stylesheet" />
+
+		<link href="/css/ui/generic.css" rel="stylesheet" />
+
+		<link href="/css/ui/history.css" rel="stylesheet" />
+		<link href="/css/ui/layers.css" rel="stylesheet" />
+		<link href="/css/ui/toolbar.css" rel="stylesheet" />
+
+		<!-- Tool Specific CSS -->
+		<link href="/css/ui/tool/dream.css" rel="stylesheet" />
+		<link href="/css/ui/tool/stamp.css" rel="stylesheet" />
+		<link href="/css/ui/tool/colorbrush.css" rel="stylesheet" />
+
+		<link rel="icon" type="image/x-icon" href="favicon.ico" />
+
+		<style>
+			body {
+				color: var(--c-text);
+
+				margin: 0;
+				padding: 15px;
+			}
+
+			label {
+				display: flex;
+			}
+
+			input.canvas-size-input {
+				-webkit-appearance: textfield;
+				-moz-appearance: textfield;
+
+				width: 50px;
+			}
+		</style>
+	</head>
+
+	<body>
+		<label style="display: flex">
+			Canvas Size:
+			<input
+				id="canvas-width"
+				class="canvas-size-input"
+				type="number"
+				step="1" />
+			x
+			<input
+				id="canvas-height"
+				class="canvas-size-input"
+				type="number"
+				step="1" />
+		</label>
+
+		<script>
+			const canvasWidth = document.getElementById("canvas-width");
+			const canvasHeight = document.getElementById("canvas-height");
+
+			function writeToLocalStorage() {
+				localStorage.setItem("settings.canvas-width", canvasWidth.value);
+				localStorage.setItem("settings.canvas-height", canvasHeight.value);
+			}
+
+			// Loads values from local storage
+			canvasWidth.value = localStorage.getItem("settings.canvas-width") || 2048;
+			canvasHeight.value =
+				localStorage.getItem("settings.canvas-height") || 2048;
+
+			writeToLocalStorage();
+
+			canvasWidth.onchange = writeToLocalStorage;
+			canvasHeight.onchange = writeToLocalStorage;
+		</script>
+	</body>
+</html>

res/icons/settings.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
+  <circle cx="12" cy="12" r="3"></circle>
+
+</svg>

res/icons/x.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="18" y1="6" x2="6" y2="18"></line>
+  <line x1="6" y1="6" x2="18" y2="18"></line>
+
+</svg>