Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-24 07:46:13 -05:00
Code Issues Activity

🚧 Integrate new header buttons and remove drawtools sidebar.

Browse source
This commit is contained in:
Andrey Antukh 2019-12-19 19:21:41 +01:00
parent 4d1e4ef4c9
commit 83456d46d9
4 changed files with 25 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -242,7 +242,7 @@
(declare initialize-alignment)
(def default-layout #{:sitemap :drawtools :layers :element-options :rules})
(def default-layout #{:sitemap :layers :element-options :rules})
(def workspace-default
{:zoom 1

48
frontend/src/uxbox/main/ui/workspace/header.cljs
View file

@ -70,7 +70,12 @@
on-redo #(st/emit! (udu/redo))
on-image #(modal/show! import-image-modal {})
;;on-download #(udl/open! :download)
file (mf/deref refs/workspace-file)]
file (mf/deref refs/workspace-file)
selected-drawtool (mf/deref refs/selected-drawing-tool)
select-drawtool #(st/emit! :interrupt
(dw/deactivate-ruler)
(dw/select-for-drawing %))]
[:header#workspace-bar.workspace-bar
[:div.main-icon
[:a {:on-click #(st/emit! (rt/nav :dashboard-projects))} i/logo-icon]]
@ -85,40 +90,35 @@
[:div.workspace-options
[:ul.options-btn
; [:li.tooltip.tooltip-bottom
; {:alt (tr "header.draw-tools")
; :class (when (contains? layout :drawtools) "selected")
; :on-click #(st/emit! (dw/toggle-layout-flag :drawtools))}
; i/shapes]
[:li.tooltip.tooltip-bottom
{:alt (tr "header.color-palette")
:class (when (contains? layout :colorpalette) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
{:alt (tr "ds.help.canvas")
:class (when (= selected-drawtool :canvas) "selected")
:on-click (partial select-drawtool :canvas)}
i/artboard]
[:li.tooltip.tooltip-bottom
{:alt (tr "header.color-palette")
:class (when (contains? layout :colorpalette) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
{:alt (tr "ds.help.rect")
:class (when (= selected-drawtool :rect) "selected")
:on-click (partial select-drawtool :rect)}
i/box]
[:li.tooltip.tooltip-bottom
{:alt (tr "header.color-palette")
:class (when (contains? layout :colorpalette) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
{:alt (tr "ds.help.circle")
:class (when (= selected-drawtool :circle) "selected")
:on-click (partial select-drawtool :circle)}
i/circle]
[:li.tooltip.tooltip-bottom
{:alt (tr "header.color-palette")
:class (when (contains? layout :colorpalette) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
{:alt (tr "ds.help.text")
:class (when (= selected-drawtool :text) "selected")
:on-click (partial select-drawtool :text)}
i/text]
[:li.tooltip.tooltip-bottom
{:alt (tr "header.color-palette")
:class (when (contains? layout :colorpalette) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
{:alt (tr "ds.help.path")
:class (when (= selected-drawtool :path) "selected")
:on-click (partial select-drawtool :path)}
i/curve]
[:li.tooltip.tooltip-bottom
{:alt (tr "header.color-palette")
:class (when (contains? layout :colorpalette) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
{:alt (tr "ds.help.curve")
:class (when (= selected-drawtool :curve) "selected")
:on-click (partial select-drawtool :curve)}
i/pencil]
[:li.tooltip.tooltip-bottom
{:alt (tr "header.color-palette")

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

@ -8,7 +8,6 @@
(ns uxbox.main.ui.workspace.sidebar
(:require
[rumext.alpha :as mf]
[uxbox.main.ui.workspace.sidebar.drawtools :refer [draw-toolbox]]
[uxbox.main.ui.workspace.sidebar.history :refer [history-toolbox]]
[uxbox.main.ui.workspace.sidebar.icons :refer [icons-toolbox]]
[uxbox.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
@ -36,8 +35,6 @@
[{:keys [layout page] :as props}]
[:aside#settings-bar.settings-bar
[:div.settings-bar-inside
(when (contains? layout :drawtools)
[:& draw-toolbox {:layout layout}])
(when (contains? layout :element-options)
[:& options-toolbox {:page page}])
#_(when (contains? layout :icons)

85
frontend/src/uxbox/main/ui/workspace/sidebar/drawtools.cljs
View file

@ -1,85 +0,0 @@
;; 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 Juan de la Cruz <delacruzgarciajuan@gmail.com>
;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
(ns uxbox.main.ui.workspace.sidebar.drawtools
(:require
[rumext.alpha :as mf]
[uxbox.builtins.icons :as i]
[uxbox.main.data.workspace :as dw]
[uxbox.main.refs :as refs]
[uxbox.main.store :as st]
[uxbox.util.i18n :refer [tr]]
[uxbox.util.uuid :as uuid]))
;; --- Constants
(def +draw-tools+
[{:icon i/box
:help "ds.help.rect"
:type :rect
:priority 1}
{:icon i/circle
:help "ds.help.circle"
:type :circle
:priority 2}
{:icon i/text
:help "ds.help.text"
:type :text
:priority 4}
{:icon i/curve
:help "ds.help.path"
:type :path
:priority 5}
{:icon i/pencil
:help "ds.help.curve"
:type :curve
:priority 6}
;; TODO: we need an icon for canvas creation
{:icon i/box
:help "ds.help.canvas"
:type :canvas
:priority 7}])
;; --- Draw Toolbox (Component)
(mf/defc draw-toolbox
{:wrap [mf/wrap-memo]}
[{:keys [flags] :as props}]
(letfn [(close [event]
(st/emit! (dw/toggle-layout-flag :drawtools)))
(select [event tool]
(st/emit! :interrupt
(dw/deactivate-ruler)
(dw/select-for-drawing tool)))
(toggle-ruler [event]
(st/emit! (dw/select-for-drawing nil)
dw/deselect-all
(dw/toggle-ruler)))]
(let [selected (mf/deref refs/selected-drawing-tool)
tools (sort-by (comp :priority second) +draw-tools+)]
[:div.tool-window.drawing-tools
[:div.tool-window-bar
[:div.tool-window-icon i/window]
[:span (tr "ds.settings.draw-tools")]
[:div.tool-window-close {:on-click close} i/close]]
[:div.tool-window-content
(for [item tools]
(let [selected? (= (:type item) selected)]
[:div.tool-btn.tooltip.tooltip-hover
{:alt (tr (:help item))
:class (when selected? "selected")
:key (:type item)
:on-click #(select % (:type item))}
(:icon item)]))
#_[:div.tool-btn.tooltip.tooltip-hover
{:alt (tr "ds.help.ruler")
:on-click toggle-ruler
:class (when (contains? flags :ruler) "selected")}
i/ruler-tool]]])))