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

Move element options to sidebar.

Browse source
This commit is contained in:
Andrey Antukh 2016-02-16 21:09:13 +02:00
parent 61e0f6fa10
commit 77fafa85ad
5 changed files with 65 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/uxbox/data/workspace.cljs
View file

@ -64,7 +64,7 @@
rs/UpdateEvent
(-apply-update [_ state]
(let [s {:project projectid
:flags #{:layers}
:flags #{:layers :element-options}
:drawing nil
:selected #{}
:page pageid}]

4
src/uxbox/ui/workspace.cljs
View file

@ -11,7 +11,6 @@
[uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx]
[uxbox.ui.workspace.base :as wb]
[uxbox.ui.workspace.options :refer (element-opts)]
[uxbox.ui.workspace.shortcuts :as wshortcuts]
[uxbox.ui.workspace.pagesmngr :refer (pagesmngr)]
[uxbox.ui.workspace.header :refer (header)]
@ -60,7 +59,8 @@
[own projectid]
(let [{:keys [flags] :as workspace} (rum/react wb/workspace-l)
left-sidebar? (not (empty? (keep flags [:layers :sitemap])))
right-sidebar? (not (empty? (keep flags [:icons :drawtools])))
right-sidebar? (not (empty? (keep flags [:icons :drawtools
:element-options])))
classes (classnames
:no-tool-bar-right (not right-sidebar?)
:no-tool-bar-left (not left-sidebar?))]

3
src/uxbox/ui/workspace/canvas.cljs
View file

@ -23,8 +23,7 @@
[uxbox.ui.workspace.canvas.ruler :refer (ruler)]
[uxbox.ui.workspace.canvas.selection :refer (shapes-selection)]
[uxbox.ui.workspace.canvas.selrect :refer (selrect)]
[uxbox.ui.workspace.grid :refer (grid)]
[uxbox.ui.workspace.options :refer (element-opts)])
[uxbox.ui.workspace.grid :refer (grid)])
(:import goog.events.EventType))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

7
src/uxbox/ui/workspace/sidebar.cljs
View file

@ -7,6 +7,7 @@
[uxbox.rstore :as rs]
[uxbox.ui.mixins :as mx]
[uxbox.ui.workspace.base :as wb]
[uxbox.ui.workspace.sidebar.options :refer (options-toolbox)]
[uxbox.ui.workspace.sidebar.layers :refer (layers-toolbox)]
[uxbox.ui.workspace.sidebar.sitemap :refer (sitemap-toolbox)]
[uxbox.ui.workspace.sidebar.icons :refer (icons-toolbox)]
@ -30,7 +31,7 @@
(def left-sidebar
(mx/component
{:render left-sidebar-render
:name "aside"
:name "left-sidebar"
:mixins [rum/reactive mx/static]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@ -43,6 +44,8 @@
(html
[:aside#settings-bar.settings-bar
[:div.settings-bar-inside
(when (contains? flags :element-options)
(options-toolbox))
(when (contains? flags :drawtools)
(draw-toolbox))
(when (contains? flags :icons)
@ -51,5 +54,5 @@
(def right-sidebar
(mx/component
{:render right-sidebar-render
:name "aside"
:name "right-sidebar"
:mixins [rum/reactive mx/static]}))

95
src/uxbox/ui/workspace/options.cljs → src/uxbox/ui/workspace/sidebar/options.cljs
View file

@ -1,17 +1,21 @@
(ns uxbox.ui.workspace.options
(ns uxbox.ui.workspace.sidebar.options
(:require [sablono.core :as html :refer-macros [html]]
[rum.core :as rum]
[cats.labs.lens :as l]
[uxbox.locales :refer (tr)]
[uxbox.router :as r]
[uxbox.rstore :as rs]
[uxbox.state :as st]
[uxbox.shapes :as sh]
[uxbox.library :as library]
[uxbox.data.workspace :as dw]
[uxbox.ui.workspace.base :as wb]
[uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx]
[uxbox.util.geom.point :as gpt]
[uxbox.util.dom :as dom]
[uxbox.ui.colorpicker :refer (colorpicker)]
[uxbox.ui.workspace.recent-colors :refer (recent-colors)]
[uxbox.ui.workspace.base :as wb]
[uxbox.util.dom :as dom]
[uxbox.util.data :refer (parse-int parse-float read-string)]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@ -50,17 +54,6 @@
{:name "Stroke"
:icon i/stroke}})
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Helpers
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn- get-position
[{:keys [page] :as shape}]
(let [{:keys [x y width]} (sh/-outer-rect shape)
bpt (get @wb/bounding-rect page)
vpt (gpt/point (+ x width 50) (- y 50))]
(gpt/add vpt bpt)))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Implementation
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@ -489,35 +482,59 @@
(defn element-opts-render
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Components
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn options-menus-render
[own shape]
(let [local (:rum/local own)
zoom 1
shape (rum/react shape)
scroll (rum/react wb/scroll-a)
pos (-> (get-position shape)
(gpt/subtract scroll)) ;; and multiply by zoom in future
menus (get +menus-map+ (:type shape))
active-menu (:menu @local (first menus))]
(when (seq menus)
(html
[:div#element-options.element-options
{:style {:left (:x pos) :top (:y pos)}}
[:ul.element-icons
(for [menu-id (get +menus-map+ (:type shape))
:let [menu (get +menus-by-id+ menu-id)
menu (assoc menu :id menu-id)
selected? (= active-menu menu-id)]]
[:li#e-info {:on-click #(swap! local assoc :menu menu-id)
:key (str "menu-" (:id menu))
:class (when selected? "selected")}
(:icon menu)])]
(let [menu (get +menus-by-id+ active-menu)
menu (assoc menu :id active-menu)]
(-render-menu menu own shape local))]))))
(html
[:div
[:ul.element-icons
(for [menu-id (get +menus-map+ (:type shape))
:let [menu (get +menus-by-id+ menu-id)
menu (assoc menu :id menu-id)
selected? (= active-menu menu-id)]]
[:li#e-info {:on-click #(swap! local assoc :menu menu-id)
:key (str "menu-" (:id menu))
:class (when selected? "selected")}
(:icon menu)])]
(let [menu (get +menus-by-id+ active-menu)
menu (assoc menu :id active-menu)]
(-render-menu menu own shape local))])))
(def ^:static element-opts
(def ^:static ^:private options-menus
(mx/component
{:render element-opts-render
:name "element-opts"
:mixins [rum/reactive (mx/local {})]}))
{:render options-menus-render
:name "options-menus"
:mixins [mx/static rum/reactive (mx/local)]}))
(defn options-toolbox-render
[own shape]
(let [workspace (rum/react wb/workspace-l)
close #(rs/emit! (dw/toggle-flag :element-options))
shape (when (and (:selected workspace)
(= (count (:selected workspace)) 1))
(let [shape-id (first (:selected workspace))]
(l/focus-atom (l/in [:shapes-by-id shape-id]) st/state)))]
(html
[:div.elementa-options.tool-window
[:div.tool-window-bar
[:div.tool-window-icon i/project-tree]
[:span (tr "ds.element-options")]
[:div.tool-window-close {:on-click close} i/close]]
[:div.tool-window-content
[:div.element-options.tool-window
(if shape
(options-menus shape))]]])))
(def ^:static options-toolbox
(mx/component
{:render options-toolbox-render
:name "options-toolbox"
:mixins [mx/static rum/reactive (mx/local)]}))