From 73684780339d2728310587ecf33d7a9566383ddc Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Thu, 13 Oct 2022 16:59:34 +0530 Subject: [PATCH] Implementation of Floating Shell Button (#14154) --- .../components/buttons/dynamic_button.cljs | 30 ++++------ .../navigation/floating_shell_button.cljs | 35 +++++++++++ src/quo2/screens/buttons/dynamic_button.cljs | 2 +- src/quo2/screens/main.cljs | 6 +- .../navigation/floating_shell_button.cljs | 59 +++++++++++++++++++ 5 files changed, 113 insertions(+), 19 deletions(-) create mode 100644 src/quo2/components/navigation/floating_shell_button.cljs create mode 100644 src/quo2/screens/navigation/floating_shell_button.cljs diff --git a/src/quo2/components/buttons/dynamic_button.cljs b/src/quo2/components/buttons/dynamic_button.cljs index 141c652416..cf02f32c71 100644 --- a/src/quo2/components/buttons/dynamic_button.cljs +++ b/src/quo2/components/buttons/dynamic_button.cljs @@ -6,13 +6,8 @@ [quo2.foundations.colors :as colors] [quo2.components.markdown.text :as text])) -(defn- in? - "true if collection contains element" - [collection element] - (some #(= element %) collection)) - (defn- get-button-color [type pressed? customization-color] - (if (in? '(:jump-to :mention) type) + (if (#{:jump-to :mention} type) (if pressed? (colors/custom-color-by-theme customization-color 60 50) (colors/custom-color-by-theme customization-color 50 60)) @@ -21,7 +16,7 @@ (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70)))) (defn- get-icon-and-text-color [type] - (if (in? '(:jump-to :mention) type) + (if (#{:jump-to :mention} type) colors/white (colors/theme-colors colors/white colors/neutral-100))) @@ -57,7 +52,7 @@ :bottom 6)}}]) (defn dynamic-button - "[:dynamic-button opts] + "[dynamic-button opts] opts {:type :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:bottom :on-press fn @@ -65,19 +60,20 @@ :customization-color customize jump-to and mention button color}" [_] (let [pressed? (reagent/atom false)] - (fn [{:keys [type on-press count customization-color] - :or {customization-color :primary}}] + (fn [{:keys [type on-press count customization-color style]}] [rn/touchable-without-feedback {:on-press-in #(reset! pressed? true) :on-press-out #(reset! pressed? false) :on-press on-press} - [rn/view {:style {:flex-direction :row - :height 24 - :border-radius 12 - :background-color (get-button-color type @pressed? customization-color)}} - (when (in? '(:mention :search :search-with-label :bottom) type) + [rn/view {:style (merge + {:flex-direction :row + :height 24 + :border-radius 12 + :background-color (get-button-color type @pressed? (or customization-color :primary))} + style)} + (when (#{:mention :search :search-with-label :bottom} type) [icon-view type]) - (when (in? '(:jump-to :mention :notification-down :notification-up :search-with-label) type) + (when (#{:jump-to :mention :notification-down :notification-up :search-with-label} type) [text/text {:weight :medium :size :paragraph-2 :style {:color (get-icon-and-text-color type) @@ -99,5 +95,5 @@ :jump-to (i18n/label :t/jump-to) :search-with-label (i18n/label :t/back) (:mention :notification-down :notification-up) (str count))]) - (when (in? '(:jump-to :notification-down :notification-up) type) + (when (#{:jump-to :notification-down :notification-up} type) [icon-view type])]]))) diff --git a/src/quo2/components/navigation/floating_shell_button.cljs b/src/quo2/components/navigation/floating_shell_button.cljs new file mode 100644 index 0000000000..ca272cbf89 --- /dev/null +++ b/src/quo2/components/navigation/floating_shell_button.cljs @@ -0,0 +1,35 @@ +(ns quo2.components.navigation.floating-shell-button + (:require [quo.react-native :as rn] + [quo2.components.buttons.dynamic-button :as dynamic-button])) + +(defn dynamic-button-view [type dynamic-buttons style] + (when-let [{:keys [count on-press customization-color]} (get dynamic-buttons type)] + [dynamic-button/dynamic-button + {:type type + :on-press on-press + :count count + :style style + :customization-color customization-color}])) + +(defn floating-shell-button + "[floating-shell-button dynamic-buttons style] + dynamic-buttons + {:button-type {:on-press on-press :count count}}" + [dynamic-buttons style] + [rn/view {:style (merge {:flex-direction :row + :margin-horizontal 12} style)} + ;; Left Section + [rn/view {:style {:flex 1}} + [dynamic-button-view :search dynamic-buttons {:position :absolute + :right 8}]] + ;; Mid Section (jump-to) + [dynamic-button-view :jump-to dynamic-buttons nil] + ;; Right Section + [rn/view {:style {:flex 1}} + [rn/view {:style {:position :absolute + :flex-direction :row + :right 0}} + [dynamic-button-view :mention dynamic-buttons {:margin-left 8}] + [dynamic-button-view :notification-down dynamic-buttons {:margin-left 8}] + [dynamic-button-view :notification-up dynamic-buttons {:margin-left 8}] + [dynamic-button-view :bottom dynamic-buttons {:margin-left 8}]]]]) diff --git a/src/quo2/screens/buttons/dynamic_button.cljs b/src/quo2/screens/buttons/dynamic_button.cljs index ae40c6bb51..3c93247229 100644 --- a/src/quo2/screens/buttons/dynamic_button.cljs +++ b/src/quo2/screens/buttons/dynamic_button.cljs @@ -27,7 +27,7 @@ :type :text}]) (defn cool-preview [] - (let [state (reagent/atom {:count 5 :type :jump-to})] + (let [state (reagent/atom {:count "5" :type :jump-to})] (fn [] [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/view {:padding-bottom 150} diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index ebdfea07b2..0ba10aec71 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -34,6 +34,7 @@ [quo2.screens.switcher.switcher-cards :as switcher-cards] [quo2.screens.navigation.top-nav :as top-nav] [quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab] + [quo2.screens.navigation.floating-shell-button :as floating-shell-button] [quo2.screens.tabs.account-selector :as account-selector] [quo2.screens.tabs.segmented-tab :as segmented] [quo2.screens.tabs.tabs :as tabs] @@ -114,7 +115,10 @@ :component top-nav/preview-top-nav} {:name :page-nav :insets {:top false} - :component page-nav/preview-page-nav}] + :component page-nav/preview-page-nav} + {:name :floating-shell-button + :insets {:top false} + :component floating-shell-button/preview-floating-shell-button}] :notifications [{:name :activity-logs :insets {:top false} :component activity-logs/preview-activity-logs}] diff --git a/src/quo2/screens/navigation/floating_shell_button.cljs b/src/quo2/screens/navigation/floating_shell_button.cljs new file mode 100644 index 0000000000..3b246d0af4 --- /dev/null +++ b/src/quo2/screens/navigation/floating_shell_button.cljs @@ -0,0 +1,59 @@ +(ns quo2.screens.navigation.floating-shell-button + (:require [quo.react-native :as rn] + [quo.previews.preview :as preview] + [reagent.core :as reagent] + [quo2.components.navigation.floating-shell-button :as quo2] + [quo2.foundations.colors :as colors])) + +(def descriptor [{:label "Show jump to?" + :key :show-jump-to? + :type :boolean} + {:label "Show search?" + :key :show-search? + :type :boolean} + {:label "Show mention?" + :key :show-mention? + :type :boolean} + {:label "Scroll Type" + :key :scroll-type + :type :select + :options [{:key :notification-up + :value "Notification Up"} + {:key :notification-down + :value "Notification Down"} + {:key :scroll-to-bottom + :value "Scroll To Bottom"}]}]) + +(defn mock-data [{:keys [show-jump-to? show-search? show-mention? scroll-type]}] + (cond-> {} + show-jump-to? + (assoc :jump-to {:on-press #()}) + show-search? + (assoc :search {:on-press #()}) + show-mention? + (assoc :mention {:on-press #() :count 6 :customization-color :turquoise}) + (= scroll-type :notification-up) + (assoc :notification-up {:on-press #() :count 8}) + (= scroll-type :notification-down) + (assoc :notification-down {:on-press #() :count 8}) + (= scroll-type :scroll-to-bottom) + (assoc :bottom {:on-press #()}))) + +(defn cool-preview [] + (let [state (reagent/atom {:show-jump-to? true + :scroll-type :notification-down})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [preview/customizer state descriptor] + [rn/view {:padding-vertical 60 + :align-items :center} + [quo2/floating-shell-button (mock-data @state)]]]]))) + +(defn preview-floating-shell-button [] + [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) + :flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]])