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>
This commit is contained in:
Victor Seiji Hariki
parent
57a2debe5d
commit
ec59cf5538
9 changed files with 258 additions and 5 deletions
|
|
@ -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");
|
||||
}
|
||||
|
|
|
|||
112
css/index.css
112
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 {
|
||||
|
|
|
|||
|
|
@ -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-right: 5px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding: 5px;
|
||||
padding-left: 10px;
|
||||
|
||||
margin-bottom: auto;
|
||||
font-size: 1.5em;
|
||||
color: black;
|
||||
|
|
|
|||
16
index.html
16
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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
});
|
||||
|
|
|
|||
83
pages/configuration.html
Normal file
83
pages/configuration.html
Normal file
|
|
@ -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>
|
||||
5
res/icons/settings.svg
Normal file
5
res/icons/settings.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 817 B |
5
res/icons/x.svg
Normal file
5
res/icons/x.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 281 B |
Loading…
Reference in a new issue