[gnome-maps] mapBubble: Move loading animation from placeBubble

From: Marcus Lundblad <mlundblad src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-maps] mapBubble: Move loading animation from placeBubble
Date: Sun, 15 Nov 2020 21:43:12 +0000 (UTC)
commit 9ddeb067470267f4dc3b2cfbe343effc5bc44875
Author: James Westman <james flyingpimonster net>
Date:   Wed Aug 5 22:44:53 2020 -0500

    mapBubble: Move loading animation from placeBubble
    
    This way, it takes up the entire bubble. You shouldn't be able to click any of
    the buttons while the popover is still loading.

 data/ui/map-bubble.ui   | 213 +++++++++++++++++++++++++-----------------------
 data/ui/place-bubble.ui | 147 ++++++++++++++++-----------------
 src/mapBubble.js        |  15 +++-
 src/placeBubble.js      |  10 +--
 4 files changed, 199 insertions(+), 186 deletions(-)
---
diff --git a/data/ui/map-bubble.ui b/data/ui/map-bubble.ui
index 6b4fd7a3..d94fc41a 100644
--- a/data/ui/map-bubble.ui
+++ b/data/ui/map-bubble.ui
@@ -2,137 +2,148 @@
 <!-- Generated with glade 3.18.3 -->
 <interface>
   <requires lib="gtk+" version="3.12"/>
-  <object class="GtkBox" id="bubble-main-box">
+  <object class="GtkStack" id="bubble-main-stack">
     <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="orientation">vertical</property>
     <child>
-      <object class="GtkGrid" id="bubble-content-area">
+      <object class="GtkBox" id="bubble-main-box">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="margin-top">12</property>
-        <property name="margin-bottom">12</property>
-        <property name="margin-start">12</property>
-        <property name="margin-end">12</property>
-      </object>
-    </child>
-    <child>
-      <object class="GtkBox" id="bubble-button-area">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="orientation">horizontal</property>
-        <property name="spacing">6</property>
-        <property name="margin-bottom">12</property>
-        <property name="margin-start">12</property>
-        <property name="margin-end">12</property>
+        <property name="orientation">vertical</property>
         <child>
-          <object class="GtkButton" id="bubble-route-button">
-            <property name="name">bubble-route-button</property>
-            <property name="visible">False</property>
-            <property name="can_focus">True</property>
-            <property name="receives_default">False</property>
-            <property name="tooltip-text" translatable="yes" comments="Translators: This is a tooltip">Add 
to new route</property>
+          <object class="GtkGrid" id="bubble-content-area">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="margin-top">12</property>
+            <property name="margin-bottom">12</property>
+            <property name="margin-start">12</property>
+            <property name="margin-end">12</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkBox" id="bubble-button-area">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="orientation">horizontal</property>
+            <property name="spacing">6</property>
+            <property name="margin-bottom">12</property>
+            <property name="margin-start">12</property>
+            <property name="margin-end">12</property>
             <child>
-              <object class="GtkBox">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="orientation">horizontal</property>
-                <property name="spacing">6</property>
+              <object class="GtkButton" id="bubble-route-button">
+                <property name="name">bubble-route-button</property>
+                <property name="visible">False</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">False</property>
+                <property name="tooltip-text" translatable="yes" comments="Translators: This is a 
tooltip">Add to new route</property>
                 <child>
-                  <object class="GtkImage">
+                  <object class="GtkBox">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="icon_name">route-button-symbolic</property>
-                    <property name="pixel_size">16</property>
+                    <property name="orientation">horizontal</property>
+                    <property name="spacing">6</property>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon-name">route-button-symbolic</property>
+                        <property name="pixel_size">16</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="label" translatable="yes" comments="Translators: This is the button 
to find a route to a place">Directions</property>
+                      </object>
+                    </child>
                   </object>
                 </child>
+                <style>
+                  <class name="suggested-action"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkButton" id="bubble-send-to-button">
+                <property name="name">bubble-send-to-button</property>
+                <property name="visible">False</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">False</property>
+                <property name="tooltip-text" translatable="yes" comments="Translators: This is a 
tooltip">Share location</property>
                 <child>
-                  <object class="GtkLabel">
+                  <object class="GtkImage" id="bubble-send-to-button-image">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="label" translatable="yes" comments="Translators: This is the button to 
find a route to a place">Directions</property>
+                    <property name="icon-name">send-to-symbolic</property>
+                    <property name="pixel_size">16</property>
                   </object>
                 </child>
               </object>
+              <packing>
+                <property name="pack-type">end</property>
+              </packing>
             </child>
-            <style>
-              <class name="suggested-action"/>
-            </style>
-          </object>
-        </child>
-        <child>
-          <object class="GtkButton" id="bubble-send-to-button">
-            <property name="name">bubble-send-to-button</property>
-            <property name="visible">False</property>
-            <property name="can_focus">True</property>
-            <property name="receives_default">False</property>
-            <property name="tooltip-text" translatable="yes" comments="Translators: This is a tooltip">Share 
location</property>
             <child>
-              <object class="GtkImage" id="bubble-send-to-button-image">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="icon-name">send-to-symbolic</property>
-                <property name="pixel_size">16</property>
+              <object class="GtkButton" id="bubble-favorite-button">
+                <property name="name">bubble-favorite-button</property>
+                <property name="visible">False</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">False</property>
+                <property name="tooltip-text" translatable="yes" comments="Translators: This is a 
tooltip">Mark as favorite</property>
+                <child>
+                  <object class="GtkImage" id="bubble-favorite-button-image">
+                    <property name="name">bubble-favorite-button-image</property>
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="icon-name">starred-symbolic</property>
+                    <property name="pixel_size">16</property>
+                  </object>
+                </child>
               </object>
+              <packing>
+                <property name="pack-type">end</property>
+              </packing>
             </child>
-          </object>
-          <packing>
-            <property name="pack-type">end</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkButton" id="bubble-favorite-button">
-            <property name="name">bubble-favorite-button</property>
-            <property name="visible">False</property>
-            <property name="can_focus">True</property>
-            <property name="receives_default">False</property>
-            <property name="tooltip-text" translatable="yes" comments="Translators: This is a tooltip">Mark 
as favorite</property>
             <child>
-              <object class="GtkImage" id="bubble-favorite-button-image">
-                <property name="name">bubble-favorite-button-image</property>
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="icon-name">starred-symbolic</property>
-                <property name="pixel_size">16</property>
+              <object class="GtkButton" id="bubble-check-in-button">
+                <property name="label" translatable="yes" comments="Translators: Check in is used as a 
verb">C_heck in</property>
+                <property name="visible">False</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">False</property>
+                <property name="use_underline">True</property>
+                <property name="tooltip-text" translatable="yes" comments="Translators: This is a 
tooltip">Check in here</property>
               </object>
+              <packing>
+                <property name="pack-type">end</property>
+              </packing>
             </child>
-          </object>
-          <packing>
-            <property name="pack-type">end</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkButton" id="bubble-check-in-button">
-            <property name="label" translatable="yes" comments="Translators: Check in is used as a 
verb">C_heck in</property>
-            <property name="visible">False</property>
-            <property name="can_focus">True</property>
-            <property name="receives_default">False</property>
-            <property name="use_underline">True</property>
-            <property name="tooltip-text" translatable="yes" comments="Translators: This is a tooltip">Check 
in here</property>
-          </object>
-          <packing>
-            <property name="pack-type">end</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkButton" id="bubble-edit-button">
-            <property name="visible">False</property>
-            <property name="can_focus">True</property>
-            <property name="tooltip-text" translatable="yes" comments="Translators: This is a tooltip">Edit 
on OpenStreetMap</property>
             <child>
-              <object class="GtkImage">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="icon-name">document-edit-symbolic</property>
-                <property name="pixel_size">16</property>
+              <object class="GtkButton" id="bubble-edit-button">
+                <property name="visible">False</property>
+                <property name="can_focus">True</property>
+                <property name="tooltip-text" translatable="yes" comments="Translators: This is a 
tooltip">Edit on OpenStreetMap</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="icon-name">document-edit-symbolic</property>
+                    <property name="pixel_size">16</property>
+                  </object>
+                </child>
               </object>
+              <packing>
+                <property name="pack-type">end</property>
+              </packing>
             </child>
           </object>
-          <packing>
-            <property name="pack-type">end</property>
-          </packing>
         </child>
       </object>
     </child>
+    <child>
+      <object class="GtkSpinner" id="bubble-spinner">
+        <property name="visible">True</property>
+        <property name="active">False</property>
+      </object>
+    </child>
   </object>
 </interface>
diff --git a/data/ui/place-bubble.ui b/data/ui/place-bubble.ui
index 7dce2836..5d0d2cce 100644
--- a/data/ui/place-bubble.ui
+++ b/data/ui/place-bubble.ui
@@ -2,114 +2,103 @@
 <!-- Generated with glade 3.18.1 -->
 <interface>
   <requires lib="gtk+" version="3.12"/>
-  <object class="GtkStack" id="stack">
+  <object class="GtkGrid" id="grid-content">
     <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="column-spacing">12</property>
     <child>
-      <object class="GtkSpinner" id="spinner">
-        <property name="visible">True</property>
-        <property name="active">True</property>
+      <object class="HdyAvatar" id="contact-avatar">
+        <property name="visible">False</property>
+        <property name="can_focus">False</property>
+        <property name="show_initials">True</property>
+        <property name="size">32</property>
       </object>
+      <packing>
+        <property name="left-attach">0</property>
+        <property name="top-attach">0</property>
+      </packing>
     </child>
     <child>
-      <object class="GtkGrid" id="grid-content">
+      <object class="GtkBox">
         <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="column-spacing">5</property>
         <child>
-          <object class="HdyAvatar" id="contact-avatar">
-            <property name="visible">False</property>
+          <object class="GtkLabel" id="label-title">
+            <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="show_initials">True</property>
-            <property name="size">32</property>
+            <property name="halign">start</property>
+            <property name="expand">True</property>
+            <property name="use_markup">True</property>
+            <style>
+              <class name="bubble-title"/>
+            </style>
           </object>
-          <packing>
-            <property name="left-attach">0</property>
-            <property name="top-attach">0</property>
-          </packing>
         </child>
         <child>
-          <object class="GtkBox">
+          <object class="GtkToggleButton" id="expand-button">
             <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="valign">GTK_ALIGN_START</property>
+            <property name="halign">GTK_ALIGN_CENTER</property>
+            <property name="tooltip-text" translatable="yes" comments="Translators: This is a tooltip">Show 
more information</property>
             <child>
-              <object class="GtkLabel" id="label-title">
+              <object class="GtkImage">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="halign">start</property>
-                <property name="expand">True</property>
-                <property name="use_markup">True</property>
-                <style>
-                  <class name="bubble-title"/>
-                </style>
-              </object>
-            </child>
-            <child>
-              <object class="GtkToggleButton" id="expand-button">
-                <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="valign">GTK_ALIGN_START</property>
-                <property name="halign">GTK_ALIGN_CENTER</property>
-                <property name="tooltip-text" translatable="yes" comments="Translators: This is a 
tooltip">Show more information</property>
-                <child>
-                  <object class="GtkImage">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="icon-name">view-more-symbolic</property>
-                    <property name="pixel_size">16</property>
-                  </object>
-                </child>
-                <style>
-                  <class name="image-button"/>
-                  <class name="circular"/>
-                  <class name="flat"/>
-                </style>
+                <property name="icon-name">view-more-symbolic</property>
+                <property name="pixel_size">16</property>
               </object>
             </child>
-          </object>
-          <packing>
-            <property name="left-attach">1</property>
-            <property name="top-attach">0</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkBox" id="box-content">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="orientation">vertical</property>
             <style>
-              <class name="bubble-content"/>
+              <class name="image-button"/>
+              <class name="circular"/>
+              <class name="flat"/>
             </style>
           </object>
-          <packing>
-            <property name="left-attach">1</property>
-            <property name="top-attach">1</property>
-          </packing>
         </child>
+      </object>
+      <packing>
+        <property name="left-attach">1</property>
+        <property name="top-attach">0</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkBox" id="box-content">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="orientation">vertical</property>
+        <style>
+          <class name="bubble-content"/>
+        </style>
+      </object>
+      <packing>
+        <property name="left-attach">1</property>
+        <property name="top-attach">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkRevealer" id="content-revealer">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="halign">start</property>
+        <property name="vexpand">True</property>
+        <property name="margin-top">5</property>
         <child>
-          <object class="GtkRevealer" id="content-revealer">
+          <object class="GtkGrid" id="expanded-content">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
             <property name="halign">start</property>
             <property name="vexpand">True</property>
-            <property name="margin-top">5</property>
-            <child>
-              <object class="GtkGrid" id="expanded-content">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">start</property>
-                <property name="vexpand">True</property>
-                <property name="column-spacing">5</property>
-                <style>
-                  <class name="bubble-content"/>
-                </style>
-              </object>
-            </child>
+            <property name="column-spacing">5</property>
+            <style>
+              <class name="bubble-content"/>
+            </style>
           </object>
-          <packing>
-            <property name="left-attach">1</property>
-            <property name="top-attach">2</property>
-          </packing>
         </child>
       </object>
+      <packing>
+        <property name="left-attach">1</property>
+        <property name="top-attach">2</property>
+      </packing>
     </child>
   </object>
 </interface>
diff --git a/src/mapBubble.js b/src/mapBubble.js
index aa17f4dd..5f4c82a5 100644
--- a/src/mapBubble.js
+++ b/src/mapBubble.js
@@ -70,6 +70,8 @@ class MapBubble extends Gtk.Popover {
 
         super._init(params);
         let ui = Utils.getUIObject('map-bubble', [ 'bubble-main-box',
+                                                   'bubble-spinner',
+                                                   'bubble-main-stack',
                                                    'bubble-content-area',
                                                    'bubble-button-area',
                                                    'bubble-route-button',
@@ -79,6 +81,9 @@ class MapBubble extends Gtk.Popover {
                                                    'bubble-edit-button',
                                                    'bubble-favorite-button-image']);
         this._content = ui.bubbleContentArea;
+        this._mainStack = ui.bubbleMainStack;
+        this._spinner = ui.bubbleSpinner;
+        this._mainBox = ui.bubbleMainBox;
 
         if (!buttonFlags)
             ui.bubbleButtonArea.visible = false;
@@ -95,7 +100,7 @@ class MapBubble extends Gtk.Popover {
                 this._initEditButton(ui.bubbleEditButton);
         }
 
-        this.add(ui.bubbleMainBox);
+        this.add(this._mainStack);
     }
 
     get place() {
@@ -106,6 +111,14 @@ class MapBubble extends Gtk.Popover {
         return this._content;
     }
 
+    get loading() {
+        return this._spinner.active;
+    }
+    set loading(val) {
+        this._mainStack.set_visible_child(val ? this._spinner : this._mainBox);
+        this._spinner.active = val;
+    }
+
     _initFavoriteButton(button, image) {
         let placeStore = Application.placeStore;
         button.visible = true;
diff --git a/src/placeBubble.js b/src/placeBubble.js
index 4e604ca2..846a3d15 100644
--- a/src/placeBubble.js
+++ b/src/placeBubble.js
@@ -53,8 +53,7 @@ var PlaceBubble = GObject.registerClass({
 }, class PlaceBubble extends MapBubble.MapBubble {
 
     _init(params) {
-        let ui = Utils.getUIObject('place-bubble', [ 'stack',
-                                                     'box-content',
+        let ui = Utils.getUIObject('place-bubble', [ 'box-content',
                                                      'grid-content',
                                                      'contact-avatar',
                                                      'label-title',
@@ -72,7 +71,8 @@ var PlaceBubble = GObject.registerClass({
 
         super._init(params);
 
-        this._stack = ui.stack;
+        this.loading = true;
+
         this._title = ui.labelTitle;
         this._boxContent = ui.boxContent;
         this._gridContent = ui.gridContent;
@@ -112,7 +112,7 @@ var PlaceBubble = GObject.registerClass({
         } else {
             this._populate(this.place);
         }
-        this.content.add(this._stack);
+        this.content.add(ui.gridContent);
 
         this._initExpandButton();
     }
@@ -272,7 +272,7 @@ var PlaceBubble = GObject.registerClass({
             this._title.label = title;
         }
         this._expandButton.visible = expandedContent.length > 0;
-        this._stack.visible_child = this._gridContent;
+        this.loading = false;
 
         if (place.wiki)
             this._requestWikipediaThumbnail(place.wiki);
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]