Skip to content

Commit

Permalink
fix scan qr window
Browse files Browse the repository at this point in the history
  • Loading branch information
@flexsurfer
flexsurfer committed Jul 28, 2020
1 parent 4254dbc commit c1bcac4
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 62 deletions.
2 changes: 1 addition & 1 deletion src/status_im/ui/components/colors.cljs
View file
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
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
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
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
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

0 comments on commit c1bcac4

Please sign in to comment.