Add multiview modes to LPE selector

2 files changed, 137 insertions, 98 deletions

diff --git a/share/ui/dialog-livepatheffect-add.ui b/share/ui/dialog-livepatheffect-add.ui
index 2bc147b65..57336300e 100644
--- a/share/ui/dialog-livepatheffect-add.ui
+++ b/share/ui/dialog-livepatheffect-add.ui
@@ -130,99 +130,114 @@
                       </packing>
                     </child>
                     <child>
-                      <object class="GtkRadioButton" id="LPESelectorEffectRadioPackLess">
+                      <object class="GtkButtonBox">
                         <property name="visible">True</property>
-                        <property name="can_focus">True</property>
-                        <property name="receives_default">False</property>
-                        <property name="halign">center</property>
+                        <property name="can_focus">False</property>
+                        <property name="halign">start</property>
                         <property name="valign">center</property>
-                        <property name="active">True</property>
-                        <property name="draw_indicator">False</property>
-                        <property name="group">LPESelectorEffectRadioList</property>
+                        <property name="homogeneous">True</property>
+                        <property name="layout_style">start</property>
                         <child>
-                          <object class="GtkImage" id="LPESelectorEffectPackLessImage">
-                            <property name="name">LPESelectorEffectFavShowImage</property>
+                          <object class="GtkRadioButton" id="LPESelectorEffectRadioPackLess">
                             <property name="visible">True</property>
-                            <property name="can_focus">False</property>
-                            <property name="halign">center</property>
+                            <property name="can_focus">True</property>
+                            <property name="receives_default">False</property>
+                            <property name="halign">start</property>
                             <property name="valign">center</property>
-                            <property name="pixel_size">22</property>
-                            <property name="icon_name">pack-less</property>
-                            <property name="icon_size">2</property>
-                            <style>
-                              <class name="fab"/>
-                            </style>
+                            <property name="draw_indicator">False</property>
+                            <property name="group">LPESelectorEffectRadioList</property>
+                            <child>
+                              <object class="GtkImage" id="LPESelectorEffectPackLessImage">
+                                <property name="name">LPESelectorEffectFavShowImage</property>
+                                <property name="visible">True</property>
+                                <property name="can_focus">False</property>
+                                <property name="halign">center</property>
+                                <property name="valign">center</property>
+                                <property name="pixel_size">22</property>
+                                <property name="icon_name">pack-less</property>
+                                <property name="icon_size">2</property>
+                                <style>
+                                  <class name="fab"/>
+                                </style>
+                              </object>
+                            </child>
                           </object>
+                          <packing>
+                            <property name="expand">False</property>
+                            <property name="fill">True</property>
+                            <property name="padding">1</property>
+                            <property name="position">0</property>
+                          </packing>
                         </child>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="padding">1</property>
-                        <property name="position">5</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkRadioButton" id="LPESelectorEffectRadioPackMore">
-                        <property name="visible">True</property>
-                        <property name="can_focus">True</property>
-                        <property name="receives_default">False</property>
-                        <property name="halign">center</property>
-                        <property name="valign">center</property>
-                        <property name="draw_indicator">False</property>
-                        <property name="group">LPESelectorEffectRadioList</property>
                         <child>
-                          <object class="GtkImage" id="LPESelectorEffectPackMoreImage">
-                            <property name="name">LPESelectorEffectFavShowImage</property>
+                          <object class="GtkRadioButton" id="LPESelectorEffectRadioPackMore">
                             <property name="visible">True</property>
-                            <property name="can_focus">False</property>
-                            <property name="halign">center</property>
+                            <property name="can_focus">True</property>
+                            <property name="receives_default">False</property>
+                            <property name="halign">start</property>
                             <property name="valign">center</property>
-                            <property name="pixel_size">22</property>
-                            <property name="icon_name">pack-more</property>
-                            <property name="icon_size">2</property>
-                            <style>
-                              <class name="fab"/>
-                            </style>
+                            <property name="draw_indicator">False</property>
+                            <property name="group">LPESelectorEffectRadioList</property>
+                            <child>
+                              <object class="GtkImage" id="LPESelectorEffectPackMoreImage">
+                                <property name="name">LPESelectorEffectFavShowImage</property>
+                                <property name="visible">True</property>
+                                <property name="can_focus">False</property>
+                                <property name="halign">center</property>
+                                <property name="valign">center</property>
+                                <property name="pixel_size">22</property>
+                                <property name="icon_name">pack-more</property>
+                                <property name="icon_size">2</property>
+                                <style>
+                                  <class name="fab"/>
+                                </style>
+                              </object>
+                            </child>
                           </object>
+                          <packing>
+                            <property name="expand">False</property>
+                            <property name="fill">True</property>
+                            <property name="padding">1</property>
+                            <property name="position">1</property>
+                          </packing>
                         </child>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="padding">1</property>
-                        <property name="position">6</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkRadioButton" id="LPESelectorEffectRadioList">
-                        <property name="visible">True</property>
-                        <property name="can_focus">True</property>
-                        <property name="receives_default">False</property>
-                        <property name="halign">center</property>
-                        <property name="valign">center</property>
-                        <property name="draw_indicator">False</property>
                         <child>
-                          <object class="GtkImage" id="LPESelectorEffectListImage">
-                            <property name="name">LPESelectorEffectFavShowImage</property>
+                          <object class="GtkRadioButton" id="LPESelectorEffectRadioList">
                             <property name="visible">True</property>
-                            <property name="can_focus">False</property>
-                            <property name="halign">center</property>
+                            <property name="can_focus">True</property>
+                            <property name="receives_default">False</property>
+                            <property name="halign">start</property>
                             <property name="valign">center</property>
-                            <property name="pixel_size">27</property>
-                            <property name="icon_name">hamburger-menu</property>
-                            <property name="icon_size">2</property>
-                            <style>
-                              <class name="fab"/>
-                            </style>
+                            <property name="active">True</property>
+                            <property name="draw_indicator">False</property>
+                            <child>
+                              <object class="GtkImage" id="LPESelectorEffectListImage">
+                                <property name="name">LPESelectorEffectFavShowImage</property>
+                                <property name="visible">True</property>
+                                <property name="can_focus">False</property>
+                                <property name="halign">center</property>
+                                <property name="valign">center</property>
+                                <property name="pixel_size">27</property>
+                                <property name="icon_name">hamburger-menu</property>
+                                <property name="icon_size">2</property>
+                                <style>
+                                  <class name="fab"/>
+                                </style>
+                              </object>
+                            </child>
                           </object>
+                          <packing>
+                            <property name="expand">False</property>
+                            <property name="fill">True</property>
+                            <property name="padding">1</property>
+                            <property name="position">2</property>
+                          </packing>
                         </child>
                       </object>
                       <packing>
-                        <property name="expand">False</property>
+                        <property name="expand">True</property>
                         <property name="fill">True</property>
-                        <property name="padding">1</property>
-                        <property name="position">7</property>
+                        <property name="position">5</property>
                       </packing>
                     </child>
                     <child>
@@ -234,7 +249,7 @@
                         <property name="expand">False</property>
                         <property name="fill">True</property>
                         <property name="padding">4</property>
-                        <property name="position">8</property>
+                        <property name="position">7</property>
                       </packing>
                     </child>
                     <child>
@@ -264,7 +279,7 @@
                       <packing>
                         <property name="expand">False</property>
                         <property name="fill">True</property>
-                        <property name="position">9</property>
+                        <property name="position">8</property>
                       </packing>
                     </child>
                   </object>
@@ -596,6 +611,7 @@
         </child>
         <child>
           <object class="GtkButtonBox" id="LPESelectorButtonBox">
+            <property name="name">LPESelectorButtonBox</property>
             <property name="visible">True</property>
             <property name="can_focus">False</property>
             <property name="halign">center</property>
diff --git a/share/ui/style.css b/share/ui/style.css
index 1ce6fe819..380b66078 100644
--- a/share/ui/style.css
+++ b/share/ui/style.css
@@ -190,6 +190,29 @@ spinbutton undershoot {
     outline-style: none;
 }
 
+.inksmall {
+    font-size: 11px;
+}
+
+.inkswitch slider {
+    min-width: 18px;
+    min-height: 18px;
+}
+
+.inkswitch image {
+    color: transparent;
+    background-color: transparent;
+    background-image: image(transparent);
+    -gtk-icon-style:symbolic;
+}
+
+.inkswitch {
+    margin: 2px;
+    padding: 0;
+    font-size: 8px;
+}
+
+
 #LPEDialogSelector,
 #LPEDialogSelector .frame,
 #LPEDialogSelector .searchbar {
@@ -266,8 +289,8 @@ spinbutton undershoot {
 }
 
 #LPEDialogSelector.LPEPackLess flowboxchild {
-margin:1px;
-padding:1px;
+margin:5px 1px 0px;
+padding:3px 3px 10px 3px;
 } 
 #LPEDialogSelector.LPEPackLess flowboxchild label {
 font-size:14px;
@@ -276,36 +299,36 @@ font-size:14px;
 font-size:13px;
 }
 
-#SelectorsAndStyleDialog button {
-    padding: 4px;
-    min-height: 16px;
-    margin: 2px;
-    padding: 2px;
+#LPEDialogSelector.LPEList .lpename {
+    margin-bottom: 1px;
+    font-weight:bold;
 }
-
-.inksmall {
-    font-size: 11px;
+#LPEDialogSelector.LPEList flowboxchild {
+    padding:3px 1px 3px 10px;
+    margin:1px 0px 1px;
+    border-radius:0;
+    border-style:dotted;
+    border-color:@theme_fg_color;
+    border-width: 0 0 1px 0;
 }
-
-.inkswitch slider {
-    min-width: 18px;
-    min-height: 18px;
+#LPEDialogSelector.LPEList flowboxchild:selected {
+    border-style:none;
+    margin:-3px 0px 0px;
+    padding:4px 1px 4px 10px;
 }
 
-.inkswitch image {
-    color: transparent;
-    background-color: transparent;
-    background-image: image(transparent);
-    -gtk-icon-style:symbolic;
+#LPEDialogSelector.LPEList #LPESelectorFlowBox *:selected #LPESelectorEffectFavTop,
+#LPEDialogSelector.LPEList #LPESelectorFlowBox *:selected:focus #LPESelectorEffectFavTop {
+    opacity: 1;
 }
 
-.inkswitch {
+#SelectorsAndStyleDialog button {
+    padding: 4px;
+    min-height: 16px;
     margin: 2px;
-    padding: 0;
-    font-size: 8px;
+    padding: 2px;
 }
 
-
 #XMLAndAttributesDialog .toggle,
 #SelectorsAndStyleDialog .toggle {
     min-width: 18px;