diff --git a/resources/images/icons/arrow_down12@2x.png b/resources/images/icons/arrow_down12@2x.png new file mode 100644 index 0000000000..6f07ea9380 Binary files /dev/null and b/resources/images/icons/arrow_down12@2x.png differ diff --git a/resources/images/icons/arrow_down12@3x.png b/resources/images/icons/arrow_down12@3x.png new file mode 100644 index 0000000000..07fde45565 Binary files /dev/null and b/resources/images/icons/arrow_down12@3x.png differ diff --git a/resources/images/icons/arrow_up12@2x.png b/resources/images/icons/arrow_up12@2x.png new file mode 100644 index 0000000000..bcd1424186 Binary files /dev/null and b/resources/images/icons/arrow_up12@2x.png differ diff --git a/resources/images/icons/arrow_up12@3x.png b/resources/images/icons/arrow_up12@3x.png new file mode 100644 index 0000000000..fd2cdbf26f Binary files /dev/null and b/resources/images/icons/arrow_up12@3x.png differ diff --git a/resources/images/icons/jump_to12@2x.png b/resources/images/icons/jump_to12@2x.png new file mode 100644 index 0000000000..abe0d484cf Binary files /dev/null and b/resources/images/icons/jump_to12@2x.png differ diff --git a/resources/images/icons/jump_to12@3x.png b/resources/images/icons/jump_to12@3x.png new file mode 100644 index 0000000000..88db7bd390 Binary files /dev/null and b/resources/images/icons/jump_to12@3x.png differ diff --git a/resources/images/icons/mention12@2x.png b/resources/images/icons/mention12@2x.png new file mode 100644 index 0000000000..e50f1f9141 Binary files /dev/null and b/resources/images/icons/mention12@2x.png differ diff --git a/resources/images/icons/mention12@3x.png b/resources/images/icons/mention12@3x.png new file mode 100644 index 0000000000..e1cf40a0cd Binary files /dev/null and b/resources/images/icons/mention12@3x.png differ diff --git a/resources/images/icons/search12@2x.png b/resources/images/icons/search12@2x.png new file mode 100644 index 0000000000..f121ca0684 Binary files /dev/null and b/resources/images/icons/search12@2x.png differ diff --git a/resources/images/icons/search12@3x.png b/resources/images/icons/search12@3x.png new file mode 100644 index 0000000000..1e0db7ba58 Binary files /dev/null and b/resources/images/icons/search12@3x.png differ diff --git a/src/quo2/components/buttons/dynamic_button.cljs b/src/quo2/components/buttons/dynamic_button.cljs new file mode 100644 index 0000000000..141c652416 --- /dev/null +++ b/src/quo2/components/buttons/dynamic_button.cljs @@ -0,0 +1,103 @@ +(ns quo2.components.buttons.dynamic-button + (:require [quo.react-native :as rn] + [reagent.core :as reagent] + [status-im.i18n.i18n :as i18n] + [quo2.components.icon :as icon] + [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 pressed? + (colors/custom-color-by-theme customization-color 60 50) + (colors/custom-color-by-theme customization-color 50 60)) + (if pressed? + (colors/theme-colors colors/neutral-80-opa-80 colors/white-opa-80) + (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) + colors/white + (colors/theme-colors colors/white colors/neutral-100))) + +(defn- icon-view [type] + [icon/icon + (case type + :jump-to :main-icons2/jump-to + :mention :main-icons2/mention + :notification-down :main-icons2/arrow-down + :notification-up :main-icons2/arrow-up + :search-with-label :main-icons2/search + :search :main-icons2/search + :bottom :main-icons2/arrow-down) + {:size 12 + :color (get-icon-and-text-color type) + :container-style {:margin-top 6 + :margin-bottom 6 + :margin-left (case type + :jump-to 0 + :mention 8 + :notification-down 2 + :notification-up 2 + :search-with-label 8 + :search 6 + :bottom 6) + :margin-right (case type + :jump-to 8 + :mention 2 + :notification-down 8 + :notification-up 8 + :search-with-label 4 + :search 6 + :bottom 6)}}]) + +(defn dynamic-button + "[:dynamic-button opts] + opts + {:type :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:bottom + :on-press fn + :count mentions or notifications count + :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}}] + [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) + [icon-view type]) + (when (in? '(: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) + :margin-top 2.5 + :margin-bottom 3.5 + :margin-left (case type + :jump-to 8 + :mention 0 + :notification-down 8 + :notification-up 8 + :search-with-label 0) + :margin-right (case type + :jump-to 0 + :mention 8 + :notification-down 0 + :notification-up 0 + :search-with-label 8)}} + (case type + :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) + [icon-view type])]]))) diff --git a/src/quo2/screens/buttons/dynamic_button.cljs b/src/quo2/screens/buttons/dynamic_button.cljs new file mode 100644 index 0000000000..ae40c6bb51 --- /dev/null +++ b/src/quo2/screens/buttons/dynamic_button.cljs @@ -0,0 +1,45 @@ +(ns quo2.screens.buttons.dynamic-button + (:require [quo.react-native :as rn] + [reagent.core :as reagent] + [quo.previews.preview :as preview] + [quo2.foundations.colors :as colors] + [quo2.components.buttons.dynamic-button :as quo2])) + +(def descriptor [{:label "Type:" + :key :type + :type :select + :options [{:key :jump-to + :value "Jump To"} + {:key :mention + :value "Mention"} + {:key :notification-down + :value "Notification Down"} + {:key :notification-up + :value "Notification Up"} + {:key :search + :value "Search"} + {:key :search-with-label + :value "Search With Label"} + {:key :bottom + :value "Bottom"}]} + {:label "Count" + :key :count + :type :text}]) + +(defn cool-preview [] + (let [state (reagent/atom {:count 5 :type :jump-to})] + (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/dynamic-button @state]]]]))) + +(defn preview-dynamic-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}]]) diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index 700567abb2..0e38015753 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -13,6 +13,7 @@ [quo2.screens.avatars.user-avatar :as user-avatar] [quo2.screens.avatars.wallet-user-avatar :as wallet-user-avatar] [quo2.screens.buttons.button :as button] + [quo2.screens.buttons.dynamic-button :as dynamic-button] [quo2.screens.counter.counter :as counter] [quo2.screens.community.community-card-view :as community-card] [quo2.screens.dividers.divider-label :as divider-label] @@ -64,7 +65,10 @@ :component channel-avatar/preview-channel-avatar}] :buttons [{:name :button :insets {:top false} - :component button/preview-button}] + :component button/preview-button} + {:name :dynamic-button + :insets {:top false} + :component dynamic-button/preview-dynamic-button}] :community [{:name :community-cards :insets {:top false} :component community-card/preview-community-card}] diff --git a/translations/en.json b/translations/en.json index 3d7010e905..fb5b57c0eb 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1807,5 +1807,6 @@ "admin": "Admin", "replies": "Replies", "identity-verification": "Identity verification", - "membership": "Membership" + "membership": "Membership", + "jump-to": "Jump to" }