status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Renamed filter-tag/filter-tags to tag/tags and refactored token-tag tag to match figma naming (#14028)

This commit is contained in:
John Ngei 2022-10-05 15:22:36 +03:00 committed by GitHub
parent 2ed3b50663
commit 69c49a5557
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 143 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/quo2/components/community/community_view.cljs
View File

@ -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

80
src/quo2/components/tags/filter_tag.cljs
View File

@ -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]])))

117
src/quo2/components/tags/tag.cljs
View File

@ -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-container [size]
{:height (get-value-from-size size 32 24)
(defn tag-resources [size type resource icon-color label text-color labelled]
[rn/view {:style (merge {:flex-direction :row
:align-items :center
:flex-direction :row
:border-radius 20})
: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 "[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]]))
(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]])))

6
src/quo2/components/tags/filter_tags.cljs → src/quo2/components/tags/tags.cljs
View File

@ -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

44
src/quo2/components/tags/token_tag.cljs
View File

@ -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

6
src/quo2/screens/main.cljs
View File

@ -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}

2
src/quo2/screens/tags/permission_tag.cljs
View File

@ -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

10
src/quo2/screens/tags/filter_tags.cljs → src/quo2/screens/tags/tags.cljs
View File

@ -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
[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 []
(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

15
src/status_im/ui/screens/communities/communities_list_redesign.cljs
View File

@ -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
[tags/tags {:data filters
:labelled true
:type :emoji
:icon-color (quo2.colors/theme-colors
quo2.colors/neutral-50
quo2.colors/neutral-40)}]]]))
quo2.colors/neutral-40)}]]))
(defn communities-list []
(let [multiaccount (<sub [:multiaccount])