This commit is contained in:
RisingGlitch 2023-10-17 17:44:22 -07:00
parent f0b90da7ea
commit aba3cc85eb
8 changed files with 85 additions and 8 deletions

View file

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

View file

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

60
src/apps/info.ts Normal file
View file

@ -0,0 +1,60 @@
import icon from '../assets/icons/settings.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: 80px;
}
.discord {
float:left;
position: relative;
top: 80px;
}
</style>
`
return win
}
}

View file

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

View file

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

View file

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

View file

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

View file

@ -93,13 +93,20 @@ export class FlowWindow {
this.element.style.height = `${config.height ?? 200}px` this.element.style.height = `${config.height ?? 200}px`
this.header = document.createElement('window-header') 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.header.querySelector('#close') as HTMLElement).onclick = () => {
this.close() this.close()
} }
(this.header.querySelector('#min') as HTMLElement).onclick = () => this.toggleMin(); (this.header.querySelector('#min') as HTMLElement).onclick = () => this.toggleMin()
if (config.canResize) {
(this.header.querySelector('#max') as HTMLElement).onclick = () => this.toggleMax() (this.header.querySelector('#max') as HTMLElement).onclick = () => this.toggleMax()
}
this.content = document.createElement('window-content') this.content = document.createElement('window-content')