studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Add edit and delete buttons under comments, and split <style> from PdfViewer to Comments and Comment components

Browse source
This commit is contained in:
Timothée Goguely 2024-10-30 15:15:53 +01:00
parent 78e2f8f956
commit 066ed66ea6
5 changed files with 145 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

101
src/components/project/client-brief/PdfViewer.vue
View file

@ -141,116 +141,15 @@ function changeFile(newFile) {
#add-pdf [data-pc-name="pcclosebutton"] {
color: var(--color-white);
}
#vpv-container {
width: var(--max-w);
height: calc(var(--max-h) - var(--header-h));
background: black;
position: relative;
}
/* Comments */
.with-comments .vpv-pages-container-wrapper {
margin-right: var(--comments-w, 20rem);
}
#toggle-comments {
position: absolute;
right: var(--space-16);
bottom: var(--space-16);
padding: 0.625rem;
}
#comments-container {
background-color: black;
position: absolute;
top: 0;
right: 0;
bottom: 4.5rem;
width: var(--comments-w);
padding: var(--space-24) var(--space-32);
}
.comments {
overflow-y: auto;
height: calc(100% - 3.5rem);
margin-bottom: 1rem;
margin-right: -2rem;
padding-right: 2rem;
}
.comment {
--flow-space: var(--space-12);
font-size: var(--text-sm);
border: var(--border);
border-width: 2px;
border-radius: var(--rounded-lg);
padding: var(--space-12);
color: var(--color-grey-400);
}
.comment header p {
display: flex;
gap: var(--space-8);
}
.comment header strong,
.comment footer {
font-weight: 500;
color: var(--color-white);
}
.comment header time {
color: var(--color-primary);
font-weight: 500;
margin-left: auto;
}
.comment[data-status="unread"] {
background: var(--color-white);
border-color: var(--color-white);
color: var(--color-grey-700);
}
.comment[data-status="unread"] header p > :first-child::before {
content: "";
display: inline-block;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background: var(--color-primary);
margin-right: var(--space-8);
margin-bottom: 0.075em;
}
.comment[data-status="unread"] header strong,
.comment[data-status="unread"] footer {
color: var(--color-black);
}
.comment[data-status="unread"] header time {
color: var(--color-primary);
}
.comment[data-opened="true"] {
border-color: transparent;
}
.comment[data-opened="true"] .comment__replies {
color: var(--color-primary);
}
#comments-container form {
--flow-space: 0.5rem;
flex-direction: column;
position: -webkit-sticky;
position: sticky;
bottom: 5.5rem;
}
#comments-container textarea {
position: sticky;
bottom: 0;
margin: 0;
resize: none;
background: none;
padding: 0;
color: var(--color-white);
}
::placeholder {
color: var(--color-white-50);
}
#comments-container form footer {
gap: var(--space-12);
}
#comments-container form footer > * {
flex-grow: 1;
}
</style>
<style scoped>