ui changes & simple layout

kd3n1z · Jan 24, 2023 · 4ceea1b · 4ceea1b
1 parent 5876762
commit 4ceea1b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/www/index.html b/www/index.html
@@ -60,28 +60,28 @@
                     <td><button onclick="btn(this)">7</button></td>
                     <td><button onclick="btn(this)">8</button></td>
                     <td><button onclick="btn(this)">9</button></td>
-                    <td><button onclick="setOper('+')" class="accent2">+</button></td>
+                    <td><button onclick="setOper('/')" class="accent2">&#247;</button></td>
                 </tr>
                 <tr>
                     <td><button onclick="btn(this)">4</button></td>
                     <td><button onclick="btn(this)">5</button></td>
                     <td><button onclick="btn(this)">6</button></td>
-                    <td><button onclick="setOper('-')" class="accent2">-</button></td>
+                    <td><button onclick="setOper('*')" class="accent2">&#215;</button></td>
                 </tr>
                 <tr>
                     <td><button onclick="btn(this)">1</button></td>
                     <td><button onclick="btn(this)">2</button></td>
                     <td><button onclick="btn(this)">3</button></td>
-                    <td><button onclick="setOper('*')" class="accent2">&#215;</button></td>
+                    <td><button onclick="setOper('-')" class="accent2">-</button></td>
                 </tr>
                 <tr>
                     <td><button onclick="comma()">,</button></td>
                     <td><button onclick="btn(this)">0</button></td>
                     <td><button onclick="calc()" class="black">=</button></td>
-                    <td><button onclick="setOper('/')" class="accent2">&#247;</button></td>
+                    <td><button onclick="setOper('+')" class="accent2">+</button></td>
                 </tr>
             </table>
-            <table id="slim">
+            <table id="slim" class="hidden">
                 <tr>
                     <td><button onclick="clearAll()" class="accent">AC</button></td>
                     <td><button onclick="changeSign()">+&#8725;-</button></td>
@@ -127,6 +127,7 @@
                 <div><span>Back color</span><input id="s_body-back-color" type="color" value="#000000" onchange="setSetting('body-back-color', this)"></div>
                 <div><span>Button color</span><input id="s_back-color" type="color" value="#353535" onchange="setSetting('back-color', this)"></div>
                 <div><span>Accent color</span><input id="s_fore-accent-color" type="color" value="#ffa500" onchange="setSetting('fore-accent-color', this)"></div>
+                <div><span>Layout</span><select id="s_layout" onchange="setSetting('layout', this)" value="d"><option value="d">default</option><option value="s">simple</option></select></div>
                 <div><button onclick="resetSettings()">Default</button></div>
             </div>
         </div>

diff --git a/www/index.ts b/www/index.ts
@@ -40,6 +40,10 @@ const defaultSettings = {
     "screen-lines": {
         "css": "0.5",
         "raw": "0.5"
+    },
+    "layout": {
+        "css": "d",
+        "raw": "d"
     }
 };
 
@@ -84,6 +88,18 @@ function loadSettings(): void {
             (document.getElementById("s_" + element) as HTMLInputElement).value = settings[element].raw;
         }catch{}
     });
+
+    if(settings["layout"].raw == "d") {
+        if(document.getElementById("full").classList.contains('hidden')) {
+            document.getElementById("full").classList.remove('hidden');
+            document.getElementById("slim").classList.add('hidden');
+        }
+    }else{
+        if(document.getElementById("slim").classList.contains('hidden')) {
+            document.getElementById("slim").classList.remove('hidden');
+            document.getElementById("full").classList.add('hidden');
+        }
+    }
 
     let rgbHex = settings["body-back-color"].css.slice(1).match(/.{1,2}/g);
 
@@ -295,7 +311,7 @@ function calc(): void {
         }else{
             cExp += element.value;
         }
-        expressionText += element.value + " ";
+        expressionText += (element.type == "oper" ? (element.value == "/" ? "÷" : (element.value == "*" ? "×" : element.value)) : element.value) + " ";
     });
 
     console.log(cExp);
@@ -315,7 +331,7 @@ function display(): void {
     let expressionText: string = "";
 
     expression.forEach(element => {
-        expressionText += " " + element.value;
+        expressionText += " " + (element.type == "oper" ? (element.value == "/" ? "÷" : (element.value == "*" ? "×" : element.value)) : element.value);
     });
 
     resultDisplay.textContent = number;

diff --git a/www/style.css b/www/style.css
@@ -106,11 +106,15 @@ body, html {
     padding: calc(100vh/(var(--screen-lines) + var(--buttons-lines))*var(--screen-lines) + 20px + var(--pad)) calc(20px + var(--pad)) calc(20px + var(--pad)) calc(20px + var(--pad));
 }
 
-.hidden {
+.menu.hidden {
     opacity: 0;
     pointer-events: none;
 }
 
+table.hidden {
+    display: none;
+}
+
 #loading {
     background-color: black;
     position: fixed;
@@ -334,9 +338,4 @@ hr {
 
 input[type="range"] {
     height: 7px;
-}
-
-
-#slim {
-    display: none;
 }