Merge pull request #184 from Flow-Works/feat/create-a-windows-style-start-menu

ThinLiquid · web-flow · commit 5c8eafce99bc · 2024-02-02T04:03:12.000Z
Feat/create-a-windows-style-start-menu
diff --git a/index.html b/index.html
@@ -5,6 +5,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>FlowOS</title>
     <link rel="shortcut icon" href="./src/assets/flow.png" type="image/png">
+
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9675905177363247" crossorigin="anonymous"></script>
+    
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-X4XVQRWEVM"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-X4XVQRWEVM');
+    </script>
   </head>
   <body>
     <script src="./src/bootloader.ts" type="module"></script>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flowos",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "The most aesthetic webOS.",
   "main": "src/bootloader.ts",
   "scripts": {
diff --git a/src/assets/style.less b/src/assets/style.less
@@ -49,9 +49,6 @@ html {
 
   color: var(--text);
 }
-.bx {
-  font-size: 25px;
-}
 
 toolbar {
   width: 100%;
@@ -64,6 +61,8 @@ toolbar {
   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;
+  position: relvative;
+  z-index: 1001;
 
   & > div {
     &.outlined {
@@ -168,128 +167,9 @@ window-area {
   }
 }
 
-launcher {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  top: 0;
-  background: color-mix(in srgb, var(--crust) 20%, transparent);
-  z-index: 99999999999999999999999;
-  width: calc(100vw + 20px);
-  height: calc(100vh + 20px);
-  gap: 20px;
-  transition: 0.2s opacity, 0.2s backdrop-filter;
-  margin: 0;
-  left: 0;
-
-  &[style*="opacity: 1;"] {
-    apps * {
-      pointer-events: all;
-    }
-  }
-
-  apps {
-    max-height: 70vh;
-    padding: 20px;
-    margin: 40px;
-    justify-content: center;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 40px;
-    overflow: scroll;
-    pointer-events: none;
-
-    app {
-      flex: 1 0 21%;
-      flex-grow: 0;
-      align-items: center;
-      justify-content: center;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      min-width: 125px;
-      max-width: 125px;
-      text-align: center;
-      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%;
-        border-radius: var(--app-radius);
-        aspect-ratio: 1 / 1;
-      }
-
-      div {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: fit-content;
-        height: 100%;
-        white-space: nowrap;
-        padding: 5px 10px;
-        border-radius: 5px;
-        transition: background 0.1s ease-in-out;
-      }
-    }
-  }
-
-  input {
-    background: var(--mantle);
-    border: 2px solid var(--crust);
-    border-radius: 10px;
-    padding: 10px;
-    width: 300px;
-    max-width: 100vw;
-    text-align: center;
-    transition: border 0.2s;
-
-    &:focus {
-      outline: none;
-      border: 2px solid var(--text);
-    }
-  }
-}
-
-preloader {
-  position: absolute;
-  z-index: 9999999;
-  top: 0;
-  left: 0;
-  background: var(--crust);
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  transition: opacity 1s;
-
-  .status, .done {
-    text-align: center;
-  }
-
-  .done div {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  }
-}
-
-flex {
-  flex: 1;
+.gradient-blur {
+  mask: linear-gradient(to bottom, transparent, black 5%), linear-gradient(to top, transparent, black 35%);
+  mask-size: 100% 50%;
+  mask-repeat: no-repeat;
+  mask-position: top, bottom;
 }
diff --git a/src/system/Desktop.ts b/src/system/Desktop.ts
@@ -16,15 +16,34 @@ const BootLoader: Process = {
     const { fs } = process
     const wm = await process.loadLibrary('lib/WindowManager')
     const launcher = await process.loadLibrary('lib/Launcher')
+    const { Input } = await process.loadLibrary('lib/Components')
 
-    const input = new HTML('input').attr({
+    const input = Input.new().attr({
       type: 'text',
       placeholder: 'Search'
+    }).style({
+      width: '100%',
+      'border-radius': '10px',
+      padding: '5px',
+      'margin-bottom': '10px',
+      position: 'sticky',
+      top: '0'
     }).on('keyup', () => {
       apps.elm.innerHTML = ''
       renderApps().catch(e => console.error(e))
     }).appendTo(launcher.element)
-    const apps = new HTML('apps').appendTo(launcher.element)
+
+    const apps = new HTML('div').style({
+      overflow: 'scroll',
+      height: 'max-content',
+      position: 'relative'
+    })
+
+    new HTML('div').style({
+      height: '100%',
+      overflow: 'scroll',
+      'padding-bottom': '30px'
+    }).append(apps).appendTo(launcher.element).class('gradient-blur')
 
     const renderApps = async (): Promise<void> => {
       apps.html('')
@@ -36,13 +55,21 @@ const BootLoader: Process = {
             const path = Buffer.from(data).toString()
             const executable = await process.kernel.getExecutable(path) as Process
 
-            const appElement = new HTML('app').on('click', () => {
+            const appElement = new HTML('div').style({
+              display: 'flex',
+              'align-items': 'center',
+              padding: '5px',
+              cursor: 'pointer',
+              gap: '10px',
+              'border-bottom': '1px solid var(--surface-0)'
+            }).on('click', () => {
               process.launch(path).catch((e: any) => console.error(e))
               launcher.toggle()
             }).appendTo(apps)
             new HTML('img').attr({
               src: executable.config.icon ?? nullIcon,
-              alt: `${executable.config.name} icon`
+              alt: `${executable.config.name} icon`,
+              height: '40px'
             }).appendTo(appElement)
             new HTML('div').text(executable.config.name).appendTo(appElement)
           }).catch((e: any) => console.error(e))
diff --git a/src/system/lib/Components.ts b/src/system/lib/Components.ts
@@ -20,7 +20,7 @@ const Components: Library = {
           padding: '2.5px',
           outline: 'none',
           background: 'transparent',
-          border: '1px solid const(--surface-0)'
+          border: '1px solid var(--surface-0)'
         })
         return input
       }
@@ -30,8 +30,8 @@ const Components: Library = {
         function shiftColor (col: string, amt: number): string {
           const num = parseInt(col, 16)
           const r = (num >> 16) + amt
-          const b = ((num >> 8) & 0x00FF) + amt
-          const g = (num & 0x0000FF) + amt
+          const b = ((num >> 8) & 0x00_FF) + amt
+          const g = (num & 0x00_00_FF) + amt
           const newColor = g | (b << 8) | (r << 16)
           return newColor.toString(16)
         }
@@ -52,7 +52,7 @@ const Components: Library = {
           button.style({
             background: 'var(--primary)',
             color: 'var(--base)',
-            border: '1px solid #' + shiftColor(document.documentElement.style.getPropertyValue('--primary').replace('#', ''), -40) + ''
+            border: `1px solid #${shiftColor(document.documentElement.style.getPropertyValue('--primary').replace('#', ''), -40)}`
           })
         }
         return button
@@ -77,11 +77,9 @@ const Components: Library = {
           'border-radius': '5px',
           padding: '2.5px',
           background: 'var(--base)',
-          border: '1px solid const(--surface-1)'
+          border: '1px solid var(--surface-1)'
         }).appendMany(
-          ...options.map((option) => {
-            return new HTML('option').text(option)
-          })
+          ...options.map((option) => new HTML('option').text(option))
         )
         return dropdown
       }
diff --git a/src/system/lib/Launcher.ts b/src/system/lib/Launcher.ts
@@ -9,25 +9,34 @@ const Launcher: Library = {
     targetVer: '1.0.0-indev.0'
   },
   init: (l, k) => {
-    Launcher.data.element = new l.HTML('launcher').style({
-      opacity: '0',
-      'backdrop-filter': 'blur(0px)',
-      'pointer-events': 'none'
+    Launcher.data.element = new l.HTML('div').style({
+      background: `${document.documentElement.style.getPropertyValue('--mantle')}E0`,
+      width: '350px',
+      height: '500px',
+      margin: '20px',
+      padding: '10px',
+      overflow: 'hidden',
+      'border-radius': '20px',
+      border: '1px solid var(--surface-0)',
+      position: 'fixed',
+      bottom: '-500px',
+      left: '0',
+      transition: 'bottom 0.5s cubic-bezier(1,0,0,1)',
+      'z-index': '1000',
+      'box-shadow': '0 0 10px 0 rgba(0,0,0,0.5)',
+      'user-select': 'none',
+      'backdrop-filter': 'blur(10px)'
     })
   },
   data: {
     toggle: () => {
       if (isLauncherOpen) {
         Launcher.data.element.style({
-          opacity: '0',
-          'backdrop-filter': 'blur(0px)',
-          'pointer-events': 'none'
+          bottom: '-500px'
         })
       } else {
         Launcher.data.element.style({
-          opacity: '1',
-          'backdrop-filter': 'blur(10px)',
-          'pointer-events': 'all'
+          bottom: '68px'
         })
       }
 
diff --git a/src/system/lib/StatusBar.ts b/src/system/lib/StatusBar.ts
@@ -14,7 +14,7 @@ const StatusBar: Library = {
       <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 style="flex:1;"></div>
       <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>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "flowos",`
`3`		`- "version": "2.2.0",`
	`3`	`+ "version": "2.3.0",`
`4`	`4`	`"description": "The most aesthetic webOS.",`
`5`	`5`	`"main": "src/bootloader.ts",`
`6`	`6`	`"scripts": {`