Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-10 00:58:26 -05:00
Code Issues Activity

Merge branch '173/layers-panel' into develop

Browse source
This commit is contained in:
Andrey Antukh 2020-03-30 10:53:10 +02:00
commit 002f736b97
10 changed files with 301 additions and 313 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

409
frontend/resources/styles/main/partials/sidebar-layers.scss
View file

@ -2,285 +2,206 @@
// 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>
.layers-tools {
border-top: 1px solid $color-gray-20;
bottom: 0;
.element-list-body {
align-items: center;
display: flex;
height: 30px;
justify-content: center;
position: absolute;
height: 35px;
padding: $x-small $small;
transition: none;
width: 100%;
.layers-tools-content {
align-items: center;
display: flex;
justify-content: space-between;
margin: 0;
width: 60%;
li {
cursor: pointer;
svg {
fill: $color-gray-30;
height: 14px;
width: 14px;
&:hover {
fill: $color-gray-60;
}
}
&.disable {
pointer-events: none;
svg {
cursor: auto;
fill: $color-gray-60;
}
}
&.delete-layer {
svg {
&:hover {
fill: $color-danger;
}
}
}
&.layer-up {
svg {
fill: $color-gray-20;
height: 16px;
flex-shrink: 0;
margin-right: 8px;
width: 16px;
}
&.group {
&.open {
.toggle-content {
flex-shrink: 0;
svg {
transform: rotate(270deg);
}
}
&.layer-down {
svg {
transform: rotate(90deg);
}
}
&.layer-top {
svg {
transform: rotate(180deg);
}
}
}
}
}
.element-list {
margin: 0;
width: 100%;
ul {
border-left: 6px solid $color-gray-40;
margin: 0;
}
li {
cursor: pointer;
display: flex;
flex-direction: column;
width: 100%;
&.dragging-TODO {
background-color: #eee;
&:hover {
background-color: $color-primary;
svg {
fill: $color-gray-60 !important;
}
&.open {
ul {
li {
.element-list-body {
border-style: dashed;
}
}
.element-icon,
.element-actions {
svg {
fill: $color-gray-60;
}
}
.element-list-body {
align-items: center;
.element-actions > * {
display: flex;
padding: $x-small $small;
transition: none;
width: 100%;
}
span {
color: $color-gray-60;
}
.toggle-content {
margin-left: $x-small;
svg {
fill: $color-gray-60;
height: 13px;
margin-right: 8px;
width: 13px;
}
}
}
&.selected {
svg {
fill: $color-primary;
}
.element-icon {
svg {
fill: $color-primary;
}
}
span {
color: $color-primary;
}
&:hover {
background-color: $color-primary;
.element-icon,
.element-actions {
align-items: center;
display: flex;
flex-shrink: 0;
width: 55px;
.block-element {
svg {
fill: $color-gray-30;
}
}
}
.element-icon {
svg {
fill: $color-gray-30;
fill: $color-gray-60;
}
}
.toggle-content {
margin-left: auto;
width: 12px;
svg {
fill: $color-gray-30;
transform: rotate(90deg);
width: 10px;
}
&.inverse {
svg { transform: rotate(270deg); }
}
&:hover {
svg {
fill: $color-gray-20;
}
}
.element-name {
color: $color-gray-60;
}
}
}
&.drag-top {
border-top: 40px solid $color-gray-60 !important;
}
&.drag-bottom {
border-bottom: 40px solid $color-gray-60 !important;
}
&.drag-inside {
border: 2px solid $color-primary !important;
}
}
&.group {
.element-icon {
svg {
fill: $color-gray-30;
}
}
&.open {
input.element-name {
max-width: 130px;
width: 100%;
}
.toggle-content {
flex-shrink: 0;
span.element-name {
color: $color-gray-20;
display: block;
font-size: $fs13;
max-width: 130px;
min-width: 40px;
min-height: 16px;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.element-actions {
display: flex;
flex-shrink: 0;
height: 14px;
margin-left: auto;
position: relative;
width: 32px;
svg {
transform: rotate(270deg);
}
svg {
height: 13px;
width: 13px;
}
}
}
}
span.element-name {
min-width: 40px;
min-height: 16px;
display: block;
color: $color-gray-20;
font-size: $fs13;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.selected {
> * {
display: none;
}
.toggle-element,
.block-element {
left: 0;
position: absolute;
top: 0;
.element-icon {
svg {
fill: $color-primary;
}
}
span {
color: $color-primary;
}
&:hover {
background-color: $color-primary;
.element-icon,
.element-actions {
svg {
fill: $color-gray-60;
}
}
.element-name {
color: $color-gray-60;
}
}
}
.selected {
&.selected {
display: flex;
svg {
fill: $color-gray-20;
}
}
&:hover {
background-color: $color-primary;
.element-icon,
.element-actions {
svg {
fill: $color-gray-60;
}
}
span {
color: $color-gray-60;
}
}
&.drag-top {
border-top: 40px solid $color-gray-60 !important;
}
&.drag-bottom {
border-bottom: 40px solid $color-gray-60 !important;
}
&.drag-inside {
border: 2px solid $color-primary !important;
}
}
}
}
.block-element {
left: 18px !important;
svg {
fill: $color-gray-30;
}
}
.toggle-content {
margin-left: auto;
width: 12px;
svg {
fill: $color-gray-30;
transform: rotate(90deg);
width: 10px;
}
&.inverse {
svg { transform: rotate(270deg); }
}
&:hover {
svg {
fill: $color-gray-60;
}
}
}
.icon-layer {
> svg {
background-color: rgba(255,255,255,.6);
border-radius: $br-small;
flex-shrink: 0;
padding: 1px;
}
}

73
frontend/resources/styles/main/partials/sidebar-sitemap.scss
View file

@ -6,34 +6,7 @@
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.sitemap {
.tool-window-bar {
.add-page {
align-items: center;
background-color: $color-gray-60;
border-radius: $br-small;
border: 1px solid transparent;
cursor: pointer;
display: flex;
justify-content: center;
margin-left: auto;
padding: $x-small;
svg {
fill: $color-gray-20;
height: 16px;
width: 16px;
}
&:hover {
background-color: $color-primary;
svg {
fill: $color-gray-60;
}
}
}
}
flex: none !important;
.element-list {
@ -74,13 +47,7 @@
fill: $color-gray-60;
height: 15px;
margin-left: $x-small;
opacity: .6;
width: 15px;
&:hover {
opacity: 1;
}
}
}
@ -104,7 +71,6 @@
.page-actions {
display: flex;
@include animation(0s,.3s,fadeIn);
}
}
@ -141,7 +107,6 @@
}
.element-list-body {
align-items: center;
display: flex;
@ -169,5 +134,39 @@
}
}
}
}
.add-page,
.collapse-pages {
align-items: center;
background-color: transparent;
border-radius: $br-small;
border: 1px solid transparent;
cursor: pointer;
display: flex;
justify-content: center;
margin-left: auto;
padding: $x-small;
svg {
fill: $color-gray-20;
height: 0.7rem;
width: 0.7rem;
}
&:hover {
background-color: $color-primary;
svg {
fill: $color-gray-60 !important;
}
}
}
.collapse-pages {
margin-left: $small;
svg {
transform: rotate(90deg);
}
}

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

@ -22,18 +22,35 @@
align-items: center;
display: grid;
grid-template-columns: 100%;
&[data-layout*='sitemap-pages'] {
grid-template-rows: auto;
}
&[data-layout*='layers'] {
grid-template-rows: 30% 70%;
grid-template-rows: auto 1fr;
}
&[data-layout*='libraries'] {
grid-template-rows: 100%;
grid-template-rows: auto 1fr;
}
&[data-layout*='layers'][data-layout*='sitemap-pages'] {
grid-template-rows: 12rem 1fr;
}
&[data-layout*='libraries'][data-layout*='sitemap-pages'] {
grid-template-rows: 12rem 1fr;
}
&[data-layout*='layers'][data-layout*='libraries'] {
grid-template-rows: 15% 25% 60%;
grid-template-rows: auto 30% 1fr;
}
&[data-layout*='layers'][data-layout*='libraries'][data-layout*='sitemap-pages'] {
grid-template-rows: 12rem 25% 1fr;
}
flex-direction: column;
overflow: hidden;
@ -88,12 +105,51 @@
}
.tool-window-content {
display: flex;
flex-wrap: wrap;
overflow-y: auto;
padding-bottom: $medium;
height: 100%;
}
}
}
.tool-window-content {
display: flex;
flex-wrap: wrap;
overflow-y: auto;
height: 100%;
}
.element-list {
margin: 0;
width: 100%;
ul {
border-left: 9px solid $color-gray-50;
margin: 0;
li {
border-left: 1px solid $color-gray-40;
}
}
li {
cursor: pointer;
display: flex;
flex-direction: column;
width: 100%;
&.dragging-TODO {
background-color: #eee;
}
&.open {
ul {
li {
.element-list-body {
border-style: dashed;
}
}
}
}
}

9
frontend/resources/styles/main/partials/workspace-libraries.scss
View file

@ -12,6 +12,7 @@
.libraries-window-bar-title {
color: #F0F0F0;
font-size: $fs14;
}
.libraries-window-bar-options {
@ -28,8 +29,8 @@
cursor: pointer;
}
& svg {
width: 0.5rem;
height: 0.5rem;
width: 0.7rem;
height: 0.7rem;
fill: #F0F0F0;
transform: rotate(90deg);
}
@ -39,15 +40,15 @@
display: flex;
flex-direction: column;
height: 100%;
padding: 0.25rem;
}
.library-tab-content {
display: grid;
flex-direction: row;
flex-wrap: wrap;
height: -webkit-fill-available;
padding: 0.25rem;
overflow-y: scroll;
overflow-y: auto;
.icons-tab & {
grid-template-columns: repeat(3, 1fr);

2
frontend/resources/styles/main/partials/workspace.scss
View file

@ -41,7 +41,7 @@
}
&:hover {
background-color: $color-gray-lightest;
background-color: $color-primary-lighter;
}
}
}

2
frontend/src/uxbox/main/data/workspace.cljs
View file

@ -270,7 +270,7 @@
(declare initialize-alignment)
(def default-layout #{:sitemap :layers :element-options :rules})
(def default-layout #{:sitemap :sitemap-pages :layers :element-options :rules})
(def workspace-default
{:zoom 1

2
frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs
View file

@ -68,7 +68,7 @@
[:li.tooltip.tooltip-right
{:alt "Layers"
:class (when (contains? layout :layers) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :layers :sitemap))}
:on-click #(st/emit! (dw/toggle-layout-flag :layers))}
i/layers]
[:li.tooltip.tooltip-right
{:alt "Libraries"

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

@ -28,7 +28,9 @@
[:div.settings-bar-inside
{:data-layout (str/join "," layout)}
(when (contains? layout :sitemap)
[:& sitemap-toolbox {:file file :page page}])
[:& sitemap-toolbox {:file file
:page page
:layout layout}])
(when (contains? layout :document-history)
[:& history-toolbox])
(when (contains? layout :layers)

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

@ -145,18 +145,19 @@
:class (dom/classnames
:selected selected?
:dragging-TODO (:dragging? dprops))}
[:div.element-list-body {:class (dom/classnames :selected selected?)
[:div.element-list-body {:class (dom/classnames :selected selected?
:icon-layer (= (:type item) :icon))
:on-click select-shape
:on-double-click #(dom/stop-propagation %)}
[:& element-icon {:shape item}]
[:& layer-name {:shape item}]
[:div.element-actions
[:div.toggle-element {:class (when-not (:hidden item) "selected")
[:div.toggle-element {:class (when (:hidden item) "selected")
:on-click toggle-visibility}
i/eye]
[:div.block-element {:class (when (:blocked item) "selected")
:on-click toggle-blocking}
i/lock]]
[:& element-icon {:shape item}]
[:& layer-name {:shape item}]]]))
i/lock]]]]))
(mf/defc layer-frame-item
{:wrap [#(mf/wrap-memo % =)]}
@ -234,6 +235,8 @@
[:div.element-list-body {:class (dom/classnames :selected selected?)
:on-click select-shape
:on-double-click #(dom/stop-propagation %)}
[:div.element-icon i/artboard]
[:& layer-name {:shape item}]
[:div.element-actions
[:div.toggle-element {:class (when-not (:hidden item) "selected")
:on-click toggle-visibility}
@ -241,8 +244,6 @@
#_[:div.block-element {:class (when (:blocked item) "selected")
:on-click toggle-blocking}
i/lock]]
[:div.element-icon i/folder]
[:& layer-name {:shape item}]
[:span.toggle-content
{:on-click toggle-collapse
:class (when-not collapsed? "inverse")}
@ -255,15 +256,17 @@
[:& layer-frame-item
{:item item
:key (:id item)
:selected selected
:objects objects
:index index}]
[:& layer-item
{:item item
:selected selected
:index index
:key (:id item)}])))])]))
(mf/defc layers-tree
{:wrap [mf/wrap-memo]}
{::mf/wrap [mf/wrap-memo]}
[props]
(let [selected (mf/deref refs/selected-shapes)
data (mf/deref refs/workspace-data)
@ -276,10 +279,12 @@
[:& layer-frame-item
{:item item
:key (:id item)
:selected selected
:objects objects
:index index}]
[:& layer-item
{:item item
:selected selected
:index index
:key (:id item)}])))]))
@ -296,8 +301,7 @@
[:div#layers.tool-window
[:div.tool-window-bar
[:div.tool-window-icon i/layers]
;[:span (t locale "workspace.sidebar.layers")]
[:span "Page 1"]
[:span (:name page)]
#_[:div.tool-window-close {:on-click on-click} i/close]]
[:div.tool-window-content
[:& layers-tree]]]))

13
frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
View file

@ -126,12 +126,17 @@
;; --- Sitemap Toolbox
(mf/defc sitemap-toolbox
[{:keys [file page] :as props}]
[{:keys [file page layout] :as props}]
(let [on-create-click #(st/emit! dw/create-empty-page)
toggle-layout #(st/emit! (dw/toggle-layout-flag %))
locale (i18n/use-locale)]
[:div.sitemap.tool-window
[:div.tool-window-bar
[:span (t locale "workspace.sidebar.sitemap")]
[:div.add-page {:on-click on-create-click} i/close]]
[:div.tool-window-content
[:& pages-list {:file file :current-page page}]]]))
[:div.add-page {:on-click on-create-click} i/close]
[:div.collapse-pages {:on-click #(st/emit! (dw/toggle-layout-flag :sitemap-pages))}
i/arrow-slide]]
(when (contains? layout :sitemap-pages)
[:div.tool-window-content
[:& pages-list {:file file :current-page page}]])]))