fix scan qr window
Signed-off-by: andrey <motor4ik@gmail.com>
This commit is contained in:
andrey
parent
10a814764d
commit
a968149ecc
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
;; BLACK
|
||||
(def black (:black light)) ;; Used as the default text color
|
||||
(def black-persist (:black light)) ;; this doesn't with theme
|
||||
(def black-persist (:white dark)) ;; this doesn't with theme
|
||||
(def black-transparent (alpha black 0.1)) ;; Used as background color for rounded button on dark background and as background color for containers like "Backup recovery phrase"
|
||||
(def black-transparent-20 (alpha black 0.2)) ; accounts divider
|
||||
(def black-transparent-40 (alpha black 0.4))
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
["react-native" :as react-native :refer (Keyboard)]
|
||||
["react-native-image-crop-picker" :default image-picker]
|
||||
["react-native-safe-area-context" :as safe-area-context
|
||||
:refer (SafeAreaView SafeAreaProvider SafeAreaInsetsContext)]
|
||||
:refer (SafeAreaProvider SafeAreaInsetsContext)]
|
||||
["@react-native-community/clipboard" :default Clipboard])
|
||||
(:require-macros [status-im.utils.views :as views]))
|
||||
|
||||
|
|
@ -244,5 +244,3 @@
|
|||
|
||||
(def safe-area-provider (reagent/adapt-react-class SafeAreaProvider))
|
||||
(def safe-area-consumer (reagent/adapt-react-class (.-Consumer ^js SafeAreaInsetsContext)))
|
||||
|
||||
(def safe-area-view (reagent/adapt-react-class SafeAreaView))
|
||||
|
|
|
|||
|
|
@ -6,30 +6,34 @@
|
|||
[quo.core :as quo]
|
||||
[status-im.i18n :as i18n]
|
||||
[status-im.ui.components.icons.vector-icons :as icons]
|
||||
[status-im.ui.screens.chat.sheets :as sheets]))
|
||||
[status-im.ui.screens.chat.sheets :as sheets]
|
||||
[quo.components.safe-area :as safe-area]))
|
||||
|
||||
(defview preview-image []
|
||||
(letsubs [{:keys [content] :as message} [:get-screen-params]
|
||||
{:keys [width height]} [:dimensions/window]]
|
||||
[react/view {:flex 1 :background-color colors/black-persist}
|
||||
[react/safe-area-view {:style {:flex 1 :justify-content :flex-end}}
|
||||
[react/view {:flex 1 :align-items :center :justify-content :center}
|
||||
[react/image {:style (merge {:width width
|
||||
:height (- height 200)
|
||||
:background-color :black})
|
||||
:resize-mode :contain
|
||||
:source {:uri (:image content)}}]]
|
||||
[react/view {:flex-direction :row :padding-horizontal 8
|
||||
:justify-content :space-between :align-items :center}
|
||||
[react/view {:width 64}]
|
||||
[quo/button {:on-press #(re-frame/dispatch [:navigate-back])
|
||||
:type :secondary
|
||||
:text-style {:color colors/white-persist}}
|
||||
(i18n/label :t/close)]
|
||||
[react/touchable-highlight
|
||||
{:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet
|
||||
{:content (sheets/image-long-press message true)
|
||||
:height 64}])}
|
||||
[icons/icon :main-icons/more {:container-style {:width 24 :height 24
|
||||
:margin 20}
|
||||
:color colors/white-persist}]]]]]))
|
||||
[safe-area/consumer
|
||||
(fn [insets]
|
||||
[react/view {:style {:flex 1 :justify-content :flex-end
|
||||
:padding-top (:top insets) :padding-bottom (:bottom insets)
|
||||
:background-color colors/black-persist}}
|
||||
[react/view {:flex 1 :align-items :center :justify-content :center}
|
||||
[react/image {:style (merge {:width width
|
||||
:height (- height 200)
|
||||
:background-color :black})
|
||||
:resize-mode :contain
|
||||
:source {:uri (:image content)}}]]
|
||||
[react/view {:flex-direction :row :padding-horizontal 8
|
||||
:justify-content :space-between :align-items :center}
|
||||
[react/view {:width 64}]
|
||||
[quo/button {:on-press #(re-frame/dispatch [:navigate-back])
|
||||
:type :secondary
|
||||
:text-style {:color colors/white-persist}}
|
||||
(i18n/label :t/close)]
|
||||
[react/touchable-highlight
|
||||
{:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet
|
||||
{:content (sheets/image-long-press message true)
|
||||
:height 64}])}
|
||||
[icons/icon :main-icons/more {:container-style {:width 24 :height 24
|
||||
:margin 20}
|
||||
:color colors/white-persist}]]]])]))
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
[status-im.ui.components.colors :as colors]
|
||||
[status-im.utils.config :as config]
|
||||
[quo.core :as quo]
|
||||
[reagent.core :as reagent]))
|
||||
[reagent.core :as reagent]
|
||||
[quo.components.safe-area :as safe-area]))
|
||||
|
||||
(defn- topbar [_ {:keys [title] :as opts}]
|
||||
[topbar/toolbar
|
||||
|
|
@ -29,22 +30,24 @@
|
|||
|
||||
(defn qr-test-view [opts]
|
||||
(let [text-value (atom "")]
|
||||
[react/safe-area-view {:style {:flex 1
|
||||
:background-color colors/black-persist}}
|
||||
[topbar nil opts]
|
||||
[react/view {:flex 1
|
||||
:align-items :center
|
||||
:justify-content :center}
|
||||
[react/text-input {:multiline true
|
||||
:style {:color colors/white-persist}
|
||||
:on-change-text #(reset! text-value %)}]
|
||||
[react/view {:flex-direction :row}
|
||||
[quo/button
|
||||
{:on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-cancel opts])}
|
||||
"Cancel"]
|
||||
[quo/button
|
||||
{:on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-success opts (when-let [text @text-value] (string/trim text))])}
|
||||
"Ok"]]]]))
|
||||
[safe-area/consumer
|
||||
(fn [insets]
|
||||
[react/view {:flex 1 :background-color colors/black-persist
|
||||
:padding-top (:top insets) :padding-bottom (:bottom insets)}
|
||||
[topbar nil opts]
|
||||
[react/view {:flex 1
|
||||
:align-items :center
|
||||
:justify-content :center}
|
||||
[react/text-input {:multiline true
|
||||
:style {:color colors/white-persist}
|
||||
:on-change-text #(reset! text-value %)}]
|
||||
[react/view {:flex-direction :row}
|
||||
[quo/button
|
||||
{:on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-cancel opts])}
|
||||
"Cancel"]
|
||||
[quo/button
|
||||
{:on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-success opts (when-let [text @text-value] (string/trim text))])}
|
||||
"Ok"]]]])]))
|
||||
|
||||
(defn corner [border1 border2 corner]
|
||||
[react/view (assoc {:border-color colors/white-persist :width 60 :height 60} border1 5 border2 5 corner 32)])
|
||||
|
|
@ -72,19 +75,21 @@
|
|||
layout (atom nil)]
|
||||
(if config/qr-test-menu-enabled?
|
||||
[qr-test-view opts]
|
||||
[react/safe-area-view {:style {:flex 1
|
||||
:background-color colors/black-persist}}
|
||||
[topbar camera-flashlight opts]
|
||||
[react/with-activity-indicator
|
||||
{}
|
||||
[camera/camera
|
||||
{:ref #(reset! camera-ref %)
|
||||
:style {:flex 1}
|
||||
:capture-audio false
|
||||
:on-layout (camera/on-layout layout)
|
||||
:auto-focus-point-of-interest @focus-object
|
||||
:on-tap (camera/on-tap camera-ref layout focus-object)
|
||||
:on-bar-code-read #(when-not @read-once?
|
||||
(reset! read-once? true)
|
||||
(on-barcode-read opts %))}]]
|
||||
[viewfinder (int (* 2 (/ (min height width) 3)))]])))
|
||||
[safe-area/consumer
|
||||
(fn [insets]
|
||||
[react/view {:flex 1 :background-color colors/black-persist
|
||||
:padding-top (:top insets) :padding-bottom (:bottom insets)}
|
||||
[topbar camera-flashlight opts]
|
||||
[react/with-activity-indicator
|
||||
{}
|
||||
[camera/camera
|
||||
{:ref #(reset! camera-ref %)
|
||||
:style {:flex 1}
|
||||
:capture-audio false
|
||||
:on-layout (camera/on-layout layout)
|
||||
:auto-focus-point-of-interest @focus-object
|
||||
:on-tap (camera/on-tap camera-ref layout focus-object)
|
||||
:on-bar-code-read #(when-not @read-once?
|
||||
(reset! read-once? true)
|
||||
(on-barcode-read opts %))}]]
|
||||
[viewfinder (int (* 2 (/ (min height width) 3)))]])])))
|
||||
|
|
|
|||
|
|
@ -93,10 +93,10 @@
|
|||
{:name :contact-code
|
||||
:component wallet.components/contact-code}
|
||||
{:name :qr-scanner
|
||||
:insets {:top false}
|
||||
:insets {:top false :bottom false}
|
||||
:component qr-scanner/qr-scanner}
|
||||
{:name :image-preview
|
||||
:insets {:top false}
|
||||
:insets {:top false :bottom false}
|
||||
:component image-preview/preview-image}
|
||||
{:name :notifications-settings
|
||||
:back-handler :noop
|
||||
|
|
|
|||
Loading…
Reference in New Issue