sadorowo/dots
1
0
Fork 0
Code Issues Activity

feat: new bar & new SCSS styles

Browse Source
This commit is contained in:
Franek 2025-05-19 09:58:00 +02:00
parent 8c8e112249
commit d5392bf0d3
11 changed files with 89 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ags/lib/widgets/separator.tsx
View File

@ -1,8 +0,0 @@
import { Gio } from "astal";
export default function Separator() {
return <image
cssClasses={["separator"]}
gicon={Gio.Icon.new_for_string("switch-on-symbolic")}
/>
}

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

@ -1,26 +1,23 @@
@use '../theme_colors.scss' as *; @use '../theme_colors.scss' as *;
window.bar { window.bar {
font-weight: bold; border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background: color-mix(in srgb, $base00, transparent 85%);
margin: 0;
>box { * {
border-radius: 10px; color: $base0A;
} }
>.inner { >button, >label, >menubutton {
border-bottom-left-radius: 0; padding: 0.15rem 0.25rem;
border-bottom-right-radius: 0;
background: $base00;
padding: 0.1rem 1rem;
margin: 0;
*:not(.separator) { color: $base0B; }
} }
.tray .item { .tray .item {
padding: 0; padding: 0;
margin: 0; margin: 0;
background: $base00; background: transparent;
image { image {
padding: 0; padding: 0;
@ -28,5 +25,7 @@ window.bar {
} }
} }
calendar>header { border: none; } calendar>header {
} border: none;
}
}

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

@ -12,7 +12,7 @@ window.battery_info {
>.inner { >.inner {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
background: $base00; background: color-mix(in srgb, $base00, transparent 15%);
padding: 0.75rem 3rem; padding: 0.75rem 3rem;
margin: 0; margin: 0;
@ -22,7 +22,7 @@ window.battery_info {
* { * {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
color: $base0B; color: $base0A;
} }
} }
@ -33,7 +33,7 @@ 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: $base00; background: color-mix(in srgb, $base00, transparent 15%);
border: 2px solid $base01; border: 2px solid $base01;
margin: 5px; margin: 5px;
@ -41,7 +41,7 @@ window.battery_info button {
background: $base01; background: $base01;
* { * {
color: $base0B; color: $base0A;
} }
} }
@ -50,7 +50,7 @@ window.battery_info button {
border: 2px solid $base00; border: 2px solid $base00;
* { * {
color: $base0B; color: $base0A;
} }
} }
} }

29
ags/styles/components/_clipboard.scss
View File

@ -2,8 +2,7 @@
.clipboard { .clipboard {
entry { entry {
background: $base00; color: $base0A;
color: $base0B;
padding: 8px 12px; padding: 8px 12px;
border: none; border: none;
@ -15,23 +14,37 @@
} }
.entry.primary { .entry.primary {
background: $base01; background: $base0A;
.content {
color: $base00;
}
&:focus { &:focus {
background: color-mix(in srgb, $base00, transparent 15%);
}
&:hover {
background: $base00; background: $base00;
.content {
color: $base0A;
}
} }
} }
.entry { .entry {
padding: 10px; padding: 10px;
background: $base00; background: color-mix(in srgb, $base00, transparent 15%);
border-radius: 8px; border-radius: 8px;
transition: background 0.2s ease; transition: background 0.2s ease;
&:hover { background: $base01; } &:hover {
background: $base01;
}
.content { .content {
color: $base0B; color: $base0A;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }
@ -40,7 +53,7 @@
.not-found { .not-found {
border: 1px solid $base07; border: 1px solid $base07;
background: $base01; background: $base01;
color: $base0B; color: $base0A;
font-size: 14px; font-size: 14px;
padding: 10px; padding: 10px;
border-radius: 8px; border-radius: 8px;
@ -49,4 +62,4 @@
margin-bottom: 8px; margin-bottom: 8px;
} }
} }
} }

11
ags/styles/components/_launcher.scss
View File

@ -2,8 +2,7 @@
.launcher { .launcher {
entry { entry {
background: $base00; background: color-mix(in srgb, $base00, transparent 75%);
color: $base0B;
padding: 8px 12px; padding: 8px 12px;
border: none; border: none;
@ -16,7 +15,7 @@
.application { .application {
padding: 10px; padding: 10px;
background: $base00; background: color-mix(in srgb, $base00, transparent 15%);
border-radius: 8px; border-radius: 8px;
transition: background 0.2s ease; transition: background 0.2s ease;
@ -29,20 +28,20 @@
} }
.name { .name {
color: $base0B; color: $base0A;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }
.description { .description {
color: $base0B; color: $base0C;
font-size: 12px; font-size: 12px;
} }
} }
.not-found { .not-found {
background: $base01; background: $base01;
color: $base0B; color: $base0A;
font-size: 14px; font-size: 14px;
padding: 10px; padding: 10px;
border-radius: 8px; border-radius: 8px;

14
ags/styles/components/_quick_settings.scss
View File

@ -12,13 +12,13 @@ window.quick_settings {
>.inner { >.inner {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
background: $base00; background: color-mix(in srgb, $base00, transparent 15%);
padding: 0.75rem 3rem; padding: 0.75rem 3rem;
margin: 0; margin: 0;
* { * {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
color: $base0B; color: $base0A;
} }
} }
@ -29,11 +29,11 @@ window.quick_settings {
window.qs_bluetooth { window.qs_bluetooth {
>.inner { >.inner {
background: $base00; background: color-mix(in srgb, $base00, transparent 15%);
padding: 0.75rem 3rem; padding: 0.75rem 3rem;
border-radius: 10px; border-radius: 10px;
* { color: $base0B; } * { color: $base0A; }
} }
.device { .device {
@ -56,7 +56,11 @@ window.quick_settings button, window.qs_bluetooth button {
} }
&.active { &.active {
background: $base01; background: $base0A;
border: 0.5px solid $base00; border: 0.5px solid $base00;
* {
color: $base01;
}
} }
} }

10
ags/styles/components/_shortcuts.scss
View File

@ -3,7 +3,7 @@
.shortcuts { .shortcuts {
.entry { .entry {
padding: 10px; padding: 10px;
background: $base00; background: color-mix(in srgb, $base00, transparent 15%);
border-radius: 8px; border-radius: 8px;
transition: background 0.2s ease; transition: background 0.2s ease;
@ -11,12 +11,12 @@
background: $base01; background: $base01;
>.kbd { >.kbd {
background: $base00; background: color-mix(in srgb, $base00, transparent 15%);
} }
} }
label { label {
color: $base0B; color: $base0A;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }
@ -29,13 +29,13 @@
margin: 0 2px; margin: 0 2px;
background: $base01; background: $base01;
color: $base0B; color: $base0A;
} }
} }
.not-found { .not-found {
background: $base01; background: $base01;
color: $base0B; color: $base0A;
font-size: 14px; font-size: 14px;
padding: 10px; padding: 10px;
border-radius: 8px; border-radius: 8px;

2
ags/styles/style.scss
View File

@ -14,7 +14,7 @@ separator {
} }
popover>contents, calendar { popover>contents, calendar {
background: $base00; background: color-mix(in srgb, $base00, transparent 15%);
} }
button, button:hover { button, button:hover {

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

@ -7,12 +7,9 @@ import { BatteryInfo } from "./components/battery";
import Workspace from "./components/workspace"; import Workspace from "./components/workspace";
import DateTime from "@lib/widgets/datetime"; import DateTime from "@lib/widgets/datetime";
import TrayView from "./components/tray"; import TrayView from "./components/tray";
import Separator from "@/lib/widgets/separator";
export default function Bar(monitor_id: number) { export default function Bar(monitor_id: number) {
const { BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor const { BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor
const CENTER = Gtk.Align.CENTER;
const battery = Battery.get_default(); const battery = Battery.get_default();
const openQuickSettings = (_self: Gtk.Button, state: Gdk.ButtonEvent) => { const openQuickSettings = (_self: Gtk.Button, state: Gdk.ButtonEvent) => {
@ -25,27 +22,27 @@ export default function Bar(monitor_id: number) {
name={`bar_${monitor_id}`} name={`bar_${monitor_id}`}
monitor={monitor_id} monitor={monitor_id}
cssClasses={["bar"]} cssClasses={["bar"]}
exclusivity={Astal.Exclusivity.IGNORE} exclusivity={Astal.Exclusivity.EXCLUSIVE}
anchor={BOTTOM | LEFT | RIGHT} anchor={BOTTOM | LEFT | RIGHT}
application={App}> application={App}
<box halign={CENTER} cssClasses={["inner"]}> hexpand
{[ >
Workspace(), <centerbox hexpand>
{Workspace()}
<box>
<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 }), {BatteryInfo({ battery })}
<button hasFrame={false} iconName={"applications-system-symbolic"} onButtonPressed={openQuickSettings} />, {NetworkInfo()}
NetworkInfo(), </box>
TrayView() <box>
].reduce((acc, it) => <> <button hasFrame={false} iconName={"applications-system-symbolic"} onButtonPressed={openQuickSettings} />
{acc} {TrayView()}
{Separator()} </box>
{it} </centerbox>
</>)}
</box>
</window> </window>
} }

20
ags/widget/bar/components/battery.tsx
View File

@ -11,16 +11,14 @@ export function BatteryInfo({ battery }: { battery: Battery.Device }) {
const charging = bind(battery, "charging"); const charging = bind(battery, "charging");
return ( return (
<box> <button hasFrame={false}>
{percentage.as(p => <button hasFrame={false}> {percentage.as(p => <box onButtonPressed={(_self, event) =>
<box onButtonPressed={(_self, event) => openOnButton(event, Gdk.BUTTON_PRIMARY)
openOnButton(event, Gdk.BUTTON_PRIMARY) (() => App.toggle_window("battery_info"))
(() => App.toggle_window("battery_info")) }>
}> <label>{percentage.as(p => `${p}%`)}</label>
<label>{percentage.as(p => `${p}%`)}</label> <image iconName={getBatteryIcon(p, charging)} />
<image iconName={getBatteryIcon(p, charging)} /> </box>)}
</box> </button>
</button>)}
</box>
); );
}; };

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

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