diff --git a/src/components/Views/Edit.module.scss b/src/components/Views/Edit.module.scss index cfd06498..37c78486 100644 --- a/src/components/Views/Edit.module.scss +++ b/src/components/Views/Edit.module.scss @@ -101,12 +101,20 @@ } .scrollTopButton { + pointer-events: none; cursor: pointer; left: 2rem; position: sticky; top: calc(100vh - 40px); width: 2.8rem; z-index: 2; + opacity: 0; + transition: opacity 0.3s ease-in-out; + + &.visible { + opacity: 1; + pointer-events: all; + } @include media-breakpoint-down(md) { display: none; diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx index 1eadc8a1..a492dd29 100644 --- a/src/components/Views/Edit.tsx +++ b/src/components/Views/Edit.tsx @@ -1,4 +1,4 @@ -import { createSignal, onMount, Show } from 'solid-js' +import { createSignal, onCleanup, onMount, Show } from 'solid-js' import { useLocalize } from '../../context/localize' import { clsx } from 'clsx' import styles from './Edit.module.scss' @@ -19,6 +19,7 @@ type EditViewProps = { export const EditView = (props: EditViewProps) => { const { t } = useLocalize() + const [isScrolled, setIsScrolled] = createSignal(false) const [topics, setTopics] = createSignal(null) const { page } = useRouter() @@ -46,6 +47,17 @@ export const EditView = (props: EditViewProps) => { setTopics(allTopics) }) + onMount(() => { + const handleScroll = () => { + setIsScrolled(window.scrollY > 0) + } + + window.addEventListener('scroll', handleScroll, { passive: true }) + onCleanup(() => { + window.removeEventListener('scroll', handleScroll) + }) + }) + const handleTitleInputChange = (e) => { const title = e.currentTarget.value setForm('title', title) @@ -78,7 +90,12 @@ export const EditView = (props: EditViewProps) => { return ( <> - diff --git a/src/context/editor.tsx b/src/context/editor.tsx index d3c4595f..740bdcc8 100644 --- a/src/context/editor.tsx +++ b/src/context/editor.tsx @@ -79,7 +79,8 @@ export const EditorProvider = (props: { children: JSX.Element }) => { mainTopic: form.selectedTopics[0]?.slug || 'society', slug: form.slug, subtitle: form.subtitle, - title: form.title + title: form.title, + cover: form.coverImageUrl } }) return true diff --git a/src/graphql/types.gen.ts b/src/graphql/types.gen.ts index d671c00c..d4f774e1 100644 --- a/src/graphql/types.gen.ts +++ b/src/graphql/types.gen.ts @@ -585,14 +585,12 @@ export type ShoutInput = { authors?: InputMaybe>> body?: InputMaybe community?: InputMaybe + cover?: InputMaybe mainTopic?: InputMaybe slug?: InputMaybe subtitle?: InputMaybe title?: InputMaybe topics?: InputMaybe>> - versionOf?: InputMaybe - visibleForRoles?: InputMaybe>> - visibleForUsers?: InputMaybe>> } export type ShoutsFilterBy = {