3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-04 04:28:25 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Add comments to viewer.

Browse source
This commit is contained in:
Andrey Antukh 2020-11-18 17:36:14 +01:00 • committed by Alonso Torres
parent e1db6d3a37
commit 64a6ba1949
45 changed files with 1629 additions and 1074 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,7 +11,7 @@
border-color: $color-gray-10;
}
li {
> li {
display: flex;
align-items: center;
color: $color-gray-60;
@ -20,6 +20,12 @@
height: 40px;
padding: 5px 16px;
svg {
fill: $color-gray-20;
height: 12px;
width: 12px;
}
&.title {
font-weight: 600;
cursor: default;
@ -29,4 +35,27 @@
background-color: $color-primary-lighter;
}
}
&.with-check {
> li {
padding: 5px 10px;
}
> li:not(.selected) {
svg { display: none; }
}
svg {
fill: $color-gray-50;
}
.icon {
display: flex;
align-items: center;
width: 25px;
height: 25px;
margin-right: 7px;
}
}
}

82
frontend/resources/styles/main/partials/viewer-header.scss
View file

@ -42,28 +42,31 @@
}
}
.header-icon {
align-items: center;
cursor: pointer;
display: flex;
justify-content: center;
a {
height: 16px;
width: 16px;
svg {
fill: $color-gray-30;
height: 16px;
width: 16px;
}
.view-options {
.icon {
align-items: center;
cursor: pointer;
display: flex;
justify-content: center;
&:hover {
svg {
> svg {
fill: $color-primary;
}
}
}
svg {
fill: $color-gray-30;
height: 16px;
width: 16px;
}
.dropdown {
top: 40px;
left: 0px;
width: 260px;
}
}
.sitemap-zone {
@ -92,12 +95,10 @@
}
}
.dropdown-button {
svg {
fill: $color-white;
height: 10px;
width: 10px;
}
.show-thumbnails-button svg {
fill: $color-white;
height: 10px;
width: 10px;
}
.page-name {
@ -243,42 +244,9 @@
}
.custom-select-dropdown {
position: absolute;
left: 0;
z-index: 12;
max-height: 31rem;
min-width: 7rem;
overflow-y: auto;
background-color: $color-white;
border-radius: $br-small;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
li {
color: $color-gray-60;
cursor: pointer;
font-size: $fs14;
display: flex;
padding: $small $medium $small 25px;
&.selected {
background-image: url(/images/icons/tick.svg);
background-repeat: no-repeat;
background-position: 5% 48%;
background-size: 10px;
font-weight: bold;
}
&:hover {
background-color: $color-primary-lighter;
}
}
}
.zoom-dropdown {
left : 116px;
top: 45px;
left: 180px;
top: 40px;
}
.users-zone {

5
frontend/resources/styles/main/partials/viewer.scss
View file

@ -7,19 +7,18 @@
}
.viewer-preview {
height: 100vh;
height: calc(100vh - 40px);
grid-row: 1 / span 2;
grid-column: 1 / span 1;
overflow: scroll;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
.empty-state {
justify-content: center;
align-items: center;

33
frontend/resources/styles/main/partials/workspace-comments.scss
View file

@ -1,14 +1,29 @@
.workspace-comments {
.viewer-comments {
width: 100%;
height: 100%;
grid-column: 1/span 2;
grid-row: 1/span 2;
z-index: 1000;
pointer-events: none;
overflow: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.threads {
position: relative;
.viewer-comments, .workspace-comments {
.comments-layer {
width: 100%;
height: 100%;
grid-column: 1/span 2;
grid-row: 1/span 2;
z-index: 1000;
pointer-events: none;
overflow: hidden;
.threads {
position: absolute;
top: 0px;
left: 0px;
}
}
.thread-bubble {
@ -104,8 +119,6 @@
}
}
.comment-container {
position: relative;
}
@ -132,7 +145,7 @@
font-size: $fs13;
@include text-ellipsis;
width: 110px;
width: 150px;
}
.timeago {