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

Replace tabs with Material Design tabs

Browse Source
This commit is contained in:
denis0001-dev
2025-08-20 19:54:25 +03:00
Unverified
parent 6c0686677e
commit 2728a9c6c9
5 changed files with 50 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+31 -20
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="ru">
<html lang="ru" class="mdui-theme-dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -78,7 +78,10 @@
<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 class="profileheader">
<p>Твой профиль</p>
<a href="#" id="closeprofile">закрыть</a>
</div>
</div>
<div class="chat-list" id="chat-list">
<header class="chat-header-left">
@@ -88,25 +91,33 @@
</div>
</header>
<div class="chat-tabs">
<nav>
<ul>
<li>Чаты</li>
<li>Каналы</li>
<li>Контакты</li>
</ul>
</nav>
</div>
<div class="chats">
<a href="#" id="chat1but">
<img src="./src/images/default-avatar.png" alt="">
Общий чат
</a>
<a href="#" id="chat1but2">
<img src="./src/images/default-avatar.png" alt="">
Общий чат 2
</a>
</div>
<mdui-tabs value="chats" full-width>
<mdui-tab value="chats">
Чаты
</mdui-tab>
<mdui-tab value="channels">
Каналы
</mdui-tab>
<mdui-tab value="contacts">
Контакты
</mdui-tab>
<mdui-tab-panel slot="panel" value="chats">
<div class="chats">
<a href="#" id="chat1but">
<img src="./src/images/default-avatar.png" alt="">
Общий чат
</a>
<a href="#" id="chat1but2">
<img src="./src/images/default-avatar.png" alt="">
Общий чат 2
</a>
</div>
</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="channels">ertgergert</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="contacts">erhnbftgynftdhge4w</mdui-tab-panel>
</mdui-tabs>
</div>
<div class="ponel">
<a href="#">+чат</a>
<a href="#">+канал</a>
frontend/src/css/_panelchat.scss
+4 -40
View File
@@ -91,11 +91,14 @@
}
}
.chats {
.chat-tabs {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 5px;
width: 100%;
--mdui-color-surface: $color-dark-surface-container;
--mdui-color-surface-variant: transparent;
a {
display: flex;
@@ -120,43 +123,4 @@
}
}
}
.chat-tabs {
display: flex;
flex-direction: row;
font-size: 24px;
justify-content: center;
color: white;
ul {
display: flex;
flex-direction: row;
gap: 5px;
}
li {
display: flex;
flex-direction: row;
}
.ponel {
display: flex;
position: fixed;
top: 95%;
left: 0.5%;
gap: 10px;
a {
text-decoration: none;
color: $color-dark-on-surface-variant;
border: solid 2px $color-dark-on-surface-variant;
padding: 5px;
border-radius: 10px;
&:hover {
background-color: rgba(255, 255, 255, 0.241);
}
}
}
}
}
frontend/src/main.ts
+2
View File
@@ -1,8 +1,10 @@
import './css/style.scss';
import "mdui/mdui.css";
import { showLogin, getAuthHeaders, authToken, currentUser } from './auth';
import { API_BASE_URL, API_FULL_BASE_URL, PRODUCT_NAME } from './config';
import type { Message, Messages, WebSocketMessage } from './types';
import "./links";
import "./material";
const websocket = new WebSocket(`ws://${API_FULL_BASE_URL}/chat/ws`);
frontend/src/material.ts
+6
View File
@@ -0,0 +1,6 @@
import 'mdui/components/tabs.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
setColorScheme("#91cef4");