Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-03 18:41:22 -05:00
Code Issues Activity

Merge pull request #4243 from penpot/eva-bugfixing-ui-2

Browse source 
🐛 Fix some UI errors
This commit is contained in:
Alejandro 2024-03-12 11:17:21 +01:00 • committed by GitHub
commit 5d5fc2c151
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
31 changed files with 32 additions and 287 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1011,7 +1011,7 @@ input[type="range"]:focus::-ms-fill-upper {
padding-left: 16px;
top: 16px;
right: 16px;
z-index: 1005;
z-index: 40;
display: flex;
align-items: center;

3
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -223,7 +223,6 @@
.button-disabled {
@include buttonStyle;
@include flexCenter;
height: $s-32;
background-color: var(--button-background-color-disabled);
border: $s-1 solid var(--button-border-color-disabled);
color: var(--button-foreground-color-disabled);
@ -905,7 +904,7 @@
margin: 0;
margin-top: $s-1;
border-radius: $br-8;
z-index: $z-index-3;
z-index: $z-index-4;
overflow-y: auto;
overflow-x: hidden;
background-color: var(--menu-background-color);

5
frontend/resources/styles/common/refactor/z-index.scss
View file

@ -6,8 +6,9 @@
$z-index-1: 1; // floating elements
$z-index-2: 2; // sidebars
$z-index-3: 3; // context menu
$z-index-4: 4; // modal
$z-index-3: 3; // topbar
$z-index-4: 4; // context menu
$z-index-5: 5; // modal
$z-index-10: 10;
$z-index-20: 20;
$z-index-modal: 30; // When refactor finish we can reduce this number,

2
frontend/resources/styles/main-default.scss
View file

@ -60,9 +60,7 @@
@import "main/partials/project-bar";
@import "main/partials/sidebar";
@import "main/partials/tab-container";
@import "main/partials/tool-bar";
@import "main/partials/user-settings";
@import "main/partials/workspace";
@import "main/partials/color-bullet";
@import "main/partials/exception-page";
@import "main/partials/signup-questions";

209
frontend/resources/styles/main/partials/color-bullet.scss
View file

@ -1,209 +0,0 @@
// 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) KALEIDOS INC
.color-bullet {
border: 2px solid $color-gray-30;
position: relative;
width: var(--bullet-size);
height: var(--bullet-size);
&:hover {
border-color: $color-primary;
}
}
.color-cell {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 1fr auto;
height: 100%;
justify-items: center;
width: 65px;
.color-bullet {
border: 2px solid $color-gray-30;
position: relative;
width: var(--bullet-size);
height: var(--bullet-size);
&:hover {
border-color: $color-primary;
}
}
& > * {
overflow: hidden;
}
}
.color-cell.current {
.color-bullet {
border-color: $color-gray-30;
}
}
ul.palette-menu .color-bullet {
width: 20px;
height: 20px;
border: 1px solid $color-gray-30;
margin-right: 5px;
background-size: 8px;
}
.color-cell.add-color .color-bullet {
align-items: center;
background-color: $color-gray-50;
border: 3px dashed $color-gray-30;
cursor: pointer;
display: flex;
justify-content: center;
margin-bottom: 1rem;
padding: 0.6rem;
svg {
fill: $color-gray-10;
height: 30px;
width: 30px;
}
}
.colorpicker-content .color-bullet {
grid-area: color;
width: 20px;
height: 20px;
border: 1px solid $color-gray-30;
background-size: 8px;
overflow: hidden;
}
.asset-section .asset-list-item .color-bullet {
border: 1px solid $color-gray-30;
height: 20px;
margin-right: $size-1;
width: 20px;
}
.tool-window-content .asset-list .asset-list-item {
&:hover {
.color-bullet {
border: 1px solid $color-primary;
}
}
}
.color-cell.add-color:hover .color-bullet {
border-color: $color-gray-30;
svg {
fill: $color-gray-30;
}
}
.color-bullet {
display: flex;
flex-direction: row;
border-radius: 50%;
& .color-bullet-wrapper {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
left center;
background-color: $color-white;
clip-path: circle(50%);
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
}
&.is-gradient {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
left center;
background-color: $color-white;
}
& .color-bullet-wrapper > * {
width: 100%;
height: 100%;
}
}
.color-data .color-bullet.multiple {
background: transparent;
&::before {
content: "?";
}
}
.color-data .color-bullet {
border: 1px solid $color-gray-30;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: $color-gray-10;
flex-shrink: 0;
height: 20px;
margin: 5px 4px 0 0;
width: 20px;
&.palette-th {
align-items: center;
border: 1px solid $color-gray-30;
display: flex;
justify-content: center;
svg {
fill: $color-gray-30;
height: 16px;
width: 16px;
}
&:hover {
border-color: $color-primary;
svg {
fill: $color-primary;
}
}
}
}
.colorpicker-content .libraries .selected-colors .color-bullet {
grid-area: auto;
margin-bottom: 0.25rem;
cursor: pointer;
&:hover {
border-color: $color-primary;
z-index: 10;
}
&.button {
background: $color-white;
display: flex;
align-items: center;
justify-content: center;
}
&.button svg {
width: 12px;
height: 12px;
fill: $color-gray-30;
}
&.plus-button svg {
width: 8px;
height: 8px;
fill: $color-black;
}
}
.color-bullet.is-not-library-color {
border-radius: $br3;
overflow: hidden;
& .color-bullet-wrapper {
clip-path: none;
}
}

2
frontend/resources/styles/main/partials/context-menu.scss
View file

@ -8,7 +8,7 @@
position: relative;
visibility: hidden;
opacity: 0;
z-index: 100;
z-index: 3;
}
.context-menu.is-open {

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

@ -4,7 +4,7 @@
background-color: $color-white;
border-radius: $br2;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
z-index: 12;
z-index: 3;
hr {
margin: 0 !important;

2
frontend/resources/styles/main/partials/exception-page.scss
View file

@ -12,7 +12,7 @@
display: flex;
align-items: center;
padding: 32px;
z-index: 1000;
z-index: 40;
cursor: pointer;

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

@ -9,7 +9,7 @@
position: fixed;
top: 0;
width: 100%;
z-index: 999;
z-index: 40;
}
// full with loader CSS

48
frontend/resources/styles/main/partials/tool-bar.scss
View file

@ -1,48 +0,0 @@
// 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) KALEIDOS INC
.tool-bar {
background-color: $color-gray-40;
bottom: 0;
height: 100%;
position: fixed;
left: 0;
width: 50px;
z-index: 10;
.tool-bar-inside {
padding-top: 70px;
.main-tools {
align-items: center;
display: flex;
flex-direction: column;
li {
cursor: pointer;
margin-bottom: $size-5;
svg {
fill: $color-gray-20;
height: 25px;
width: 25px;
}
&:hover {
svg {
fill: $color-white;
}
}
&.current {
svg {
fill: $color-primary;
}
}
}
}
}
}

1
frontend/src/app/main/ui/comments.scss
View file

@ -138,6 +138,7 @@
width: $s-284;
padding: $s-12;
border-radius: $br-8;
border: $s-2 solid var(--modal-border-color);
background-color: var(--comment-modal-background-color);
.comments {
display: flex;

4
frontend/src/app/main/ui/components/color_bullet.scss
View file

@ -39,13 +39,13 @@
}
}
&.is-gradient {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
left center;
background-color: var(--color-bullet-background-color);
transform: rotate(-90deg);
}
&.is-transparent {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
left center;
background-color: var(--color-bullet-background-color);
}

2
frontend/src/app/main/ui/components/context_menu_a11y.scss
View file

@ -10,7 +10,7 @@
position: relative;
visibility: hidden;
opacity: $op-0;
z-index: $z-index-3;
z-index: $z-index-4;
&.is-open {
position: relative;

1
frontend/src/app/main/ui/components/forms.scss
View file

@ -263,6 +263,7 @@
:disabled {
@extend .button-disabled;
min-height: $s-32;
}
// MULTI INPUT

2
frontend/src/app/main/ui/dashboard.scss
View file

@ -21,7 +21,7 @@
.dashboard-content {
display: grid;
grid-template-rows: $s-64 1fr;
grid-template-rows: $s-64 auto auto 1fr;
position: relative;
grid-row: 1 / span 2;
padding: $s-16 $s-16 0 0;

2
frontend/src/app/main/ui/dashboard/comments.scss
View file

@ -78,7 +78,7 @@
min-height: $s-200;
position: absolute;
width: 100%;
z-index: $z-index-3;
z-index: $z-index-4;
hr {
margin: 0;

1
frontend/src/app/main/ui/dashboard/sidebar.scss
View file

@ -239,6 +239,7 @@
.element-title {
@include textEllipsis;
width: $s-256;
color: var(--sidebar-element-foreground-color);
font-size: $fs-14;
}

2
frontend/src/app/main/ui/dashboard/templates.scss
View file

@ -42,7 +42,7 @@
border-top-right-radius: $br-10;
margin-right: $s-32;
position: relative;
z-index: 1;
z-index: $z-index-1;
background-color: $db-quaternary;
}

2
frontend/src/app/main/ui/workspace/color_palette.scss
View file

@ -19,7 +19,7 @@
height: 100%;
width: $s-24;
padding: 0;
z-index: $z-index-4;
z-index: $z-index-5;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);

2
frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
View file

@ -13,7 +13,7 @@
max-width: $s-480;
padding: $s-4;
margin: 0 0 $s-4 0;
z-index: $z-index-3;
z-index: $z-index-4;
border-radius: $br-10;
background-color: var(--context-menu-background-color);

2
frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
View file

@ -19,7 +19,7 @@
height: 100%;
width: 100%;
border-radius: $br-6;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
left center;
}

3
frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
View file

@ -54,12 +54,13 @@
}
&.opacity {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
var(--background-repeat) center;
&::after {
content: "";
position: absolute;
border-radius: $br-6;
width: 100%;
height: 100%;
background: linear-gradient(

2
frontend/src/app/main/ui/workspace/context_menu.scss
View file

@ -19,7 +19,7 @@
border-radius: $br-8;
border: $s-2 solid var(--panel-border-color);
background-color: var(--menu-background-color);
z-index: $z-index-3;
z-index: $z-index-4;
}
.separator {

2
frontend/src/app/main/ui/workspace/palette.scss
View file

@ -43,7 +43,7 @@
.resize-area {
grid-area: resize;
height: $s-8;
z-index: $z-index-3;
z-index: $z-index-4;
width: calc(100% - $s-8);
border-radius: $br-circle;
cursor: ns-resize;

2
frontend/src/app/main/ui/workspace/presence.scss
View file

@ -42,7 +42,7 @@
padding: $s-8;
margin: calc(-1 * $s-2) calc(-1 * $s-4) 0 0;
background-color: var(--menu-background-color);
z-index: $z-index-3;
z-index: $z-index-4;
.active-users-list {
gap: $s-4;
.users-num,

2
frontend/src/app/main/ui/workspace/sidebar.scss
View file

@ -47,7 +47,7 @@ $width-settings-bar-max: $s-500;
position: absolute;
top: 0;
left: unset;
z-index: $z-index-3;
z-index: $z-index-4;
width: $s-8;
cursor: ew-resize;
height: 100%;

2
frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
View file

@ -249,7 +249,7 @@
:global(.sticky) {
position: sticky;
top: $s-0;
z-index: $z-index-3;
z-index: $z-index-4;
}
.tab-indentation {

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
View file

@ -224,7 +224,7 @@
margin: 0 0 $s-40 0;
margin-top: $s-4;
border-radius: $br-8;
z-index: $z-index-3;
z-index: $z-index-4;
overflow-y: auto;
background-color: var(--menu-background-color);
.option-btn {

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
View file

@ -351,7 +351,7 @@
right: 0;
height: 100%;
width: 100%;
z-index: $z-index-3;
z-index: $z-index-4;
}
.show-recent {

2
frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
View file

@ -13,7 +13,7 @@
max-width: $s-480;
padding: $s-4;
margin: 0 0 $s-4 0;
z-index: $z-index-3;
z-index: $z-index-4;
border-radius: $br-10;
background-color: var(--context-menu-background-color);

2
frontend/src/app/main/ui/workspace/top_toolbar.scss
View file

@ -17,7 +17,7 @@
padding: $s-8 $s-16;
border-radius: $s-8;
border: $s-2 solid var(--panel-border-color);
z-index: $z-index-10;
z-index: $z-index-3;
background-color: var(--color-background-primary);
transition:
top 0.3s,