From 812cdc6677ee6b485cc1924876f6010f99179c0b Mon Sep 17 00:00:00 2001 From: Joshua Strobl Date: Thu, 8 Jul 2021 14:39:39 +0300 Subject: [PATCH] Implement pseudoactive style and apply it to our KotoButton on hover / leave (removal). Apply our pseudoactive styling to very specific KotoButtons in our KotoNav. --- src/koto-button.c | 63 +++++++++++++++++++++++++++++++ src/koto-button.h | 15 ++++++++ theme/_button.scss | 2 +- theme/_primary-nav.scss | 22 ++++++++++- theme/variants/dark/_vars.scss | 2 + theme/variants/gruvbox/_vars.scss | 2 + theme/variants/light/_vars.scss | 2 + 7 files changed, 105 insertions(+), 3 deletions(-) diff --git a/src/koto-button.c b/src/koto-button.c index 4c5b8df..5a40f04 100644 --- a/src/koto-button.c +++ b/src/koto-button.c @@ -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, diff --git a/src/koto-button.h b/src/koto-button.h index 84cd84f..aa1fa6f 100644 --- a/src/koto-button.h +++ b/src/koto-button.h @@ -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 diff --git a/theme/_button.scss b/theme/_button.scss index a283d47..ab470c1 100644 --- a/theme/_button.scss +++ b/theme/_button.scss @@ -12,6 +12,6 @@ } &.active > image { - color: $green; + color: $koto-primary-color; } } diff --git a/theme/_primary-nav.scss b/theme/_primary-nav.scss index 5451909..7c0c054 100644 --- a/theme/_primary-nav.scss +++ b/theme/_primary-nav.scss @@ -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 { diff --git a/theme/variants/dark/_vars.scss b/theme/variants/dark/_vars.scss index 8f4df04..2748469 100644 --- a/theme/variants/dark/_vars.scss +++ b/theme/variants/dark/_vars.scss @@ -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; diff --git a/theme/variants/gruvbox/_vars.scss b/theme/variants/gruvbox/_vars.scss index ad5362a..db06e49 100644 --- a/theme/variants/gruvbox/_vars.scss +++ b/theme/variants/gruvbox/_vars.scss @@ -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; diff --git a/theme/variants/light/_vars.scss b/theme/variants/light/_vars.scss index 08ddbc6..34fd53c 100644 --- a/theme/variants/light/_vars.scss +++ b/theme/variants/light/_vars.scss @@ -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;