Skip to content

Commit

Permalink
make link-1x dynamic!
Browse files Browse the repository at this point in the history
  • Loading branch information
@briansztamfater
briansztamfater committed Mar 27, 2024
1 parent 509d4fb commit cea5662
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 86 deletions.
146 changes: 61 additions & 85 deletions src/quo/components/wallet/network_link/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
(ns quo.components.wallet.network-link.view
(:require
[oops.core :refer [oget]]
[quo.components.wallet.network-link.schema :as component-schema]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[react-native.svg :as svg]
[schema.core :as schema]
[reagent.core :as reagent]))
[reagent.core :as reagent]
[schema.core :as schema]))

(defn circle
[fill stroke]
Expand All @@ -15,7 +16,7 @@
[svg/circle
{:cx "4"
:cy "4"
:r "3.5" ;; Adjusted radius to account for stroke width
:r "3.5"
:fill fill
:stroke stroke
:strokeWidth "1"}]])
Expand All @@ -29,15 +30,6 @@
[svg/line
{:x1 "0" :y1 "5" :x2 "100%" :y2 "5" :stroke stroke}]]])

(defn path
[stroke d defs]
[rn/view
{:style {:flex 1 :height 66 :justifyContent "center"}}
[svg/svg
{:height "66" :width "100%"}
[svg/path {:stroke stroke :d d :fill "none"}]
(when defs defs)]])

(defn link-linear
[{:keys [source theme]}]
(let [stroke-color (colors/resolve-color source theme)
Expand All @@ -50,86 +42,70 @@
[rn/view {:style {:position :absolute :right -3}}
[circle fill-color stroke-color]]]))

(def central-figure-width 63)

(defn- calculate-side-lines-path
"Calculates the `d` attribute for the side lines based on the SVG width."
[width]
(let [side-offset (/ (- width central-figure-width) 2)]
{:left (str "M0 57 L" side-offset " 57")
:right (str "M" (+ side-offset central-figure-width) " 1 L" width " 1")}))

(defn- calculate-transform
"Calculates the transform attribute for the central figure based on the SVG width."
[width]
(let [translate-x (/ (- width central-figure-width) 2)]
(str "translate(" translate-x " 0)")))

(defn link-1x
"Arranges two circles with a custom path between them, designed for React Native."
[{:keys [source destination theme]}]
(let [dimensions (reagent/atom {:width 100 :height 58})
(let [container-width (reagent/atom 100)
source-color (colors/resolve-color source theme)
destination-color (colors/resolve-color destination theme)
fill-color (colors/theme-colors colors/white colors/neutral-90 theme)
stroke-color "url(#gradient)"
width (- (:width @dimensions) 0)]
stroke-color "url(#gradient)"]
(fn []
[rn/view
{:style {:flex-direction :row :align-items :center :height 58}
:on-layout #(let [event (.nativeEvent %)
layout (.-layout event)]
(reset! dimensions {:width (.-width layout)
:height (.-height layout)}))}
;; Central figure, dynamically adjusted based on width from dimensions
[rn/view
{:style {:flex 1 :height 58 :justify-content "center"}}
[svg/svg
{:xmlns "http://www.w3.org/2000/svg"
:height "100%"
:width "100%"
:viewBox "0 0 73 58"
:fill :none}
[svg/path
{:d "M0 57 L5 57"
:stroke stroke-color}]
[svg/path
{:d
"M63 1L53.6356 1C42.5899 1 33.6356 9.9543 33.6356 21L33.6356 37C33.6356 48.0457 24.6813 57 13.6356 57L0 57"
:transform "translate(5 0)"
:stroke stroke-color}]
[svg/path
{:d "M68 1 L73 1"
:stroke stroke-color}]
[svg/defs
[svg/linear-gradient
{:id "gradient"
:x1 "72.271"
:x2 "82.385"
:y1 "5"
:y2 "34.155"
:gradientUnits "userSpaceOnUse"}
[svg/stop {:stopColor (colors/resolve-color destination theme)}]
[svg/stop {:offset "1" :stopColor (colors/resolve-color source theme)}]]]]
[rn/view {:style {:position :absolute :bottom -3 :left -3}}
[circle fill-color source-color]]
[rn/view {:style {:position :absolute :top -3 :right -3}}
[circle fill-color destination-color]]]])))

#_(defn link-1x
[{:keys [source destination theme]}]
[svg/svg
{:xmlns "http://www.w3.org/2000/svg"
:width "100%"
:height "66"
:viewBox "0 0 73 66"
:preserveAspectRatio "xMinYMid meet"
:fill :none}
[svg/path
{:stroke "url(#gradient)"
:d "M68 5h-9.364c-11.046 0-20 8.954-20 20v16c0 11.046-8.955 20-20 20H5"}]
[svg/circle
{:cx "68"
:cy "5"
:r "4"
:fill (colors/theme-colors colors/white colors/neutral-90 theme)
:stroke (colors/resolve-color destination theme)}]
[svg/circle
{:cx "5"
:cy "61"
:r "4"
:fill (colors/theme-colors colors/white colors/neutral-90 theme)
:stroke (colors/resolve-color source theme)}]
[svg/defs
[svg/linear-gradient
{:id "gradient" :x1 "72.271" :x2 "82.385" :y1 "5" :y2 "34.155" :gradientUnits "userSpaceOnUse"}
[svg/stop {:stopColor (colors/resolve-color destination theme)}]
[svg/stop {:offset "1" :stopColor (colors/resolve-color source theme)}]]]])
(let [view-box (str "0 0 " @container-width " 58")
side-lines-path (calculate-side-lines-path @container-width)
central-transform (calculate-transform @container-width)]
[rn/view
{:style {:flex-direction :row :align-items :center :height 58}
:on-layout #(reset! container-width
(oget % :nativeEvent :layout :width))}
[rn/view
{:style {:flex 1 :height 58 :justify-content "center"}}
[svg/svg
{:xmlns "http://www.w3.org/2000/svg"
:height "100%"
:width "100%"
:viewBox view-box
:fill :none}
[svg/path
{:d (:left side-lines-path)
:stroke stroke-color}]
[svg/path
{:d
"M63 1L53.6356 1C42.5899 1 33.6356 9.9543 33.6356 21L33.6356 37C33.6356 48.0457 24.6813 57 13.6356 57L0 57"
:transform central-transform
:stroke stroke-color}]
[svg/path
{:d (:right side-lines-path)
:stroke stroke-color}]
[svg/defs
[svg/linear-gradient
{:id "gradient"
:x1 "72.271"
:x2 "82.385"
:y1 "5"
:y2 "34.155"
:gradientUnits "userSpaceOnUse"}
[svg/stop {:stopColor (colors/resolve-color destination theme)}]
[svg/stop {:offset "1" :stopColor (colors/resolve-color source theme)}]]]]
[rn/view {:style {:position :absolute :bottom -3 :left -3}}
[circle fill-color source-color]]
[rn/view {:style {:position :absolute :top -3 :right -3}}
[circle fill-color destination-color]]]]))))

(defn link-2x
[{:keys [source destination theme]}]
Expand Down
2 changes: 1 addition & 1 deletion src/status_im/contexts/preview/quo/wallet/network_link.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,5 +38,5 @@
:component-container-style {:padding-top 40
:align-items :center}}
[rn/view
{:style {:width 73}}
{:style {:width 63}}
[quo/network-link @state]]])))

0 comments on commit cea5662

Please sign in to comment.