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> <!DOCTYPE html>
<html lang="ru"> <html lang="ru" class="mdui-theme-dark">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -78,7 +78,10 @@
<div id="chat-interface" style="display: none;"> <div id="chat-interface" style="display: none;">
<div class="all-container"> <div class="all-container">
<div class="profile" id="profile"> <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>
<div class="chat-list" id="chat-list"> <div class="chat-list" id="chat-list">
<header class="chat-header-left"> <header class="chat-header-left">
@@ -88,25 +91,33 @@
</div> </div>
</header> </header>
<div class="chat-tabs"> <div class="chat-tabs">
<nav> <mdui-tabs value="chats" full-width>
<ul> <mdui-tab value="chats">
<li>Чаты</li> Чаты
<li>Каналы</li> </mdui-tab>
<li>Контакты</li> <mdui-tab value="channels">
</ul> Каналы
</nav> </mdui-tab>
</div> <mdui-tab value="contacts">
<div class="chats"> Контакты
<a href="#" id="chat1but"> </mdui-tab>
<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 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"> <div class="ponel">
<a href="#">+чат</a> <a href="#">+чат</a>
<a href="#">+канал</a> <a href="#">+канал</a>
frontend/src/css/_panelchat.scss
+4 -40
View File
@@ -91,11 +91,14 @@
} }
} }
.chats { .chat-tabs {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
margin-top: 5px; margin-top: 5px;
width: 100%;
--mdui-color-surface: $color-dark-surface-container;
--mdui-color-surface-variant: transparent;
a { a {
display: flex; 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 './css/style.scss';
import "mdui/mdui.css";
import { showLogin, getAuthHeaders, authToken, currentUser } from './auth'; import { showLogin, getAuthHeaders, authToken, currentUser } from './auth';
import { API_BASE_URL, API_FULL_BASE_URL, PRODUCT_NAME } from './config'; import { API_BASE_URL, API_FULL_BASE_URL, PRODUCT_NAME } from './config';
import type { Message, Messages, WebSocketMessage } from './types'; import type { Message, Messages, WebSocketMessage } from './types';
import "./links"; import "./links";
import "./material";
const websocket = new WebSocket(`ws://${API_FULL_BASE_URL}/chat/ws`); 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");
package.json
+7 -6
View File
@@ -7,24 +7,25 @@
"backend:run": "cd backend && ../.venv/bin/fastapi dev --port 8300 main.py", "backend:run": "cd backend && ../.venv/bin/fastapi dev --port 8300 main.py",
"backend:dependencies": "python3 -m venv .venv && ./.venv/bin/pip3 install -r backend/requirements.txt", "backend:dependencies": "python3 -m venv .venv && ./.venv/bin/pip3 install -r backend/requirements.txt",
"backend:reinstall": "rm -rf .venv && npm run backend:dependencies", "backend:reinstall": "rm -rf .venv && npm run backend:dependencies",
"frontend:dev": "vite frontend", "frontend:dev": "vite frontend",
"frontend:build": "tsc --project frontend && vite build frontend", "frontend:build": "tsc --project frontend && vite build frontend",
"frontend:preview": "vite preview frontend", "frontend:preview": "vite preview frontend",
"frontend:dependencies": "npm install", "frontend:dependencies": "npm install",
"dev": "concurrently 'npm run frontend:dev' 'npm run backend:run'", "dev": "concurrently 'npm run frontend:dev' 'npm run backend:run'",
"build": "npm run frontend:build", "build": "npm run frontend:build",
"install": "npm run backend:dependencies" "install": "npm run backend:dependencies"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^10.4.21",
"concurrently": "^9.2.0", "concurrently": "^9.2.0",
"sass-embedded": "^1.90.0",
"postcss": "^8.5.6", "postcss": "^8.5.6",
"sass-embedded": "^1.90.0",
"terser": "^5.43.1",
"typescript": "~5.9.2", "typescript": "~5.9.2",
"vite": "^7.1.2", "vite": "^7.1.2",
"vite-plugin-html": "^3.2.2", "vite-plugin-html": "^3.2.2"
"terser": "^5.43.1", },
"autoprefixer": "^10.4.21" "dependencies": {
"mdui": "^2.1.4"
} }
} }