diff --git a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx index c8150f04..cae2606c 100644 --- a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx +++ b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx @@ -8,10 +8,9 @@ import { useLocalize } from '../../../context/localize' import { Modal } from '../../Nav/Modal' import { Menu } from './Menu' import type { MenuItem } from './Menu/Menu' -import { hideModal, showModal } from '../../../stores/ui' +import { showModal } from '../../../stores/ui' import { UploadModalContent } from '../UploadModalContent' import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler' -import { imageProxy } from '../../../utils/imageProxy' import { UploadedFile } from '../../../pages/types' import { renderUploadedImage } from '../../../utils/renderUploadedImage' diff --git a/src/components/Editor/SimplifiedEditor.tsx b/src/components/Editor/SimplifiedEditor.tsx index afed92d2..30de5cc4 100644 --- a/src/components/Editor/SimplifiedEditor.tsx +++ b/src/components/Editor/SimplifiedEditor.tsx @@ -30,7 +30,6 @@ import { UploadedFile } from '../../pages/types' import { Figure } from './extensions/Figure' import { Image } from '@tiptap/extension-image' import { Figcaption } from './extensions/Figcaption' -import { useOutsideClickHandler } from '../../utils/useOutsideClickHandler' type Props = { initialContent?: string diff --git a/src/components/TableOfContents/TableOfContents.tsx b/src/components/TableOfContents/TableOfContents.tsx index 70af55f8..c5d5a5f8 100644 --- a/src/components/TableOfContents/TableOfContents.tsx +++ b/src/components/TableOfContents/TableOfContents.tsx @@ -1,4 +1,4 @@ -import { For, Show, createSignal, createEffect, on, onMount } from 'solid-js' +import { For, Show, createSignal, createEffect, on } from 'solid-js' import { clsx } from 'clsx' import { DEFAULT_HEADER_OFFSET } from '../../stores/router' diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx index a19ba586..4658f545 100644 --- a/src/components/Views/Edit.tsx +++ b/src/components/Views/Edit.tsx @@ -15,7 +15,7 @@ import { AudioUploader } from '../Editor/AudioUploader' import { slugify } from '../../utils/slugify' import { SolidSwiper } from '../_shared/SolidSwiper' import { DropArea } from '../_shared/DropArea' -import { LayoutType, MediaItem, UploadedFile } from '../../pages/types' +import { LayoutType, MediaItem } from '../../pages/types' import { clone } from '../../utils/clone' import deepEqual from 'fast-deep-equal' import { AutoSaveNotice } from '../Editor/AutoSaveNotice' diff --git a/src/components/_shared/Button/Button.tsx b/src/components/_shared/Button/Button.tsx index ac8f744e..42d7d5ec 100644 --- a/src/components/_shared/Button/Button.tsx +++ b/src/components/_shared/Button/Button.tsx @@ -9,7 +9,7 @@ type Props = { type?: 'submit' | 'button' loading?: boolean disabled?: boolean - onClick?: () => void + onClick?: (event?: MouseEvent) => void class?: string ref?: HTMLButtonElement | ((el: HTMLButtonElement) => void) } diff --git a/src/components/_shared/FloatingPanel/FloatingPanel.module.scss b/src/components/_shared/FloatingPanel/FloatingPanel.module.scss new file mode 100644 index 00000000..b21e0326 --- /dev/null +++ b/src/components/_shared/FloatingPanel/FloatingPanel.module.scss @@ -0,0 +1,32 @@ +.PanelWrapper { + position: fixed; + bottom: 20px; + left: 0; + right: 0; + + display: none; + align-items: center; + justify-content: space-between; + + max-width: 430px; + width: auto; + height: auto; + + margin: 0 auto; + padding: 14px; + + background-color: var(--background-color); + border: 2px solid black; + + @include media-breakpoint-down(sm) { + flex-wrap: wrap; + + input { + min-width: 250px; + } + } +} + +.PanelWrapperVisible { + display: flex; +} diff --git a/src/components/_shared/FloatingPanel/FloatingPanel.tsx b/src/components/_shared/FloatingPanel/FloatingPanel.tsx new file mode 100644 index 00000000..3bc7de66 --- /dev/null +++ b/src/components/_shared/FloatingPanel/FloatingPanel.tsx @@ -0,0 +1,35 @@ +import { clsx } from 'clsx' + +import { Button } from '../Button' + +import styles from './FloatingPanel.module.scss' + +type Props = { + isVisible: boolean + confirmTitle: string + confirmAction: () => void + declineTitle: string + declineAction: () => void +} + +export default (props: Props) => { + return ( +
+
+ ) +} diff --git a/src/pages/profile/profileSettings.page.tsx b/src/pages/profile/profileSettings.page.tsx index 6b086435..838d50d6 100644 --- a/src/pages/profile/profileSettings.page.tsx +++ b/src/pages/profile/profileSettings.page.tsx @@ -9,7 +9,7 @@ import { useProfileForm } from '../../context/profile' import { validateUrl } from '../../utils/validateUrl' import { createFileUploader } from '@solid-primitives/upload' import { useSession } from '../../context/session' -import { Button } from '../../components/_shared/Button' +import FloatingPanel from '../../components/_shared/FloatingPanel/FloatingPanel' import { useSnackbar } from '../../context/snackbar' import { useLocalize } from '../../context/localize' import { handleFileUpload } from '../../utils/handleFileUpload' @@ -21,8 +21,8 @@ export const ProfileSettingsPage = () => { const { t } = useLocalize() const [addLinkForm, setAddLinkForm] = createSignal(false) const [incorrectUrl, setIncorrectUrl] = createSignal(false) - const [isSubmitting, setIsSubmitting] = createSignal(false) const [isUserpicUpdating, setIsUserpicUpdating] = createSignal(false) + const [isFloatingPanelVisible, setIsFloatingPanelVisible] = createSignal(false) const { actions: { showSnackbar } @@ -31,6 +31,7 @@ export const ProfileSettingsPage = () => { const { actions: { loadSession } } = useSession() + const { form, updateFormField, submit, slugError } = useProfileForm() const [prevForm, setPrevForm] = createStore(clone(form)) @@ -45,8 +46,6 @@ export const ProfileSettingsPage = () => { const handleSubmit = async (event: Event) => { event.preventDefault() - setIsSubmitting(true) - try { await submit(form) setPrevForm(clone(form)) @@ -56,7 +55,6 @@ export const ProfileSettingsPage = () => { } loadSession() - setIsSubmitting(false) } const { selectFiles } = createFileUploader({ multiple: false, accept: 'image/*' }) @@ -68,6 +66,7 @@ export const ProfileSettingsPage = () => { const result = await handleFileUpload(uploadFile) updateFormField('userpic', result.url) setIsUserpicUpdating(false) + setIsFloatingPanelVisible(true) } catch (error) { console.error('[upload avatar] error', error) } @@ -92,6 +91,11 @@ export const ProfileSettingsPage = () => { onCleanup(() => window.removeEventListener('beforeunload', handleBeforeUnload)) }) + const handleSaveProfile = () => { + setIsFloatingPanelVisible(false) + setPrevForm(clone(form)) + } + return ( @@ -107,7 +111,15 @@ export const ProfileSettingsPage = () => {

{t('Profile settings')}

{t('Here you can customize your profile the way you want.')}

-
+ { + if (!deepEqual(form, prevForm)) { + setIsFloatingPanelVisible(true) + } + }} + enctype="multipart/form-data" + >

{t('Userpic')}

{

-