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

Icon badge and Notification widget

Browse Source 
- Add badge feature to `SquareIconWidget`
- Badges for notifications, weather alerts, etc.
This commit is contained in:
Candifloss 2025-11-23 19:12:05 +05:30
parent 2a1beab0e8
commit 68037d7f24
2 changed files with 70 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,5 @@
export component SquareIconWidget {
// Skeleton of suqre-shaped icon widgets
// with similar basic functions and appearance
// Basic parameters shared by all square icon widgets
in property <int> bar_height;
in property <string> icon_text;
in property <string> tooltip_text;
@ -11,10 +10,15 @@ export component SquareIconWidget {
in property <color> bg_hover: #6d8a4d;
in property <color> bg_clicked: #4a5f70;
// Badge
in property <int> badge_count: 0;
in property <color> badge_color: #165a96;
in property <color> badge_text_color: #ffffff;
callback square_btn_callback();
height: bar_height * 1px; // Same height as the bar
width: bar_height * 1px; // Square shape
height: bar_height * 1px;
width: bar_height * 1px;
Rectangle {
background: touch_area.pressed ? bg_clicked
@ -22,23 +26,53 @@ export component SquareIconWidget {
: bg_normal;
border-radius: 3px;
// Main icon centered
HorizontalLayout {
padding-left: 3px;
padding-right: 3px;
Text {
text: icon_text; // Every `SquareIconWidget` has an icon
text: icon_text; // The icon
color: icon_color;
vertical-alignment: center;
horizontal-alignment: center;
}
}
// Click area
touch_area := TouchArea {
// Action when the icon is clicked
clicked => { square_btn_callback(); }
}
}
// Tooltip will be added later — Slint’s ToolTip element is window-global
// Badge overlay (bottom-right)
if badge_count > 0 : Rectangle {
// Outer container: positioned and height-constrained
height: (bar_height / 3 + 3) * 1px;
x: root.width - self.width - 1px;
y: root.height - self.height - 1px;
horizontal-stretch: 0;
HorizontalLayout {
padding-left: 1px;
padding-right: 1px;
alignment: end;
Rectangle {
background: badge_color;
border-radius: self.height / 3;
min-width: self.height;
Text {
text: badge_count;
color: badge_text_color;
vertical-alignment: center;
horizontal-alignment: center;
font-size: (bar_height / 3) * 1px;
}
}
}
}
}
// Tooltip will be added later
}

31
ui/topbar.slint
View File

@ -57,12 +57,22 @@ export component TopBar inherits Window {
// Weather widget
in property <string> weather_tooltip;
in property <string> weather_icon;
in property <color> weather_icon_color: #ffffff;
/*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_bg_clicked: #4a5f70;*/
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;*/
callback show_notif();
title: "chocobar";
width: bar_width *1px;
height: bar_height *1px;
@ -107,15 +117,28 @@ export component TopBar inherits Window {
HorizontalLayout {
alignment: end; // Right-align
// SquareIconWidget - Notifications
SquareIconWidget {
bar_height: root.bar_height;
icon_text: root.notif_icon;
tooltip_text: root.notif_tooltip;
badge_count: root.notif_count;
/*icon_color: root.notif_icon_color;
bg_normal: root.notif_bg_normal;
bg_hover: root.notif_bg_hover;
bg_clicked: root.notif_bg_clicked;*/
square_btn_callback => root.show_notif();
}
// SquareIconWidget - Weather
SquareIconWidget {
bar_height: root.bar_height;
icon_text: root.weather_icon;
tooltip_text: root.weather_tooltip;
icon_color: root.weather_icon_color;
/*icon_color: root.weather_icon_color;
bg_normal: root.weather_bg_normal;
bg_hover: root.weather_bg_hover;
bg_clicked: root.weather_bg_clicked;
bg_clicked: root.weather_bg_clicked;*/
square_btn_callback => root.show_weather();
}