3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-04 01:28:32 +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" : {
"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" : {

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 {
&:hover {

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

@ -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
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
// 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 {

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

@ -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;
}
}