[recipes] Make the cooking overlay fade in and out



commit 89ece6cee0094e4934b0a908e2bea3820de5504d
Author: Matthias Clasen <mclasen redhat com>
Date:   Mon Feb 20 19:07:57 2017 -0500

    Make the cooking overlay fade in and out
    
    We fade it in after a short pause, and we fade it out when a key
    is pressed. Another request by Jakub.

 src/gr-cooking-page.c  |   38 +++++--
 src/gr-cooking-page.ui |  295 ++++++++++++++++++++++++-----------------------
 2 files changed, 181 insertions(+), 152 deletions(-)
---
diff --git a/src/gr-cooking-page.c b/src/gr-cooking-page.c
index f4e9081..96ec623 100644
--- a/src/gr-cooking-page.c
+++ b/src/gr-cooking-page.c
@@ -36,6 +36,7 @@ struct _GrCookingPage
         GtkBox parent_instance;
 
         GtkWidget *cooking_overlay;
+        GtkWidget *overlay_revealer;
         GtkWidget *event_box;
         GtkWidget *next_revealer;
         GtkWidget *prev_revealer;
@@ -146,6 +147,29 @@ update_steppers (GrCookingPage *page)
 }
 
 static void
+hide_overlay (gpointer data,
+              gboolean fade)
+{
+        GrCookingPage *page = data;
+
+        if (!fade)
+                gtk_revealer_set_transition_type (GTK_REVEALER (page->overlay_revealer), 
GTK_REVEALER_TRANSITION_TYPE_NONE);
+        gtk_revealer_set_reveal_child (GTK_REVEALER (page->overlay_revealer), FALSE);
+        if (!fade)
+                gtk_revealer_set_transition_type (GTK_REVEALER (page->overlay_revealer), 
GTK_REVEALER_TRANSITION_TYPE_CROSSFADE);
+}
+
+static gboolean
+show_overlay (gpointer data)
+{
+        GrCookingPage *page = data;
+
+        gtk_revealer_set_reveal_child (GTK_REVEALER (page->overlay_revealer), TRUE);
+
+        return G_SOURCE_REMOVE;
+}
+
+static void
 set_cooking (GrCookingPage *page,
              gboolean       cooking)
 {
@@ -157,12 +181,11 @@ set_cooking (GrCookingPage *page,
         app = gtk_window_get_application (GTK_WINDOW (window));
 
         if (cooking) {
+                hide_overlay (page, FALSE);
                 count = get_cooking_overlay_count ();
-                if (count < 3)
-                        gtk_widget_show (page->cooking_overlay);
-                else
-                        gtk_widget_hide (page->cooking_overlay);
                 set_cooking_overlay_count (count + 1);
+                if (count < 3)
+                        g_timeout_add (1000, show_overlay, page);
 
                 if (page->inhibit_cookie == 0) {
                         page->inhibit_cookie = gtk_application_inhibit (app,
@@ -306,14 +329,13 @@ gboolean
 gr_cooking_page_handle_event (GrCookingPage *page,
                               GdkEvent      *event)
 {
-        if (gtk_widget_get_visible (page->cooking_overlay)) {
-                gtk_widget_hide (page->cooking_overlay);
+        if (gtk_revealer_get_child_revealed (GTK_REVEALER (page->overlay_revealer))) {
+                hide_overlay (page, TRUE);
 
                 return GDK_EVENT_STOP;
         }
         else if (event->type == GDK_KEY_PRESS) {
                 GdkEventKey *e = (GdkEventKey *)event;
-
                 if (e->keyval == GDK_KEY_Escape) {
                         stop_cooking (page);
 
@@ -413,7 +435,7 @@ gr_cooking_page_class_init (GrCookingPageClass *klass)
         gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/Recipes/gr-cooking-page.ui");
 
         gtk_widget_class_bind_template_child (widget_class, GrCookingPage, cooking_overlay);
-
+        gtk_widget_class_bind_template_child (widget_class, GrCookingPage, overlay_revealer);
         gtk_widget_class_bind_template_child (widget_class, GrCookingPage, cooking_view);
         gtk_widget_class_bind_template_child (widget_class, GrCookingPage, prev_revealer);
         gtk_widget_class_bind_template_child (widget_class, GrCookingPage, next_revealer);
diff --git a/src/gr-cooking-page.ui b/src/gr-cooking-page.ui
index e167d53..5255789 100644
--- a/src/gr-cooking-page.ui
+++ b/src/gr-cooking-page.ui
@@ -147,161 +147,168 @@
           </object>
         </child>
         <child type="overlay">
-          <object class="GtkGrid" id="cooking_overlay">
+          <object class="GtkRevealer" id="overlay_revealer">
             <property name="visible">1</property>
             <property name="halign">center</property>
             <property name="valign">center</property>
-            <property name="row-spacing">20</property>
-            <property name="column-spacing">6</property>
-            <style>
-              <class name="cooking"/>
-              <class name="overlay"/>
-            </style>
+            <property name="transition-type">crossfade</property>
+            <property name="transition-duration">1000</property>
             <child>
-              <object class="GtkLabel">
+              <object class="GtkGrid" id="cooking_overlay">
                 <property name="visible">1</property>
-                <property name="label" translatable="yes">Cook Now</property>
+                <property name="row-spacing">20</property>
+                <property name="column-spacing">6</property>
                 <style>
-                  <class name="heading"/>
+                  <class name="cooking"/>
+                  <class name="overlay"/>
                 </style>
-              </object>
-              <packing>
-                <property name="left-attach">0</property>
-                <property name="top-attach">0</property>
-                <property name="width">5</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">1</property>
-                <property name="halign">start</property>
-                <property name="icon-name">press-any-key</property>
-                <property name="pixel-size">48</property>
-              </object>
-              <packing>
-                <property name="left-attach">0</property>
-                <property name="top-attach">1</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">1</property>
-                <property name="halign">start</property>
-                <property name="icon-name">press-left-button</property>
-                <property name="pixel-size">48</property>
-              </object>
-              <packing>
-                <property name="left-attach">2</property>
-                <property name="top-attach">1</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel">
-                <property name="visible">1</property>
-                <property name="xalign">0</property>
-                <property name="label" translatable="yes">To advance to the next step, press any key on the
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">1</property>
+                    <property name="label" translatable="yes">Cook Now</property>
+                    <style>
+                      <class name="heading"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="left-attach">0</property>
+                    <property name="top-attach">0</property>
+                    <property name="width">5</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">1</property>
+                    <property name="halign">start</property>
+                    <property name="icon-name">press-any-key</property>
+                    <property name="pixel-size">48</property>
+                  </object>
+                  <packing>
+                    <property name="left-attach">0</property>
+                    <property name="top-attach">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">1</property>
+                    <property name="halign">start</property>
+                    <property name="icon-name">press-left-button</property>
+                    <property name="pixel-size">48</property>
+                  </object>
+                  <packing>
+                    <property name="left-attach">2</property>
+                    <property name="top-attach">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">1</property>
+                    <property name="xalign">0</property>
+                    <property name="label" translatable="yes">To advance to the next step, press any key on 
the
 keyboard or click the left mouse button.</property>
-              </object>
-              <packing>
-                <property name="left-attach">4</property>
-                <property name="top-attach">1</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">1</property>
-                <property name="halign">start</property>
-                <property name="icon-name">press-any-key</property>
-                <property name="pixel-size">48</property>
-              </object>
-              <packing>
-                <property name="left-attach">0</property>
-                <property name="top-attach">2</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">1</property>
-                <property name="halign">start</property>
-                <property name="icon-name">press-any-key</property>
-                <property name="pixel-size">48</property>
-              </object>
-              <packing>
-                <property name="left-attach">1</property>
-                <property name="top-attach">2</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">1</property>
-                <property name="halign">start</property>
-                <property name="icon-name">press-left-button</property>
-                <property name="pixel-size">48</property>
-              </object>
-              <packing>
-                <property name="left-attach">2</property>
-                <property name="top-attach">2</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">1</property>
-                <property name="halign">start</property>
-                <property name="icon-name">press-left-button</property>
-                <property name="pixel-size">48</property>
-              </object>
-              <packing>
-                <property name="left-attach">3</property>
-                <property name="top-attach">2</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel">
-                <property name="visible">1</property>
-                <property name="xalign">0</property>
-                <property name="label" translatable="yes">To go back to the previous step, doubletap any key
+                  </object>
+                  <packing>
+                    <property name="left-attach">4</property>
+                    <property name="top-attach">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">1</property>
+                    <property name="halign">start</property>
+                    <property name="icon-name">press-any-key</property>
+                    <property name="pixel-size">48</property>
+                  </object>
+                  <packing>
+                    <property name="left-attach">0</property>
+                    <property name="top-attach">2</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">1</property>
+                    <property name="halign">start</property>
+                    <property name="icon-name">press-any-key</property>
+                    <property name="pixel-size">48</property>
+                  </object>
+                  <packing>
+                    <property name="left-attach">1</property>
+                    <property name="top-attach">2</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">1</property>
+                    <property name="halign">start</property>
+                    <property name="icon-name">press-left-button</property>
+                    <property name="pixel-size">48</property>
+                  </object>
+                  <packing>
+                    <property name="left-attach">2</property>
+                    <property name="top-attach">2</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">1</property>
+                    <property name="halign">start</property>
+                    <property name="icon-name">press-left-button</property>
+                    <property name="pixel-size">48</property>
+                  </object>
+                  <packing>
+                    <property name="left-attach">3</property>
+                    <property name="top-attach">2</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">1</property>
+                    <property name="xalign">0</property>
+                    <property name="label" translatable="yes">To go back to the previous step, doubletap any 
key
 or double click the left mouse button.</property>
-              </object>
-              <packing>
-                <property name="left-attach">4</property>
-                <property name="top-attach">2</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">1</property>
-                <property name="halign">start</property>
-                <property name="icon-name">press-escape-key</property>
-                <property name="pixel-size">48</property>
-              </object>
-              <packing>
-                <property name="left-attach">0</property>
-                <property name="top-attach">3</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">1</property>
-                <property name="halign">start</property>
-                <property name="icon-name">press-right-button</property>
-                <property name="pixel-size">48</property>
-              </object>
-              <packing>
-                <property name="left-attach">2</property>
-                <property name="top-attach">3</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel">
-                <property name="visible">1</property>
-                <property name="xalign">0</property>
-                <property name="label" translatable="yes">To exit the process, press the Escape key or click
+                  </object>
+                  <packing>
+                    <property name="left-attach">4</property>
+                    <property name="top-attach">2</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">1</property>
+                    <property name="halign">start</property>
+                    <property name="icon-name">press-escape-key</property>
+                    <property name="pixel-size">48</property>
+                  </object>
+                  <packing>
+                    <property name="left-attach">0</property>
+                    <property name="top-attach">3</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">1</property>
+                    <property name="halign">start</property>
+                    <property name="icon-name">press-right-button</property>
+                    <property name="pixel-size">48</property>
+                  </object>
+                  <packing>
+                    <property name="left-attach">2</property>
+                    <property name="top-attach">3</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">1</property>
+                    <property name="xalign">0</property>
+                    <property name="label" translatable="yes">To exit the process, press the Escape key or 
click
 the right mouse button.</property>
+                  </object>
+                  <packing>
+                    <property name="left-attach">4</property>
+                    <property name="top-attach">3</property>
+                  </packing>
+                </child>
               </object>
-              <packing>
-                <property name="left-attach">4</property>
-                <property name="top-attach">3</property>
-              </packing>
             </child>
           </object>
         </child>


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]