~alextee/zrythm

8fd4998799eed15d921f38fac24e4adf3531b21f — Alexandros Theodotou 2 years ago c57bf53 adwaita_split_btn
try adwaita split button (WIP)
M data/css-themes/zrythm/_adwaita.scss => data/css-themes/zrythm/_adwaita.scss +253 -0
@@ 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,

M inc/gui/widgets/editor_toolbar.h => inc/gui/widgets/editor_toolbar.h +2 -1
@@ 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;

M resources/ui/editor_toolbar.ui => resources/ui/editor_toolbar.ui +1 -6
@@ 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>

M src/gui/widgets/editor_toolbar.c => src/gui/widgets/editor_toolbar.c +13 -23
@@ 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