FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-23 03:25:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

Implement file sending

Browse Source
This commit is contained in:
denis0001-dev
2025-09-24 14:14:59 +03:00
Unverified
parent 230b8d7e56
commit 6066ec9767
13 changed files with 472 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/resources/css/_chat.scss
+77 -49
View File
@@ -172,28 +172,7 @@
align-items: flex-end;
gap: 8px;
.message-profile-pic {
width: 32px;
height: 32px;
flex-shrink: 0;
margin-bottom: 4px;
img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
transition: transform 0.2s ease, box-shadow 0.2s ease;
&:hover {
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
}
}
.message-inner {
padding: 0.8rem 1rem;
border-radius: 12px;
position: relative;
word-wrap: break-word;
@@ -203,9 +182,43 @@
max-width: 100%;
display: inline-block;
.message-profile-pic {
width: 32px;
height: 32px;
flex-shrink: 0;
margin-bottom: 4px;
margin: 8px;
img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
transition: transform 0.2s ease, box-shadow 0.2s ease;
&:hover {
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
}
}
.message-username {
font-weight: 600;
margin-bottom: 0.3rem;
font-size: 0.9rem;
transition: color 0.2s ease;
margin: 8px;
&:hover {
color: $color-dark-primary;
text-decoration: underline;
}
}
.message-content {
word-wrap: break-word;
margin-bottom: 10px;
margin: 10px 10px 0 10px;
white-space: pre-wrap;
> p:first-child {
@@ -222,12 +235,22 @@
margin-bottom: 10px;
}
.message-attachments {
padding: 5px 0 0 0;
.attachment {
a {
text-decoration: none;
}
}
}
.message-time {
font-size: 0.7rem;
color: $color-dark-on-surface-variant;
margin-top: 0.3rem;
text-align: right;
user-select: none;
margin: 4px 8px 8px 8px;
}
}
@@ -252,18 +275,6 @@
}
}
}
.message-username {
font-weight: 600;
margin-bottom: 0.3rem;
font-size: 0.9rem;
transition: color 0.2s ease;
&:hover {
color: $color-dark-primary;
text-decoration: underline;
}
}
}
.chat-input-wrapper {
@@ -309,6 +320,16 @@
}
}
.attachments-preview {
align-items: center;
.attachments-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
}
.chat-input {
flex: 1;
display: flex;
@@ -331,22 +352,29 @@
width: 100%;
}
.send-btn {
margin: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: $color-dark-primary;
color: $color-dark-on-primary;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.25s ease;
.buttons {
align-self: flex-end;
@include hoverStateLayer($background: $color-dark-primary);
display: flex;
flex-direction: row;
align-items: center;
.send-btn {
margin: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: $color-dark-primary;
color: $color-dark-on-primary;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.25s ease;
align-self: flex-end;
@include hoverStateLayer($background: $color-dark-primary);
}
}
}
}