3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-22 13:17:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Adapt workspace to new visual layout.

Browse source
This commit is contained in:
Juan de la Cruz 2020-03-13 22:29:28 +01:00 • committed by Andrey Antukh
parent 371ff5e019
commit 25437fafc2
10 changed files with 269 additions and 249 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/resources/locales.json
View file

@ -1020,8 +1020,8 @@
"workspace.sidebar.sitemap" : { "workspace.sidebar.sitemap" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/sitemap.cljs:134" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/sitemap.cljs:134" ],
"translations" : { "translations" : {
"en" : "Sitemap", "en" : "Pages",
"fr" : "Plan du site" "fr" : "Pages"
} }
}, },
"workspace.viewport.click-to-close-path" : { "workspace.viewport.click-to-close-path" : {

13
frontend/resources/styles/common/framework.scss
View file

@ -918,6 +918,19 @@ input[type=range]:focus::-ms-fill-upper {
} }
&.tooltip-right {
&:hover {
&::after {
top: 15%;
left: 120%;
}
}
}
&.tooltip-hover { &.tooltip-hover {
&:hover { &:hover {

1
frontend/resources/styles/main.scss
View file

@ -52,6 +52,7 @@
@import 'main/partials/sidebar-layers'; @import 'main/partials/sidebar-layers';
@import 'main/partials/sidebar-sitemap'; @import 'main/partials/sidebar-sitemap';
@import 'main/partials/sidebar-document-history'; @import 'main/partials/sidebar-document-history';
@import 'main/partials/left-toolbar';
@import 'main/partials/dashboard-bar'; @import 'main/partials/dashboard-bar';
@import 'main/partials/dashboard-grid'; @import 'main/partials/dashboard-grid';
@import 'main/partials/user-settings'; @import 'main/partials/user-settings';

79
frontend/resources/styles/main/partials/left-toolbar.scss Normal file
View 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;
}
}

6
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -2,8 +2,8 @@
// License, v. 2.0. If a copy of the MPL was not distributed with this // 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/. // file, You can obtain one at http://mozilla.org/MPL/2.0/.
// //
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz> // Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.settings-bar { .settings-bar {
background-color: $color-gray-50; background-color: $color-gray-50;
@ -15,7 +15,7 @@
z-index: 10; z-index: 10;
&.settings-bar-left { &.settings-bar-left {
left: 0 left: 40px;
} }
.settings-bar-inside { .settings-bar-inside {

160
frontend/resources/styles/main/partials/workspace-bar.scss
View file

@ -11,9 +11,9 @@
border-bottom: 1px solid $color-gray-60; border-bottom: 1px solid $color-gray-60;
display: flex; display: flex;
height: 40px; height: 40px;
padding: $x-small $medium $x-small 65px; padding: $x-small $medium $x-small 55px;
position: relative; position: relative;
z-index: 11; z-index: 12;
.main-icon { .main-icon {
align-items: center; align-items: center;
@ -25,7 +25,7 @@
left: 0; left: 0;
position: absolute; position: absolute;
top: 0; top: 0;
width: 50px; width: 40px;
a { a {
height: 30px; height: 30px;
@ -33,7 +33,7 @@
svg { svg {
fill: $color-gray-30; fill: $color-gray-30;
height: 30px; 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 { .project-tree-btn {
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
@ -63,11 +87,16 @@
} }
span { span {
color: $color-gray-10; color: $color-white;
font-size: $fs14; font-size: $fs14;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
&.project-name {
color: $color-gray-20;
margin-right: $x-small;
}
} }
} }
@ -75,141 +104,38 @@
.workspace-options { .workspace-options {
display: flex; display: flex;
margin: auto; 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 { .zoom-input {
svg {
fill: $color-primary;
}
&:hover {
svg {
fill: $color-gray-60;
}
}
}
}
}
}
.options-view {
align-items: center; align-items: center;
display: flex; 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 { span {
color: $color-gray-20; color: $color-gray-10;
font-size: $fs15; font-size: $fs15;
margin: 0 $x-small;
} }
.add-zoom, .add-zoom,
.remove-zoom { .remove-zoom {
align-items: center; align-items: center;
border-radius: 50%; background-color: $color-gray-60;
border: 1px solid $color-gray-40; border-radius: $br-small;
cursor: pointer; cursor: pointer;
color: $color-gray-40; color: $color-gray-20;
display: none; display: flex;
flex-shrink: 0; flex-shrink: 0;
font-size: $fs20; font-size: $fs20;
font-weight: bold; font-weight: bold;
height: 20px; height: 20px;
justify-content: center; justify-content: center;
position: absolute;
top: 5px;
width: 20px; width: 20px;
&:hover { &:hover {
border-color: $color-primary; background-color: $color-primary;
color: $color-primary; color: $color-gray-60;
}
}
.add-zoom {
left: -5px;
}
.remove-zoom {
padding-top: 4px;
right: -5px;
}
&:hover {
.add-zoom,
.remove-zoom {
display: flex;
@include animation(0s,.3s,fadeIn);
}
}
}
} }
} }

42
frontend/src/uxbox/main/ui/workspace.cljs
View file

@ -10,6 +10,7 @@
[beicon.core :as rx] [beicon.core :as rx]
[lentes.core :as l] [lentes.core :as l]
[rumext.alpha :as mf] [rumext.alpha :as mf]
[uxbox.builtins.icons :as i :include-macros true]
[uxbox.main.constants :as c] [uxbox.main.constants :as c]
[uxbox.main.data.history :as udh] [uxbox.main.data.history :as udh]
[uxbox.main.data.workspace :as dw] [uxbox.main.data.workspace :as dw]
@ -88,6 +89,47 @@
[:section.workspace-viewport {:id "workspace-viewport" :ref frame} [:section.workspace-viewport {:id "workspace-viewport" :ref frame}
[:& viewport {:page page :file file}]]] [:& 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 ;; Aside
(when left-sidebar? (when left-sidebar?
[:& left-sidebar {:file file :page page :layout layout}]) [:& left-sidebar {:file file :page page :layout layout}])

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

@ -32,11 +32,10 @@
(let [zoom (mf/deref refs/selected-zoom) (let [zoom (mf/deref refs/selected-zoom)
increase #(st/emit! dw/increase-zoom) increase #(st/emit! dw/increase-zoom)
decrease #(st/emit! dw/decrease-zoom)] decrease #(st/emit! dw/decrease-zoom)]
[:ul.options-view [:div.zoom-input
[:li.zoom-input
[:span.add-zoom {:on-click decrease} "-"] [:span.add-zoom {:on-click decrease} "-"]
[:span {} (str (mth/round (* 100 zoom)) "%")] [:span {} (str (mth/round (* 100 zoom)) "%")]
[:span.remove-zoom {:on-click increase} "+"]]])) [:span.remove-zoom {:on-click increase} "+"]]))
;; --- Header Users ;; --- Header Users
@ -80,113 +79,15 @@
[:a {:on-click #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))} [:a {:on-click #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))}
i/logo-icon]] i/logo-icon]]
[:div.menu-btn i/actions]
[:div.project-tree-btn [:div.project-tree-btn
{:alt (tr "header.sitemap") {:alt (tr "header.sitemap")
:class (when (contains? layout :sitemap) "selected") :class (when (contains? layout :sitemap) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :sitemap))} :on-click #(st/emit! (dw/toggle-layout-flag :sitemap))}
[:span.project-name "Project name /"]
[:span (:name file)]] [:span (:name file)]]
[:& active-users]
[:div.workspace-options [:div.workspace-options
[:ul.options-btn [:& active-users]]
[:li.tooltip.tooltip-bottom [:& zoom-widget]]))
{: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]]
]))

57
frontend/src/uxbox/main/ui/workspace/left-toolbar.cljs Normal file
View 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]]]])

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

@ -279,7 +279,8 @@
[:div#layers.tool-window [:div#layers.tool-window
[:div.tool-window-bar [:div.tool-window-bar
[:div.tool-window-icon i/layers] [: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-close {:on-click on-click} i/close]]
[:div.tool-window-content [:div.tool-window-content
[:& layers-tree]]])) [:& layers-tree]]]))