Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-03 21:09:00 -05:00
Code Issues Activity

💄 Change rules styles

Browse source
This commit is contained in:
alonso.torres 2024-01-18 11:37:26 +01:00
parent e193261d7f
commit abb3a33021
1 changed files with 27 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
frontend/src/app/main/ui/workspace/viewport/rules.cljs
View file

@ -23,8 +23,9 @@
(def rules-background "var(--panel-background-color)")
(def selection-area-color "var(--color-primary)")
(def selection-area-opacity 0.3)
(def over-number-size 50)
(def over-number-opacity 0.7)
(def over-number-size 100)
(def over-number-opacity 0.8)
(def over-number-percent 0.75)
(def font-size 12)
(def font-family "worksans")
@ -204,7 +205,29 @@
;; When using the format-number callls we consider if the guide is associated to a frame and we show the position relative to it with the offset
(let [rules-background rules-background]
[:g.selection-area
[:defs
[:linearGradient {:id "selection-gradient-start"}
[:stop {:offset "0%" :stop-color rules-background :stop-opacity 0}]
[:stop {:offset "40%" :stop-color rules-background :stop-opacity 1}]
[:stop {:offset "100%" :stop-color rules-background :stop-opacity 1}]]
[:linearGradient {:id "selection-gradient-end"}
[:stop {:offset "0%" :stop-color rules-background :stop-opacity 1}]
[:stop {:offset "60%" :stop-color rules-background :stop-opacity 1}]
[:stop {:offset "100%" :stop-color rules-background :stop-opacity 0}]]]
[:g
[:rect {:x (- (:x selection-rect) (* (* over-number-size over-number-percent) zoom-inverse))
:y (:y vbox)
:width (* over-number-size zoom-inverse)
:height (* rule-area-size zoom-inverse)
:fill "url('#selection-gradient-start')"}]
[:rect {:x (- (:x2 selection-rect) (* over-number-size (- 1 over-number-percent)))
:y (:y vbox)
:width (* over-number-size zoom-inverse)
:height (* rule-area-size zoom-inverse)
:fill "url('#selection-gradient-end')"}]
[:rect {:x (:x selection-rect)
:y (:y vbox)
:width (:width selection-rect)
@ -212,15 +235,8 @@
:style {:fill selection-area-color
:fill-opacity selection-area-opacity}}]
[:rect {:x (- (:x selection-rect) (* over-number-size zoom-inverse))
:y (:y vbox)
:width (* over-number-size zoom-inverse)
:height (* rule-area-size zoom-inverse)
:style {:fill rules-background
:fill-opacity over-number-opacity}}]
[:text {:x (- (:x1 selection-rect) (* 4 zoom-inverse))
:y (+ (:y vbox) (* 12 zoom-inverse))
:y (+ (:y vbox) (* 10.6 zoom-inverse))
:text-anchor "end"
:dominant-baseline "middle"
:style {:font-size (* font-size zoom-inverse)
@ -228,15 +244,8 @@
:fill selection-area-color}}
(fmt/format-number (- (:x1 selection-rect) offset-x))]
[:rect {:x (:x2 selection-rect)
:y (:y vbox)
:width (* over-number-size zoom-inverse)
:height (* rule-area-size zoom-inverse)
:style {:fill rules-background
:fill-opacity over-number-opacity}}]
[:text {:x (+ (:x2 selection-rect) (* 4 zoom-inverse))
:y (+ (:y vbox) (* 12 zoom-inverse))
:y (+ (:y vbox) (* 10.6 zoom-inverse))
:text-anchor "start"
:dominant-baseline "middle"
:style {:font-size (* font-size zoom-inverse)