Add profile dialog

frontend/index.html

@@ -77,12 +77,6 @@
         <!-- Chat Interface -->
         <div id="chat-interface" style="display: none;">
             <div class="all-container">
-                <div class="profile" id="profile">
-                    <div class="profileheader">
-                        <p>Твой профиль</p>
-                        <a href="#" id="closeprofile">закрыть</a>
-                    </div>
-                </div>
                 <div class="chat-list" id="chat-list">
                     <header class="chat-header-left">
                         <div id="productname">Loading...</div> 
@@ -156,6 +150,15 @@
                 </div>
             </div>
         </div>
+        <mdui-dialog id="profile-dialog" close-on-overlay-click close-on-esc>
+            <p>
+            Скоро будет...
+            </p>
+            
+            <p>
+                <mdui-button id="profile-dialog-close">Закрыть</mdui-button>
+            </p>
+        </mdui-dialog>
         <script src="src/main.ts" type="module"></script>
     </body>
 </html> 

frontend/src/css/_chat.scss

@@ -2,7 +2,6 @@
 @use "common/material" as *;
 
 #chat-interface {
-    /* Header */
     .header {
         display: flex;
         background-color: $color-dark-surface-container;
@@ -16,7 +15,6 @@
         top: 0;
         right: 0;
 
-
         .header-content {
             display: flex;
             justify-content: space-between;
@@ -33,6 +31,7 @@
                 display: none;
                 list-style: none;
                 gap: 10px;
+
                 li {
                     a {
                         color: white;
@@ -83,19 +82,24 @@
 
                 .chat-header-info {
                     display: flex;
+
                     .info-chat {
                         display: flex;
                         flex-direction: column;
+
                         h4 {
                             font-size: 1.1rem;
+                            margin: 0;
                             margin-bottom: 0.2rem;
                         }
 
                         p {
+                            margin: 0;
                             font-size: 0.8rem;
                             color: #718096;
                         }
                     }
+
                     .online-status {
                         display: inline-block;
                         width: 10px;
@@ -104,6 +108,7 @@
                         background-color: $success;
                         margin-right: 5px;
                     }
+
                     a {
                         display: flex;
                         flex-direction: row;
@@ -115,6 +120,7 @@
                         position: absolute;
                         right: 2%;
                         top: 2%;
+
                         &:hover {
                             border: none;
                         }
@@ -249,5 +255,4 @@
             }
         }
     }
-    
 }

frontend/src/css/style.scss

@@ -9,9 +9,8 @@
 @use "lib/fonts/montserrat";
 @use "lib/fonts/material-symbols";
 
+
 * {
-    margin: 0;
-    padding: 0;
     box-sizing: border-box;
 }
 
@@ -22,5 +21,15 @@ body {
     line-height: 1.6;
     height: 100vh;
     position: relative;
-
+    margin: 0;
+}
+
+mdui-dialog {
+    > *:first-child {
+        margin-block-start: 0;
+    }
+
+    > *:last-child {
+        margin-block-end: 0;
+    }
 }

frontend/src/main.ts

@@ -5,6 +5,7 @@ import { API_BASE_URL, API_FULL_BASE_URL, PRODUCT_NAME } from './config';
 import type { Message, Messages, WebSocketMessage } from './types';
 import "./links";
 import "./material";
+import type { Dialog } from 'mdui/components/dialog.js';
 
 const websocket = new WebSocket(`ws://${API_FULL_BASE_URL}/chat/ws`);
 
@@ -146,6 +147,8 @@ document.getElementById('message-form')!.addEventListener('submit', (e) => {
 
 document.getElementById("productname")!.textContent = PRODUCT_NAME;
 document.title = PRODUCT_NAME;
+
+
 // сварачивание и разворачивание чата
 const but = document.getElementById('chat-recrol')!;
 const but_list1 = document.getElementById('chat1but')!;
@@ -153,6 +156,7 @@ const but_list2 = document.getElementById('chat1but2')!;
 const cont1 = document.getElementById('conteinerchat')!;
 const logout = document.getElementById('logouts')!;
 const namechat = document.getElementById('namechat')!;
+
 but.addEventListener('click',() => {
     but.style.display = 'none';
     cont1.style.display = 'none';
@@ -168,18 +172,16 @@ but_list2.addEventListener('click',() => {
     cont1.style.display = 'flex';
     namechat.textContent = 'общий чат 2';
 });
-// открытие профиля
-const butprofile = document.getElementById('profbut')!
-const chatlist = document.getElementById('chat-list')!
-const profile = document.getElementById('profile')!
-const closeprofile = document.getElementById('closeprofile')!
-butprofile.addEventListener('click',()=>{
-    chatlist.style.display = 'none'
-    cont1.style.display = 'none'
-    profile.style.display = 'flex'
 
-})
-closeprofile.addEventListener('click',()=>{
-    chatlist.style.display = 'flex'
-    profile.style.display = 'none'
-})
+// открытие профиля
+const butprofile = document.getElementById('profbut')!;
+const dialog = document.getElementById("profile-dialog") as Dialog;
+const dialogClose = document.getElementById("profile-dialog-close")!;
+
+butprofile.addEventListener('click', () => {
+    dialog.open = true;
+});
+
+dialogClose.addEventListener("click", () => {
+    dialog.open = false;
+});

frontend/src/material.ts

@@ -6,6 +6,8 @@ import 'mdui/components/list-item.js';
 import 'mdui/components/bottom-app-bar.js';
 import 'mdui/components/button-icon.js';
 import 'mdui/components/fab.js';
+import 'mdui/components/dialog.js';
+import 'mdui/components/button.js';
 
 import { setColorScheme } from 'mdui/functions/setColorScheme.js';