[glade/modern-ui: 28/28] GladeIntro: WIP add interactive introduction to new GUI

From: Juan Pablo Ugarte <jpu src gnome org>
To: commits-list gnome org
Cc:
Subject: [glade/modern-ui: 28/28] GladeIntro: WIP add interactive introduction to new GUI
Date: Sun, 2 Jul 2017 21:29:24 +0000 (UTC)
commit d5b468cbca6a8b12439a33b5fc4297e0955490b0
Author: Juan Pablo Ugarte <juanpablougarte gmail com>
Date:   Sun Jul 2 12:12:25 2017 -0300

    GladeIntro: WIP add interactive introduction to new GUI

 gladeui/glade-adaptor-chooser.ui |    4 +
 src/Makefile.am                  |    2 +
 src/glade-intro.c                |  320 ++++++++++++++++++++++++++++++++++++++
 src/glade-intro.h                |   51 ++++++
 src/glade-window.c               |   38 +++++
 src/glade-window.css             |   21 +++
 src/glade.glade                  |   11 ++
 7 files changed, 447 insertions(+), 0 deletions(-)
---
diff --git a/gladeui/glade-adaptor-chooser.ui b/gladeui/glade-adaptor-chooser.ui
index 496a995..b216c5d 100644
--- a/gladeui/glade-adaptor-chooser.ui
+++ b/gladeui/glade-adaptor-chooser.ui
@@ -8,6 +8,7 @@
     <property name="spacing">4</property>
     <child>
       <object class="GtkMenuButton" id="all_button">
+        <property name="name">adaptor-search-button</property>
         <property name="visible">True</property>
         <property name="can_focus">True</property>
         <property name="receives_default">True</property>
@@ -53,6 +54,7 @@
     </child>
     <child>
       <object class="GtkMenuButton" id="others_button">
+        <property name="name">adaptor-others-button</property>
         <property name="visible">True</property>
         <property name="can_focus">True</property>
         <property name="receives_default">True</property>
@@ -74,11 +76,13 @@
     </child>
     <child>
       <object class="GtkButtonBox" id="gtk_button_box">
+        <property name="name">adaptor-gtk-buttonbox</property>
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="layout_style">expand</property>
         <child>
           <object class="GtkMenuButton" id="extra_button">
+            <property name="name">adaptor-extra-button</property>
             <property name="can_focus">True</property>
             <property name="receives_default">True</property>
             <property name="tooltip_text" translatable="yes">Extra gtk objects</property>
diff --git a/src/Makefile.am b/src/Makefile.am
index 67d1b3b..428ae4e 100644
--- a/src/Makefile.am
+++ b/src/Makefile.am
@@ -24,6 +24,7 @@ BUILT_SOURCES = glade-resources.c glade-resources.h
 
 glade_SOURCES = \
        glade-window.c \
+       glade-intro.c \
        glade-resources.c \
        glade-preferences.c \
        glade-http.c \
@@ -32,6 +33,7 @@ glade_SOURCES = \
 
 noinst_HEADERS = \
        glade-window.h \
+       glade-intro.h \
        glade-resources.h \
        glade-preferences.h \
        glade-logo.h \
diff --git a/src/glade-intro.c b/src/glade-intro.c
new file mode 100644
index 0000000..ad36f86
--- /dev/null
+++ b/src/glade-intro.c
@@ -0,0 +1,320 @@
+/*
+ * glade-intro.c
+ *
+ * Copyright (C) 2017 Juan Pablo Ugarte
+ *
+ * This library is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 2.1 of
+ * the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public 
+ * License along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ *
+ * Authors:
+ *   Juan Pablo Ugarte <juanpablougarte gmail com>
+ */
+
+#include "glade-intro.h"
+
+typedef struct
+{
+  GtkWidget   *widget;
+  const gchar *name;
+  const gchar *text;
+  gint         delay;
+} ScriptNode;
+
+typedef struct
+{
+  GtkWidget  *toplevel;
+
+  GList      *script;      /* List of (ScriptNode *) */
+  GHashTable *widgets;     /* Table with all named widget in toplevel */
+
+  GtkPopover *popover;     /* Popover to show the script text */
+  GtkLabel   *label;       /* Label to display script text */
+
+  guint       timeout_id;  /* Timeout id for running the script */
+  GList      *current;     /* Current script node */
+} GladeIntroPrivate;
+
+struct _GladeIntro
+{
+  GObject parent_instance;
+};
+
+enum
+{
+  PROP_0,
+  PROP_TOPLEVEL,
+
+  N_PROPERTIES
+};
+
+static GParamSpec *properties[N_PROPERTIES];
+
+G_DEFINE_TYPE_WITH_PRIVATE (GladeIntro, glade_intro, G_TYPE_OBJECT);
+
+#define GET_PRIVATE(d) ((GladeIntroPrivate *) glade_intro_get_instance_private((GladeIntro*)d))
+
+static void
+widget_add_style_class (GtkWidget *widget, const gchar *klass)
+{
+  GtkStyleContext *context = gtk_widget_get_style_context (widget);
+  gtk_style_context_add_class (context, klass);
+}
+
+static void
+widget_remove_style_class (GtkWidget *widget, const gchar *klass)
+{
+  GtkStyleContext *context = gtk_widget_get_style_context (widget);
+  gtk_style_context_remove_class (context, klass);
+}
+
+static void
+glade_intro_init (GladeIntro *intro)
+{
+  GladeIntroPrivate *priv = GET_PRIVATE (intro);
+  GtkWidget *box, *image;
+
+  priv->popover = GTK_POPOVER (g_object_ref_sink (gtk_popover_new (NULL)));
+  priv->label = GTK_LABEL (gtk_label_new (""));
+  gtk_label_set_line_wrap (priv->label, TRUE);
+  gtk_label_set_max_width_chars (priv->label, 28);
+  box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 6);
+  image = gtk_image_new_from_icon_name ("dialog-information-symbolic", GTK_ICON_SIZE_DIALOG);
+
+  gtk_box_pack_start (GTK_BOX (box), image, FALSE, FALSE, 0);
+  gtk_box_pack_start (GTK_BOX (box), GTK_WIDGET (priv->label), FALSE, FALSE, 0);
+  gtk_container_add (GTK_CONTAINER (priv->popover), box);
+
+  widget_add_style_class (GTK_WIDGET (priv->popover), "glade-intro");
+  gtk_widget_show_all (box);
+}
+
+static void
+glade_intro_finalize (GObject *object)
+{
+  GladeIntroPrivate *priv = GET_PRIVATE (object);
+
+  if (priv->timeout_id)
+    {
+      g_source_remove (priv->timeout_id);
+      priv->timeout_id = 0;
+    }
+
+  gtk_popover_set_relative_to (priv->popover, NULL);
+  g_clear_object (&priv->popover);
+  priv->label = NULL;
+
+  G_OBJECT_CLASS (glade_intro_parent_class)->finalize (object);
+}
+
+static void
+glade_intro_set_property (GObject      *object,
+                          guint         prop_id,
+                          const GValue *value,
+                          GParamSpec   *pspec)
+{
+  g_return_if_fail (GLADE_IS_INTRO (object));
+
+  switch (prop_id)
+    {
+      case PROP_TOPLEVEL:
+        glade_intro_set_toplevel (GLADE_INTRO (object), g_value_get_object (value));
+      break;
+      default:
+        G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
+      break;
+    }
+}
+
+static void
+glade_intro_get_property (GObject    *object,
+                          guint       prop_id,
+                          GValue     *value,
+                          GParamSpec *pspec)
+{
+  GladeIntroPrivate *priv;
+
+  g_return_if_fail (GLADE_IS_INTRO (object));
+  priv = GET_PRIVATE (object);
+
+  switch (prop_id)
+    {
+      case PROP_TOPLEVEL:
+        g_value_set_object (value, priv->toplevel);
+      break;
+      default:
+        G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
+      break;
+    }
+}
+
+static void
+glade_intro_class_init (GladeIntroClass *klass)
+{
+  GObjectClass *object_class = G_OBJECT_CLASS (klass);
+
+  object_class->finalize = glade_intro_finalize;
+  object_class->set_property = glade_intro_set_property;
+  object_class->get_property = glade_intro_get_property;
+
+  /* Properties */
+  properties[PROP_TOPLEVEL] =
+    g_param_spec_object ("toplevel", "Toplevel",
+                         "The main toplevel from where to get the widgets",
+                         GTK_TYPE_WINDOW,
+                         G_PARAM_READWRITE);
+
+  g_object_class_install_properties (object_class, N_PROPERTIES, properties);
+}
+
+/* Public API */
+
+GladeIntro *
+glade_intro_new (GtkWindow *toplevel)
+{
+  return (GladeIntro*) g_object_new (GLADE_TYPE_INTRO, "toplevel", toplevel, NULL);
+}
+
+static void
+get_toplevel_widgets (GtkWidget *widget, gpointer data)
+{
+  const gchar *name;
+
+  if ((name = gtk_widget_get_name (widget)) && 
+      g_strcmp0 (name, G_OBJECT_TYPE_NAME (widget)))
+    g_hash_table_insert (GET_PRIVATE (data)->widgets, (gpointer)name, widget);
+
+  if (GTK_IS_CONTAINER (widget))
+    gtk_container_forall (GTK_CONTAINER (widget), get_toplevel_widgets, data);
+}
+
+void
+glade_intro_set_toplevel (GladeIntro *intro, GtkWindow *toplevel)
+{
+  GladeIntroPrivate *priv;
+
+  g_return_if_fail (GLADE_IS_INTRO (intro));
+  priv = GET_PRIVATE (intro);
+
+  g_clear_object (&priv->toplevel);
+  g_clear_pointer (&priv->widgets, g_hash_table_unref);
+
+  if (toplevel)
+    {
+      priv->toplevel = g_object_ref (toplevel);
+      priv->widgets = g_hash_table_new (g_str_hash, g_str_equal);
+      gtk_container_forall (GTK_CONTAINER (toplevel), get_toplevel_widgets, intro);
+    }
+}
+
+void
+glade_intro_script_add (GladeIntro  *intro,
+                        const gchar *name,
+                        const gchar *text,
+                        gint         delay)
+{
+  GladeIntroPrivate *priv;
+  ScriptNode *node;
+
+  g_return_if_fail (GLADE_IS_INTRO (intro));
+  priv = GET_PRIVATE (intro);
+
+  node = g_new0 (ScriptNode, 1);
+  node->name  = name;
+  node->text  = text;
+  node->delay = delay;
+
+  priv->script = g_list_append (priv->script, node);
+}
+
+static gboolean script_play (gpointer data);
+
+static gboolean
+script_transition (gpointer data)
+{
+  GladeIntroPrivate *priv = GET_PRIVATE (data);
+  ScriptNode *node;
+
+  if (priv->current && (node = priv->current->data))
+    widget_remove_style_class (node->widget, "glade-intro-highlight");
+
+  priv->timeout_id = 0;
+  gtk_popover_popdown (priv->popover);
+  priv->timeout_id = g_timeout_add (250, script_play, data);
+
+  return G_SOURCE_REMOVE;
+}
+
+static gboolean
+script_play (gpointer data)
+{
+  GladeIntroPrivate *priv = GET_PRIVATE (data);
+  ScriptNode *node;
+
+  priv->timeout_id = 0;
+
+  if (priv->script == NULL)
+    return G_SOURCE_REMOVE;
+
+  /* Set current node to prenset */
+  priv->current = (priv->current) ? g_list_next (priv->current) : priv->script;
+
+  if (!priv->current ||
+      !(node = priv->current->data) || 
+      (!node->widget && !(node->widget = g_hash_table_lookup (priv->widgets, node->name))))
+    return G_SOURCE_REMOVE;
+
+  widget_add_style_class (node->widget, "glade-intro-highlight");
+  gtk_label_set_text (priv->label, node->text);
+  gtk_popover_set_relative_to (priv->popover, node->widget);
+  gtk_popover_popup (priv->popover);
+
+  priv->timeout_id = g_timeout_add_seconds (node->delay, script_transition, data);
+  
+  return G_SOURCE_REMOVE;
+}
+
+void
+glade_intro_play (GladeIntro *intro)
+{
+  g_return_if_fail (GLADE_IS_INTRO (intro));
+
+  script_play (intro);
+}
+
+void
+glade_intro_pause (GladeIntro *intro)
+{
+  GladeIntroPrivate *priv;
+
+  g_return_if_fail (GLADE_IS_INTRO (intro));
+  priv = GET_PRIVATE (intro);
+
+  if (priv->timeout_id)
+    g_source_remove (priv->timeout_id);
+
+  priv->timeout_id = 0;
+  gtk_popover_popdown (priv->popover);
+}
+
+void
+glade_intro_stop (GladeIntro *intro)
+{
+  GladeIntroPrivate *priv;
+
+  g_return_if_fail (GLADE_IS_INTRO (intro));
+  priv = GET_PRIVATE (intro);
+  
+  glade_intro_pause (intro);
+  priv->current = NULL;
+}
diff --git a/src/glade-intro.h b/src/glade-intro.h
new file mode 100644
index 0000000..7129cea
--- /dev/null
+++ b/src/glade-intro.h
@@ -0,0 +1,51 @@
+/*
+ * glade-intro.h
+ *
+ * Copyright (C) 2017 Juan Pablo Ugarte
+ *
+ * This library is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 2.1 of
+ * the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public 
+ * License along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ *
+ * Authors:
+ *   Juan Pablo Ugarte <juanpablougarte gmail com>
+ */
+
+#ifndef _GLADE_INTRO_H_
+#define _GLADE_INTRO_H_
+
+#include <gtk/gtk.h>
+
+G_BEGIN_DECLS
+
+#define GLADE_TYPE_INTRO (glade_intro_get_type ())
+G_DECLARE_FINAL_TYPE (GladeIntro, glade_intro, GLADE, INTRO, GObject)
+
+GladeIntro *glade_intro_new (GtkWindow *toplevel);
+
+void        glade_intro_set_toplevel (GladeIntro *intro,
+                                      GtkWindow  *toplevel);
+
+void        glade_intro_script_add   (GladeIntro  *intro,
+                                      const gchar *name,
+                                      const gchar *text,
+                                      gint         delay);
+
+void        glade_intro_play  (GladeIntro *intro);
+void        glade_intro_pause (GladeIntro *intro);
+void        glade_intro_stop  (GladeIntro *intro);
+
+
+G_END_DECLS
+
+#endif /* _GLADE_INTRO_H_ */
diff --git a/src/glade-window.c b/src/glade-window.c
index 731cc37..6b8d49b 100644
--- a/src/glade-window.c
+++ b/src/glade-window.c
@@ -30,6 +30,7 @@
 #include "glade-resources.h"
 #include "glade-preferences.h"
 #include "glade-registration.h"
+#include "glade-intro.h"
 
 #include <gladeui/glade.h>
 #include <gladeui/glade-popup.h>
@@ -127,6 +128,8 @@ struct _GladeWindowPrivate
 
   GtkWidget *registration;      /* Registration and user survey dialog */
   
+  GladeIntro *intro;
+  
   GdkRectangle position;
 };
 
@@ -2377,6 +2380,13 @@ glade_window_init (GladeWindow *window)
   priv->registration = glade_registration_new ();
 }
 
+static gboolean
+glade_intro_start (gpointer data)
+{
+  glade_intro_play (data);
+  return G_SOURCE_REMOVE;
+}
+
 static void
 glade_window_constructed (GObject *object)
 {
@@ -2453,6 +2463,34 @@ glade_window_constructed (GObject *object)
     gtkosx_application_ready (theApp);
   }
 #endif
+
+  priv->intro = glade_intro_new (GTK_WINDOW (window));
+
+  glade_intro_script_add (priv->intro, "open-button",
+                          "Start by opening a Glade project", 4);
+  glade_intro_script_add (priv->intro, "recent-button",
+                          "or a recent one here!", 3);
+  glade_intro_script_add (priv->intro, "undo-button",
+                          "Undo", 2);
+  glade_intro_script_add (priv->intro, "redo-button",
+                          "and redo button also moved from the toolbar to the headerbar", 6);
+
+  glade_intro_script_add (priv->intro, "adaptor-search-button",
+                          "Search for any object class supported by Glade", 5);
+  glade_intro_script_add (priv->intro, "adaptor-gtk-buttonbox",
+                          "This button box breaks Gtk catalog in groups", 4);
+  glade_intro_script_add (priv->intro, "adaptor-extra-button",
+                          "Extra Gtk groups and deprecated classes", 4);
+  glade_intro_script_add (priv->intro, "adaptor-others-button",
+                          "others catalogs classes will be listed here", 5);
+
+  glade_intro_script_add (priv->intro, "save-button",
+                          "save button for easy access", 3);
+  glade_intro_script_add (priv->intro, "menu-button",
+                          "the rest of the menubar action are here", 5);
+
+  /* FIXME: find a better place */
+  g_timeout_add_seconds (2, glade_intro_start, priv->intro);
 }
 
 static void
diff --git a/src/glade-window.css b/src/glade-window.css
index 0f49943..64b818c 100644
--- a/src/glade-window.css
+++ b/src/glade-window.css
@@ -60,3 +60,24 @@ GladeDesignView * {
   margin: 0;
   padding: 0;
 }
+
+/* GladeIntro */
+
+popover.glade-intro {
+  padding: 1em;
+}
+
+popover.glade-intro label {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+@keyframes widget-highlight {
+  from { box-shadow: 0px 0px 10px @theme_selected_bg_color, inset 0px 0px 4px  @theme_selected_bg_color; }
+  to   { box-shadow: 0px 0px 4px  @theme_selected_bg_color, inset 0px 0px 10px @theme_selected_bg_color; }
+}
+
+.glade-intro-highlight,
+buttonbox.glade-intro-highlight > button {
+  animation: widget-highlight 1s infinite alternate;
+}
diff --git a/src/glade.glade b/src/glade.glade
index e32bd61..8b33fbf 100644
--- a/src/glade.glade
+++ b/src/glade.glade
@@ -436,6 +436,7 @@ Andreas Nilsson &lt;andreas andreasn se&gt;</property>
                 <property name="orientation">vertical</property>
                 <child>
                   <object class="GtkStack" id="inspectors_stack">
+                    <property name="name">inspector</property>
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
                     <property name="margin_left">3</property>
@@ -538,6 +539,7 @@ Andreas Nilsson &lt;andreas andreasn se&gt;</property>
                     <property name="orientation">vertical</property>
                     <child>
                       <object class="GladeAdaptorChooser" id="adaptor_chooser">
+                        <property name="name">adaptor-chooser</property>
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
                         <property name="border_width">2</property>
@@ -608,6 +610,7 @@ Andreas Nilsson &lt;andreas andreasn se&gt;</property>
         </child>
         <child>
           <object class="GladeEditor" id="editor">
+            <property name="name">editor</property>
             <property name="width_request">256</property>
             <property name="visible">True</property>
             <property name="can_focus">True</property>
@@ -636,6 +639,7 @@ Andreas Nilsson &lt;andreas andreasn se&gt;</property>
                 <property name="label" translatable="yes">Open</property>
                 <property name="use_action_appearance">True</property>
                 <property name="related_action">open_action</property>
+                <property name="name">open-button</property>
                 <property name="visible">True</property>
                 <property name="can_focus">True</property>
                 <property name="receives_default">True</property>
@@ -651,6 +655,7 @@ Andreas Nilsson &lt;andreas andreasn se&gt;</property>
             </child>
             <child>
               <object class="GtkMenuButton" id="recent_menu_button">
+                <property name="name">recent-button</property>
                 <property name="visible">True</property>
                 <property name="can_focus">True</property>
                 <property name="receives_default">True</property>
@@ -680,6 +685,7 @@ Andreas Nilsson &lt;andreas andreasn se&gt;</property>
           <object class="GtkButton">
             <property name="use_action_appearance">False</property>
             <property name="related_action">new_action</property>
+            <property name="name">new-button</property>
             <property name="visible">True</property>
             <property name="can_focus">True</property>
             <property name="receives_default">True</property>
@@ -713,6 +719,7 @@ Andreas Nilsson &lt;andreas andreasn se&gt;</property>
             <child>
               <object class="GtkMenuButton">
                 <property name="related_action">undo_action</property>
+                <property name="name">undo-button</property>
                 <property name="visible">True</property>
                 <property name="can_focus">True</property>
                 <property name="receives_default">True</property>
@@ -765,6 +772,7 @@ Andreas Nilsson &lt;andreas andreasn se&gt;</property>
             <child>
               <object class="GtkMenuButton">
                 <property name="related_action">redo_action</property>
+                <property name="name">redo-button</property>
                 <property name="visible">True</property>
                 <property name="can_focus">True</property>
                 <property name="receives_default">True</property>
@@ -810,6 +818,7 @@ Andreas Nilsson &lt;andreas andreasn se&gt;</property>
         </child>
         <child type="title">
           <object class="GtkMenuButton" id="project_button">
+            <property name="name">project-button</property>
             <property name="visible">True</property>
             <property name="can_focus">False</property>
             <property name="receives_default">True</property>
@@ -860,6 +869,7 @@ Andreas Nilsson &lt;andreas andreasn se&gt;</property>
         </child>
         <child>
           <object class="GtkMenuButton">
+            <property name="name">menu-button</property>
             <property name="visible">True</property>
             <property name="can_focus">True</property>
             <property name="receives_default">True</property>
@@ -882,6 +892,7 @@ Andreas Nilsson &lt;andreas andreasn se&gt;</property>
             <property name="label" translatable="yes">button</property>
             <property name="use_action_appearance">True</property>
             <property name="related_action">save_action</property>
+            <property name="name">save-button</property>
             <property name="visible">True</property>
             <property name="can_focus">True</property>
             <property name="receives_default">True</property>
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]