From 45335e8da1d1657f2f1b727dc71bdf4cdcd86f26 Mon Sep 17 00:00:00 2001
From: Stewart Allen <stewart.allen@gmail.com>
Date: Sun, 2 Jun 2024 18:55:20 -0400
Subject: [PATCH] tweak slide out settings, add preference

---
 src/kiri/conf.js   |  1 +
 src/kiri/init.js   | 10 +++++++++-
 web/kiri/index.css | 23 ++++++++++++++---------
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/kiri/conf.js b/src/kiri/conf.js
index 208eec2e..0ea495ea 100644
--- a/src/kiri/conf.js
+++ b/src/kiri/conf.js
@@ -765,6 +765,7 @@ const conf = exports({
             dark: false,
             shiny: false,
             decals: false,
+            drawer: false,
             zoomSpeed: 1.0,
             lineType: "path",
             autoSave: true,
diff --git a/src/kiri/init.js b/src/kiri/init.js
index 904065ce..fa1b97e9 100644
--- a/src/kiri/init.js
+++ b/src/kiri/init.js
@@ -169,7 +169,6 @@ gapp.register("kiri.init", [], (root, exports) => {
 
     function booleanSave() {
         let control = settings().controller;
-        let isDark = control.dark;
         let doAlert = ui.ortho.checked !== control.ortho;
         if (control.assembly != ui.assembly.checked) {
             kiri.client.wasm(ui.assembly.checked);
@@ -179,6 +178,7 @@ gapp.register("kiri.init", [], (root, exports) => {
         }
         control.shiny = ui.shiny.checked;
         control.decals = ui.decals.checked;
+        control.drawer = ui.drawer.checked;
         control.showOrigin = ui.showOrigin.checked;
         control.showRulers = ui.showRulers.checked;
         control.autoLayout = ui.autoLayout.checked;
@@ -204,6 +204,7 @@ gapp.register("kiri.init", [], (root, exports) => {
         api.platform.update_size();
         uc.setHoverPop(false);
         updateStats();
+        updateDrawer();
         if (control.decals && !control.dark) {
             // disable decals in dark mode
             loadDeviceTexture(currentDevice, deviceTexture);
@@ -216,6 +217,11 @@ gapp.register("kiri.init", [], (root, exports) => {
         }
     }
 
+    function updateDrawer() {
+        const { drawer } = settings().controller;
+        $c('app', drawer ? 'slideshow' : '', !drawer ? 'slideshow' : '');
+    }
+
     function updateStats() {
         if (self.debug !== true) {
             return;
@@ -1541,6 +1547,7 @@ gapp.register("kiri.init", [], (root, exports) => {
         space.platform.onMove(conf.save);
         space.platform.setRound(true);
         space.useDefaultKeys(api.feature.on_key === undefined || api.feature.on_key_defaults);
+        updateDrawer();
 
         // api augmentation with local functions
         api.device.export = deviceExport;
@@ -1750,6 +1757,7 @@ gapp.register("kiri.init", [], (root, exports) => {
             reverseZoom:      newBoolean(LANG.op_invr_s, booleanSave, {title:LANG.op_invr_l}),
             ortho:            newBoolean(LANG.op_orth_s, booleanSave, {title:LANG.op_orth_l}),
             dark:             newBoolean(LANG.op_dark_s, booleanSave, {title:LANG.op_dark_l}),
+            drawer:           newBoolean('slide out', booleanSave, {title:'slide out settings drawer'}),
             devel:            newBoolean(LANG.op_devl_s, booleanSave, {title:LANG.op_devl_l}),
             _____:            newGroup(LANG.op_disp, $('prefs-gen2'), {inline: true}),
             showOrigin:       newBoolean(LANG.op_shor_s, booleanSave, {title:LANG.op_shor_l}),
diff --git a/web/kiri/index.css b/web/kiri/index.css
index b6c1fd92..0fc54e78 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -25,7 +25,8 @@
     --blue-4: rgb(221, 228, 234);
     --blue-5: rgb(240, 243, 245);
     --blue-6: rgb(247, 249, 250);
-    --scroll-bg: rgba(221, 228, 234, 0.25)
+    --slide-bg: rgba(190, 204, 219, 0.5);
+    --scroll-bg: rgba(221, 228, 234, 0.25);
 }
 
 /* surface size configuration and font import */
@@ -679,7 +680,7 @@ th, tr, td, label {
 }
 
 .slideshow #panel-left .settings {
-    transform: translateX(-90%);
+    transform: translateX(-100%);
     transition: transform 0.15s ease-in-out;
 }
 .slideshow #panel-left:hover .settings {
@@ -689,15 +690,19 @@ th, tr, td, label {
     left: -100%;
 }
 .slideshow #slide-show {
-    transition: left 0.15s ease-in-out;
+    /* transition: left 0.15s ease-in-out; */
     position: absolute;
-    top: 0;
+    top: 5px;
     left: 0;
-    bottom: 0;
-    width: 20px;
-    background-color: var(--blue-3);
-    border-right: 2px dashed var(--blue-1);
-    z-index: 5000;
+    bottom: 5px;
+    width: 25px;
+    background-color: var(--slide-bg);
+    border-top: 1px solid var(--blue-1);
+    border-right: 1px solid var(--blue-1);
+    border-bottom: 1px solid var(--blue-1);
+    border-bottom-right-radius: 4px;
+    border-top-right-radius: 4px;
+    z-index: -1;
 }
 .slideshow #slide-show span {
     display: flex;