Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add delete action to Messages component and enhance styling for better user experience

This commit is contained in:
Vishnu 2025-05-23 15:29:18 +05:30
parent 1a0edcd43a
commit 4dddc82c8c
3 changed files with 84 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/src/components/ui/collaboration/Messages.tsx
View File

@ -33,6 +33,10 @@ const Messages: React.FC<MessageProps> = ({ val, i }) => {
setIsEditing(false);
}
function handleDeleteAction() {
setOpenOptions(false);
}
return (
<>
{isEditing ? (
@ -87,7 +91,7 @@ const Messages: React.FC<MessageProps> = ({ val, i }) => {
<button
className="more-options-button"
onClick={() => {
setOpenOptions(true);
setOpenOptions(!openOptions);
}}
>
<KebabIcon />
@ -97,12 +101,20 @@ const Messages: React.FC<MessageProps> = ({ val, i }) => {
<button
className="option"
onClick={() => {
setOpenOptions(false);
setIsEditing(true);
}}
>
Edit
</button>
<button className="option">Delete</button>
<button
className="option"
onClick={() => {
handleDeleteAction();
}}
>
Delete
</button>
</div>
)}
</div>

7
app/src/components/ui/collaboration/ThreadChat.tsx
View File

@ -17,14 +17,15 @@ const ThreadChat: React.FC = () => {
{
replyId: "user 1",
creatorId: "1",
createdAt: "hello, thread check",
createdAt: "2 hrs ago",
lastUpdatedAt: "2 hrs ago",
reply: "reply 1",
reply:
"reply testing reply content 1, reply testing reply content 1reply testing reply content 1",
},
{
replyId: "user 2",
creatorId: "2",
createdAt: "hello, thread check",
createdAt: "2 hrs ago",
lastUpdatedAt: "2 hrs ago",
reply: "reply 2",
},

64
app/src/styles/scene/comments.scss
View File

@ -121,12 +121,14 @@
padding: 8px 4px;
border-radius: #{$border-radius-medium};
backdrop-filter: blur(10px);
z-index: 100;
.options {
text-wrap: nowrap;
padding: 2px 4px;
border-radius: #{$border-radius-medium};
cursor: pointer;
&:hover {
color: var(--text-button-color);
background: var(--background-color-accent);
}
&.delete {
@ -159,6 +161,12 @@
padding-top: 0;
.edit-container {
.input-container {
textarea{
background: var(--background-color);
&:focus{
outline-color: var(--border-color-accent);
}
}
}
.actions-container {
@include flex-space-between;
@ -169,36 +177,90 @@
gap: 4px;
.cancel-button,
.save-button {
padding: 4px 6px;
padding: 4px 10px;
border-radius: #{$border-radius-large};
background: var(--background-color-solid);
outline: 1px solid var(--border-color);
}
.save-button {
color: var(--text-button-color);
background: var(--background-color-accent);
outline: none;
}
}
}
}
.message-container {
position: relative;
@include flex-space-between;
align-items: flex-start;
gap: 12px;
margin-top: 8px;
&:first-child{
margin: 0;
}
.profile {
height: 28px;
width: 28px;
min-width: 28px;
text-transform: uppercase;
line-height: 28px;
text-align: center;
border-radius: #{$border-radius-circle};
}
.content {
width: 100%;
.user-details {
display: flex;
align-items: flex-end;
gap: 8px;
.user-name {
text-transform: capitalize;
}
.time {
font-size: var(--font-size-tiny);
color: var(--input-text-color);
}
}
}
.more-options {
position: absolute;
right: 0;
top: 0;
.more-options-button {
@include flex-center;
height: 18px;
width: 18px;
border-radius: #{$border-radius-small};
&:hover{
background: var(--background-color-solid);
}
}
.options-list {
position: absolute;
right: 0;
padding: 3px 6px;
background: var(--background-color);
backdrop-filter: blur(10px);
outline: 1px solid var(--border-color);
border-radius: #{$border-radius-medium};
z-index: 100;
.option {
width: 100%;
border-radius: #{$border-radius-medium};
padding: 2px 6px;
text-align: start;
&:hover{
background: var(--background-color-accent);
color: var(--text-button-color);
}
}
}
}
.message{
margin-top: 6px;
}
}
}
.send-message-wrapper {
padding: 12px;