Working with event boxes

3 files changed, 204 insertions, 165 deletions

diff --git a/share/ui/dialog-livepatheffect-add-effect.ui b/share/ui/dialog-livepatheffect-add-effect.ui
index 77a11b4b8..08edbe792 100644
--- a/share/ui/dialog-livepatheffect-add-effect.ui
+++ b/share/ui/dialog-livepatheffect-add-effect.ui
@@ -2,195 +2,234 @@
 <!-- Generated with glade 3.22.1 -->
 <interface>
   <requires lib="gtk+" version="3.20"/>
-  <object class="GtkBox" id="LPESelectorEffect">
-    <property name="width_request">200</property>
+  <object class="GtkEventBox" id="LPESelectorEffect">
     <property name="visible">True</property>
-    <property name="can_focus">True</property>
-    <property name="double_buffered">False</property>
-    <property name="halign">center</property>
-    <property name="hexpand">False</property>
-    <property name="orientation">vertical</property>
-    <property name="baseline_position">top</property>
+    <property name="can_focus">False</property>
+    <property name="halign">end</property>
+    <property name="valign">start</property>
+    <property name="visible_window">False</property>
     <child>
-      <object class="GtkOverlay">
+      <object class="GtkBox" id="LPESelectorEffectBox">
+        <property name="width_request">200</property>
         <property name="visible">True</property>
-        <property name="can_focus">False</property>
+        <property name="can_focus">True</property>
+        <property name="double_buffered">False</property>
+        <property name="halign">center</property>
+        <property name="hexpand">False</property>
+        <property name="orientation">vertical</property>
+        <property name="baseline_position">top</property>
         <child>
-          <object class="GtkImage" id="LPEIcon">
+          <object class="GtkOverlay">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="halign">center</property>
-            <property name="valign">start</property>
-            <property name="pixel_size">80</property>
-            <property name="icon_name">align-vertical-baseline</property>
-            <property name="icon_size">6</property>
-          </object>
-          <packing>
-            <property name="index">1</property>
-          </packing>
-        </child>
-        <child type="overlay">
-          <object class="GtkEventBox" id="LPESelectorEffectFavLauncherTop">
-            <property name="can_focus">False</property>
-            <property name="no_show_all">True</property>
-            <property name="halign">end</property>
-            <property name="valign">start</property>
             <child>
-              <object class="GtkImage">
+              <object class="GtkImage" id="LPEIcon">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="halign">start</property>
+                <property name="halign">center</property>
                 <property name="valign">start</property>
-                <property name="pixel_size">30</property>
-                <property name="icon_name">draw-star</property>
-                <property name="icon_size">2</property>
-                <style>
-                  <class name="fab"/>
-                </style>
+                <property name="pixel_size">80</property>
+                <property name="icon_name">align-vertical-baseline</property>
+                <property name="icon_size">6</property>
               </object>
+              <packing>
+                <property name="index">1</property>
+              </packing>
             </child>
-          </object>
-          <packing>
-            <property name="index">2</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="GtkLabel" id="LPEName">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="label" translatable="yes">LPEName</property>
-        <property name="justify">center</property>
-        <style>
-          <class name="lpename"/>
-        </style>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">False</property>
-        <property name="position">2</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkLabel" id="LPEDescription">
-        <property name="width_request">200</property>
-        <property name="can_focus">False</property>
-        <property name="no_show_all">True</property>
-        <property name="label" translatable="yes">Description</property>
-        <property name="justify">center</property>
-        <property name="wrap">True</property>
-        <property name="max_width_chars">20</property>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">False</property>
-        <property name="padding">10</property>
-        <property name="position">3</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkButtonBox">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="halign">end</property>
-        <property name="layout_style">start</property>
-        <child>
-          <object class="GtkEventBox" id="LPESelectorEffectInfoLauncher">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <child>
-              <object class="GtkImage">
+            <child type="overlay">
+              <object class="GtkEventBox" id="LPESelectorEffectEventFavTop">
+                <property name="visible">True</property>
                 <property name="can_focus">False</property>
+                <property name="no_show_all">True</property>
                 <property name="halign">end</property>
-                <property name="pixel_size">30</property>
-                <property name="icon_name">info</property>
-                <property name="icon_size">2</property>
-                <style>
-                  <class name="info"/>
-                </style>
+                <property name="valign">start</property>
+                <child>
+                  <object class="GtkImage" id="LPESelectorEffectFavTop">
+                    <property name="name">LPESelectorEffectFavTop</property>
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="halign">end</property>
+                    <property name="valign">start</property>
+                    <property name="pixel_size">30</property>
+                    <property name="icon_name">draw-star</property>
+                    <property name="icon_size">2</property>
+                    <style>
+                      <class name="fab"/>
+                    </style>
+                  </object>
+                </child>
               </object>
+              <packing>
+                <property name="index">2</property>
+              </packing>
             </child>
           </object>
           <packing>
             <property name="expand">False</property>
-            <property name="fill">False</property>
+            <property name="fill">True</property>
             <property name="position">0</property>
-            <property name="non_homogeneous">True</property>
           </packing>
         </child>
         <child>
-          <object class="GtkEventBox" id="LPESelectorEffectFavLauncher">
+          <object class="GtkLabel" id="LPEName">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <child>
-              <object class="GtkImage">
-                <property name="can_focus">False</property>
-                <property name="halign">end</property>
-                <property name="pixel_size">30</property>
-                <property name="icon_name">draw-star-outline</property>
-                <property name="icon_size">2</property>
-                <style>
-                  <class name="fab"/>
-                </style>
-              </object>
-            </child>
+            <property name="label" translatable="yes">LPEName</property>
+            <property name="justify">center</property>
+            <property name="ellipsize">end</property>
+            <property name="width_chars">14</property>
+            <style>
+              <class name="lpename"/>
+            </style>
           </object>
           <packing>
-            <property name="expand">True</property>
-            <property name="fill">True</property>
+            <property name="expand">False</property>
+            <property name="fill">False</property>
             <property name="position">1</property>
-            <property name="non_homogeneous">True</property>
           </packing>
         </child>
         <child>
-          <object class="GtkImage">
+          <object class="GtkLabel" id="LPEDescription">
+            <property name="width_request">200</property>
             <property name="can_focus">False</property>
-            <property name="halign">end</property>
-            <property name="pixel_size">30</property>
-            <property name="icon_name">on</property>
-            <property name="icon_size">2</property>
-            <style>
-              <class name="apply"/>
-            </style>
+            <property name="no_show_all">True</property>
+            <property name="label" translatable="yes">Description</property>
+            <property name="justify">center</property>
+            <property name="wrap">True</property>
+            <property name="max_width_chars">20</property>
           </object>
           <packing>
             <property name="expand">False</property>
             <property name="fill">False</property>
-            <property name="pack_type">end</property>
+            <property name="padding">10</property>
             <property name="position">2</property>
-            <property name="non_homogeneous">True</property>
           </packing>
         </child>
+        <child>
+          <object class="GtkCheckButton" id="LPEExperimental">
+            <property name="label" translatable="yes">Experimental</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">False</property>
+            <property name="no_show_all">True</property>
+            <property name="draw_indicator">True</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">3</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkButtonBox">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="halign">center</property>
+            <property name="valign">start</property>
+            <property name="baseline_position">top</property>
+            <property name="layout_style">center</property>
+            <child>
+              <object class="GtkEventBox" id="LPESelectorEffectEventInfo">
+                <property name="name">LPESelectorEffectEventInfo</property>
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="halign">end</property>
+                <property name="valign">start</property>
+                <property name="visible_window">False</property>
+                <child>
+                  <object class="GtkImage" id="LPESelectorEffectInfo">
+                    <property name="name">LPESelectorEffectInfo</property>
+                    <property name="can_focus">False</property>
+                    <property name="halign">end</property>
+                    <property name="valign">start</property>
+                    <property name="pixel_size">30</property>
+                    <property name="icon_name">infopop-outline</property>
+                    <property name="icon_size">2</property>
+                    <style>
+                      <class name="info"/>
+                    </style>
+                  </object>
+                </child>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="pack_type">end</property>
+                <property name="position">0</property>
+                <property name="non_homogeneous">True</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkEventBox" id="LPESelectorEffectEventFav">
+                <property name="name">LPESelectorEffectEventFav</property>
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="halign">center</property>
+                <property name="valign">start</property>
+                <property name="visible_window">False</property>
+                <child>
+                  <object class="GtkImage" id="LPESelectorEffectFav">
+                    <property name="name">LPESelectorEffectFav</property>
+                    <property name="can_focus">False</property>
+                    <property name="halign">center</property>
+                    <property name="valign">start</property>
+                    <property name="pixel_size">30</property>
+                    <property name="icon_name">draw-star-outline</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="pack_type">end</property>
+                <property name="position">1</property>
+                <property name="non_homogeneous">True</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkEventBox" id="LPESelectorEffectEventApply">
+                <property name="name">LPESelectorEffectEventApply</property>
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="halign">start</property>
+                <property name="valign">start</property>
+                <property name="visible_window">False</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="can_focus">False</property>
+                    <property name="halign">start</property>
+                    <property name="valign">start</property>
+                    <property name="pixel_size">30</property>
+                    <property name="icon_name">on</property>
+                    <property name="icon_size">2</property>
+                    <style>
+                      <class name="apply"/>
+                    </style>
+                  </object>
+                </child>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="pack_type">end</property>
+                <property name="position">2</property>
+                <property name="non_homogeneous">True</property>
+              </packing>
+            </child>
+          </object>
+          <packing>
+            <property name="expand">True</property>
+            <property name="fill">True</property>
+            <property name="position">4</property>
+          </packing>
+        </child>
+        <style>
+          <class name="lpeselectoreffect"/>
+        </style>
       </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">False</property>
-        <property name="pack_type">end</property>
-        <property name="position">3</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkCheckButton" id="LPEExperimental">
-        <property name="label" translatable="yes">Experimental</property>
-        <property name="can_focus">True</property>
-        <property name="receives_default">False</property>
-        <property name="no_show_all">True</property>
-        <property name="draw_indicator">True</property>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">True</property>
-        <property name="position">5</property>
-      </packing>
     </child>
-    <style>
-      <class name="lpeselectoreffect"/>
-    </style>
   </object>
 </interface>
diff --git a/share/ui/dialog-livepatheffect-add.ui b/share/ui/dialog-livepatheffect-add.ui
index 0fbdb6a6f..2a695c8cf 100644
--- a/share/ui/dialog-livepatheffect-add.ui
+++ b/share/ui/dialog-livepatheffect-add.ui
@@ -126,8 +126,8 @@
             </child>
             <child>
               <object class="GtkLabel" id="LPEInfo">
-                <property name="visible">True</property>
                 <property name="can_focus">False</property>
+                <property name="no_show_all">True</property>
                 <property name="label" translatable="yes">Message</property>
                 <property name="justify">center</property>
                 <property name="ellipsize">end</property>
@@ -160,9 +160,10 @@
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
                         <property name="no_show_all">True</property>
-                        <property name="column_spacing">10</property>
-                        <property name="row_spacing">10</property>
-                        <property name="min_children_per_line">4</property>
+                        <property name="column_spacing">2</property>
+                        <property name="row_spacing">2</property>
+                        <property name="min_children_per_line">3</property>
+                        <property name="max_children_per_line">20</property>
                       </object>
                     </child>
                   </object>
@@ -191,9 +192,8 @@
       <class name="colordefault"/>
     </style>
   </object>
-  <object class="GtkPopover" id="LPESelectorEffectInfo">
-    <property name="name">LPESelectorEffectInfo</property>
-    <property name="visible">True</property>
+  <object class="GtkPopover" id="LPESelectorEffectInfoPop">
+    <property name="name">LPESelectorEffectInfoPop</property>
     <property name="can_focus">False</property>
     <property name="no_show_all">True</property>
     <property name="valign">start</property>
diff --git a/share/ui/style.css b/share/ui/style.css
index 64779bd39..15d088da9 100644
--- a/share/ui/style.css
+++ b/share/ui/style.css
@@ -219,14 +219,14 @@ spinbutton undershoot {
     border-right-width:0;
 }
 
-#lpeflow GtkFlowBoxChild,
-#lpeflow flowboxchild{
-    border-width:0px;
-    border-radius:6px;
-    margin:10px;
-    margin-bottom:30px;
-    padding-bottom:10px;
-}
+    #lpeflow GtkFlowBoxChild,
+    #lpeflow flowboxchild{
+        border-width:0px;
+        border-radius:6px;
+        margin:10px;
+        margin-bottom:30px;
+        padding-bottom:10px;
+    }
 
 #lpeflow GtkFlowBoxChild.lpeactive,
 #lpeflow flowboxchild.lpeactive{
@@ -268,7 +268,7 @@ spinbutton undershoot {
     padding:20px;
 }
 
-#LPESelectorEffectInfo{
+#LPESelectorEffectInfoPop{
 padding:15px;
 }
 #LPESelectorEffectInfoName{