Merge pull request #3395 from serlo/3356-cannot-scroll-page-after-clo…

…sing-modal fix(geogebra): aovid using conditional rendering for modal
serlo · Feb 15, 2024 · 38fc900 · 38fc900
2 parents 6fa126a + 540446e
commit 38fc900
Show file tree

Hide file tree

Showing 11 changed files with 200 additions and 230 deletions.
diff --git a/packages/editor/src/plugins/audio/toolbar.tsx b/packages/editor/src/plugins/audio/toolbar.tsx
@@ -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} />}

diff --git a/packages/editor/src/plugins/geogebra/toolbar.tsx b/packages/editor/src/plugins/geogebra/toolbar.tsx
@@ -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} />}

diff --git a/packages/editor/src/plugins/image/toolbar.tsx b/packages/editor/src/plugins/image/toolbar.tsx
@@ -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} />
         </>

diff --git a/packages/editor/src/plugins/injection/toolbar.tsx b/packages/editor/src/plugins/injection/toolbar.tsx
@@ -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} />}

diff --git a/packages/editor/src/plugins/multimedia/toolbar/toolbar.tsx b/packages/editor/src/plugins/multimedia/toolbar/toolbar.tsx
@@ -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} />}

diff --git a/packages/editor/src/plugins/page-layout/toolbar/toolbar.tsx b/packages/editor/src/plugins/page-layout/toolbar/toolbar.tsx
@@ -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>
         </>
       }
     />

diff --git a/packages/editor/src/plugins/serlo-template-plugins/applet.tsx b/packages/editor/src/plugins/serlo-template-plugins/applet.tsx
@@ -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>
     </>
   )
 }
diff --git a/packages/editor/src/plugins/serlo-template-plugins/article.tsx b/packages/editor/src/plugins/serlo-template-plugins/article.tsx
@@ -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>
     </>
   )
 }
diff --git a/packages/editor/src/plugins/serlo-template-plugins/course/course.tsx b/packages/editor/src/plugins/serlo-template-plugins/course/course.tsx
@@ -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>
     </>
   )