Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix scan qr window #10999

Merged
merged 1 commit into from
Jul 29, 2020
Merged

fix scan qr window #10999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/status_im/ui/components/colors.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
4 changes: 1 addition & 3 deletions src/status_im/ui/components/react.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]))

Expand Down Expand Up @@ -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))
50 changes: 27 additions & 23 deletions src/status_im/ui/screens/chat/image/preview/views.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}]]]])]))
71 changes: 38 additions & 33 deletions src/status_im/ui/screens/qr_scanner/views.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)])
Expand Down Expand Up @@ -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)))]])])))
4 changes: 2 additions & 2 deletions src/status_im/ui/screens/routing/main.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down