rework background page to balance the preview and controls

a) expand to fit the available space
b) make the controls and the preview the same size
c) reorganize the three options of color, gradient and bitmap to all put the
preview in the same place and adjust so the preview is the same size in each
case, i.e. switching between views gives the impression of a single shared
preview element
d) put a border around the gradient list so its area is visually noticable
to be the same size as its preview area

Change-Id: I88735778bb482f9dd011f890d170be127877367a

3 files changed, 133 insertions, 101 deletions

diff --git a/cui/source/inc/backgrnd.hxx b/cui/source/inc/backgrnd.hxx
index b5967f7022a0..c3e13b9e176d 100644
--- a/cui/source/inc/backgrnd.hxx
+++ b/cui/source/inc/backgrnd.hxx
@@ -101,6 +101,7 @@ private:
     SfxItemSet&             m_rXFillSet;
 
     // Background Bitmap ----------------------------------
+    VclContainer*           m_pBitmapContainer;
     VclContainer*           m_pFileFrame;
     PushButton*             m_pBtnBrowse;
     CheckBox*               m_pBtnLink;
diff --git a/cui/source/tabpages/backgrnd.cxx b/cui/source/tabpages/backgrnd.cxx
index 3cc1f4559c5b..3b94fdfc757d 100644
--- a/cui/source/tabpages/backgrnd.cxx
+++ b/cui/source/tabpages/backgrnd.cxx
@@ -378,6 +378,7 @@ SvxBackgroundTabPage::SvxBackgroundTabPage(Window* pParent, const SfxItemSet& rC
     m_pCtlPreview->set_width_request(aSize.Width());
     m_pCtlPreview->set_height_request(aSize.Height());
 
+    get(m_pBitmapContainer, "graphicgrid");
     get(m_pFileFrame, "fileframe");
     get(m_pBtnBrowse, "browse");
     get(m_pBtnLink, "link");
@@ -1262,7 +1263,8 @@ void SvxBackgroundTabPage::ShowBitmapUI_Impl()
         HideColorUI_Impl();
         HideGradientUI_Impl();
 
-        m_pBtnPreview->Show();
+
+        m_pBitmapContainer->Show();
 
         m_pFileFrame->Show();
         m_pBtnLink->Show(!bLinkOnly && ! nHtmlMode & HTMLMODE_ON);
@@ -1270,6 +1272,7 @@ void SvxBackgroundTabPage::ShowBitmapUI_Impl()
         m_pTypeFrame->Show();
 
         m_pPreviewWin2->Show();
+        m_pBtnPreview->Show();
 
         m_pGraphTransFrame->Show(bGraphTransparency);
         m_pColTransFT->Show(sal_False);
@@ -1279,15 +1282,12 @@ void SvxBackgroundTabPage::ShowBitmapUI_Impl()
 
 void SvxBackgroundTabPage::HideBitmapUI_Impl()
 {
-        m_pBtnPreview->Hide();
-
-        m_pFileFrame->Hide();
-
-        m_pTypeFrame->Hide();
-
-        m_pPreviewWin2->Hide();
-
-        m_pGraphTransFrame->Hide();
+    m_pBitmapContainer->Hide();
+    m_pFileFrame->Hide();
+    m_pTypeFrame->Hide();
+    m_pPreviewWin2->Hide();
+    m_pBtnPreview->Hide();
+    m_pGraphTransFrame->Hide();
 }
 
 void SvxBackgroundTabPage::ShowGradientUI_Impl()
diff --git a/cui/uiconfig/ui/backgroundpage.ui b/cui/uiconfig/ui/backgroundpage.ui
index 3cf82c1f976f..3182e288179f 100644
--- a/cui/uiconfig/ui/backgroundpage.ui
+++ b/cui/uiconfig/ui/backgroundpage.ui
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <!-- interface-requires gtk+ 3.0 -->
+  <!-- interface-requires LibreOffice 1.0 -->
   <object class="GtkAdjustment" id="adjustment1">
     <property name="upper">100</property>
     <property name="step_increment">5</property>
@@ -135,39 +136,28 @@
             <property name="top_padding">6</property>
             <property name="left_padding">12</property>
             <child>
-              <object class="GtkGrid" id="grid3">
+              <object class="GtkGrid" id="grid2">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
                 <property name="hexpand">True</property>
                 <property name="vexpand">True</property>
-                <property name="row_spacing">4</property>
-                <property name="column_spacing">42</property>
-                <child>
-                  <object class="svtlo-ValueSet" id="backgroundcolorset">
-                    <property name="width_request">150</property>
-                    <property name="height_request">250</property>
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="border">True</property>
-                  </object>
-                  <packing>
-                    <property name="left_attach">0</property>
-                    <property name="top_attach">0</property>
-                    <property name="width">1</property>
-                    <property name="height">2</property>
-                  </packing>
-                </child>
+                <property name="column_spacing">24</property>
+                <property name="column_homogeneous">True</property>
                 <child>
                   <object class="GtkGrid" id="grid4">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="column_spacing">12</property>
+                    <property name="hexpand">True</property>
+                    <property name="vexpand">True</property>
+                    <property name="row_spacing">6</property>
                     <child>
-                      <object class="GtkLabel" id="transparencyft">
-                        <property name="can_focus">False</property>
-                        <property name="no_show_all">True</property>
-                        <property name="label" translatable="yes">_Transparency</property>
-                        <property name="use_underline">True</property>
+                      <object class="cuilo-BackgroundPreview" id="preview1">
+                        <property name="width_request">150</property>
+                        <property name="height_request">150</property>
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                        <property name="hexpand">True</property>
+                        <property name="vexpand">True</property>
                       </object>
                       <packing>
                         <property name="left_attach">0</property>
@@ -177,15 +167,43 @@
                       </packing>
                     </child>
                     <child>
-                      <object class="GtkSpinButton" id="transparencymf:0%">
-                        <property name="can_focus">True</property>
-                        <property name="no_show_all">True</property>
-                        <property name="invisible_char">●</property>
-                        <property name="adjustment">adjustment1</property>
+                      <object class="GtkGrid" id="grid12">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="column_spacing">12</property>
+                        <child>
+                          <object class="GtkLabel" id="transparencyft">
+                            <property name="can_focus">False</property>
+                            <property name="no_show_all">True</property>
+                            <property name="label" translatable="yes">_Transparency</property>
+                            <property name="use_underline">True</property>
+                          </object>
+                          <packing>
+                            <property name="left_attach">0</property>
+                            <property name="top_attach">0</property>
+                            <property name="width">1</property>
+                            <property name="height">1</property>
+                          </packing>
+                        </child>
+                        <child>
+                          <object class="GtkSpinButton" id="transparencymf:0%">
+                            <property name="can_focus">True</property>
+                            <property name="no_show_all">True</property>
+                            <property name="invisible_char">●</property>
+                            <property name="invisible_char_set">True</property>
+                            <property name="adjustment">adjustment1</property>
+                          </object>
+                          <packing>
+                            <property name="left_attach">1</property>
+                            <property name="top_attach">0</property>
+                            <property name="width">1</property>
+                            <property name="height">1</property>
+                          </packing>
+                        </child>
                       </object>
                       <packing>
-                        <property name="left_attach">1</property>
-                        <property name="top_attach">0</property>
+                        <property name="left_attach">0</property>
+                        <property name="top_attach">1</property>
                         <property name="width">1</property>
                         <property name="height">1</property>
                       </packing>
@@ -193,22 +211,22 @@
                   </object>
                   <packing>
                     <property name="left_attach">1</property>
-                    <property name="top_attach">1</property>
+                    <property name="top_attach">0</property>
                     <property name="width">1</property>
                     <property name="height">1</property>
                   </packing>
                 </child>
                 <child>
-                  <object class="cuilo-BackgroundPreview" id="preview1">
+                  <object class="svtlo-ValueSet" id="backgroundcolorset">
                     <property name="width_request">150</property>
-                    <property name="height_request">10</property>
+                    <property name="height_request">150</property>
                     <property name="visible">True</property>
                     <property name="can_focus">True</property>
                     <property name="hexpand">True</property>
-                    <property name="margin_right">30</property>
+                    <property name="vexpand">True</property>
                   </object>
                   <packing>
-                    <property name="left_attach">1</property>
+                    <property name="left_attach">0</property>
                     <property name="top_attach">0</property>
                     <property name="width">1</property>
                     <property name="height">1</property>
@@ -237,13 +255,13 @@
       </packing>
     </child>
     <child>
-      <object class="GtkGrid" id="grid5">
-        <property name="visible">True</property>
+      <object class="GtkGrid" id="graphicgrid">
         <property name="can_focus">False</property>
-        <property name="margin_top">6</property>
+        <property name="no_show_all">True</property>
         <property name="hexpand">True</property>
         <property name="vexpand">True</property>
         <property name="column_spacing">24</property>
+        <property name="column_homogeneous">True</property>
         <child>
           <object class="GtkGrid" id="grid6">
             <property name="visible">True</property>
@@ -572,16 +590,17 @@
             <property name="can_focus">False</property>
             <property name="hexpand">True</property>
             <property name="vexpand">True</property>
+            <property name="row_spacing">6</property>
             <child>
               <object class="cuilo-BackgroundPreview" id="preview2">
-                <property name="no_show_all">True</property>
                 <property name="can_focus">True</property>
+                <property name="no_show_all">True</property>
                 <property name="hexpand">True</property>
                 <property name="vexpand">True</property>
               </object>
               <packing>
                 <property name="left_attach">0</property>
-                <property name="top_attach">0</property>
+                <property name="top_attach">1</property>
                 <property name="width">1</property>
                 <property name="height">1</property>
               </packing>
@@ -598,7 +617,19 @@
               </object>
               <packing>
                 <property name="left_attach">0</property>
-                <property name="top_attach">1</property>
+                <property name="top_attach">2</property>
+                <property name="width">1</property>
+                <property name="height">1</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="blank">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">0</property>
                 <property name="width">1</property>
                 <property name="height">1</property>
               </packing>
@@ -620,69 +651,69 @@
       </packing>
     </child>
     <child>
-      <object class="GtkGrid" id="backgroundgradient">
-        <property name="visible">True</property>
+      <object class="GtkFrame" id="backgroundgradientframe">
         <property name="can_focus">False</property>
+        <property name="hexpand">True</property>
+        <property name="vexpand">True</property>
+        <property name="label_xalign">0</property>
+        <property name="shadow_type">none</property>
         <child>
-          <object class="GtkFrame" id="backgroundgradientframe">
+          <object class="GtkAlignment" id="alignment5">
+            <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="label_xalign">0</property>
-            <property name="shadow_type">none</property>
+            <property name="hexpand">True</property>
+            <property name="vexpand">True</property>
+            <property name="top_padding">6</property>
+            <property name="left_padding">12</property>
             <child>
-              <object class="GtkAlignment" id="alignment5">
+              <object class="GtkGrid" id="grid11">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="top_padding">6</property>
-                <property name="left_padding">12</property>
+                <property name="hexpand">True</property>
+                <property name="vexpand">True</property>
+                <property name="column_spacing">24</property>
+                <property name="column_homogeneous">True</property>
                 <child>
-                  <object class="GtkGrid" id="grid11">
+                  <object class="svxlo-GradientLB" id="gradientslb:border">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <child>
-                      <object class="svxlo-GradientLB" id="gradientslb">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                      </object>
-                      <packing>
-                        <property name="left_attach">0</property>
-                        <property name="top_attach">0</property>
-                        <property name="width">1</property>
-                        <property name="height">1</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="svxlo-SvxXRectPreview" id="previewctl">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                      </object>
-                      <packing>
-                        <property name="left_attach">0</property>
-                        <property name="top_attach">1</property>
-                        <property name="width">1</property>
-                        <property name="height">1</property>
-                      </packing>
-                    </child>
+                    <property name="hexpand">True</property>
+                    <property name="vexpand">True</property>
                   </object>
+                  <packing>
+                    <property name="left_attach">0</property>
+                    <property name="top_attach">0</property>
+                    <property name="width">1</property>
+                    <property name="height">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="svxlo-SvxXRectPreview" id="previewctl">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="hexpand">True</property>
+                    <property name="vexpand">True</property>
+                  </object>
+                  <packing>
+                    <property name="left_attach">1</property>
+                    <property name="top_attach">0</property>
+                    <property name="width">1</property>
+                    <property name="height">1</property>
+                  </packing>
                 </child>
-              </object>
-            </child>
-            <child type="label">
-              <object class="GtkLabel" id="label1">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="label" translatable="yes">Background gradient</property>
-                <attributes>
-                  <attribute name="weight" value="bold"/>
-                </attributes>
               </object>
             </child>
           </object>
-          <packing>
-            <property name="left_attach">0</property>
-            <property name="top_attach">0</property>
-            <property name="width">1</property>
-            <property name="height">1</property>
-          </packing>
+        </child>
+        <child type="label">
+          <object class="GtkLabel" id="label1">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="label" translatable="yes">Background gradient</property>
+            <attributes>
+              <attribute name="weight" value="bold"/>
+            </attributes>
+          </object>
         </child>
       </object>
       <packing>