mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
Implement base DOM structure
This commit is contained in:
@@ -0,0 +1,10 @@
|
||||
export function BottomAppBar() {
|
||||
return (
|
||||
<mdui-bottom-app-bar>
|
||||
<mdui-button-icon icon="settings--filled" id="settings-open"></mdui-button-icon>
|
||||
<mdui-button-icon icon="group_add--filled"></mdui-button-icon>
|
||||
<div style={{ flexGrow: 1 }}></div>
|
||||
<mdui-fab icon="edit--filled"></mdui-fab>
|
||||
</mdui-bottom-app-bar>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { ChatMain } from "./ChatMain";
|
||||
|
||||
export function ChatContainer() {
|
||||
return (
|
||||
<div className="chat-container">
|
||||
<ChatMain />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { PRODUCT_NAME } from "../../../core/config";
|
||||
|
||||
export function ChatHeader() {
|
||||
return (
|
||||
<header className="chat-header-left">
|
||||
<div className="product-name">{PRODUCT_NAME}</div>
|
||||
<div className="profile">
|
||||
<a href="#" id="profile-open">
|
||||
<img src="./src/resources/images/default-avatar.png" alt="" id="preview1" />
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
export function ChatInputWrapper() {
|
||||
return (
|
||||
<div className="chat-input-wrapper">
|
||||
<div className="chat-input">
|
||||
<form className="input-group" id="message-form">
|
||||
<input type="text" className="message-input" id="message-input" placeholder="Напишите сообщение..." autoComplete="off" />
|
||||
<button type="submit" className="send-btn">
|
||||
<span className="material-symbols filled">send</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { ChatList } from "./ChatList";
|
||||
import { ChatContainer } from "./ChatContainer";
|
||||
|
||||
export function ChatInterface() {
|
||||
return (
|
||||
<div id="chat-interface">
|
||||
<div className="all-container">
|
||||
<ChatList />
|
||||
<ChatContainer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { ChatHeader } from "./ChatHeader";
|
||||
import { ChatTabs } from "./ChatTabs";
|
||||
import { BottomAppBar } from "./BottomAppBar";
|
||||
|
||||
export function ChatList() {
|
||||
return (
|
||||
<div className="chat-list" id="chat-list">
|
||||
<ChatHeader />
|
||||
<ChatTabs />
|
||||
<BottomAppBar />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { ChatMainHeader } from "./ChatMainHeader";
|
||||
import { ChatMessages } from "./ChatMessages";
|
||||
import { ChatInputWrapper } from "./ChatInputWrapper";
|
||||
|
||||
export function ChatMain() {
|
||||
return (
|
||||
<div className="chat-main" id="chat-inner">
|
||||
<ChatMainHeader />
|
||||
<ChatMessages />
|
||||
<ChatInputWrapper />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
export function ChatMainHeader() {
|
||||
return (
|
||||
<div className="chat-header">
|
||||
<img src="./src/resources/images/default-avatar.png" alt="Avatar" className="chat-header-avatar" />
|
||||
<div className="chat-header-info">
|
||||
<div className="info-chat">
|
||||
<h4 id="chat-name">Общий чат</h4>
|
||||
<p>
|
||||
<span className="online-status"></span>
|
||||
Онлайн
|
||||
</p>
|
||||
</div>
|
||||
<a href="#" id="hide-chat">Свернуть чат</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export function ChatMessages() {
|
||||
return (
|
||||
<div className="chat-messages" id="chat-messages">
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
export function ChatTabs() {
|
||||
return (
|
||||
<div className="chat-tabs">
|
||||
<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 value="dms">ЛС</mdui-tab>
|
||||
|
||||
<mdui-tab-panel slot="panel" value="chats">
|
||||
<mdui-list>
|
||||
<mdui-list-item headline="Общий чат" description="Вы: Последнее сообщение" id="chat-list-chat-1">
|
||||
<img src="./src/resources/images/default-avatar.png" alt="" slot="icon" />
|
||||
</mdui-list-item>
|
||||
<mdui-list-item headline="Общий чат 2" description="Вы: Последнее сообщение" id="chat-list-chat-2">
|
||||
<img src="./src/resources/images/default-avatar.png" alt="" slot="icon" />
|
||||
</mdui-list-item>
|
||||
</mdui-list>
|
||||
</mdui-tab-panel>
|
||||
<mdui-tab-panel slot="panel" value="channels">Скоро будет...</mdui-tab-panel>
|
||||
<mdui-tab-panel slot="panel" value="contacts">Скоро будет...</mdui-tab-panel>
|
||||
<mdui-tab-panel slot="panel" value="dms">
|
||||
<mdui-list id="dm-users"></mdui-list>
|
||||
</mdui-tab-panel>
|
||||
</mdui-tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
export function EditMessageDialog() {
|
||||
return (
|
||||
<mdui-dialog id="edit-message-dialog" close-on-overlay-click close-on-esc>
|
||||
<div className="dialog-content">
|
||||
<h3>Edit Message</h3>
|
||||
<mdui-text-field
|
||||
id="edit-message-input"
|
||||
label="Edit Message"
|
||||
variant="outlined"
|
||||
placeholder="Edit your message..."
|
||||
maxlength={1000}>
|
||||
</mdui-text-field>
|
||||
<div className="dialog-actions">
|
||||
<mdui-button id="edit-cancel" variant="outlined">Cancel</mdui-button>
|
||||
<mdui-button id="edit-save">Save</mdui-button>
|
||||
</div>
|
||||
</div>
|
||||
</mdui-dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
export function MessageContextMenu() {
|
||||
return (
|
||||
<div id="message-context-menu" className="context-menu">
|
||||
<div className="context-menu-item" data-action="reply">
|
||||
<span className="material-symbols">reply</span>
|
||||
Reply
|
||||
</div>
|
||||
<div className="context-menu-item" data-action="edit">
|
||||
<span className="material-symbols">edit</span>
|
||||
Edit
|
||||
</div>
|
||||
<div className="context-menu-item" data-action="delete">
|
||||
<span className="material-symbols">delete</span>
|
||||
Delete
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
export function ReplyMessageDialog() {
|
||||
return (
|
||||
<mdui-dialog id="reply-message-dialog" close-on-overlay-click close-on-esc>
|
||||
<div className="dialog-content">
|
||||
<h3>Reply to Message</h3>
|
||||
<div className="reply-preview" id="reply-preview"></div>
|
||||
<mdui-text-field
|
||||
id="reply-message-input"
|
||||
label="Reply"
|
||||
variant="outlined"
|
||||
placeholder="Type your reply..."
|
||||
maxlength={1000}>
|
||||
</mdui-text-field>
|
||||
<div className="dialog-actions">
|
||||
<mdui-button id="reply-cancel" variant="outlined">Cancel</mdui-button>
|
||||
<mdui-button id="reply-send">Send Reply</mdui-button>
|
||||
</div>
|
||||
</div>
|
||||
</mdui-dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
export function UserProfileDialog() {
|
||||
return (
|
||||
<mdui-dialog id="user-profile-dialog" close-on-overlay-click close-on-esc>
|
||||
<div className="content">
|
||||
<div className="profile-picture-section">
|
||||
<img className="profile-picture" src="" alt="Profile Picture" />
|
||||
</div>
|
||||
<div className="profile-info">
|
||||
<div className="username-section">
|
||||
<h4 className="username"></h4>
|
||||
<div className="online-status"></div>
|
||||
</div>
|
||||
<div className="bio-section">
|
||||
<label>Bio:</label>
|
||||
<div className="bio-display"></div>
|
||||
</div>
|
||||
<div className="profile-stats">
|
||||
<div className="stat">
|
||||
<span className="stat-label">Member since:</span>
|
||||
<span className="stat-value member-since"></span>
|
||||
</div>
|
||||
<div className="stat">
|
||||
<span className="stat-label">Last seen:</span>
|
||||
<span className="stat-value last-seen"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="profile-actions">
|
||||
<mdui-button id="dm-button" variant="filled">
|
||||
<mdui-icon slot="icon" name="chat--filled"></mdui-icon>
|
||||
Send Message
|
||||
</mdui-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mdui-dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user