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

💄 change layers styles

Browse source
This commit is contained in:
Juan de la Cruz 2020-03-24 14:38:13 +01:00 • committed by Andrey Antukh
parent 71afd6719f
commit 25a201bc44
8 changed files with 260 additions and 304 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,285 +2,192 @@
// 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>
.layers-tools { .element-list-body {
border-top: 1px solid $color-gray-20; align-items: center;
bottom: 0;
display: flex; display: flex;
height: 30px; height: 35px;
justify-content: center; padding: $x-small $small;
position: absolute; transition: none;
width: 100%; width: 100%;
.layers-tools-content { svg {
align-items: center; fill: $color-gray-20;
display: flex; height: 13px;
justify-content: space-between; flex-shrink: 0;
margin: 0; margin-right: 8px;
width: 60%; width: 13px;
}
li {
cursor: pointer; &.group {
&.open {
svg { .toggle-content {
fill: $color-gray-30; flex-shrink: 0;
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 { svg {
transform: rotate(270deg); transform: rotate(270deg);
} }
} }
&.layer-down {
svg {
transform: rotate(90deg);
}
}
&.layer-top {
svg {
transform: rotate(180deg);
}
}
} }
} }
} &:hover {
background-color: $color-primary;
.element-list {
margin: 0; svg {
width: 100%; fill: $color-gray-60 !important;
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;
} }
&.open { .element-icon,
.element-actions {
ul {
svg {
li { fill: $color-gray-60;
.element-list-body {
border-style: dashed;
}
}
} }
} }
.element-list-body { .element-actions > * {
align-items: center;
display: flex; display: flex;
padding: $x-small $small; }
transition: none;
width: 100%; span {
color: $color-gray-60;
}
.toggle-content {
margin-left: $x-small;
svg { svg {
fill: $color-gray-60; 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 { .element-actions {
align-items: center;
display: flex;
flex-shrink: 0;
width: 55px;
.block-element {
svg {
fill: $color-gray-30;
}
}
}
.element-icon {
svg { svg {
fill: $color-gray-30; fill: $color-gray-60;
} }
} }
.toggle-content { .element-name {
margin-left: auto; color: $color-gray-60;
width: 12px;
svg {
fill: $color-gray-30;
transform: rotate(90deg);
width: 10px;
}
&.inverse {
svg { transform: rotate(270deg); }
}
&:hover {
svg {
fill: $color-gray-20;
}
}
} }
}
}
&.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 { span.element-name {
flex-shrink: 0; 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); display: none;
} }
} .toggle-element,
.block-element {
} left: 0;
position: absolute;
} top: 0;
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 {
.element-icon { &.selected {
display: flex;
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 {
svg { svg {
fill: $color-gray-20; 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;
}
}
}

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

@ -6,34 +6,8 @@
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.sitemap { .sitemap {
.tool-window-bar { flex: none !important;
max-height: 190px;
.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;
}
}
}
}
.element-list { .element-list {
@ -74,13 +48,7 @@
fill: $color-gray-60; fill: $color-gray-60;
height: 15px; height: 15px;
margin-left: $x-small; margin-left: $x-small;
opacity: .6;
width: 15px; width: 15px;
&:hover {
opacity: 1;
}
} }
} }
@ -104,7 +72,6 @@
.page-actions { .page-actions {
display: flex; display: flex;
@include animation(0s,.3s,fadeIn);
} }
} }
@ -141,7 +108,6 @@
} }
.element-list-body { .element-list-body {
align-items: center; align-items: center;
display: flex; display: flex;
@ -169,5 +135,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: 16px;
width: 16px;
}
&:hover {
background-color: $color-primary;
svg {
fill: $color-gray-60;
}
}
}
.collapse-pages {
margin-left: $small;
svg {
transform: rotate(90deg);
}
} }

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

@ -88,12 +88,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;
}
}
} }
} }
} }

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

@ -41,7 +41,7 @@
} }
&:hover { &: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) (declare initialize-alignment)
(def default-layout #{:sitemap :layers :element-options :rules}) (def default-layout #{:sitemap :sitemap-pages :layers :element-options :rules})
(def workspace-default (def workspace-default
{:zoom 1 {:zoom 1

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

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

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

@ -148,15 +148,15 @@
[:div.element-list-body {:class (dom/classnames :selected selected?) [:div.element-list-body {:class (dom/classnames :selected selected?)
:on-click select-shape :on-click select-shape
:on-double-click #(dom/stop-propagation %)} :on-double-click #(dom/stop-propagation %)}
[:& element-icon {:shape item}]
[:& layer-name {:shape item}]
[:div.element-actions [:div.element-actions
[:div.toggle-element {:class (when-not (:hidden item) "selected") [:div.toggle-element {:class (when (:hidden item) "selected")
:on-click toggle-visibility} :on-click toggle-visibility}
i/eye] i/eye]
[:div.block-element {:class (when (:blocked item) "selected") [:div.block-element {:class (when (:blocked item) "selected")
:on-click toggle-blocking} :on-click toggle-blocking}
i/lock]] i/lock]]]]))
[:& element-icon {:shape item}]
[:& layer-name {:shape item}]]]))
(mf/defc layer-frame-item (mf/defc layer-frame-item
{:wrap [#(mf/wrap-memo % =)]} {:wrap [#(mf/wrap-memo % =)]}
@ -234,6 +234,8 @@
[:div.element-list-body {:class (dom/classnames :selected selected?) [:div.element-list-body {:class (dom/classnames :selected selected?)
:on-click select-shape :on-click select-shape
:on-double-click #(dom/stop-propagation %)} :on-double-click #(dom/stop-propagation %)}
[:div.element-icon i/artboard]
[:& layer-name {:shape item}]
[:div.element-actions [:div.element-actions
[:div.toggle-element {:class (when-not (:hidden item) "selected") [:div.toggle-element {:class (when-not (:hidden item) "selected")
:on-click toggle-visibility} :on-click toggle-visibility}
@ -241,8 +243,6 @@
#_[:div.block-element {:class (when (:blocked item) "selected") #_[:div.block-element {:class (when (:blocked item) "selected")
:on-click toggle-blocking} :on-click toggle-blocking}
i/lock]] i/lock]]
[:div.element-icon i/folder]
[:& layer-name {:shape item}]
[:span.toggle-content [:span.toggle-content
{:on-click toggle-collapse {:on-click toggle-collapse
:class (when-not collapsed? "inverse")} :class (when-not collapsed? "inverse")}
@ -255,15 +255,17 @@
[:& layer-frame-item [:& layer-frame-item
{:item item {:item item
:key (:id item) :key (:id item)
:selected selected
:objects objects :objects objects
:index index}] :index index}]
[:& layer-item [:& layer-item
{:item item {:item item
:selected selected
:index index :index index
:key (:id item)}])))])])) :key (:id item)}])))])]))
(mf/defc layers-tree (mf/defc layers-tree
{:wrap [mf/wrap-memo]} {::mf/wrap [mf/wrap-memo]}
[props] [props]
(let [selected (mf/deref refs/selected-shapes) (let [selected (mf/deref refs/selected-shapes)
data (mf/deref refs/workspace-data) data (mf/deref refs/workspace-data)
@ -276,10 +278,12 @@
[:& layer-frame-item [:& layer-frame-item
{:item item {:item item
:key (:id item) :key (:id item)
:selected selected
:objects objects :objects objects
:index index}] :index index}]
[:& layer-item [:& layer-item
{:item item {:item item
:selected selected
:index index :index index
:key (:id item)}])))])) :key (:id item)}])))]))
@ -296,8 +300,7 @@
[: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 (:name page)]
[: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]]]))

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

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