Candifloss
68037d7f24
- Add badge feature to `SquareIconWidget` - Badges for notifications, weather alerts, etc.
79 lines
2.3 KiB
Plaintext
79 lines
2.3 KiB
Plaintext
export component SquareIconWidget {
|
|
// Basic parameters shared by all square icon widgets
|
|
in property <int> bar_height;
|
|
in property <string> icon_text;
|
|
in property <string> tooltip_text;
|
|
|
|
// 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;
|
|
|
|
// 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;
|
|
width: bar_height * 1px;
|
|
|
|
Rectangle {
|
|
background: touch_area.pressed ? bg_clicked
|
|
: touch_area.has-hover ? bg_hover
|
|
: bg_normal;
|
|
border-radius: 3px;
|
|
|
|
// Main icon centered
|
|
HorizontalLayout {
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
|
|
Text {
|
|
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(); }
|
|
}
|
|
|
|
// 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
|
|
}
|