Merge pull request #165 from Flow-Works/feat/add-more-themes

[➕] overrall ui overhaul

Author: ThinLiquid

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "flowos",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "The most aesthetic webOS.",
   "main": "src/bootloader.ts",
   "scripts": {

package.json

@@ -1,6 +1,7 @@
 @import url(https://api.fontshare.com/v2/css?f[]=satoshi@1,2&display=swap);
 
 :root {
+  --primary: #89b4fa;
   --text: #cdd6f4;
   --surface-2: #585b70;
   --surface-1: #45475a;
@@ -59,12 +60,30 @@ toolbar {
   background: var(--mantle);
   margin: 0;
   padding: 10px;
+  border-radius: 20px 20px 0 0;
+  border: 1px solid var(--surface-0);
+  box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.2);
+  user-select: none;
 
   & > div {
     &.outlined {
       padding: 10px;
       background: var(--base);
       border-radius: 10px;
+      border: 1px solid var(--surface-0);
+      box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.1), 0 0px 10px rgba(0, 0, 0, 0.1);
+      align-items: center;
+      justify-content: center;
+    }
+
+    &[data-toolbar-id="start"] {
+      cursor: pointer;
+      & * {
+        transition: color .1s ease-in-out;
+        &:hover {
+          color: var(--primary);
+        }
+      }
     }
 
     &[data-toolbar-id="controls"] {
@@ -76,6 +95,7 @@ toolbar {
 
     &[data-toolbar-id="plugins"] {
       width: 24px;
+      cursor: pointer;
       padding: 10px 0;
     }
 
@@ -164,6 +184,12 @@ launcher {
   margin: 0;
   left: 0;
 
+  &[style*="opacity: 1;"] {
+    apps * {
+      pointer-events: all;
+    }
+  }
+
   apps {
     max-height: 70vh;
     padding: 20px;
@@ -172,6 +198,8 @@ launcher {
     display: flex;
     flex-wrap: wrap;
     gap: 40px;
+    overflow: scroll;
+    pointer-events: none;
 
     app {
       flex: 1 0 21%;
@@ -184,7 +212,22 @@ launcher {
       min-width: 125px;
       max-width: 125px;
       text-align: center;
-      overflow: hidden;
+      overflow: visible;
+      transition: transform 0.1s ease-in-out;
+      cursor: pointer;
+
+
+      &:hover {
+        transform: scale(1.1);
+
+        div {
+          background: var(--surface-0);
+        }
+
+        img {
+          filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.75));
+        }
+      }
 
       img {
         width: 100%;
@@ -198,7 +241,9 @@ launcher {
         width: fit-content;
         height: 100%;
         white-space: nowrap;
-
+        padding: 5px 10px;
+        border-radius: 5px;
+        transition: background 0.1s ease-in-out;
       }
     }
   }

src/assets/style.less

@@ -122,6 +122,7 @@ try {
   writeln('An error occured while booting FlowOS.')
   writeln('Please report this error to Flow Works.')
   writeln()
-  terminal.html(terminal.getHtml() + '<a onclick="indexedDB.deleteDatabase('virtualfs')">Clear Virual FileSystem?</a>\n')
   console.error(e.stack)
+  writeln()
+  terminal.html(terminal.getHTML() + '<a href="#" onclick="indexedDB.deleteDatabase(`virtualfs`);window.location.reload()">Would you like to reset the VirtualFS?</a>')
 }

src/bootloader.ts

@@ -60,10 +60,11 @@ export default class Kernel {
   private async setTheme (themeName: string): Promise<void> {
     if (this.fs === false) throw new Error('Filesystem hasn\'t been initiated.')
     const file = await this.fs.readFile(`/etc/themes/${themeName}.theme`)
-    const { colors } = JSON.parse(Buffer.from(file).toString())
+    const { extras, colors } = JSON.parse(Buffer.from(file).toString())
     for (const color in colors) {
       document.documentElement.style.setProperty(`--${color}`, colors[color])
     }
+    document.documentElement.style.setProperty('--primary', extras[parse(Buffer.from(await this.fs.readFile('/etc/flow')).toString()).THEME_PRIMARY as string])
   }
 
   async boot (boot: HTML, progress: HTML, args: URLSearchParams): Promise<void> {

src/kernel.ts

@@ -1,6 +1,5 @@
 import HTML from '../HTML'
-import { AppClosedEvent, AppOpenedEvent, Process } from '../types'
-import { getTime } from '../utils'
+import { Process } from '../types'
 import nullIcon from '../assets/icons/application-default-icon.svg'
 
 const BootLoader: Process = {
@@ -62,80 +61,10 @@ const BootLoader: Process = {
 
     const statusBar = await process.loadLibrary('lib/StatusBar')
 
-    statusBar.element.html(`
-      <div class="outlined" data-toolbar-id="start"><span class="material-symbols-rounded">space_dashboard</span></div>
-      
-      <div data-toolbar-id="apps"></div>
-      <flex></flex>
-      <div class="outlined" data-toolbar-id="plugins"><span class="material-symbols-rounded">expand_less</span></div>
-      <div class="outlined" data-toolbar-id="controls">
-        <span class="material-symbols-rounded battery">battery_2_bar</span>
-        <span class="material-symbols-rounded signal">signal_cellular_4_bar</span>
-      </div>
-      <div class="outlined" data-toolbar-id="calendar"></div>
-      
-    `)
-
-    setInterval((): any => {
-      getTime().then((time) => {
-        statusBar.element.qs('div[data-toolbar-id="calendar"]')?.text(time)
-      }).catch(e => console.error)
-    }, 1000)
-
     statusBar.element.qs('div[data-toolbar-id="start"]')?.on('click', () => {
       launcher.toggle()
     })
 
-    if ('getBattery' in navigator) {
-      (navigator as any).getBattery().then((battery: any) => {
-        statusBar.updateBatteryIcon(battery)
-
-        battery.addEventListener('levelchange', () => {
-          statusBar.updateBatteryIcon(battery)
-        })
-
-        battery.addEventListener('chargingchange', () => {
-          statusBar.updateBatteryIcon(battery)
-        })
-      })
-    } else {
-      const batteryDiv = document.querySelector('div[data-toolbar-id="controls"] > .battery')
-      if (batteryDiv != null) {
-        batteryDiv.innerHTML = 'battery_unknown'
-      }
-    }
-
-    async function ping (startTime: number): Promise<void> {
-      fetch(`${process.kernel.config.SERVER as string}/bare/`)
-        .then(() => {
-          const endTime = performance.now()
-          const pingTime = endTime - startTime
-          statusBar.updateIcon(pingTime)
-        })
-        .catch(() => {
-          (document.querySelector('div[data-toolbar-id="controls"] > .signal') as HTMLElement).innerHTML = 'signal_cellular_connected_no_internet_4_bar'
-        })
-    }
-
-    setInterval((): any => ping(performance.now()), 10_000)
-
-    document.addEventListener('app_opened', (e: AppOpenedEvent): void => {
-      new HTML('app').appendMany(
-        new HTML('img').attr({
-          alt: `${e.detail.proc.config.name} icon`,
-          'data-id': e.detail.token,
-          src: e.detail.proc.config.icon ?? nullIcon
-        }).on('click', () => {
-          e.detail.win.focus()
-          e.detail.win.toggleMin()
-        })
-      ).appendTo(statusBar.element.qs('div[data-toolbar-id="apps"]')?.elm as HTMLElement)
-    })
-
-    document.addEventListener('app_closed', (e: AppClosedEvent): void => {
-      statusBar.element.qs('div[data-toolbar-id="apps"]')?.qs(`img[data-id="${e.detail.token}"]`)?.elm.parentElement?.remove()
-    })
-
     document.body.style.flexDirection = 'column-reverse'
 
     await statusBar.element.appendTo(document.body)