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

68
src/components/comments/Comment.vue
View file

@ -17,7 +17,12 @@
{{ comment.text }}
</p>
<footer v-if="comment.replies?.length > 0" class="comment__replies">
<span>{{ comment.replies.length }} réponse</span>
<p>{{ comment.replies.length }} réponse{{ comment.replies.length > 1 ? 's' : '' }}</p>
<!-- TODO: n'afficher que s'il s'agit du commentaire de l'utilisateur actuellement connecté -->
<div class="comment__ctas | mt-8">
<button class="btn btn--transparent btn--icon btn--sm" data-icon="edit"><span class="sr-only">Éditer</span></button>
<button class="btn btn--transparent btn--icon btn--sm" data-icon="delete"><span class="sr-only">Supprimer</span></button>
</div>
</footer>
</article>
</template>
@ -76,3 +81,64 @@ async function readNotification(notificationId) {
user.notifications = newNotifications;
}
</script>
<style scoped>
.comments > .comment:not([data-opened="true"]) {
cursor: pointer;
}
.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);
}
.comment__ctas > * {
--border-color: transparent;
margin-right: var(--space-4);
}
</style>