mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 08:11:30 -05: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
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -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,9 @@
|
|||
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;
|
||||
|
||||
.main-icon {
|
||||
align-items: center;
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 50px;
|
||||
width: 40px;
|
||||
|
||||
a {
|
||||
height: 30px;
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
width: 28px;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -49,6 +49,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 +87,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 +104,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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
Reference in a new issue