martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-11 19:19:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

styling edit subject modal

Browse Source
This commit is contained in:
Roland Osborne 2024-03-03 17:52:53 -08:00
parent a43a869197
commit 8447dcd6ee
8 changed files with 81 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
net/web/src/session/account/profile/Profile.jsx
View File

@ -170,15 +170,15 @@ export function Profile({ closeProfile }) {
<ProfileDetailsWrapper> <ProfileDetailsWrapper>
<div className="title">{ state.strings.profileDetails }</div> <div className="title">{ state.strings.profileDetails }</div>
<div class="info"> <div className="info">
<Input placeholder={state.strings.name} spellCheck="false" onChange={(e) => actions.setEditName(e.target.value)} <Input placeholder={state.strings.name} spellCheck="false" onChange={(e) => actions.setEditName(e.target.value)}
defaultValue={state.editName} autocapitalize="word" /> defaultValue={state.editName} autocapitalize="word" />
</div> </div>
<div class="info"> <div className="info">
<Input placeholder={state.strings.location} spellCheck="false" onChange={(e) => actions.setEditLocation(e.target.value)} <Input placeholder={state.strings.location} spellCheck="false" onChange={(e) => actions.setEditLocation(e.target.value)}
defaultValue={state.editLocation} autocapitalize="word" /> defaultValue={state.editLocation} autocapitalize="word" />
</div> </div>
<div class="info"> <div className="info">
<Input.TextArea placeholder={state.strings.description} onChange={(e) => actions.setEditDescription(e.target.value)} <Input.TextArea placeholder={state.strings.description} onChange={(e) => actions.setEditDescription(e.target.value)}
spellCheck="false" defaultValue={state.editDescription} autoSize={{ minRows: 2, maxRows: 6 }} /> spellCheck="false" defaultValue={state.editDescription} autoSize={{ minRows: 2, maxRows: 6 }} />
</div> </div>

40
net/web/src/session/conversation/addTopic/AddTopic.jsx
View File

@ -10,7 +10,7 @@ import { BinaryFile } from './binaryFile/BinaryFile';
import { Carousel } from 'carousel/Carousel'; import { Carousel } from 'carousel/Carousel';
import { Gluejar } from '@charliewilco/gluejar' import { Gluejar } from '@charliewilco/gluejar'
export function AddTopic({ contentKey, strings, menuStyle }) { export function AddTopic({ contentKey }) {
const { state, actions } = useAddTopic(contentKey); const { state, actions } = useAddTopic(contentKey);
@ -35,9 +35,9 @@ export function AddTopic({ contentKey, strings, menuStyle }) {
catch (err) { catch (err) {
console.log(err); console.log(err);
modal.error({ modal.error({
title: <span style={menuStyle}>{strings.operationFailed}</span>, title: <span style={state.menuStyle}>{state.strings.operationFailed}</span>,
content: <span style={menuStyle}>{strings.tryAgain}</span>, content: <span style={state.menuStyle}>{state.strings.tryAgain}</span>,
bodyStyle: { borderRadius: 8, padding: 16, ...menuStyle }, bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
}); });
} }
} }
@ -126,63 +126,61 @@ export function AddTopic({ contentKey, strings, menuStyle }) {
</div> </div>
)} )}
<div className="message"> <div className="message">
<Input.TextArea ref={msg} placeholder={strings.newMessage} spellCheck="true" autoSize={{ minRows: 2, maxRows: 6 }} <Input.TextArea ref={msg} placeholder={state.strings.newMessage} spellCheck="true" autoSize={{ minRows: 2, maxRows: 6 }}
enterkeyhint="send" onKeyDown={(e) => keyDown(e)} onChange={(e) => actions.setMessageText(e.target.value)} enterkeyhint="send" onKeyDown={(e) => keyDown(e)} onChange={(e) => actions.setMessageText(e.target.value)}
value={state.messageText} autocapitalize="none" /> value={state.messageText} autocapitalize="none" />
</div> </div>
<div className="buttons"> <div className="buttons">
{ state.enableImage && ( { state.enableImage && (
<Tooltip placement="top" title={strings.attachImage}> <Tooltip placement="top" title={state.display === 'small' ? null : state.strings.attachImage}>
<div className="button space" onClick={() => attachImage.current.click()}> <div className="button space" onClick={() => attachImage.current.click()}>
<PictureOutlined /> <PictureOutlined />
</div> </div>
</Tooltip> </Tooltip>
)} )}
{ state.enableVideo && ( { state.enableVideo && (
<Tooltip placement="top" title={strings.attachVideo}> <Tooltip placement="top" title={state.display === 'small' ? null : state.strings.attachVideo}>
<div className="button space" onClick={() => attachVideo.current.click()}> <div className="button space" onClick={() => attachVideo.current.click()}>
<VideoCameraOutlined /> <VideoCameraOutlined />
</div> </div>
</Tooltip> </Tooltip>
)} )}
{ state.enableAudio && ( { state.enableAudio && (
<Tooltip placement="top" title={strings.attachAudio}> <Tooltip placement="top" title={state.display === 'small' ? null : state.strings.attachAudio}>
<div className="button space" onClick={() => attachAudio.current.click()}> <div className="button space" onClick={() => attachAudio.current.click()}>
<SoundOutlined /> <SoundOutlined />
</div> </div>
</Tooltip> </Tooltip>
)} )}
<Tooltip placement="top" title={strings.attachFile}> <Tooltip placement="top" title={state.display === 'small' ? null : state.strings.attachFile}>
<div className="button space" onClick={() => attachBinary.current.click()}> <div className="button space" onClick={() => attachBinary.current.click()}>
<FieldBinaryOutlined /> <FieldBinaryOutlined />
</div> </div>
</Tooltip> </Tooltip>
<div className="bar space" /> <div className="bar space" />
<div className="button space"> <div className="button space">
<Tooltip placement="top" title={strings.fontColor}> <Tooltip placement="top" title={state.display === 'small' ? null : state.strings.fontColor}>
<Dropdown overlay={picker} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="top"> <Dropdown overlay={picker} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="top">
<FontColorsOutlined /> <FontColorsOutlined />
</Dropdown> </Dropdown>
</Tooltip> </Tooltip>
</div> </div>
<div className="button space"> <div className="button space">
<Tooltip placement="top" title={strings.fontSize}> <Tooltip placement="top" title={state.display === 'small' ? null : state.strings.fontSize}>
<Dropdown overlay={sizer} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="top"> <Dropdown overlay={sizer} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="top">
<FontSizeOutlined /> <FontSizeOutlined />
</Dropdown> </Dropdown>
</Tooltip> </Tooltip>
</div> </div>
<div className="end"> <div className="end">
<Tooltip placement="top" title={strings.postMessage}> <div className="button" onClick={addTopic}>
<div className="button" onClick={addTopic}> { state.busy && (
{ state.busy && ( <Spin size="small" />
<Spin size="small" /> )}
)} { !state.busy && (
{ !state.busy && ( <SendOutlined />
<SendOutlined /> )}
)} </div>
</div>
</Tooltip>
</div> </div>
</div> </div>
</AddTopicWrapper> </AddTopicWrapper>

10
net/web/src/session/conversation/addTopic/useAddTopic.hook.js
View File

@ -1,5 +1,6 @@
import { useContext, useState, useRef, useEffect } from 'react'; import { useContext, useState, useRef, useEffect } from 'react';
import { ConversationContext } from 'context/ConversationContext'; import { ConversationContext } from 'context/ConversationContext';
import { SettingsContext } from 'context/SettingsContext';
import { encryptBlock, encryptTopicSubject } from 'context/sealUtil'; import { encryptBlock, encryptTopicSubject } from 'context/sealUtil';
import Resizer from "react-image-file-resizer"; import Resizer from "react-image-file-resizer";
@ -16,9 +17,13 @@ export function useAddTopic(contentKey) {
textSize: 14, textSize: 14,
textSizeSet: false, textSizeSet: false,
busy: false, busy: false,
display: null,
strings: {},
menuStyle: {},
}); });
const conversation = useContext(ConversationContext); const conversation = useContext(ConversationContext);
const settings = useContext(SettingsContext);
const objects = useRef([]); const objects = useRef([]);
const updateState = (value) => { const updateState = (value) => {
@ -59,6 +64,11 @@ export function useAddTopic(contentKey) {
return () => { clearObjects() }; return () => { clearObjects() };
}, [contentKey]); }, [contentKey]);
useEffect(() => {
const { display, strings, menuStyle } = settings.state;
updateState({ display, strings, menuStyle });
}, [settings.state]);
useEffect(() => { useEffect(() => {
const { enableImage, enableAudio, enableVideo } = conversation.state.channel?.data?.channelDetail || {}; const { enableImage, enableAudio, enableVideo } = conversation.state.channel?.data?.channelDetail || {};
updateState({ enableImage, enableAudio, enableVideo }); updateState({ enableImage, enableAudio, enableVideo });

36
net/web/src/session/details/Details.jsx
View File

@ -21,9 +21,9 @@ export function Details({ closeDetails, closeConversation, openContact }) {
catch(err) { catch(err) {
console.log(err); console.log(err);
modal.error({ modal.error({
title: 'Failed to Set Conversation Member', title: <span style={state.menuStyle}>{state.strings.operationFailed}</span>,
content: 'Please try again.', content: <span style={state.menuStyle}>{state.strings.tryAgain}</span>,
bodyStyle: { padding: 16 }, bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
}); });
} }
} }
@ -35,9 +35,9 @@ export function Details({ closeDetails, closeConversation, openContact }) {
catch(err) { catch(err) {
console.log(err); console.log(err);
modal.error({ modal.error({
title: 'Failed to Clear Conversation Member', title: <span style={state.menuStyle}>{state.strings.operationFailed}</span>,
content: 'Please try again.', content: <span style={state.menuStyle}>{state.strings.tryAgain}</span>,
bodyStyle: { padding: 16 }, bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
}); });
} }
} }
@ -63,9 +63,9 @@ export function Details({ closeDetails, closeConversation, openContact }) {
} }
catch(err) { catch(err) {
modal.error({ modal.error({
title: 'Failed to Delete Topic', title: <span style={state.menuStyle}>{state.strings.operationFailed}</span>,
content: 'Please try again.', content: <span style={state.menuStyle}>{state.strings.tryAgain}</span>,
bodyStyle: { padding: 16 }, bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
}); });
} }
} }
@ -91,9 +91,9 @@ export function Details({ closeDetails, closeConversation, openContact }) {
} }
catch(err) { catch(err) {
modal.error({ modal.error({
title: 'Failed to Leave Topic', title: <span style={state.menuStyle}>{state.strings.operationFailed}</span>,
content: 'Please try again.', content: <span style={state.menuStyle}>{state.strings.tryAgain}</span>,
bodyStyle: { padding: 16 }, bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
}); });
} }
} }
@ -105,9 +105,9 @@ export function Details({ closeDetails, closeConversation, openContact }) {
} }
catch(err) { catch(err) {
modal.error({ modal.error({
title: 'Failed to Update Subject', title: <span style={state.menuStyle}>{state.strings.operationFailed}</span>,
content: 'Please try again.', content: <span style={state.menuStyle}>{state.strings.tryAgain}</span>,
bodyStyle: { padding: 16 }, bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
}); });
} }
}; };
@ -224,9 +224,9 @@ export function Details({ closeDetails, closeConversation, openContact }) {
markup={state.host} /> markup={state.host} />
</div> </div>
</div> </div>
<Modal title="Edit Subject" centered visible={state.showEditSubject} footer={editSubjectFooter} <Modal centered visible={state.showEditSubject} closable={false} footer={null} bodyStyle={{borderRadius: 8, padding: 16, ...state.menuStyle}}>
bodyStyle={{ padding: 16 }} onCancel={actions.clearEditSubject}> <EditSubject subject={state.editSubject} cancelSubject={actions.clearEditSubject} saveSubject={saveSubject} setSubject={actions.setSubjectUpdate}
<EditSubject subject={state.editSubject} setSubject={actions.setSubjectUpdate} /> strings={state.strings} />
</Modal> </Modal>
<Modal title="Edit Members" centered visible={state.showEditMembers} footer={editMembersFooter} <Modal title="Edit Members" centered visible={state.showEditMembers} footer={editMembersFooter}
bodyStyle={{ padding: 16 }} onCancel={actions.clearEditMembers}> bodyStyle={{ padding: 16 }} onCancel={actions.clearEditMembers}>

11
net/web/src/session/details/editSubject/EditSubject.jsx
View File

@ -1,12 +1,19 @@
import { Input } from 'antd'; import { Input, Button } from 'antd';
import { EditSubjectWrapper } from './EditSubject.styled'; import { EditSubjectWrapper } from './EditSubject.styled';
export function EditSubject({ subject, setSubject }) { export function EditSubject({ subject, setSubject, saveSubject, cancelSubject, strings }) {
return ( return (
<EditSubjectWrapper> <EditSubjectWrapper>
<div className="title">Edit Subject</div>
<Input placeholder="Subject (optional)" spellCheck="false" autocapitalize="word" <Input placeholder="Subject (optional)" spellCheck="false" autocapitalize="word"
value={subject} onChange={(e) => setSubject(e.target.value)} /> value={subject} onChange={(e) => setSubject(e.target.value)} />
<div className="controls">
<Button key="back" onClick={cancelSubject}>{strings.cancel}</Button>
<Button key="save" type="primary" onClick={saveSubject}>{strings.save}</Button>
</div>
</EditSubjectWrapper> </EditSubjectWrapper>
); );
} }

14
net/web/src/session/details/editSubject/EditSubject.styled.js
View File

@ -5,4 +5,18 @@ export const EditSubjectWrapper = styled.div`
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.title {
font-size: 1.2rem;
display: flex;
justify-content: center;
padding-bottom: 16px;
}
.controls {
display: flex;
justify-content: flex-end;
gap: 16px;
padding-top: 16px;
}
` `

5
net/web/src/session/details/useDetails.hook.js
View File

@ -27,6 +27,7 @@ export function useDetails() {
strings: {}, strings: {},
display: 'small', display: 'small',
menuStyle: {},
sealed: false, sealed: false,
contentKey: null, contentKey: null,
seals: null, seals: null,
@ -73,8 +74,8 @@ export function useDetails() {
}, [account.state.sealKey, conversation.state.channel?.data?.channelDetail]); }, [account.state.sealKey, conversation.state.channel?.data?.channelDetail]);
useEffect(() => { useEffect(() => {
const { strings, display } = settings.state; const { menuStyle, strings, display } = settings.state;
updateState({ strings, display }); updateState({ menuStyle, strings, display });
}, [settings.state]); }, [settings.state]);
useEffect(() => { useEffect(() => {

7
todo
View File

@ -1,9 +1,12 @@
details: details:
- back button
- dark style - dark style
- translation - translation
- action buttons - action hints
- delete modal
- members modal
- leave modal
- subject modal
calling: calling:
- dark style - dark style