From 69c49a5557b77a4e59af80ec7db1f05ba1d8421a Mon Sep 17 00:00:00 2001 From: John Ngei Date: Wed, 5 Oct 2022 15:22:36 +0300 Subject: [PATCH] Renamed filter-tag/filter-tags to tag/tags and refactored token-tag tag to match figma naming (#14028) --- .../components/community/community_view.cljs | 4 +- src/quo2/components/tags/filter_tag.cljs | 80 ------------ src/quo2/components/tags/tag.cljs | 119 +++++++++++------- .../tags/{filter_tags.cljs => tags.cljs} | 6 +- src/quo2/components/tags/token_tag.cljs | 44 +++++++ src/quo2/screens/main.cljs | 6 +- src/quo2/screens/tags/permission_tag.cljs | 2 +- .../tags/{filter_tags.cljs => tags.cljs} | 18 +-- .../communities_list_redesign.cljs | 23 ++-- 9 files changed, 143 insertions(+), 159 deletions(-) delete mode 100644 src/quo2/components/tags/filter_tag.cljs rename src/quo2/components/tags/{filter_tags.cljs => tags.cljs} (89%) rename src/quo2/screens/tags/{filter_tags.cljs => tags.cljs} (84%) diff --git a/src/quo2/components/community/community_view.cljs b/src/quo2/components/community/community_view.cljs index 1adc29475b..abe58b01b4 100644 --- a/src/quo2/components/community/community_view.cljs +++ b/src/quo2/components/community/community_view.cljs @@ -4,7 +4,7 @@ [quo2.components.icon :as icons] [quo2.foundations.colors :as colors] [quo2.components.tags.permission-tag :as permission] - [quo2.components.tags.filter-tag :as filter-tag] + [quo2.components.tags.tag :as tag] [status-im.ui.components.react :as react] [status-im.utils.money :as money] [status-im.i18n.i18n :as i18n] @@ -49,7 +49,7 @@ (for [{:keys [id tag-label resource]} tags] ^{:key id} [react/view {:margin-right 8} - [filter-tag/filter-tag + [tag/tag {:id id :size 24 :label tag-label diff --git a/src/quo2/components/tags/filter_tag.cljs b/src/quo2/components/tags/filter_tag.cljs deleted file mode 100644 index 961c564b9f..0000000000 --- a/src/quo2/components/tags/filter_tag.cljs +++ /dev/null @@ -1,80 +0,0 @@ -(ns quo2.components.tags.filter-tag - (:require [quo2.foundations.colors :as colors] - [quo.theme :as theme] - [quo.react-native :as rn] - [quo2.components.icon :as icons] - [quo2.components.markdown.text :as text] - [quo2.components.tags.base-tag :as base-tag])) - -(def themes {:light {:default {:border-color colors/neutral-20 - :blurred-border-color colors/neutral-80-opa-5 - :text-color {:style {:color colors/neutral-100}}} - :active {:border-color colors/neutral-30 - :blurred-border-color colors/neutral-80-opa-10 - :text-color {:style {:color colors/neutral-100}}} - :disabled {:border-color colors/neutral-20 - :blurred-border-color colors/neutral-80-opa-5 - :text-color {:style {:color colors/neutral-100}}}} - :dark {:default {:border-color colors/neutral-70 - :blurred-border-color colors/white-opa-10 - :text-color {:style {:color colors/white}}} - :active {:border-color colors/neutral-60 - :blurred-border-color colors/white-opa-20 - :text-color {:style {:color colors/white}}} - :disabled {:border-color colors/neutral-70 - :blurred-border-color colors/white-opa-10 - :text-color {:style {:color colors/white}}}}}) - -(defn tag-resources [size type resource icon-color label text-color labelled] - [rn/view {:style (merge {:flex-direction :row - :align-items :center - :justify-content :center} - (when label - {:padding-horizontal (case size 32 12 24 8)}))} - (when (= type :icon) - [icons/icon resource {:container-style (when label - {:margin-right 4}) - :resize-mode :center - :size (case size - 32 20 - 24 12) - :color icon-color}]) - (when (= type :emoji) - [rn/image {:source resource - :style (merge (case size - 32 {:height 20 - :width 20} - 24 {:height 12 - :width 12}) - (when label - {:margin-right 4}))}]) - (when labelled - [text/text (merge {:size (case size - 32 :paragraph-1 - 24 :paragraph-2 - 20 :label nil) - :weight :medium - :number-of-lines 1} - text-color) - label])]) - -(defn filter-tag - [_ _] - (fn [{:keys [id on-press disabled size resource active accessibility-label - label type labelled blurred icon-color] :or {size 32}}] - (let [state (cond disabled :disabled active :active :else :default) - {:keys [border-color blurred-border-color text-color]} - (get-in themes [(theme/get-theme) state])] - [base-tag/base-tag {:id id - :size size - :border-width 1 - :border-color (if blurred - blurred-border-color - border-color) - :on-press on-press - :accessibility-label accessibility-label - :disabled disabled - :type type - :label label} - [tag-resources size type resource icon-color label text-color labelled]]))) - diff --git a/src/quo2/components/tags/tag.cljs b/src/quo2/components/tags/tag.cljs index d59c54cd36..25a3ae9835 100644 --- a/src/quo2/components/tags/tag.cljs +++ b/src/quo2/components/tags/tag.cljs @@ -1,51 +1,80 @@ (ns quo2.components.tags.tag - (:require [quo.react-native :as rn] - [quo2.foundations.colors :as colors] + (:require [quo2.foundations.colors :as colors] [quo.theme :as theme] - [quo2.components.markdown.text :as text])) + [quo.react-native :as rn] + [quo2.components.icon :as icons] + [quo2.components.markdown.text :as text] + [quo2.components.tags.base-tag :as base-tag])) -(def themes {:light {:background-color colors/neutral-20} - :dark {:background-color colors/neutral-80}}) +(def themes {:light {:default {:border-color colors/neutral-20 + :blurred-border-color colors/neutral-80-opa-5 + :text-color {:style {:color colors/neutral-100}}} + :active {:border-color colors/neutral-30 + :blurred-border-color colors/neutral-80-opa-10 + :text-color {:style {:color colors/neutral-100}}} + :disabled {:border-color colors/neutral-20 + :blurred-border-color colors/neutral-80-opa-5 + :text-color {:style {:color colors/neutral-100}}}} + :dark {:default {:border-color colors/neutral-70 + :blurred-border-color colors/white-opa-10 + :text-color {:style {:color colors/white}}} + :active {:border-color colors/neutral-60 + :blurred-border-color colors/white-opa-20 + :text-color {:style {:color colors/white}}} + :disabled {:border-color colors/neutral-70 + :blurred-border-color colors/white-opa-10 + :text-color {:style {:color colors/white}}}}}) -(defn get-value-from-size [size big-option small-option] - (if (= size :big) big-option small-option)) +(defn tag-resources [size type resource icon-color label text-color labelled] + [rn/view {:style (merge {:flex-direction :row + :align-items :center + :justify-content :center} + (when label + {:padding-horizontal (case size 32 12 24 8)}))} + (when (= type :icon) + [icons/icon resource {:container-style (when label + {:margin-right 4}) + :resize-mode :center + :size (case size + 32 20 + 24 12) + :color icon-color}]) + (when (= type :emoji) + [rn/image {:source resource + :style (merge (case size + 32 {:height 20 + :width 20} + 24 {:height 12 + :width 12}) + (when label + {:margin-right 4}))}]) + (when labelled + [text/text (merge {:size (case size + 32 :paragraph-1 + 24 :paragraph-2 + 20 :label nil) + :weight :medium + :number-of-lines 1} + text-color) + label])]) -(defn tag-container [size] - {:height (get-value-from-size size 32 24) - :align-items :center - :flex-direction :row - :border-radius 20}) - -(defn tag "[tag opts \"label\"]] - opts - { - :size :small/:big - :token-img-src :token-img-src - :token-img-style {} - :border-color :color - :overlay child-elements - }" +(defn tag [_ _] - (fn [{:keys [size token-img-src token-img-style border-color overlay] - :or {size :small}} label] - [rn/view - {:style (when border-color - {:border-color border-color - :border-radius 20 - :border-width 1})} - [rn/view - {:style (merge (tag-container size) (get themes (theme/get-theme)))} - [rn/image - {:source token-img-src - :style (merge - {:height (get-value-from-size size 28 20) - :width (get-value-from-size size 28 20) - :margin-left 2 - :margin-right (get-value-from-size size 8 6)} token-img-style)}] - [text/text - {:weight :medium - :number-of-lines 1 - :style - {:margin-right (get-value-from-size size 12 11)} - :size (get-value-from-size size :paragraph-2 :label)} label] - overlay]])) \ No newline at end of file + (fn [{:keys [id on-press disabled size resource active accessibility-label + label type labelled blurred icon-color] :or {size 32}}] + (let [state (cond disabled :disabled active :active :else :default) + {:keys [border-color blurred-border-color text-color]} + (get-in themes [(theme/get-theme) state])] + [base-tag/base-tag {:id id + :size size + :border-width 1 + :border-color (if blurred + blurred-border-color + border-color) + :on-press on-press + :accessibility-label accessibility-label + :disabled disabled + :type type + :label label} + [tag-resources size type resource icon-color label text-color labelled]]))) + diff --git a/src/quo2/components/tags/filter_tags.cljs b/src/quo2/components/tags/tags.cljs similarity index 89% rename from src/quo2/components/tags/filter_tags.cljs rename to src/quo2/components/tags/tags.cljs index 8f886f0c85..f81e1ea3a7 100644 --- a/src/quo2/components/tags/filter_tags.cljs +++ b/src/quo2/components/tags/tags.cljs @@ -1,7 +1,7 @@ -(ns quo2.components.tags.filter-tags +(ns quo2.components.tags.tags (:require [reagent.core :as reagent] [quo.react-native :as rn] - [quo2.components.tags.filter-tag :as tag])) + [quo2.components.tags.tag :as tag])) (defn tags [{:keys [default-active on-change]}] (let [active-tab-id (reagent/atom default-active)] @@ -11,7 +11,7 @@ (for [{:keys [tag-label id resource]} data] ^{:key id} [rn/view {:margin-right 8} - [tag/filter-tag + [tag/tag (merge {:id id :size size :type type diff --git a/src/quo2/components/tags/token_tag.cljs b/src/quo2/components/tags/token_tag.cljs index f6911c6cba..57d4409ba4 100644 --- a/src/quo2/components/tags/token_tag.cljs +++ b/src/quo2/components/tags/token_tag.cljs @@ -2,9 +2,13 @@ (:require [quo2.foundations.colors :as colors] [quo.react-native :as rn] [quo.theme :as theme] + [quo2.components.markdown.text :as text] [status-im.ui.components.icons.icons :as icons] [quo2.components.tags.tag :as tag])) +(def themes {:light {:background-color colors/neutral-20} + :dark {:background-color colors/neutral-80}}) + (defn get-value-from-size [size big-option small-option] (if (= size :big) big-option small-option)) @@ -16,6 +20,46 @@ :border-radius 20 :margin-left 2}) +(defn tag-container [size] + {:height (get-value-from-size size 32 24) + :align-items :center + :flex-direction :row + :border-radius 20}) + +(defn tag "[tag opts \"label\"]] + opts + { + :size :small/:big + :token-img-src :token-img-src + :token-img-style {} + :border-color :color + :overlay child-elements + }" + [_ _] + (fn [{:keys [size token-img-src token-img-style border-color overlay] + :or {size :small}} label] + [rn/view + {:style (when border-color + {:border-color border-color + :border-radius 20 + :border-width 1})} + [rn/view + {:style (merge (tag-container size) (get themes (theme/get-theme)))} + [rn/image + {:source token-img-src + :style (merge + {:height (get-value-from-size size 28 20) + :width (get-value-from-size size 28 20) + :margin-left 2 + :margin-right (get-value-from-size size 8 6)} token-img-style)}] + [text/text + {:weight :medium + :number-of-lines 1 + :style + {:margin-right (get-value-from-size size 12 11)} + :size (get-value-from-size size :paragraph-2 :label)} label] + overlay]])) + (defn token-tag "[token-tag opts] opts diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index f9537fcd22..586c6eb318 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -36,7 +36,7 @@ [quo2.screens.tabs.segmented-tab :as segmented] [quo2.screens.tabs.tabs :as tabs] [quo2.screens.tags.context-tags :as context-tags] - [quo2.screens.tags.filter-tags :as filter-tags] + [quo2.screens.tags.tags :as tags] [quo2.screens.tags.permission-tag :as permission-tag] [quo2.screens.tags.status-tags :as status-tags] [quo2.screens.tags.token-tag :as token-tag] @@ -130,9 +130,9 @@ :tags [{:name :context-tags :insets {:top false} :component context-tags/preview-context-tags} - {:name :filter-tags + {:name :tags :insets {:top false} - :component filter-tags/preview-filter-tags} + :component tags/preview-tags} {:name :permission-tag :insets {:top false} :component permission-tag/preview-permission-tag} diff --git a/src/quo2/screens/tags/permission_tag.cljs b/src/quo2/screens/tags/permission_tag.cljs index 972bdddaf1..fcc90a24c2 100644 --- a/src/quo2/screens/tags/permission_tag.cljs +++ b/src/quo2/screens/tags/permission_tag.cljs @@ -160,7 +160,7 @@ (defn preview-permission-tag [] [rn/view {:background-color (colors/theme-colors colors/white - colors/neutral-80) + colors/neutral-90) :flex 1} [rn/flat-list {:flex 1 :keyboardShouldPersistTaps :always diff --git a/src/quo2/screens/tags/filter_tags.cljs b/src/quo2/screens/tags/tags.cljs similarity index 84% rename from src/quo2/screens/tags/filter_tags.cljs rename to src/quo2/screens/tags/tags.cljs index d6283f812a..43ad167037 100644 --- a/src/quo2/screens/tags/filter_tags.cljs +++ b/src/quo2/screens/tags/tags.cljs @@ -1,9 +1,9 @@ -(ns quo2.screens.tags.filter-tags +(ns quo2.screens.tags.tags (:require [quo.react-native :as rn] [quo.previews.preview :as preview] [status-im.ui.components.react :as react] [quo2.foundations.colors :as colors] - [quo2.components.tags.filter-tags :as quo2.tags] + [quo2.components.tags.tags :as tags] [status-im.react-native.resources :as resources] [reagent.core :as reagent])) @@ -70,15 +70,15 @@ :align-items :center :position :absolute :padding-horizontal 10} - [quo2.tags/tags (merge @state - {:default-active 1 - :data [{:id 1 :tag-label "Music" :resource (resources/get-image :music)} - {:id 2 :tag-label "Lifestyle" :resource (resources/get-image :lifestyle)} - {:id 3 :tag-label "Podcasts" :resource (resources/get-image :podcasts)}]})]]]]]))) -(defn preview-filter-tags [] + [tags/tags (merge @state + {:default-active 1 + :data [{:id 1 :tag-label "Music" :resource (resources/get-image :music)} + {:id 2 :tag-label "Lifestyle" :resource (resources/get-image :lifestyle)} + {:id 3 :tag-label "Podcasts" :resource (resources/get-image :podcasts)}]})]]]]]))) +(defn preview-tags [] [rn/view {:flex 1 :background-color (colors/theme-colors - colors/neutral-5 + colors/white colors/neutral-90)} [rn/flat-list {:flex 1 :keyboardShouldPersistTaps :always diff --git a/src/status_im/ui/screens/communities/communities_list_redesign.cljs b/src/status_im/ui/screens/communities/communities_list_redesign.cljs index abb85e095b..9700a2e3dd 100644 --- a/src/status_im/ui/screens/communities/communities_list_redesign.cljs +++ b/src/status_im/ui/screens/communities/communities_list_redesign.cljs @@ -8,8 +8,7 @@ [quo2.components.markdown.text :as quo2.text] [quo2.components.buttons.button :as quo2.button] [quo2.components.counter.counter :as quo2.counter] - [quo2.components.tags.filter-tags :as filter-tags] - [quo2.components.tags.filter-tag :as filter-tag] + [quo2.components.tags.tags :as tags] [quo2.foundations.colors :as quo2.colors] [quo.components.safe-area :as safe-area] [quo2.components.tabs.tabs :as quo2.tabs] @@ -188,20 +187,12 @@ :padding-top 4 :padding-bottom 12 :padding-horizontal 20} - [react/view {:flex-direction :row} - [react/view {:margin-right 8} - [filter-tag/filter-tag {:resource :main-icons2/search - :labelled false - :type :icon - :icon-color (quo2.colors/theme-colors - quo2.colors/neutral-100 - quo2.colors/white)}]] - [filter-tags/tags {:data filters - :labelled true - :type :emoji - :icon-color (quo2.colors/theme-colors - quo2.colors/neutral-50 - quo2.colors/neutral-40)}]]])) + [tags/tags {:data filters + :labelled true + :type :emoji + :icon-color (quo2.colors/theme-colors + quo2.colors/neutral-50 + quo2.colors/neutral-40)}]])) (defn communities-list [] (let [multiaccount (