[gnome-control-center/wip/jsparber/background: 47/58] [feat] center gallery

[Julian Sparber <jsparber src gnome org>]

commit b093d29255571251f67ebba65b4dbbd79ead2fdd
Author: Julian Sparber <julian sparber net>
Date:   Mon Nov 13 18:01:37 2017 +0100

    [feat] center gallery

 panels/background/background.ui       |  290 ++++++++++++++++++---------------
 panels/background/data/background.css |    2 +-
 2 files changed, 156 insertions(+), 136 deletions(-)
---
diff --git a/panels/background/background.ui b/panels/background/background.ui
index acd0455..083fbf9 100644
--- a/panels/background/background.ui
+++ b/panels/background/background.ui
@@ -5,187 +5,179 @@
     <property name="visible">True</property>
     <property name="can_focus">False</property>
     <property name="hexpand">True</property>
-    <property name="orientation">vertical</property>
     <child>
-      <object class="GtkBox" id="background-preview">
+      <object class="GtkBox" id="left_space">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="expand">True</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkBox" id="content">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="margin">16</property>
-        <property name="halign">fill</property>
         <property name="orientation">vertical</property>
-        <property name="expand">False</property>
-        <property name="height_request">150</property>
         <child>
-          <object class="GtkAspectFrame">
+          <object class="GtkBox" id="background-preview">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="shadow_type">GTK_SHADOW_NONE</property>
-            <property name="expand">True</property>
-            <property name="obey-child">False</property>
-            <property name="ratio">1.7777</property>
+            <property name="margin">16</property>
+            <property name="halign">fill</property>
+            <property name="orientation">vertical</property>
+            <property name="expand">False</property>
+            <property name="height_request">150</property>
             <child>
-              <object class="GtkBox" id="background-preview-top">
+              <object class="GtkAspectFrame">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="orientation">vertical</property>
-                <style>
-                  <class name="black-border"/>
-                </style>
+                <property name="shadow_type">GTK_SHADOW_NONE</property>
+                <property name="expand">True</property>
+                <property name="obey-child">False</property>
+                <property name="ratio">1.7777</property>
                 <child>
-                  <object class="GtkDrawingArea" id="background-desktop-drawingarea">
+                  <object class="GtkBox" id="background-preview-top">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="expand">True</property>
+                    <property name="orientation">vertical</property>
+                    <style>
+                      <class name="black-border"/>
+                    </style>
+                    <child>
+                      <object class="GtkDrawingArea" id="background-desktop-drawingarea">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="expand">True</property>
+                      </object>
+                    </child>
                   </object>
                 </child>
               </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
+              </packing>
             </child>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">0</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkRevealer" id="wallpaper-info">
-            <property name="visible">True</property>
-            <property name="reveal-child">True</property>
             <child>
-              <object class="GtkBox" id="slide-box">
+              <object class="GtkRevealer" id="wallpaper-info">
                 <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="margin_top">10</property>
+                <property name="reveal-child">True</property>
                 <child>
-                  <object class="GtkBox" id="hbox2">
+                  <object class="GtkBox" id="slide-box">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="halign">center</property>
+                    <property name="margin_top">10</property>
                     <child>
-                      <object class="GtkImage" id="slide_image">
+                      <object class="GtkBox" id="hbox2">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="icon_name">slideshow-symbolic</property>
+                        <property name="halign">center</property>
+                        <child>
+                          <object class="GtkImage" id="slide_image">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="icon_name">slideshow-symbolic</property>
+                          </object>
+                          <packing>
+                            <property name="expand">False</property>
+                            <property name="fill">True</property>
+                            <property name="position">0</property>
+                          </packing>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="strut">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="label"> </property>
+                          </object>
+                          <packing>
+                            <property name="expand">False</property>
+                            <property name="fill">True</property>
+                            <property name="position">1</property>
+                          </packing>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="slide-label">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="xalign">0</property>
+                            <property name="label" translatable="yes" comments="This refers to a slideshow 
background">Changes throughout the day</property>
+                          </object>
+                          <packing>
+                            <property name="expand">False</property>
+                            <property name="fill">True</property>
+                            <property name="position">1</property>
+                          </packing>
+                        </child>
                       </object>
                       <packing>
-                        <property name="expand">False</property>
+                        <property name="expand">True</property>
                         <property name="fill">True</property>
                         <property name="position">0</property>
                       </packing>
                     </child>
-                    <child>
-                      <object class="GtkLabel" id="strut">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="label"> </property>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">1</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="slide-label">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="xalign">0</property>
-                        <property name="label" translatable="yes" comments="This refers to a slideshow 
background">Changes throughout the day</property>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">1</property>
-                      </packing>
-                    </child>
                   </object>
-                  <packing>
-                    <property name="expand">True</property>
-                    <property name="fill">True</property>
-                    <property name="position">0</property>
-                  </packing>
                 </child>
               </object>
             </child>
           </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">0</property>
+          </packing>
         </child>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">True</property>
-        <property name="position">0</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkBox" id="background-gallery-box">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="expand">True</property>
-        <!--<property name="height_request">150</property>-->
-        <style>
-          <class name="background-gallery"/>
-        </style>
         <child>
-          <object class="GtkScrolledWindow">
+          <object class="GtkBox" id="background-gallery-box">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="hscrollbar_policy">never</property>
+            <property name="expand">True</property>
+            <!--<property name="height_request">150</property>-->
+            <style>
+              <class name="background-gallery"/>
+            </style>
             <child>
-              <object class="GtkBox" id="box4">
+              <object class="GtkScrolledWindow">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="orientation">vertical</property>
+                <property name="hscrollbar_policy">never</property>
                 <child>
-                  <object class="GtkFlowBox" id="background-gallery">
+                  <object class="GtkBox" id="box4">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="hexpand">True</property>
-                    <property name="vexpand">False</property>
-                    <property name="homogeneous">True</property>
-                    <property name="orientation">horizontal</property>
-                    <property name="min-children-per-line">2</property>
-                    <property name="max-children-per-line">1000</property>
-                    <property name="row_spacing">5</property>
-                    <property name="column_spacing">5</property>
-                    <property name="halign">fill</property>
-                    <property name="valign">fill</property>
-                    <property name="margin">25</property>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkBox">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="halign">center</property>
-                    <property name="valign">end</property>
-                    <property name="margin">32</property>
-                    <property name="margin_top">7</property>
                     <property name="orientation">vertical</property>
-                    <property name="spacing">16</property>
                     <child>
-                      <object class="GtkLabel">
+                      <object class="GtkFlowBox" id="background-gallery">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="label" translatable="yes">Photos or Files can be used to set any 
image as the background</property>
+                        <property name="hexpand">True</property>
+                        <property name="vexpand">False</property>
+                        <property name="homogeneous">True</property>
+                        <property name="orientation">horizontal</property>
+                        <property name="min-children-per-line">2</property>
+                        <property name="max-children-per-line">1000</property>
+                        <property name="row_spacing">5</property>
+                        <property name="column_spacing">5</property>
+                        <property name="halign">fill</property>
+                        <property name="valign">fill</property>
+                        <property name="margin">25</property>
                       </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">0</property>
-                      </packing>
                     </child>
                     <child>
                       <object class="GtkBox">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
                         <property name="halign">center</property>
+                        <property name="valign">end</property>
+                        <property name="margin">32</property>
+                        <property name="margin_top">7</property>
+                        <property name="orientation">vertical</property>
                         <property name="spacing">16</property>
                         <child>
-                          <object class="GtkButton" id="open-gnome-photos">
-                            <property name="label" translatable="yes">Open Photos app</property>
+                          <object class="GtkLabel">
                             <property name="visible">True</property>
-                            <property name="can_focus">True</property>
-                            <property name="receives_default">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="label" translatable="yes">Photos or Files can be used to set any 
image as the background</property>
                           </object>
                           <packing>
                             <property name="expand">False</property>
@@ -194,11 +186,37 @@
                           </packing>
                         </child>
                         <child>
-                          <object class="GtkButton" id="open-picture-folder">
-                            <property name="label" translatable="yes">Open Pictures folder</property>
+                          <object class="GtkBox">
                             <property name="visible">True</property>
-                            <property name="can_focus">True</property>
-                            <property name="receives_default">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="halign">center</property>
+                            <property name="spacing">16</property>
+                            <child>
+                              <object class="GtkButton" id="open-gnome-photos">
+                                <property name="label" translatable="yes">Open Photos app</property>
+                                <property name="visible">True</property>
+                                <property name="can_focus">True</property>
+                                <property name="receives_default">True</property>
+                              </object>
+                              <packing>
+                                <property name="expand">False</property>
+                                <property name="fill">True</property>
+                                <property name="position">0</property>
+                              </packing>
+                            </child>
+                            <child>
+                              <object class="GtkButton" id="open-picture-folder">
+                                <property name="label" translatable="yes">Open Pictures folder</property>
+                                <property name="visible">True</property>
+                                <property name="can_focus">True</property>
+                                <property name="receives_default">True</property>
+                              </object>
+                              <packing>
+                                <property name="expand">False</property>
+                                <property name="fill">True</property>
+                                <property name="position">1</property>
+                              </packing>
+                            </child>
                           </object>
                           <packing>
                             <property name="expand">False</property>
@@ -207,29 +225,31 @@
                           </packing>
                         </child>
                       </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">1</property>
-                      </packing>
                     </child>
                   </object>
                 </child>
               </object>
+              <packing>
+                <property name="expand">True</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
+              </packing>
             </child>
           </object>
           <packing>
             <property name="expand">True</property>
             <property name="fill">True</property>
-            <property name="position">0</property>
+            <property name="position">1</property>
           </packing>
         </child>
       </object>
-      <packing>
+    </child>
+    <child>
+      <object class="GtkBox" id="right_space">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
         <property name="expand">True</property>
-        <property name="fill">True</property>
-        <property name="position">1</property>
-      </packing>
+      </object>
     </child>
   </object>
   <object class="GtkListStore" id="sources-liststore">
diff --git a/panels/background/data/background.css b/panels/background/data/background.css
index 04695ed..2c7ee12 100644
--- a/panels/background/data/background.css
+++ b/panels/background/data/background.css
@@ -1,6 +1,6 @@
 .background-gallery {
   background: #fff;
-  border-top: 1px solid #b6b6b3;
+  border: 1px solid #b6b6b3;
 }
 
 .black-border {