Skip to content

Commit

Permalink
Merge pull request #185 from Flow-Works/dev
Browse files Browse the repository at this point in the history 
[🪢] Merge `dev` into `master`
  • Loading branch information
@ThinLiquid
ThinLiquid authored Feb 2, 2024
2 parents bc3d82f + 5c8eafc commit 46f5668
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 150 deletions.
134 changes: 7 additions & 127 deletions src/assets/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,6 @@ html {

color: var(--text);
}
.bx {
font-size: 25px;
}

toolbar {
width: 100%;
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}
35 changes: 31 additions & 4 deletions src/system/Desktop.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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('')
Expand All @@ -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))
Expand Down
14 changes: 6 additions & 8 deletions src/system/lib/Components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand All @@ -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)
}
Expand All @@ -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
Expand All @@ -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
}
Expand Down
29 changes: 19 additions & 10 deletions src/system/lib/Launcher.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
})
}

Expand Down
2 changes: 1 addition & 1 deletion src/system/lib/StatusBar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 46f5668

Please sign in to comment.