Skip to content

Commit

Permalink
Merge pull request #3395 from serlo/3356-cannot-scroll-page-after-clo…
Browse files Browse the repository at this point in the history
…sing-modal

fix(geogebra): aovid using conditional rendering for modal
  • Loading branch information
Entkenntnis authored Feb 15, 2024
2 parents 6fa126a + 540446e commit 38fc900
Show file tree
Hide file tree
Showing 11 changed files with 200 additions and 230 deletions.
47 changes: 22 additions & 25 deletions packages/editor/src/plugins/audio/toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,32 +57,29 @@ export const AudioToolbar = ({
>
{audioStrings.audioUrl} <FaIcon icon={faPencilAlt} />
</button>
{/* In the future we want a popovers per setting, but this is faster for now */}
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">{audioStrings.title}</h3>
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">{audioStrings.title}</h3>

<div className="mx-side mb-3">
<EditorInput
autoFocus
label={`${audioStrings.audioUrl}: `}
value={state.src.value}
onChange={(e) => {
state.src.set(e.target.value)
}}
inputWidth="100%"
width="100%"
onKeyDown={handleInputEnter}
placeholder="voca.ro/audio-id"
className="block"
/>
</div>
</ModalWithCloseButton>
) : null}
<div className="mx-side mb-3">
<EditorInput
autoFocus
label={`${audioStrings.audioUrl}: `}
value={state.src.value}
onChange={(e) => {
state.src.set(e.target.value)
}}
inputWidth="100%"
width="100%"
onKeyDown={handleInputEnter}
placeholder="voca.ro/audio-id"
className="block"
/>
</div>
</ModalWithCloseButton>
</>
}
pluginControls={<PluginDefaultTools pluginId={id} />}
Expand Down
45 changes: 21 additions & 24 deletions packages/editor/src/plugins/geogebra/toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,31 +33,28 @@ export const GeogebraToolbar = ({
>
{geogebraStrings.chooseApplet} <FaIcon icon={faPencilAlt} />
</button>
{/* In the future we want a popovers per setting, but this is faster for now */}
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">
{editorStrings.edtrIo.settings}: {geogebraStrings.title}
</h3>
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">
{editorStrings.edtrIo.settings}: {geogebraStrings.title}
</h3>

<div className="mx-side mb-3">
<EditorInput
autoFocus
label={`${geogebraStrings.urlOrId}: `}
placeholder="z.B. N5ktHvtW"
value={state.value}
onChange={(e) => state.set(e.target.value)}
inputWidth="100%"
width="100%"
className="block"
/>
</div>
</ModalWithCloseButton>
) : null}
<div className="mx-side mb-3">
<EditorInput
autoFocus
label={`${geogebraStrings.urlOrId}: `}
placeholder="z.B. N5ktHvtW"
value={state.value}
onChange={(e) => state.set(e.target.value)}
inputWidth="100%"
width="100%"
className="block"
/>
</div>
</ModalWithCloseButton>
</>
}
pluginControls={<PluginDefaultTools pluginId={id} />}
Expand Down
26 changes: 12 additions & 14 deletions packages/editor/src/plugins/image/toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,21 +33,19 @@ export const ImageToolbar = (
>
{editorStrings.edtrIo.settings} <FaIcon icon={faCog} />
</button>
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">
{editorStrings.edtrIo.settings}: {imageStrings.title}
</h3>
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">
{editorStrings.edtrIo.settings}: {imageStrings.title}
</h3>

<div className="mx-side mb-3">
<SettingsModalControls state={props.state} />
</div>
</ModalWithCloseButton>
) : null}
<div className="mx-side mb-3">
<SettingsModalControls state={props.state} />
</div>
</ModalWithCloseButton>

<UploadButton {...props} />
</>
Expand Down
49 changes: 23 additions & 26 deletions packages/editor/src/plugins/injection/toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,33 +32,30 @@ export const InjectionToolbar = ({
>
{injectionStrings.serloId} <FaIcon icon={faPencilAlt} />
</button>
{/* In the future we want a popovers per setting, but this is faster for now */}
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">{injectionStrings.title}</h3>
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">{injectionStrings.title}</h3>

<div className="mx-side mb-3">
<EditorInput
autoFocus
label={`${injectionStrings.serloId}: `}
placeholder={injectionStrings.placeholder}
inputMode="numeric"
pattern="\d+"
value={state.value}
onChange={(e) =>
state.set(e.target.value.replace(/[^0-9]/g, ''))
}
width="100%"
inputWidth="100%"
className="block"
/>
</div>
</ModalWithCloseButton>
) : null}
<div className="mx-side mb-3">
<EditorInput
autoFocus
label={`${injectionStrings.serloId}: `}
placeholder={injectionStrings.placeholder}
inputMode="numeric"
pattern="\d+"
value={state.value}
onChange={(e) =>
state.set(e.target.value.replace(/[^0-9]/g, ''))
}
width="100%"
inputWidth="100%"
className="block"
/>
</div>
</ModalWithCloseButton>
</>
}
pluginControls={<PluginDefaultTools pluginId={id} />}
Expand Down
24 changes: 11 additions & 13 deletions packages/editor/src/plugins/multimedia/toolbar/toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,20 +28,18 @@ export const MultimediaToolbar = ({ id, children }: MultimediaToolbarProps) => {
>
{editorStrings.edtrIo.settings} <FaIcon icon={faCog} />
</button>
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">
{editorStrings.edtrIo.settings}:{' '}
{editorStrings.plugins.multimedia.title}
</h3>
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">
{editorStrings.edtrIo.settings}:{' '}
{editorStrings.plugins.multimedia.title}
</h3>

<div className="mx-side mb-3">{children}</div>
</ModalWithCloseButton>
) : null}
<div className="mx-side mb-3">{children}</div>
</ModalWithCloseButton>
</>
}
pluginControls={<PluginDefaultTools pluginId={id} />}
Expand Down
16 changes: 7 additions & 9 deletions packages/editor/src/plugins/page-layout/toolbar/toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,13 @@ export const PageLayoutToolbar = ({
>
{pageLayoutStrings.chooseRatio} <FaIcon icon={faPencilAlt} />
</button>
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<LayoutChooser {...state} />
</ModalWithCloseButton>
) : null}
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<LayoutChooser {...state} />
</ModalWithCloseButton>
</>
}
/>
Expand Down
36 changes: 17 additions & 19 deletions packages/editor/src/plugins/serlo-template-plugins/applet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -86,25 +86,23 @@ function AppletTypeEditor(props: EditorPluginProps<AppletTypePluginState>) {
{content.render()}

<ToolbarMain showSubscriptionOptions {...props.state} />
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<div className="mx-side mb-3 mt-12">
<SettingsTextarea
autoFocus
label={appletStrings.seoTitle}
state={meta_title}
/>
<SettingsTextarea
label={appletStrings.seoDesc}
state={meta_description}
/>
</div>
</ModalWithCloseButton>
) : null}
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<div className="mx-side mb-3 mt-12">
<SettingsTextarea
autoFocus
label={appletStrings.seoTitle}
state={meta_title}
/>
<SettingsTextarea
label={appletStrings.seoDesc}
state={meta_description}
/>
</div>
</ModalWithCloseButton>
</>
)
}
36 changes: 17 additions & 19 deletions packages/editor/src/plugins/serlo-template-plugins/article.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,25 +88,23 @@ function ArticleTypeEditor(props: EditorPluginProps<ArticleTypePluginState>) {
<section itemProp="articleBody">{content.render()}</section>

<ToolbarMain showSubscriptionOptions {...props.state} />
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<div className="mx-side mb-3 mt-12">
<SettingsTextarea
label={articleStrings.seoTitle}
state={meta_title}
autoFocus
/>
<SettingsTextarea
label={articleStrings.seoDesc}
state={meta_description}
/>
</div>
</ModalWithCloseButton>
) : null}
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<div className="mx-side mb-3 mt-12">
<SettingsTextarea
label={articleStrings.seoTitle}
state={meta_title}
autoFocus
/>
<SettingsTextarea
label={articleStrings.seoDesc}
state={meta_description}
/>
</div>
</ModalWithCloseButton>
</>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -119,21 +119,19 @@ function CourseTypeEditor(props: EditorPluginProps<CourseTypePluginState>) {
</div>
<ToolbarMain showSubscriptionOptions {...props.state} />
</article>
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="max-w-xl"
>
<div className="mx-side mb-3 mt-12">
<SettingsTextarea
autoFocus
label={courseStrings.seoDesc}
state={meta_description}
/>
</div>
</ModalWithCloseButton>
) : null}
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="max-w-xl"
>
<div className="mx-side mb-3 mt-12">
<SettingsTextarea
autoFocus
label={courseStrings.seoDesc}
state={meta_description}
/>
</div>
</ModalWithCloseButton>
</>
)

Expand Down
Loading

0 comments on commit 38fc900

Please sign in to comment.