mirror of
https://github.com/penpot/penpot.git
synced 2025-08-03 17:38:28 +02:00
Merge branch 'task/149/workspace-main-nav' into develop
This commit is contained in:
Andrey Antukh
commit
0e6f713685
15 changed files with 413 additions and 316 deletions
|
|
@ -1020,8 +1020,8 @@
|
|||
"workspace.sidebar.sitemap" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/sitemap.cljs:134" ],
|
||||
"translations" : {
|
||||
"en" : "Sitemap",
|
||||
"fr" : "Plan du site"
|
||||
"en" : "Pages",
|
||||
"fr" : "Pages"
|
||||
}
|
||||
},
|
||||
"workspace.viewport.click-to-close-path" : {
|
||||
|
|
|
|||
|
|
@ -918,6 +918,19 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
|
||||
}
|
||||
|
||||
&.tooltip-right {
|
||||
|
||||
&:hover {
|
||||
|
||||
&::after {
|
||||
top: 15%;
|
||||
left: 120%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.tooltip-hover {
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@
|
|||
@import 'main/partials/sidebar-layers';
|
||||
@import 'main/partials/sidebar-sitemap';
|
||||
@import 'main/partials/sidebar-document-history';
|
||||
@import 'main/partials/left-toolbar';
|
||||
@import 'main/partials/dashboard-bar';
|
||||
@import 'main/partials/dashboard-grid';
|
||||
@import 'main/partials/user-settings';
|
||||
|
|
|
|||
79
frontend/resources/styles/main/partials/left-toolbar.scss
Normal file
79
frontend/resources/styles/main/partials/left-toolbar.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
// 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-2020 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
.left-toolbar {
|
||||
background-color: $color-gray-50;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.left-toolbar-inside {
|
||||
align-items: center;
|
||||
border-right: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: visible;
|
||||
padding-top: 40px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left-toolbar-options {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
margin: $x-small 0;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-50;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: $color-gray-60;
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.panels {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
// 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>
|
||||
// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
.settings-bar {
|
||||
background-color: $color-gray-50;
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
z-index: 10;
|
||||
|
||||
&.settings-bar-left {
|
||||
left: 0
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.settings-bar-inside {
|
||||
|
|
|
|||
|
|
@ -11,9 +11,50 @@
|
|||
border-bottom: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
padding: $x-small $medium $x-small 65px;
|
||||
padding: $x-small $medium $x-small 55px;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
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;
|
||||
|
|
@ -25,7 +66,7 @@
|
|||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 50px;
|
||||
width: 40px;
|
||||
|
||||
a {
|
||||
height: 30px;
|
||||
|
|
@ -33,7 +74,7 @@
|
|||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
width: 28px;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -49,6 +90,30 @@
|
|||
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
cursor: pointer;
|
||||
border-radius: $br-small;
|
||||
display: flex;
|
||||
margin-right: $x-small;
|
||||
padding: $x-small;
|
||||
|
||||
svg {
|
||||
height: 15px;
|
||||
fill: $color-gray-20;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-tree-btn {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
|
@ -63,11 +128,16 @@
|
|||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-10;
|
||||
color: $color-white;
|
||||
font-size: $fs14;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.project-name {
|
||||
color: $color-gray-20;
|
||||
margin-right: $x-small;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -75,141 +145,38 @@
|
|||
.workspace-options {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
|
||||
.options-btn {
|
||||
align-items: center;
|
||||
border-right: 4px double $color-gray-60;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
margin: 0 $small;
|
||||
position: relative;
|
||||
width: 30px;
|
||||
|
||||
a {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-50;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.options-view {
|
||||
}
|
||||
|
||||
.zoom-input {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
color: $color-gray-10;
|
||||
font-size: $fs15;
|
||||
margin: 0 $x-small;
|
||||
}
|
||||
|
||||
.add-zoom,
|
||||
.remove-zoom {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
color: $color-gray-20;
|
||||
display: flex;
|
||||
justify-content: content;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
height: 30px;
|
||||
margin: 0 $small;
|
||||
position: relative;
|
||||
width: 60px;
|
||||
|
||||
&.zoom-input {
|
||||
width: 85px;
|
||||
padding: 0 25px;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
color: $color-gray-20;
|
||||
font-size: $fs15;
|
||||
}
|
||||
|
||||
.add-zoom,
|
||||
.remove-zoom {
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $color-gray-40;
|
||||
cursor: pointer;
|
||||
color: $color-gray-40;
|
||||
display: none;
|
||||
flex-shrink: 0;
|
||||
font-size: $fs20;
|
||||
font-weight: bold;
|
||||
height: 20px;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
width: 20px;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.add-zoom {
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
.remove-zoom {
|
||||
padding-top: 4px;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.add-zoom,
|
||||
.remove-zoom {
|
||||
display: flex;
|
||||
@include animation(0s,.3s,fadeIn);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
flex-shrink: 0;
|
||||
font-size: $fs20;
|
||||
font-weight: bold;
|
||||
height: 20px;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
color: $color-gray-60;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -313,7 +280,7 @@
|
|||
cursor: pointer;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
|
||||
|
||||
li {
|
||||
margin-left: $small;
|
||||
position: relative;
|
||||
|
|
@ -350,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,6 +10,7 @@
|
|||
[beicon.core :as rx]
|
||||
[lentes.core :as l]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.constants :as c]
|
||||
[uxbox.main.data.history :as udh]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
|
|
@ -29,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]
|
||||
|
|
@ -85,9 +87,13 @@
|
|||
[:& 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 {:page page
|
||||
:layout layout}]
|
||||
|
||||
;; Aside
|
||||
(when left-sidebar?
|
||||
[:& left-sidebar {:file file :page page :layout layout}])
|
||||
|
|
|
|||
|
|
@ -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]))
|
||||
|
||||
|
|
@ -32,11 +33,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
|
||||
|
||||
|
|
@ -67,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)
|
||||
|
|
@ -75,118 +78,27 @@
|
|||
#_(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 {: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")
|
||||
: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]]))
|
||||
|
|
|
|||
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]]]]))
|
||||
|
|
@ -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]]]))
|
||||
|
|
|
|||
|
|
@ -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
Add a link
Reference in a new issue