upd

Author: GyverLibs

src/web/settings.h

@@ -1,6 +1,6 @@
 {
   "name": "settings",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "main": "index.js",
   "scripts": {
     "build": "webpack --config ./webpack.single.js & webpack --config ./webpack.index.js",

web/package.json

@@ -196,7 +196,7 @@ export default class Settings {
         });
 
         this.$main_col.addEventListener("widget_event", async (e) => {
-            let res;
+            let res = null;
             switch (e.data.action) {
                 case 'click': res = await this.send('click', e.data.id); break;
                 case 'set': res = await this.send('set', e.data.id, e.data.value); break;

web/src/script/settings.js

@@ -46,11 +46,12 @@
 
 .dialog textarea {
     display: block;
+    max-height: 350px;
     width: 100%;
     box-sizing: border-box;
     margin-top: 10px;
     resize: none;
-    overflow: hidden;
+    overflow-y: scroll;
     background: var(--back);
     color: var(--font);
     border: none;
@@ -60,4 +61,18 @@
     line-height: 16px;
     min-height: 27px;
     border-radius: 4px;
+}
+
+.dialog textarea::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+}
+
+.dialog textarea::-webkit-scrollbar-track {
+    display: none;
+}
+
+.dialog textarea::-webkit-scrollbar-thumb {
+    background: var(--dark);
+    border-radius: 4px;
 }

web/src/script/ui/dialog.css

@@ -18,7 +18,7 @@ export class DialogCont {
     }
 }
 
-export function BaseDialog(label, content, actionOK, actionCancel) {
+export function BaseDialog(label, content, actionOK, actionCancel, postRender = null) {
     let dialog = new DialogCont();
 
     Component.config(dialog.$root, {
@@ -71,19 +71,23 @@ export function BaseDialog(label, content, actionOK, actionCancel) {
             }
         }
     });
+    if (postRender) postRender();
 }
 
 export function AsyncPrompt(label, value) {
     return new Promise(resolve => {
         let area = Component.make('textarea', {
             text: value,
+            rows: 1,
             events: {
                 input: () => area.style.height = area.scrollHeight + "px",
             }
         });
-        area.style.height = area.scrollHeight + "px";
-        BaseDialog(label, area, () => resolve(area.value), () => resolve(null));
-        setTimeout(() => area.focus(), 10);
+
+        BaseDialog(label, area, () => resolve(area.value), () => resolve(null), () => {
+            area.focus();
+            area.style.height = area.scrollHeight + "px";
+        });
     });
 }
 

web/src/script/ui/dialog.js

@@ -4,18 +4,20 @@ import { AsyncPrompt } from "../ui/dialog";
 
 export default class InputWidget extends WidgetBase {
     empty = false;
+    text = "";
+
     constructor(data) {
         super(data);
 
         super.addOutput(Component.make('span', {
             context: this,
             class: 'value active',
-            var: 'input',
+            var: 'out',
             events: {
                 click: async () => {
-                    let res = await AsyncPrompt(data.label, this.empty ? '' : this.$input.innerText);
-                    if (res != null) {
-                        this.sendEvent(res);
+                    let res = await AsyncPrompt(data.label, this.text);
+                    if (res !== null) {
+                        this.sendEvent(encodeURI(res));
                         this.update(res);
                     }
                 }
@@ -26,8 +28,13 @@ export default class InputWidget extends WidgetBase {
     }
 
     update(value) {
-        value = value ? value.toString() : '';
-        this.empty = (value.length == 0);
-        this.$input.innerText = this.empty ? '...' : value;
+        this.text = value ? value.toString() : '';
+        let disp = '...';
+        if (this.text.length) {
+            let lines = this.text.split('\n');
+            disp = lines[0];
+            if (lines.length > 1) disp += '...';
+        }
+        this.$out.innerText = disp;
     }
 }

web/src/script/widgets/input.js

@@ -3,6 +3,6 @@ import InputWidget from "./input";
 export default class PassWidget extends InputWidget {
     constructor(data) {
         super(data);
-        this.$input.style.filter = 'blur(4px)';
+        this.$out.style.filter = 'blur(4px)';
     }
 }

web/src/script/widgets/pass.js

@@ -1,5 +1,5 @@
 .select {
-    max-height: 400px;
+    max-height: 350px;
     overflow-y: scroll;
     padding: 0;
 }
@@ -17,7 +17,7 @@
 }
 
 .option {
-    font-size: 20px;
+    font-size: 19px;
     padding: 6px 8px;
 }