[gnome-software: 5/18] app-context-bar: Split the tiles in two boxes

[Philip Withnall <pwithnall src gnome org>]

commit cb3c830e0a2e76602a614942d2bd9e5ee7c24e31
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Tue Aug 10 12:32:25 2021 +0200

    app-context-bar: Split the tiles in two boxes
    
    Allows the app context bar to be arranged in a 2x2 grid simply by making
    it vertical.
    
    This leaves the indentation broken to ease review, it will be fixed in
    the next commit.

 src/gs-app-context-bar.ui | 16 ++++++++++++++++
 src/gtk-style.css         | 42 ++++++++++++++++++++++++++++++++----------
 2 files changed, 48 insertions(+), 10 deletions(-)
---
diff --git a/src/gs-app-context-bar.ui b/src/gs-app-context-bar.ui
index 7abc67455..add79b60b 100644
--- a/src/gs-app-context-bar.ui
+++ b/src/gs-app-context-bar.ui
@@ -10,6 +10,11 @@
       <class name="linked"/>
     </style>
 
+    <child>
+      <object class="GtkBox">
+        <property name="visible">True</property>
+        <property name="homogeneous">True</property>
+
     <child>
       <object class="GtkButton" id="storage_tile">
         <property name="visible">True</property>
@@ -163,6 +168,14 @@
       </object>
     </child>
 
+      </object>
+    </child>
+
+    <child>
+      <object class="GtkBox">
+        <property name="visible">True</property>
+        <property name="homogeneous">True</property>
+
     <child>
       <object class="GtkButton" id="hardware_support_tile">
         <property name="visible">True</property>
@@ -317,6 +330,9 @@
         </child>
       </object>
     </child>
+
+      </object>
+    </child>
   </template>
 
   <object class="GtkSizeGroup" id="app_context_bar_size_group">
diff --git a/src/gtk-style.css b/src/gtk-style.css
index 397c1efb2..4509b834e 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -721,22 +721,44 @@ clamp.status-page .title:not(:last-child) {
   margin-bottom: 12px;
 }
 
-app-context-bar {
-       border-radius: 8px;
+app-context-bar .context-tile {
        border: 1px solid shade(@theme_bg_color, 0.9);
        background-color: @theme_base_color;
-}
-
-app-context-bar .context-tile {
-       padding: 24px 12px 21px 12px;
        border-radius: 0;
-       border: none;
+       padding: 24px 12px 21px 12px;
        border-right: 1px solid shade(@theme_bg_color, 0.9);
 }
-app-context-bar .context-tile:last-child {
-       border-right: none;
-       border-bottom-right-radius: 8px;
+
+app-context-bar box:first-child .context-tile:first-child {
+       border-top-left-radius: 8px;
+       -gtk-outline-top-left-radius: 7px;
+}
+
+app-context-bar.horizontal box:last-child .context-tile:last-child,
+app-context-bar.vertical box:first-child .context-tile:last-child {
        border-top-right-radius: 8px;
+       -gtk-outline-top-right-radius: 7px;
+}
+
+app-context-bar.horizontal box:first-child .context-tile:first-child,
+app-context-bar.vertical box:last-child .context-tile:first-child {
+       border-bottom-left-radius: 8px;
+       -gtk-outline-bottom-left-radius: 7px;
+}
+
+app-context-bar box:last-child .context-tile:last-child {
+       border-bottom-right-radius: 8px;
+       -gtk-outline-bottom-right-radius: 7px;
+}
+
+app-context-bar.horizontal box:not(:last-child) .context-tile,
+app-context-bar.horizontal box:last-child .context-tile:not(:last-child),
+app-context-bar.vertical .context-tile:not(:last-child) {
+       border-right: none;
+}
+
+app-context-bar.vertical box:not(:last-child) .context-tile {
+       border-bottom: none;
 }
 
 .context-tile-lozenge {