enhancement: all platform layout (#5119)

* enhancement: conditional layout leftpanel for windows

* chore: calculate height leftpanel windows

* chore: enhance calc left panel height

* enhancement minor ui

* Update web-app/src/routes/settings/hardware.tsx

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

---------

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
This commit is contained in:
Faisal Amir 2025-05-28 20:10:51 +07:00 committed by GitHub
parent cfcc99d75f
commit f812952044
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 42 additions and 34 deletions

View File

@ -29,7 +29,7 @@
"decorations": true,
"titleBarStyle": "Overlay",
"windowEffects": {
"effects": ["fullScreenUI", "mica", "blur", "acrylic"],
"effects": ["fullScreenUI", "mica", "tabbed", "blur", "acrylic"],
"state": "active",
"radius": 8
}
@ -50,9 +50,7 @@
"enable": true,
"scope": {
"requireLiteralLeadingDot": false,
"allow": [
"**/*"
]
"allow": ["**/*"]
}
}
}
@ -74,13 +72,7 @@
},
"bundle": {
"active": true,
"targets": [
"nsis",
"app",
"dmg",
"deb",
"appimage"
],
"targets": ["nsis", "app", "dmg", "deb", "appimage"],
"createUpdaterArtifacts": false,
"icon": [
"icons/32x32.png",
@ -117,4 +109,4 @@
"signCommand": "powershell -ExecutionPolicy Bypass -File ./sign.ps1 %1"
}
}
}
}

View File

@ -102,7 +102,7 @@ const LeftPanel = () => {
: 'w-0 absolute -top-100 -left-100 visibility-hidden'
)}
>
<div className="relative h-8">
<div className="relative h-10">
<button
className="absolute top-1/2 right-0 -translate-y-1/2 z-20"
onClick={() => setLeftPanel(!open)}
@ -111,11 +111,8 @@ const LeftPanel = () => {
<IconLayoutSidebar size={18} className="text-left-panel-fg" />
</div>
</button>
</div>
<div className="flex flex-col justify-between h-[calc(100%-32px)] mt-0">
<div className="flex flex-col justify-between h-full">
<div className="relative mb-4 mx-1 mt-2">
{!IS_MACOS && (
<div className="relative top-1.5 mb-4 mx-1 mt-1 w-[calc(100%-32px)] z-50">
<IconSearch className="absolute size-4 top-1/2 left-2 -translate-y-1/2 text-left-panel-fg/50" />
<input
type="text"
@ -133,6 +130,31 @@ const LeftPanel = () => {
</button>
)}
</div>
)}
</div>
<div className="flex flex-col justify-between h-[calc(100%-42px)] mt-0">
<div className="flex flex-col justify-between h-full">
{IS_MACOS && (
<div className="relative mb-4 mx-1 mt-1">
<IconSearch className="absolute size-4 top-1/2 left-2 -translate-y-1/2 text-left-panel-fg/50" />
<input
type="text"
placeholder={t('common.search')}
className="w-full pl-7 pr-8 py-1 bg-left-panel-fg/10 rounded text-left-panel-fg focus:outline-none focus:ring-1 focus:ring-left-panel-fg/10"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
{searchTerm && (
<button
className="absolute right-2 top-1/2 -translate-y-1/2 text-left-panel-fg/70 hover:text-left-panel-fg"
onClick={() => setSearchTerm('')}
>
<IconX size={14} />
</button>
)}
</div>
)}
<div className="flex flex-col w-full h-full overflow-hidden">
<div className="h-full overflow-y-auto overflow-x-hidden">
{favoritedThreads.length > 0 && (

View File

@ -268,8 +268,9 @@ function Hardware() {
{hardwareData.cpu?.instructions.join(', ').length > 0 && (
<CardItem
title="Instructions"
column={hardwareData.cpu?.instructions.length > 6}
actions={
<span className="text-main-view-fg/80">
<span className="text-main-view-fg/80 break-words">
{hardwareData.cpu?.instructions?.join(', ')}
</span>
}
@ -315,7 +316,8 @@ function Hardware() {
<div className="flex items-center gap-2">
<Progress
value={
((hardwareData.ram?.total - hardwareData.ram?.available) /
((hardwareData.ram?.total -
hardwareData.ram?.available) /
hardwareData.ram?.total) *
100
}
@ -323,7 +325,8 @@ function Hardware() {
/>
<span className="text-main-view-fg/80">
{(
((hardwareData.ram?.total - hardwareData.ram?.available) /
((hardwareData.ram?.total -
hardwareData.ram?.available) /
hardwareData.ram?.total) *
100
).toFixed(2)}

View File

@ -206,7 +206,9 @@ function SystemMonitor() {
<span className="font-semibold text-main-view-fg">
{gpu.name}
</span>
<div className="bg-green-500/20">Active</div>
<div className="bg-green-500/20 px-2 py-1 rounded-sm">
Active
</div>
</div>
<div className="flex flex-col gap-2 mt-3">
<div className="flex justify-between items-center">
@ -238,18 +240,7 @@ function SystemMonitor() {
((gpu.total_vram - gpu.free_vram) / gpu.total_vram) *
100
}
className={`h-2 w-full ${
((gpu.total_vram - gpu.free_vram) / gpu.total_vram) *
100 >
80
? 'bg-red-500/30'
: ((gpu.total_vram - gpu.free_vram) /
gpu.total_vram) *
100 >
50
? 'bg-yellow-500/30'
: 'bg-green-500/30'
}`}
className="h-2 w-full"
/>
</div>
</div>