sadorowo/dots
1
0
Fork 0
Code Issues Activity

reorganize bar, make styles consistent

Browse Source
This commit is contained in:
Franek 2025-05-19 20:23:08 +02:00
parent ca99a94e94
commit d05f6174b7
4 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ags/styles/components/_bar.scss
View File

@ -1,10 +1,18 @@
@use '../theme_colors.scss' as *; @use '../theme_colors.scss' as *;
window.bar { window.bar {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background: color-mix(in srgb, $base00, transparent 15%); background: color-mix(in srgb, $base00, transparent 15%);
margin: 0;
>box {
padding: 0.25rem 0;
}
>box>*:not(box), >box>box>* {
margin: 0 0.25rem;
padding: 0 0.5rem;
background: $base01;
border-radius: 1rem;
}
* { * {
color: $base0A; color: $base0A;
@ -17,7 +25,6 @@ window.bar {
.tray .item { .tray .item {
padding: 0; padding: 0;
margin: 0; margin: 0;
background: transparent;
image { image {
padding: 0; padding: 0;

12
ags/styles/components/_battery_info.scss
View File

@ -33,24 +33,20 @@ window.battery_info {
window.battery_info button { window.battery_info button {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
background: color-mix(in srgb, $base00, transparent 15%); background: $base00;
border: 2px solid $base01; border: 2px solid $base01;
margin: 5px; margin: 5px;
&:hover { &:hover {
background: $base01; background: $base01;
* {
color: $base0A;
}
} }
&.active { &.active {
background: $base01; background: $base0A;
border: 2px solid $base00; border: 0.5px solid $base00;
* { * {
color: $base0A; color: $base01;
} }
} }
} }

6
ags/widget/bar/bar.tsx
View File

@ -28,19 +28,21 @@ export default function Bar(monitor_id: number) {
hexpand hexpand
> >
<centerbox hexpand> <centerbox hexpand>
{Workspace()}
<box> <box>
{Workspace()}
<menubutton hasFrame={false}> <menubutton hasFrame={false}>
<DateTime format="%d.%m.%Y %H:%M:%S" interval={1000} /> <DateTime format="%d.%m.%Y %H:%M:%S" interval={1000} />
<popover> <popover>
<Gtk.Calendar /> <Gtk.Calendar />
</popover> </popover>
</menubutton> </menubutton>
{BatteryInfo({ battery })} </box>
<box>
{NetworkInfo()} {NetworkInfo()}
</box> </box>
<box> <box>
<button hasFrame={false} iconName={"applications-system-symbolic"} onButtonPressed={openQuickSettings} /> <button hasFrame={false} iconName={"applications-system-symbolic"} onButtonPressed={openQuickSettings} />
{BatteryInfo({ battery })}
{TrayView()} {TrayView()}
</box> </box>
</centerbox> </centerbox>

4
ags/widget/bar/components/network_info.tsx
View File

@ -69,11 +69,11 @@ export default function NetworkInfo() {
const dataBinding = bind(networkUsage); const dataBinding = bind(networkUsage);
const binding = bind(currentConn); const binding = bind(currentConn);
return binding.as(Boolean) ? <box spacing={3}> return binding.as(Boolean) ? <>
{binding.as(getConnection).as(data => data && <label label={data} />)} {binding.as(getConnection).as(data => data && <label label={data} />)}
{dataBinding.as(data => <> {dataBinding.as(data => <>
<label label={`TX: ${toHumanReadable(data.totalTx / 4, "B/s")}`} /> <label label={`TX: ${toHumanReadable(data.totalTx / 4, "B/s")}`} />
<label label={`RX: ${toHumanReadable(data.totalRx / 4, "B/s")}`} /> <label label={`RX: ${toHumanReadable(data.totalRx / 4, "B/s")}`} />
</>)} </>)}
</box> : <label>No network</label> </> : <label>No network</label>
} }