feat: complete filter panel widget

Signed-off-by: tsukinaha <sakuovds@gmail.com>
tsukinaha · Dec 20, 2024 · 3ef90a7 · 3ef90a7
1 parent cfd3a87
commit 3ef90a7
Show file tree

Hide file tree

Showing 13 changed files with 95 additions and 19 deletions.
diff --git a/resources/icons/scalable/actions/minus-circle-outline-symbolic.svg b/resources/icons/scalable/actions/minus-circle-outline-symbolic.svg
diff --git a/resources/icons/scalable/actions/month-symbolic.svg b/resources/icons/scalable/actions/month-symbolic.svg
diff --git a/resources/icons/scalable/actions/sound-symbolic.svg b/resources/icons/scalable/actions/sound-symbolic.svg
diff --git a/resources/icons/scalable/actions/tag-outline-symbolic.svg b/resources/icons/scalable/actions/tag-outline-symbolic.svg
diff --git a/resources/resources.gresource.xml b/resources/resources.gresource.xml
@@ -24,6 +24,10 @@
     <file preprocess="xml-stripblanks" alias="chain-link-loose-symbolic.svg">icons/scalable/actions/chain-link-loose-symbolic.svg</file>
     <file preprocess="xml-stripblanks" alias="funnel-outline-symbolic.svg">icons/scalable/actions/funnel-outline-symbolic.svg</file>
     <file preprocess="xml-stripblanks" alias="cross-small-symbolic.svg">icons/scalable/actions/cross-small-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="sound-symbolic.svg">icons/scalable/actions/sound-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="tag-outline-symbolic.svg">icons/scalable/actions/tag-outline-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="month-symbolic.svg">icons/scalable/actions/month-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="minus-circle-outline-symbolic.svg">icons/scalable/actions/minus-circle-outline-symbolic.svg</file>
   </gresource>
   <gresource prefix="/moe/tsuna/tsukimi/">
     <file compressed="true">style.css</file>

diff --git a/resources/style.css b/resources/style.css
@@ -16,6 +16,18 @@ button.pill.small {
   padding: 1px 12px;
 }
 
+button.pill.no-padding-small {
+  font-size: 0.83333em;
+  border-radius: 99px;
+  margin: 0;
+  padding: 0px;
+}
+
+.circular.smaller {
+  min-height:28px;
+  min-width:28px;
+}
+
 .mediainfo {
   padding: 9px;
   border-radius: 15px;
@@ -283,6 +295,24 @@ checkbutton.theme-selector radio:checked {
   color: @theme_selected_fg_color;
 }
 
-.no-padding {
-	padding: 0px;
+.filter-label {
+	outline-style: solid;
+	outline-width: 2px;
+	border-radius: 99px;
+}
+
+.filter-label.color1 {
+  color: rgb(162, 184, 241);
+}
+
+.filter-label.color2 {
+  color: rgb(153, 199, 255);
+}
+
+.filter-label.color3 {
+  color: rgb(112, 177, 230);
+}
+
+.filter-label.color4 {
+  color: rgb(125, 210, 227);
 }
diff --git a/resources/ui/filter.ui b/resources/ui/filter.ui
@@ -75,21 +75,38 @@
                                             <child>
                                               <object class="FilterRow">
                                                 <property name="title" translatable="yes">Genres</property>
+                                                <property name="icon-name">sound-symbolic</property>
                                               </object>
                                             </child>
                                             <child>
                                               <object class="FilterRow">
                                                 <property name="title" translatable="yes">Tags</property>
+                                                <property name="icon-name">tag-outline-symbolic</property>
                                               </object>
                                             </child>
                                             <child>
                                               <object class="FilterRow">
                                                 <property name="title" translatable="yes">Years</property>
+                                                <property name="icon-name">month-symbolic</property>
                                               </object>
                                             </child>
                                             <child>
                                               <object class="FilterRow">
                                                 <property name="title" translatable="yes">Official Rating</property>
+                                                <property name="icon-name">minus-circle-outline-symbolic</property>
+                                              </object>
+                                            </child>
+                                          </object>
+                                        </child>
+                                        <child>
+                                          <object class="AdwPreferencesGroup">
+                                            <child>
+                                              <object class="AdwButtonRow" id="apply_button_row">
+                                                <property name="title" translatable="yes">Apply</property>
+                                                <property name="start-icon-name">emblem-ok-symbolic</property>
+                                                <style>
+                                                  <class name="suggested-action" />
+                                                </style>
                                               </object>
                                             </child>
                                           </object>

diff --git a/resources/ui/filter_label.ui b/resources/ui/filter_label.ui
@@ -1,12 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-  <template class="FilterLabel" parent="GtkButton">
+  <template class="FilterLabel" parent="AdwBin">
     <child>
       <object class="GtkBox">
         <property name="orientation">horizontal</property>
         <property name="spacing">5</property>
         <child>
-          <object class="GtkImage" id="image"/>
+          <object class="GtkImage" id="image">
+            <property name="margin-start">10</property>
+            <property name="icon-name" bind-source="FilterLabel" bind-property="icon-name" bind-flags="sync-create"/>
+          </object>
         </child>
         <child>
           <object class="GtkLabel">
@@ -27,8 +30,8 @@
       </object>
     </child>
     <style>
-      <class name="pill"/>
-      <class name="small"/>
+      <class name="filter-label"/>
+      <class name="no-padding-small"/>
     </style>
   </template>
 </interface>
diff --git a/resources/ui/filter_row.ui b/resources/ui/filter_row.ui
@@ -45,6 +45,7 @@
                 <property name="valign">center</property>
                 <style>
                   <class name="circular"/>
+                  <class name="smaller"/>
                 </style>
               </object>
             </child>
@@ -60,6 +61,8 @@
                 <property name="hexpand">True</property>
                 <property name="margin-bottom">5</property>
                 <property name="selection-mode">none</property>
+                <property name="column-spacing">5</property>
+                <property name="row-spacing">5</property>
               </object>
             </child>
           </object>

diff --git a/src/ui/widgets/filter_panel/dialog.rs b/src/ui/widgets/filter_panel/dialog.rs
@@ -23,6 +23,8 @@ mod imp {
         pub stack: TemplateChild<gtk::Stack>,
         #[template_child]
         pub toast_overlay: TemplateChild<adw::ToastOverlay>,
+        #[template_child]
+        pub apply_button_row: TemplateChild<adw::ButtonRow>,
     }
 
     #[glib::object_subclass]
@@ -78,4 +80,8 @@ impl FilterPanelDialog {
     pub fn add_toast(&self, toast: adw::Toast) {
         self.imp().toast_overlay.add_toast(toast);
     }
+
+    pub fn connect_applied<F: Fn(&adw::ButtonRow) + 'static>(&self, f: F) -> glib::SignalHandlerId {
+        self.imp().apply_button_row.connect_activated(f)
+    }
 }
diff --git a/src/ui/widgets/filter_panel/filter_label.rs b/src/ui/widgets/filter_panel/filter_label.rs
@@ -1,11 +1,7 @@
 use adw::subclass::prelude::*;
-use gst::prelude::CastNone;
 use gtk::{
     glib,
-    prelude::{
-        WidgetExt,
-        *,
-    },
+    prelude::*,
     template_callbacks,
     CompositeTemplate,
 };
@@ -23,13 +19,15 @@ mod imp {
     pub struct FilterLabel {
         #[property(get, set, nullable)]
         pub label: RefCell<Option<String>>,
+        #[property(get, set, nullable)]
+        pub icon_name: RefCell<Option<String>>,
     }
 
     #[glib::object_subclass]
     impl ObjectSubclass for FilterLabel {
         const NAME: &'static str = "FilterLabel";
         type Type = super::FilterLabel;
-        type ParentType = gtk::Button;
+        type ParentType = adw::Bin;
 
         fn class_init(klass: &mut Self::Class) {
             Self::bind_template(klass);
@@ -45,18 +43,19 @@ mod imp {
     impl ObjectImpl for FilterLabel {
         fn constructed(&self) {
             self.parent_constructed();
-            self.obj().add_css_class("no-padding");
+
+            self.obj().add_css_class(&format!("color{}", rand::random::<u32>() % 4 + 1));
         }
     }
 
     impl WidgetImpl for FilterLabel {}
 
-    impl ButtonImpl for FilterLabel {}
+    impl BinImpl for FilterLabel {}
 }
 
 glib::wrapper! {
     pub struct FilterLabel(ObjectSubclass<imp::FilterLabel>)
-        @extends gtk::Widget, gtk::ListBoxRow, adw::ActionRow, adw::PreferencesRow, @implements gtk::Actionable, gtk::Accessible;
+        @extends gtk::Widget, gtk::Button, @implements gtk::Actionable, gtk::Accessible;
 }
 
 impl Default for FilterLabel {
@@ -72,9 +71,10 @@ impl FilterLabel {
     }
 
     #[template_callback]
-    async fn on_delete_button_clicked(&self) {
+    fn on_delete_button_clicked(&self) {
         let Some(flowbox) = self
-            .ancestor(gtk::FlowBox::static_type())
+            .parent()
+            .and_then(|p| p.parent())
             .and_downcast::<gtk::FlowBox>()
         else {
             return;

diff --git a/src/ui/widgets/filter_panel/filter_row.rs b/src/ui/widgets/filter_panel/filter_row.rs
@@ -19,6 +19,8 @@ mod imp {
     pub struct FilterRow {
         #[property(get, set, nullable)]
         pub title: RefCell<Option<String>>,
+        #[property(get, set, nullable)]
+        pub icon_name: RefCell<Option<String>>,
         #[template_child]
         pub flowbox: TemplateChild<gtk::FlowBox>,
     }
@@ -61,8 +63,10 @@ impl FilterRow {
     }
 
     #[template_callback]
-    async fn on_add_button_clicked(&self) {
+    fn on_add_button_clicked(&self) {
         let label = super::FilterLabel::new();
+        label.set_label(Some("Test"));
+        label.set_icon_name(self.icon_name());
         self.imp().flowbox.append(&label);
     }
 }
diff --git a/src/ui/widgets/search.rs b/src/ui/widgets/search.rs
@@ -28,13 +28,14 @@ mod imp {
     use std::sync::atomic::Ordering;
 
     use glib::subclass::InitializingObject;
-    use gst::prelude::StaticTypeExt;
     use gtk::{
         glib,
         subclass::prelude::*,
         CompositeTemplate,
     };
 
+    use gtk::prelude::*;
+
     use crate::{
         ui::widgets::tuview_scrolled::TuViewScrolled,
         utils::spawn,