Fixed UX bugs and added some UI stuff

- Resize fix - Added resize cursors - Almond theme - Added window controls options [minMax, minMaxClose, MinClose, close] - Added a unmaximize icon for when windows are maximized - Added some new features to the video player
TerbiumOS · Jan 22, 2023 · e76d167 · e76d167
1 parent 95c63d9
commit e76d167
Show file tree

Hide file tree

Showing 49 changed files with 868 additions and 366 deletions.
diff --git a/static/changes/changes.css b/static/changes/changes.css
@@ -52,6 +52,19 @@
     --stopLIGHT: #A5209F;
 }
 
+[data-theme="almond"] {
+    --body: #222;
+    --color: #E89D46;
+    --button-color: #3c3c3c;
+    --glammer: #ffbb6d, #b97d38;
+    --code-background: #3c3c3c;
+    --code-color: #f1b066;
+    --code-border: #E89D46;
+    --mark-color: #ffc787;
+    --stopDARK: #E89D46;
+    --stopLIGHT: #94632b;
+}
+
 html {
     height: 100%;
     scrollbar-color: var(--color) var(--body);

diff --git a/static/changes/index.css b/static/changes/index.css
@@ -31,6 +31,12 @@
     --button-color: #ff40f7;
 }
 
+[data-theme="almond"] {
+    --body: #1c1c1c;
+    --color: #E89D46;
+    --button-color: #E89D46;
+}
+
 html {
     height: 100%;
     scrollbar-color: var(--color) var(--body);

diff --git a/static/help.html b/static/help.html
@@ -28,6 +28,18 @@ <h4>App opening keybinds</h4>
         <command>
             <code>CTRL + ALT + T</code> Open the terminal
         </command>
+        <command>
+            <code>SHIFT + Left Arrow</code> Shifts the focused window to the left
+        </command>
+        <command>
+            <code>SHIFT + Right Arrow</code> Shifts the focused window to the right
+        </command>
+        <command>
+            <code>SHIFT + Up Arrow</code> Shifts the focused window 
+        </command>
+        <command>
+            <code>SHIFT + Down Arrow</code> Minimizes the focused window up maximized
+        </command>
         <h4>Window controlling keybinds</h4>
         <command>
             <code>CTRL + ALT + C</code> Close all windows

diff --git a/static/image/image.css b/static/image/image.css
@@ -51,6 +51,22 @@
     --switch-back-shadow: #ff40f787;
 }
 
+[data-theme="almond"] {
+    --taskbar-bg: #282928;
+    --body: #1a1a1a;
+    --color: #E89D46;
+    --button-background: #313131;
+    --button-color: #CF8B3C;
+
+    --cursorText: url("../resources/cursors/textA.png"), text;
+    --cursorNormal: url("../resources/cursors/normalA.png"), default;
+    --cursorHand: url("../resources/cursors/handA.png"), pointer;
+
+    --switch-thumb: #E89D46;
+    --switch-back: #424242d3;
+    --switch-back-shadow: #E89D4687;
+}
+
 html {
     font-family: pro;
     height: 100%;

diff --git a/static/image/image.js b/static/image/image.js
@@ -1,13 +1,14 @@
 const parent = window.parent;
 let winId;
 const image = document.querySelector('.img');
+let imageWindow;
 
 window.addEventListener('message', (e) => {
     const data = JSON.parse(e.data);
     winId = data.id;
-    const imageWindow = window.parent.document.querySelector(`#${winId}`);
+    imageWindow = window.parent.document.querySelector(`#${winId}`);
     if(localStorage.getItem('photoCoverApp') === "false") {
-        const openImage = window.parent.document.querySelector(`#${winId}`).querySelector('.openImage');
+        const openImage = imageWindow.querySelector('.openImage');
         const imageMagnify = parent.document.querySelector('.zoomIn');
         const imageMini = parent.document.querySelector('.zoomOut');
         imageMagnify.onclick = function () {
@@ -41,7 +42,7 @@ window.addEventListener('message', (e) => {
             };
         }
     } else if(localStorage.getItem('photoCoverApp') === "true"){
-        const openImage = window.parent.document.querySelector(`.openImage`);
+        const openImage = imageWindow.querySelector(`.openImage`);
         openImage.onclick = function () {
             const file = document.createElement('input');
             file.type = 'file';
@@ -72,7 +73,7 @@ window.addEventListener('message', (e) => {
             };
         }
     }
-    const settingsI = window.parent.document.querySelector(`.settingsI`);
+    const settingsI = imageWindow.querySelector(`.settingsI`);
     const settings = document.querySelector('.settingsWindow');
     const spreadImage = document.getElementById("iow");
     const spreadImageHelp = document.getElementById("iowHelp");
@@ -125,7 +126,7 @@ window.addEventListener('message', (e) => {
             settings.classList.toggle('show');
             settings.style.zIndex = -1;
             settings.style.opacity = 0;
-            const openImage = window.parent.document.querySelector(`.openImage`);
+            const openImage = imageWindow.querySelector(`.openImage`);
             openImage.onclick = function () {
                 const file = document.createElement('input');
                 file.type = 'file';
@@ -190,6 +191,7 @@ window.addEventListener('message', (e) => {
                 image.src = "";
             }
             imageWindow.style.background = '';
+            imageWindow.querySelector("#drag").style.backgroundColor = '';
             imageWindow.querySelector("iframe").style.visibility = 'visible';
             imageWindow.querySelector(".title").innerHTML = `
                 <button class="openImage m"><span></span>Open</button><button class="settingsI m"><span></span>Settings</button><button class="zoomIn m zz"><span></span>+</button><button class="zoomOut m zz"><span></span>-</button>
@@ -205,7 +207,7 @@ window.addEventListener('message', (e) => {
                 wincs[i].style.boxShadow = "";
             }
             localStorage.setItem("photoCoverApp", "false");
-            const openImage = window.parent.document.querySelector(`#${winId}`).querySelector('.openImage');
+            const openImage = imageWindow.querySelector('.openImage');
             const imageMagnify = parent.document.querySelector('.zoomIn');
             const imageMini = parent.document.querySelector('.zoomOut');
             imageMagnify.onclick = function () {
@@ -238,7 +240,7 @@ window.addEventListener('message', (e) => {
                     };
                 };
             }
-            window.parent.document.querySelector(`.settingsI`).onclick = function () {
+            imageWindow.querySelector(`.settingsI`).onclick = function () {
                 if (!settings.classList.contains('show')) {
                     settings.style.zIndex = 101;
                     setTimeout(() => {