External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(reply modal): change displayName from name field, style focused inputs, translate title

Browse Source
This commit is contained in:
plebeius.eth
2024-04-29 14:26:02 +02:00
parent 05cc3c4174
commit 1e5c675e95
37 changed files with 110 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/reply-modal/reply-modal.module.css
+8 -4
View File
@@ -38,17 +38,21 @@
background-image: var(--close-button-background-image);
}
.container input, .container textarea {
border: 1px solid #aaa;
font-family: Arial, Helvetica, sans-serif;
.container input[type="text"], .container textarea {
border: var(--post-form-field-input-border, revert);
font-family: var(--post-form-field-font-family, revert);
font-size: 10pt;
outline: medium none;
outline: var(--post-form-field-input-outline, revert);
width: 298px;
filter: var(--filter80);
padding: 2px;
margin-bottom: 1px;
}
.container input[type="text"]:focus, .container textarea:focus {
border: var(--post-form-field-input-focus-border, revert);
}
.content textarea {
vertical-align: top;
}
src/components/reply-modal/reply-modal.tsx
+32 -35
View File
@@ -1,9 +1,9 @@
import React, { useEffect, useRef } from 'react';
import { useEffect, useRef } from 'react';
import { useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Draggable from 'react-draggable';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import { useAccount } from '@plebbit/plebbit-react-hooks';
import { setAccount, useAccount } from '@plebbit/plebbit-react-hooks';
import { isValidURL } from '../../lib/utils/url-utils';
import useReply from '../../hooks/use-reply';
import useWindowWidth from '../../hooks/use-window-width';
@@ -63,41 +63,38 @@ const ReplyModal = ({ closeModal, parentCid }: ReplyModalProps) => {
}
}, [isMobile]);
const ReplyForm = React.memo(() => (
<div className={styles.replyForm}>
<div className={styles.name}>
<input type='text' defaultValue={displayName} placeholder={displayName ? undefined : _.capitalize(t('anonymous'))} />
</div>
<div className={styles.link}>
<input type='text' ref={urlRef} placeholder={_.capitalize(t('link'))} onChange={(e) => setContent.link(e.target.value)} />
</div>
<div className={styles.content}>
<textarea cols={48} rows={4} wrap='soft' ref={textRef} placeholder={_.capitalize(t('comment'))} onChange={(e) => setContent.content(e.target.value)} />
</div>
<div className={styles.footer}>
<button onClick={onPublishReply}>{t('reply')}</button>
</div>
</div>
));
const ModalTitle = () => (
<div className={`replyModalHandle ${styles.title}`}>
Reply to c/{parentCid && Plebbit.getShortCid(parentCid)}
<button
className={styles.closeIcon}
onClick={(e) => {
e.stopPropagation();
closeModal();
}}
title='close'
/>
</div>
);
const modalContent = (
<div className={styles.container} ref={nodeRef}>
<ModalTitle />
<ReplyForm />
<div className={`replyModalHandle ${styles.title}`}>
{t('reply_to_cid', { cid: `c/${parentCid && Plebbit.getShortCid(parentCid)}`, interpolation: { escapeValue: false } })}
<button
className={styles.closeIcon}
onClick={(e) => {
e.stopPropagation();
closeModal();
}}
title='close'
/>
</div>
<div className={styles.replyForm}>
<div className={styles.name}>
<input
type='text'
defaultValue={displayName}
placeholder={displayName ? undefined : _.capitalize(t('anonymous'))}
onChange={(e) => setAccount({ ...account, author: { ...account?.author, displayName: e.target.value } })}
/>
</div>
<div className={styles.link}>
<input type='text' ref={urlRef} placeholder={_.capitalize(t('link'))} onChange={(e) => setContent.link(e.target.value)} />
</div>
<div className={styles.content}>
<textarea cols={48} rows={4} wrap='soft' ref={textRef} placeholder={_.capitalize(t('comment'))} onChange={(e) => setContent.content(e.target.value)} />
</div>
<div className={styles.footer}>
<button onClick={onPublishReply}>{t('reply')}</button>
</div>
</div>
</div>
);