mirror of
https://github.com/penpot/penpot.git
synced 2025-02-03 04:49:03 -05:00
🚧 Initial integration of workspace toolbar.
This commit is contained in:
Andrey Antukh
parent
25437fafc2
commit
118157e43a
10 changed files with 243 additions and 166 deletions
|
|
@ -15,7 +15,7 @@
|
|||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
|
||||
|
||||
.btn-dashboard {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
padding: 0 $x-small 0 $small;
|
||||
position: relative;
|
||||
width: 180px;
|
||||
|
||||
|
||||
span {
|
||||
@include text-ellipsis;
|
||||
color: $color-black;
|
||||
|
|
@ -100,45 +100,47 @@
|
|||
}
|
||||
|
||||
.dropdown {
|
||||
background-color: $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
min-width: 150px;
|
||||
padding: 0 $small;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 12;
|
||||
@include animation(0,.2s,fadeInDown);
|
||||
width: 180px;
|
||||
|
||||
li {
|
||||
font-size: $fs13;
|
||||
padding: $small 0;
|
||||
ul.profile-menu {
|
||||
background-color: $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
padding: 0 $small;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
@include animation(0,.2s,fadeInDown);
|
||||
|
||||
span {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
}
|
||||
li {
|
||||
font-size: $fs13;
|
||||
padding: $small 0;
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
fill: $color-gray-20;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,47 @@
|
|||
position: relative;
|
||||
z-index: 12;
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: 230px;
|
||||
z-index: 12;
|
||||
@include animation(0,.2s,fadeInDown);
|
||||
|
||||
.workspace-menu {
|
||||
background-color: $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
padding: 0 $small;
|
||||
|
||||
li {
|
||||
font-size: $fs13;
|
||||
padding: $small 0;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
color: $color-primary;
|
||||
}
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.main-icon {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
|
|
@ -239,7 +280,7 @@
|
|||
cursor: pointer;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
|
||||
|
||||
li {
|
||||
margin-left: $small;
|
||||
position: relative;
|
||||
|
|
@ -276,4 +317,4 @@
|
|||
margin-left: $small;
|
||||
padding: $x-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
right: 230px;
|
||||
right: 190px;
|
||||
|
||||
&.scrolling {
|
||||
cursor: grab;
|
||||
|
|
|
|||
39
frontend/src/uxbox/main/ui/components/dropdown.cljs
Normal file
39
frontend/src/uxbox/main/ui/components/dropdown.cljs
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
(ns uxbox.main.ui.components.dropdown
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.util.uuid :as uuid]
|
||||
[goog.events :as events]
|
||||
[goog.object :as gobj])
|
||||
(:import goog.events.EventType
|
||||
goog.events.KeyCodes))
|
||||
|
||||
(mf/defrc dropdown'
|
||||
[props]
|
||||
(let [children (gobj/get props "children")
|
||||
on-close (gobj/get props "on-close")
|
||||
|
||||
on-document-clicked
|
||||
(fn [event]
|
||||
(on-close))
|
||||
|
||||
on-document-keyup
|
||||
(fn [event]
|
||||
(when (= (.-keyCode event) 27) ; ESC
|
||||
(on-close)))
|
||||
|
||||
on-mount
|
||||
(fn []
|
||||
(let [lkey1 (events/listen js/document EventType.CLICK on-document-clicked)
|
||||
lkey2 (events/listen js/document EventType.KEYUP on-document-keyup)]
|
||||
#(do
|
||||
(events/unlistenByKey lkey1)
|
||||
(events/unlistenByKey lkey2))))]
|
||||
|
||||
(mf/use-effect {:fn on-mount})
|
||||
[:div.dropdown
|
||||
children]))
|
||||
|
||||
(mf/defrc dropdown
|
||||
[props]
|
||||
(when (gobj/get props "show")
|
||||
(mf/element dropdown' props)))
|
||||
|
|
@ -19,46 +19,41 @@
|
|||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.navigation :as nav]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.main.ui.components.dropdown :refer [dropdown]]
|
||||
[uxbox.util.i18n :as i18n :refer [t]]
|
||||
[uxbox.util.router :as rt]))
|
||||
|
||||
;; --- Component: User Menu
|
||||
;; --- Component: Profile
|
||||
|
||||
(mf/defc profile-menu
|
||||
[props]
|
||||
(let [locale (i18n/use-locale)
|
||||
(mf/defc profile-section
|
||||
[{:keys [profile] :as props}]
|
||||
(let [show (mf/use-state false)
|
||||
photo (:photo-uri profile "")
|
||||
photo (if (str/empty? photo)
|
||||
"/images/avatar.jpg"
|
||||
photo)
|
||||
|
||||
locale (i18n/use-locale)
|
||||
on-click
|
||||
(fn [event section]
|
||||
(dom/stop-propagation event)
|
||||
(if (keyword? section)
|
||||
(st/emit! (rt/nav section))
|
||||
(st/emit! section)))]
|
||||
[:ul.dropdown
|
||||
[:li {:on-click #(on-click % :settings-profile)}
|
||||
i/user
|
||||
[:span (t locale "dashboard.header.profile-menu.profile")]]
|
||||
[:li {:on-click #(on-click % :settings-password)}
|
||||
i/lock
|
||||
[:span (t locale "dashboard.header.profile-menu.password")]]
|
||||
[:li {:on-click #(on-click % da/logout)}
|
||||
i/exit
|
||||
[:span (t locale "dashboard.header.profile-menu.logout")]]]))
|
||||
|
||||
|
||||
|
||||
;; --- Component: Profile
|
||||
|
||||
(mf/defc profile-section
|
||||
[{:keys [profile] :as props}]
|
||||
(let [open (mf/use-state false)
|
||||
photo (:photo-uri profile "")
|
||||
photo (if (str/empty? photo)
|
||||
"/images/avatar.jpg"
|
||||
photo)]
|
||||
[:div.user-zone {:on-click #(st/emit! (rt/nav :settings-profile))
|
||||
:on-mouse-enter #(reset! open true)
|
||||
:on-mouse-leave #(reset! open false)}
|
||||
[:div.user-zone {:on-click #(reset! show true)}
|
||||
[:img {:src photo}]
|
||||
[:span (:fullname profile)]
|
||||
(when @open
|
||||
[:& profile-menu])]))
|
||||
|
||||
[:& dropdown {:on-close #(reset! show false)
|
||||
:show @show}
|
||||
[:ul.profile-menu
|
||||
[:li {:on-click #(on-click % :settings-profile)}
|
||||
i/user
|
||||
[:span (t locale "dashboard.header.profile-menu.profile")]]
|
||||
[:li {:on-click #(on-click % :settings-password)}
|
||||
i/lock
|
||||
[:span (t locale "dashboard.header.profile-menu.password")]]
|
||||
[:li {:on-click #(on-click % da/logout)}
|
||||
i/exit
|
||||
[:span (t locale "dashboard.header.profile-menu.logout")]]]]]))
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
[beicon.core :as rx]
|
||||
[lentes.core :as l]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.builtins.icons :as i :include-macros true]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.constants :as c]
|
||||
[uxbox.main.data.history :as udh]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
|
|
@ -30,6 +30,7 @@
|
|||
[uxbox.main.ui.workspace.shortcuts :as shortcuts]
|
||||
[uxbox.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
|
||||
[uxbox.main.ui.workspace.sidebar.history :refer [history-dialog]]
|
||||
[uxbox.main.ui.workspace.left-toolbar :refer [left-toolbar]]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
|
|
@ -86,49 +87,12 @@
|
|||
[:& horizontal-rule]
|
||||
[:& vertical-rule]])
|
||||
|
||||
[:section.workspace-viewport {:id "workspace-viewport" :ref frame}
|
||||
[: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]]]]
|
||||
[:& left-toolbar {:page page
|
||||
:layout layout}]
|
||||
|
||||
;; Aside
|
||||
(when left-sidebar?
|
||||
|
|
|
|||
|
|
@ -20,7 +20,8 @@
|
|||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.modal :as modal]
|
||||
[uxbox.main.ui.workspace.images :refer [import-image-modal]]
|
||||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.main.ui.components.dropdown :refer [dropdown]]
|
||||
[uxbox.util.i18n :as i18n :refer [tr t]]
|
||||
[uxbox.util.math :as mth]
|
||||
[uxbox.util.router :as rt]))
|
||||
|
||||
|
|
@ -66,6 +67,9 @@
|
|||
(let [toggle-layout #(st/emit! (dw/toggle-layout-flag %))
|
||||
on-undo (constantly nil)
|
||||
on-redo (constantly nil)
|
||||
locale (i18n/use-locale)
|
||||
|
||||
show-menu? (mf/use-state false)
|
||||
|
||||
on-image #(modal/show! import-image-modal {})
|
||||
;;on-download #(udl/open! :download)
|
||||
|
|
@ -74,12 +78,19 @@
|
|||
#_(dw/deactivate-ruler)
|
||||
(dw/select-for-drawing %))]
|
||||
|
||||
[:header#workspace-bar.workspace-bar
|
||||
[:header.workspace-bar
|
||||
[:div.main-icon
|
||||
[:a {:on-click #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))}
|
||||
i/logo-icon]]
|
||||
|
||||
[:div.menu-btn i/actions]
|
||||
[:div.menu-btn {:on-click #(reset! show-menu? true)} i/actions]
|
||||
|
||||
[:& dropdown {:show @show-menu?
|
||||
:on-close #(reset! show-menu? false)}
|
||||
[:ul.workspace-menu
|
||||
[:li i/user [:span (t locale "dashboard.header.profile-menu.profile")]]
|
||||
[:li i/lock [:span (t locale "dashboard.header.profile-menu.password")]]
|
||||
[:li i/exit [:span (t locale "dashboard.header.profile-menu.logout")]]]]
|
||||
|
||||
[:div.project-tree-btn
|
||||
{:alt (tr "header.sitemap")
|
||||
|
|
|
|||
|
|
@ -1,57 +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/.
|
||||
;;
|
||||
;; 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]]]])
|
||||
83
frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs
Normal file
83
frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
;; 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.left-toolbar
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.modal :as modal]
|
||||
[uxbox.main.ui.workspace.images :refer [import-image-modal]]
|
||||
[uxbox.builtins.icons :as i]))
|
||||
|
||||
;; --- Component: Left toolbar
|
||||
|
||||
(mf/defc left-toolbar
|
||||
[{:keys [page layout] :as props}]
|
||||
(let [selected-drawtool (mf/deref refs/selected-drawing-tool)
|
||||
select-drawtool #(st/emit! :interrupt
|
||||
(dw/select-for-drawing %))
|
||||
on-image #(modal/show! import-image-modal {})]
|
||||
[:div.left-toolbar
|
||||
[:div.left-toolbar-inside
|
||||
[:ul.left-toolbar-options
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Artboard"
|
||||
:class (when (= selected-drawtool :frame) "selected")
|
||||
:on-click (partial select-drawtool :frame)}
|
||||
i/artboard]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Box"
|
||||
:class (when (= selected-drawtool :rect) "selected")
|
||||
:on-click (partial select-drawtool :rect)}
|
||||
i/box]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Circle"
|
||||
:class (when (= selected-drawtool :circle) "selected")
|
||||
:on-click (partial select-drawtool :circle)}
|
||||
i/circle]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Text"
|
||||
:class (when (= selected-drawtool :text) "selected")
|
||||
:on-click (partial select-drawtool :text)}
|
||||
i/text]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Insert image"
|
||||
:on-click on-image}
|
||||
i/image]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Pencil tool"
|
||||
:class (when (= selected-drawtool :path) "selected")
|
||||
:on-click (partial select-drawtool :path)}
|
||||
i/pencil]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Curves tool"
|
||||
:class (when (= selected-drawtool :curve) "selected")
|
||||
:on-click (partial select-drawtool :curve)}
|
||||
i/curve]]
|
||||
|
||||
[:ul.left-toolbar-options.panels
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Layers"
|
||||
:class (when (contains? layout :layers) "selected")
|
||||
:on-click #(st/emit! (dw/toggle-layout-flag :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"
|
||||
:class (when (contains? layout :colorpalette) "selected")
|
||||
:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
|
||||
i/palette]]]]))
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
[rumext.alpha :as mf]
|
||||
[uxbox.util.timers :refer [schedule-on-idle]]))
|
||||
|
||||
|
||||
(mf/defc chunked-list
|
||||
[{:keys [items children initial-size chunk-size]
|
||||
:or {initial-size 30 chunk-size 5}
|
||||
|
|
@ -72,5 +73,3 @@
|
|||
(mf/element component #js {}))))))
|
||||
|
||||
ctor)))
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue