try adwaita split button (WIP)

data/css-themes/zrythm/_adwaita.scss

@@ -61,6 +61,19 @@ $view_selected_color: gtkalpha(currentColor, .1);
 $view_selected_hover_color: gtkalpha(currentColor, .13);
 $view_selected_active_color: gtkalpha(currentColor, .19);
 //$focus_border_color:  gtkalpha($accent_bg_color, $focus_border_opacity);
+$dimmer_opacity: 0.3;
+$window_bg_color: #242424;
+$window_fg_color: white;
+$opaque_button_default_bg: gtkmix($window_bg_color, $window_fg_color, 85%);
+$button_radius: 6px;
+$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$button_transition: all 200ms $ease-out-quad;
+$accent_bg_color: #3584e4;
+$accent_fg_color: #ffffff;
+$destructive_bg_color: #e01b24;
+$destructive_fg_color: #ffffff;
+$strong_disabled_opacity: 0.3;
+$drop_target_color: $accent_bg_color;
 
 /* adwaita stack view */
 viewswitcher {
@@ -185,6 +198,246 @@ indicatorbin {
   }
 }
 
+/******************
+ * AdwSplitButton *
+ ******************/
+
+%opaque_button {
+  box-shadow: none;
+
+  //@include focus-ring($outer: true, $offset: 1px);
+  transition: $button_transition;
+
+  &:hover {
+    background-image: image(gtkalpha(currentColor, .1));
+  }
+
+  &.keyboard-activating,
+  &:active {
+    background-image: image(transparentize(black, .8));
+  }
+
+  &:checked {
+    background-image: image(transparentize(black, .85));
+
+    &:hover {
+      background-image: image(transparentize(black, .95));
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-image: image(transparentize(black, .7));
+    }
+  }
+}
+
+%button_basic_drop_active,
+button:drop(active) {
+  color: $drop_target_color;
+  box-shadow: inset 0 0 0 2px $drop_target_color;
+}
+
+%button_basic_flat,
+button.flat {
+  background: transparent;
+  //@include focus-ring();
+  transition: $button_transition;
+
+  box-shadow: none;
+
+  &:hover {
+    background: $view_hover_color;
+  }
+
+  &.keyboard-activating,
+  &:active {
+    background: $view_active_color;
+  }
+
+  &:checked {
+    background: $view_selected_color;
+
+    &:hover {
+      background: $view_selected_hover_color;
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background: $view_selected_active_color;
+    }
+  }
+
+  &:disabled:not(:checked) {
+    filter: opacity($strong_disabled_opacity);
+  }
+
+  // Specificity bump
+  &:drop(active) {
+    @extend %button_basic_drop_active;
+  }
+}
+
+%outline_button,
+button.outline {
+  @extend %button_basic_flat;
+
+    box-shadow: inset 0 0 0 1px gtkalpha(currentColor, .15);
+
+    &:hover, &:active, &:checked {
+      box-shadow: none;
+    }
+
+  // Specificity bump
+  &:drop(active) {
+    @extend %button_basic_drop_active;
+  }
+}
+
+splitbutton {
+  border-radius: $button_radius;
+
+  &, & > separator {
+    transition: $button_transition;
+    transition-property: background;
+  }
+
+  > separator {
+    margin-top: 6px;
+    margin-bottom: 6px;
+    background: none;
+  }
+
+  > menubutton > button {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  // Since the inner button doesn't have any style classes on it,
+  // we have to add them manually
+  &.image-button > button {
+    min-width: 24px;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+
+  &.text-button.image-button > button,
+  &.image-text-button > button {
+    padding-left: 9px;
+    padding-right: 9px;
+
+    > box {
+      border-spacing: 6px;
+    }
+  }
+
+  // Reimplementing linked so we don't blow up css
+  > button:dir(ltr),
+  > menubutton > button:dir(rtl) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-right: -1px;
+  }
+
+  > button:dir(rtl),
+  > menubutton > button:dir(ltr) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: -1px;
+  }
+
+  @at-root %flat_split_button,
+  &.flat {
+    > separator {
+      background: gtkalpha(currentColor, $dimmer_opacity);
+    }
+
+    &:hover,
+    &:active,
+    &:checked {
+      background: $view_hover_color;
+
+      > separator {
+        background: none;
+      }
+    }
+
+    &:focus-within:focus-visible > separator {
+      background: none;
+    }
+
+    > button,
+    > menubutton > button {
+      @extend %button_basic_flat;
+
+      border-radius: $button_radius;
+    }
+  }
+
+  &.outline {
+    > button,
+    > menubutton > button {
+      @extend %outline_button;
+    }
+  }
+
+  &.suggested-action {
+    background-color: $accent_bg_color;
+    color: $accent_fg_color;
+  }
+
+  &.destructive-action {
+    background-color: $destructive_bg_color;
+    color: $destructive_fg_color;
+  }
+
+  &.opaque {
+    background-color: $opaque_button_default_bg;
+    color: $window_fg_color;
+  }
+
+  &.suggested-action,
+  &.destructive-action,
+  &.opaque {
+    > button, > menubutton > button {
+      @extend %opaque_button;
+
+      &, &:checked {
+        color: inherit;
+        background-color: transparent;
+      }
+    }
+
+    $_separator_color: gtkalpha(currentColor, $dimmer_opacity);
+    > menubutton > button {
+      &:dir(ltr) { box-shadow: inset 1px 0 $_separator_color; }
+      &:dir(rtl) { box-shadow: inset -1px 0 $_separator_color; }
+    }
+  }
+
+  > menubutton > button > arrow.none {
+    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+  }
+}
+
+buttoncontent {
+  border-spacing: 6px;
+
+  > label {
+    font-weight: bold;
+
+    &:dir(ltr) { padding-right: 2px; }
+    &:dir(rtl) { padding-left: 2px; }
+  }
+
+  .arrow-button > box > &,
+  splitbutton > button > & {
+    > label {
+      &:dir(ltr) { padding-right: 0; }
+      &:dir(rtl) { padding-left: 0; }
+    }
+  }
+}
+
 /* === Adwaita preferences === */
 
 window.preferences > contents > leaflet > box > stack > stack > scrolledwindow > viewport > clamp > list,

inc/gui/widgets/editor_toolbar.h

@@ -45,6 +45,7 @@ typedef struct _ButtonWithMenuWidget
   ButtonWithMenuWidget;
 typedef struct _PlayheadScrollButtonsWidget
   PlayheadScrollButtonsWidget;
+typedef struct _AdwSplitButton AdwSplitButton;
 
 /**
  * The PianoRoll toolbar in the top.
@@ -56,7 +57,7 @@ typedef struct _EditorToolbarWidget
   SnapBoxWidget *     snap_box;
   QuantizeBoxWidget * quantize_box;
   GtkButton *     event_viewer_toggle;
-  ButtonWithMenuWidget * functions_btn;
+  AdwSplitButton * functions_btn;
   GtkButton *         apply_function_btn;
 
   GtkSeparator *      sep_after_chord_highlight;

resources/ui/editor_toolbar.ui

@@ -7,10 +7,8 @@
       <class name="arranger-toolbar"/>
       <class name="editor-toolbar"/>
     </style>
-    <property name="visible">True</property>
     <child>
       <object class="SnapBoxWidget" id="snap_box">
-        <property name="visible">True</property>
       </object>
     </child>
     <child>
@@ -32,7 +30,6 @@
     </child>
     <child>
       <object class="QuantizeBoxWidget" id="quantize_box">
-        <property name="visible">1</property>
       </object>
     </child>
     <child>
@@ -41,8 +38,7 @@
       </object>
     </child>
     <child>
-      <object class="ButtonWithMenuWidget" id="functions_btn">
-        <property name="visible">True</property>
+      <object class="AdwSplitButton" id="functions_btn">
       </object>
     </child>
     <child>
@@ -52,7 +48,6 @@
     </child>
     <child>
       <object class="PlayheadScrollButtonsWidget" id="playhead_scroll">
-        <property name="visible">True</property>
       </object>
     </child>
     <child>

src/gui/widgets/editor_toolbar.c

@@ -39,6 +39,8 @@
 
 #include <glib/gi18n.h>
 
+#include <adwaita.h>
+
 G_DEFINE_TYPE (
   EditorToolbarWidget, editor_toolbar_widget,
   GTK_TYPE_BOX)
@@ -179,20 +181,15 @@ editor_toolbar_widget_refresh (
           g_strdup_printf (
             _("Apply %s with previous settings"),
           _(midi_function_type_to_string (type)));
-        gtk_button_set_label (
-          self->apply_function_btn, str);
         gtk_widget_set_tooltip_text (
-          GTK_WIDGET (self->apply_function_btn),
+          GTK_WIDGET (self->functions_btn),
           tooltip_str);
         g_free (str);
         g_free (tooltip_str);
 
-        /* FIXME uncomment when GTK fixes this */
-#if 0
-        button_with_menu_widget_set_menu_model (
+        adw_split_button_set_menu_model (
           self->functions_btn,
           self->midi_functions_menu);
-#endif
 
         /* set visibility of each tool item */
         gtk_widget_set_visible (
@@ -359,6 +356,7 @@ editor_toolbar_widget_init (
   g_type_ensure (
     PLAYHEAD_SCROLL_BUTTONS_WIDGET_TYPE);
   g_type_ensure (SNAP_BOX_WIDGET_TYPE);
+  g_type_ensure (ADW_TYPE_SPLIT_BUTTON);
 
   gtk_widget_init_template (GTK_WIDGET (self));
 
@@ -378,24 +376,16 @@ editor_toolbar_widget_init (
 #undef SET_TOOLTIP
 
   const char * str = "Legato";
-  self->apply_function_btn =
-    GTK_BUTTON (
-      gtk_button_new_from_icon_name (
-        /*"mathmode",*/
-        "code-context"));
   gtk_actionable_set_detailed_action_name (
-    GTK_ACTIONABLE (self->apply_function_btn),
+    GTK_ACTIONABLE (self->functions_btn),
     "app.editor-function::current");
-  gtk_button_set_label (
-    self->apply_function_btn, str);
-  /*gtk_button_set_always_show_image (*/
-    /*self->apply_function_btn, true);*/
-  gtk_widget_set_visible (
-    GTK_WIDGET (self->apply_function_btn), true);
-  button_with_menu_widget_setup (
-    self->functions_btn,
-    self->apply_function_btn,
-    NULL, true, -1, str, _("Select function"));
+  adw_split_button_set_label (
+    self->functions_btn, str);
+  adw_split_button_set_icon_name (
+    self->functions_btn, "code-context");
+  gtk_widget_set_tooltip_text (
+    GTK_WIDGET (self->functions_btn),
+    _("Apply function"));
 
   /* TODO */
 #if 0