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

Create new Material components, redesign the chat UI, add security settings

Browse Source
This commit is contained in:
denis0001-dev
2025-11-01 14:55:36 +03:00
Unverified
parent 5f49b45eed
commit fc11d06570
40 changed files with 917 additions and 618 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/chat/css/_changePasswordDialog.scss
+36
View File
@@ -0,0 +1,36 @@
.change-password-dialog .cpd-container {
padding: 16px;
.cpd-titlebar {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 16px;
gap: 10px;
.cpd-title {
font-size: 20px;
}
}
.cpd-content form {
display: flex;
flex-direction: column;
gap: 16px;
.cpd-logout-all {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.cpd-actions {
display: flex;
flex-direction: row;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
}
}
frontend/src/pages/chat/css/_chat-input.scss
+2 -1
View File
@@ -1,10 +1,11 @@
@use "../../../css/colors" as *;
@use "../../../css/material" as *;
@use "sass:color";
@use "right-panel" as *;
.chat-input-wrapper {
position: relative;
margin: 0 10px 10px 10px;
margin: 0 10px - $scrollbar-width 10px 10px;
position: sticky;
bottom: 10px;
z-index: 1;
frontend/src/pages/chat/css/_layout.scss
-9
View File
@@ -27,15 +27,6 @@
width: 100%;
flex-direction: column;
overflow: hidden;
.chat-main {
flex-grow: 1;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
overflow-y: auto;
}
}
}
frontend/src/pages/chat/css/_right-panel.scss
+138 -99
View File
@@ -2,76 +2,27 @@
@use "../../../css/material" as *;
@use "sass:color";
.chat-main {
.chat-header {
padding: 16px;
background: rgba($color-dark-surface-container, 0.8);
backdrop-filter: blur(20px);
$scrollbar-width: 8px;
.chat-wrapper {
flex-grow: 1;
height: 100%;
position: relative;
overflow: hidden;
.chat-main {
display: flex;
align-items: center;
box-shadow: 0 4px 20px rgba($color-dark-primary, 0.1);
flex-direction: column;
height: 100%;
position: relative;
z-index: 5;
position: sticky;
top: 0;
overflow-y: auto;
.chat-header-avatar {
width: 45px;
height: 45px;
border-radius: 20%;
object-fit: cover;
margin-right: 1rem;
}
.chat-header-info {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
.info-chat {
display: flex;
flex-direction: column;
h4 {
font-size: 1.1rem;
margin: 0 0 0.2rem;
}
p {
margin: 0;
font-size: 0.8rem;
color: #718096;
}
}
a {
display: flex;
flex-direction: row;
text-decoration: none;
color: white;
justify-content: end;
padding: 0;
margin: 0;
position: absolute;
right: 2%;
top: 2%;
&:hover {
border: none;
}
}
}
}
.chat-messages {
flex: 1;
padding: 10px 20px;
position: relative;
z-index: 1;
// Fancy floating thin scrollbar with invisible transparent margin
scrollbar-width: thin;
scrollbar-color: rgba($color-dark-primary, 0.3) transparent;
&::-webkit-scrollbar {
width: 7px;
width: $scrollbar-width;
}
&::-webkit-scrollbar-track {
@@ -79,48 +30,136 @@
}
&::-webkit-scrollbar-thumb {
background-color: $color-dark-surface-container-high;
border-radius: 20px;
background: rgba($color-dark-primary, 0.3);
border-radius: 4px;
margin: 2px;
&:hover {
background: rgba($color-dark-primary, 0.5);
}
}
}
.file-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 100;
backdrop-filter: blur(20px);
.file-overlay-wrapper {
.chat-header {
padding: 16px;
margin: 10px 10px - $scrollbar-width 0 10px;
background: rgba($color-dark-surface-container, 0.7);
backdrop-filter: blur(20px);
border-radius: 30px;
outline: 3px dashed $color-dark-primary;
outline-offset: -20px;
height: 100%;
width: 100%;
border: 1px solid rgba($color-dark-outline-variant, 0.4);
display: flex;
align-items: center;
justify-content: center;
.file-overlay-inner {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
position: sticky;
top: 10px;
z-index: 5;
.chat-header-avatar {
width: 45px;
height: 45px;
border-radius: 20%;
object-fit: cover;
margin-right: 1rem;
}
.chat-header-info {
display: flex;
gap: 12px;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: rgba(18, 18, 18, 0.8);
border: 1px solid $color-dark-surface-container-high;
border-radius: 12px;
color: $color-dark-on-surface;
mdui-icon {
color: $color-dark-primary;
flex: 1;
.info-chat {
display: flex;
flex-direction: column;
h4 {
font-size: 1.1rem;
margin: 0 0 0.2rem;
}
p {
margin: 0;
font-size: 0.8rem;
color: #718096;
}
}
a {
display: flex;
flex-direction: row;
text-decoration: none;
color: white;
justify-content: end;
padding: 0;
margin: 0;
position: absolute;
right: 2%;
top: 2%;
&:hover {
border: none;
}
}
}
}
.chat-messages {
flex: 1;
padding: 10px 20px;
position: relative;
z-index: 1;
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: $color-dark-surface-container-high;
border-radius: 20px;
}
}
.file-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 100;
backdrop-filter: blur(20px);
.file-overlay-wrapper {
border-radius: 30px;
outline: 3px dashed $color-dark-primary;
outline-offset: -20px;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.file-overlay-inner {
display: flex;
gap: 12px;
align-items: center;
padding: 12px 16px;
background: rgba(18, 18, 18, 0.8);
border: 1px solid $color-dark-surface-container-high;
border-radius: 12px;
color: $color-dark-on-surface;
mdui-icon {
color: $color-dark-primary;
}
}
}
}
}
}
}
frontend/src/pages/chat/css/chat.scss
+2 -1
View File
@@ -11,4 +11,5 @@
@use "callWindow";
@use "profile-dialog";
@use "typing-indicators";
@use "suspension-dialog";
@use "suspension-dialog";
@use "changePasswordDialog";