diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..6d42574 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,2 @@ +# These are supported funding model platforms +ko_fi: flowworks diff --git a/README.md b/README.md index d02afa0..b39f3be 100644 --- a/README.md +++ b/README.md @@ -13,20 +13,20 @@ [![build](https://github.com/Flow-Works/FlowOS-2.0/actions/workflows/build.yml/badge.svg)](https://github.com/Flow-Works/FlowOS-2.0/actions/workflows/build.yml)
- The future of Flow OS + The future of FlowOS
Read the docs »
-## What is Flow OS? +## What is FlowOS? -Flow OS is a web OS proxy made for the Titanium Network 2023 Proxathon. It's extremly customizable with an API to make your own apps, themes, and modules. +FlowOS is a web OS proxy made for the Titanium Network 2023 Proxathon. It's extremly customizable with an API to make your own apps, themes, and modules. ## Getting Started -To run Flow OS on your local machine, you need Node.js 16 or above. +To run FlowOS on your local machine, you need Node.js 16 or above. 1. Clone the repository ```bash @@ -44,7 +44,7 @@ npm run serve ## Made with -Flow OS is made with the following software: +FlowOS is made with the following software: * [Filer](https://github.com/filerjs/filer) * [Prism Code Editor](https://github.com/FIameCaster/prism-code-editor) * [Vite](https://vitejs.dev) diff --git a/index.html b/index.html index 6360138..734e681 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,13 @@ - - - - Flow OS - - - - - - \ No newline at end of file + + + + Flow OS + + + + + + + diff --git a/package-lock.json b/package-lock.json index bbfd532..2667fe3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@ptkdev/logger": "^1.8.0", + "eruda": "^3.0.1", "filer": "^1.4.1", "prism-code-editor": "^1.2.2", "prismjs": "^1.29.0", @@ -1846,6 +1847,11 @@ "is-arrayish": "^0.2.1" } }, + "node_modules/eruda": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/eruda/-/eruda-3.0.1.tgz", + "integrity": "sha512-6q1Xdwga4JTr1mKSW4mzuWSSbmXgqpm/8Wa1QGFGfCWRjC0bCQjbS4u06M1te1moucIS3hBLlbSTPWYH2W0qbQ==" + }, "node_modules/es-abstract": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.2.tgz", diff --git a/package.json b/package.json index d91f9ff..494ea71 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "test": "ts-standard", "dev": "vite", "build": "vite build", - "serve": "vite serve" + "preview": "vite preview" }, "keywords": [], "author": "", @@ -21,6 +21,7 @@ }, "dependencies": { "@ptkdev/logger": "^1.8.0", + "eruda": "^3.0.1", "filer": "^1.4.1", "prism-code-editor": "^1.2.2", "prismjs": "^1.29.0", diff --git a/src/apps/editor.ts b/src/apps/editor.ts index 9625f38..eacf3bc 100644 --- a/src/apps/editor.ts +++ b/src/apps/editor.ts @@ -35,7 +35,7 @@ export default class EditorApp implements App { }) if (data != null) { - win.setTitle('Editor - ' + data.path) + win.setTitle(`Editor - ${data.path}`) win.content.style.display = 'flex' win.content.style.flexDirection = 'column' @@ -100,33 +100,29 @@ export default class EditorApp implements App { const fileBtn = win.content.querySelector('#file-open') const editBtn = win.content.querySelector('#edit-open') - const toggleDropdown = function (id: string): void { + const toggleDropdown = (id: string): void => { const el = win.content.querySelector(`#${id}`) el?.classList.toggle('show') } - fileBtn?.addEventListener('click', function (e) { + fileBtn?.addEventListener('click', (e) => { e.stopPropagation() toggleDropdown('file') }) - editBtn?.addEventListener('click', function (e) { + editBtn?.addEventListener('click', (e) => { e.stopPropagation() toggleDropdown('edit') }) - win.content.addEventListener('click', function () { - const file = win.content.querySelector('#file') - const edit = win.content.querySelector('#edit') - if (file !== null) { - if (file.classList.contains('show')) { - toggleDropdown('file') - } + win.content.addEventListener('click', () => { + const file = (win.content.querySelector('#file') as HTMLElement) + const edit = (win.content.querySelector('#edit') as HTMLElement) + if (file.classList.contains('show')) { + toggleDropdown('file') } - if (edit !== null) { - if (edit.classList.contains('show')) { - toggleDropdown('edit') - } + if (edit.classList.contains('show')) { + toggleDropdown('edit') } }) diff --git a/src/apps/files.ts b/src/apps/files.ts index eca41e9..5c2d5d5 100644 --- a/src/apps/files.ts +++ b/src/apps/files.ts @@ -40,22 +40,22 @@ export default class FilesApp implements App { if (back !== '') { (win.content.querySelector('.back') as HTMLElement).onclick = async () => { if (dir.split('/')[1] === dir.replace('/', '')) { - await setDir('/' + dir.split('/')[0]) + await setDir(`/${dir.split('/')[0]}`) } else { - await setDir('/' + dir.split('/')[1]) + await setDir(`/${dir.split('/')[1]}`) } } } (win.content.querySelector('.file') as HTMLElement).onclick = async () => { const title: string = prompt('Enter file name') ?? 'new-file.txt' - await window.fs.promises.open(dir + '/' + title, 'w') + await window.fs.promises.open(`${dir}/${title}`, 'w') await setDir(dir) } (win.content.querySelector('.folder') as HTMLElement).onclick = async () => { const title: string = prompt('Enter folder name') ?? 'new-folder' - await window.fs.promises.mkdir(dir + '/' + title) + await window.fs.promises.mkdir(`${dir}/${title}`) await setDir(dir) } diff --git a/src/index.ts b/src/index.ts index ea1346d..24f0676 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,7 +1,7 @@ import './style.less' -import StatusBar from './statusbar.ts' -import WM from './wm.ts' +import StatusBar from './statusbar' +import WM from './wm' import * as fs from 'fs' @@ -16,3 +16,15 @@ declare global { window.statusBar = new StatusBar() window.wm = new WM() window.fs = new (window as any).Filer.FileSystem() + +const params = new URLSearchParams(window.location.search) + +async function enableDebug (): Promise { + const { default: eruda } = await import('eruda') + eruda.init() + return await Promise.resolve() +} + +if (params.get('debug') !== null && params.get('debug') !== undefined) { + enableDebug().catch(e => console.error(e)) +} diff --git a/src/modules/battery.ts b/src/modules/battery.ts index dce3252..3909381 100644 --- a/src/modules/battery.ts +++ b/src/modules/battery.ts @@ -9,5 +9,5 @@ export const run = (element: HTMLDivElement): void => { element.style.alignItems = 'center' element.style.paddingLeft = '15px' element.style.paddingRight = '15px' - element.innerHTML = '100%' + element.innerHTML = '🔋 100%' } diff --git a/src/statusbar.ts b/src/statusbar.ts index 3ff1b7c..5111cfc 100644 --- a/src/statusbar.ts +++ b/src/statusbar.ts @@ -27,15 +27,16 @@ class StatusBar { add (item: StatusItem): void { if (this.items.some(x => x.meta.id === item.meta.id)) { console.error(`Unable to register tool; ${item.meta.id} is already registered.`) - } else { - const element = document.createElement('div') - element.setAttribute('data-toolbar-id', item.meta.id) - - this.items.push(item) - this.element.appendChild(element) - - item.run(element) + return } + + const element = document.createElement('div') + element.setAttribute('data-toolbar-id', item.meta.id) + + this.items.push(item) + this.element.appendChild(element) + + item.run(element) } } diff --git a/src/style.less b/src/style.less index 6e19dd6..9efce8c 100644 --- a/src/style.less +++ b/src/style.less @@ -11,7 +11,12 @@ --crust: #11111b; } -body, html { +.bx-category { + color: #181926; +} + +body, +html { background-color: var(--crust); width: 100vw; @@ -25,7 +30,6 @@ body, html { overflow: hidden; } - *::-webkit-scrollbar { display: none; } @@ -34,7 +38,7 @@ body, html { -ms-overflow-style: none; scrollbar-width: none; - font-family: 'Satoshi', sans-serif; + font-family: "Satoshi", sans-serif; font-weight: 600; color: var(--text); @@ -50,12 +54,17 @@ toolbar { margin: 0 0 0 0; justify-content: center; + div[data-toolbar-id="appview"] { + background: rgb(150, 181, 246); + background: linear-gradient(45deg, rgba(150, 181, 246, 1) 0%, rgba(150, 181, 246, 1) 12%, rgba(77, 129, 236, 1) 100%); + color: black; + } & > div { background: var(--base); padding: 5px; border-radius: 5px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1), 0 0px 10px rgba(0, 0, 0, 0.1); - height: 40px!important; + height: 40px !important; display: flex; app { @@ -80,7 +89,6 @@ window-area { margin-bottom: 20px; height: 100%; overflow: hidden; - window { background: var(--base); @@ -91,8 +99,8 @@ window-area { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); background: var(--crust); - transition: .2s opacity, .2s width, .2s height; - + transition: 0.2s opacity, 0.2s width, 0.2s height; + window-header { height: 20px; padding: 7.5px; @@ -106,7 +114,7 @@ window-area { border-radius: 40%; } } - + window-content { height: 100%; border-radius: 10px 10px 0 0; @@ -129,10 +137,12 @@ launcher { top: 0; background: rgba(0, 0, 0, 0.5); z-index: 99999999999999999999999; - width: 100vw; + width: calc(100vw + 20px); height: calc(100vh + 20px); gap: 20px; - transition: .2s opacity, .2s backdrop-filter; + transition: 0.2s opacity, 0.2s backdrop-filter; + margin: 0; + left: 0; apps { max-height: 70vh; @@ -167,11 +177,11 @@ launcher { width: 300px; max-width: 100vw; text-align: center; - transition: border .2s; + transition: border 0.2s; &:focus { outline: none; border: 2px solid var(--text); } } -} \ No newline at end of file +} diff --git a/src/wm.ts b/src/wm.ts index 8afb7a6..a7df34c 100644 --- a/src/wm.ts +++ b/src/wm.ts @@ -192,11 +192,7 @@ class WM { const max = Math.max(...indexes) - if (max === -Infinity) { - return 0 - } else { - return max - } + return max === -Infinity ? 0 : max } createWindow (config: FlowWindowConfig): FlowWindow {