[libadwaita/wip/exalm/needs-attention: 6/6] view-switcher-button: Reimplement indicator as a widget

[Alexander Mikhaylenko <alexm src gnome org>]

commit 5f7c89987499729154faa0fbf8225e57793d104d
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Feb 26 23:37:06 2021 +0500

    view-switcher-button: Reimplement indicator as a widget
    
    Stop doing hacks with css gradients that aren't rendered correctly in GTK4.
    Instead, use the newly added AdwIndicatorBin to have nice indicators that
    mask the icons underneath.

 src/adw-view-switcher-button.c             | 22 +++++++++----
 src/adw-view-switcher-button.ui            | 52 +++++++++++++++++++++---------
 src/stylesheet/widgets/_view-switcher.scss | 34 ++++---------------
 3 files changed, 60 insertions(+), 48 deletions(-)
---
diff --git a/src/adw-view-switcher-button.c b/src/adw-view-switcher-button.c
index 0c9acc5..aa4af79 100644
--- a/src/adw-view-switcher-button.c
+++ b/src/adw-view-switcher-button.c
@@ -7,6 +7,7 @@
 
 #include "config.h"
 
+#include "adw-indicator-bin-private.h"
 #include "adw-view-switcher-button-private.h"
 
 /**
@@ -55,6 +56,7 @@ struct _AdwViewSwitcherButton
   char *icon_name;
   char *label;
   GtkOrientation orientation;
+  gboolean needs_attention;
 
   guint switch_timer;
 };
@@ -131,6 +133,14 @@ set_orientation (AdwViewSwitcherButton *self,
                                              self->horizontal_box));
 }
 
+static bool
+should_show_indicator (AdwViewSwitcherButton *self,
+                       gboolean               needs_attention,
+                       gboolean               active)
+{
+  return needs_attention && !active;
+}
+
 static void
 adw_view_switcher_button_get_property (GObject    *object,
                                        guint       prop_id,
@@ -281,6 +291,7 @@ adw_view_switcher_button_class_init (AdwViewSwitcherButtonClass *klass)
   gtk_widget_class_bind_template_callback (widget_class, active_changed_cb);
   gtk_widget_class_bind_template_callback (widget_class, drag_enter_cb);
   gtk_widget_class_bind_template_callback (widget_class, drag_leave_cb);
+  gtk_widget_class_bind_template_callback (widget_class, should_show_indicator);
 
   gtk_widget_class_set_accessible_role (widget_class, GTK_ACCESSIBLE_ROLE_TAB);
 }
@@ -290,6 +301,8 @@ adw_view_switcher_button_init (AdwViewSwitcherButton *self)
 {
   self->icon_name = g_strdup ("image-missing");
 
+  g_type_ensure (ADW_TYPE_INDICATOR_BIN);
+
   gtk_widget_init_template (GTK_WIDGET (self));
 
   gtk_stack_set_visible_child (GTK_STACK (self->stack), GTK_WIDGET (self->horizontal_box));
@@ -380,7 +393,7 @@ adw_view_switcher_button_get_needs_attention (AdwViewSwitcherButton *self)
 {
   g_return_val_if_fail (ADW_IS_VIEW_SWITCHER_BUTTON (self), FALSE);
 
-  return gtk_widget_has_css_class (GTK_WIDGET (self), "needs-attention");
+  return self->needs_attention;
 }
 
 /**
@@ -400,13 +413,10 @@ adw_view_switcher_button_set_needs_attention (AdwViewSwitcherButton *self,
 
   needs_attention = !!needs_attention;
 
-  if (gtk_widget_has_css_class (GTK_WIDGET (self), "needs-attention") == needs_attention)
+  if (self->needs_attention == needs_attention)
     return;
 
-  if (needs_attention)
-    gtk_widget_add_css_class (GTK_WIDGET (self), "needs-attention");
-  else
-    gtk_widget_remove_css_class (GTK_WIDGET (self), "needs-attention");
+  self->needs_attention = needs_attention;
 
   g_object_notify_by_pspec (G_OBJECT (self), props[PROP_NEEDS_ATTENTION]);
 }
diff --git a/src/adw-view-switcher-button.ui b/src/adw-view-switcher-button.ui
index 2836954..1839dda 100644
--- a/src/adw-view-switcher-button.ui
+++ b/src/adw-view-switcher-button.ui
@@ -26,20 +26,31 @@
               </object>
             </child>
             <child>
-              <object class="GtkStack" id="horizontal_label_stack">
+              <object class="AdwIndicatorBin">
+                <property name="contained">True</property>
+                <binding name="show-indicator">
+                  <closure type="gboolean" function="should_show_indicator">
+                    <lookup name="needs-attention">AdwViewSwitcherButton</lookup>
+                    <lookup name="active">AdwViewSwitcherButton</lookup>
+                  </closure>
+                </binding>
                 <child>
-                  <object class="GtkLabel" id="horizontal_label_inactive">
-                    <property name="label" bind-source="AdwViewSwitcherButton" bind-property="label" 
bind-flags="sync-create|bidirectional" />
-                    <property name="use-underline" bind-source="AdwViewSwitcherButton" 
bind-property="use-underline" bind-flags="sync-create|bidirectional" />
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkLabel" id="horizontal_label_active">
-                    <property name="label" bind-source="AdwViewSwitcherButton" bind-property="label" 
bind-flags="sync-create|bidirectional" />
-                    <property name="use-underline" bind-source="AdwViewSwitcherButton" 
bind-property="use-underline" bind-flags="sync-create|bidirectional" />
-                    <style>
-                      <class name="active"/>
-                    </style>
+                  <object class="GtkStack" id="horizontal_label_stack">
+                    <child>
+                      <object class="GtkLabel" id="horizontal_label_inactive">
+                        <property name="label" bind-source="AdwViewSwitcherButton" bind-property="label" 
bind-flags="sync-create|bidirectional" />
+                        <property name="use-underline" bind-source="AdwViewSwitcherButton" 
bind-property="use-underline" bind-flags="sync-create|bidirectional" />
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="horizontal_label_active">
+                        <property name="label" bind-source="AdwViewSwitcherButton" bind-property="label" 
bind-flags="sync-create|bidirectional" />
+                        <property name="use-underline" bind-source="AdwViewSwitcherButton" 
bind-property="use-underline" bind-flags="sync-create|bidirectional" />
+                        <style>
+                          <class name="active"/>
+                        </style>
+                      </object>
+                    </child>
                   </object>
                 </child>
               </object>
@@ -56,8 +67,19 @@
               <class name="narrow"/>
             </style>
             <child>
-              <object class="GtkImage" id="vertical_image">
-                <property name="icon-name" bind-source="AdwViewSwitcherButton" bind-property="icon-name" 
bind-flags="sync-create" />
+              <object class="AdwIndicatorBin">
+                <property name="halign">center</property>
+                <binding name="show-indicator">
+                  <closure type="gboolean" function="should_show_indicator">
+                    <lookup name="needs-attention">AdwViewSwitcherButton</lookup>
+                    <lookup name="active">AdwViewSwitcherButton</lookup>
+                  </closure>
+                </binding>
+                <property name="child">
+                  <object class="GtkImage" id="vertical_image">
+                    <property name="icon-name" bind-source="AdwViewSwitcherButton" bind-property="icon-name" 
bind-flags="sync-create" />
+                  </object>
+                </property>
               </object>
             </child>
             <child>
diff --git a/src/stylesheet/widgets/_view-switcher.scss b/src/stylesheet/widgets/_view-switcher.scss
index 7bede98..08d6cf3 100644
--- a/src/stylesheet/widgets/_view-switcher.scss
+++ b/src/stylesheet/widgets/_view-switcher.scss
@@ -16,7 +16,6 @@ viewswitcher {
         padding-top: 7px;
         padding-bottom: 5px;
 
-        image,
         label {
           padding-left: 8px;
           padding-right: 8px;
@@ -41,27 +40,6 @@ viewswitcher {
         font-weight: bold;
       }
     }
-
-    &.needs-attention {
-      &:active > stack > box label,
-      &:checked > stack > box label {
-        animation: none;
-        background-image: none;
-      }
-
-      > stack > box label {
-        animation: needs_attention 150ms ease-in;
-        background-image: radial-gradient(#3584e4 50%, transparent),
-                          radial-gradient(rgba(255, 255, 255, 0.769231) 50%, transparent);
-        background-size: 6px 6px, 6px 6px;
-        background-repeat: no-repeat;
-        background-position: right 0px, right 1px;
-
-        &:dir(rtl) {
-          background-position: left 0px, left 1px;
-        }
-      }
-    }
   }
 }
 
@@ -86,12 +64,14 @@ viewswitchertitle viewswitcher {
  * AdwIndicatorBin *
  *******************/
 
-indicator-bin {
-  indicator { margin: 1px; }
-  mask { padding: 1px; }
+indicatorbin {
+  > indicator { margin: 1px; }
+  > mask { padding: 1px; }
+
+  > indicator, > mask {
+    $_indicator_color: #3584e4;
 
-  indicator, mask {
-    background: #3584e4;
+    background: $_indicator_color;
     min-width: 6px;
     min-height: 6px;
     border-radius: 100%;