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

replaced mocked community-tags and images with real data 

Co-authored-by: jo-mut <jo_ngei@Johns-MacBook-Air.local>
This commit is contained in:
John Ngei 2023-03-06 13:57:58 +03:00 committed by GitHub
parent 8454ce2e11
commit 7a9018ae11
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 102 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/quo2/components/community/community_card_view.cljs
View File

@ -5,8 +5,8 @@
[react-native.core :as rn]))
(defn community-card-view-item
[{:keys [name description locked images
status tokens cover tags width]} on-press]
[{:keys [name description locked images cover
status tokens tags width]} on-press]
[rn/touchable-without-feedback
{:accessibility-label :community-card-item
:on-press on-press}
@ -18,16 +18,16 @@
:on-press on-press}
[rn/view
{:flex 1}
[rn/view (style/community-cover-container 40)
[rn/view (style/community-cover-container 60)
[rn/image
{:source cover
:style
{:flex 1
:border-radius 20}}]]
{:flex 1
:border-top-right-radius 20
:border-top-left-radius 20}}]]
[rn/view (style/card-view-content-container 12)
[rn/view (style/card-view-chat-icon 48)
[icon/community-icon {:images images} 48]]
(when (= status :gated)
[rn/view (style/permission-tag-styles)
[community-view/permission-tag-container

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

@ -42,16 +42,15 @@
(defn community-tags
[tags]
[rn/view (style/community-tags-container)
(for [{:keys [id tag-label resource]} tags]
^{:key id}
(for [{:keys [name emoji]} tags]
^{:key name}
[rn/view {:margin-right 8}
[tag/tag
{:id id
:size 24
:label tag-label
{:size 24
:label name
:type :emoji
:labelled? true
:resource resource}]])])
:resource emoji}]])])
(defn community-title
[{:keys [title description size] :or {size :small}}]
@ -82,6 +81,5 @@
colors/neutral-80)
:locked? locked?
:tokens tokens
:size 24
:on-press on-press}])

20
src/quo2/components/community/style.cljs
View File

@ -57,14 +57,18 @@
(defn card-view-content-container
[padding-horizontal]
{:flex 1
:height 20
:padding-left padding-horizontal
:padding-right padding-horizontal
:border-radius 16
:background-color (colors/theme-colors
colors/white
colors/neutral-90)})
{:position :absolute
:top 40
:bottom 0
:left 0
:right 0
:height 20
:padding-horizontal padding-horizontal
:border-top-right-radius 16
:border-top-left-radius 16
:background-color (colors/theme-colors
colors/white
colors/neutral-90)})
(defn card-view-chat-icon
[icon-size]

19
src/quo2/components/tags/base_tag.cljs
View File

@ -2,7 +2,7 @@
(:require [react-native.core :as rn]))
(defn style-container
[size disabled border-color border-width background-color label type]
[size disabled border-color border-width background-color labelled? type]
(merge {:height size
:border-color border-color
:background-color background-color
@ -12,14 +12,23 @@
:justify-content :center}
(when disabled
{:opacity 0.3})
(when (and (or (= type :icon) (= type :emoji)) (not label))
(when (and (or (= type :icon) (= type :emoji)) (not labelled?))
{:width size})))
(defn base-tag
[_]
(fn [{:keys [id size disabled? border-color border-width background-color on-press
accessibility-label labelled? type]
:or {size 32}} children]
(fn
[{:keys [id
size
disabled?
border-color
border-width
background-color
on-press
accessibility-label
type
labelled?]
:or {size 32}} children]
[rn/touchable-without-feedback
(merge {:disabled disabled?
:accessibility-label accessibility-label}

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

@ -27,7 +27,7 @@
:text-color {:style {:color colors/white}}}}})
(defn tag-resources
[size type resource icon-color label text-color labelled]
[size type resource icon-color label text-color labelled?]
[rn/view
{:style (merge {:flex-direction :row
:align-items :center
@ -46,16 +46,14 @@
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
{:style {:margin-right 4}
:size (case size
32 :paragraph-1
24 :paragraph-2
nil)}
resource])
(when labelled?
[text/text
(merge {:size (case size
32 :paragraph-1
@ -70,6 +68,7 @@
(defn tag
"opts
{:type :icon/:emoji/:label
:label string
:size 32/24
:on-press fn
:blurred? true/false
@ -82,9 +81,21 @@
- `type` can be icon or emoji with or without a tag label
- `labelled` boolean: is true if tag has label else false"
[_ _]
(fn [{:keys [id on-press disabled? size resource active accessibility-label
label type labelled? blurred? icon-color override-theme]
:or {size 32}}]
(fn
[{:keys [id
on-press
disabled?
size
active
accessibility-label
label
resource
type
labelled?
blurred?
icon-color
override-theme]
:or {size 32}}]
(let [state (cond disabled? :disabled
active :active
:else :default)

13
src/quo2/components/tags/tags.cljs
View File

@ -138,7 +138,9 @@
:blurred? blurred?
:icon-color icon-color
:disabled? disabled?
:label label
:label (if labelled?
label
(when (= type :label) label))
:type type
:labelled? labelled?
:on-press (fn [id]
@ -150,17 +152,18 @@
:index index
:viewPosition 0.5}))
(when on-change
(on-change id)))}
label]])})])
(on-change id)))}]])})])
[rn/view {:style {:flex-direction :row}}
(for [{:keys [label id resource]} data]
(for [{:keys [id label resource]} data]
^{:key id}
[rn/view {:style {:margin-right 8}}
[tag/tag
(merge {:id id
:size size
:type type
:label (if labelled? label (when (= type :label) label))
:label (if labelled?
label
(when (= type :label) label))
:active (= id active-tab-id)
:disabled? disabled?
:blurred? blurred?

11
src/status_im2/common/scroll_page/view.cljs
View File

@ -31,7 +31,7 @@
height
name
page-nav
cover
logo
sticky-header
top-nav
title-colum
@ -65,11 +65,11 @@
:top 0
:left 0
:right 0}}
(when cover
(when logo
[reanimated/view
{:style (style/sticky-header-title opacity-animation)}
[rn/image
{:source cover
{:source logo
:style style/sticky-header-image}]
[quo/text
{:size :paragraph-1
@ -122,6 +122,7 @@
(let [scroll-height (reagent/atom negative-scroll-position-0)]
(fn
[{:keys [cover-image
logo
page-nav-right-section-buttons
name
on-scroll
@ -134,7 +135,7 @@
children]
[:<>
[:f> scroll-page-header @scroll-height height name page-nav-right-section-buttons
cover-image sticky-header top-nav title-colum navigate-back?]
logo sticky-header top-nav title-colum navigate-back?]
[rn/scroll-view
{:content-container-style (style/scroll-view-container
(diff-with-max-min @scroll-height 16 0))
@ -162,5 +163,5 @@
:border-radius (diff-with-max-min @scroll-height 16 0)
:background-color background-color}
(when cover-image
[:f> display-picture @scroll-height cover-image])
[:f> display-picture @scroll-height logo])
children])]])))

24
src/status_im2/contexts/communities/discover/style.cljs
View File

@ -2,9 +2,10 @@
(:require [react-native.platform :as platform]))
(def screen-title-container
{:height 56
:padding-vertical 12
:justify-content :center})
{:height 56
:padding-vertical 12
:justify-content :center
:margin-horizontal 20})
(def featured-communities-header
{:flex-direction :row
@ -12,6 +13,7 @@
:padding-top 8
:margin-bottom 8
:padding-right 20
:margin-left 20
:justify-content :space-between})
(def featured-communities-title-container
@ -21,7 +23,13 @@
(def featured-list-container
{:flex-direction :row
:overflow :hidden
:margin-bottom 24})
:margin-bottom 24
:margin-left 20
:padding-right 20})
(def other-communities-container
{:flex 1
:margin-horizontal 20})
(defn discover-communities-segments
[fixed?]
@ -30,8 +38,9 @@
:height 56
:background-color :transparent}
(when-not fixed?
{:margin-top 12
:margin-bottom 4})))
{:margin-top 12
:margin-horizontal 20
:margin-bottom 4})))
(defn discover-screen-container
[background-color]
@ -47,8 +56,7 @@
:justify-content :center})
(def render-communities-container
{:padding-horizontal 20
:margin-top 100})
{:margin-top 100})
(defn blur-tabs-header
[]

21
src/status_im2/contexts/communities/discover/view.cljs
View File

@ -18,26 +18,17 @@
{:data {:community-color "#0052FF"
:status :gated
:locked? true
:cover (resources/get-mock-image :community-cover)
:tokens [{:id 1
:group [{:id 1
:token-icon (resources/get-mock-image :status-logo)}]}]
:tags [{:id 1
:tag-label (i18n/label :t/music)
:resource (resources/get-image :music)}
{:id 2
:tag-label (i18n/label :t/lifestyle)
:resource (resources/get-image :lifestyle)}
{:id 3
:tag-label (i18n/label :t/podcasts)
:resource (resources/get-image :podcasts)}]}})
:token-icon (resources/get-mock-image :status-logo)}]}]}})
(defn render-fn
[community-item _ _ {:keys [width view-type]}]
(let [item (merge community-item
(get mock-community-item-data :data))]
(let [item (merge community-item
(get mock-community-item-data :data))
cover {:uri (get-in (:images item) [:banner :uri])}]
(if (= view-type :card-view)
[quo/community-card-view-item (assoc item :width width)
[quo/community-card-view-item (assoc item :width width :cover cover)
#(rf/dispatch [:navigate-to :community-overview (:id item)])]
[quo/communities-list-view-item
{:on-press (fn []
@ -134,7 +125,7 @@
(defn other-communities-list
[{:keys [communities communities-ids view-type]}]
[rn/view {:flex 1}
[rn/view {:style style/other-communities-container}
(map-indexed
(fn [inner-index item]
(let [community-id (when communities-ids item)

4
src/status_im2/contexts/communities/overview/view.cljs
View File

@ -288,10 +288,12 @@
(let [categories-heights (reagent/atom [])
first-channel-height (reagent/atom 0)
scroll-height (reagent/atom 0)
cover {:uri (get-in images [:large :uri])}]
cover {:uri (get-in images [:banner :uri])}
logo {:uri (get-in images [:thumbnail :uri])}]
(fn [community]
[scroll-page/scroll-page
{:cover-image cover
:logo logo
:page-nav-right-section-buttons (page-nav-right-section-buttons id)
:name name
:on-scroll #(reset! scroll-height %)

4
src/status_im2/contexts/quo_preview/tags/tags.cljs
View File

@ -92,9 +92,7 @@
@state
{:default-active 1
:component :tags
:labelled? (if (= :label type) true (:labelled? @state))
:resource (when (= type :icon)
:main-icons2/placeholder)
:labelled? (if (= :label (:type @state)) true (:labelled? @state))
:data [{:id 1 :label "Music" :resource (resources/get-image :music)}
{:id 2 :label "Lifestyle" :resource (resources/get-image :lifestyle)}
{:id 2 :label "Podcasts" :resource (resources/get-image :podcasts)}