tec3/ublue-forge
tec3/ublue-forge
1
0
Fork 0
mirror of https://github.com/ublue-os/forge.git synced 2025-04-16 11:33:43 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(nicegui): drop down menu for navigation

Browse source
This commit is contained in:
Stephan Lüscher 2024-05-24 09:19:15 +00:00
parent 5b81eb5566
commit 3ee6a060e1
No known key found for this signature in database
GPG key ID: 445779060FF3D3CF
2 changed files with 60 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
anvil/nicegui/pages/assets/ublue-mini.svg Normal file
View file

@ -0,0 +1,54 @@
<svg width="296" height="296" viewBox="0 0 296 296" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M120 296H296V30C296 13.4315 282.569 0 266 0H30C13.4315 0 0 13.4315 0 30V176C0 242.274 53.7258 296 120 296Z" fill="url(#paint0_linear_1268_533)"/>
<g filter="url(#filter0_b_1268_533)">
<path d="M86.3349 156.792V70.6279V55H70.6675C62.0146 55 55 61.9968 55 70.6279V156.792C55 202.747 92.3478 240 138.419 240H240V70.6279V55H224.333H208.665V70.6279V208.744H138.419C109.654 208.744 86.3349 185.485 86.3349 156.792Z" fill="white"/>
</g>
<g filter="url(#filter1_b_1268_533)">
<rect x="240" y="55" width="10" height="185" fill="white" fill-opacity="0.3"/>
</g>
<g filter="url(#filter2_b_1268_533)">
<rect x="250" y="55" width="10" height="185" fill="white" fill-opacity="0.1"/>
</g>
<g filter="url(#filter3_b_1268_533)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M240 208.744H240V240H240V208.744ZM138.335 156.792V70.6279V55H107L107 156.792C107 175.476 113.174 192.722 123.598 206.611C128.296 207.999 133.27 208.744 138.419 208.744H190.419C161.654 208.744 138.335 185.485 138.335 156.792Z" fill="white" fill-opacity="0.1"/>
</g>
<g filter="url(#filter4_b_1268_533)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M240 55H234.665L240 55V70.6279V240H240V55ZM112.335 70.6279V156.792C112.335 185.485 135.654 208.744 164.419 208.744L138.419 208.744C119.317 208.744 102.617 198.487 93.5523 183.194C88.9666 175.457 86.335 166.431 86.335 156.792V70.6279V55H81.0002V55H112.335V70.6279Z" fill="white" fill-opacity="0.3"/>
</g>
<defs>
<filter id="filter0_b_1268_533" x="15.7" y="15.7" width="263.6" height="263.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="19.65"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1268_533"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1268_533" result="shape"/>
</filter>
<filter id="filter1_b_1268_533" x="200" y="15" width="90" height="265" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="20"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1268_533"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1268_533" result="shape"/>
</filter>
<filter id="filter2_b_1268_533" x="210" y="15" width="90" height="265" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="20"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1268_533"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1268_533" result="shape"/>
</filter>
<filter id="filter3_b_1268_533" x="67.0002" y="15" width="213" height="265" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="20"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1268_533"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1268_533" result="shape"/>
</filter>
<filter id="filter4_b_1268_533" x="41.0002" y="15" width="239" height="265" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="20"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1268_533"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1268_533" result="shape"/>
</filter>
<linearGradient id="paint0_linear_1268_533" x1="279" y1="296" x2="-39.5205" y2="51.481" gradientUnits="userSpaceOnUse">
<stop offset="0.18594" stop-color="#3550EC"/>
<stop offset="0.795405" stop-color="#252B4B"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

7
anvil/nicegui/theme.py
View file

@ -1,6 +1,7 @@
from contextlib import contextmanager
from menu import menu
from nicegui import ui
from utils.helper import get_project_root
class GuiProgressSpinner(ui.spinner):
@ -28,12 +29,16 @@ def frame(
navigation_title: str,
):
"""Custom page frame to share the same styling and behavior across all pages"""
project_root = get_project_root()
ui.colors(primary="#4051b5", secondary="#dddbff", accent="#171d9a")
with ui.header():
with ui.grid(columns=3).classes("w-full gap-0"):
with ui.row(wrap=False).classes("col-span-1 justify-start"):
menu()
ui.label(text="uBlue-OS Forge").classes("text-h5")
ui.image(source=f"{project_root}/pages/assets/ublue-mini.svg").props(
"width=33px hight=auto"
)
ui.label(text="Forge").classes("text-h5")
with ui.row(wrap=False).classes("col-span-1 justify-center"):
ui.label(text=navigation_title).classes("text-h5")
with ui.row(wrap=False).classes("col-span-1 justify-end"):