diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css index 4ae02b52..3f160eb2 100644 --- a/src/components/post-form/post-form.module.css +++ b/src/components/post-form/post-form.module.css @@ -82,10 +82,27 @@ .linkType { font-weight: normal; - position: absolute; - white-space: nowrap; - bottom: 3px; - padding-left: 3px; +} + +.linkType td { + 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) { diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index a9475d1c..08ec8525 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -18,6 +18,7 @@ type SubmitState = { title: string | undefined; content: string | undefined; link: string | undefined; + spoiler: boolean | undefined; publishCommentOptions: PublishCommentOptions; setSubmitStore: (data: Partial) => void; resetSubmitStore: () => void; @@ -30,14 +31,16 @@ const useSubmitStore = create((set) => ({ title: undefined, content: undefined, link: undefined, + spoiler: undefined, publishCommentOptions: {}, - setSubmitStore: ({ subplebbitAddress, title, content, link }) => + setSubmitStore: ({ subplebbitAddress, title, content, link, spoiler }) => set((state) => { const nextState = { ...state }; if (subplebbitAddress !== undefined) nextState.subplebbitAddress = subplebbitAddress; if (title !== undefined) nextState.title = title || undefined; if (content !== undefined) nextState.content = content || undefined; if (link !== undefined) nextState.link = link || undefined; + if (spoiler !== undefined) nextState.spoiler = spoiler || undefined; nextState.publishCommentOptions = { ...nextState, @@ -51,7 +54,7 @@ const useSubmitStore = create((set) => ({ }; 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 }) => { @@ -209,13 +212,21 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => { isInPostView ? setContent.link(e.target.value) : setSubmitStore({ link: e.target.value }); }} /> - - {url && ( - <> - () - - )} - + + + + file type + {url ? : 'No link provided'} + + + {t('options')} + + [ + + ] {(isInAllView || isInSubscriptionsView) && (