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

feat: add qr and share qr components to quo2 (#15583) 

feat: add qr and share qr components to quo2
This commit is contained in:
Jamie Caprani 2023-04-11 10:35:51 +01:00 committed by GitHub
parent a46a3e2a93
commit cddf127674
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 257 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/mock2/qr-code@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
resources/images/mock2/qr-code@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

12
src/quo2/components/share/qr_code/style.cljs Normal file
View File

@ -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})

11
src/quo2/components/share/qr_code/view.cljs Normal file
View File

@ -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)}]])

33
src/quo2/components/share/share_qr_code/component_spec.cljs Normal file
View File

@ -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)))))

44
src/quo2/components/share/share_qr_code/style.cljs Normal file
View File

@ -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})

49
src/quo2/components/share/share_qr_code/view.cljs Normal file
View File

@ -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]]]])

15
src/quo2/core.cljs
View File

@ -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)

1
src/quo2/core_spec.cljs
View File

@ -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]))

1
src/status_im2/common/resources.cljs
View File

@ -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")

8
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -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}

32
src/status_im2/contexts/quo_preview/share/qr_code.cljs Normal file
View File

@ -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}]])

54
src/status_im2/contexts/quo_preview/share/share_qr_code.cljs Normal file
View File

@ -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}]])