status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/status_im2/contexts/syncing/scan_sync_code/style.cljs
View File

@ -77,29 +77,37 @@
:top (- (+ (:y viewfinder) (:height viewfinder)) flash-button-size flash-button-spacing)
:right (+ screen-padding flash-button-spacing)})
(defn border
[border1 border2 corner]
(assoc {:border-color colors/white
:width 78
:height 78}
border1
2
border2
2
corner
16))
(defn- get-border
[border-vertical-width border-horizontal-width corner-radius]
{:border-color colors/white
:width 78
:height 78
border-vertical-width 2
border-horizontal-width 2
corner-radius 16})
(defn border-tip
[top bottom right left]
{:background-color colors/white
:position :absolute
:top top
:bottom bottom
:right right
:left left
:height 2
:width 2
:border-radius 2})
(def white-border
(let [base-tip {:background-color colors/white
:position :absolute
:height 1.9 ; 1.9 instead of 2 to fix the tips protruding
:width 1.9
:border-radius 1}]
{:top-left
{:border (get-border :border-top-width :border-left-width :border-top-left-radius)
:tip-1 (assoc base-tip :right -1 :top 0)
: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
{:color colors/white-opa-70

84
src/status_im2/contexts/syncing/scan_sync_code/view.cljs
View File

@ -36,7 +36,7 @@
[]
(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?]}]
(let [subtitle-translate-x (reanimated/interpolate subtitle-opacity [0 1] [-13 0])
subtitle-translate-y (reanimated/interpolate subtitle-opacity [0 1] [-85 0])
@ -110,10 +110,6 @@
(reset! active-tab id)
(reset! read-qr-once? false))}]]]))
(defn- header
[props]
[:f> f-header props])
(defn get-labels-and-on-press-method
[]
(if @camera-permission-granted?
@ -169,55 +165,42 @@
view-finder (assoc layout :height (:width layout))]
(reset! qr-view-finder view-finder)))}])
(defn- border
[border1 border2 corner]
[rn/view {:style (style/border border1 border2 corner)}])
(defn- white-border
[corner]
(let [border-styles (style/white-border corner)]
[rn/view
[rn/view {:style (border-styles :border)}]
[rn/view {:style (border-styles :tip-1)}]
[rn/view {:style (border-styles :tip-2)}]]))
(defn- border-tip
[{:keys [top bottom left right]}]
[rn/view
{:style (style/border-tip top bottom right left)}])
(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
[qr-view-finder]
(let [size (+ (:width qr-view-finder) 2)]
[:<>
[rn/view {:style (style/viewfinder-container qr-view-finder)}
[rn/view
{: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
{:size :paragraph-2
:weight :regular
:style style/viewfinder-text}
(i18n/label :t/ensure-qr-code-is-in-focus-to-scan)]]]))
(let [layout-size (+ (:width qr-view-finder) 2)]
[rn/view {:style (style/viewfinder-container qr-view-finder)}
[white-square layout-size]
[quo/text
{:size :paragraph-2
:weight :regular
:style style/viewfinder-text}
(i18n/label :t/ensure-qr-code-is-in-focus-to-scan)]]))
(defn- scan-qr-code-tab
[qr-view-finder]
[:<>
(if (and @preflight-check-passed?
@camera-permission-granted?
(boolean (not-empty @qr-view-finder)))
[viewfinder @qr-view-finder]
[camera-and-local-network-access-permission-view])])
(if (and @preflight-check-passed?
@camera-permission-granted?
(boolean (not-empty qr-view-finder)))
[viewfinder qr-view-finder]
[camera-and-local-network-access-permission-view]))
(defn- enter-sync-code-tab
[]
@ -273,8 +256,7 @@
:on-read-code on-read-code}]]
[hole-view/hole-view
{:style style/hole
:holes [(merge qr-view-finder
{:borderRadius 16})]}
:holes [(assoc qr-view-finder :borderRadius 16)]}
[blur/view
{:style style/absolute-fill
:blur-amount 10
@ -388,7 +370,7 @@
(when (or (not animated?) @render-camera?)
[render-camera show-camera? torch-mode @qr-view-finder camera-ref on-read-code])
[rn/view {:style (style/root-container (:top insets))}
[header
[:f> header
{:active-tab active-tab
:read-qr-once? read-qr-once?
:title title
@ -406,7 +388,7 @@
:transform [{:translate-y content-translate-y}]}
{})}
(case @active-tab
1 [scan-qr-code-tab qr-view-finder]
1 [scan-qr-code-tab @qr-view-finder]
2 [enter-sync-code-tab]
nil)]
[rn/view {:style style/flex-spacer}]