mirror of
https://github.com/penpot/penpot.git
synced 2025-05-30 21:36:11 +02:00
🎉 Adapt workspace to new visual layout.
This commit is contained in:
Juan de la Cruz
Andrey Antukh
parent
371ff5e019
commit
25437fafc2
10 changed files with 269 additions and 249 deletions
|
|
@ -10,6 +10,7 @@
|
|||
[beicon.core :as rx]
|
||||
[lentes.core :as l]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.builtins.icons :as i :include-macros true]
|
||||
[uxbox.main.constants :as c]
|
||||
[uxbox.main.data.history :as udh]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
|
|
@ -88,6 +89,47 @@
|
|||
[:section.workspace-viewport {:id "workspace-viewport" :ref frame}
|
||||
[:& viewport {:page page :file file}]]]
|
||||
|
||||
;; --- Left toolbar (NEW COMPONENT)
|
||||
|
||||
[:div.left-toolbar
|
||||
[:div.left-toolbar-inside
|
||||
[:ul.left-toolbar-options
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Artboard"}
|
||||
i/artboard]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Box"}
|
||||
i/box]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Circle"}
|
||||
i/circle]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Text"}
|
||||
i/text]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Insert image"}
|
||||
i/image]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Pencil tool"}
|
||||
i/pencil]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Curves tool"}
|
||||
i/curve]]
|
||||
|
||||
[:ul.left-toolbar-options.panels
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Layers"}
|
||||
i/layers]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Libraries"}
|
||||
i/icon-set]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "History"}
|
||||
i/undo-history]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Palette"}
|
||||
i/palette]]]]
|
||||
|
||||
;; Aside
|
||||
(when left-sidebar?
|
||||
[:& left-sidebar {:file file :page page :layout layout}])
|
||||
|
|
|
|||
|
|
@ -32,11 +32,10 @@
|
|||
(let [zoom (mf/deref refs/selected-zoom)
|
||||
increase #(st/emit! dw/increase-zoom)
|
||||
decrease #(st/emit! dw/decrease-zoom)]
|
||||
[:ul.options-view
|
||||
[:li.zoom-input
|
||||
[:span.add-zoom {:on-click decrease} "-"]
|
||||
[:span {} (str (mth/round (* 100 zoom)) "%")]
|
||||
[:span.remove-zoom {:on-click increase} "+"]]]))
|
||||
[:div.zoom-input
|
||||
[:span.add-zoom {:on-click decrease} "-"]
|
||||
[:span {} (str (mth/round (* 100 zoom)) "%")]
|
||||
[:span.remove-zoom {:on-click increase} "+"]]))
|
||||
|
||||
;; --- Header Users
|
||||
|
||||
|
|
@ -80,113 +79,15 @@
|
|||
[:a {:on-click #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))}
|
||||
i/logo-icon]]
|
||||
|
||||
[:div.menu-btn i/actions]
|
||||
|
||||
[:div.project-tree-btn
|
||||
{:alt (tr "header.sitemap")
|
||||
:class (when (contains? layout :sitemap) "selected")
|
||||
:on-click #(st/emit! (dw/toggle-layout-flag :sitemap))}
|
||||
[:span.project-name "Project name /"]
|
||||
[:span (:name file)]]
|
||||
|
||||
[:& active-users]
|
||||
|
||||
[:div.workspace-options
|
||||
[:ul.options-btn
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.header.frame")
|
||||
:class (when (= selected-drawtool :frame) "selected")
|
||||
:on-click (partial select-drawtool :frame)}
|
||||
i/artboard]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.header.rect")
|
||||
:class (when (= selected-drawtool :rect) "selected")
|
||||
:on-click (partial select-drawtool :rect)}
|
||||
i/box
|
||||
]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.header.circle")
|
||||
:class (when (= selected-drawtool :circle) "selected")
|
||||
:on-click (partial select-drawtool :circle)}
|
||||
i/circle]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.header.text")
|
||||
:class (when (= selected-drawtool :text) "selected")
|
||||
:on-click (partial select-drawtool :text)}
|
||||
i/text]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.header.path")
|
||||
:class (when (= selected-drawtool :path) "selected")
|
||||
:on-click (partial select-drawtool :path)}
|
||||
i/curve]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.header.curve")
|
||||
:class (when (= selected-drawtool :curve) "selected")
|
||||
:on-click (partial select-drawtool :curve)}
|
||||
i/pencil]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.header.color-palette")
|
||||
:class (when (contains? layout :colorpalette) "selected")
|
||||
:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
|
||||
i/palette]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.header.icons")
|
||||
:class (when (contains? layout :icons) "selected")
|
||||
:on-click #(st/emit! (dw/toggle-layout-flag :icons))}
|
||||
i/icon-set]
|
||||
;; [:li.tooltip.tooltip-bottom
|
||||
;; {:alt (tr "header.layers")
|
||||
;; :class (when (contains? layout :layers) "selected")
|
||||
;; :on-click #(st/emit! (dw/toggle-layout-flag :layers))}
|
||||
;; i/layers]
|
||||
;; [:li.tooltip.tooltip-bottom
|
||||
;; {:alt (tr "header.element-options")
|
||||
;; :class (when (contains? layout :element-options) "selected")
|
||||
;; :on-click #(st/emit! (dw/toggle-layout-flag :element-options))}
|
||||
;; i/options]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.header.document-history")
|
||||
:class (when (contains? layout :document-history) "selected")
|
||||
:on-click #(st/emit! (dw/toggle-layout-flag :document-history))}
|
||||
i/undo-history]
|
||||
;; [:li.tooltip.tooltip-bottom
|
||||
;; {:alt (tr "header.undo")
|
||||
;; :on-click on-undo}
|
||||
;; i/undo]
|
||||
;; [:li.tooltip.tooltip-bottom
|
||||
;; {:alt (tr "header.redo")
|
||||
;; :on-click on-redo}
|
||||
;; i/redo]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.header.download")
|
||||
;; :on-click on-download
|
||||
}
|
||||
i/download]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.header.image")
|
||||
:on-click on-image}
|
||||
i/image]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.header.rules")
|
||||
:class (when (contains? layout :rules) "selected")
|
||||
:on-click (partial toggle-layout :rules)}
|
||||
i/ruler]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.header.grid")
|
||||
:class (when (contains? layout :grid) "selected")
|
||||
:on-click (partial toggle-layout :grid)}
|
||||
i/grid]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.header.grid-snap")
|
||||
:class (when (contains? layout :grid-snap) "selected")
|
||||
:on-click (partial toggle-layout :grid-snap)}
|
||||
i/grid-snap]]]
|
||||
;; [:li.tooltip.tooltip-bottom
|
||||
;; {:alt (tr "header.align")}
|
||||
;; i/alignment]]
|
||||
;; [:& user]
|
||||
[:div.secondary-options
|
||||
[:& zoom-widget]
|
||||
[:a.tooltip.tooltip-bottom.view-mode
|
||||
{:alt (tr "workspace.header.view-mode")
|
||||
;; :on-click #(st/emit! (dw/->OpenView (:id page)))
|
||||
}
|
||||
i/play]]
|
||||
]))
|
||||
[:& active-users]]
|
||||
[:& zoom-widget]]))
|
||||
|
|
|
|||
57
frontend/src/uxbox/main/ui/workspace/left-toolbar.cljs
Normal file
57
frontend/src/uxbox/main/ui/workspace/left-toolbar.cljs
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
;; 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/.
|
||||
;;
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.sidebar
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.builtins.icons :as i :include-macros true]))
|
||||
|
||||
;; --- Left toolbar (Component)
|
||||
|
||||
(mf/defc left-sidebar
|
||||
{:wrap [mf/wrap-memo]}
|
||||
[:div.left-toolbar
|
||||
[:div.left-toolbar-inside
|
||||
[:ul.left-toolbar-options
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Artboard"}
|
||||
i/artboard]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Box"}
|
||||
i/box]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Circle"}
|
||||
i/circle]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Text"}
|
||||
i/text]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Insert image"}
|
||||
i/image]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Pencil tool"}
|
||||
i/pencil]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Curves tool"}
|
||||
i/curve]]
|
||||
|
||||
[:ul.left-toolbar-options.panels
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Layers"}
|
||||
i/layers]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Libraries"}
|
||||
i/icon-set]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "History"}
|
||||
i/undo-history]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Palette"}
|
||||
i/palette]]]])
|
||||
|
|
@ -279,7 +279,8 @@
|
|||
[:div#layers.tool-window
|
||||
[:div.tool-window-bar
|
||||
[:div.tool-window-icon i/layers]
|
||||
[:span (t locale "workspace.sidebar.layers")]
|
||||
;[:span (t locale "workspace.sidebar.layers")]
|
||||
[:span "Page 1"]
|
||||
#_[:div.tool-window-close {:on-click on-click} i/close]]
|
||||
[:div.tool-window-content
|
||||
[:& layers-tree]]]))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue