[gnome-software: 3/5] app-row: Rework the styling

[Philip Withnall <pwithnall src gnome org>]

commit 41b5f0981aea40c59ec934cbdcd8852d42bf6fba
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Wed Feb 9 16:13:18 2022 +0100

    app-row: Rework the styling
    
    This gives the row the same style classes as used in AdwActionRow to
    automatically inherit its style, drops the hardcoded label attributes,
    margins and spacing, and reimplements them via CSS.

 src/gs-app-row.ui | 48 ++++++++++++++++++++++++++++++++++--------------
 src/style.css     | 22 ++++++++++++++++++++++
 2 files changed, 56 insertions(+), 14 deletions(-)
---
diff --git a/src/gs-app-row.ui b/src/gs-app-row.ui
index a11a6957b..f4e5370c7 100644
--- a/src/gs-app-row.ui
+++ b/src/gs-app-row.ui
@@ -2,13 +2,15 @@
 <interface>
   <!-- interface-requires gtk+ 3.10 -->
   <template class="GsAppRow" parent="GtkListBoxRow">
+    <style>
+      <class name="app"/>
+    </style>
     <child>
       <object class="GtkBox" id="box">
-        <property name="margin_top">10</property>
-        <property name="margin_bottom">10</property>
-        <property name="margin_start">10</property>
-        <property name="margin_end">16</property>
         <property name="orientation">horizontal</property>
+        <style>
+          <class name="header"/>
+        </style>
         <child>
           <object class="GtkImage" id="image">
             <property name="pixel_size">64</property>
@@ -21,9 +23,11 @@
         <child>
           <object class="GtkBox" id="name_box">
             <property name="orientation">vertical</property>
-            <property name="margin-start">12</property>
             <property name="valign">center</property>
             <property name="hexpand">True</property>
+            <style>
+              <class name="title"/>
+            </style>
             <child>
               <object class="GtkLabel" id="name_label">
                 <property name="wrap">True</property>
@@ -32,9 +36,9 @@
                 <property name="ellipsize">end</property>
                 <property name="lines">3</property>
                 <property name="wrap-mode">word-char</property>
-                <attributes>
-                  <attribute name="weight" value="bold"/>
-                </attributes>
+                <style>
+                  <class name="title"/>
+                </style>
               </object>
             </child>
             <child>
@@ -46,6 +50,9 @@
                     <property name="xalign">0.0</property>
                     <property name="yalign">0.5</property>
                     <property name="ellipsize">end</property>
+                    <style>
+                      <class name="subtitle"/>
+                    </style>
                   </object>
                 </child>
                 <child>
@@ -56,6 +63,7 @@
                     <property name="label">→</property>
                     <style>
                       <class name="version-arrow-label"/>
+                      <class name="subtitle"/>
                     </style>
                   </object>
                 </child>
@@ -64,13 +72,15 @@
                     <property name="xalign">0.0</property>
                     <property name="yalign">0.5</property>
                     <property name="ellipsize">end</property>
+                    <style>
+                      <class name="subtitle"/>
+                    </style>
                   </object>
                 </child>
               </object>
             </child>
             <child>
               <object class="GtkBox" id="description_box">
-                <property name="margin_top">3</property>
                 <property name="orientation">vertical</property>
                 <property name="valign">center</property>
                 <child>
@@ -83,6 +93,9 @@
                     <property name="ellipsize">end</property>
                     <property name="lines">2</property>
                     <property name="xalign">0</property>
+                    <style>
+                      <class name="subtitle"/>
+                    </style>
                   </object>
                 </child>
                 <child>
@@ -102,6 +115,7 @@
                             <style>
                               <class name="app-row-origin-text"/>
                               <class name="dim-label"/>
+                              <class name="subtitle"/>
                             </style>
                           </object>
                         </child>
@@ -113,7 +127,6 @@
                             <property name="hexpand">True</property>
                            <property name="valign">end</property>
                            <property name="spacing">6</property>
-                           <property name="margin-end">24</property>
                            <child>
                              <object class="GtkImage" id="installed-icon">
                                <property name="halign">center</property>
@@ -131,6 +144,7 @@
                                <property name="label" translatable="yes">Installed</property>
                                <style>
                                  <class name="caption"/>
+                                 <class name="subtitle"/>
                                </style>
                              </object>
                            </child>
@@ -145,10 +159,10 @@
                         <property name="halign">start</property>
                         <property name="wrap">True</property>
                         <property name="xalign">0</property>
-                        <attributes>
-                          <attribute name="weight" value="bold"/>
-                          <attribute name="foreground" value="#cccc00000000"/>
-                        </attributes>
+                        <style>
+                          <class name="title"/>
+                          <class name="warning"/>
+                        </style>
                       </object>
                     </child>
                   </object>
@@ -171,6 +185,9 @@
                     <property name="wrap-mode">word-char</property>
                     <property name="ellipsize">end</property>
                     <property name="lines">2</property>
+                    <style>
+                      <class name="subtitle"/>
+                    </style>
                   </object>
                 </child>
               </object>
@@ -181,6 +198,9 @@
                 <property name="valign">center</property>
                 <property name="vexpand">True</property>
                 <property name="label">150 MB</property>
+                <style>
+                  <class name="subtitle"/>
+                </style>
               </object>
            </child>
             <child>
diff --git a/src/style.css b/src/style.css
index 6cca2ea40..61d0b2a64 100644
--- a/src/style.css
+++ b/src/style.css
@@ -511,3 +511,25 @@ window.info scrollbar.vertical trough {
   /* The size a typical headerbar takes: 46px + 1px for the bottom border. */
   margin-top: 0;
 }
+
+/************
+ * GsAppRow *
+ ************/
+
+row.app > box.header {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+row.app > box.header {
+  border-spacing: 12px;
+}
+
+row.app > box.header > image {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+row.app label.warning {
+  color: #cc0000;
+}