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

[#16846] fix: resolve communities home design feedbacks (#17089) 

* [#16846] fix: resolve communities home design feedbacks

* [#16846] fix: ios card shadow cutoff, re #17098
This commit is contained in:
Mohsen Ghafouri 2023-08-25 17:26:53 +03:00 committed by GitHub
parent 21be0ed16c
commit 2358eb195b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 42 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/quo2/components/community/banner/style.cljs
View File

@ -1,13 +1,11 @@
(ns quo2.components.community.banner.style
(:require [quo2.foundations.colors :as colors]))
(:require [quo2.foundations.colors :as colors]
[quo2.foundations.shadows :as shadows]))
(defn community-card
[theme]
{:shadow-offset {:width 0 :height 2}
:shadow-radius 16
:shadow-opacity 1
:shadow-color colors/shadow
:elevation 1
(assoc
(shadows/get 2 theme)
:border-radius 16
:justify-content :space-between
:background-color (colors/theme-colors colors/white colors/neutral-90 theme)
@ -16,7 +14,7 @@
:margin-top 8
:margin-bottom 8
:height 56
:padding-right 12})
:padding-right 12))
(def banner-content
{:flex 1

37
src/quo2/components/community/community_list_view.cljs
View File

@ -16,25 +16,26 @@
unread-messages?
unread-mentions-count
customization-color]}]
(cond
muted?
[icons/icon :i/muted
{:container-style {:align-items :center
:justify-content :center}
:resize-mode :center
:size 20
:color (colors/theme-colors
colors/neutral-50
colors/neutral-40
theme)}]
(pos? unread-mentions-count)
[counter/view
{:customization-color customization-color
:type :default}
unread-mentions-count]
[rn/view {:style style/notification-container}
(cond
muted?
[icons/icon :i/muted
{:container-style {:align-items :center
:justify-content :center}
:resize-mode :center
:size 20
:color (colors/theme-colors
colors/neutral-50
colors/neutral-40
theme)}]
(pos? unread-mentions-count)
[counter/view
{:customization-color customization-color
:type :default}
unread-mentions-count]
unread-messages?
[unread-grey-dot :unviewed-messages-public]))
unread-messages?
[unread-grey-dot :unviewed-messages-public])])
(defn- communities-list-view-item-internal
[{:keys [theme customization-color] :as props}

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

@ -252,3 +252,8 @@
:margin-top margin-top})
(def loading-card-content-container {:margin-top 36})
(def notification-container
{:width 20
:display :flex
:align-items :center})

4
src/quo2/foundations/shadows.cljs
View File

@ -36,12 +36,12 @@
:shadow-radius 16}
2 {:shadow-color (colors/alpha colors/neutral-100 0.08)
:shadow-offset {:width 0 :height 4}
:elevation 2
:elevation 6
:shadow-opacity 1
:shadow-radius 16}
3 {:shadow-color (colors/alpha colors/neutral-100 0.12)
:shadow-offset {:width 0 :height 12}
:elevation 5
:elevation 8
:shadow-opacity 1
:shadow-radius 16}
4 {:shadow-color (colors/alpha colors/neutral-100 0.16)

2
src/status_im2/common/home/banner/style.cljs
View File

@ -44,8 +44,6 @@
:left 0
:padding-top (safe-area/get-top)}))
(def animated-banner-card-container {:overflow :hidden})
(defn animated-banner-card
[scroll-shared-value]
(reanimated/apply-animations-to-style

11
src/status_im2/common/home/banner/view.cljs
View File

@ -3,6 +3,7 @@
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[reagent.core :as reagent]
[react-native.blur :as blur]
[react-native.core :as rn]
[react-native.platform :as platform]
@ -11,6 +12,9 @@
[status-im2.common.home.view :as common.home]
[utils.re-frame :as rf]))
(def card-banner-overflow-threshold 3)
(def card-banner-overflow (reagent/atom :visible))
(defn- reset-banner-animation
[scroll-shared-value]
(reanimated/animate-shared-value-with-timing scroll-shared-value 0 200 :easing3))
@ -42,7 +46,7 @@
[reanimated/view {:style (style/banner-card-hiding-layer scroll-shared-value)}
[common.home/top-nav {:type :grey}]
[common.home/title-column (assoc title-props :customization-color customization-color)]
[rn/view {:style style/animated-banner-card-container}
[rn/view {:style {:overflow @card-banner-overflow}}
[reanimated/view {:style (style/animated-banner-card scroll-shared-value)}
[quo/discover-card card-props]]]]))
@ -78,4 +82,7 @@
(defn set-scroll-shared-value
[{:keys [shared-value scroll-input]}]
(reanimated/set-shared-value shared-value scroll-input))
(reanimated/set-shared-value shared-value scroll-input)
(let [new-overflow (if (<= scroll-input card-banner-overflow-threshold) :visible :hidden)]
(when-not (= new-overflow @card-banner-overflow)
(reset! card-banner-overflow new-overflow))))

3
src/status_im2/contexts/communities/home/view.cljs
View File

@ -21,7 +21,7 @@
item (merge item unviewed-counts)]
[quo/communities-membership-list-item
{:customization-color customization-color
:style {:padding-horizontal 18}
:style {:padding-horizontal 20}
:on-press #(debounce/dispatch-and-chill [:navigate-to :community-overview id] 500)
:on-long-press #(rf/dispatch
[:show-bottom-sheet
@ -99,6 +99,7 @@
:content-inset-adjustment-behavior :never
:header [common.home/header-spacing]
:render-fn item-render
:style {:margin-top -1}
:data selected-items
:scroll-event-throttle 8
:on-scroll #(common.home.banner/set-scroll-shared-value