* Remove unnecessary wrapper * Fix border tips and refactor * Add comment about using 1.9 width
This commit is contained in:
parent
7cd9f76043
commit
4f044765e1
|
@ -77,29 +77,37 @@
|
||||||
:top (- (+ (:y viewfinder) (:height viewfinder)) flash-button-size flash-button-spacing)
|
:top (- (+ (:y viewfinder) (:height viewfinder)) flash-button-size flash-button-spacing)
|
||||||
:right (+ screen-padding flash-button-spacing)})
|
:right (+ screen-padding flash-button-spacing)})
|
||||||
|
|
||||||
(defn border
|
(defn- get-border
|
||||||
[border1 border2 corner]
|
[border-vertical-width border-horizontal-width corner-radius]
|
||||||
(assoc {:border-color colors/white
|
{:border-color colors/white
|
||||||
:width 78
|
:width 78
|
||||||
:height 78}
|
:height 78
|
||||||
border1
|
border-vertical-width 2
|
||||||
2
|
border-horizontal-width 2
|
||||||
border2
|
corner-radius 16})
|
||||||
2
|
|
||||||
corner
|
|
||||||
16))
|
|
||||||
|
|
||||||
(defn border-tip
|
(def white-border
|
||||||
[top bottom right left]
|
(let [base-tip {:background-color colors/white
|
||||||
{:background-color colors/white
|
|
||||||
:position :absolute
|
:position :absolute
|
||||||
:top top
|
:height 1.9 ; 1.9 instead of 2 to fix the tips protruding
|
||||||
:bottom bottom
|
:width 1.9
|
||||||
:right right
|
:border-radius 1}]
|
||||||
:left left
|
{:top-left
|
||||||
:height 2
|
{:border (get-border :border-top-width :border-left-width :border-top-left-radius)
|
||||||
:width 2
|
:tip-1 (assoc base-tip :right -1 :top 0)
|
||||||
:border-radius 2})
|
:tip-2 (assoc base-tip :left 0 :bottom -1)}
|
||||||
|
:top-right
|
||||||
|
{:border (get-border :border-top-width :border-right-width :border-top-right-radius)
|
||||||
|
:tip-1 (assoc base-tip :right 0 :bottom -1)
|
||||||
|
:tip-2 (assoc base-tip :left -1 :top 0)}
|
||||||
|
:bottom-left
|
||||||
|
{:border (get-border :border-bottom-width :border-left-width :border-bottom-left-radius)
|
||||||
|
:tip-1 (assoc base-tip :right -1 :bottom 0)
|
||||||
|
:tip-2 (assoc base-tip :left 0 :top -1)}
|
||||||
|
:bottom-right
|
||||||
|
{:border (get-border :border-bottom-width :border-right-width :border-bottom-right-radius)
|
||||||
|
:tip-1 (assoc base-tip :right 0 :top -1)
|
||||||
|
:tip-2 (assoc base-tip :left -1 :bottom 0)}}))
|
||||||
|
|
||||||
(def viewfinder-text
|
(def viewfinder-text
|
||||||
{:color colors/white-opa-70
|
{:color colors/white-opa-70
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
[]
|
[]
|
||||||
(rf/dispatch [:syncing/preflight-outbound-check #(reset! preflight-check-passed? %)]))
|
(rf/dispatch [:syncing/preflight-outbound-check #(reset! preflight-check-passed? %)]))
|
||||||
|
|
||||||
(defn- f-header
|
(defn- header
|
||||||
[{:keys [active-tab read-qr-once? title title-opacity subtitle-opacity reset-animations-fn animated?]}]
|
[{:keys [active-tab read-qr-once? title title-opacity subtitle-opacity reset-animations-fn animated?]}]
|
||||||
(let [subtitle-translate-x (reanimated/interpolate subtitle-opacity [0 1] [-13 0])
|
(let [subtitle-translate-x (reanimated/interpolate subtitle-opacity [0 1] [-13 0])
|
||||||
subtitle-translate-y (reanimated/interpolate subtitle-opacity [0 1] [-85 0])
|
subtitle-translate-y (reanimated/interpolate subtitle-opacity [0 1] [-85 0])
|
||||||
|
@ -110,10 +110,6 @@
|
||||||
(reset! active-tab id)
|
(reset! active-tab id)
|
||||||
(reset! read-qr-once? false))}]]]))
|
(reset! read-qr-once? false))}]]]))
|
||||||
|
|
||||||
(defn- header
|
|
||||||
[props]
|
|
||||||
[:f> f-header props])
|
|
||||||
|
|
||||||
(defn get-labels-and-on-press-method
|
(defn get-labels-and-on-press-method
|
||||||
[]
|
[]
|
||||||
(if @camera-permission-granted?
|
(if @camera-permission-granted?
|
||||||
|
@ -169,55 +165,42 @@
|
||||||
view-finder (assoc layout :height (:width layout))]
|
view-finder (assoc layout :height (:width layout))]
|
||||||
(reset! qr-view-finder view-finder)))}])
|
(reset! qr-view-finder view-finder)))}])
|
||||||
|
|
||||||
(defn- border
|
(defn- white-border
|
||||||
[border1 border2 corner]
|
[corner]
|
||||||
[rn/view {:style (style/border border1 border2 corner)}])
|
(let [border-styles (style/white-border corner)]
|
||||||
|
|
||||||
(defn- border-tip
|
|
||||||
[{:keys [top bottom left right]}]
|
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style (style/border-tip top bottom right left)}])
|
[rn/view {:style (border-styles :border)}]
|
||||||
|
[rn/view {:style (border-styles :tip-1)}]
|
||||||
|
[rn/view {:style (border-styles :tip-2)}]]))
|
||||||
|
|
||||||
|
(defn- white-square
|
||||||
|
[layout-size]
|
||||||
|
[rn/view {:style (style/qr-view-finder-container layout-size)}
|
||||||
|
[rn/view {:style style/view-finder-border-container}
|
||||||
|
[white-border :top-left]
|
||||||
|
[white-border :top-right]]
|
||||||
|
[rn/view {:style style/view-finder-border-container}
|
||||||
|
[white-border :bottom-left]
|
||||||
|
[white-border :bottom-right]]])
|
||||||
|
|
||||||
(defn- viewfinder
|
(defn- viewfinder
|
||||||
[qr-view-finder]
|
[qr-view-finder]
|
||||||
(let [size (+ (:width qr-view-finder) 2)]
|
(let [layout-size (+ (:width qr-view-finder) 2)]
|
||||||
[:<>
|
|
||||||
[rn/view {:style (style/viewfinder-container qr-view-finder)}
|
[rn/view {:style (style/viewfinder-container qr-view-finder)}
|
||||||
[rn/view
|
[white-square layout-size]
|
||||||
{:style (style/qr-view-finder-container size)}
|
|
||||||
[rn/view
|
|
||||||
{:style style/view-finder-border-container}
|
|
||||||
[rn/view
|
|
||||||
[border :border-top-width :border-left-width :border-top-left-radius]
|
|
||||||
[border-tip {:right -1 :top 0}]
|
|
||||||
[border-tip {:left 0 :bottom -1}]]
|
|
||||||
[rn/view
|
|
||||||
[border :border-top-width :border-right-width :border-top-right-radius]
|
|
||||||
[border-tip {:right 0 :bottom -1}]
|
|
||||||
[border-tip {:left -1 :top 0}]]]
|
|
||||||
[rn/view {:flex-direction :row :justify-content :space-between}
|
|
||||||
[rn/view
|
|
||||||
[border :border-bottom-width :border-left-width :border-bottom-left-radius]
|
|
||||||
[border-tip {:right -1 :bottom 0}]
|
|
||||||
[border-tip {:left 0 :top -1}]]
|
|
||||||
[rn/view
|
|
||||||
[border :border-bottom-width :border-right-width :border-bottom-right-radius]
|
|
||||||
[border-tip {:right 0 :top -1}]
|
|
||||||
[border-tip {:left -1 :bottom 0}]]]]
|
|
||||||
[quo/text
|
[quo/text
|
||||||
{:size :paragraph-2
|
{:size :paragraph-2
|
||||||
:weight :regular
|
:weight :regular
|
||||||
:style style/viewfinder-text}
|
:style style/viewfinder-text}
|
||||||
(i18n/label :t/ensure-qr-code-is-in-focus-to-scan)]]]))
|
(i18n/label :t/ensure-qr-code-is-in-focus-to-scan)]]))
|
||||||
|
|
||||||
(defn- scan-qr-code-tab
|
(defn- scan-qr-code-tab
|
||||||
[qr-view-finder]
|
[qr-view-finder]
|
||||||
[:<>
|
|
||||||
(if (and @preflight-check-passed?
|
(if (and @preflight-check-passed?
|
||||||
@camera-permission-granted?
|
@camera-permission-granted?
|
||||||
(boolean (not-empty @qr-view-finder)))
|
(boolean (not-empty qr-view-finder)))
|
||||||
[viewfinder @qr-view-finder]
|
[viewfinder qr-view-finder]
|
||||||
[camera-and-local-network-access-permission-view])])
|
[camera-and-local-network-access-permission-view]))
|
||||||
|
|
||||||
(defn- enter-sync-code-tab
|
(defn- enter-sync-code-tab
|
||||||
[]
|
[]
|
||||||
|
@ -273,8 +256,7 @@
|
||||||
:on-read-code on-read-code}]]
|
:on-read-code on-read-code}]]
|
||||||
[hole-view/hole-view
|
[hole-view/hole-view
|
||||||
{:style style/hole
|
{:style style/hole
|
||||||
:holes [(merge qr-view-finder
|
:holes [(assoc qr-view-finder :borderRadius 16)]}
|
||||||
{:borderRadius 16})]}
|
|
||||||
[blur/view
|
[blur/view
|
||||||
{:style style/absolute-fill
|
{:style style/absolute-fill
|
||||||
:blur-amount 10
|
:blur-amount 10
|
||||||
|
@ -388,7 +370,7 @@
|
||||||
(when (or (not animated?) @render-camera?)
|
(when (or (not animated?) @render-camera?)
|
||||||
[render-camera show-camera? torch-mode @qr-view-finder camera-ref on-read-code])
|
[render-camera show-camera? torch-mode @qr-view-finder camera-ref on-read-code])
|
||||||
[rn/view {:style (style/root-container (:top insets))}
|
[rn/view {:style (style/root-container (:top insets))}
|
||||||
[header
|
[:f> header
|
||||||
{:active-tab active-tab
|
{:active-tab active-tab
|
||||||
:read-qr-once? read-qr-once?
|
:read-qr-once? read-qr-once?
|
||||||
:title title
|
:title title
|
||||||
|
@ -406,7 +388,7 @@
|
||||||
:transform [{:translate-y content-translate-y}]}
|
:transform [{:translate-y content-translate-y}]}
|
||||||
{})}
|
{})}
|
||||||
(case @active-tab
|
(case @active-tab
|
||||||
1 [scan-qr-code-tab qr-view-finder]
|
1 [scan-qr-code-tab @qr-view-finder]
|
||||||
2 [enter-sync-code-tab]
|
2 [enter-sync-code-tab]
|
||||||
nil)]
|
nil)]
|
||||||
[rn/view {:style style/flex-spacer}]
|
[rn/view {:style style/flex-spacer}]
|
||||||
|
|
Loading…
Reference in New Issue