admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/IO-3000-messaging-sockets-migration2 -

Browse Source 
- Various work

Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-11-28 09:10:23 -08:00
parent ad1761096a
commit 08c0da1bed
6 changed files with 171 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
client/src/components/chat-messages-list/chat-message-list.styles.scss
View File

@@ -1,110 +1,125 @@
.message-icon {
color: whitesmoke;
border: #000000;
position: absolute;
margin: 0 0.1rem;
bottom: 0.1rem;
right: 0.3rem;
z-index: 5;
}
.chat {
flex: 1;
display: flex;
flex-direction: column;
margin: 0.8rem 0rem;
overflow: hidden; // Ensure the content scrolls correctly
height: 100%;
width: 100%;
}
.archive-button {
height: 20px;
border-radius: 4px;
}
.messages {
display: flex;
flex-direction: column;
padding: 0.5rem; // Add padding to avoid edge clipping
padding: 0.5rem; // Prevent edge clipping
}
.message {
position: relative;
border-radius: 20px;
padding: 0.25rem 0.8rem;
word-wrap: break-word;
.message-img {
&-img {
max-width: 10rem;
max-height: 10rem;
object-fit: contain;
margin: 0.2rem;
border-radius: 4px;
}
&-images {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
}
.yours {
align-items: flex-start;
.message-icon {
position: absolute;
bottom: 0.1rem;
right: 0.3rem;
margin: 0 0.1rem;
color: whitesmoke;
z-index: 5;
}
.msgmargin {
margin-top: 0.1rem;
margin-bottom: 0.1rem;
margin: 0.1rem 0;
}
.yours .message {
margin-right: 20%;
background-color: #eee;
position: relative;
.yours,
.mine {
display: flex;
flex-direction: column;
.message {
position: relative;
&:last-child:before,
&:last-child:after {
content: "";
position: absolute;
bottom: 0;
height: 20px;
width: 20px;
z-index: 0;
}
&:last-child:after {
width: 10px;
background: white;
z-index: 1;
}
}
}
.yours .message:last-child:before {
content: "";
position: absolute;
z-index: 0;
bottom: 0;
left: -7px;
height: 20px;
width: 20px;
background: #eee;
border-bottom-right-radius: 15px;
}
.yours .message:last-child:after {
content: "";
position: absolute;
z-index: 1;
bottom: 0;
left: -10px;
width: 10px;
height: 20px;
background: white;
border-bottom-right-radius: 10px;
/* "Yours" (incoming) message styles */
.yours {
align-items: flex-start;
.message {
margin-right: 20%;
background-color: #eee;
&:last-child:before {
left: -7px;
background: #eee;
border-bottom-right-radius: 15px;
}
&:last-child:after {
left: -10px;
border-bottom-right-radius: 10px;
}
}
}
/* "Mine" (outgoing) message styles */
.mine {
align-items: flex-end;
.message {
color: white;
margin-left: 25%;
background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
padding-bottom: 0.6rem;
&:last-child:before {
right: -8px;
background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
border-bottom-left-radius: 15px;
}
&:last-child:after {
right: -10px;
border-bottom-left-radius: 10px;
}
}
}
.mine .message {
color: white;
margin-left: 25%;
background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
position: relative;
padding-bottom: 0.6rem;
}
.mine .message:last-child:before {
content: "";
position: absolute;
z-index: 0;
bottom: 0;
right: -8px;
height: 20px;
width: 20px;
background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
border-bottom-left-radius: 15px;
}
.mine .message:last-child:after {
content: "";
position: absolute;
z-index: 1;
bottom: 0;
right: -10px;
width: 10px;
height: 20px;
background: white;
border-bottom-left-radius: 10px;
.virtuoso-container {
flex: 1;
overflow: auto;
}