mirror of
https://github.com/penpot/penpot.git
synced 2025-02-07 23:08:24 -05:00
Add colorpicker styles and minor changes.
This commit is contained in:
parent
5fb93ad5fd
commit
5cea9f1a36
3 changed files with 16 additions and 10 deletions
|
@ -16,10 +16,8 @@
|
||||||
(let [canvas (util/get-ref-dom own "colorpicker")
|
(let [canvas (util/get-ref-dom own "colorpicker")
|
||||||
context (.getContext canvas "2d")
|
context (.getContext canvas "2d")
|
||||||
brect (.getBoundingClientRect canvas)
|
brect (.getBoundingClientRect canvas)
|
||||||
ox (.-left brect)
|
x (- (.-pageX e) (.-left brect))
|
||||||
oy (.-top brect)
|
y (- (.-pageY e) (.-top brect))
|
||||||
x (- (.-pageX e) ox)
|
|
||||||
y (- (.-pageY e) oy)
|
|
||||||
image (.getImageData context x y 1 1)
|
image (.getImageData context x y 1 1)
|
||||||
r (aget (.-data image) 0)
|
r (aget (.-data image) 0)
|
||||||
g (aget (.-data image) 1)
|
g (aget (.-data image) 1)
|
||||||
|
@ -30,12 +28,13 @@
|
||||||
(defn colorpicker-render
|
(defn colorpicker-render
|
||||||
[own callback]
|
[own callback]
|
||||||
(html
|
(html
|
||||||
[:canvas
|
[:section.colorpicker
|
||||||
{:width "400"
|
[:canvas
|
||||||
:height "300"
|
{:width "400"
|
||||||
:on-click #(on-click-handler % own callback)
|
:height "300"
|
||||||
:id "colorpicker"
|
:on-click #(on-click-handler % own callback)
|
||||||
:ref "colorpicker"}]))
|
:id "colorpicker"
|
||||||
|
:ref "colorpicker"}]]))
|
||||||
|
|
||||||
(defn colorpicker-did-mount
|
(defn colorpicker-did-mount
|
||||||
[own]
|
[own]
|
||||||
|
|
|
@ -43,3 +43,4 @@
|
||||||
@import 'partials/library-bar';
|
@import 'partials/library-bar';
|
||||||
@import 'partials/lightbox';
|
@import 'partials/lightbox';
|
||||||
@import 'partials/color-palette';
|
@import 'partials/color-palette';
|
||||||
|
@import 'partials/colorpicker';
|
||||||
|
|
6
resources/public/styles/partials/colorpicker.scss
Normal file
6
resources/public/styles/partials/colorpicker.scss
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
.colorpicker {
|
||||||
|
canvas {
|
||||||
|
border: 1px solid #111111;
|
||||||
|
cursor: cell;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue