ThinLiquid
GitHub
parent
470a1fa1e0
commit
aa5fb9e290
4 changed files with 58 additions and 142 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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<void> => {
|
||||
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))
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const StatusBar: Library = {
|
|||
<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 style="flex:1;"></div>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue