mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 17:21:17 -05:00
Add implementation for grid settings and page background.
On element options sidebar.
This commit is contained in:
parent
438f8f5f82
commit
e8a4bbea6c
15 changed files with 142 additions and 94 deletions
|
@ -252,6 +252,7 @@
|
|||
|
||||
.color-th {
|
||||
background-color: $color-gray-lighter;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
|
|
|
@ -27,6 +27,8 @@
|
|||
(s/def ::grid-x-axis number?)
|
||||
(s/def ::grid-y-axis number?)
|
||||
(s/def ::grid-color us/color?)
|
||||
(s/def ::background us/color?)
|
||||
(s/def ::background-opacity number?)
|
||||
(s/def ::grid-alignment boolean?)
|
||||
(s/def ::width number?)
|
||||
(s/def ::height number?)
|
||||
|
@ -38,9 +40,10 @@
|
|||
::grid-x-axis
|
||||
::grid-color
|
||||
::grid-alignment
|
||||
::background
|
||||
::background-opacity
|
||||
::layout]))
|
||||
|
||||
|
||||
;; --- Protocols
|
||||
|
||||
(defprotocol IPageUpdate
|
||||
|
|
|
@ -210,7 +210,7 @@
|
|||
ptk/WatchEvent
|
||||
(watch [_ state s]
|
||||
(let [page (get-in state [:pages id])
|
||||
opts (:options page)
|
||||
opts (:metadata page)
|
||||
message {:cmd :grid-init
|
||||
:width c/viewport-width
|
||||
:height c/viewport-height
|
||||
|
|
|
@ -32,12 +32,13 @@
|
|||
;; --- Background
|
||||
|
||||
(mx/defc background
|
||||
[]
|
||||
{:mixins [mx/static]}
|
||||
[{:keys [background] :as metadata}]
|
||||
[:rect
|
||||
{:x 0 :y 0
|
||||
:width "100%"
|
||||
:height "100%"
|
||||
:fill "white"}])
|
||||
:fill (or background "#000000")}])
|
||||
|
||||
;; --- Canvas
|
||||
|
||||
|
@ -53,7 +54,7 @@
|
|||
:ref (str "canvas" id)
|
||||
:width width
|
||||
:height height}
|
||||
(background)
|
||||
(background metadata)
|
||||
[:svg.page-layout
|
||||
[:g.main {}
|
||||
(for [item (reverse (:shapes page))]
|
||||
|
|
|
@ -6,32 +6,31 @@
|
|||
;; Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.colorpicker
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[lentes.core :as l]
|
||||
[uxbox.util.i18n :refer (tr)]
|
||||
[uxbox.util.router :as r]
|
||||
(:require [lentes.core :as l]
|
||||
[uxbox.util.router :as rt]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.store :as st]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.data.pages :as udp]
|
||||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.main.ui.workspace.base :as wb]
|
||||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.main.ui.lightbox :as lbx]
|
||||
[uxbox.main.ui.colorpicker :as cp]
|
||||
[uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
|
||||
[uxbox.main.ui.workspace.recent-colors :refer [recent-colors]]
|
||||
[uxbox.main.ui.workspace.base :as wb]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer (parse-int parse-float read-string)]))
|
||||
[uxbox.util.data :refer [parse-int parse-float read-string]]))
|
||||
|
||||
(defn- focus-shape
|
||||
[id]
|
||||
(-> (l/in [:shapes id])
|
||||
(l/derive st/state)))
|
||||
|
||||
(defn- colorpicker-render
|
||||
(mx/defcs shape-colorpicker
|
||||
{:mixins [mx/reactive mx/static]}
|
||||
[own {:keys [x y shape attr] :as opts}]
|
||||
(let [shape (mx/react (focus-shape shape))
|
||||
left (- x 260)
|
||||
|
@ -41,28 +40,38 @@
|
|||
(st/emit!
|
||||
(case attr
|
||||
:stroke (uds/update-stroke-attrs (:id shape) attrs)
|
||||
:fill (uds/update-fill-attrs (:id shape) attrs)))))
|
||||
(on-change-color [event]
|
||||
(let [color (dom/event->value event)]
|
||||
(change-color color)))]
|
||||
(html
|
||||
[:div.colorpicker-tooltip
|
||||
{:style {:left (str left "px")
|
||||
:top (str top "px")}}
|
||||
:fill (uds/update-fill-attrs (:id shape) attrs)))))]
|
||||
[:div.colorpicker-tooltip
|
||||
{:style {:left (str left "px")
|
||||
:top (str top "px")}}
|
||||
|
||||
(cp/colorpicker
|
||||
:theme :small
|
||||
:value (get shape attr "#000000")
|
||||
:on-change change-color)
|
||||
(cp/colorpicker
|
||||
:theme :small
|
||||
:value (get shape attr "#000000")
|
||||
:on-change change-color)
|
||||
(recent-colors shape change-color)])))
|
||||
|
||||
(recent-colors shape change-color)]))))
|
||||
(mx/defcs page-colorpicker
|
||||
{:mixins [mx/reactive mx/static]}
|
||||
[own {:keys [x y attr default] :as opts}]
|
||||
(let [{:keys [id metadata] :as page} (mx/react wb/page-ref)]
|
||||
(letfn [(change-color [color]
|
||||
(let [metadata (assoc metadata attr color)]
|
||||
(st/emit! (udp/update-metadata id metadata))))]
|
||||
[:div.colorpicker-tooltip
|
||||
{:style {:left (str (- x 260) "px")
|
||||
:top (str (- y 50) "px")}}
|
||||
|
||||
(def colorpicker
|
||||
(mx/component
|
||||
{:render colorpicker-render
|
||||
:name "colorpicker"
|
||||
:mixins [mx/reactive mx/static]}))
|
||||
(cp/colorpicker
|
||||
:theme :small
|
||||
:value (get metadata attr default)
|
||||
:on-change change-color)])))
|
||||
|
||||
(defmethod lbx/render-lightbox :workspace/colorpicker
|
||||
(defmethod lbx/render-lightbox :workspace/shape-colorpicker
|
||||
[params]
|
||||
(colorpicker params))
|
||||
(shape-colorpicker params))
|
||||
|
||||
(defmethod lbx/render-lightbox :workspace/page-colorpicker
|
||||
[params]
|
||||
(println "kakakaka")
|
||||
(page-colorpicker params))
|
||||
|
|
|
@ -6,9 +6,7 @@
|
|||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.grid
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[cuerdas.core :as str]
|
||||
(:require [cuerdas.core :as str]
|
||||
[uxbox.main.constants :as c]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.main.ui.workspace.base :as wb]))
|
||||
|
@ -18,9 +16,10 @@
|
|||
(declare vertical-line)
|
||||
(declare horizontal-line)
|
||||
|
||||
(defn- grid-render
|
||||
(mx/defcs grid
|
||||
{:mixins [mx/static mx/reactive]}
|
||||
[own]
|
||||
(let [options (:options (mx/react wb/page-ref))
|
||||
(let [options (:metadata (mx/react wb/page-ref))
|
||||
color (:grid-color options "#cccccc")
|
||||
width c/viewport-width
|
||||
height c/viewport-height
|
||||
|
@ -35,15 +34,8 @@
|
|||
path (as-> [] $
|
||||
(reduce (partial vertical-line height) $ x-ticks)
|
||||
(reduce (partial horizontal-line width) $ y-ticks))]
|
||||
(html
|
||||
[:g.grid {:style {:pointer-events "none"}}
|
||||
[:path {:d (str/join " " path) :stroke color :opacity "0.3"}]])))
|
||||
|
||||
(def grid
|
||||
(mx/component
|
||||
{:render grid-render
|
||||
:name "grid"
|
||||
:mixins [mx/static mx/reactive]}))
|
||||
[:g.grid {:style {:pointer-events "none"}}
|
||||
[:path {:d (str/join " " path) :stroke color :opacity "0.3"}]]))
|
||||
|
||||
;; --- Helpers
|
||||
|
||||
|
|
|
@ -17,8 +17,6 @@
|
|||
[uxbox.main.ui.workspace.base :as wb]
|
||||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.main.ui.workspace.colorpicker :refer (colorpicker)]
|
||||
[uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
|
||||
[uxbox.main.ui.workspace.sidebar.options.icon-measures :as options-iconm]
|
||||
[uxbox.main.ui.workspace.sidebar.options.circle-measures :as options-circlem]
|
||||
[uxbox.main.ui.workspace.sidebar.options.rect-measures :as options-rectm]
|
||||
|
|
|
@ -17,8 +17,6 @@
|
|||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.main.ui.workspace.colorpicker :refer (colorpicker)]
|
||||
[uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer (parse-int parse-float read-string)]))
|
||||
|
|
|
@ -42,7 +42,7 @@
|
|||
:shape (:id shape)
|
||||
:attr :fill
|
||||
:transparent? true}]
|
||||
(udl/open! :workspace/colorpicker opts)))]
|
||||
(udl/open! :workspace/shape-colorpicker opts)))]
|
||||
|
||||
(html
|
||||
[:div.element-set {:key (str (:id menu))}
|
||||
|
|
|
@ -17,8 +17,6 @@
|
|||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.main.ui.workspace.colorpicker :refer (colorpicker)]
|
||||
[uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer (parse-int parse-float read-string)]))
|
||||
|
|
|
@ -17,8 +17,6 @@
|
|||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.main.ui.workspace.colorpicker :refer (colorpicker)]
|
||||
[uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer (parse-int parse-float read-string)]))
|
||||
|
|
|
@ -11,10 +11,10 @@
|
|||
[potok.core :as ptk]
|
||||
[uxbox.store :as st]
|
||||
[uxbox.main.data.pages :as udp]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.main.ui.workspace.base :refer [page-ref]]
|
||||
[uxbox.main.ui.workspace.colorpicker :refer [colorpicker]]
|
||||
[uxbox.main.ui.workspace.recent-colors :refer [recent-colors]]
|
||||
[uxbox.main.ui.workspace.colorpicker]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.util.data :refer [parse-int]]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
@ -22,8 +22,8 @@
|
|||
(mx/defcs measures-menu
|
||||
{:mixins [mx/static mx/reactive]}
|
||||
[own menu]
|
||||
(let [{:keys [id] :as page} (mx/react page-ref)
|
||||
{:keys [width height] :as metadata} (:metadata page)]
|
||||
(let [{:keys [id metadata] :as page} (mx/react page-ref)
|
||||
{:keys [width height background] :as metadata} metadata]
|
||||
(letfn [(on-width-change []
|
||||
(when-let [value (-> (mx/ref-node own "width")
|
||||
(dom/get-value)
|
||||
|
@ -37,7 +37,16 @@
|
|||
(parse-int nil))]
|
||||
(->> (assoc metadata :height value)
|
||||
(udp/update-metadata id)
|
||||
(st/emit!))))]
|
||||
(st/emit!))))
|
||||
(show-color-picker [event]
|
||||
(println "show-color-picker")
|
||||
(let [x (.-clientX event)
|
||||
y (.-clientY event)
|
||||
opts {:x x :y y
|
||||
:default "#ffffff"
|
||||
:transparent? true
|
||||
:attr :background}]
|
||||
(udl/open! :workspace/page-colorpicker opts)))]
|
||||
[:div.element-set
|
||||
[:div.element-set-title (:name menu)]
|
||||
[:div.element-set-content
|
||||
|
@ -59,29 +68,77 @@
|
|||
:placeholder "height"}]]]
|
||||
[:span "Background color"]
|
||||
[:div.row-flex.color-data
|
||||
[:span.color-th {:style {:background-color "#d2d2d2"}}]
|
||||
[:span.color-th
|
||||
{:style {:background-color (or background "#ffffff")}
|
||||
:on-click show-color-picker}]
|
||||
[:div.color-info
|
||||
[:span "#D2D2D2"]]]]])))
|
||||
[:span (or background "#ffffff")]]]]])))
|
||||
|
||||
(mx/defc grid-options-menu
|
||||
{:mixins [mx/static]}
|
||||
[menu]
|
||||
[:div.element-set
|
||||
[:div.element-set-title (:name menu)]
|
||||
[:div.element-set-content
|
||||
[:span "Size"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:type "number" :placeholder "x"}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:type "number" :placeholder "y"}]]]
|
||||
[:span "Color"]
|
||||
[:div.row-flex.color-data
|
||||
[:span.color-th {:style {:background-color "#d2d2d2"}}]
|
||||
[:div.color-info
|
||||
[:span "#D2D2D2"]]]
|
||||
[:span "Magnet option"]
|
||||
[:div.row-flex
|
||||
[:div.input-checkbox.check-primary
|
||||
[:input {:type "checkbox" :id "magnet" :value "Yes"}]
|
||||
[:label {:for "magnet"} "Activate magnet"]]]]])
|
||||
(mx/defcs grid-options-menu
|
||||
{:mixins [mx/static mx/reactive]}
|
||||
[own menu]
|
||||
(let [{:keys [id metadata] :as page} (mx/react page-ref)]
|
||||
(letfn [(on-x-change []
|
||||
(when-let [value (-> (mx/ref-node own "x-axis")
|
||||
(dom/get-value)
|
||||
(parse-int nil))]
|
||||
(->> (assoc metadata :grid-x-axis value)
|
||||
(udp/update-metadata id)
|
||||
(st/emit!))))
|
||||
(on-y-change []
|
||||
(when-let [value (-> (mx/ref-node own "y-axis")
|
||||
(dom/get-value)
|
||||
(parse-int nil))]
|
||||
(->> (assoc metadata :grid-y-axis value)
|
||||
(udp/update-metadata id)
|
||||
(st/emit!))))
|
||||
(on-magnet-change []
|
||||
(let [checked? (dom/checked? (mx/ref-node own "magnet"))]
|
||||
(->> (assoc metadata :grid-alignment checked?)
|
||||
(udp/update-metadata id)
|
||||
(st/emit!))))
|
||||
(show-color-picker [event]
|
||||
(let [x (.-clientX event)
|
||||
y (.-clientY event)
|
||||
opts {:x x :y y
|
||||
:transparent? true
|
||||
:default "#cccccc"
|
||||
:attr :grid-color}]
|
||||
(udl/open! :workspace/page-colorpicker opts)))]
|
||||
[:div.element-set
|
||||
[:div.element-set-title (:name menu)]
|
||||
[:div.element-set-content
|
||||
[:span "Size"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:type "number"
|
||||
:ref "x-axis"
|
||||
:value (:grid-x-axis metadata 10)
|
||||
:on-change on-x-change
|
||||
:placeholder "x"}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:type "number"
|
||||
:ref "y-axis"
|
||||
:value (:grid-y-axis metadata 10)
|
||||
:on-change on-y-change
|
||||
:placeholder "y"}]]]
|
||||
[:span "Color"]
|
||||
[:div.row-flex.color-dat
|
||||
[:span.color-th
|
||||
{:style {:background-color (:grid-color metadata "#cccccc")}
|
||||
:on-click show-color-picker}]
|
||||
[:div.color-info
|
||||
[:span (:grid-color metadata "#cccccc")]]]
|
||||
|
||||
[:span "Magnet option"]
|
||||
[:div.row-flex
|
||||
[:div.input-checkbox.check-primary
|
||||
[:input
|
||||
{:type "checkbox"
|
||||
:ref "magnet"
|
||||
:id "magnet"
|
||||
:on-change on-magnet-change
|
||||
:checked (when (:grid-alignment metadata) "checked")}]
|
||||
[:label {:for "magnet"} "Activate magnet"]]]]])))
|
||||
|
|
|
@ -15,8 +15,6 @@
|
|||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.main.ui.workspace.colorpicker :refer (colorpicker)]
|
||||
[uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer (parse-int parse-float read-string)]))
|
||||
|
|
|
@ -34,9 +34,6 @@
|
|||
value (parse-float value 1)
|
||||
value (/ value 10000)]
|
||||
(change-stroke {:opacity value})))
|
||||
(on-color-change [event]
|
||||
(let [value (dom/event->value event)]
|
||||
(change-stroke {:color value})))
|
||||
(on-stroke-style-change [event]
|
||||
(let [value (dom/event->value event)
|
||||
value (read-string value)]
|
||||
|
@ -48,7 +45,7 @@
|
|||
:shape (:id shape)
|
||||
:attr :stroke
|
||||
:transparent? true}]
|
||||
(udl/open! :workspace/colorpicker opts)))]
|
||||
(udl/open! :workspace/shape-colorpicker opts)))]
|
||||
(let [local (:rum/local own)]
|
||||
(html
|
||||
[:div.element-set {:key (str (:id menu))}
|
||||
|
|
|
@ -18,8 +18,6 @@
|
|||
[uxbox.main.ui.workspace.base :as wb]
|
||||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.main.ui.workspace.colorpicker :refer (colorpicker)]
|
||||
[uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
|
||||
[uxbox.main.ui.workspace.base :as wb]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.util.dom :as dom]
|
||||
|
|
Loading…
Add table
Reference in a new issue