add sorting and favorites

3 files changed, 158 insertions, 34 deletions

diff --git a/share/ui/dialog-livepatheffect-add-effect.ui b/share/ui/dialog-livepatheffect-add-effect.ui
index 300f01be2..77a11b4b8 100644
--- a/share/ui/dialog-livepatheffect-add-effect.ui
+++ b/share/ui/dialog-livepatheffect-add-effect.ui
@@ -12,19 +12,53 @@
     <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>
+        <child>
+          <object class="GtkImage" id="LPEIcon">
+            <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">
+                <property name="visible">True</property>
+                <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">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="position">1</property>
+        <property name="fill">True</property>
+        <property name="position">0</property>
       </packing>
     </child>
     <child>
@@ -57,7 +91,7 @@
         <property name="expand">False</property>
         <property name="fill">False</property>
         <property name="padding">10</property>
-        <property name="position">2</property>
+        <property name="position">3</property>
       </packing>
     </child>
     <child>
@@ -91,20 +125,25 @@
           </packing>
         </child>
         <child>
-          <object class="GtkImage">
+          <object class="GtkEventBox" id="LPESelectorEffectFavLauncher">
+            <property name="visible">True</property>
             <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>
+            <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>
           </object>
           <packing>
-            <property name="expand">False</property>
-            <property name="fill">False</property>
-            <property name="pack_type">end</property>
+            <property name="expand">True</property>
+            <property name="fill">True</property>
             <property name="position">1</property>
             <property name="non_homogeneous">True</property>
           </packing>
@@ -136,6 +175,20 @@
         <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>
diff --git a/share/ui/dialog-livepatheffect-add.ui b/share/ui/dialog-livepatheffect-add.ui
index 62484731a..0fbdb6a6f 100644
--- a/share/ui/dialog-livepatheffect-add.ui
+++ b/share/ui/dialog-livepatheffect-add.ui
@@ -6,14 +6,18 @@
     <property name="name">LPEDialogSelector</property>
     <property name="height_request">500</property>
     <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="title" translatable="yes">Live Path Effect Selector</property>
+    <property name="can_focus">True</property>
+    <property name="has_focus">True</property>
+    <property name="can_default">True</property>
+    <property name="title" translatable="yes">Live Path Effects Selector</property>
     <property name="modal">True</property>
     <property name="window_position">center-on-parent</property>
     <property name="destroy_with_parent">True</property>
     <property name="type_hint">dialog</property>
+    <property name="skip_taskbar_hint">True</property>
     <property name="gravity">center</property>
-    <child>
+    <property name="has_resize_grip">True</property>
+    <child type="titlebar">
       <placeholder/>
     </child>
     <child internal-child="vbox">
@@ -51,16 +55,63 @@
                 <property name="can_focus">False</property>
                 <property name="search_mode_enabled">True</property>
                 <child>
-                  <object class="GtkSearchEntry" id="LPEFilter">
-                    <property name="width_request">400</property>
+                  <object class="GtkBox">
                     <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="primary_icon_name">edit-find-symbolic</property>
-                    <property name="primary_icon_activatable">False</property>
-                    <property name="primary_icon_sensitive">False</property>
-                    <style>
-                      <class name="iconymbolic"/>
-                    </style>
+                    <property name="can_focus">False</property>
+                    <child>
+                      <object class="GtkSearchEntry" id="LPEFilter">
+                        <property name="width_request">400</property>
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                        <property name="primary_icon_name">edit-find-symbolic</property>
+                        <property name="primary_icon_activatable">False</property>
+                        <property name="primary_icon_sensitive">False</property>
+                        <style>
+                          <class name="iconymbolic"/>
+                        </style>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">0</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkSeparator">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="padding">5</property>
+                        <property name="position">1</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkSwitch" id="LPEExperimentals">
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">2</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="margin_left">10</property>
+                        <property name="label" translatable="yes">Experimental effects</property>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">4</property>
+                      </packing>
+                    </child>
                   </object>
                 </child>
                 <style>
@@ -91,7 +142,7 @@
               </packing>
             </child>
             <child>
-              <object class="GtkScrolledWindow">
+              <object class="GtkScrolledWindow" id="LPEScrolled">
                 <property name="visible">True</property>
                 <property name="can_focus">True</property>
                 <property name="hscrollbar_policy">never</property>
diff --git a/share/ui/style.css b/share/ui/style.css
index 5534e1214..64779bd39 100644
--- a/share/ui/style.css
+++ b/share/ui/style.css
@@ -239,9 +239,29 @@ spinbutton undershoot {
     border-width:0;
 }
 
+#lpeflow GtkFlowBoxChild,
+#lpeflow flowboxchild{
+    border-width:0px;
+    border-radius:6px;
+    margin:10px;
+    padding:10px;
+    margin-bottom:30px;
+    padding-bottom:10px;
+}
+  
+#lpeflow GtkFlowBoxChild.lpeactive,
+#lpeflow flowboxchild.lpeactive{
+    margin-bottom:0px;
+    padding-bottom:10px;
+    outline:none;
+}
+.lpefav{
+    background-color: @theme_base_color;
+    padding-bottom:0px;
+}
 .lpename{
     font-size:22px;
-    margin-bottom:20px;
+    margin-bottom:5px;
 }
 .lpeinfo{
     font-size:16px;