From 6fc9098035afd69abf43918fdfe461125f6f1c17 Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Sat, 24 Sep 2022 17:31:36 +0530
Subject: [PATCH] Slightly improve how the inpainting editor canvas looks

---
 ui/index.html     |  6 +++---
 ui/media/main.css |  8 ++++++++
 ui/media/main.js  | 10 ++--------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 13bea587..c1617e0b 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/png" href="/media/favicon-16x16.png" sizes="16x16">
     <link rel="icon" type="image/png" href="/media/favicon-32x32.png" sizes="32x32">
-    <link rel="stylesheet" href="/media/main.css?v=2">
+    <link rel="stylesheet" href="/media/main.css?v=3">
     <link rel="stylesheet" href="/media/modifier-thumbnails.css?v=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
     <link rel="stylesheet" href="/media/drawingboard.min.css">
@@ -66,7 +66,7 @@
                         <button class="init_image_clear image_clear_btn">X</button>
 
                         <br/>
-                        <input id="enable_mask" name="enable_mask" type="checkbox"> <label for="enable_mask">In-Painting (select the area which the AI will paint into)</label>
+                        <input id="enable_mask" name="enable_mask" type="checkbox"> <label for="enable_mask">In-Painting (beta) <small>(select the area which the AI will paint into)</small></label>
                         <div id="inpaintingEditor"></div>
                     </div>
                 </div>
@@ -210,7 +210,7 @@
 </div>
 </body>
 
-<script src="media/main.js?v=2"></script>
+<script src="media/main.js?v=3"></script>
 <script>
 async function init() {
     await loadModifiers()
diff --git a/ui/media/main.css b/ui/media/main.css
index c769bcc0..388c8ccd 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -262,6 +262,14 @@ img {
 .drawing-board-canvas-wrapper {
     background-size: 100% 100%;
 }
+.drawing-board-control > button {
+    background-color: #eee;
+    border-radius: 3pt;
+}
+.drawing-board-control-inner {
+    background-color: #eee;
+    border-radius: 3pt;
+}
 #inpaintingEditor canvas {
     opacity: 0.6;
 }
diff --git a/ui/media/main.js b/ui/media/main.js
index 4dafe1fd..b2f28957 100644
--- a/ui/media/main.js
+++ b/ui/media/main.js
@@ -95,15 +95,9 @@ let inpaintingEditor = new DrawingBoard.Board('inpaintingEditor', {
     controls: [{'DrawingMode': {'filler': false}}, 'Size', 'Navigation']
 })
 let inpaintingEditorCanvasBackground = document.querySelector('.drawing-board-canvas-wrapper')
-// let inpaintingEditorControls = document.querySelector('.drawing-board-controls')
 
-// let inpaintingEditorMetaControl = document.createElement('div')
-// inpaintingEditorMetaControl.className = 'drawing-board-control'
-// let initImageClearBtnToolbar = document.createElement('button')
-// initImageClearBtnToolbar.className = 'init_image_clear'
-// initImageClearBtnToolbar.innerHTML = 'Remove Image'
-// inpaintingEditorMetaControl.appendChild(initImageClearBtnToolbar)
-// inpaintingEditorControls.appendChild(inpaintingEditorMetaControl)
+document.querySelector('.drawing-board-control-navigation-back').innerHTML = '<i class="fa-solid fa-rotate-left"></i>'
+document.querySelector('.drawing-board-control-navigation-forward').innerHTML = '<i class="fa-solid fa-rotate-right"></i>'
 
 let maskResetButton = document.querySelector('.drawing-board-control-navigation-reset')
 maskResetButton.innerHTML = 'Clear'