From cea56623905734a72f939fd12e901d3aa45ddf30 Mon Sep 17 00:00:00 2001 From: Brian Sztamfater Date: Wed, 27 Mar 2024 12:05:29 -0300 Subject: [PATCH] make link-1x dynamic! --- .../components/wallet/network_link/view.cljs | 146 ++++++++---------- .../preview/quo/wallet/network_link.cljs | 2 +- 2 files changed, 62 insertions(+), 86 deletions(-) diff --git a/src/quo/components/wallet/network_link/view.cljs b/src/quo/components/wallet/network_link/view.cljs index 5db0df32af7b..340df0469e9e 100644 --- a/src/quo/components/wallet/network_link/view.cljs +++ b/src/quo/components/wallet/network_link/view.cljs @@ -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] @@ -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"}]]) @@ -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) @@ -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]}] diff --git a/src/status_im/contexts/preview/quo/wallet/network_link.cljs b/src/status_im/contexts/preview/quo/wallet/network_link.cljs index a1c91f108c91..9f3603423904 100644 --- a/src/status_im/contexts/preview/quo/wallet/network_link.cljs +++ b/src/status_im/contexts/preview/quo/wallet/network_link.cljs @@ -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]]])))