From 45763174f4b9c237aa189fd59e41e78ebd0bb2c0 Mon Sep 17 00:00:00 2001 From: ibrkhalil Date: Thu, 18 Apr 2024 08:57:20 +0200 Subject: [PATCH 01/10] Implement context action share community QR code --- .../actions/community_options/view.cljs | 2 +- .../actions/share_community/view.cljs | 48 +++++++++++++++++++ .../contexts/communities/sharing/events.cljs | 7 +++ src/status_im/navigation/screens.cljs | 7 +++ 4 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 src/status_im/contexts/communities/actions/share_community/view.cljs diff --git a/src/status_im/contexts/communities/actions/community_options/view.cljs b/src/status_im/contexts/communities/actions/community_options/view.cljs index a8e16850e4f..a1c73907b16 100644 --- a/src/status_im/contexts/communities/actions/community_options/view.cljs +++ b/src/status_im/contexts/communities/actions/community_options/view.cljs @@ -101,7 +101,7 @@ [id] {:icon :i/qr-code :accessibility-label :show-qr - :on-press #(js/alert (str "implement action" id)) + :on-press #(rf/dispatch [:communities/share-community-url-qr-code id]) :label (i18n/label :t/show-qr)}) (defn share-community diff --git a/src/status_im/contexts/communities/actions/share_community/view.cljs b/src/status_im/contexts/communities/actions/share_community/view.cljs new file mode 100644 index 00000000000..0404d22e5c8 --- /dev/null +++ b/src/status_im/contexts/communities/actions/share_community/view.cljs @@ -0,0 +1,48 @@ +(ns status-im.contexts.communities.actions.share-community.view + (:require + [quo.core :as quo] + [react-native.core :as rn] + [react-native.safe-area :as safe-area] + [status-im.common.qr-codes.view :as qr-codes] + [status-im.contexts.communities.actions.share-community-channel.style :as style] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(defn view + [] + (fn [] + (let [{:keys [url community-id]} (rf/sub [:get-screen-params]) + {:keys [images color] + community-name :name} (rf/sub [:communities/community community-id]) + thumbnail (:thumbnail images) + window-width (rf/sub [:dimensions/window-width])] + [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 #(rf/dispatch [: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}] + [rn/view + {:style {:padding-vertical 12}} + [qr-codes/qr-code + {:size (style/qr-code-size window-width) + :url url + :avatar :community + :customization-color color + :picture thumbnail + :full-name community-name}]]] + [quo/text + {:size :paragraph-2 + :weight :regular + :style style/scan-notice} + (i18n/label :t/scan-with-status-app)]]]))) diff --git a/src/status_im/contexts/communities/sharing/events.cljs b/src/status_im/contexts/communities/sharing/events.cljs index c506fd539cb..04da1b3454f 100644 --- a/src/status_im/contexts/communities/sharing/events.cljs +++ b/src/status_im/contexts/communities/sharing/events.cljs @@ -38,6 +38,13 @@ :url %}])] {:fx [[:dispatch [:communities/get-community-channel-share-data chat-id on-success]]]}))) +(rf/reg-event-fx :communities/share-community-url-qr-code + (fn [_ [community-id]] + (let [on-success #(rf/dispatch [:open-modal :share-community + {:community-id community-id + :url %}])] + {:fx [[:dispatch [:communities/get-community-share-data community-id on-success]]]}))) + (rf/reg-event-fx :communities/share-community-channel-url-with-data (fn [_ [chat-id]] (let [title (i18n/label :t/channel-on-status) diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index fdd33d7ed09..b7bb0117ee1 100644 --- a/src/status_im/navigation/screens.cljs +++ b/src/status_im/navigation/screens.cljs @@ -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] @@ -140,6 +141,12 @@ :options options/transparent-screen-options :component share-community-channel/view} + {:name :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. From 2f715811f2c6fdfc756e19c228d2d517d44d2ade Mon Sep 17 00:00:00 2001 From: ibrkhalil Date: Thu, 18 Apr 2024 11:28:40 +0200 Subject: [PATCH 02/10] Improvements --- .../gradient/gradient_cover/view.cljs | 6 +- .../actions/share_community/style.cljs | 52 ++++++++ .../actions/share_community/view.cljs | 114 ++++++++++++------ src/status_im/navigation/screens.cljs | 2 - 4 files changed, 133 insertions(+), 41 deletions(-) create mode 100644 src/status_im/contexts/communities/actions/share_community/style.cljs diff --git a/src/quo/components/gradient/gradient_cover/view.cljs b/src/quo/components/gradient/gradient_cover/view.cljs index 2d610b31f88..7b8dd71444b 100644 --- a/src/quo/components/gradient/gradient_cover/view.cljs +++ b/src/quo/components/gradient/gradient_cover/view.cljs @@ -4,14 +4,14 @@ [quo.foundations.colors :as colors] [react-native.linear-gradient :as linear-gradient])) -(defn view - [{:keys [customization-color opacity container-style height] +(defn- view-internal + [{: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 colors/white 50 5))] (when (and color-top color-bottom) [linear-gradient/linear-gradient {:accessibility-label :gradient-cover diff --git a/src/status_im/contexts/communities/actions/share_community/style.cljs b/src/status_im/contexts/communities/actions/share_community/style.cljs new file mode 100644 index 00000000000..ab81fbe5527 --- /dev/null +++ b/src/status_im/contexts/communities/actions/share_community/style.cljs @@ -0,0 +1,52 @@ +(ns status-im.contexts.communities.actions.share-community.style + (:require [quo.foundations.colors :as colors])) + +(def header-container + {:padding-horizontal 20 + :padding-vertical 12}) + +(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 20 + :margin-top 8}) + +(def gradient-cover-padding 20) +(def qr-code-padding 12) + +(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 + {:border-radius 32 + :width 32 + :height 32}) diff --git a/src/status_im/contexts/communities/actions/share_community/view.cljs b/src/status_im/contexts/communities/actions/share_community/view.cljs index 0404d22e5c8..676ce28e066 100644 --- a/src/status_im/contexts/communities/actions/share_community/view.cljs +++ b/src/status_im/contexts/communities/actions/share_community/view.cljs @@ -2,47 +2,89 @@ (:require [quo.core :as quo] [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.contexts.communities.actions.share-community-channel.style :as style] + [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 [] - (fn [] - (let [{:keys [url community-id]} (rf/sub [:get-screen-params]) - {:keys [images color] - community-name :name} (rf/sub [:communities/community community-id]) - thumbnail (:thumbnail images) - window-width (rf/sub [:dimensions/window-width])] - [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 #(rf/dispatch [: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}] + (let [{:keys [url community-id]} (rf/sub [:get-screen-params]) + window-width (rf/sub [:dimensions/window-width])] + (fn [] + (let [{{:keys [thumbnail]} :images + color :color + community-name :name} (rf/sub [:communities/community community-id]) + navigate-back (rn/use-callback #(rf/dispatch [:navigate-back])) + on-press-share (rn/use-callback + #(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})}]))] + [quo/overlay {:type :shell} [rn/view - {:style {:padding-vertical 12}} - [qr-codes/qr-code - {:size (style/qr-code-size window-width) - :url url - :avatar :community - :customization-color color - :picture thumbnail - :full-name community-name}]]] - [quo/text - {:size :paragraph-2 - :weight :regular - :style style/scan-notice} - (i18n/label :t/scan-with-status-app)]]]))) + {: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}] + [rn/view + {:style style/qr-top-wrapper} + [rn/view {:flex-direction :row} + (when thumbnail + [fast-image/fast-image + {:source thumbnail + :style style/community-avatar}]) + [quo/text + {:size :heading-2 + :weight :semi-bold + :style (style/community-name thumbnail)} + 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 {:padding-vertical 12 + :align-items :center}} + [qr-codes/qr-code + {:size (style/qr-code-size window-width) + :url url + :avatar :community + :customization-color color + :picture (or thumbnail (resources/get-mock-image :status-logo)) + :full-name community-name}]]] + [quo/text + {:size :paragraph-2 + :weight :regular + :style style/scan-notice} + (i18n/label :t/scan-with-status-app)]]])))) diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index b7bb0117ee1..a31be5cb4fe 100644 --- a/src/status_im/navigation/screens.cljs +++ b/src/status_im/navigation/screens.cljs @@ -145,8 +145,6 @@ :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. From a4b4217646df855113ad7ce05e87994bf4577409 Mon Sep 17 00:00:00 2001 From: ibrkhalil Date: Thu, 18 Apr 2024 11:52:19 +0200 Subject: [PATCH 03/10] cleanup --- src/quo/components/gradient/gradient_cover/view.cljs | 2 +- .../contexts/communities/actions/share_community/view.cljs | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/quo/components/gradient/gradient_cover/view.cljs b/src/quo/components/gradient/gradient_cover/view.cljs index 7b8dd71444b..9227d7e68a8 100644 --- a/src/quo/components/gradient/gradient_cover/view.cljs +++ b/src/quo/components/gradient/gradient_cover/view.cljs @@ -11,7 +11,7 @@ ;; 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 (or bottom-color-override (colors/resolve-color colors/white 50 5))] + 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 diff --git a/src/status_im/contexts/communities/actions/share_community/view.cljs b/src/status_im/contexts/communities/actions/share_community/view.cljs index 676ce28e066..1dad3daeb93 100644 --- a/src/status_im/contexts/communities/actions/share_community/view.cljs +++ b/src/status_im/contexts/communities/actions/share_community/view.cljs @@ -1,6 +1,7 @@ (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] @@ -50,8 +51,9 @@ :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}] + {: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 {:flex-direction :row} From a9693cb9e34ace1e9b83828947ae965ec9e6d089 Mon Sep 17 00:00:00 2001 From: ibrkhalil Date: Thu, 18 Apr 2024 17:20:00 +0200 Subject: [PATCH 04/10] PR reviews --- .../actions/community_options/view.cljs | 11 +- .../actions/share_community/view.cljs | 150 +++++++++--------- .../contexts/communities/sharing/events.cljs | 7 - src/status_im/navigation/screens.cljs | 2 +- 4 files changed, 82 insertions(+), 88 deletions(-) diff --git a/src/status_im/contexts/communities/actions/community_options/view.cljs b/src/status_im/contexts/communities/actions/community_options/view.cljs index a1c73907b16..0dd2d769e8c 100644 --- a/src/status_im/contexts/communities/actions/community_options/view.cljs +++ b/src/status_im/contexts/communities/actions/community_options/view.cljs @@ -99,10 +99,13 @@ (defn show-qr [id] - {:icon :i/qr-code - :accessibility-label :show-qr - :on-press #(rf/dispatch [:communities/share-community-url-qr-code 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] diff --git a/src/status_im/contexts/communities/actions/share_community/view.cljs b/src/status_im/contexts/communities/actions/share_community/view.cljs index 1dad3daeb93..cdcd14f0386 100644 --- a/src/status_im/contexts/communities/actions/share_community/view.cljs +++ b/src/status_im/contexts/communities/actions/share_community/view.cljs @@ -14,79 +14,77 @@ (defn view [] - (let [{:keys [url community-id]} (rf/sub [:get-screen-params]) - window-width (rf/sub [:dimensions/window-width])] - (fn [] - (let [{{:keys [thumbnail]} :images - color :color - community-name :name} (rf/sub [:communities/community community-id]) - navigate-back (rn/use-callback #(rf/dispatch [:navigate-back])) - on-press-share (rn/use-callback - #(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})}]))] - [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 {:flex-direction :row} - (when thumbnail - [fast-image/fast-image - {:source thumbnail - :style style/community-avatar}]) - [quo/text - {:size :heading-2 - :weight :semi-bold - :style (style/community-name thumbnail)} - 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 {:padding-vertical 12 - :align-items :center}} - [qr-codes/qr-code - {:size (style/qr-code-size window-width) - :url url - :avatar :community - :customization-color color - :picture (or thumbnail (resources/get-mock-image :status-logo)) - :full-name community-name}]]] - [quo/text - {:size :paragraph-2 - :weight :regular - :style style/scan-notice} - (i18n/label :t/scan-with-status-app)]]])))) + (let [{:keys [url community-id]} (rf/sub [:get-screen-params]) + window-width (rf/sub [:dimensions/window-width]) + {{:keys [thumbnail]} :images + color :color + community-name :name} (rf/sub [:communities/community community-id]) + navigate-back (rn/use-callback #(rf/dispatch [:navigate-back])) + on-press-share (rn/use-callback + #(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})}]))] + [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 {:flex-direction :row} + (when thumbnail + [fast-image/fast-image + {:source thumbnail + :style style/community-avatar}]) + [quo/text + {:size :heading-2 + :weight :semi-bold + :style (style/community-name thumbnail)} + 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 {:padding-vertical 12 + :align-items :center}} + [qr-codes/qr-code + {:size (style/qr-code-size window-width) + :url url + :avatar :community + :customization-color color + :picture (or thumbnail (resources/get-mock-image :status-logo)) + :full-name community-name}]]] + [quo/text + {:size :paragraph-2 + :weight :regular + :style style/scan-notice} + (i18n/label :t/scan-with-status-app)]]])) diff --git a/src/status_im/contexts/communities/sharing/events.cljs b/src/status_im/contexts/communities/sharing/events.cljs index 04da1b3454f..c506fd539cb 100644 --- a/src/status_im/contexts/communities/sharing/events.cljs +++ b/src/status_im/contexts/communities/sharing/events.cljs @@ -38,13 +38,6 @@ :url %}])] {:fx [[:dispatch [:communities/get-community-channel-share-data chat-id on-success]]]}))) -(rf/reg-event-fx :communities/share-community-url-qr-code - (fn [_ [community-id]] - (let [on-success #(rf/dispatch [:open-modal :share-community - {:community-id community-id - :url %}])] - {:fx [[:dispatch [:communities/get-community-share-data community-id on-success]]]}))) - (rf/reg-event-fx :communities/share-community-channel-url-with-data (fn [_ [chat-id]] (let [title (i18n/label :t/channel-on-status) diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index a31be5cb4fe..596780cf612 100644 --- a/src/status_im/navigation/screens.cljs +++ b/src/status_im/navigation/screens.cljs @@ -141,7 +141,7 @@ :options options/transparent-screen-options :component share-community-channel/view} - {:name :share-community + {:name :screen/share-community :options options/transparent-screen-options :component share-community/view} From 1d97561e4349bde660e4170cf6f6c058754a89d5 Mon Sep 17 00:00:00 2001 From: ibrkhalil Date: Fri, 19 Apr 2024 07:35:25 +0200 Subject: [PATCH 05/10] Refactors --- .../actions/share_community/style.cljs | 29 ++++++++++++------- .../actions/share_community/view.cljs | 5 ++-- 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/src/status_im/contexts/communities/actions/share_community/style.cljs b/src/status_im/contexts/communities/actions/share_community/style.cljs index ab81fbe5527..bbe2c9b415b 100644 --- a/src/status_im/contexts/communities/actions/share_community/style.cljs +++ b/src/status_im/contexts/communities/actions/share_community/style.cljs @@ -1,9 +1,15 @@ (ns status-im.contexts.communities.actions.share-community.style (:require [quo.foundations.colors :as colors])) +(def flex-direction-row {:flex-direction :row}) +(def horizontal-padding 20) +(def vertical-padding 12) +(def gradient-cover-padding 20) +(def qr-code-padding 12) + (def header-container - {:padding-horizontal 20 - :padding-vertical 12}) + {:padding-horizontal horizontal-padding + :padding-vertical vertical-padding}) (def scan-notice {:color colors/white-70-blur @@ -16,12 +22,9 @@ {:margin-left (when thumbnail 8)}) (def qr-code-wrapper - {:padding-horizontal 20 + {:padding-horizontal horizontal-padding :margin-top 8}) -(def gradient-cover-padding 20) -(def qr-code-padding 12) - (defn qr-code-size [total-width] (- total-width (* gradient-cover-padding 2) (* qr-code-padding 2))) @@ -42,11 +45,17 @@ (def qr-top-wrapper {:margin 12 :margin-bottom 0 - :flex-direction :row + :flex-direction (:flex-direction flex-direction-row) :align-items :center :justify-content :space-between}) +(def community-avatar-dimension 32) + (def community-avatar - {:border-radius 32 - :width 32 - :height 32}) + {:border-radius community-avatar-dimension + :width community-avatar-dimension + :height community-avatar-dimension}) + +(def qr-code-view + {:padding-vertical vertical-padding + :align-items :center}) diff --git a/src/status_im/contexts/communities/actions/share_community/view.cljs b/src/status_im/contexts/communities/actions/share_community/view.cljs index cdcd14f0386..d3fe5e4429f 100644 --- a/src/status_im/contexts/communities/actions/share_community/view.cljs +++ b/src/status_im/contexts/communities/actions/share_community/view.cljs @@ -54,7 +54,7 @@ :bottom-color-override colors/white-opa-5}] [rn/view {:style style/qr-top-wrapper} - [rn/view {:flex-direction :row} + [rn/view style/flex-direction-row (when thumbnail [fast-image/fast-image {:source thumbnail @@ -74,8 +74,7 @@ :on-press on-press-share} :i/share]]] [rn/view - {:style {:padding-vertical 12 - :align-items :center}} + {:style style/qr-code-view} [qr-codes/qr-code {:size (style/qr-code-size window-width) :url url From def62ccb5230226b19ed14a52a3194dce68c3dbf Mon Sep 17 00:00:00 2001 From: ibrkhalil Date: Sun, 21 Apr 2024 12:51:19 +0200 Subject: [PATCH 06/10] Icaro's comments --- .../actions/share_community/style.cljs | 3 +- .../actions/share_community/view.cljs | 46 +++++++++---------- 2 files changed, 24 insertions(+), 25 deletions(-) diff --git a/src/status_im/contexts/communities/actions/share_community/style.cljs b/src/status_im/contexts/communities/actions/share_community/style.cljs index bbe2c9b415b..d07d8cdc851 100644 --- a/src/status_im/contexts/communities/actions/share_community/style.cljs +++ b/src/status_im/contexts/communities/actions/share_community/style.cljs @@ -1,7 +1,6 @@ (ns status-im.contexts.communities.actions.share-community.style (:require [quo.foundations.colors :as colors])) -(def flex-direction-row {:flex-direction :row}) (def horizontal-padding 20) (def vertical-padding 12) (def gradient-cover-padding 20) @@ -45,7 +44,7 @@ (def qr-top-wrapper {:margin 12 :margin-bottom 0 - :flex-direction (:flex-direction flex-direction-row) + :flex-direction (:flex-direction :row) :align-items :center :justify-content :space-between}) diff --git a/src/status_im/contexts/communities/actions/share_community/view.cljs b/src/status_im/contexts/communities/actions/share_community/view.cljs index d3fe5e4429f..d198b901696 100644 --- a/src/status_im/contexts/communities/actions/share_community/view.cljs +++ b/src/status_im/contexts/communities/actions/share_community/view.cljs @@ -16,25 +16,25 @@ [] (let [{:keys [url community-id]} (rf/sub [:get-screen-params]) window-width (rf/sub [:dimensions/window-width]) - {{:keys [thumbnail]} :images - color :color - community-name :name} (rf/sub [:communities/community community-id]) + {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 - #(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})}]))] + 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)} @@ -54,15 +54,15 @@ :bottom-color-override colors/white-opa-5}] [rn/view {:style style/qr-top-wrapper} - [rn/view style/flex-direction-row - (when thumbnail + [rn/view {:style {:flex-direction :row}} + (when thumbnail-uri [fast-image/fast-image - {:source thumbnail + {:source {:uri thumbnail-uri} :style style/community-avatar}]) [quo/text {:size :heading-2 :weight :semi-bold - :style (style/community-name thumbnail)} + :style (style/community-name thumbnail-uri)} community-name]] [rn/view {:style style/share-button-container} [quo/button @@ -80,7 +80,7 @@ :url url :avatar :community :customization-color color - :picture (or thumbnail (resources/get-mock-image :status-logo)) + :picture (or thumbnail-uri (resources/get-mock-image :status-logo)) :full-name community-name}]]] [quo/text {:size :paragraph-2 From 8929d15063802e75636178825d11e935ee952540 Mon Sep 17 00:00:00 2001 From: ibrkhalil Date: Sun, 21 Apr 2024 12:51:53 +0200 Subject: [PATCH 07/10] Conflicts --- src/quo/components/gradient/gradient_cover/view.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/quo/components/gradient/gradient_cover/view.cljs b/src/quo/components/gradient/gradient_cover/view.cljs index 9227d7e68a8..0a601c942ee 100644 --- a/src/quo/components/gradient/gradient_cover/view.cljs +++ b/src/quo/components/gradient/gradient_cover/view.cljs @@ -4,7 +4,7 @@ [quo.foundations.colors :as colors] [react-native.linear-gradient :as linear-gradient])) -(defn- view-internal +(defn view [{: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` From 7f1e2b7515a5c78d293045032674f4595738362f Mon Sep 17 00:00:00 2001 From: ibrkhalil Date: Sun, 21 Apr 2024 12:57:19 +0200 Subject: [PATCH 08/10] Typo --- .../contexts/communities/actions/share_community/style.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/status_im/contexts/communities/actions/share_community/style.cljs b/src/status_im/contexts/communities/actions/share_community/style.cljs index d07d8cdc851..fee691e08f8 100644 --- a/src/status_im/contexts/communities/actions/share_community/style.cljs +++ b/src/status_im/contexts/communities/actions/share_community/style.cljs @@ -44,7 +44,7 @@ (def qr-top-wrapper {:margin 12 :margin-bottom 0 - :flex-direction (:flex-direction :row) + :flex-direction :row :align-items :center :justify-content :space-between}) From 39e04931b196cb1d68afebdbb4b790d637045a6c Mon Sep 17 00:00:00 2001 From: ibrkhalil Date: Wed, 24 Apr 2024 08:59:26 +0200 Subject: [PATCH 09/10] Center text in QR code view --- .../contexts/communities/actions/share_community/style.cljs | 4 ++++ .../contexts/communities/actions/share_community/view.cljs | 5 ++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/status_im/contexts/communities/actions/share_community/style.cljs b/src/status_im/contexts/communities/actions/share_community/style.cljs index fee691e08f8..14b73be5024 100644 --- a/src/status_im/contexts/communities/actions/share_community/style.cljs +++ b/src/status_im/contexts/communities/actions/share_community/style.cljs @@ -58,3 +58,7 @@ (def qr-code-view {:padding-vertical vertical-padding :align-items :center}) + +(def text-wrapper + {:flex-direction :row + :align-items :center}) diff --git a/src/status_im/contexts/communities/actions/share_community/view.cljs b/src/status_im/contexts/communities/actions/share_community/view.cljs index d198b901696..8fdb850b5b5 100644 --- a/src/status_im/contexts/communities/actions/share_community/view.cljs +++ b/src/status_im/contexts/communities/actions/share_community/view.cljs @@ -54,7 +54,7 @@ :bottom-color-override colors/white-opa-5}] [rn/view {:style style/qr-top-wrapper} - [rn/view {:style {:flex-direction :row}} + [rn/view {:style style/text-wrapper} (when thumbnail-uri [fast-image/fast-image {:source {:uri thumbnail-uri} @@ -80,8 +80,7 @@ :url url :avatar :community :customization-color color - :picture (or thumbnail-uri (resources/get-mock-image :status-logo)) - :full-name community-name}]]] + :picture (or thumbnail-uri (resources/get-mock-image :status-logo))}]]] [quo/text {:size :paragraph-2 :weight :regular From 0f75368d6bdade92426f5ebe805493856c575b11 Mon Sep 17 00:00:00 2001 From: ibrkhalil Date: Wed, 24 Apr 2024 10:34:17 +0200 Subject: [PATCH 10/10] Formatto no jutus --- .../actions/share_community/view.cljs | 40 ++++++++++--------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/src/status_im/contexts/communities/actions/share_community/view.cljs b/src/status_im/contexts/communities/actions/share_community/view.cljs index 8fdb850b5b5..06374cd8eaa 100644 --- a/src/status_im/contexts/communities/actions/share_community/view.cljs +++ b/src/status_im/contexts/communities/actions/share_community/view.cljs @@ -14,27 +14,29 @@ (defn view [] - (let [{:keys [url community-id]} (rf/sub [:get-screen-params]) - window-width (rf/sub [:dimensions/window-width]) + (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])] + 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)}