Merge pull request #16 from RisingGlitch/master

[✨]  Added info app / "canResize" option for WM

src/apps/editor.ts

@@ -30,7 +30,8 @@ export default class EditorApp implements App {
       title: this.name,
       icon,
       width: 500,
-      height: 400
+      height: 400,
+      canResize: true
     })
 
     if (data != null) {

src/apps/files.ts

@@ -17,7 +17,8 @@ export default class FilesApp implements App {
       title: this.name,
       icon,
       width: 500,
-      height: 400
+      height: 400,
+      canResize: true
     })
 
     win.content.style.display = 'flex'

src/apps/info.ts

@@ -0,0 +1,60 @@
+import icon from '../assets/icons/info.png'
+import { App } from '../types.ts'
+import { FlowWindow } from '../wm.ts'
+
+export default class SettingsApp implements App {
+  name = 'Info'
+  pkg = 'flow.info'
+  icon = icon
+  version = '1.0.0'
+  canResize = true
+
+  async open (): Promise<FlowWindow> {
+    const win = window.wm.createWindow({
+      title: this.name,
+      icon,
+      width: 300,
+      height: 400,
+      canResize: false
+    })
+
+    win.content.style.padding = '10px'
+    win.content.innerHTML = `
+        <h1>FlowOS</h1>
+        <p>v2.0</p>
+
+        <p> Created by ThinLiquid, 1nspird_, Proudparot2, Systemless_  </p>
+
+        <a class="discord" href="https://discord.gg/flowos"> Discord </a>
+
+        <a class="github" href="https://github.com/Flow-Works/FlowOS-2.0"> Github </a>
+
+        <style>
+
+          #contributers {
+            font-size:12px;
+          }
+
+          h1 {
+            text-align: center;
+            font-size: 48px;
+          }
+          p {
+            text-align: center;
+          }
+          .github {
+            float:right;
+            position: relative;
+            top: 125px;
+          }
+          .discord {
+            float:left;
+            position: relative;
+            top: 125px;
+          }
+        </style>
+    `
+
+    return win
+  }
+}

src/apps/music.ts

@@ -11,7 +11,10 @@ export default class MusicApp implements App {
   async open (): Promise<FlowWindow> {
     const win = window.wm.createWindow({
       title: this.name,
-      icon
+      icon,
+      width: 700,
+      height: 300,
+      canResize: true
     })
 
     win.content.innerHTML = 'hi'

src/apps/settings.ts

@@ -13,7 +13,8 @@ export default class SettingsApp implements App {
       title: this.name,
       icon,
       width: 700,
-      height: 300
+      height: 300,
+      canResize: true
     })
 
     win.content.style.padding = '10px'

src/flow.ts

@@ -4,13 +4,15 @@ import SettingsApp from './apps/settings.ts'
 import FilesApp from './apps/files.ts'
 import MusicApp from './apps/music.ts'
 import EditorApp from './apps/editor.ts'
+import InfoApp from './apps/info.ts'
 
 const flow: Flow = {
   apps: {
     'flow.settings': new SettingsApp(),
     'flow.music': new MusicApp(),
     'flow.files': new FilesApp(),
-    'flow.editor': new EditorApp()
+    'flow.editor': new EditorApp(),
+    'flow.info': new InfoApp()
   },
   async openApp (pkg: string, data: any) {
     const win = this.apps[pkg].open(data)

src/types.ts

@@ -40,6 +40,8 @@ export interface FlowWindowConfig {
   width?: number
   height?: number
 
+  canResize: boolean
+
   minWidth?: number
   minHeight?: number
 }

src/wm.ts

@@ -93,13 +93,20 @@ export class FlowWindow {
     this.element.style.height = `${config.height ?? 200}px`
 
     this.header = document.createElement('window-header')
-    this.header.innerHTML = `<img src="${config.icon}"></img> <div class="title">${config.title}</div><div style="flex:1;"></div><i id="min" class='bx bx-minus'></i><i id="max" class='bx bx-checkbox'></i><i id="close" class='bx bx-x'></i>`;
+    this.header.innerHTML = `<img src="${config.icon}"></img> <div class="title">${config.title}</div><div style="flex:1;"></div><i id="min" class='bx bx-minus'></i><i id="close" class='bx bx-x'></i>`
+    if (config.canResize) {
+      this.header.innerHTML = `<img src="${config.icon}"></img> <div class="title">${config.title}</div><div style="flex:1;"></div><i id="min" class='bx bx-minus'></i><i id="max" class='bx bx-checkbox'></i><i id="close" class='bx bx-x'></i>`
+    }
+
     (this.header.querySelector('#close') as HTMLElement).onclick = () => {
       this.close()
     }
 
-    (this.header.querySelector('#min') as HTMLElement).onclick = () => this.toggleMin();
-    (this.header.querySelector('#max') as HTMLElement).onclick = () => this.toggleMax()
+    (this.header.querySelector('#min') as HTMLElement).onclick = () => this.toggleMin()
+
+    if (config.canResize) {
+      (this.header.querySelector('#max') as HTMLElement).onclick = () => this.toggleMax()
+    }
 
     this.content = document.createElement('window-content')