3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-10 11:56:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Add shape alignment buttons

Browse source
This commit is contained in:
Andrés Moya 2020-04-07 12:18:10 +02:00
parent b241e26285
commit a4ed1f30a4
12 changed files with 104 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/uxbox/builtins/icons.cljs
View file

@ -69,6 +69,12 @@
(def ruler-tool (icon-xref :ruler-tool))
(def save (icon-xref :save))
(def search (icon-xref :search))
(def shape-halign-left (icon-xref :shape-halign-left))
(def shape-halign-center (icon-xref :shape-halign-center))
(def shape-halign-right (icon-xref :shape-halign-right))
(def shape-valign-top (icon-xref :shape-valign-top))
(def shape-valign-center (icon-xref :shape-valign-center))
(def shape-valign-bottom (icon-xref :shape-valign-bottom))
(def size-horiz (icon-xref :size-horiz))
(def size-vert (icon-xref :size-vert))
(def stroke (icon-xref :stroke))

49
frontend/src/uxbox/main/ui/workspace/sidebar/align.cljs Normal file
View file

@ -0,0 +1,49 @@
;; 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-2016 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.workspace.sidebar.align
(:require
[rumext.alpha :as mf]
[uxbox.builtins.icons :as i]
[uxbox.main.refs :as refs]
[uxbox.util.uuid :as uuid]))
(mf/defc align-options
[]
(let [data (mf/deref refs/workspace-data)
objects (:objects data)
selected (mf/deref refs/selected-shapes)
disabled (cond
(empty? selected) true
(> (count selected) 1) false
:else
(= uuid/zero (:frame-id (get objects (first selected)))))
on-align-button-clicked
(fn [axis] (when-not disabled (println axis)))]
[:div.align-options
[:div.align-button {:class (when disabled "disabled")
:on-click #(on-align-button-clicked :hleft)}
i/shape-halign-left]
[:div.align-button {:class (when disabled "disabled")
:on-click #(on-align-button-clicked :hcenter)}
i/shape-halign-center]
[:div.align-button {:class (when disabled "disabled")
:on-click #(on-align-button-clicked :hright)}
i/shape-halign-right]
[:div.align-button {:class (when disabled "disabled")
:on-click #(on-align-button-clicked :vtop)}
i/shape-valign-top]
[:div.align-button {:class (when disabled "disabled")
:on-click #(on-align-button-clicked :vcenter)}
i/shape-valign-center]
[:div.align-button {:class (when disabled "disabled")
:on-click #(on-align-button-clicked :vbottom)}
i/shape-valign-bottom]]))

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

@ -13,6 +13,7 @@
[uxbox.main.data.workspace :as udw]
[uxbox.main.store :as st]
[uxbox.main.refs :as refs]
[uxbox.main.ui.workspace.sidebar.align :refer [align-options]]
[uxbox.main.ui.workspace.sidebar.options.frame :as frame]
[uxbox.main.ui.workspace.sidebar.options.group :as group]
[uxbox.main.ui.workspace.sidebar.options.rect :as rect]
@ -55,11 +56,12 @@
[{:keys [page selected] :as props}]
(let [close #(st/emit! (udw/toggle-layout-flag :element-options))
selected (mf/deref refs/selected-shapes)]
[:div.elementa-options.tool-window
[:div.element-options.tool-window
;; [:div.tool-window-bar
;; [:div.tool-window-icon i/options]
;; [:span (tr "ds.settings.element-options")]
;; [:div.tool-window-close {:on-click close} i/close]]
[:& align-options]
[:div.tool-window-content
[:div.element-options
(if (= (count selected) 1)