Browse Source

try adwaita split button (WIP)

adwaita_split_btn
parent
commit
8fd4998799
Signed by: alex
GPG Key ID: 022EAE42313D70F3
  1. 253
      data/css-themes/zrythm/_adwaita.scss
  2. 3
      inc/gui/widgets/editor_toolbar.h
  3. 7
      resources/ui/editor_toolbar.ui
  4. 36
      src/gui/widgets/editor_toolbar.c

253
data/css-themes/zrythm/_adwaita.scss

@ -61,6 +61,19 @@ $view_selected_color: gtkalpha(currentColor, .1); @@ -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 { @@ -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,

3
inc/gui/widgets/editor_toolbar.h

@ -45,6 +45,7 @@ typedef struct _ButtonWithMenuWidget @@ -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 @@ -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;

7
resources/ui/editor_toolbar.ui

@ -7,10 +7,8 @@ @@ -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 @@ @@ -32,7 +30,6 @@
</child>
<child>
<object class="QuantizeBoxWidget" id="quantize_box">
<property name="visible">1</property>
</object>
</child>
<child>
@ -41,8 +38,7 @@ @@ -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 @@ @@ -52,7 +48,6 @@
</child>
<child>
<object class="PlayheadScrollButtonsWidget" id="playhead_scroll">
<property name="visible">True</property>
</object>
</child>
<child>

36
src/gui/widgets/editor_toolbar.c

@ -39,6 +39,8 @@ @@ -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 ( @@ -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 ( @@ -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 ( @@ -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

Loading…
Cancel
Save