0
Fork 0
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:
Andrey Antukh 2016-11-29 17:25:55 +01:00
parent 438f8f5f82
commit e8a4bbea6c
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
15 changed files with 142 additions and 94 deletions

View file

@ -252,6 +252,7 @@
.color-th {
background-color: $color-gray-lighter;
border: 1px solid #aaa;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;

View file

@ -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

View file

@ -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

View file

@ -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))]

View file

@ -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))

View file

@ -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

View file

@ -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]

View file

@ -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)]))

View file

@ -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))}

View file

@ -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)]))

View file

@ -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)]))

View file

@ -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"]]]]])))

View file

@ -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)]))

View file

@ -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))}

View file

@ -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]