[recipes/about-animation: 6/8] Spice up the about dialog a bit

[Matthias Clasen <matthiasc src gnome org>]

commit ea7a82d0c87db6d37321a8aa41d636e102650f27
Author: Matthias Clasen <mclasen redhat com>
Date:   Thu Mar 16 20:56:03 2017 -0400

    Spice up the about dialog a bit
    
    Your moment of zen.

 src/gr-about-dialog.c |   54 ++++++++++++++++++++++++++++++++++++++++++++++++-
 src/recipes.css       |   25 ++++++++++++++++++++++
 2 files changed, 78 insertions(+), 1 deletions(-)
---
diff --git a/src/gr-about-dialog.c b/src/gr-about-dialog.c
index 7f1815f..c55ff47 100644
--- a/src/gr-about-dialog.c
+++ b/src/gr-about-dialog.c
@@ -37,6 +37,8 @@
 struct _GrAboutDialog
 {
         GtkAboutDialog parent_instance;
+
+        GtkWidget *logo_image;
 };
 
 G_DEFINE_TYPE (GrAboutDialog, gr_about_dialog, GTK_TYPE_ABOUT_DIALOG)
@@ -50,6 +52,7 @@ gr_about_dialog_finalize (GObject *object)
 static void
 gr_about_dialog_init (GrAboutDialog *self)
 {
+        gtk_style_context_add_class (gtk_widget_get_style_context (GTK_WIDGET (self)), "about");
 }
 
 static void
@@ -702,7 +705,7 @@ toggle_system (GtkToggleButton *button,
 static void
 page_changed (GObject *stack, GParamSpec *pspec, gpointer user_data)
 {
-        GtkAboutDialog *about = user_data;
+        GrAboutDialog *about = user_data;
         GtkWidget *credits_button;
         GtkWidget *system_button;
         const char *visible;
@@ -726,6 +729,54 @@ page_changed (GObject *stack, GParamSpec *pspec, gpointer user_data)
 }
 
 static void
+page_changed_for_image (GObject *stack, GParamSpec *pspec, gpointer user_data)
+{
+        GrAboutDialog *about = user_data;
+        const char *visible;
+
+        visible = gtk_stack_get_visible_child_name (GTK_STACK (stack));
+
+        if (strcmp (visible, "credits") == 0 || strcmp (visible, "system") == 0)
+                gtk_style_context_add_class (gtk_widget_get_style_context (about->logo_image), "small");
+        else
+                gtk_style_context_remove_class (gtk_widget_get_style_context (about->logo_image), "small");
+
+}
+
+static void
+tweak_image (GrAboutDialog *about)
+{
+        GtkWidget *content;
+        GtkWidget *box;
+        GtkWidget *stack;
+        GtkWidget *image;
+        GtkWidget *name_label;
+        GtkWidget *page_vbox;
+
+        content = gtk_dialog_get_content_area (GTK_DIALOG (about));
+        box = find_child_with_name (content, "box");
+        image = find_child_with_name (box, "logo_image");
+        gtk_style_context_add_class (gtk_widget_get_style_context (image), "logo-image");
+        about->logo_image = image;
+        gtk_image_clear (GTK_IMAGE (image));
+
+        stack = find_child_with_name (box, "stack");
+        page_vbox = find_child_with_name (stack, "page_vbox");
+        gtk_widget_set_valign (page_vbox, GTK_ALIGN_END);
+
+        name_label = find_child_with_name (box, "name_label");
+        g_object_ref (name_label);
+        gtk_container_remove (GTK_CONTAINER (box), name_label);
+        gtk_box_pack_start (GTK_BOX (page_vbox), name_label, FALSE, TRUE, 0);
+        gtk_box_reorder_child (GTK_BOX (page_vbox), name_label, 0);
+        g_object_unref (name_label);
+
+        gtk_box_set_spacing (GTK_BOX (box), 0);
+
+        g_signal_connect (stack, "notify::visible-child-name", G_CALLBACK (page_changed_for_image), about);
+}
+
+static void
 add_system_tab (GrAboutDialog *about)
 {
         GtkWidget *content;
@@ -875,6 +926,7 @@ gr_about_dialog_new (void)
         gtk_about_dialog_add_credit_section (GTK_ABOUT_DIALOG (about),
                                              _("Recipes by"), (const char **)recipe_authors);
 
+        tweak_image (about);
         add_built_logo (about);
         add_system_tab (about);
 
diff --git a/src/recipes.css b/src/recipes.css
index 7ebba00..7bbd1b1 100644
--- a/src/recipes.css
+++ b/src/recipes.css
@@ -411,3 +411,28 @@ label.notification-label {
   font-size: 30px;
   color: #ddd;
 }
+
+dialog.about image.logo-image {
+  background: url("resource:///org/gnome/Recipes/org.gnome.Recipes.png");
+  background-size: 256px;
+  background-repeat: no-repeat;
+  background-position: center;
+  min-width: 256px;
+  min-height: 256px;
+  transition-property: min-height, min-width, background-size;
+  transition-duration: 600ms;
+  transition-timing-function: ease-out;
+}
+
+dialog.about image.logo-image.small {
+  background-size: 1px;
+  min-width: 1px;
+  min-height: 1px;
+  transition-property: min-height, min-width, background-size;
+  transition-duration: 600ms;
+  transition-timing-function: cubic-bezier(0.9,-0.06,0.58,0.59);
+}
+
+dialog.about box.dialog-vbox {
+  min-height: 460px;
+}