ModernDesktopInitiative/koto
4
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

Implement pseudoactive style and apply it to our KotoButton on hover / leave (removal).

Browse source 
Apply our pseudoactive styling to very specific KotoButtons in our KotoNav.
This commit is contained in:
Joshua Strobl 2021-07-08 14:39:39 +03:00
parent a15f17ac99
commit 812cdc6677
7 changed files with 105 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/koto-button.c
View file

@ -191,6 +191,11 @@ static void koto_button_init(KotoButton * self) {
gtk_widget_add_controller(GTK_WIDGET(self), GTK_EVENT_CONTROLLER(self->left_click_gesture)); // Add our left click gesture
gtk_widget_add_controller(GTK_WIDGET(self), GTK_EVENT_CONTROLLER(self->right_click_gesture)); // Add our right click gesture
GtkEventController * motion = gtk_event_controller_motion_new(); // Create a new motion controller
g_signal_connect(motion, "enter", G_CALLBACK(koto_button_handle_mouse_enter), self); // Handle mouse enter on motion
g_signal_connect(motion, "leave", G_CALLBACK(koto_button_handle_mouse_leave), self); // Handle mouse leave on motion
gtk_widget_add_controller(GTK_WIDGET(self), motion);
}
static void koto_button_constructed(GObject * obj) {
@ -308,6 +313,40 @@ void koto_button_flip(KotoButton * self) {
koto_button_show_image(self, !self->currently_showing_alt);
}
void koto_button_handle_mouse_enter(
GtkEventControllerMotion * controller,
double x,
double y,
gpointer user_data
) {
(void) controller;
(void) x;
(void) y;
KotoButton * self = user_data;
if (!KOTO_IS_BUTTON(self)) { // Not a button
return;
}
koto_button_set_pseudoactive_styling(self); // Set to be pseudoactive in styling
}
void koto_button_handle_mouse_leave(
GtkEventControllerMotion * controller,
gpointer user_data
) {
(void) controller;
KotoButton * self = user_data;
if (!KOTO_IS_BUTTON(self)) { // Not a button
return;
}
koto_button_unset_pseudoactive_styling(self); // Unset the pseudoactive styling
}
void koto_button_hide_image(KotoButton * self) {
if (!KOTO_IS_BUTTON(self)) { // Not a button
return;
@ -318,6 +357,18 @@ void koto_button_hide_image(KotoButton * self) {
}
}
void koto_button_set_pseudoactive_styling(KotoButton * self) {
if (!KOTO_IS_BUTTON(self)) { // Not a button
return;
}
if (gtk_widget_has_css_class(GTK_WIDGET(self), "pseudoactive")) { // Already is pseudoactive
return;
}
gtk_widget_add_css_class(GTK_WIDGET(self), "pseudoactive"); // Set to pseudoactive
}
void koto_button_set_badge_text(
KotoButton * self,
gchar * text
@ -550,6 +601,18 @@ void koto_button_unflatten(KotoButton * self) {
gtk_widget_remove_css_class(GTK_WIDGET(self), "flat");
}
void koto_button_unset_pseudoactive_styling(KotoButton * self) {
if (!KOTO_IS_BUTTON(self)) {
return;
}
if (!gtk_widget_has_css_class(GTK_WIDGET(self), "pseudoactive")) { // Don't have the CSS class
return;
}
gtk_widget_remove_css_class(GTK_WIDGET(self), "pseudoactive"); // Remove pseudoactive class
}
KotoButton * koto_button_new_plain(gchar * label) {
return g_object_new(
KOTO_TYPE_BUTTON,

15
src/koto-button.h
View file

@ -75,8 +75,22 @@ void koto_button_add_click_handler(
void koto_button_flip(KotoButton * self);
void koto_button_handle_mouse_enter(
GtkEventControllerMotion * controller,
double x,
double y,
gpointer user_data
);
void koto_button_handle_mouse_leave(
GtkEventControllerMotion * controller,
gpointer user_data
);
void koto_button_hide_image(KotoButton * self);
void koto_button_set_pseudoactive_styling(KotoButton * self);
void koto_button_set_badge_text(
KotoButton * self,
gchar * text
@ -119,5 +133,6 @@ void koto_button_show_image(
);
void koto_button_unflatten(KotoButton * self);
void koto_button_unset_pseudoactive_styling(KotoButton * self);
G_END_DECLS

2
theme/_button.scss
View file

@ -12,6 +12,6 @@
}
&.active > image {
color: $green;
color: $koto-primary-color;
}
}

22
theme/_primary-nav.scss
View file

@ -1,11 +1,29 @@
.primary-nav {
padding: 20px;
padding: 10px 0;
& > viewport > box {
& > .koto-button, // Direct buttons like Home
& > .expander > .expander-header { // Expander Headers
font-size: large;
padding: 10px 0;
padding-top: 10px;
padding-bottom: 10px;
}
& > .koto-button, // Direct buttons like Home
& > .expander > .expander-header, // Expander Headers
& > .expander revealer .koto-button { // Expander revealer Buttons
margin-left: 10px;
margin-right: 10px;
padding-left: 10px;
padding-right: 10px;
}
& > .koto-button, // Direct buttons like Home
& > .expander revealer .koto-button { // Expander revealer Buttons
&.pseudoactive { // When hovering or explicit request to show as active
background-color: $primary-nav-button-active-color;
border-radius: 10px;
}
}
& > .expander {

2
theme/variants/dark/_vars.scss
View file

@ -18,6 +18,8 @@ $button-normal-color-border: black;
$input-background: $bg-primary;
$primary-nav-button-active-color: $bg-secondary;
$artist-list-bg: $bg-secondary;
$player-bar-icon-color: $darkgrey;

2
theme/variants/gruvbox/_vars.scss
View file

@ -18,6 +18,8 @@ $button-normal-color-border: black;
$input-background: $bg-primary;
$primary-nav-button-active-color: $bg-secondary;
$artist-list-bg: $bg-secondary;
$player-bar-icon-color: #423C3A;

2
theme/variants/light/_vars.scss
View file

@ -18,6 +18,8 @@ $button-normal-color-border: $darkgrey;
$input-background: $bg-primary;
$primary-nav-button-active-color: $bg-secondary;
$artist-list-bg: $bg-secondary;
$player-bar-icon-color: $darkgrey;