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

Add image element options.

Browse source
This commit is contained in:
Andrey Antukh 2017-03-03 14:39:34 +01:00
parent 9caeef72ea
commit 9da623e3af
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
3 changed files with 132 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/uxbox/main/ui/shapes/attrs.cljs
View file

@ -13,6 +13,7 @@
:stroke-opacity
:stroke-width
:stroke-style
:opacity
:rx
:ry})

9
frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs
View file

@ -8,7 +8,7 @@
(ns uxbox.main.ui.workspace.sidebar.options
(:require
[lentes.core :as l]
[uxbox.util.i18n :refer (tr)]
[uxbox.util.i18n :refer [tr]]
[uxbox.util.router :as r]
[potok.core :as ptk]
[uxbox.main.store :as st]
@ -17,6 +17,7 @@
[uxbox.builtins.icons :as i]
[uxbox.main.ui.shapes.attrs :refer [shape-default-attrs]]
[uxbox.main.ui.workspace.sidebar.options.icon-measures :as options-iconm]
[uxbox.main.ui.workspace.sidebar.options.image-measures :as options-imagem]
[uxbox.main.ui.workspace.sidebar.options.circle-measures :as options-circlem]
[uxbox.main.ui.workspace.sidebar.options.rect-measures :as options-rectm]
[uxbox.main.ui.workspace.sidebar.options.fill :as options-fill]
@ -37,7 +38,7 @@
:path [::fill ::stroke ::interactions]
:circle [::circle-measures ::fill ::stroke ::interactions]
:text [::fill ::text ::interactions]
:image [::interactions]
:image [::image-measures ::interactions]
:group [::fill ::stroke ::interactions]
::page [::page-measures ::page-grid-options]})
@ -46,6 +47,10 @@
:id ::icon-measures
:icon i/infocard
:comp options-iconm/icon-measures-menu}
{:name "Size, position & rotation"
:id ::image-measures
:icon i/infocard
:comp options-imagem/image-measures-menu}
{:name "Size, position & rotation"
:id ::rect-measures
:icon i/infocard

124
frontend/src/uxbox/main/ui/workspace/sidebar/options/image_measures.cljs Normal file
View file

@ -0,0 +1,124 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) 2015-2017 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.workspace.sidebar.options.image-measures
(:require [lentes.core :as l]
[uxbox.util.i18n :refer (tr)]
[uxbox.util.router :as r]
[potok.core :as ptk]
[uxbox.main.store :as st]
[uxbox.main.data.workspace :as udw]
[uxbox.main.data.shapes :as uds]
[uxbox.builtins.icons :as i]
[uxbox.main.geom :as geom]
[uxbox.util.dom :as dom]
[uxbox.util.geom.point :as gpt]
[uxbox.util.data :refer (parse-int parse-float read-string)]
[uxbox.util.math :refer (precision-or-0)]
[uxbox.util.mixins :as mx :include-macros true]))
(mx/defc image-measures-menu
{:mixins [mx/static]}
[menu {:keys [id] :as shape}]
(letfn [(on-size-change [attr event]
(let [value (dom/event->value event)
value (parse-int value 0)
props {attr value}]
(st/emit! (uds/update-dimensions id props))))
(on-rotation-change [event]
(let [value (dom/event->value event)
value (parse-int value 0)]
(st/emit! (uds/update-rotation id value))))
(on-opacity-change [event]
(let [value (dom/event->value event)
value (parse-float value 1)
value (/ value 10000)]
(st/emit! (uds/update-attrs id {:opacity value}))))
(on-pos-change [attr event]
(let [value (dom/event->value event)
value (parse-int value nil)
point (gpt/point {attr value})]
(st/emit! (uds/update-position id point))))
(on-proportion-lock-change [event]
(if (:proportion-lock shape)
(st/emit! (uds/unlock-proportions id))
(st/emit! (uds/lock-proportions id))))]
(let [size (geom/size shape)]
[:div.element-set {:key (str (:id menu))}
[:div.element-set-title (:name menu)]
[:div.element-set-content
;; SLIDEBAR FOR ROTATION AND OPACITY
[:span "Size"]
[:div.row-flex
[:div.input-element.pixels
[:input.input-text
{:placeholder "Width"
:type "number"
:min "0"
:value (precision-or-0 (:width size) 2)
:on-change (partial on-size-change :width)}]]
[:div.lock-size
{:class (when (:proportion-lock shape) "selected")
:on-click on-proportion-lock-change}
(if (:proportion-lock shape) i/lock i/unlock)]
[:div.input-element.pixels
[:input.input-text
{:placeholder "Height"
:type "number"
:min "0"
:value (precision-or-0 (:height size) 2)
:on-change (partial on-size-change :height)}]]]
[:span "Position"]
[:div.row-flex
[:div.input-element.pixels
[:input.input-text
{:placeholder "X"
:type "number"
:value (precision-or-0 (:x1 shape 0) 2)
:on-change (partial on-pos-change :x)}]]
[:div.input-element.pixels
[:input.input-text
{:placeholder "Y"
:type "number"
:value (precision-or-0 (:y1 shape 0) 2)
:on-change (partial on-pos-change :y)}]]]
;; [:span "Rotation"]
;; [:div.row-flex
;; [:input.slidebar
;; {:type "range"
;; :min 0
;; :max 360
;; :value (:rotation shape 0)
;; :on-change on-rotation-change}]]
;; [:div.row-flex
;; [:div.input-element.degrees
;; [:input.input-text
;; {:placeholder ""
;; :type "number"
;; :min 0
;; :max 360
;; :value (precision-or-0 (:rotation shape 0) 2)
;; :on-change on-rotation-change
;; }]]
;; [:input.input-text
;; {:style {:visibility "hidden"}}]]
[:span "Opacity"]
[:div.row-flex
[:input.slidebar
{:type "range"
:min "0"
:max "10000"
:value (* 10000 (:opacity shape 1))
:step "1"
:on-change on-opacity-change}]]
]])))