From 3b59243cdc9fa5ce48c97aed20a127c3d5485e82 Mon Sep 17 00:00:00 2001 From: retrozinndev Date: Fri, 25 Jul 2025 19:08:03 -0300 Subject: [PATCH] :sparkles: feat(center-window/big-media): add player select button --- ags/style.scss | 60 ++++++++------- ags/style/_bar.scss | 39 +++++++--- ags/style/_center-window.scss | 39 ++++++++++ ags/style/_control-center.scss | 27 +++++-- ags/style/_mixins.scss | 30 +++++--- ags/style/_wal.scss | 40 +++++----- ags/widget/center-window/BigMedia.tsx | 104 ++++++++++++++++++++++++-- 7 files changed, 260 insertions(+), 79 deletions(-) diff --git a/ags/style.scss b/ags/style.scss index 7192751..6ddf3ea 100644 --- a/ags/style.scss +++ b/ags/style.scss @@ -198,32 +198,26 @@ tooltip > box { } } -popover.menu { +popover.menu contents { background: wal.$background; border-radius: 14px; - $padding: 4px; + padding: 4px; - & contents { - & viewport > stack > * { - padding: 4px; - padding-top: 0; + & viewport > stack > * > * > * { + & > separator { + min-height: .5px; + margin: 3px 2px; + background: rgba(colors.$fg-disabled, .1); + } - & > * > * { - & > separator { - min-height: .5px; - margin: 3px 2px; - background: rgba(colors.$fg-disabled, .1); - } - & > *:not(separator) > * { - padding: 6px; - border-radius: 10px; - font-size: 12px; - font-weight: 600; - - &:hover, &:focus { - background: wal.$color1; - } - } + & > *:not(separator) > * { + padding: 6px; + border-radius: 10px; + font-size: 12px; + font-weight: 600; + + &:hover, &:focus { + background: wal.$color1; } } } @@ -231,25 +225,39 @@ popover.menu { .button-row { & > button { + $active-radius: 8px; + $corner-radius: calc($active-radius + 2px); + background: colors.$bg-secondary; margin: 0 1px; padding: 4px 6px; border-radius: 2px; + transition: 120ms linear; &:hover { background: colors.$bg-tertiary; } + &:active { + border-radius: $active-radius; + } + &:first-child { - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; margin-left: 0; + + &:not(:active) { + border-top-left-radius: $corner-radius; + border-bottom-left-radius: $corner-radius; + } } &:last-child { - border-top-right-radius: 10px; - border-bottom-right-radius: 10px; margin-right: 0; + + &:not(:active) { + border-top-right-radius: $corner-radius; + border-bottom-right-radius: $corner-radius; + } } } } diff --git a/ags/style/_bar.scss b/ags/style/_bar.scss index c679e47..7b87197 100644 --- a/ags/style/_bar.scss +++ b/ags/style/_bar.scss @@ -1,8 +1,18 @@ @use "sass:color"; @use "./mixins"; @use "./colors"; -@use "./wal"; -@use "./functions"; + + +$radius: 18px; +$padding: 4px; +$color-hover: colors.$bg-primary; + + +@mixin button-reactivity { + &:active { + box-shadow: 0 0 0 2px $color-hover; + } +} .bar-container { padding: 6px; @@ -17,16 +27,14 @@ // Style widget groups & > .bar-centerbox > * { - $radius: 18px !global; - $padding: 4px !global; - $color-hover: colors.$bg-primary; - background: rgba(colors.$bg-translucent, .6); border-radius: $radius; padding: 0 $padding; & > box:not(.workspaces-row):not(.tray):not(.focused-client):not(.media), & > button { + @include button-reactivity; + border-radius: calc($radius - $padding); margin: $padding 0; padding: 0 8px; @@ -48,6 +56,10 @@ padding: 0 6px; background: colors.$bg-tertiary; + &:active { + border-radius: 10px; + } + & label.id { font-weight: 600; margin-right: 4px; @@ -110,15 +122,13 @@ .media { $spacing: 5px; + $hover-color: color.scale($color: colors.$bg-primary, $lightness: 15%); + background: colors.$bg-primary; border-radius: calc($radius - $padding); margin: $padding 0; padding: 0 calc($padding + 3px); - &:hover { - background: color.scale($color: colors.$bg-primary, $lightness: 15%); - } - & image.player-icon { -gtk-icon-size: 14px; margin-right: $spacing; @@ -135,6 +145,15 @@ -gtk-icon-size: 10px; } } + + + &:hover { + background: $hover-color; + } + + &:active { + box-shadow: 0 0 0 2px $hover-color; + } } .tray { diff --git a/ags/style/_center-window.scss b/ags/style/_center-window.scss index aae7768..5c019c7 100644 --- a/ags/style/_center-window.scss +++ b/ags/style/_center-window.scss @@ -1,6 +1,7 @@ @use "sass:color"; @use "./wal"; @use "./colors"; +@use "./mixins"; .popup-window.center-window .center-window-container { @@ -34,6 +35,44 @@ } } + & .player-select { + @include mixins.button-reactive-secondary; + + border-radius: 14px; + + & revealer label { + margin-left: 4px; + } + + margin-right: 2px; + margin-bottom: 2px; + + image.arrow { + -gtk-icon-size: 12px; + margin-left: 6px; + margin-top: 1px; + } + } + + & popover contents { + background: colors.$bg-primary; + border-radius: 16px; + padding: 4px; + + & button { + padding: 6px; + border-radius: 12px; + + & image { + margin-right: 4px; + } + + &:hover { + background: colors.$bg-secondary; + } + } + } + & slider { all: unset; opacity: 0; diff --git a/ags/style/_control-center.scss b/ags/style/_control-center.scss index f593121..78970fe 100644 --- a/ags/style/_control-center.scss +++ b/ags/style/_control-center.scss @@ -63,14 +63,16 @@ } button { - @include mixins.hover-shadow2; - padding: 4px; border-radius: 16px; icon { font-size: 14px; } + + &:hover { + background: rgba(colors.$fg-primary, .2); + } } & .page .content { @@ -125,8 +127,6 @@ } & button { - @include mixins.hover-shadow; - padding: 6px; border-radius: 12px; @@ -143,6 +143,10 @@ & icon { font-size: 16px; } + + &:hover { + background: rgba(colors.$fg-primary, .1); + } } & .bottom-buttons button { @@ -194,14 +198,19 @@ background: colors.$bg-secondary; } - &.has-more > .toggle-button { + &.has-more > .toggle-button, + &.has-more > button.toggle-button:active { border-top-right-radius: 0; border-bottom-right-radius: 0; } - & > .toggle-button { + & > button.toggle-button { border-radius: $radius; + &:active { + border-radius: calc($radius - 4px); + } + & .content { padding: 8px; @@ -228,6 +237,11 @@ border-top-right-radius: $radius; border-bottom-right-radius: $radius; + &:active { + border-top-right-radius: calc($radius - 4px); + border-bottom-right-radius: calc($radius - 4px); + } + & label { font-size: 16px; } @@ -272,6 +286,7 @@ box.notif-history { margin-top: 12px; & button { + @include mixins.button-reactive-secondary; padding: 7px; & label { diff --git a/ags/style/_mixins.scss b/ags/style/_mixins.scss index 0f4a2c3..bf3cea9 100644 --- a/ags/style/_mixins.scss +++ b/ags/style/_mixins.scss @@ -1,7 +1,5 @@ @use "sass:color"; -@use "./wal"; @use "./colors"; -@use "./functions" as funs; @mixin reset-props { all: unset; @@ -14,20 +12,30 @@ color: colors.$fg-primary; } -@mixin hover-shadow { +@mixin button-reactive-primary { + background: colors.$bg-primary; + border-radius: 14px; + padding: 6px; + &:hover { - box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .1); + background: colors.$bg-secondary; + } + + &:active { + border-radius: 10px; } } -@mixin hover-shadow2 { - &:hover { - box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .2); - } -} +@mixin button-reactive-secondary { + background: colors.$bg-secondary; + border-radius: 12px; + padding: 6px; -@mixin hover-shadow3 { &:hover { - box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .3); + background: colors.$bg-tertiary; + } + + &:active { + border-radius: 9px; } } diff --git a/ags/style/_wal.scss b/ags/style/_wal.scss index 6733936..cd23f7c 100644 --- a/ags/style/_wal.scss +++ b/ags/style/_wal.scss @@ -1,26 +1,26 @@ // SCSS Variables // Generated by 'wal' -$wallpaper: "/home/joaov/wallpapers/Anna Yanami Makeine Blue Sky.jpg"; +$wallpaper: "/home/joaov/wallpapers/Frieren Battleground.jpg"; // Special -$background: #2d3643; -$foreground: #caccd0; -$cursor: #caccd0; +$background: #181515; +$foreground: #c5c4c4; +$cursor: #c5c4c4; // Colors -$color0: #2d3643; -$color1: #738AA7; -$color2: #3784E4; -$color3: #5A99EA; -$color4: #B8A9A4; -$color5: #8CB9EB; -$color6: #A2C8EF; -$color7: #a0a4a9; -$color8: #707b89; -$color9: #87a5cb; -$color10: #87a5cb; -$color11: #9db5d4; -$color12: #dab6a8; -$color13: #b7cae0; -$color14: #c5d5e6; -$color15: #caccd0; +$color0: #181515; +$color1: #975969; +$color2: #7f6960; +$color3: #7f697f; +$color4: #a57e83; +$color5: #878193; +$color6: #9d8793; +$color7: #9b9090; +$color8: #715c5c; +$color9: #CA778C; +$color10: #AA8C81; +$color11: #AA8CAA; +$color12: #DCA8AF; +$color13: #B4ADC5; +$color14: #D2B5C5; +$color15: #c5c4c4; diff --git a/ags/widget/center-window/BigMedia.tsx b/ags/widget/center-window/BigMedia.tsx index bd0ad67..072f5ff 100644 --- a/ags/widget/center-window/BigMedia.tsx +++ b/ags/widget/center-window/BigMedia.tsx @@ -2,9 +2,9 @@ import { timeout } from "ags/time"; import { execAsync } from "ags/process"; import { Astal, Gtk } from "ags/gtk4"; import { Clipboard } from "../../scripts/clipboard"; -import { player } from "../bar/Media"; -import { createBinding, With } from "ags"; -import { pathToURI } from "../../scripts/utils"; +import { player, setPlayer } from "../bar/Media"; +import { Accessor, createBinding, createConnection, For, With } from "ags"; +import { getPlayerIconFromBusName, pathToURI } from "../../scripts/utils"; import AstalMpris from "gi://AstalMpris"; import AstalIO from "gi://AstalIO"; @@ -23,13 +23,16 @@ export const BigMedia = () => { + } transitionType={Gtk.RevealerTransitionType.SLIDE_LEFT} transitionDuration={300}> `background-image: url("${pathToURI(art)}");`)} hexpand={false} vexpand={false} widthRequest={132} heightRequest={128} - valign={Gtk.Align.START} halign={Gtk.Align.CENTER} - /> + valign={Gtk.Align.START} halign={Gtk.Align.CENTER}> + + + { /> + + + {(hasAlbumArt) => !hasAlbumArt && + + } + + + { as Gtk.Box; } + +export function PlayerSelectButton({ player, reveal, halign = Gtk.Align.CENTER, valign = Gtk.Align.CENTER }: { + player: AstalMpris.Player, + reveal?: Accessor|boolean, + halign?: Gtk.Align; + valign?: Gtk.Align; +}) { + const availablePlayers = createBinding(AstalMpris.get_default(), "players").as(players => + players.filter(p => p.available)); + + return + apls.length > 1)}> + {(show: boolean) => show && + + + + {(pl: AstalMpris.Player) => + setPlayer(pl)}> + + + + + + } + + + as Gtk.Popover + } $={(self) => { + const controllerMotion = Gtk.EventControllerMotion.new(); + self.add_controller(controllerMotion); + + self.set_child( + + + { + self.add_css_class("reveal"); + return true; + }], + [controllerMotion, "leave", () => { + self.remove_css_class("reveal"); + return false; + }] + ) + }> + + + + "go-down-symbolic"], + [self.popover, "closed", () => "go-next-symbolic"] + ) + } class={"arrow"} iconSize={Gtk.IconSize.NORMAL} + /> + + + as Gtk.Box + ); + }} + /> + } + + ; +}