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(post form): add row for link type, add spoiler option

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-05-31 16:10:38 +02:00
parent c5d55a9dd5
commit 6223cb0b24
2 changed files with 41 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-form/post-form.module.css
+21 -4
View File
@@ -82,10 +82,27 @@
.linkType { .linkType {
font-weight: normal; font-weight: normal;
position: absolute; }
white-space: nowrap;
bottom: 3px; .linkType td {
padding-left: 3px; height: 20px;
padding-left: 2px;
}
.spoilerButton input[type="checkbox"] {
margin: 0 3px;
vertical-align: middle;
transform: translateY(-2px);
}
.spoilerButton td {
padding-top: 2px;
height: 20px;
padding-left: 2px;
}
.spoilerButton {
font-weight: normal;
} }
@media (max-width: 640px) { @media (max-width: 640px) {
src/components/post-form/post-form.tsx
+20 -9
View File
@@ -18,6 +18,7 @@ type SubmitState = {
title: string | undefined; title: string | undefined;
content: string | undefined; content: string | undefined;
link: string | undefined; link: string | undefined;
spoiler: boolean | undefined;
publishCommentOptions: PublishCommentOptions; publishCommentOptions: PublishCommentOptions;
setSubmitStore: (data: Partial<SubmitState>) => void; setSubmitStore: (data: Partial<SubmitState>) => void;
resetSubmitStore: () => void; resetSubmitStore: () => void;
@@ -30,14 +31,16 @@ const useSubmitStore = create<SubmitState>((set) => ({
title: undefined, title: undefined,
content: undefined, content: undefined,
link: undefined, link: undefined,
spoiler: undefined,
publishCommentOptions: {}, publishCommentOptions: {},
setSubmitStore: ({ subplebbitAddress, title, content, link }) => setSubmitStore: ({ subplebbitAddress, title, content, link, spoiler }) =>
set((state) => { set((state) => {
const nextState = { ...state }; const nextState = { ...state };
if (subplebbitAddress !== undefined) nextState.subplebbitAddress = subplebbitAddress; if (subplebbitAddress !== undefined) nextState.subplebbitAddress = subplebbitAddress;
if (title !== undefined) nextState.title = title || undefined; if (title !== undefined) nextState.title = title || undefined;
if (content !== undefined) nextState.content = content || undefined; if (content !== undefined) nextState.content = content || undefined;
if (link !== undefined) nextState.link = link || undefined; if (link !== undefined) nextState.link = link || undefined;
if (spoiler !== undefined) nextState.spoiler = spoiler || undefined;
nextState.publishCommentOptions = { nextState.publishCommentOptions = {
...nextState, ...nextState,
@@ -51,7 +54,7 @@ const useSubmitStore = create<SubmitState>((set) => ({
}; };
return nextState; return nextState;
}), }),
resetSubmitStore: () => set({ subplebbitAddress: undefined, title: undefined, content: undefined, link: undefined, publishCommentOptions: {} }), resetSubmitStore: () => set({ subplebbitAddress: undefined, title: undefined, content: undefined, link: undefined, spoiler: undefined, publishCommentOptions: {} }),
})); }));
export const LinkTypePreviewer = ({ link }: { link: string }) => { export const LinkTypePreviewer = ({ link }: { link: string }) => {
@@ -209,13 +212,21 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
isInPostView ? setContent.link(e.target.value) : setSubmitStore({ link: e.target.value }); isInPostView ? setContent.link(e.target.value) : setSubmitStore({ link: e.target.value });
}} }}
/> />
<span className={styles.linkType}> </td>
{url && ( </tr>
<> <tr className={styles.linkType}>
(<LinkTypePreviewer link={url} />) <td>file type</td>
</> <td>{url ? <LinkTypePreviewer link={url} /> : 'No link provided'}</td>
)} </tr>
</span> <tr className={styles.spoilerButton}>
<td>{t('options')}</td>
<td>
[
<label>
<input type='checkbox' onChange={(e) => (isInPostView ? setContent.spoiler(e.target.checked) : setSubmitStore({ spoiler: e.target.checked }))} />
Spoiler?
</label>
]
</td> </td>
</tr> </tr>
{(isInAllView || isInSubscriptionsView) && ( {(isInAllView || isInSubscriptionsView) && (