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

Improve settings dialog

Browse Source
This commit is contained in:
denis0001-dev
2025-08-30 23:14:19 +03:00
Unverified
parent 9f2f6f86f9
commit 99a01dddee
4 changed files with 18 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/ui/components/Dialog.tsx
+1 -1
View File
@@ -38,5 +38,5 @@ export function MaterialDialog(props: FullDialogProps) {
}; };
}, [dialogRef.current, props.open, props.onOpenChange]); }, [dialogRef.current, props.open, props.onOpenChange]);
return <mdui-dialog {...props} ref={dialogRef} />; return <mdui-dialog {...props} ref={dialogRef} style={{ all: "revert" }} />;
} }
frontend/src/ui/components/chat/LeftPanel.tsx
+11 -11
View File
@@ -4,21 +4,21 @@ import { useChat } from "../../hooks/useChat";
import defaultAvatar from "../../../resources/images/default-avatar.png"; import defaultAvatar from "../../../resources/images/default-avatar.png";
import { useState } from "react"; import { useState } from "react";
import { ProfileDialog } from "../profile/ProfileDialog"; import { ProfileDialog } from "../profile/ProfileDialog";
import { SettingsDialog } from "../settings/SettingsDialog";
function BottomAppBar() { function BottomAppBar() {
const { openSettings } = useDialog(); const [settingsOpen, onSettingsOpenChange] = useState(false);
const handleSettingsClick = () => {
openSettings();
};
return ( return (
<mdui-bottom-app-bar> <>
<mdui-button-icon icon="settings--filled" id="settings-open" onClick={handleSettingsClick}></mdui-button-icon> <mdui-bottom-app-bar>
<mdui-button-icon icon="group_add--filled"></mdui-button-icon> <mdui-button-icon icon="settings--filled" id="settings-open" onClick={() => onSettingsOpenChange(true)}></mdui-button-icon>
<div style={{ flexGrow: 1 }}></div> <mdui-button-icon icon="group_add--filled"></mdui-button-icon>
<mdui-fab icon="edit--filled"></mdui-fab> <div style={{ flexGrow: 1 }}></div>
</mdui-bottom-app-bar> <mdui-fab icon="edit--filled"></mdui-fab>
</mdui-bottom-app-bar>
<SettingsDialog isOpen={settingsOpen} onOpenChange={onSettingsOpenChange} />
</>
); );
} }
frontend/src/ui/components/settings/SettingsDialog.tsx
+6 -6
View File
@@ -1,9 +1,9 @@
import { useState } from "react"; import { useState } from "react";
import { useDialog } from "../../contexts/DialogContext";
import { PRODUCT_NAME } from "../../../core/config"; import { PRODUCT_NAME } from "../../../core/config";
import type { DialogProps } from "../../../core/types";
import { MaterialDialog } from "../Dialog";
export function SettingsDialog() { export function SettingsDialog({ isOpen, onOpenChange }: DialogProps) {
const { isSettingsOpen, closeSettings } = useDialog();
const [activePanel, setActivePanel] = useState("notifications-settings"); const [activePanel, setActivePanel] = useState("notifications-settings");
const handlePanelChange = (panelId: string) => { const handlePanelChange = (panelId: string) => {
@@ -11,11 +11,11 @@ export function SettingsDialog() {
}; };
return ( return (
<mdui-dialog id="settings-dialog" close-on-overlay-click close-on-esc fullscreen open={isSettingsOpen}> <MaterialDialog close-on-overlay-click close-on-esc fullscreen open={isOpen} onOpenChange={onOpenChange}>
<div className="fullscreen-wrapper"> <div className="fullscreen-wrapper">
<div id="settings-dialog-inner"> <div id="settings-dialog-inner">
<div className="header"> <div className="header">
<mdui-button-icon icon="close" id="settings-close" onClick={closeSettings}></mdui-button-icon> <mdui-button-icon icon="close" id="settings-close" onClick={() => onOpenChange(false)}></mdui-button-icon>
<mdui-top-app-bar-title>Настройки</mdui-top-app-bar-title> <mdui-top-app-bar-title>Настройки</mdui-top-app-bar-title>
</div> </div>
<div id="settings-menu"> <div id="settings-menu">
@@ -148,6 +148,6 @@ export function SettingsDialog() {
</div> </div>
</div> </div>
</div> </div>
</mdui-dialog> </MaterialDialog>
); );
} }
frontend/src/ui/screen/ChatScreen.tsx
-4
View File
@@ -1,21 +1,17 @@
import { ChatInterface } from "../components/chat/ChatInterface"; import { ChatInterface } from "../components/chat/ChatInterface";
import { CropperDialog } from "../components/profile/CropperDialog"; import { CropperDialog } from "../components/profile/CropperDialog";
import { SettingsDialog } from "../components/settings/SettingsDialog";
import { MessageContextMenu } from "../components/chat/MessageContextMenu"; import { MessageContextMenu } from "../components/chat/MessageContextMenu";
import { EditMessageDialog } from "../components/chat/EditMessageDialog"; import { EditMessageDialog } from "../components/chat/EditMessageDialog";
import { ReplyMessageDialog } from "../components/chat/ReplyMessageDialog"; import { ReplyMessageDialog } from "../components/chat/ReplyMessageDialog";
import { UserProfileDialog } from "../components/chat/UserProfileDialog";
export default function ChatScreen() { export default function ChatScreen() {
return ( return (
<> <>
<ChatInterface /> <ChatInterface />
<CropperDialog /> <CropperDialog />
<SettingsDialog />
<MessageContextMenu /> <MessageContextMenu />
<EditMessageDialog /> <EditMessageDialog />
<ReplyMessageDialog /> <ReplyMessageDialog />
<UserProfileDialog isOpen={false} onOpenChange={() => {}} />
</> </>
); );
} }