diff --git a/resources/images/mock2/qr-code@2x.png b/resources/images/mock2/qr-code@2x.png new file mode 100644 index 0000000000..1beadac3bb Binary files /dev/null and b/resources/images/mock2/qr-code@2x.png differ diff --git a/resources/images/mock2/qr-code@3x.png b/resources/images/mock2/qr-code@3x.png new file mode 100644 index 0000000000..17a9f29a5e Binary files /dev/null and b/resources/images/mock2/qr-code@3x.png differ diff --git a/src/quo2/components/share/qr_code/style.cljs b/src/quo2/components/share/qr_code/style.cljs new file mode 100644 index 0000000000..594d89b2df --- /dev/null +++ b/src/quo2/components/share/qr_code/style.cljs @@ -0,0 +1,12 @@ +(ns quo2.components.share.qr-code.style) + +(def container + {:flex-direction :row + :justify-content :center}) + +(defn image + [width height] + {:width width + :height height + :border-radius 12 + :aspect-ratio 1}) diff --git a/src/quo2/components/share/qr_code/view.cljs b/src/quo2/components/share/qr_code/view.cljs new file mode 100644 index 0000000000..efd3b740ed --- /dev/null +++ b/src/quo2/components/share/qr_code/view.cljs @@ -0,0 +1,11 @@ +(ns quo2.components.share.qr-code.view + (:require [quo2.components.share.qr-code.style :as style] + [react-native.core :as rn])) + +(defn qr-code + [{:keys [source width height]}] + [rn/view + {:style style/container} + [rn/image + {:source source + :style (style/image width height)}]]) diff --git a/src/quo2/components/share/share_qr_code/component_spec.cljs b/src/quo2/components/share/share_qr_code/component_spec.cljs new file mode 100644 index 0000000000..e1a349d8ff --- /dev/null +++ b/src/quo2/components/share/share_qr_code/component_spec.cljs @@ -0,0 +1,33 @@ +(ns quo2.components.share.share-qr-code.component-spec + (:require [quo2.components.share.share-qr-code.view :as share-qr-code] + [test-helpers.component :as h])) + +(h/describe "Share QR Code component" + (h/test "renders share qr code component" + (h/render [share-qr-code/view + {:link-title " A test title"}]) + (-> (js/expect (h/get-by-text "A test title")) + (.toBeTruthy))) + + (h/test "renders share qr code url" + (h/render [share-qr-code/view + {:qr-url " A test url"}]) + (-> (js/expect (h/get-by-text "A test url")) + (.toBeTruthy))) + + (h/test "on press link event fires" + (let [event (h/mock-fn)] + (h/render [share-qr-code/view + {:url-on-press event + :qr-url " A test url"}]) + (h/fire-event :press (h/get-by-text "A test url")) + (-> (js/expect event) + (.toHaveBeenCalledTimes 1)))) + + (h/test "on press share event fires" + (let [event (h/mock-fn)] + (h/render [share-qr-code/view + {:share-on-press event}]) + (h/fire-event :press (h/get-by-label-text :share-profile)) + (-> (js/expect event) + (.toHaveBeenCalledTimes 1))))) diff --git a/src/quo2/components/share/share_qr_code/style.cljs b/src/quo2/components/share/share_qr_code/style.cljs new file mode 100644 index 0000000000..d3852b4f87 --- /dev/null +++ b/src/quo2/components/share/share_qr_code/style.cljs @@ -0,0 +1,44 @@ +(ns quo2.components.share.share-qr-code.style + (:require [quo2.foundations.colors :as colors])) + +(def qr-code-container + {:padding-top 12 + :padding-horizontal 12 + :padding-bottom 8 + :border-radius 16 + :background-color colors/white-opa-5 + :flex-direction :column + :justify-content :center + :align-items :center}) + +(def profile-address-column + {:margin-horizontal :auto + :flex 4}) + +(def profile-address-container + {:flex-direction :row + :justify-content :space-between + :margin-top 6}) + +(def profile-address-content-container + {:padding-top 2 + :align-self :flex-start}) + +(def profile-address-content + {:color colors/white}) + +(def profile-address-label + {:color colors/white-opa-40}) + +(def share-button-container + {:flex 1 + :flex-direction :column + :justify-content :center + :align-items :flex-end}) + +(def icon-container + {:height 36 + :flex-direction :row + :align-items :center + :justify-content :space-between + :padding-bottom 12}) diff --git a/src/quo2/components/share/share_qr_code/view.cljs b/src/quo2/components/share/share_qr_code/view.cljs new file mode 100644 index 0000000000..52a036f09f --- /dev/null +++ b/src/quo2/components/share/share_qr_code/view.cljs @@ -0,0 +1,49 @@ +(ns quo2.components.share.share-qr-code.view + (:require [quo2.components.share.share-qr-code.style :as style] + [quo2.components.share.qr-code.view :as qr-code] + [react-native.blur :as blur] + [quo2.components.markdown.text :as text] + [quo2.foundations.colors :as colors] + [quo2.components.buttons.button :as button] + [react-native.core :as rn])) + +(defn view + [{:keys [source link-title + url-on-press url-on-long-press qr-url share-on-press]}] + [blur/ios-view + {:style style/qr-code-container + :blur-type :light} + [qr-code/qr-code + {:source source + :width "100%" + :height 311}] + [rn/view {:style style/profile-address-container} + [rn/view {:style style/profile-address-column} + [text/text + {:size :paragraph-2 + :weight :medium + :style style/profile-address-label} + link-title] + [rn/touchable-highlight + {:active-opacity 1 + :underlay-color colors/neutral-80-opa-1-blur + :background-color :transparent + :on-press url-on-press + :on-long-press url-on-long-press + :style style/profile-address-content-container} + [text/text + {:style style/profile-address-content + :size :paragraph-1 + :weight :medium + :ellipsize-mode :middle + :number-of-lines 1} + qr-url]]] + [rn/view {:style style/share-button-container} + [button/button + {:icon true + :type :blur-bg + :size 32 + :accessibility-label :share-profile + :override-theme :dark + :on-press share-on-press} + :i/share]]]]) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index d667778e6d..a762e50b4a 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -60,6 +60,8 @@ quo2.components.separator quo2.components.settings.accounts.view quo2.components.settings.privacy-option + quo2.components.share.qr-code.view + quo2.components.share.share-qr-code.view quo2.components.onboarding.small-option-card.view quo2.components.tabs.segmented-tab quo2.components.tabs.account-selector @@ -92,9 +94,7 @@ (def group-avatar-tag quo2.components.tags.context-tags/group-avatar-tag) (def audio-tag quo2.components.tags.context-tags/audio-tag) (def community-tag quo2.components.tags.context-tags/community-tag) -(def tabs quo2.components.tabs.tabs/tabs) -(def segmented-control quo2.components.tabs.segmented-tab/segmented-control) -(def account-selector quo2.components.tabs.account-selector/account-selector) + (def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button) (def page-nav quo2.components.navigation.page-nav/page-nav) (def disclaimer quo2.components.selectors.disclaimer.view/view) @@ -177,6 +177,15 @@ (def privacy-option quo2.components.settings.privacy-option/card) (def account quo2.components.settings.accounts.view/account) +;;;; SHARE +(def qr-code quo2.components.share.qr-code.view/qr-code) +(def share-qr-code quo2.components.share.share-qr-code.view/view) + +;;;; TABS +(def tabs quo2.components.tabs.tabs/tabs) +(def segmented-control quo2.components.tabs.segmented-tab/segmented-control) +(def account-selector quo2.components.tabs.account-selector/account-selector) + ;;;; TAGS (def tag quo2.components.tags.tag/tag) (def tags quo2.components.tags.tags/tags) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index a6cd2a24b2..5420546bc9 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -23,4 +23,5 @@ [quo2.components.selectors.--tests--.selectors-component-spec] [quo2.components.selectors.disclaimer.component-spec] [quo2.components.selectors.filter.component-spec] + [quo2.components.share.share-qr-code.component-spec] [quo2.components.tags.--tests--.status-tags-component-spec])) diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index b440a72d2f..24950b6ee0 100644 --- a/src/status_im2/common/resources.cljs +++ b/src/status_im2/common/resources.cljs @@ -21,6 +21,7 @@ :photo1 (js/require "../resources/images/mock2/photo1.png") :photo2 (js/require "../resources/images/mock2/photo2.png") :photo3 (js/require "../resources/images/mock2/photo3.png") + :qr-code (js/require "../resources/images/mock2/qr-code.png") :small-opt-card-icon (js/require "../resources/images/mock2/small_opt_card_icon.png") :small-opt-card-main (js/require "../resources/images/mock2/small_opt_card_main.png") :status-logo (js/require "../resources/images/mock2/status-logo.png") diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 1eef30193b..bb8c598be8 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -65,6 +65,8 @@ [status-im2.contexts.quo-preview.selectors.selectors :as selectors] [status-im2.contexts.quo-preview.settings.accounts :as accounts] [status-im2.contexts.quo-preview.settings.privacy-option :as privacy-option] + [status-im2.contexts.quo-preview.share.qr-code :as qr-code] + [status-im2.contexts.quo-preview.share.share-qr-code :as share-qr-code] [status-im2.contexts.quo-preview.switcher.switcher-cards :as switcher-cards] [status-im2.contexts.quo-preview.tabs.account-selector :as account-selector] [status-im2.contexts.quo-preview.tabs.segmented-tab :as segmented] @@ -262,6 +264,12 @@ {:name :accounts :insets {:top false} :component accounts/preview-accounts}] + :share [{:name :qr-code + :insets {:top false} + :component qr-code/preview-qr-code} + {:name :share-qr-code + :insets {:top false} + :component share-qr-code/preview-share-qr-code}] :tabs [{:name :segmented :insets {:top false} :component segmented/preview-segmented} diff --git a/src/status_im2/contexts/quo_preview/share/qr_code.cljs b/src/status_im2/contexts/quo_preview/share/qr_code.cljs new file mode 100644 index 0000000000..3d365c1e58 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/share/qr_code.cljs @@ -0,0 +1,32 @@ +(ns status-im2.contexts.quo-preview.share.qr-code + (:require [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [quo2.core :as quo] + [status-im2.common.resources :as resources])) + +(defn cool-preview + [] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:style {:padding-bottom 150}} + [rn/view {:style {:flex 1}}] + [rn/view + {:style {:padding-vertical 60 + :flex-direction :row + :justify-content :center}} + [quo/qr-code + {:source (resources/get-mock-image :qr-code) + :height 250 + :width 250}]]]])) + +(defn preview-qr-code + [] + [rn/view + {:style {:background-color (colors/theme-colors colors/white + colors/neutral-90) + :flex 1}} + [rn/flat-list + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/share/share_qr_code.cljs b/src/status_im2/contexts/quo_preview/share/share_qr_code.cljs new file mode 100644 index 0000000000..9c4fff10f1 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/share/share_qr_code.cljs @@ -0,0 +1,54 @@ +(ns status-im2.contexts.quo-preview.share.share-qr-code + (:require [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [quo2.core :as quo] + [status-im2.contexts.quo-preview.preview :as preview] + [status-im2.common.resources :as resources] + [reagent.core :as reagent])) + + +(def descriptor + [{:label "URL" + :key :url + :type :text} + {:label "Link title" + :key :link-title + :type :text}]) + +(defn cool-preview + [] + (let [state (reagent/atom {:info-button? true + :link-title "Link to profile" + :url "status.app/u/zQ34e1zlOdas0pKnvrweeedsasas12adjie8"})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:style {:padding-bottom 150}} + [rn/view {:style {:flex 1}}] + [preview/customizer state descriptor] + [rn/view + {:style {:padding-vertical 60 + :justify-content :center}} + [preview/blur-view + {:show-blur-background? true + :height 600 + :blur-view-props {:padding-top 20 + :padding-horizontal 20}} + [quo/share-qr-code + {:source (resources/get-mock-image :qr-code) + :link-title (:link-title @state) + :url-on-press #(js/alert "url pressed") + :url-on-long-press #(js/alert "url long pressed") + :share-on-press #(js/alert "share pressed") + :qr-url (:url @state)}]]]]]))) + +(defn preview-share-qr-code + [] + [rn/view + {:style {:background-color (colors/theme-colors colors/white + colors/neutral-90) + :flex 1}} + [rn/flat-list + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]])