Commit 22c046a5 authored by Manuel Genovés's avatar Manuel Genovés
Browse files

add wip demo for timed animations

parent a4ca2dbb
Pipeline #305078 failed with stage
in 2 minutes and 36 seconds
......@@ -27,6 +27,8 @@ struct _AdwDemoWindow
GtkButton *avatar_remove_button;
GtkFileChooserNative *avatar_file_chooser;
GtkListBox *avatar_contacts;
AdwAnimation *timed_animation;
GtkFixed *timed_animation_widget_container;
};
G_DEFINE_TYPE (AdwDemoWindow, adw_demo_window, ADW_TYPE_APPLICATION_WINDOW)
......@@ -392,6 +394,53 @@ tab_view_demo_clicked_cb (GtkButton *btn,
gtk_window_present (GTK_WINDOW (window));
}
static char *
animations_interpolator_name (AdwEnumValueObject *value,
gpointer user_data)
{
g_return_val_if_fail (ADW_IS_ENUM_VALUE_OBJECT (value), NULL);
switch (adw_enum_value_object_get_value (value)) {
case ADW_TIMED_ANIMATION_INTERPOLATOR_EASE_IN:
return g_strdup (_("Ease in"));
case ADW_TIMED_ANIMATION_INTERPOLATOR_EASE_OUT:
return g_strdup (_("Ease out"));
case ADW_TIMED_ANIMATION_INTERPOLATOR_EASE_IN_OUT:
return g_strdup (_("Ease in-out"));
default:
return NULL;
}
}
static void
timed_animation_value_cb (double value,
GtkFixed *self)
{
double position = value * gtk_widget_get_allocated_width (GTK_WIDGET (self)) / 100;
gtk_fixed_move (self,
gtk_widget_get_first_child (GTK_WIDGET (self)),
position,
0);
gtk_widget_queue_allocate (GTK_WIDGET (self));
}
static void
timed_animation_play (AdwDemoWindow *self)
{
if (self->timed_animation) {
adw_animation_start (self->timed_animation);
}
self->timed_animation = adw_timed_animation_new (GTK_WIDGET (self->timed_animation_widget_container),
0,
100,
300,
(AdwAnimationTargetFunc) timed_animation_value_cb,
self->timed_animation_widget_container);
}
static void
adw_demo_window_class_init (AdwDemoWindowClass *klass)
{
......@@ -417,6 +466,7 @@ adw_demo_window_class_init (AdwDemoWindowClass *klass)
gtk_widget_class_bind_template_child (widget_class, AdwDemoWindow, avatar_file_chooser_label);
gtk_widget_class_bind_template_child (widget_class, AdwDemoWindow, avatar_remove_button);
gtk_widget_class_bind_template_child (widget_class, AdwDemoWindow, avatar_contacts);
gtk_widget_class_bind_template_child (widget_class, AdwDemoWindow, timed_animation_widget_container);
gtk_widget_class_bind_template_callback (widget_class, notify_visible_child_cb);
gtk_widget_class_bind_template_callback (widget_class, back_clicked_cb);
gtk_widget_class_bind_template_callback (widget_class, leaflet_back_clicked_cb);
......@@ -435,6 +485,8 @@ adw_demo_window_class_init (AdwDemoWindowClass *klass)
gtk_widget_class_bind_template_callback (widget_class, avatar_save_to_file_cb);
gtk_widget_class_bind_template_callback (widget_class, flap_demo_clicked_cb);
gtk_widget_class_bind_template_callback (widget_class, tab_view_demo_clicked_cb);
gtk_widget_class_bind_template_callback (widget_class, animations_interpolator_name);
gtk_widget_class_bind_template_callback (widget_class, timed_animation_play);
}
static void
......
......@@ -857,6 +857,151 @@
</property>
</object>
</child>
<child>
<object class="GtkStackPage">
<property name="name">animations</property>
<property name="title" translatable="yes">Timed Animations</property>
<property name="child">
<object class="GtkBox">
<property name="orientation">vertical</property>
<style>
<class name="timed-animation-page"/>
</style>
<child>
<object class="GtkFixed" id="timed-animation-widget-container">
<child>
<object class="AdwBin" id="timed-animation-widget">
<property name="halign">center</property>
<property name="valign">center</property>
<style>
<class name="htranslate"/>
</style>
</object>
</child>
</object>
</child>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Timed Animations</property>
<property name="halign">center</property>
<property name="xalign">0</property>
<property name="wrap">True</property>
<property name="wrap-mode">word-char</property>
<property name="justify">center</property>
<style>
<class name="title"/>
<class name="large-title"/>
</style>
</object>
</child>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Helpers for blah blah blah.</property>
<property name="justify">center</property>
<property name="use_markup">true</property>
<property name="wrap">True</property>
<style>
<class name="body"/>
<class name="description"/>
</style>
</object>
</child>
<child>
<object class="GtkBox">
<child>
<object class="GtkButton">
<property name="icon-name">spring-run-symbolic</property>
<property name="valign">center</property>
<property name="margin-end">18</property>
<signal name="clicked" handler="timed_animation_play" swapped="true"/>
<style>
<class name="circular-large"/>
<class name="suggested-action"/>
</style>
</object>
</child>
</object>
</child>
<child>
<object class="AdwClamp">
<property name="maximum-size">400</property>
<property name="tightening-threshold">300</property>
<property name="child">
<object class="GtkListBox" id="animations_listbox">
<property name="selection-mode">none</property>
<style>
<class name="content"/>
</style>
<child>
<object class="AdwActionRow">
<property name="title" translatable="yes">Repetitions</property>
<child>
<object class="GtkSpinButton" id="timed_animation_repetitions">
<property name="valign">center</property>
<property name="numeric">True</property>
<property name="adjustment">repetitions_adjustment</property>
</object>
</child>
</object>
</child>
<child>
<object class="AdwActionRow">
<property name="title" translatable="yes">Reverse</property>
<property name="activatable_widget">timed_animation_reverse</property>
<child>
<object class="GtkSwitch" id="timed_animation_reverse">
<property name="valign">center</property>
<property name="state">False</property>
</object>
</child>
</object>
</child>
<child>
<object class="AdwActionRow">
<property name="title" translatable="yes">Alternate</property>
<property name="activatable_widget">timed_animation_alternate</property>
<child>
<object class="GtkSwitch" id="timed_animation_alternate">
<property name="valign">center</property>
<property name="state">False</property>
</object>
</child>
</object>
</child>
<child>
<object class="AdwActionRow">
<property name="title" translatable="yes">Duration</property>
<child>
<object class="GtkSpinButton" id="timed_animation_duration">
<property name="valign">center</property>
<property name="numeric">True</property>
<property name="adjustment">duration_adjustment</property>
</object>
</child>
</object>
</child>
<child>
<object class="AdwComboRow">
<property name="title" translatable="yes">Interpolator</property>
<property name="model">
<object class="AdwEnumListModel">
<property name="enum-type">AdwTimedAnimationInterpolator</property>
</object>
</property>
<property name="expression">
<closure type="gchararray" function="animations_interpolator_name"/>
</property>
</object>
</child>
</object>
</property>
</object>
</child>
</object>
</property>
</object>
</child>
</object>
</child>
</object>
......@@ -970,6 +1115,20 @@
<property name="page-increment">8</property>
<property name="step-increment">8</property>
</object>
<object class="GtkAdjustment" id="repetitions_adjustment">
<property name="lower">-1</property>
<property name="upper">10</property>
<property name="value">1</property>
<property name="page-increment">1</property>
<property name="step-increment">1</property>
</object>
<object class="GtkAdjustment" id="duration_adjustment">
<property name="lower">100</property>
<property name="upper">4000</property>
<property name="value">300</property>
<property name="page-increment">100</property>
<property name="step-increment">100</property>
</object>
<object class="GtkFileFilter" id="avatar_file_filter">
<mime-types>
<mime-type>image/png</mime-type>
......
@define-color red_1 #f66151;
@define-color red_3 #e01b24;
@define-color green_2 #57e389;
@define-color green_5 #26a269;
@define-color blue_2 #62a0ea;
@define-color blue_4 #1c71d8;
@define-color yellow_1 #f9f06b;
@define-color yellow_2 #f8e45c;
@define-color yellow_5 #e5a50a;
stacksidebar {
border-left-width: 0px;
border-right-width: 0px;
......@@ -16,3 +26,17 @@ box.avatar-page { margin: 36px 12px; }
box.avatar-page > box > avatar { margin-bottom: 36px; }
box.avatar-page > box > label.title { margin-bottom: 12px; }
box.avatar-page > box > label.description { margin-bottom: 36px; }
.timed-animation-page { margin: 36px 12px; }
.timed-animation-page > label.title { margin-bottom: 12px; }
.timed-animation-page > label.description { margin-bottom: 36px; }
.htranslate {
min-width: 30px;
min-height: 30px;
border-radius: 24px;
background: #33d17a;
background: linear-gradient(to bottom, @green_2, @green_5);
margin-bottom: 36px;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment