From 3a64f5801a169aa6cbd173075ef72c9a839bbe62 Mon Sep 17 00:00:00 2001 From: ThinLiquid Date: Fri, 2 Feb 2024 02:35:04 +0000 Subject: [PATCH 1/3] fix: fixed input border --- src/system/lib/Components.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/system/lib/Components.ts b/src/system/lib/Components.ts index aeba3a11..5c0a08f5 100644 --- 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 } From 470a1fa1e00212220ebc82deefac34bef3612b54 Mon Sep 17 00:00:00 2001 From: ThinLiquid Date: Fri, 2 Feb 2024 03:34:18 +0000 Subject: [PATCH 2/3] fix: fixed dropdown styling --- src/system/lib/Components.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/system/lib/Components.ts b/src/system/lib/Components.ts index 5c0a08f5..d19928df 100644 --- a/src/system/lib/Components.ts +++ b/src/system/lib/Components.ts @@ -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 } From aa5fb9e29082b25e68a7a3648319d97056642666 Mon Sep 17 00:00:00 2001 From: ThinLiquid Date: Fri, 2 Feb 2024 04:02:09 +0000 Subject: [PATCH 3/3] feat: created start menu re #183 --- src/assets/style.less | 134 ++---------------------------------- src/system/Desktop.ts | 35 ++++++++-- src/system/lib/Launcher.ts | 29 +++++--- src/system/lib/StatusBar.ts | 2 +- 4 files changed, 58 insertions(+), 142 deletions(-) diff --git a/src/assets/style.less b/src/assets/style.less index 1f7ad2e2..0d1243ca 100644 --- 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; } \ No newline at end of file diff --git a/src/system/Desktop.ts b/src/system/Desktop.ts index 7f60154e..f351ecbe 100644 --- 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 => { 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/Launcher.ts b/src/system/lib/Launcher.ts index 078e0a23..30d9bed8 100644 --- 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 index 0cd57a98..6381f199 100644 --- a/src/system/lib/StatusBar.ts +++ b/src/system/lib/StatusBar.ts @@ -14,7 +14,7 @@ const StatusBar: Library = {
space_dashboard
- +
expand_less
battery_2_bar