Commit 65297f97 authored by Guido Gunther's avatar Guido Gunther Committed by Guido Gunther
Browse files

PhoshHome: Use CSS animations to change home button arrow direction


Signed-off-by: Guido Gunther's avatarGuido Günther <guido.gunther@puri.sm>
parent 694a13ea
Pipeline #26327 passed with stages
in 6 minutes and 34 seconds
......@@ -42,6 +42,7 @@ struct _PhoshHome
PhoshLayerSurface parent;
GtkWidget *btn_home;
GtkWidget *img_home;
GtkWidget *btn_osk;
GtkWidget *favorites;
......@@ -183,6 +184,7 @@ phosh_home_class_init (PhoshHomeClass *klass)
gtk_widget_class_set_template_from_resource (widget_class,
"/sm/puri/phosh/ui/home.ui");
gtk_widget_class_bind_template_child (widget_class, PhoshHome, btn_home);
gtk_widget_class_bind_template_child (widget_class, PhoshHome, img_home);
gtk_widget_class_bind_template_child (widget_class, PhoshHome, btn_osk);
gtk_widget_class_bind_template_child (widget_class, PhoshHome, favorites);
......@@ -226,6 +228,7 @@ void
phosh_home_set_state (PhoshHome *self, PhoshHomeState state)
{
int width, height;
GtkStyleContext *context;
g_return_if_fail (PHOSH_IS_HOME (self));
......@@ -244,5 +247,16 @@ phosh_home_set_state (PhoshHome *self, PhoshHomeState state)
phosh_layer_surface_set_size (PHOSH_LAYER_SURFACE (self), width, height);
context = gtk_widget_get_style_context(self->img_home);
gtk_widget_hide (self->img_home);
if (state == PHOSH_HOME_STATE_UNFOLDED) {
gtk_style_context_add_class(context, "phosh-home-btn-image-down");
gtk_style_context_remove_class(context, "phosh-home-btn-image-up");
} else {
gtk_style_context_remove_class(context, "phosh-home-btn-image-down");
gtk_style_context_add_class(context, "phosh-home-btn-image-up");
}
gtk_widget_show (self->img_home);
g_object_notify_by_pspec (G_OBJECT (self), props[PROP_HOME_STATE]);
}
......@@ -21,6 +21,32 @@
padding: 6px;
}
@keyframes spin-ff {
from {-gtk-icon-transform:rotate(0deg);}
to {-gtk-icon-transform:rotate(180deg);}
}
@keyframes spin-bw {
from {-gtk-icon-transform:rotate(180deg);}
to {-gtk-icon-transform:rotate(0deg);}
}
.phosh-home-btn-image-down {
animation-name: spin-ff;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.phosh-home-btn-image-up {
animation-name: spin-bw;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
/* Settings menu */
.phosh-settings-menu {
background-color: black;
......
......@@ -31,6 +31,9 @@
<property name="can_focus">False</property>
<property name="pixel_size">24</property>
<property name="icon_name">swipe-arrow-symbolic</property>
<style>
<class name="phosh-home-btn-image-down"/>
</style>
</object>
</child>
<style>
......
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