status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.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 (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 (defn community-card
[theme] [theme]
{:shadow-offset {:width 0 :height 2} (assoc
:shadow-radius 16 (shadows/get 2 theme)
:shadow-opacity 1
:shadow-color colors/shadow
:elevation 1
:border-radius 16 :border-radius 16
:justify-content :space-between :justify-content :space-between
:background-color (colors/theme-colors colors/white colors/neutral-90 theme) :background-color (colors/theme-colors colors/white colors/neutral-90 theme)
@ -16,7 +14,7 @@
:margin-top 8 :margin-top 8
:margin-bottom 8 :margin-bottom 8
:height 56 :height 56
:padding-right 12}) :padding-right 12))
(def banner-content (def banner-content
{:flex 1 {:flex 1

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

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

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

@ -252,3 +252,8 @@
:margin-top margin-top}) :margin-top margin-top})
(def loading-card-content-container {:margin-top 36}) (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} :shadow-radius 16}
2 {:shadow-color (colors/alpha colors/neutral-100 0.08) 2 {:shadow-color (colors/alpha colors/neutral-100 0.08)
:shadow-offset {:width 0 :height 4} :shadow-offset {:width 0 :height 4}
:elevation 2 :elevation 6
:shadow-opacity 1 :shadow-opacity 1
:shadow-radius 16} :shadow-radius 16}
3 {:shadow-color (colors/alpha colors/neutral-100 0.12) 3 {:shadow-color (colors/alpha colors/neutral-100 0.12)
:shadow-offset {:width 0 :height 12} :shadow-offset {:width 0 :height 12}
:elevation 5 :elevation 8
:shadow-opacity 1 :shadow-opacity 1
:shadow-radius 16} :shadow-radius 16}
4 {:shadow-color (colors/alpha colors/neutral-100 0.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 :left 0
:padding-top (safe-area/get-top)})) :padding-top (safe-area/get-top)}))
(def animated-banner-card-container {:overflow :hidden})
(defn animated-banner-card (defn animated-banner-card
[scroll-shared-value] [scroll-shared-value]
(reanimated/apply-animations-to-style (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.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.theme :as theme] [quo2.theme :as theme]
[reagent.core :as reagent]
[react-native.blur :as blur] [react-native.blur :as blur]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.platform :as platform] [react-native.platform :as platform]
@ -11,6 +12,9 @@
[status-im2.common.home.view :as common.home] [status-im2.common.home.view :as common.home]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(def card-banner-overflow-threshold 3)
(def card-banner-overflow (reagent/atom :visible))
(defn- reset-banner-animation (defn- reset-banner-animation
[scroll-shared-value] [scroll-shared-value]
(reanimated/animate-shared-value-with-timing scroll-shared-value 0 200 :easing3)) (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)} [reanimated/view {:style (style/banner-card-hiding-layer scroll-shared-value)}
[common.home/top-nav {:type :grey}] [common.home/top-nav {:type :grey}]
[common.home/title-column (assoc title-props :customization-color customization-color)] [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)} [reanimated/view {:style (style/animated-banner-card scroll-shared-value)}
[quo/discover-card card-props]]]])) [quo/discover-card card-props]]]]))
@ -78,4 +82,7 @@
(defn set-scroll-shared-value (defn set-scroll-shared-value
[{:keys [shared-value scroll-input]}] [{: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)] item (merge item unviewed-counts)]
[quo/communities-membership-list-item [quo/communities-membership-list-item
{:customization-color customization-color {: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-press #(debounce/dispatch-and-chill [:navigate-to :community-overview id] 500)
:on-long-press #(rf/dispatch :on-long-press #(rf/dispatch
[:show-bottom-sheet [:show-bottom-sheet
@ -99,6 +99,7 @@
:content-inset-adjustment-behavior :never :content-inset-adjustment-behavior :never
:header [common.home/header-spacing] :header [common.home/header-spacing]
:render-fn item-render :render-fn item-render
:style {:margin-top -1}
:data selected-items :data selected-items
:scroll-event-throttle 8 :scroll-event-throttle 8
:on-scroll #(common.home.banner/set-scroll-shared-value :on-scroll #(common.home.banner/set-scroll-shared-value