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 |
BIN
resources/images/ui2/discover@2x.png
Normal file
After Width: | Height: | Size: 44 KiB |
BIN
resources/images/ui2/discover@3x.png
Normal file
After Width: | Height: | Size: 82 KiB |
BIN
resources/images/ui2/invite-friends@2x.png
Normal file
After Width: | Height: | Size: 40 KiB |
BIN
resources/images/ui2/invite-friends@3x.png
Normal file
After Width: | Height: | Size: 40 KiB |
@ -57,10 +57,18 @@
|
||||
(def initials-avatar-text
|
||||
{:color colors/white-opa-70})
|
||||
|
||||
(defn inner-dot
|
||||
[size online?]
|
||||
(let [background (if online? colors/success-50 colors/neutral-40)
|
||||
dimensions (get-in sizes [size :status-indicator])]
|
||||
{:width (- dimensions 4)
|
||||
:height (- dimensions 4)
|
||||
:border-radius (- dimensions 4)
|
||||
:background-color background}))
|
||||
|
||||
(defn dot
|
||||
[size online? ring?]
|
||||
(let [background (if online? colors/success-50 colors/neutral-40)
|
||||
dimensions (get-in sizes [size :status-indicator])
|
||||
[size ring?]
|
||||
(let [dimensions (get-in sizes [size :status-indicator])
|
||||
border-width (get-in sizes [size :status-indicator-border])
|
||||
right (case size
|
||||
:big 2
|
||||
@ -73,11 +81,13 @@
|
||||
:small -2
|
||||
0)]
|
||||
{:position :absolute
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:bottom bottom
|
||||
:right right
|
||||
:width dimensions
|
||||
:height dimensions
|
||||
:border-width border-width
|
||||
:border-radius dimensions
|
||||
:border-color (colors/theme-colors colors/white colors/neutral-100)
|
||||
:background-color background}))
|
||||
:background-color (colors/theme-colors colors/white colors/neutral-100)
|
||||
:border-color (colors/theme-colors colors/white colors/neutral-100)}))
|
||||
|
@ -62,4 +62,7 @@
|
||||
(when status-indicator?
|
||||
[rn/view
|
||||
{: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
|
||||
:icon-secondary-color colors/neutral-40
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/neutral-80
|
||||
:background-color {:default colors/neutral-90
|
||||
:pressed colors/neutral-60
|
||||
:disabled colors/neutral-80}}
|
||||
:disabled colors/neutral-90}}
|
||||
:dark-grey {:icon-color colors/white
|
||||
:icon-secondary-color colors/neutral-40
|
||||
:label-color colors/white
|
||||
|
38
src/quo2/components/community/banner/style.cljs
Normal file
@ -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})
|
46
src/quo2/components/community/banner/view.cljs
Normal file
@ -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}})
|
||||
|
||||
(def themes
|
||||
{:light {:background-color colors/neutral-20}
|
||||
:dark {:background-color colors/neutral-80}})
|
||||
{:light {:background-color colors/neutral-10}
|
||||
:dark {:background-color colors/neutral-90}})
|
||||
|
||||
(defn segmented-control
|
||||
[{:keys [default-active on-change]}]
|
||||
|
@ -59,22 +59,22 @@
|
||||
{:opacity tab-background-opacity}))))
|
||||
|
||||
(def themes
|
||||
{:light {:default {:background-color colors/neutral-20
|
||||
{:light {:default {:background-color colors/neutral-10
|
||||
:icon-color colors/neutral-50
|
||||
:label {:style {:color colors/neutral-100}}}
|
||||
:active {:background-color colors/neutral-50
|
||||
:icon-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
|
||||
: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
|
||||
:label {:style {:color colors/white}}}
|
||||
:active {:background-color colors/neutral-60
|
||||
:icon-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
|
||||
:label {:style {:color colors/white}}}}})
|
||||
|
||||
|
@ -15,7 +15,7 @@
|
||||
quo2.components.community.community-card-view
|
||||
quo2.components.community.community-list-view
|
||||
quo2.components.community.community-view
|
||||
quo2.components.community.discover-card
|
||||
quo2.components.community.banner.view
|
||||
quo2.components.community.icon
|
||||
quo2.components.community.token-gating
|
||||
quo2.components.counter.counter
|
||||
@ -143,7 +143,7 @@
|
||||
(def community-tags quo2.components.community.community-view/community-tags)
|
||||
(def community-title quo2.components.community.community-view/community-title)
|
||||
(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 community-icon quo2.components.community.icon/community-icon)
|
||||
|
||||
|
@ -262,7 +262,7 @@
|
||||
(custom-color color suffix-dark opacity-dark)
|
||||
(custom-color color suffix-light opacity-light))))
|
||||
|
||||
(def shadow "rgba(9,16,28,0.04)")
|
||||
(def shadow "rgba(9,16,28,0.08)")
|
||||
|
||||
;;General
|
||||
|
||||
|
@ -9,14 +9,15 @@
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn title-column
|
||||
[{:keys [label handler accessibility-label]}]
|
||||
[{:keys [label handler accessibility-label customization-color]}]
|
||||
[rn/view style/title-column
|
||||
[rn/view {:flex 1}
|
||||
[quo/text style/title-column-text
|
||||
label]]
|
||||
[plus-button/plus-button
|
||||
{:on-press handler
|
||||
:accessibility-label accessibility-label}]])
|
||||
:accessibility-label accessibility-label
|
||||
:customization-color customization-color}]])
|
||||
|
||||
(defn- get-button-common-props
|
||||
[type]
|
||||
@ -49,14 +50,17 @@
|
||||
|
||||
(defn- left-section
|
||||
[{:keys [avatar]}]
|
||||
[rn/touchable-without-feedback {:on-press #(rf/dispatch [:navigate-to :my-profile])}
|
||||
[rn/view
|
||||
{:accessibility-label :open-profile
|
||||
:style style/left-section}
|
||||
[quo/user-avatar
|
||||
(merge {:status-indicator? true
|
||||
:size :small}
|
||||
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/view
|
||||
{:accessibility-label :open-profile
|
||||
:style style/left-section}
|
||||
[quo/user-avatar
|
||||
(merge {:status-indicator? true
|
||||
:size :small
|
||||
:online? online?}
|
||||
avatar)]]]))
|
||||
|
||||
(defn connectivity-sheet
|
||||
[]
|
||||
|
@ -2,11 +2,12 @@
|
||||
(:require [quo2.components.buttons.button :as quo2.button]))
|
||||
|
||||
(defn plus-button
|
||||
[{:keys [on-press accessibility-label]}]
|
||||
[{:keys [on-press accessibility-label customization-color]}]
|
||||
[quo2.button/button
|
||||
{:type :primary
|
||||
:size 32
|
||||
:icon true
|
||||
:accessibility-label (or accessibility-label :plus-button)
|
||||
:on-press on-press}
|
||||
:on-press on-press
|
||||
:customization-color customization-color}
|
||||
:i/add])
|
@ -18,7 +18,9 @@
|
||||
:keycard-logo (js/require "../resources/images/ui2/keycard-logo.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-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
|
||||
{:coinbase (js/require "../resources/images/mock2/coinbase.png")
|
||||
|
@ -1,20 +1,21 @@
|
||||
(ns status-im2.contexts.chat.home.view
|
||||
(:require [utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]
|
||||
[quo2.core :as quo]
|
||||
[re-frame.core :as re-frame]
|
||||
[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.home.view :as common.home]
|
||||
[status-im2.contexts.chat.home.chat-list-item.view :as chat-list-item]
|
||||
[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.home.actions.view :as actions]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[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.common.resources :as resources]
|
||||
[status-im2.contexts.chat.actions.view :as home.sheet]))
|
||||
|
||||
(defn get-item-layout
|
||||
@ -102,8 +103,12 @@
|
||||
[]
|
||||
(fn []
|
||||
(let [pending-contact-requests (rf/sub [:activity-center/pending-contact-requests])
|
||||
selected-tab (or (rf/sub [:messages-home/selected-tab])
|
||||
:tab/recent)
|
||||
selected-tab (or (rf/sub [:messages-home/selected-tab]) :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)]
|
||||
[:<>
|
||||
(if (= selected-tab :tab/contacts)
|
||||
@ -115,13 +120,17 @@
|
||||
{:blur-amount (if platform/ios? 20 10)
|
||||
:blur-type (if (colors/dark?) :dark (if platform/ios? :light :xlight))
|
||||
:style style/blur}]
|
||||
[common.home/top-nav]
|
||||
[common.home/top-nav
|
||||
{:type :grey
|
||||
:avatar {:customization-color customization-color}}]
|
||||
[common.home/title-column
|
||||
{:label (i18n/label :t/messages)
|
||||
: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
|
||||
{: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)}]
|
||||
^{:key (str "tabs-" selected-tab)}
|
||||
[quo/tabs
|
||||
|
@ -1,5 +1,6 @@
|
||||
(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
|
||||
{:padding-horizontal 20
|
||||
@ -13,6 +14,22 @@
|
||||
:left 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
|
||||
[top]
|
||||
{:overflow (if platform/ios? :visible :hidden)
|
||||
|
@ -1,15 +1,16 @@
|
||||
(ns status-im2.contexts.communities.home.view
|
||||
(: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]
|
||||
[quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[react-native.blur :as blur]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im2.contexts.communities.home.style :as style]
|
||||
[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]))
|
||||
|
||||
(defn item-render
|
||||
@ -32,38 +33,64 @@
|
||||
{:id :pending :label (i18n/label :t/pending) :accessibility-label :pending-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
|
||||
[]
|
||||
(fn []
|
||||
(let [selected-tab (or (rf/sub [:communities/selected-tab]) :joined)
|
||||
{: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
|
||||
:joined joined
|
||||
:pending pending
|
||||
:opened opened)
|
||||
top (safe-area/get-top)]
|
||||
[:<>
|
||||
[rn/flat-list
|
||||
{:key-fn :id
|
||||
:content-inset-adjustment-behavior :never
|
||||
:header [rn/view {:height (+ 245 top)}]
|
||||
:render-fn item-render
|
||||
:data selected-items}]
|
||||
(if (empty? selected-items)
|
||||
[empty-state]
|
||||
[rn/flat-list
|
||||
{:key-fn :id
|
||||
:content-inset-adjustment-behavior :never
|
||||
:header [rn/view (style/header-height top)]
|
||||
:render-fn item-render
|
||||
:data selected-items}])
|
||||
[rn/view
|
||||
{:style (style/blur-container top)}
|
||||
[blur/view
|
||||
{:blur-amount (if platform/ios? 20 10)
|
||||
:blur-type (if (colors/dark?) :dark (if platform/ios? :light :xlight))
|
||||
:style style/blur}]
|
||||
[common.home/top-nav]
|
||||
[common.home/top-nav
|
||||
{:type :grey
|
||||
:avatar {:customization-color customization-color}}]
|
||||
[common.home/title-column
|
||||
{:label (i18n/label :t/communities)
|
||||
: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
|
||||
{:on-press #(rf/dispatch [:navigate-to :discover-communities])
|
||||
: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}]
|
||||
^{:key (str "tabs-" selected-tab)}
|
||||
[quo/tabs
|
||||
|
@ -4,8 +4,10 @@
|
||||
[quo2.foundations.colors :as colors]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]
|
||||
[re-frame.core :as re-frame]
|
||||
[react-native.core :as rn]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[status-im2.constants :as constants]
|
||||
[status-im2.contexts.onboarding.welcome.style :as style]
|
||||
[status-im2.contexts.onboarding.common.background.view :as background]))
|
||||
|
||||
@ -33,11 +35,19 @@
|
||||
:type :shell
|
||||
: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
|
||||
[]
|
||||
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))
|
||||
insets (safe-area/get-insets)]
|
||||
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))
|
||||
{:keys [status-type]} (rf/sub [:multiaccount/current-user-visibility-status])
|
||||
insets (safe-area/get-insets)]
|
||||
[rn/view {:style (style/page-container insets)}
|
||||
(when (nil? status-type)
|
||||
(dispatch-visibility-status-update constants/visibility-status-automatic))
|
||||
[background/view true]
|
||||
[navigation-bar :enable-notifications]
|
||||
[page-title]
|
||||
|
@ -1,7 +1,7 @@
|
||||
(ns status-im2.contexts.quo-preview.community.discover-card
|
||||
(:require [quo.previews.preview :as preview]
|
||||
[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]
|
||||
[reagent.core :as reagent]
|
||||
[utils.i18n :as i18n]))
|
||||
@ -24,10 +24,10 @@
|
||||
[rn/view
|
||||
{:padding-vertical 60
|
||||
:justify-content :center}
|
||||
[discover-card/discover-card
|
||||
[discover-card/view
|
||||
{:joined? (:joined? @state)
|
||||
:title (i18n/label :t/discover)
|
||||
:description (i18n/label :t/whats-trending)}]]]])))
|
||||
:description (i18n/label :t/favorite-communities)}]]]])))
|
||||
|
||||
(defn preview-discoverd-card
|
||||
[]
|
||||
|
@ -91,7 +91,7 @@
|
||||
[blur/view (bottom-tabs/blur-overlay-params style/top-nav-blur-overlay)])]))
|
||||
|
||||
(defn shell
|
||||
[]
|
||||
[customization-color]
|
||||
(let [switcher-cards (rf/sub [:shell/sorted-switcher-cards])
|
||||
width (rf/sub [:dimensions/window-width])
|
||||
top (safe-area/get-top)
|
||||
@ -106,21 +106,28 @@
|
||||
[jump-to-list switcher-cards shell-margin]
|
||||
[top-nav-blur-overlay top]
|
||||
[common.home/top-nav
|
||||
{:type :shell
|
||||
:style {:margin-top top
|
||||
:z-index 2}}]]))
|
||||
{:type :shell
|
||||
:avatar {:customization-color customization-color}
|
||||
:style {:margin-top top
|
||||
:z-index 2}}]]))
|
||||
|
||||
(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
|
||||
{:style {:flex 1}}
|
||||
[shell]
|
||||
[shell customization-color]
|
||||
[bottom-tabs/bottom-tabs]
|
||||
[:f> home-stack/f-home-stack]
|
||||
[quo/floating-shell-button
|
||||
{:jump-to {:on-press #(animation/close-home-stack true)
|
||||
:label (i18n/label :t/jump-to)}}
|
||||
{:jump-to {:on-press #(animation/close-home-stack true)
|
||||
:label (i18n/label :t/jump-to)
|
||||
:customization-color customization-color}}
|
||||
{:position :absolute
|
||||
:bottom (+ (shell.constants/bottom-tabs-container-height) 7)} ;; bottom offset is 12 = 7 +
|
||||
;; 5(padding on button)
|
||||
|
@ -284,6 +284,12 @@
|
||||
(multiaccounts/displayed-photo (or (when (= id public-key) multiaccount)
|
||||
(get contacts id)))))
|
||||
|
||||
(re-frame/reg-sub
|
||||
:profile/customization-color
|
||||
:<- [:multiaccounts/multiaccounts]
|
||||
(fn [multiaccounts [_ id]]
|
||||
(:customization-color (get multiaccounts id))))
|
||||
|
||||
(re-frame/reg-sub
|
||||
:chats/unread-messages-number
|
||||
:<- [:chats/home-list-chats]
|
||||
|
@ -309,7 +309,7 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase):
|
||||
self.username = 'first user'
|
||||
|
||||
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.channel_name = 'general'
|
||||
self.community = self.home.create_community(name=self.community_name, description='test description')
|
||||
|
@ -188,6 +188,7 @@ class HomeView(BaseView):
|
||||
super().__init__(driver)
|
||||
|
||||
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.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")
|
||||
@ -377,7 +378,7 @@ class HomeView(BaseView):
|
||||
def create_community(self, name: str, description="some_description", set_image=False, file_name='sauce_logo.png',
|
||||
require_approval=True):
|
||||
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.community_name_edit_box.set_value(name)
|
||||
chat_view.community_description_edit_box.set_value(description)
|
||||
|
@ -1705,7 +1705,7 @@
|
||||
"master-account": "Master account",
|
||||
"back-up": "Back up",
|
||||
"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-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.",
|
||||
@ -2096,6 +2096,8 @@
|
||||
"use-biometrics": "Use biometrics to fill in your password",
|
||||
"name-must-have-at-least-characters": "Name must have at least {{min-chars}} characters",
|
||||
"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-1-hour": "For 1 hour",
|
||||
"mute-for-8-hours": "For 8 hours",
|
||||
|