diff options
Diffstat (limited to 'src/frontend')
| -rw-r--r-- | src/frontend/tubo/components/navigation.cljs | 63 | ||||
| -rw-r--r-- | src/frontend/tubo/subs.cljs | 5 |
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))) |