home screen updates
* community home screen updates * removed green border color on status indicator * added accent color to plus button and jump-to button * code reviews * e2e: fix acc id new comm button * resolved bugs --------- Co-authored-by: pavloburykh <pavlo@status.im>
Before Width: | Height: | Size: 771 B After Width: | Height: | Size: 834 B |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 44 KiB |
After Width: | Height: | Size: 82 KiB |
After Width: | Height: | Size: 40 KiB |
After Width: | Height: | Size: 40 KiB |
|
@ -57,10 +57,18 @@
|
||||||
(def initials-avatar-text
|
(def initials-avatar-text
|
||||||
{:color colors/white-opa-70})
|
{:color colors/white-opa-70})
|
||||||
|
|
||||||
(defn dot
|
(defn inner-dot
|
||||||
[size online? ring?]
|
[size online?]
|
||||||
(let [background (if online? colors/success-50 colors/neutral-40)
|
(let [background (if online? colors/success-50 colors/neutral-40)
|
||||||
dimensions (get-in sizes [size :status-indicator])
|
dimensions (get-in sizes [size :status-indicator])]
|
||||||
|
{:width (- dimensions 4)
|
||||||
|
:height (- dimensions 4)
|
||||||
|
:border-radius (- dimensions 4)
|
||||||
|
:background-color background}))
|
||||||
|
|
||||||
|
(defn dot
|
||||||
|
[size ring?]
|
||||||
|
(let [dimensions (get-in sizes [size :status-indicator])
|
||||||
border-width (get-in sizes [size :status-indicator-border])
|
border-width (get-in sizes [size :status-indicator-border])
|
||||||
right (case size
|
right (case size
|
||||||
:big 2
|
:big 2
|
||||||
|
@ -73,11 +81,13 @@
|
||||||
:small -2
|
:small -2
|
||||||
0)]
|
0)]
|
||||||
{:position :absolute
|
{:position :absolute
|
||||||
|
:justify-content :center
|
||||||
|
:align-items :center
|
||||||
:bottom bottom
|
:bottom bottom
|
||||||
:right right
|
:right right
|
||||||
:width dimensions
|
:width dimensions
|
||||||
:height dimensions
|
:height dimensions
|
||||||
:border-width border-width
|
:border-width border-width
|
||||||
:border-radius dimensions
|
:border-radius dimensions
|
||||||
:border-color (colors/theme-colors colors/white colors/neutral-100)
|
:background-color (colors/theme-colors colors/white colors/neutral-100)
|
||||||
:background-color background}))
|
:border-color (colors/theme-colors colors/white colors/neutral-100)}))
|
||||||
|
|
|
@ -62,4 +62,7 @@
|
||||||
(when status-indicator?
|
(when status-indicator?
|
||||||
[rn/view
|
[rn/view
|
||||||
{:accessibility-label :status-indicator
|
{:accessibility-label :status-indicator
|
||||||
:style (style/dot size online? draw-ring?)}])]))
|
:style (style/dot size draw-ring?)}
|
||||||
|
[rn/view
|
||||||
|
{:accessibility-label :inner-status-indicator-dot
|
||||||
|
:style (style/inner-dot size online?)}]])]))
|
||||||
|
|
|
@ -92,9 +92,9 @@
|
||||||
:grey {:icon-color colors/white
|
:grey {:icon-color colors/white
|
||||||
:icon-secondary-color colors/neutral-40
|
:icon-secondary-color colors/neutral-40
|
||||||
:label-color colors/white
|
:label-color colors/white
|
||||||
:background-color {:default colors/neutral-80
|
:background-color {:default colors/neutral-90
|
||||||
:pressed colors/neutral-60
|
:pressed colors/neutral-60
|
||||||
:disabled colors/neutral-80}}
|
:disabled colors/neutral-90}}
|
||||||
:dark-grey {:icon-color colors/white
|
:dark-grey {:icon-color colors/white
|
||||||
:icon-secondary-color colors/neutral-40
|
:icon-secondary-color colors/neutral-40
|
||||||
:label-color colors/white
|
:label-color colors/white
|
||||||
|
|
|
@ -0,0 +1,38 @@
|
||||||
|
(ns quo2.components.community.banner.style
|
||||||
|
(:require [quo2.foundations.colors :as colors]))
|
||||||
|
|
||||||
|
(defn community-card
|
||||||
|
[radius]
|
||||||
|
{:shadow-offset {:width 0
|
||||||
|
:height 2}
|
||||||
|
:shadow-radius radius
|
||||||
|
:shadow-opacity 1
|
||||||
|
:shadow-color colors/shadow
|
||||||
|
:elevation 1
|
||||||
|
:border-radius radius
|
||||||
|
:justify-content :space-between
|
||||||
|
:background-color (colors/theme-colors
|
||||||
|
colors/white
|
||||||
|
colors/neutral-90)})
|
||||||
|
|
||||||
|
(def banner-content
|
||||||
|
{:flex 1
|
||||||
|
:padding-top 8
|
||||||
|
:padding-bottom 8
|
||||||
|
:border-radius 12})
|
||||||
|
|
||||||
|
(def banner-title
|
||||||
|
{:flex 1
|
||||||
|
:padding-horizontal 12})
|
||||||
|
|
||||||
|
(def banner-card
|
||||||
|
{:flex-direction :row
|
||||||
|
:margin-horizontal 20
|
||||||
|
:margin-vertical 8
|
||||||
|
:height 56
|
||||||
|
:padding-right 12})
|
||||||
|
|
||||||
|
(def discover-illustration
|
||||||
|
{:position :absolute
|
||||||
|
:top -4
|
||||||
|
:right 0})
|
|
@ -0,0 +1,46 @@
|
||||||
|
(ns quo2.components.community.banner.view
|
||||||
|
(:require [quo2.components.community.banner.style :as style]
|
||||||
|
[quo2.components.markdown.text :as text]
|
||||||
|
[quo2.foundations.colors :as colors]
|
||||||
|
[react-native.core :as rn]))
|
||||||
|
|
||||||
|
(defn- card-title-and-description
|
||||||
|
[title description]
|
||||||
|
[rn/view
|
||||||
|
{:style style/banner-content}
|
||||||
|
[rn/view
|
||||||
|
{:style style/banner-title}
|
||||||
|
[text/text
|
||||||
|
{:accessibility-label :community-name-text
|
||||||
|
:ellipsize-mode :tail
|
||||||
|
:number-of-lines 1
|
||||||
|
:weight :semi-bold
|
||||||
|
:size :paragraph-1}
|
||||||
|
title]
|
||||||
|
[text/text
|
||||||
|
{:accessibility-label :community-name-text
|
||||||
|
:ellipsize-mode :tail
|
||||||
|
:number-of-lines 1
|
||||||
|
:color (colors/theme-colors
|
||||||
|
colors/neutral-50
|
||||||
|
colors/neutral-40)
|
||||||
|
:weight :regular
|
||||||
|
:size :paragraph-2}
|
||||||
|
description]]])
|
||||||
|
|
||||||
|
(defn view
|
||||||
|
[{:keys [title description on-press accessibility-label banner]}]
|
||||||
|
[rn/touchable-without-feedback
|
||||||
|
{:on-press on-press
|
||||||
|
:accessibility-label accessibility-label}
|
||||||
|
[rn/view
|
||||||
|
(merge (style/community-card 16)
|
||||||
|
{:background-color (colors/theme-colors
|
||||||
|
colors/white
|
||||||
|
colors/neutral-90)}
|
||||||
|
style/banner-card)
|
||||||
|
[card-title-and-description title description]
|
||||||
|
[rn/image
|
||||||
|
{:style style/discover-illustration
|
||||||
|
:source banner
|
||||||
|
:accessibility-label :discover-communities-illustration}]]])
|
|
@ -1,108 +0,0 @@
|
||||||
(ns quo2.components.community.discover-card
|
|
||||||
(:require [quo2.components.community.style :as style]
|
|
||||||
[quo2.components.markdown.text :as text]
|
|
||||||
[quo2.foundations.colors :as colors]
|
|
||||||
[react-native.core :as rn]))
|
|
||||||
|
|
||||||
;; Discover card placeholders images.
|
|
||||||
;; TODO replaced when real data is available
|
|
||||||
(def images
|
|
||||||
{:images [{:id 1 :column-images [{:id 1 :image ""}]}
|
|
||||||
{:id 2 :column-images [{}]}]})
|
|
||||||
|
|
||||||
(defn card-title-and-description
|
|
||||||
[title description]
|
|
||||||
[rn/view
|
|
||||||
{:flex 1
|
|
||||||
:padding-top 8
|
|
||||||
:padding-bottom 8
|
|
||||||
:border-radius 12}
|
|
||||||
[rn/view
|
|
||||||
{:flex 1
|
|
||||||
:padding-horizontal 12}
|
|
||||||
[text/text
|
|
||||||
{:accessibility-label :community-name-text
|
|
||||||
:ellipsize-mode :tail
|
|
||||||
:number-of-lines 1
|
|
||||||
:weight :semi-bold
|
|
||||||
:size :paragraph-1}
|
|
||||||
title]
|
|
||||||
[text/text
|
|
||||||
{:accessibility-label :community-name-text
|
|
||||||
:ellipsize-mode :tail
|
|
||||||
:number-of-lines 1
|
|
||||||
:color (colors/theme-colors
|
|
||||||
colors/neutral-50
|
|
||||||
colors/neutral-40)
|
|
||||||
:weight :regular
|
|
||||||
:size :paragraph-2}
|
|
||||||
description]]])
|
|
||||||
|
|
||||||
(defn placeholder-list-images
|
|
||||||
[{:keys [images width height border-radius]}]
|
|
||||||
[rn/view
|
|
||||||
[rn/view {:justify-content :center}
|
|
||||||
(for [{:keys [id]} images]
|
|
||||||
^{:key id}
|
|
||||||
[rn/view
|
|
||||||
{:border-radius border-radius
|
|
||||||
:margin-top 4
|
|
||||||
:margin-right 4
|
|
||||||
:width width
|
|
||||||
:height height
|
|
||||||
:background-color colors/neutral-10}])]])
|
|
||||||
|
|
||||||
(defn placeholder-row-images
|
|
||||||
[{:keys [first-image last-image images width height
|
|
||||||
border-radius]}]
|
|
||||||
[rn/view
|
|
||||||
(when first-image
|
|
||||||
[rn/view
|
|
||||||
{:border-bottom-right-radius 6
|
|
||||||
:border-bottom-left-radius 6
|
|
||||||
:margin-right 4
|
|
||||||
:width width
|
|
||||||
:height height
|
|
||||||
:background-color colors/neutral-10}])
|
|
||||||
(when images
|
|
||||||
[placeholder-list-images
|
|
||||||
{:images images
|
|
||||||
:width 32
|
|
||||||
:height 32
|
|
||||||
:border-radius 6}])
|
|
||||||
(when last-image
|
|
||||||
[rn/view
|
|
||||||
{:border-top-left-radius border-radius
|
|
||||||
:border-top-right-radius 6
|
|
||||||
:margin-top 4
|
|
||||||
:width width
|
|
||||||
:height height
|
|
||||||
:background-color colors/neutral-10}])])
|
|
||||||
|
|
||||||
(defn discover-card
|
|
||||||
[{:keys [title description on-press accessibility-label]}]
|
|
||||||
(let [on-joined-images (get images :images)]
|
|
||||||
[rn/touchable-without-feedback
|
|
||||||
{:on-press on-press
|
|
||||||
:accessibility-label accessibility-label}
|
|
||||||
[rn/view
|
|
||||||
(merge (style/community-card 16)
|
|
||||||
{:background-color (colors/theme-colors
|
|
||||||
colors/white
|
|
||||||
colors/neutral-90)}
|
|
||||||
{:flex-direction :row
|
|
||||||
:margin-horizontal 20
|
|
||||||
:margin-vertical 8
|
|
||||||
:height 56
|
|
||||||
:padding-right 12})
|
|
||||||
[card-title-and-description title description]
|
|
||||||
(for [{:keys [id column-images]} on-joined-images]
|
|
||||||
^{:key id}
|
|
||||||
[placeholder-row-images
|
|
||||||
{:images (when (= id 1)
|
|
||||||
column-images)
|
|
||||||
:width 32
|
|
||||||
:height (if (= id 1) 8 26)
|
|
||||||
:border-radius 6
|
|
||||||
:first-image "" ; TODO replace with real data
|
|
||||||
:last-image ""}])]])) ; TODO replace with real data
|
|
|
@ -10,8 +10,8 @@
|
||||||
:dark {:background-color colors/white-opa-5}})
|
:dark {:background-color colors/white-opa-5}})
|
||||||
|
|
||||||
(def themes
|
(def themes
|
||||||
{:light {:background-color colors/neutral-20}
|
{:light {:background-color colors/neutral-10}
|
||||||
:dark {:background-color colors/neutral-80}})
|
:dark {:background-color colors/neutral-90}})
|
||||||
|
|
||||||
(defn segmented-control
|
(defn segmented-control
|
||||||
[{:keys [default-active on-change]}]
|
[{:keys [default-active on-change]}]
|
||||||
|
|
|
@ -59,22 +59,22 @@
|
||||||
{:opacity tab-background-opacity}))))
|
{:opacity tab-background-opacity}))))
|
||||||
|
|
||||||
(def themes
|
(def themes
|
||||||
{:light {:default {:background-color colors/neutral-20
|
{:light {:default {:background-color colors/neutral-10
|
||||||
:icon-color colors/neutral-50
|
:icon-color colors/neutral-50
|
||||||
:label {:style {:color colors/neutral-100}}}
|
:label {:style {:color colors/neutral-100}}}
|
||||||
:active {:background-color colors/neutral-50
|
:active {:background-color colors/neutral-50
|
||||||
:icon-color colors/white
|
:icon-color colors/white
|
||||||
:label {:style {:color colors/white}}}
|
:label {:style {:color colors/white}}}
|
||||||
:disabled {:background-color colors/neutral-20
|
:disabled {:background-color colors/neutral-10
|
||||||
:icon-color colors/neutral-50
|
:icon-color colors/neutral-50
|
||||||
:label {:style {:color colors/neutral-100}}}}
|
:label {:style {:color colors/neutral-100}}}}
|
||||||
:dark {:default {:background-color colors/neutral-80
|
:dark {:default {:background-color colors/neutral-90
|
||||||
:icon-color colors/neutral-40
|
:icon-color colors/neutral-40
|
||||||
:label {:style {:color colors/white}}}
|
:label {:style {:color colors/white}}}
|
||||||
:active {:background-color colors/neutral-60
|
:active {:background-color colors/neutral-60
|
||||||
:icon-color colors/white
|
:icon-color colors/white
|
||||||
:label {:style {:color colors/white}}}
|
:label {:style {:color colors/white}}}
|
||||||
:disabled {:background-color colors/neutral-80
|
:disabled {:background-color colors/neutral-90
|
||||||
:icon-color colors/neutral-40
|
:icon-color colors/neutral-40
|
||||||
:label {:style {:color colors/white}}}}})
|
:label {:style {:color colors/white}}}}})
|
||||||
|
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
quo2.components.community.community-card-view
|
quo2.components.community.community-card-view
|
||||||
quo2.components.community.community-list-view
|
quo2.components.community.community-list-view
|
||||||
quo2.components.community.community-view
|
quo2.components.community.community-view
|
||||||
quo2.components.community.discover-card
|
quo2.components.community.banner.view
|
||||||
quo2.components.community.icon
|
quo2.components.community.icon
|
||||||
quo2.components.community.token-gating
|
quo2.components.community.token-gating
|
||||||
quo2.components.counter.counter
|
quo2.components.counter.counter
|
||||||
|
@ -143,7 +143,7 @@
|
||||||
(def community-tags quo2.components.community.community-view/community-tags)
|
(def community-tags quo2.components.community.community-view/community-tags)
|
||||||
(def community-title quo2.components.community.community-view/community-title)
|
(def community-title quo2.components.community.community-view/community-title)
|
||||||
(def permission-tag-container quo2.components.community.community-view/permission-tag-container)
|
(def permission-tag-container quo2.components.community.community-view/permission-tag-container)
|
||||||
(def discover-card quo2.components.community.discover-card/discover-card)
|
(def discover-card quo2.components.community.banner.view/view)
|
||||||
(def token-gating quo2.components.community.token-gating/token-gating)
|
(def token-gating quo2.components.community.token-gating/token-gating)
|
||||||
(def community-icon quo2.components.community.icon/community-icon)
|
(def community-icon quo2.components.community.icon/community-icon)
|
||||||
|
|
||||||
|
|
|
@ -262,7 +262,7 @@
|
||||||
(custom-color color suffix-dark opacity-dark)
|
(custom-color color suffix-dark opacity-dark)
|
||||||
(custom-color color suffix-light opacity-light))))
|
(custom-color color suffix-light opacity-light))))
|
||||||
|
|
||||||
(def shadow "rgba(9,16,28,0.04)")
|
(def shadow "rgba(9,16,28,0.08)")
|
||||||
|
|
||||||
;;General
|
;;General
|
||||||
|
|
||||||
|
|
|
@ -9,14 +9,15 @@
|
||||||
[utils.re-frame :as rf]))
|
[utils.re-frame :as rf]))
|
||||||
|
|
||||||
(defn title-column
|
(defn title-column
|
||||||
[{:keys [label handler accessibility-label]}]
|
[{:keys [label handler accessibility-label customization-color]}]
|
||||||
[rn/view style/title-column
|
[rn/view style/title-column
|
||||||
[rn/view {:flex 1}
|
[rn/view {:flex 1}
|
||||||
[quo/text style/title-column-text
|
[quo/text style/title-column-text
|
||||||
label]]
|
label]]
|
||||||
[plus-button/plus-button
|
[plus-button/plus-button
|
||||||
{:on-press handler
|
{:on-press handler
|
||||||
:accessibility-label accessibility-label}]])
|
:accessibility-label accessibility-label
|
||||||
|
:customization-color customization-color}]])
|
||||||
|
|
||||||
(defn- get-button-common-props
|
(defn- get-button-common-props
|
||||||
[type]
|
[type]
|
||||||
|
@ -49,14 +50,17 @@
|
||||||
|
|
||||||
(defn- left-section
|
(defn- left-section
|
||||||
[{:keys [avatar]}]
|
[{:keys [avatar]}]
|
||||||
|
(let [{:keys [public-key]} (rf/sub [:multiaccount])
|
||||||
|
online? (rf/sub [:visibility-status-updates/online? public-key])]
|
||||||
[rn/touchable-without-feedback {:on-press #(rf/dispatch [:navigate-to :my-profile])}
|
[rn/touchable-without-feedback {:on-press #(rf/dispatch [:navigate-to :my-profile])}
|
||||||
[rn/view
|
[rn/view
|
||||||
{:accessibility-label :open-profile
|
{:accessibility-label :open-profile
|
||||||
:style style/left-section}
|
:style style/left-section}
|
||||||
[quo/user-avatar
|
[quo/user-avatar
|
||||||
(merge {:status-indicator? true
|
(merge {:status-indicator? true
|
||||||
:size :small}
|
:size :small
|
||||||
avatar)]]])
|
:online? online?}
|
||||||
|
avatar)]]]))
|
||||||
|
|
||||||
(defn connectivity-sheet
|
(defn connectivity-sheet
|
||||||
[]
|
[]
|
||||||
|
|
|
@ -2,11 +2,12 @@
|
||||||
(:require [quo2.components.buttons.button :as quo2.button]))
|
(:require [quo2.components.buttons.button :as quo2.button]))
|
||||||
|
|
||||||
(defn plus-button
|
(defn plus-button
|
||||||
[{:keys [on-press accessibility-label]}]
|
[{:keys [on-press accessibility-label customization-color]}]
|
||||||
[quo2.button/button
|
[quo2.button/button
|
||||||
{:type :primary
|
{:type :primary
|
||||||
:size 32
|
:size 32
|
||||||
:icon true
|
:icon true
|
||||||
:accessibility-label (or accessibility-label :plus-button)
|
:accessibility-label (or accessibility-label :plus-button)
|
||||||
:on-press on-press}
|
:on-press on-press
|
||||||
|
:customization-color customization-color}
|
||||||
:i/add])
|
:i/add])
|
|
@ -18,7 +18,9 @@
|
||||||
:keycard-logo (js/require "../resources/images/ui2/keycard-logo.png")
|
:keycard-logo (js/require "../resources/images/ui2/keycard-logo.png")
|
||||||
:keycard-chip-light (js/require "../resources/images/ui2/keycard-chip-light.png")
|
:keycard-chip-light (js/require "../resources/images/ui2/keycard-chip-light.png")
|
||||||
:keycard-chip-dark (js/require "../resources/images/ui2/keycard-chip-dark.png")
|
:keycard-chip-dark (js/require "../resources/images/ui2/keycard-chip-dark.png")
|
||||||
:keycard-watermark (js/require "../resources/images/ui2/keycard-watermark.png")})
|
:keycard-watermark (js/require "../resources/images/ui2/keycard-watermark.png")
|
||||||
|
:discover (js/require "../resources/images/ui2/discover.png")
|
||||||
|
:invite-friends (js/require "../resources/images/ui2/invite-friends.png")})
|
||||||
|
|
||||||
(def mock-images
|
(def mock-images
|
||||||
{:coinbase (js/require "../resources/images/mock2/coinbase.png")
|
{:coinbase (js/require "../resources/images/mock2/coinbase.png")
|
||||||
|
|
|
@ -1,20 +1,21 @@
|
||||||
(ns status-im2.contexts.chat.home.view
|
(ns status-im2.contexts.chat.home.view
|
||||||
(:require [utils.i18n :as i18n]
|
(:require [utils.i18n :as i18n]
|
||||||
|
[utils.re-frame :as rf]
|
||||||
[quo2.core :as quo]
|
[quo2.core :as quo]
|
||||||
[re-frame.core :as re-frame]
|
[re-frame.core :as re-frame]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
|
[react-native.safe-area :as safe-area]
|
||||||
|
[quo2.foundations.colors :as colors]
|
||||||
|
[react-native.blur :as blur]
|
||||||
|
[react-native.platform :as platform]
|
||||||
|
[status-im2.contexts.chat.home.style :as style]
|
||||||
[status-im2.common.contact-list.view :as contact-list]
|
[status-im2.common.contact-list.view :as contact-list]
|
||||||
[status-im2.common.home.view :as common.home]
|
[status-im2.common.home.view :as common.home]
|
||||||
[status-im2.contexts.chat.home.chat-list-item.view :as chat-list-item]
|
[status-im2.contexts.chat.home.chat-list-item.view :as chat-list-item]
|
||||||
[status-im2.contexts.chat.home.contact-request.view :as contact-request]
|
[status-im2.contexts.chat.home.contact-request.view :as contact-request]
|
||||||
[utils.re-frame :as rf]
|
|
||||||
[status-im2.common.contact-list-item.view :as contact-list-item]
|
[status-im2.common.contact-list-item.view :as contact-list-item]
|
||||||
[status-im2.common.home.actions.view :as actions]
|
[status-im2.common.home.actions.view :as actions]
|
||||||
[react-native.safe-area :as safe-area]
|
[status-im2.common.resources :as resources]
|
||||||
[quo2.foundations.colors :as colors]
|
|
||||||
[react-native.blur :as blur]
|
|
||||||
[status-im2.contexts.chat.home.style :as style]
|
|
||||||
[react-native.platform :as platform]
|
|
||||||
[status-im2.contexts.chat.actions.view :as home.sheet]))
|
[status-im2.contexts.chat.actions.view :as home.sheet]))
|
||||||
|
|
||||||
(defn get-item-layout
|
(defn get-item-layout
|
||||||
|
@ -102,8 +103,12 @@
|
||||||
[]
|
[]
|
||||||
(fn []
|
(fn []
|
||||||
(let [pending-contact-requests (rf/sub [:activity-center/pending-contact-requests])
|
(let [pending-contact-requests (rf/sub [:activity-center/pending-contact-requests])
|
||||||
selected-tab (or (rf/sub [:messages-home/selected-tab])
|
selected-tab (or (rf/sub [:messages-home/selected-tab]) :tab/recent)
|
||||||
:tab/recent)
|
{:keys [key-uid]} (rf/sub [:multiaccount])
|
||||||
|
profile-color (:color (rf/sub [:onboarding-2/profile]))
|
||||||
|
customization-color (if profile-color
|
||||||
|
profile-color
|
||||||
|
(rf/sub [:profile/customization-color key-uid]))
|
||||||
top (safe-area/get-top)]
|
top (safe-area/get-top)]
|
||||||
[:<>
|
[:<>
|
||||||
(if (= selected-tab :tab/contacts)
|
(if (= selected-tab :tab/contacts)
|
||||||
|
@ -115,13 +120,17 @@
|
||||||
{:blur-amount (if platform/ios? 20 10)
|
{:blur-amount (if platform/ios? 20 10)
|
||||||
:blur-type (if (colors/dark?) :dark (if platform/ios? :light :xlight))
|
:blur-type (if (colors/dark?) :dark (if platform/ios? :light :xlight))
|
||||||
:style style/blur}]
|
:style style/blur}]
|
||||||
[common.home/top-nav]
|
[common.home/top-nav
|
||||||
|
{:type :grey
|
||||||
|
:avatar {:customization-color customization-color}}]
|
||||||
[common.home/title-column
|
[common.home/title-column
|
||||||
{:label (i18n/label :t/messages)
|
{:label (i18n/label :t/messages)
|
||||||
:handler #(rf/dispatch [:show-bottom-sheet {:content home.sheet/new-chat}])
|
:handler #(rf/dispatch [:show-bottom-sheet {:content home.sheet/new-chat}])
|
||||||
:accessibility-label :new-chat-button}]
|
:accessibility-label :new-chat-button
|
||||||
|
:customization-color customization-color}]
|
||||||
[quo/discover-card
|
[quo/discover-card
|
||||||
{:title (i18n/label :t/invite-friends-to-status)
|
{:banner (resources/get-image :invite-friends)
|
||||||
|
:title (i18n/label :t/invite-friends-to-status)
|
||||||
:description (i18n/label :t/share-invite-link)}]
|
:description (i18n/label :t/share-invite-link)}]
|
||||||
^{:key (str "tabs-" selected-tab)}
|
^{:key (str "tabs-" selected-tab)}
|
||||||
[quo/tabs
|
[quo/tabs
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
(ns status-im2.contexts.communities.home.style
|
(ns status-im2.contexts.communities.home.style
|
||||||
(:require [react-native.platform :as platform]))
|
(:require [react-native.platform :as platform]
|
||||||
|
[quo2.foundations.colors :as colors]))
|
||||||
|
|
||||||
(def tabs
|
(def tabs
|
||||||
{:padding-horizontal 20
|
{:padding-horizontal 20
|
||||||
|
@ -13,6 +14,22 @@
|
||||||
:left 0
|
:left 0
|
||||||
:bottom 0})
|
:bottom 0})
|
||||||
|
|
||||||
|
(def empty-state-container
|
||||||
|
{:position :absolute
|
||||||
|
:top 390
|
||||||
|
:left 0
|
||||||
|
:right 0
|
||||||
|
:align-items :center})
|
||||||
|
|
||||||
|
(def empty-state-placeholder
|
||||||
|
{:height 120
|
||||||
|
:width 120
|
||||||
|
:background-color colors/danger-50})
|
||||||
|
|
||||||
|
(defn header-height
|
||||||
|
[top]
|
||||||
|
{:height (+ 245 top)})
|
||||||
|
|
||||||
(defn blur-container
|
(defn blur-container
|
||||||
[top]
|
[top]
|
||||||
{:overflow (if platform/ios? :visible :hidden)
|
{:overflow (if platform/ios? :visible :hidden)
|
||||||
|
|
|
@ -1,15 +1,16 @@
|
||||||
(ns status-im2.contexts.communities.home.view
|
(ns status-im2.contexts.communities.home.view
|
||||||
(:require [utils.i18n :as i18n]
|
(:require [utils.i18n :as i18n]
|
||||||
[quo2.core :as quo]
|
|
||||||
[react-native.core :as rn]
|
|
||||||
[status-im2.common.home.view :as common.home]
|
|
||||||
[status-im2.contexts.communities.actions.community-options.view :as options]
|
|
||||||
[utils.re-frame :as rf]
|
[utils.re-frame :as rf]
|
||||||
|
[quo2.core :as quo]
|
||||||
|
[quo2.foundations.colors :as colors]
|
||||||
|
[react-native.core :as rn]
|
||||||
[react-native.safe-area :as safe-area]
|
[react-native.safe-area :as safe-area]
|
||||||
[react-native.blur :as blur]
|
[react-native.blur :as blur]
|
||||||
[quo2.foundations.colors :as colors]
|
|
||||||
[status-im2.contexts.communities.home.style :as style]
|
|
||||||
[react-native.platform :as platform]
|
[react-native.platform :as platform]
|
||||||
|
[status-im2.common.home.view :as common.home]
|
||||||
|
[status-im2.contexts.communities.actions.community-options.view :as options]
|
||||||
|
[status-im2.contexts.communities.home.style :as style]
|
||||||
|
[status-im2.common.resources :as resources]
|
||||||
[status-im2.contexts.communities.actions.home-plus.view :as actions.home-plus]))
|
[status-im2.contexts.communities.actions.home-plus.view :as actions.home-plus]))
|
||||||
|
|
||||||
(defn item-render
|
(defn item-render
|
||||||
|
@ -32,38 +33,64 @@
|
||||||
{:id :pending :label (i18n/label :t/pending) :accessibility-label :pending-tab}
|
{:id :pending :label (i18n/label :t/pending) :accessibility-label :pending-tab}
|
||||||
{:id :opened :label (i18n/label :t/opened) :accessibility-label :opened-tab}])
|
{:id :opened :label (i18n/label :t/opened) :accessibility-label :opened-tab}])
|
||||||
|
|
||||||
|
(defn empty-state
|
||||||
|
[]
|
||||||
|
[rn/view {:style style/empty-state-container}
|
||||||
|
[rn/view {:style style/empty-state-placeholder}]
|
||||||
|
[quo/text
|
||||||
|
{:accessibility-label :communities-rule-index
|
||||||
|
:weight :semi-bold
|
||||||
|
:size :paragraph-1}
|
||||||
|
(i18n/label :t/no-communities)]
|
||||||
|
[quo/text
|
||||||
|
{:accessibility-label :communities-rule-index
|
||||||
|
:weight :regular
|
||||||
|
:size :paragraph-2}
|
||||||
|
(i18n/label :t/no-communities-sub-title)]])
|
||||||
|
|
||||||
(defn home
|
(defn home
|
||||||
[]
|
[]
|
||||||
(fn []
|
(fn []
|
||||||
(let [selected-tab (or (rf/sub [:communities/selected-tab]) :joined)
|
(let [selected-tab (or (rf/sub [:communities/selected-tab]) :joined)
|
||||||
{:keys [joined pending opened]} (rf/sub [:communities/grouped-by-status])
|
{:keys [joined pending opened]} (rf/sub [:communities/grouped-by-status])
|
||||||
|
{:keys [key-uid]} (rf/sub [:multiaccount])
|
||||||
|
profile-color (:color (rf/sub [:onboarding-2/profile]))
|
||||||
|
customization-color (if profile-color
|
||||||
|
profile-color
|
||||||
|
(rf/sub [:profile/customization-color key-uid]))
|
||||||
selected-items (case selected-tab
|
selected-items (case selected-tab
|
||||||
:joined joined
|
:joined joined
|
||||||
:pending pending
|
:pending pending
|
||||||
:opened opened)
|
:opened opened)
|
||||||
top (safe-area/get-top)]
|
top (safe-area/get-top)]
|
||||||
[:<>
|
[:<>
|
||||||
|
(if (empty? selected-items)
|
||||||
|
[empty-state]
|
||||||
[rn/flat-list
|
[rn/flat-list
|
||||||
{:key-fn :id
|
{:key-fn :id
|
||||||
:content-inset-adjustment-behavior :never
|
:content-inset-adjustment-behavior :never
|
||||||
:header [rn/view {:height (+ 245 top)}]
|
:header [rn/view (style/header-height top)]
|
||||||
:render-fn item-render
|
:render-fn item-render
|
||||||
:data selected-items}]
|
:data selected-items}])
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style (style/blur-container top)}
|
{:style (style/blur-container top)}
|
||||||
[blur/view
|
[blur/view
|
||||||
{:blur-amount (if platform/ios? 20 10)
|
{:blur-amount (if platform/ios? 20 10)
|
||||||
:blur-type (if (colors/dark?) :dark (if platform/ios? :light :xlight))
|
:blur-type (if (colors/dark?) :dark (if platform/ios? :light :xlight))
|
||||||
:style style/blur}]
|
:style style/blur}]
|
||||||
[common.home/top-nav]
|
[common.home/top-nav
|
||||||
|
{:type :grey
|
||||||
|
:avatar {:customization-color customization-color}}]
|
||||||
[common.home/title-column
|
[common.home/title-column
|
||||||
{:label (i18n/label :t/communities)
|
{:label (i18n/label :t/communities)
|
||||||
:handler #(rf/dispatch [:show-bottom-sheet {:content actions.home-plus/view}])
|
:handler #(rf/dispatch [:show-bottom-sheet {:content actions.home-plus/view}])
|
||||||
:accessibility-label :new-chat-button}]
|
:accessibility-label :new-communities-button
|
||||||
|
:customization-color customization-color}]
|
||||||
[quo/discover-card
|
[quo/discover-card
|
||||||
{:on-press #(rf/dispatch [:navigate-to :discover-communities])
|
{:on-press #(rf/dispatch [:navigate-to :discover-communities])
|
||||||
:title (i18n/label :t/discover)
|
:title (i18n/label :t/discover)
|
||||||
:description (i18n/label :t/whats-trending)
|
:description (i18n/label :t/favorite-communities)
|
||||||
|
:banner (resources/get-image :discover)
|
||||||
:accessibility-label :communities-home-discover-card}]
|
:accessibility-label :communities-home-discover-card}]
|
||||||
^{:key (str "tabs-" selected-tab)}
|
^{:key (str "tabs-" selected-tab)}
|
||||||
[quo/tabs
|
[quo/tabs
|
||||||
|
|
|
@ -4,8 +4,10 @@
|
||||||
[quo2.foundations.colors :as colors]
|
[quo2.foundations.colors :as colors]
|
||||||
[utils.i18n :as i18n]
|
[utils.i18n :as i18n]
|
||||||
[utils.re-frame :as rf]
|
[utils.re-frame :as rf]
|
||||||
|
[re-frame.core :as re-frame]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[react-native.safe-area :as safe-area]
|
[react-native.safe-area :as safe-area]
|
||||||
|
[status-im2.constants :as constants]
|
||||||
[status-im2.contexts.onboarding.welcome.style :as style]
|
[status-im2.contexts.onboarding.welcome.style :as style]
|
||||||
[status-im2.contexts.onboarding.common.background.view :as background]))
|
[status-im2.contexts.onboarding.common.background.view :as background]))
|
||||||
|
|
||||||
|
@ -33,11 +35,19 @@
|
||||||
:type :shell
|
:type :shell
|
||||||
:on-press #(rf/dispatch [:init-root root])}}])
|
:on-press #(rf/dispatch [:init-root root])}}])
|
||||||
|
|
||||||
|
(defn dispatch-visibility-status-update
|
||||||
|
[status-type]
|
||||||
|
(re-frame/dispatch
|
||||||
|
[:visibility-status-updates/delayed-visibility-status-update status-type]))
|
||||||
|
|
||||||
(defn view
|
(defn view
|
||||||
[]
|
[]
|
||||||
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))
|
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))
|
||||||
|
{:keys [status-type]} (rf/sub [:multiaccount/current-user-visibility-status])
|
||||||
insets (safe-area/get-insets)]
|
insets (safe-area/get-insets)]
|
||||||
[rn/view {:style (style/page-container insets)}
|
[rn/view {:style (style/page-container insets)}
|
||||||
|
(when (nil? status-type)
|
||||||
|
(dispatch-visibility-status-update constants/visibility-status-automatic))
|
||||||
[background/view true]
|
[background/view true]
|
||||||
[navigation-bar :enable-notifications]
|
[navigation-bar :enable-notifications]
|
||||||
[page-title]
|
[page-title]
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
(ns status-im2.contexts.quo-preview.community.discover-card
|
(ns status-im2.contexts.quo-preview.community.discover-card
|
||||||
(:require [quo.previews.preview :as preview]
|
(:require [quo.previews.preview :as preview]
|
||||||
[quo.react-native :as rn]
|
[quo.react-native :as rn]
|
||||||
[quo2.components.community.discover-card :as discover-card]
|
[quo2.components.community.banner.view :as discover-card]
|
||||||
[quo2.foundations.colors :as colors]
|
[quo2.foundations.colors :as colors]
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[utils.i18n :as i18n]))
|
[utils.i18n :as i18n]))
|
||||||
|
@ -24,10 +24,10 @@
|
||||||
[rn/view
|
[rn/view
|
||||||
{:padding-vertical 60
|
{:padding-vertical 60
|
||||||
:justify-content :center}
|
:justify-content :center}
|
||||||
[discover-card/discover-card
|
[discover-card/view
|
||||||
{:joined? (:joined? @state)
|
{:joined? (:joined? @state)
|
||||||
:title (i18n/label :t/discover)
|
:title (i18n/label :t/discover)
|
||||||
:description (i18n/label :t/whats-trending)}]]]])))
|
:description (i18n/label :t/favorite-communities)}]]]])))
|
||||||
|
|
||||||
(defn preview-discoverd-card
|
(defn preview-discoverd-card
|
||||||
[]
|
[]
|
||||||
|
|
|
@ -91,7 +91,7 @@
|
||||||
[blur/view (bottom-tabs/blur-overlay-params style/top-nav-blur-overlay)])]))
|
[blur/view (bottom-tabs/blur-overlay-params style/top-nav-blur-overlay)])]))
|
||||||
|
|
||||||
(defn shell
|
(defn shell
|
||||||
[]
|
[customization-color]
|
||||||
(let [switcher-cards (rf/sub [:shell/sorted-switcher-cards])
|
(let [switcher-cards (rf/sub [:shell/sorted-switcher-cards])
|
||||||
width (rf/sub [:dimensions/window-width])
|
width (rf/sub [:dimensions/window-width])
|
||||||
top (safe-area/get-top)
|
top (safe-area/get-top)
|
||||||
|
@ -107,20 +107,27 @@
|
||||||
[top-nav-blur-overlay top]
|
[top-nav-blur-overlay top]
|
||||||
[common.home/top-nav
|
[common.home/top-nav
|
||||||
{:type :shell
|
{:type :shell
|
||||||
|
:avatar {:customization-color customization-color}
|
||||||
:style {:margin-top top
|
:style {:margin-top top
|
||||||
:z-index 2}}]]))
|
:z-index 2}}]]))
|
||||||
|
|
||||||
(defn f-shell-stack
|
(defn f-shell-stack
|
||||||
[]
|
[]
|
||||||
(let [shared-values (animation/calculate-shared-values)]
|
(let [shared-values (animation/calculate-shared-values)
|
||||||
|
{:keys [key-uid]} (rf/sub [:multiaccount])
|
||||||
|
profile-color (:color (rf/sub [:onboarding-2/profile]))
|
||||||
|
customization-color (if profile-color
|
||||||
|
profile-color
|
||||||
|
(rf/sub [:profile/customization-color key-uid]))]
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style {:flex 1}}
|
{:style {:flex 1}}
|
||||||
[shell]
|
[shell customization-color]
|
||||||
[bottom-tabs/bottom-tabs]
|
[bottom-tabs/bottom-tabs]
|
||||||
[:f> home-stack/f-home-stack]
|
[:f> home-stack/f-home-stack]
|
||||||
[quo/floating-shell-button
|
[quo/floating-shell-button
|
||||||
{:jump-to {:on-press #(animation/close-home-stack true)
|
{:jump-to {:on-press #(animation/close-home-stack true)
|
||||||
:label (i18n/label :t/jump-to)}}
|
:label (i18n/label :t/jump-to)
|
||||||
|
:customization-color customization-color}}
|
||||||
{:position :absolute
|
{:position :absolute
|
||||||
:bottom (+ (shell.constants/bottom-tabs-container-height) 7)} ;; bottom offset is 12 = 7 +
|
:bottom (+ (shell.constants/bottom-tabs-container-height) 7)} ;; bottom offset is 12 = 7 +
|
||||||
;; 5(padding on button)
|
;; 5(padding on button)
|
||||||
|
|
|
@ -284,6 +284,12 @@
|
||||||
(multiaccounts/displayed-photo (or (when (= id public-key) multiaccount)
|
(multiaccounts/displayed-photo (or (when (= id public-key) multiaccount)
|
||||||
(get contacts id)))))
|
(get contacts id)))))
|
||||||
|
|
||||||
|
(re-frame/reg-sub
|
||||||
|
:profile/customization-color
|
||||||
|
:<- [:multiaccounts/multiaccounts]
|
||||||
|
(fn [multiaccounts [_ id]]
|
||||||
|
(:customization-color (get multiaccounts id))))
|
||||||
|
|
||||||
(re-frame/reg-sub
|
(re-frame/reg-sub
|
||||||
:chats/unread-messages-number
|
:chats/unread-messages-number
|
||||||
:<- [:chats/home-list-chats]
|
:<- [:chats/home-list-chats]
|
||||||
|
|
|
@ -309,7 +309,7 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase):
|
||||||
self.username = 'first user'
|
self.username = 'first user'
|
||||||
|
|
||||||
self.home = self.sign_in.create_user(username=self.username)
|
self.home = self.sign_in.create_user(username=self.username)
|
||||||
self.home.communities_tab.click_until_presence_of_element(self.home.plus_button)
|
self.home.communities_tab.click_until_presence_of_element(self.home.plus_community_button)
|
||||||
self.community_name = self.home.get_random_chat_name()
|
self.community_name = self.home.get_random_chat_name()
|
||||||
self.channel_name = 'general'
|
self.channel_name = 'general'
|
||||||
self.community = self.home.create_community(name=self.community_name, description='test description')
|
self.community = self.home.create_community(name=self.community_name, description='test description')
|
||||||
|
|
|
@ -188,6 +188,7 @@ class HomeView(BaseView):
|
||||||
super().__init__(driver)
|
super().__init__(driver)
|
||||||
|
|
||||||
self.plus_button = Button(self.driver, accessibility_id="new-chat-button")
|
self.plus_button = Button(self.driver, accessibility_id="new-chat-button")
|
||||||
|
self.plus_community_button = Button(self.driver, accessibility_id="new-communities-button")
|
||||||
self.chat_name_text = Text(self.driver, accessibility_id="chat-name-text")
|
self.chat_name_text = Text(self.driver, accessibility_id="chat-name-text")
|
||||||
self.start_new_chat_button = ChatButton(self.driver, accessibility_id="start-1-1-chat-button")
|
self.start_new_chat_button = ChatButton(self.driver, accessibility_id="start-1-1-chat-button")
|
||||||
self.new_group_chat_button = ChatButton(self.driver, accessibility_id="start-group-chat-button")
|
self.new_group_chat_button = ChatButton(self.driver, accessibility_id="start-group-chat-button")
|
||||||
|
@ -377,7 +378,7 @@ class HomeView(BaseView):
|
||||||
def create_community(self, name: str, description="some_description", set_image=False, file_name='sauce_logo.png',
|
def create_community(self, name: str, description="some_description", set_image=False, file_name='sauce_logo.png',
|
||||||
require_approval=True):
|
require_approval=True):
|
||||||
self.driver.info("## Creating community '%s', set image is set to '%s'" % (name, str(set_image)), device=False)
|
self.driver.info("## Creating community '%s', set image is set to '%s'" % (name, str(set_image)), device=False)
|
||||||
self.plus_button.click()
|
self.plus_community_button.click()
|
||||||
chat_view = self.communities_button.click()
|
chat_view = self.communities_button.click()
|
||||||
chat_view.community_name_edit_box.set_value(name)
|
chat_view.community_name_edit_box.set_value(name)
|
||||||
chat_view.community_description_edit_box.set_value(description)
|
chat_view.community_description_edit_box.set_value(description)
|
||||||
|
|
|
@ -1705,7 +1705,7 @@
|
||||||
"master-account": "Master account",
|
"master-account": "Master account",
|
||||||
"back-up": "Back up",
|
"back-up": "Back up",
|
||||||
"key-on-device": "Private key is saved on this device",
|
"key-on-device": "Private key is saved on this device",
|
||||||
"whats-trending": "See what's trending",
|
"favorite-communities": "Your favourite communities",
|
||||||
"seed-key-uid-mismatch": "Seed doesn't match",
|
"seed-key-uid-mismatch": "Seed doesn't match",
|
||||||
"seed-key-uid-mismatch-desc-1": "The seed phrase you entered does not match {{multiaccount-name}}",
|
"seed-key-uid-mismatch-desc-1": "The seed phrase you entered does not match {{multiaccount-name}}",
|
||||||
"seed-key-uid-mismatch-desc-2": "To manage keys for this account verify your seed phrase and try again.",
|
"seed-key-uid-mismatch-desc-2": "To manage keys for this account verify your seed phrase and try again.",
|
||||||
|
@ -2096,6 +2096,8 @@
|
||||||
"use-biometrics": "Use biometrics to fill in your password",
|
"use-biometrics": "Use biometrics to fill in your password",
|
||||||
"name-must-have-at-least-characters": "Name must have at least {{min-chars}} characters",
|
"name-must-have-at-least-characters": "Name must have at least {{min-chars}} characters",
|
||||||
"name-is-not-valid": "Name is not valid",
|
"name-is-not-valid": "Name is not valid",
|
||||||
|
"no-communities": "No communities",
|
||||||
|
"no-communities-sub-title": "Your communities will be shown here",
|
||||||
"mute-for-15-mins": "For 15 min",
|
"mute-for-15-mins": "For 15 min",
|
||||||
"mute-for-1-hour": "For 1 hour",
|
"mute-for-1-hour": "For 1 hour",
|
||||||
"mute-for-8-hours": "For 8 hours",
|
"mute-for-8-hours": "For 8 hours",
|
||||||
|
|