GNOME.org
 

[gnome-maps/wip/cdavis/post-port-cleanups: 18/29] general: Use GtkButton:icon-name instead of manually packing images


commit 91cc7ee296b0560ab9b2f2a7b7a87e5de107f81d
Author: Christopher Davis <christopherdavis gnome org>
Date:   Sun Aug 21 10:52:10 2022 -0400

    general: Use GtkButton:icon-name instead of manually packing images
    
    In GTK4 we don't need to pack images ourselves or set
    the related style classes manually.
    
    Also removes the custom pixel sizes - icons need
    to be multiples of 16px in order to display properly.

 data/ui/headerbar-left.ui        | 34 ++++------------------------
 data/ui/headerbar-right.ui       | 29 +++---------------------
 data/ui/osm-edit-dialog.ui       | 25 +++-----------------
 data/ui/place-bar.ui             |  8 ++-----
 data/ui/place-buttons.ui         | 42 +++++++---------------------------
 data/ui/place-dialog.ui          |  6 +----
 data/ui/place-view.ui            |  7 +-----
 data/ui/route-entry.ui           |  3 ---
 data/ui/shape-layer-row.ui       | 19 ++--------------
 data/ui/sidebar.ui               | 49 +++++-----------------------------------
 data/ui/transit-leg-row.ui       | 14 ++----------
 data/ui/transit-options-panel.ui | 13 +----------
 src/placeButtons.js              | 11 ++++-----
 src/routeEntry.js                |  9 ++++----
 14 files changed, 42 insertions(+), 227 deletions(-)
---
diff --git a/data/ui/headerbar-left.ui b/data/ui/headerbar-left.ui
index c36d77e5..89272744 100644
--- a/data/ui/headerbar-left.ui
+++ b/data/ui/headerbar-left.ui
@@ -9,15 +9,7 @@
         <property name="valign">center</property>
         <property name="action-name">win.goto-user-location</property>
         <property name="tooltip-text" translatable="1" comments="Translators: This is a tooltip">Go to 
current location</property>
-        <style>
-          <class name="image-button"/>
-        </style>
-        <child>
-          <object class="GtkImage" id="track-user-button-image">
-            <property name="icon-size">normal</property>
-            <property name="icon-name">find-location-symbolic</property>
-          </object>
-        </child>
+        <property name="icon-name">find-location-symbolic</property>
       </object>
     </child>
     <child>
@@ -25,15 +17,7 @@
         <property name="focusable">1</property>
         <property name="valign">center</property>
         <property name="tooltip-text" translatable="1" comments="Translators: This is a tooltip">Choose map 
type</property>
-        <style>
-          <class name="image-button"/>
-        </style>
-        <child>
-          <object class="GtkImage" id="layers-button-image">
-            <property name="icon-size">normal</property>
-            <property name="icon-name">layers-button-symbolic</property>
-          </object>
-        </child>
+        <property name="icon-name">layers-button-symbolic</property>
       </object>
     </child>
     <child>
@@ -42,12 +26,7 @@
         <property name="valign">center</property>
         <property name="action-name">win.zoom-out</property>
         <property name="tooltip-text" translatable="1" comments="Translators: This is a tooltip">Zoom 
out</property>
-        <child>
-          <object class="GtkImage">
-            <property name="icon-size">normal</property>
-            <property name="icon-name">zoom-out-symbolic</property>
-          </object>
-        </child>
+        <property name="icon-name">zoom-out-symbolic</property>
       </object>
     </child>
     <child>
@@ -56,12 +35,7 @@
         <property name="valign">center</property>
         <property name="action-name">win.zoom-in</property>
         <property name="tooltip-text" translatable="1" comments="Translators: This is a tooltip">Zoom 
in</property>
-        <child>
-          <object class="GtkImage">
-            <property name="icon-size">normal</property>
-            <property name="icon-name">zoom-in-symbolic</property>
-          </object>
-        </child>
+        <property name="icon-name">zoom-in-symbolic</property>
       </object>
     </child>
   </template>
diff --git a/data/ui/headerbar-right.ui b/data/ui/headerbar-right.ui
index 06a94057..81bccece 100644
--- a/data/ui/headerbar-right.ui
+++ b/data/ui/headerbar-right.ui
@@ -11,14 +11,7 @@
         <property name="tooltip-text" translatable="1" comments="Translators: This is a tooltip">Print 
Route</property>
         <property name="action-name">win.print-route</property>
         <property name="valign">center</property>
-        <style>
-          <class name="image-button"/>
-        </style>
-        <child>
-          <object class="GtkImage" id="print-route-button-image">
-            <property name="icon-name">document-print-symbolic</property>
-          </object>
-        </child>
+        <property name="icon-name">document-print-symbolic</property>
       </object>
     </child>
     <child>
@@ -26,15 +19,7 @@
         <property name="focusable">1</property>
         <property name="valign">center</property>
         <property name="tooltip-text" translatable="1" comments="Translators: This is a tooltip">Toggle 
favorites</property>
-        <style>
-          <class name="image-button"/>
-        </style>
-        <child>
-          <object class="GtkImage" id="favorites-button-image">
-            <property name="icon-size">normal</property>
-            <property name="icon-name">bookmarks-symbolic</property>
-          </object>
-        </child>
+        <property name="icon-name">bookmarks-symbolic</property>
       </object>
     </child>
     <child>
@@ -43,15 +28,7 @@
         <property name="valign">center</property>
         <property name="action-name">win.toggle-sidebar</property>
         <property name="tooltip-text" translatable="1" comments="Translators: This is a tooltip">Toggle 
route planner</property>
-        <style>
-          <class name="image-button"/>
-        </style>
-        <child>
-          <object class="GtkImage" id="toggle-sidebar-button-image">
-            <property name="icon-size">normal</property>
-            <property name="icon-name">route-button-symbolic</property>
-          </object>
-        </child>
+        <property name="icon-name">route-button-symbolic</property>
       </object>
     </child>
   </template>
diff --git a/data/ui/osm-edit-dialog.ui b/data/ui/osm-edit-dialog.ui
index 07742386..a27afa33 100644
--- a/data/ui/osm-edit-dialog.ui
+++ b/data/ui/osm-edit-dialog.ui
@@ -101,22 +101,8 @@
                             <property name="focusable">1</property>
                             <property name="popover">addFieldPopover</property>
                             <property name="direction">up</property>
-                            <child>
-                              <object class="GtkGrid">
-                                <property name="row-spacing">5</property>
-                                <property name="column-spacing">5</property>
-                                <child>
-                                  <object class="GtkLabel">
-                                    <property name="label" translatable="1">Add Field</property>
-                                  </object>
-                                </child>
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">go-up-symbolic</property>
-                                  </object>
-                                </child>
-                              </object>
-                            </child>
+                            <property name="label" translatable="1">Add Field</property>
+                            <property name="always-show-arrow">True</property>
                           </object>
                         </child>
                       </object>
@@ -238,12 +224,7 @@ OpenStreetMap data.</property>
           <object class="GtkButton" id="backButton">
             <property name="visible">0</property>
             <property name="focusable">1</property>
-            <child>
-              <object class="GtkImage">
-                <property name="icon-name">go-previous-symbolic</property>
-                <property name="pixel_size">16</property>
-              </object>
-            </child>
+            <property name="icon-name">go-previous-symbolic</property>
           </object>
         </child>
         <child type="end">
diff --git a/data/ui/place-bar.ui b/data/ui/place-bar.ui
index c61d822a..ebf8faed 100644
--- a/data/ui/place-bar.ui
+++ b/data/ui/place-bar.ui
@@ -24,12 +24,8 @@
                 <child>
                   <object class="GtkButton" id="altSendToButton">
                     <property name="visible">0</property>
-                    <child>
-                      <object class="GtkImage">
-                        <property name="icon_name">send-to-symbolic</property>
-                        <property name="tooltip_text" translatable="1" comments="Translators: This is a 
tooltip">Share location</property>
-                      </object>
-                    </child>
+                    <property name="icon_name">send-to-symbolic</property>
+                    <property name="tooltip_text" translatable="1" comments="Translators: This is a 
tooltip">Share location</property>
                   </object>
                 </child>
               </object>
diff --git a/data/ui/place-buttons.ui b/data/ui/place-buttons.ui
index 4f9be1d1..c1db8c2b 100644
--- a/data/ui/place-buttons.ui
+++ b/data/ui/place-buttons.ui
@@ -9,22 +9,12 @@
         <property name="visible">0</property>
         <property name="focusable">1</property>
         <property name="tooltip-text" translatable="1" comments="Translators: This is a tooltip">Add to new 
route</property>
-        <child>
-          <object class="GtkBox">
-            <property name="spacing">6</property>
-            <child>
-              <object class="GtkImage">
-                <property name="icon-name">route-button-symbolic</property>
-                <property name="pixel_size">16</property>
-              </object>
-            </child>
-            <child>
-              <object class="GtkLabel">
-                <property name="label" translatable="1" comments="Translators: This is the button to find a 
route to a place">Directions</property>
-              </object>
-            </child>
+        <property name="child">
+          <object class="AdwButtonContent">
+            <property name="icon-name">route-button-symbolic</property>
+            <property name="label" translatable="1" comments="Translators: This is the button to find a 
route to a place">Directions</property>
           </object>
-        </child>
+        </property>
         <style>
           <class name="suggested-action"/>
         </style>
@@ -35,12 +25,7 @@
         <property name="name">bubble-send-to-button</property>
         <property name="focusable">1</property>
         <property name="tooltip-text" translatable="1" comments="Translators: This is a tooltip">Share 
location</property>
-        <child>
-          <object class="GtkImage" id="sendToButtonImage">
-            <property name="icon-name">send-to-symbolic</property>
-            <property name="pixel_size">16</property>
-          </object>
-        </child>
+        <property name="icon-name">send-to-symbolic</property>
       </object>
     </child>
     <child>
@@ -49,13 +34,7 @@
         <property name="visible">0</property>
         <property name="focusable">1</property>
         <property name="tooltip-text" translatable="1" comments="Translators: This is a tooltip">Mark as 
favorite</property>
-        <child>
-          <object class="GtkImage" id="favoriteButtonImage">
-            <property name="name">bubble-favorite-button-image</property>
-            <property name="icon-name">starred-symbolic</property>
-            <property name="pixel_size">16</property>
-          </object>
-        </child>
+        <property name="icon-name">starred-symbolic</property>
       </object>
     </child>
     <child>
@@ -63,12 +42,7 @@
         <property name="visible">0</property>
         <property name="focusable">1</property>
         <property name="tooltip-text" translatable="1" comments="Translators: This is a tooltip">Edit on 
OpenStreetMap</property>
-        <child>
-          <object class="GtkImage">
-            <property name="icon-name">document-edit-symbolic</property>
-            <property name="pixel_size">16</property>
-          </object>
-        </child>
+        <property name="icon-name">document-edit-symbolic</property>
       </object>
     </child>
   </template>
diff --git a/data/ui/place-dialog.ui b/data/ui/place-dialog.ui
index 3ca5d028..5d35715e 100644
--- a/data/ui/place-dialog.ui
+++ b/data/ui/place-dialog.ui
@@ -5,11 +5,7 @@
     <property name="use_header_bar">1</property>
     <child type="action">
       <object class="GtkButton" id="closeButton">
-        <child>
-          <object class="GtkImage">
-            <property name="icon_name">go-previous-symbolic</property>
-          </object>
-        </child>
+        <property name="icon_name">go-previous-symbolic</property>
       </object>
     </child>
     <action-widgets>
diff --git a/data/ui/place-view.ui b/data/ui/place-view.ui
index 1dbd9e16..80f4602c 100644
--- a/data/ui/place-view.ui
+++ b/data/ui/place-view.ui
@@ -51,12 +51,7 @@
                         <property name="visible">0</property>
                         <property name="focusable">1</property>
                         <property name="tooltip-text" translatable="1" comments="Translators: This is a 
tooltip">Share location</property>
-                        <child>
-                          <object class="GtkImage">
-                            <property name="icon-name">send-to-symbolic</property>
-                            <property name="pixel_size">16</property>
-                          </object>
-                        </child>
+                        <property name="icon-name">send-to-symbolic</property>
                       </object>
                     </child>
                   </object>
diff --git a/data/ui/route-entry.ui b/data/ui/route-entry.ui
index 02d36954..b2cd872b 100644
--- a/data/ui/route-entry.ui
+++ b/data/ui/route-entry.ui
@@ -25,9 +25,6 @@
         <property name="height-request">31</property>
         <property name="margin-start">4</property>
         <property name="margin-end">10</property>
-        <child>
-          <object class="GtkImage" id="buttonImage"/>
-        </child>
       </object>
     </child>
   </template>
diff --git a/data/ui/shape-layer-row.ui b/data/ui/shape-layer-row.ui
index 0a2ad8d1..a27d251a 100644
--- a/data/ui/shape-layer-row.ui
+++ b/data/ui/shape-layer-row.ui
@@ -17,16 +17,8 @@
             <property name="can_focus">True</property>
             <property name="receives_default">False</property>
             <property name="tooltip-text" translatable="yes" comments="Translators: This is a 
tooltip">Toggle visible</property>
-            <child>
-              <object class="GtkImage" id="visibleImage">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="icon-name">layer-visible-symbolic</property>
-                <property name="pixel_size">16</property>
-              </object>
-            </child>
+            <property name="icon-name">layer-visible-symbolic</property>
             <style>
-              <class name="image-button"/>
               <class name="flat"/>
             </style>
           </object>
@@ -43,15 +35,8 @@
         <child>
           <object class="GtkButton" id="closeButton">
             <property name="visible">True</property>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">True</property>
-                <property name="icon_name">window-close-symbolic</property>
-                <property name="icon_size">1</property>
-              </object>
-            </child>
+            <property name="icon_name">window-close-symbolic</property>
             <style>
-              <class name="image-button"/>
               <class name="flat"/>
             </style>
           </object>
diff --git a/data/ui/sidebar.ui b/data/ui/sidebar.ui
index e7ff872c..0997f55e 100644
--- a/data/ui/sidebar.ui
+++ b/data/ui/sidebar.ui
@@ -26,11 +26,7 @@
                 <property name="receives_default">1</property>
                 <property name="height-request">32</property>
                 <property name="width-request">42</property>
-                <child>
-                  <object class="GtkImage" id="mode-pedestrian-image">
-                    <property name="icon-name">route-pedestrian-symbolic</property>
-                  </object>
-                </child>
+                <property name="icon-name">route-pedestrian-symbolic</property>
                 <style>
                   <class name="transportation-mode-button"/>
                 </style>
@@ -43,11 +39,7 @@
                 <property name="group">modePedestrianToggle</property>
                 <property name="height-request">32</property>
                 <property name="width-request">42</property>
-                <child>
-                  <object class="GtkImage" id="mode-bike-image">
-                    <property name="icon-name">route-bike-symbolic</property>
-                  </object>
-                </child>
+                <property name="icon-name">route-bike-symbolic</property>
                 <style>
                   <class name="transportation-mode-button"/>
                 </style>
@@ -61,11 +53,7 @@
                 <property name="group">modeBikeToggle</property>
                 <property name="height-request">32</property>
                 <property name="width-request">42</property>
-                <child>
-                  <object class="GtkImage" id="mode-car-image">
-                    <property name="icon-name">route-car-symbolic</property>
-                  </object>
-                </child>
+                <property name="icon-name">route-car-symbolic</property>
                 <style>
                   <class name="transportation-mode-button"/>
                 </style>
@@ -78,11 +66,7 @@
                 <property name="group">modeCarToggle</property>
                 <property name="height-request">32</property>
                 <property name="width-request">42</property>
-                <child>
-                  <object class="GtkImage" id="mode-transit-image">
-                    <property name="icon-name">route-transit-symbolic</property>
-                  </object>
-                </child>
+                <property name="icon-name">route-transit-symbolic</property>
                 <style>
                   <class name="transportation-mode-button"/>
                 </style>
@@ -264,21 +248,10 @@
                         <property name="margin-bottom">5</property>
                         <property name="margin-end">5</property>
                         <property name="margin-start">5</property>
+                        <property name="icon-name">dialog-information-symbolic</property>
                         <style>
                           <class name="flat"/>
                         </style>
-                        <child>
-                          <object class="GtkGrid">
-                            <property name="valign">center</property>
-                            <child>
-                              <object class="GtkImage">
-                                <property name="halign">center</property>
-                                <property name="hexpand">0</property>
-                                <property name="icon-name">dialog-information-symbolic</property>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
                         <layout>
                           <property name="column">1</property>
                           <property name="row">0</property>
@@ -326,17 +299,7 @@ Names and brands shown are to be considered as registered trademarks when applic
         <property name="margin-top">4</property>
         <property name="margin-bottom">4</property>
         <property name="halign">start</property>
-        <child>
-          <object class="GtkGrid">
-            <property name="valign">center</property>
-            <child>
-              <object class="GtkImage">
-                <property name="hexpand">0</property>
-                <property name="icon-name">go-previous-symbolic</property>
-              </object>
-            </child>
-          </object>
-        </child>
+        <property name="icon-name">go-previous-symbolic</property>
         <layout>
           <property name="column">0</property>
           <property name="row">0</property>
diff --git a/data/ui/transit-leg-row.ui b/data/ui/transit-leg-row.ui
index 9a9747dd..a8649c1d 100644
--- a/data/ui/transit-leg-row.ui
+++ b/data/ui/transit-leg-row.ui
@@ -96,15 +96,10 @@
                   <object class="GtkButton" id="collapsButton">
                     <property name="focusable">1</property>
                     <property name="tooltip-text" translatable="1" comments="Translators: This is a 
tooltip">Hide intermediate stops and information</property>
+                    <property name="icon-name">go-up-symbolic</property>
                     <style>
                       <class name="small-circular"/>
                     </style>
-                    <child>
-                      <object class="GtkImage">
-                        <property name="icon-name">go-up-symbolic</property>
-                        <property name="pixel-size">8</property>
-                      </object>
-                    </child>
                     <layout>
                       <property name="row">1</property>
                       <property name="column">1</property>
@@ -159,15 +154,10 @@
                       <object class="GtkButton" id="expandButton">
                         <property name="focusable">1</property>
                         <property name="tooltip-text" translatable="1" comments="Translators: This is a 
tooltip">Show intermediate stops and information</property>
+                        <property name="icon-name">go-down-symbolic</property>
                         <style>
                           <class name="small-circular"/>
                         </style>
-                        <child>
-                          <object class="GtkImage">
-                            <property name="icon-name">go-down-symbolic</property>
-                            <property name="pixel-size">8</property>
-                          </object>
-                        </child>
                         <layout>
                           <property name="row">0</property>
                           <property name="column">1</property>
diff --git a/data/ui/transit-options-panel.ui b/data/ui/transit-options-panel.ui
index 8169ab13..1adf17ac 100644
--- a/data/ui/transit-options-panel.ui
+++ b/data/ui/transit-options-panel.ui
@@ -58,18 +58,7 @@
         <property name="margin_top">4</property>
         <property name="margin_bottom">4</property>
         <property name="hexpand">true</property>
-        <child>
-          <object class="GtkGrid">
-            <property name="valign">center</property>
-            <child>
-              <object class="GtkImage">
-                <property name="halign">center</property>
-                <property name="hexpand">1</property>
-                <property name="icon-name">view-more-symbolic</property>
-              </object>
-            </child>
-          </object>
-        </child>
+        <property name="icon-name">view-more-symbolic</property>
         <layout>
           <property name="column">3</property>
           <property name="row">0</property>
diff --git a/src/placeButtons.js b/src/placeButtons.js
index c5e1f031..e7c5ee60 100644
--- a/src/placeButtons.js
+++ b/src/placeButtons.js
@@ -94,11 +94,11 @@ export class PlaceButtons extends Gtk.Box {
         this._favoriteButton.connect('clicked', () => {
             if (placeStore.exists(this._place,
                                   PlaceStore.PlaceType.FAVORITE)) {
-                this._favoriteButtonImage.icon_name = 'non-starred-symbolic';
+                this._favoriteButton.icon_name = 'non-starred-symbolic';
                 placeStore.removePlace(this._place,
                                        PlaceStore.PlaceType.FAVORITE);
             } else {
-                this._favoriteButtonImage.icon_name = 'starred-symbolic';
+                this._favoriteButton.icon_name = 'starred-symbolic';
                 placeStore.addPlace(this._place,
                                     PlaceStore.PlaceType.FAVORITE);
             }
@@ -132,9 +132,9 @@ export class PlaceButtons extends Gtk.Box {
 
         if (placeStore.exists(this._place,
                               PlaceStore.PlaceType.FAVORITE)) {
-            this._favoriteButtonImage.icon_name = 'starred-symbolic';
+            this._favoriteButton.icon_name = 'starred-symbolic';
         } else {
-            this._favoriteButtonImage.icon_name = 'non-starred-symbolic';
+            this._favoriteButton.icon_name = 'non-starred-symbolic';
         }
     }
 
@@ -208,8 +208,7 @@ GObject.registerClass({
     InternalChildren: [ 'routeButton',
                         'sendToButton',
                         'favoriteButton',
-                        'editButton',
-                        'favoriteButtonImage' ],
+                        'editButton' ],
     Signals: {
         /* Emitted when the Edit dialog is closed, because the place details
            might have changed and the parent PlaceBar/PlaceView needs
diff --git a/src/routeEntry.js b/src/routeEntry.js
index ed7e286a..343109e9 100644
--- a/src/routeEntry.js
+++ b/src/routeEntry.js
@@ -63,7 +63,7 @@ export class RouteEntry extends Gtk.Grid {
         switch (this._type) {
         case RouteEntry.Type.FROM:
             let query = Application.routeQuery;
-            this._buttonImage.icon_name = 'list-add-symbolic';
+            this._button.icon_name = 'list-add-symbolic';
             this.icon.icon_name = 'maps-point-start-symbolic';
             /* Translators: this is add via location tooltip */
             this._button.tooltip_text = _("Add via location");
@@ -73,13 +73,13 @@ export class RouteEntry extends Gtk.Grid {
 
             break;
         case RouteEntry.Type.VIA:
-            this._buttonImage.icon_name = 'list-remove-symbolic';
+            this._button.icon_name = 'list-remove-symbolic';
             this.icon.icon_name = 'maps-point-end-symbolic';
             /* Translators: this is remove via location tooltip */
             this._button.tooltip_text = _("Remove via location");
             break;
         case RouteEntry.Type.TO:
-            this._buttonImage.icon_name = 'route-reverse-symbolic';
+            this._button.icon_name = 'route-reverse-symbolic';
             this.icon.icon_name = 'maps-point-end-symbolic';
             /* Translators: this is reverse route tooltip */
             this._button.tooltip_text = _("Reverse route");
@@ -116,6 +116,5 @@ GObject.registerClass({
     Template: 'resource:///org/gnome/Maps/ui/route-entry.ui',
     Children: [ 'icon' ],
     InternalChildren: [ 'entryGrid',
-                        'button',
-                        'buttonImage' ]
+                        'button' ]
 }, RouteEntry);
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]