candifloss/chocobar-x11
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic color styles

Browse Source 
- Remove placeholder colors from right-side widgets
- Set actual colors to give a glassy look
This commit is contained in:
Candifloss 2025-11-23 22:01:25 +05:30
parent c73a4b575e
commit 6ac513f301
4 changed files with 40 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/date-widget.slint
View File

@ -1,10 +1,17 @@
export component DateWidget {
in-out property <string> date_text;
// Colors
in property <color> icon_color: #ffffff;
in property <color> bg_normal: #00000000;
in property <color> bg_hover: #ffffff10;
in property <color> bg_clicked: #ffffff30;
callback show_calendar(); // Callback to execute things from Rust, because Slint can't
Rectangle {
background: touch_area.pressed ? #704a4a : touch_area.has-hover ? #4d8a7a : #6f6291; // Bg color based on click & hover
background: touch_area.pressed ? bg_clicked
: touch_area.has-hover ? bg_hover
: bg_normal; // Bg color based on click & hover
border-radius: 3px;
HorizontalLayout {

6
ui/square-icon-widget.slint
View File

@ -6,9 +6,9 @@ export component SquareIconWidget {
// Colors
in property <color> icon_color: #ffffff;
in property <color> bg_normal: #8e9162;
in property <color> bg_hover: #6d8a4d;
in property <color> bg_clicked: #4a5f70;
in property <color> bg_normal: #00000000;
in property <color> bg_hover: #ffffff10;
in property <color> bg_clicked: #ffffff30;
// Badge
in property <int> badge_count: 0;

9
ui/time-widget.slint
View File

@ -1,10 +1,17 @@
export component TimeWidget {
in-out property <string> time_text;
// Colors
in property <color> icon_color: #ffffff;
in property <color> bg_normal: #00000000;
in property <color> bg_hover: #ffffff10;
in property <color> bg_clicked: #ffffff30;
callback show_clock(); // Callback to execute things from Rust, because Slint can't
Rectangle {
background: touch_area.pressed ? #555 : touch_area.has-hover ? #444 : #333; // Bg color based on click & hover
background: touch_area.pressed ? bg_clicked
: touch_area.has-hover ? bg_hover
: bg_normal; // Bg color based on click & hover
border-radius: 3px;
HorizontalLayout {

41
ui/topbar.slint
View File

@ -9,6 +9,7 @@ export component TopBar inherits Window {
in property<int> bar_height;
in property<int> def_font_size;
in property<string> def_font_fam;
background: #00000000;
// Time widget
in-out property <string> time_text;
@ -48,38 +49,38 @@ export component TopBar inherits Window {
// Wifi widget
in property <string> wifi_tooltip;
in property <string> wifi_icon;
/*in property <color> wifi_icon_color: #ffffff;
in property <color> wifi_bg_normal: #8e9162;
in property <color> wifi_bg_hover: #6d8a4d;
in property <color> wifi_bg_clicked: #4a5f70;*/
/*in property <color> wifi_icon_color;
in property <color> wifi_bg_normal;
in property <color> wifi_bg_hover;
in property <color> wifi_bg_clicked;*/
callback show_wifi();
// Weather widget
in property <string> weather_tooltip;
in property <string> weather_icon;
/*in property <color> weather_icon_color: #ffffff;
in property <color> weather_bg_normal: #8e9162;
in property <color> weather_bg_hover: #6d8a4d;
in property <color> weather_bg_clicked: #4a5f70;*/
/*in property <color> weather_icon_color;
in property <color> weather_bg_normal;
in property <color> weather_bg_hover;
in property <color> weather_bg_clicked;*/
callback show_weather();
// Notifications widget
in property <string> notif_tooltip;
in property <string> notif_icon: "󰂚";
in property <int> notif_count: 0;
/*in property <color> notif_icon_color: #ffffff;
in property <color> notif_bg_normal: #8e9162;
in property <color> notif_bg_hover: #6d8a4d;
in property <color> notif_bg_clicked: #4a5f70;*/
/*in property <color> notif_icon_color;
in property <color> notif_bg_normal;
in property <color> notif_bg_hover;
in property <color> notif_bg_clicked;*/
callback show_notif();
// Power button
in property <string> power_tooltip;
in property <string> power_icon: "";
/*in property <color> power_icon_color: #ffffff;
in property <color> power_bg_normal: #8e9162;
in property <color> power_bg_hover: #6d8a4d;
in property <color> power_bg_clicked: #4a5f70;*/
/*in property <color> power_icon_color;
in property <color> power_bg_normal;
in property <color> power_bg_hover;
in property <color> power_bg_clicked;*/
callback show_power();
title: "chocobar";
@ -97,7 +98,7 @@ export component TopBar inherits Window {
y: 0px;
width: 100%;
height: 100%;
background: #999898a6;
background: rgba(128, 128, 128, 0.4);
border-radius: 0px;
HorizontalLayout {
@ -105,7 +106,7 @@ export component TopBar inherits Window {
y: 0px;
width: 100%;
height: 100%;
alignment: space-between;
//alignment: space-between;
// Left side
Rectangle {
@ -115,12 +116,12 @@ export component TopBar inherits Window {
// Middle
Rectangle {
background: #779e5c7a;
background: #5d8b3c79;
}
// Right side
Rectangle {
background: #c2779a7a;
//background: #c2779a7a;
width: parent.width/3;
HorizontalLayout {