better vinyl styling

This commit is contained in:
2025-09-30 12:56:05 +02:00
parent 9666a2f7ae
commit 7b0a4a56db
2 changed files with 32 additions and 57 deletions

View File

@@ -1,12 +1,10 @@
from fabric.widgets.box import Box from fabric.widgets.button import Button
from fabric.widgets.label import Label from fabric.widgets.image import Image
from fabric.widgets.eventbox import EventBox
from fabric.widgets.overlay import Overlay
from fabric.core.service import Property from fabric.core.service import Property
import subprocess import subprocess
class VinylButton(Box): class VinylButton(Button):
@Property(bool, "read-write", default_value=False) @Property(bool, "read-write", default_value=False)
def active(self) -> bool: def active(self) -> bool:
return self._active return self._active
@@ -35,35 +33,26 @@ class VinylButton(Box):
], ],
**kwargs, **kwargs,
): ):
super().__init__(**kwargs)
# Initialize properties # Initialize properties
self._active = False self._active = False
self._active_command = active_command self._active_command = active_command
self._inactive_command = inactive_command self._inactive_command = inactive_command
# Set up the icon # Set up the icon using GTK icon
self.icon = Label( self.icon = Image(
label="", # CD icon icon_name="folder-music-symbolic",
icon_size=16,
name="vinyl-icon", name="vinyl-icon",
style="",
) )
# Set up event box to handle clicks # Initialize the Button with the icon as child
self.event_box = EventBox( super().__init__(
events="button-press",
child=Overlay(
child=self.icon,
),
name="vinyl-button", name="vinyl-button",
child=self.icon,
on_clicked=self._on_clicked,
**kwargs,
) )
# Connect click event
self.event_box.connect("button-press-event", self._on_clicked)
# Add to parent box
self.add(self.event_box)
# Initialize appearance # Initialize appearance
self._update_appearance() self._update_appearance()
@@ -74,12 +63,10 @@ class VinylButton(Box):
else: else:
self.remove_style_class("active") self.remove_style_class("active")
def _on_clicked(self, _, event): def _on_clicked(self, button=None):
"""Handle button click event""" """Handle button click event"""
if event.button == 1: # Left click
# Toggle active state # Toggle active state
self.active = not self.active self.active = not self.active
return True
def _execute_active_command(self): def _execute_active_command(self):
"""Execute shell command when button is activated""" """Execute shell command when button is activated"""

View File

@@ -1,41 +1,29 @@
/* Vinyl button styling */ /* Vinyl button styling */
#vinyl-button { #vinyl-button {
padding: 0px 8px; background-color: var(--module-bg);
transition: padding 0.05s steps(8); padding: 4px 8px;
background-color: rgba(180, 180, 180, 0.2); border-radius: 12px;
border-radius: 4px; transition: background-color 0.2s ease;
transition: all 0.2s ease; }
#vinyl-button:hover {
background-color: var(--light-bg);
} }
/* Active state styling */ /* Active state styling */
.active #vinyl-button { #vinyl-button.active {
background-color: rgba(108, 158, 175, 0.7); background-color: var(--pink);
padding: 0px 32px; }
#vinyl-button.active:hover {
background-color: var(--turquoise);
} }
/* Icon styling */ /* Icon styling */
#vinyl-icon { #vinyl-icon {
color: #555555; color: var(--foreground);
min-width: 36px;
} }
/* Label styling */ #vinyl-button.active #vinyl-icon {
#vinyl-label { color: var(--background);
color: #333333;
}
/* Active state changes for icon and label */
.active #vinyl-icon,
.active #vinyl-label {
color: var(--pink);
padding: 0px 32px;
}
/* Hover effect */
#vinyl-button:hover {
background-color: rgba(180, 180, 180, 0.4);
}
.active #vinyl-button:hover {
background-color: rgba(108, 158, 175, 0.9);
} }