RevelaNetwork/RevelaOS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: overrall ui overhaul

Browse source
This commit is contained in:
ThinLiquid 2024-01-26 09:20:44 +00:00
parent f207101c6a
commit 934d6e80a0
No known key found for this signature in database
GPG key ID: 17538DC3DF6A7387
9 changed files with 422 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/assets/style.less
View file

@ -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;
}
}
}

3
src/kernel.ts
View file

@ -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> {

73
src/system/Desktop.ts
View file

@ -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)

222
src/system/VirtualFS.ts
View file

@ -1,3 +1,4 @@
import { parse, stringify } from 'js-ini'
import { Directory, Errors, File, Permission, Stats } from '../types'
import path from 'path'
const p = path
@ -159,12 +160,127 @@ export const defaultFS: { root: Directory } = {
deleteable: false,
permission: Permission.SYSTEM,
children: {
'Latte.theme': {
type: 'file',
deleteable: true,
permission: Permission.USER,
content: Buffer.from(JSON.stringify({
name: 'Catppuccin Latté',
extras: {
rosewater: '#dc8a78',
flamingo: '#dd7878',
pink: '#ea76cb',
mauve: '#8839ef',
red: '#d20f39',
maroon: '#e64553',
peach: '#fe640b',
yellow: '#df8e1d',
green: '#40a02b',
teal: '#179299',
sky: '#04a5e5',
sapphire: '#209fb5',
blue: '#1e66f5',
lavender: '#7287fd'
},
colors: {
text: '#4c4f69',
'surface-2': '#acb0be',
'surface-1': '#bcc0cc',
'surface-0': '#ccd0da',
base: '#eff1f5',
mantle: '#e6e9ef',
crust: '#dce0e8'
}
}))
},
'Frappe.theme': {
type: 'file',
deleteable: true,
permission: Permission.USER,
content: Buffer.from(JSON.stringify({
name: 'Catppuccin Frappé',
extras: {
rosewater: '#f2d5cf',
flamingo: '#eebebe',
pink: '#f4b8e4',
mauve: '#ca9ee6',
red: '#e78284',
maroon: '#ea999c',
peach: '#ef9f76',
yellow: '#e5c890',
green: '#a6d189',
teal: '#81c8be',
sky: '#99d1db',
sapphire: '#85c1dc',
blue: '#8caaee',
lavender: '#babbf1'
},
colors: {
text: '#c6d0f5',
'surface-2': '#626880',
'surface-1': '#51576d',
'surface-0': '#414559',
base: '#303446',
mantle: '#292c3c',
crust: '#232634'
}
}))
},
'Macchiato.theme': {
type: 'file',
deleteable: true,
permission: Permission.USER,
content: Buffer.from(JSON.stringify({
name: 'Catppuccin Macchiato',
extras: {
rosewater: '#f4dbd6',
flamingo: '#f0c6c6',
pink: '#f5bde6',
mauve: '#c6a0f6',
red: '#ed8796',
maroon: '#ee99a0',
peach: '#f5a97f',
yellow: '#eed49f',
green: '#a6da95',
teal: '#8bd5ca',
sky: '#91d7e3',
sapphire: '#7dc4e4',
blue: '#8aadf4',
lavender: '#b7bdf8'
},
colors: {
text: '#cad3f5',
'surface-2': '#5b6078',
'surface-1': '#494d64',
'surface-0': '#363a4f',
base: '#24273a',
mantle: '#1e2030',
crust: '#181926'
}
}))
},
'Mocha.theme': {
type: 'file',
deleteable: true,
permission: Permission.USER,
content: Buffer.from(JSON.stringify({
name: 'Catpuccin Mocha',
extras: {
rosewater: '#f5e0dc',
flamingo: '#f2cdcd',
pink: '#f5c2e7',
mauve: '#cba6f7',
red: '#f38ba8',
maroon: '#eba0ac',
peach: '#fab387',
yellow: '#f9e2af',
green: '#a6e3a1',
teal: '#94e2d5',
sky: '#89dceb',
sapphire: '#74c7ec',
blue: '#89b4fa',
lavender: '#b4befe'
},
colors: {
text: '#cdd6f4',
'surface-2': '#585b70',
@ -175,6 +291,81 @@ export const defaultFS: { root: Directory } = {
crust: '#11111b'
}
}))
},
'RosePine.theme': {
type: 'file',
deleteable: true,
permission: Permission.USER,
content: Buffer.from(JSON.stringify({
name: 'Rosé Pine',
extras: {
love: '#eb6f92',
gold: '#f6c177',
rose: '#ebbcba',
pine: '#31748f',
foam: '#9ccfd8',
iris: '#c4a7e7'
},
colors: {
text: '#e0def4',
'surface-2': '#524f67',
'surface-1': '#403d52',
'surface-0': '#21202e',
base: '#26233a',
mantle: '#1f1d2e',
crust: '#191724'
}
}))
},
'RosePineMoon.theme': {
type: 'file',
deleteable: true,
permission: Permission.USER,
content: Buffer.from(JSON.stringify({
name: 'Rosé Pine Moon',
extras: {
love: '#eb6f92',
gold: '#f6c177',
rose: '#ebbcba',
pine: '#31748f',
foam: '#9ccfd8',
iris: '#c4a7e7'
},
colors: {
text: '#e0def4',
'surface-2': '#2a283e',
'surface-1': '#44415a',
'surface-0': '#56526e',
base: '#393552',
mantle: '#2a273f',
crust: '#232136'
}
}))
},
'RosePineDawn.theme': {
type: 'file',
deleteable: true,
permission: Permission.USER,
content: Buffer.from(JSON.stringify({
name: 'Rosé Pine Dawn',
extras: {
love: '#b4637a',
gold: '#ea9d34',
rose: '#d7827e',
pine: '#286983',
foam: '#56949f',
iris: '#907aa9'
},
colors: {
text: '#575279',
'surface-2': '#cecacd',
'surface-1': '#dfdad9',
'surface-0': '#f4ede8',
base: '#f2e9e1',
mantle: '#fffaf3',
crust: '#faf4ed'
}
}))
}
}
},
@ -184,8 +375,9 @@ export const defaultFS: { root: Directory } = {
permission: Permission.ELEVATED,
content: Buffer.from([
'SERVER=https://server.flow-works.me',
'24HOUR=FALSE',
'THEME=Mocha'
'24_HOUR=false',
'THEME=Mocha',
'THEME_PRIMARY=blue'
].join('\n'))
},
hostname: {
@ -221,6 +413,10 @@ class VirtualFS {
const addDirectoryRecursive = async (directory: Directory, directoryPath: string): Promise<void> => {
for (const [key, value] of Object.entries(directory.children)) {
const path = p.join(directoryPath, key)
if (value.type === 'file' && path.startsWith('/etc/themes/')) {
await this.writeFile(path, Buffer.from(value.content).toString())
return
}
if (value.type === 'directory') {
if (!await this.exists(path)) {
await this.mkdir(path)
@ -232,6 +428,28 @@ class VirtualFS {
}
}
await addDirectoryRecursive(defaultFS.root, '/')
await this.readFile('/etc/flow').then(async (data: Uint8Array) => {
const dataString = Buffer.from(data).toString()
const config = parse(dataString)
if (config.SERVER == null) {
config.SERVER = 'https://server.flow-works.me'
await this.writeFile('/etc/flow', stringify(config))
}
if (config['24_HOUR'] == null) {
config['24_HOUR'] = 'FALSE'
await this.writeFile('/etc/flow', stringify(config))
}
if (config.THEME == null) {
config.THEME = 'Mocha'
await this.writeFile('/etc/flow', stringify(config))
}
if (config.THEME_PRIMARY == null) {
config.THEME_PRIMARY = 'blue'
await this.writeFile('/etc/flow', stringify(config))
}
})
}
async init (dbName = 'virtualfs'): Promise<VirtualFS> {

35
src/system/apps/Settings.ts
View file

@ -7,7 +7,7 @@ const Settings: Process = {
name: 'Settings',
type: 'process',
icon,
targetVer: '1.0.0-indev.0'
targetVer: '2.0.0'
},
run: async process => {
const win = await process
@ -32,21 +32,25 @@ const Settings: Process = {
const render = async (config: any): Promise<void> => {
win.content.innerHTML = ''
for (const item in config) {
console.log(config[item])
const input = item === 'THEME'
? Dropdown.new((await fs.readdir('/etc/themes')).map((theme: string) => theme.replace('.theme', '')))
: Input.new()
let input = Input.new()
if (item === 'THEME') {
const text = config[item]
const $select = input.elm as HTMLSelectElement
const $options = Array.from($select.options)
const optionToSelect = $options.find(item => item.text === text)
if (optionToSelect != null) optionToSelect.selected = true
if (item === 'THEME_PRIMARY') {
const { extras } = JSON.parse(Buffer.from(await fs.readFile(`/etc/themes/${config.THEME as string}.theme`)).toString())
input = Dropdown.new(Object.keys(extras))
} else if (item === 'THEME') {
input = Dropdown.new((await fs.readdir('/etc/themes')).map((theme: string) => theme.replace('.theme', '')))
}
input.attr({
value: config[item]
})
if (item === 'THEME_PRIMARY' || item === 'THEME') {
(input.elm as HTMLSelectElement).value = config[item]
} else {
input.attr({
value: config[item]
})
}
console.log(input.getValue())
new HTML('div')
.appendMany(
new HTML('label')
@ -64,7 +68,6 @@ const Settings: Process = {
input,
Button.new().text('Save').on('click', () => {
config[item] = input.getValue()
process.kernel.setConfig(config)
fs.writeFile('/etc/flow', stringify(config))
.then(() => {
document.dispatchEvent(
@ -74,7 +77,7 @@ const Settings: Process = {
}
})
)
if (item === 'THEME') {
if (item === 'THEME' || item === 'THEME_PRIMARY') {
document.dispatchEvent(new CustomEvent('theme_update', {}))
}
})

28
src/system/lib/Components.ts
View file

@ -20,21 +20,41 @@ const Components: Library = {
padding: '2.5px',
outline: 'none',
background: 'transparent',
border: '1px solid var(--surface-0)'
border: '1px solid const(--surface-0)'
})
return input
}
},
Button: {
new: () => {
new: (type: 'normal' | 'primary' = 'normal') => {
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 newColor = g | (b << 8) | (r << 16)
return newColor.toString(16)
}
const { HTML } = library
const button = new HTML('button')
button.style({
'border-radius': '5px',
padding: '2.5px 5px',
background: 'var(--base)',
border: '1px solid var(--surface-1)'
border: '1px solid var(--surface-0)'
})
if (type === 'normal') {
button.style({
background: 'var(--base)'
})
} else if (type === 'primary') {
button.style({
background: 'var(--primary)',
color: 'var(--base)',
border: '1px solid #' + shiftColor(document.documentElement.style.getPropertyValue('--primary').replace('#', ''), -40) + ''
})
}
return button
}
},
@ -57,7 +77,7 @@ const Components: Library = {
'border-radius': '5px',
padding: '2.5px',
background: 'var(--base)',
border: '1px solid var(--surface-1)'
border: '1px solid const(--surface-1)'
}).appendMany(
...options.map((option) => {
return new HTML('option').text(option)

2
src/system/lib/Launcher.ts
View file

@ -26,7 +26,7 @@ const Launcher: Library = {
} else {
Launcher.data.element.style({
opacity: '1',
'backdrop-filter': 'blur(20px)',
'backdrop-filter': 'blur(10px)',
'pointer-events': 'all'
})
}

73
src/system/lib/StatusBar.ts
View file

@ -1,4 +1,6 @@
import { Library } from '../../types'
import { AppClosedEvent, AppOpenedEvent, Library } from '../../types'
import nullIcon from '../../assets/icons/application-default-icon.svg'
import { getTime } from '../../utils'
const StatusBar: Library = {
config: {
@ -8,6 +10,75 @@ const StatusBar: Library = {
},
init: (l, k, p) => {
StatusBar.data.element = new l.HTML('toolbar')
StatusBar.data.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.data.element.qs('div[data-toolbar-id="calendar"]')?.text(time)
}).catch(e => console.error)
}, 1000)
if ('getBattery' in navigator) {
(navigator as any).getBattery().then((battery: any) => {
StatusBar.data.updateBatteryIcon(battery)
battery.addEventListener('levelchange', () => {
StatusBar.data.updateBatteryIcon(battery)
})
battery.addEventListener('chargingchange', () => {
StatusBar.data.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(`${(k.config as any).SERVER as string}/bare/`)
.then(() => {
const endTime = performance.now()
const pingTime = endTime - startTime
StatusBar.data.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 l.HTML('app').appendMany(
new l.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.data.element.qs('div[data-toolbar-id="apps"]')?.elm as HTMLElement)
})
document.addEventListener('app_closed', (e: AppClosedEvent): void => {
StatusBar.data.element.qs('div[data-toolbar-id="apps"]')?.qs(`img[data-id="${e.detail.token}"]`)?.elm.parentElement?.remove()
})
},
data: {
updateBatteryIcon (battery: any) {

43
src/system/lib/WindowManager.ts
View file

@ -2,6 +2,7 @@ import HTML from '../../HTML'
import FlowWindow from '../../structures/FlowWindow'
import ProcessLib from '../../structures/ProcessLib'
import { FlowWindowConfig, Library } from '../../types'
import nullIcon from '../../assets/icons/application-default-icon.svg'
const WindowManager: Library = {
config: {
@ -50,8 +51,8 @@ const WindowManager: Library = {
const win = new FlowWindow(process, WindowManager.data, {
title,
icon: '',
width: 300,
height: 200,
width: 350,
height: 150,
canResize: false
})
const appOpenedEvent = {
@ -66,22 +67,50 @@ const WindowManager: Library = {
return {
value: await new Promise((resolve) => {
new HTML('h3').text(title).style({ margin: '0' }).appendTo(win.content)
new HTML('p').text(text).style({ margin: '0' }).appendTo(win.content)
win.content.style.padding = '10px'
win.content.style.display = 'flex'
win.content.style.flexDirection = 'column'
win.content.style.gap = '10px'
const container = new HTML('div').style({
display: 'flex',
gap: '10px',
justifyContent: 'center',
height: 'max-content'
}).appendTo(win.content)
new HTML('img').attr({ src: process.process.config.icon ?? nullIcon }).style({
height: '100%',
'aspect-ratio': '1 / 1',
borderRadius: '50%',
alignSelf: 'center'
}).appendTo(container)
const space = new HTML('div').style({
display: 'flex',
gap: '10px',
'flex-direction': 'column',
'justify-content': 'center',
height: 'max-content'
}).appendTo(container)
new HTML('h3').text(title).style({ margin: '0' }).appendTo(space)
new HTML('p').text(text).style({ margin: '0' }).appendTo(space)
const div = new HTML('div').style({ display: 'flex', gap: '10px', alignItems: 'right' }).appendTo(space)
if (type === 'allow') document.dispatchEvent(new CustomEvent('app_opened', appOpenedEvent))
if (type === 'allow') {
Button.new().text('Allow').appendTo(win.content).on('click', () => {
Button.new('primary').text('Allow').appendTo(div).on('click', () => {
resolve(true)
win.close()
})
Button.new().text('Deny').appendTo(win.content).on('click', () => {
Button.new().text('Deny').appendTo(div).on('click', () => {
resolve(false)
win.close()
})
} else if (type === 'ok') {
Button.new().text('OK').appendTo(win.content).on('click', () => {
Button.new('primary').text('OK').appendTo(div).on('click', () => {
win.close()
resolve(true)
})