aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMiguel Ángel Moreno <mail@migalmoreno.com>2024-01-22 00:51:19 +0100
committerMiguel Ángel Moreno <mail@migalmoreno.com>2024-01-22 00:51:19 +0100
commitc244c191123a96295ea9ce544b9a4e7b3bdaa9dd (patch)
tree32d4f08ba8a40dee3c167f7dfb130685f604fbb0
parente2fb6eef42108743e33cd790db52b3e97cbe72ef (diff)
feat(frontend): improve search form ux
-rw-r--r--src/frontend/tubo/components/navigation.cljs63
-rw-r--r--src/frontend/tubo/subs.cljs5
2 files changed, 60 insertions, 8 deletions
diff --git a/src/frontend/tubo/components/navigation.cljs b/src/frontend/tubo/components/navigation.cljs
index 4934990..daa1bd5 100644
--- a/src/frontend/tubo/components/navigation.cljs
+++ b/src/frontend/tubo/components/navigation.cljs
@@ -1,12 +1,59 @@
(ns tubo.components.navigation
(:require
+ [reagent.core :as r]
[re-frame.core :as rf]
- [tubo.events :as events]))
+ [tubo.events :as events]
+ [tubo.routes :as routes]))
-(defn back-button [service-color]
- [:div.flex.items-center
- [:button.py-4.pl-2.sm:pl-0
- {:on-click #(rf/dispatch [::events/history-back])}
- [:i.fa-solid.fa-chevron-left
- {:style {:color service-color}}]
- [:span " Back"]]])
+(defn navigation-buttons [service-color]
+ [:div.flex.items-center.text-white.ml-4
+ [:button.mx-2.outline-none.focus:ring-transparent
+ {:on-click #(rf/dispatch [::events/history-go -1])}
+ [:i.fa-solid.fa-arrow-left]]
+ [:button.mx-2.outline-none.focus:ring-transparent
+ {:on-click #(rf/dispatch [::events/history-go 1])}
+ [:i.fa-solid.fa-arrow-right]]])
+
+(defn search-form []
+ (let [!query (r/atom "")
+ !input (r/atom nil)]
+ (fn []
+ (let [search-query @(rf/subscribe [:search-query])
+ show-search-form? @(rf/subscribe [:show-search-form])
+ service-id @(rf/subscribe [:service-id])]
+ [:form.relative.flex.items-center.text-white.ml-4
+ {:class (when-not show-search-form? "hidden")
+ :on-submit
+ (fn [e]
+ (.preventDefault e)
+ (when-not (empty? @!query)
+ (rf/dispatch [::events/navigate
+ {:name ::routes/search
+ :params {}
+ :query {:q search-query :serviceId service-id}}])))}
+ [:div.flex
+ [:button.mx-2
+ {:on-click #(rf/dispatch [::events/toggle-search-form])
+ :type "button"}
+ [:i.fa-solid.fa-arrow-left]]
+ [:input.bg-transparent.border-none.py-2.pr-6.mx-2.focus:ring-transparent.placeholder-white.sm:w-64.min-w-auto
+ {:type "text"
+ :ref #(do (reset! !input %)
+ (when %
+ (.focus %)))
+ :default-value @!query
+ :on-change #(let [input (.. % -target -value)]
+ (when-not (empty? input) (rf/dispatch [::events/change-search-query input]))
+ (reset! !query input))
+ :placeholder "Search"}]
+ [:button.mx-2
+ {:type "submit"}
+ [:i.fa-solid.fa-search]]
+ [:button.mx-2.text-xs.absolute.right-8.top-3
+ {:type "button"
+ :on-click #(when @!input
+ (set! (.-value @!input) "")
+ (reset! !query "")
+ (.focus @!input))
+ :class (when (empty? @!query) "invisible")}
+ [:i.fa-solid.fa-circle-xmark]]]]))))
diff --git a/src/frontend/tubo/subs.cljs b/src/frontend/tubo/subs.cljs
index 017697c..b046075 100644
--- a/src/frontend/tubo/subs.cljs
+++ b/src/frontend/tubo/subs.cljs
@@ -187,6 +187,11 @@
(:show-mobile-nav db)))
(rf/reg-sub
+ :show-search-form
+ (fn [db _]
+ (:show-search-form db)))
+
+(rf/reg-sub
:show-media-queue
(fn [db _]
(:show-media-queue db)))