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

Implement context action share community QR code (#19700)

This commit is contained in:
Ibrahem Khalil 2024-04-25 13:49:17 +02:00 committed by GitHub
parent 6d6766dce1
commit 03f813c957
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 168 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/quo/components/gradient/gradient_cover/view.cljs
View File

@ -5,13 +5,13 @@
[react-native.linear-gradient :as linear-gradient]))
(defn view
[{:keys [customization-color opacity container-style height]
[{:keys [customization-color opacity container-style height bottom-color-override]
:or {customization-color :blue}}]
;; `when` added for safety, `linear-gradient` will break if `nil` is passed, the `:or`
;; destructuring won't work because it's only applied when the `:customization-color` key is
;; non-existent. While deleting an account the key exists and has a `nil` value.
(let [color-top (colors/resolve-color customization-color 50 20)
color-bottom (colors/resolve-color customization-color 50 0)]
color-bottom (or bottom-color-override (colors/resolve-color customization-color 50 0))]
(when (and color-top color-bottom)
[linear-gradient/linear-gradient
{:accessibility-label :gradient-cover

11
src/status_im/contexts/communities/actions/community_options/view.cljs
View File

@ -99,10 +99,13 @@
(defn show-qr
[id]
{:icon :i/qr-code
:accessibility-label :show-qr
:on-press #(js/alert (str "implement action" id))
:label (i18n/label :t/show-qr)})
(let [on-success #(rf/dispatch [:open-modal :screen/share-community
{:community-id id
:url %}])]
{:icon :i/qr-code
:accessibility-label :show-qr
:on-press #(rf/dispatch [:communities/get-community-share-data id on-success])
:label (i18n/label :t/show-qr)}))
(defn share-community
[id]

64
src/status_im/contexts/communities/actions/share_community/style.cljs Normal file
View File

@ -0,0 +1,64 @@
(ns status-im.contexts.communities.actions.share-community.style
(:require [quo.foundations.colors :as colors]))
(def horizontal-padding 20)
(def vertical-padding 12)
(def gradient-cover-padding 20)
(def qr-code-padding 12)
(def header-container
{:padding-horizontal horizontal-padding
:padding-vertical vertical-padding})
(def scan-notice
{:color colors/white-70-blur
:margin-top 16
:margin-left :auto
:margin-right :auto})
(defn community-name
[thumbnail]
{:margin-left (when thumbnail 8)})
(def qr-code-wrapper
{:padding-horizontal horizontal-padding
:margin-top 8})
(defn qr-code-size
[total-width]
(- total-width (* gradient-cover-padding 2) (* qr-code-padding 2)))
(defn gradient-cover-size
[total-width]
(- total-width (* gradient-cover-padding 2)))
(defn gradient-cover-wrapper
[width]
{:width (gradient-cover-size width)
:border-radius 16
:margin-left 20
:height "100%"})
(def share-button-container {:justify-self :flex-end})
(def qr-top-wrapper
{:margin 12
:margin-bottom 0
:flex-direction :row
:align-items :center
:justify-content :space-between})
(def community-avatar-dimension 32)
(def community-avatar
{:border-radius community-avatar-dimension
:width community-avatar-dimension
:height community-avatar-dimension})
(def qr-code-view
{:padding-vertical vertical-padding
:align-items :center})
(def text-wrapper
{:flex-direction :row
:align-items :center})

90
src/status_im/contexts/communities/actions/share_community/view.cljs Normal file
View File

@ -0,0 +1,90 @@
(ns status-im.contexts.communities.actions.share-community.view
(:require
[quo.core :as quo]
[quo.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]
[react-native.platform :as platform]
[react-native.safe-area :as safe-area]
[status-im.common.qr-codes.view :as qr-codes]
[status-im.common.resources :as resources]
[status-im.contexts.communities.actions.share-community.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn view
[]
(let [{:keys [url community-id]} (rf/sub [:get-screen-params])
window-width (rf/sub [:dimensions/window-width])
{thumbnail-uri :logo
color :color
community-name :name} (rf/sub [:communities/for-context-tag community-id])
navigate-back (rn/use-callback #(rf/dispatch [:navigate-back]))
on-press-share (rn/use-callback
(fn []
(rf/dispatch
[:open-share
{:options (if platform/ios?
{:activityItemSources
[{:placeholderItem {:type :text
:content url}
:item {:default {:type :text
:content url}}
:linkMetadata {:title (i18n/label
:t/share-community)}}]}
{:title (i18n/label :t/share-community)
:subject (i18n/label :t/share-community)
:message url
:isNewTask true})}]))
[url])]
[quo/overlay {:type :shell}
[rn/view
{:style {:padding-top (safe-area/get-top)}
:key :share-community}
[quo/page-nav
{:icon-name :i/close
:on-press navigate-back
:background :blur
:accessibility-label :top-bar}]
[quo/text-combinations
{:container-style style/header-container
:title (i18n/label :t/share-community)}]
[rn/view {:style style/qr-code-wrapper}
[quo/gradient-cover
{:container-style (style/gradient-cover-wrapper window-width)
:customization-color color
:bottom-color-override colors/white-opa-5}]
[rn/view
{:style style/qr-top-wrapper}
[rn/view {:style style/text-wrapper}
(when thumbnail-uri
[fast-image/fast-image
{:source {:uri thumbnail-uri}
:style style/community-avatar}])
[quo/text
{:size :heading-2
:weight :semi-bold
:style (style/community-name thumbnail-uri)}
community-name]]
[rn/view {:style style/share-button-container}
[quo/button
{:icon-only? true
:type :grey
:background :blur
:size 32
:accessibility-label :link-to-community
:on-press on-press-share}
:i/share]]]
[rn/view
{:style style/qr-code-view}
[qr-codes/qr-code
{:size (style/qr-code-size window-width)
:url url
:avatar :community
:customization-color color
:picture (or thumbnail-uri (resources/get-mock-image :status-logo))}]]]
[quo/text
{:size :paragraph-2
:weight :regular
:style style/scan-notice}
(i18n/label :t/scan-with-status-app)]]]))

5
src/status_im/navigation/screens.cljs
View File

@ -22,6 +22,7 @@
[status-im.contexts.communities.actions.invite-contacts.view :as communities.invite]
[status-im.contexts.communities.actions.request-to-join.view :as join-menu]
[status-im.contexts.communities.actions.share-community-channel.view :as share-community-channel]
[status-im.contexts.communities.actions.share-community.view :as share-community]
[status-im.contexts.communities.discover.view :as communities.discover]
[status-im.contexts.communities.overview.view :as communities.overview]
[status-im.contexts.onboarding.create-password.view :as create-password]
@ -147,6 +148,10 @@
:options options/transparent-screen-options
:component share-community-channel/view}
{:name :screen/share-community
:options options/transparent-screen-options
:component share-community/view}
;; Note: the sheet screen is used when selecting addresses to share when
;; joining a community. The non-sheet screen is used when editing shared
;; addresses after the join request was sent.