[#16278] fix tips in white camera border (#16716)

* Remove unnecessary wrapper
* Fix border tips and refactor
* Add comment about using 1.9 width
This commit is contained in:
Ulises Manuel Cárdenas 2023-07-26 14:08:57 -06:00 committed by GitHub
parent 7cd9f76043
commit 4f044765e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 73 deletions

View File

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

View File

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