Merge pull request #3255 from serlo/plugin-article-add-remove-button

feat(plugin-article): add button to remove related exercises
serlo · Jan 10, 2024 · 83c64e4 · 83c64e4
2 parents 6794b9f + 88a5c0a
commit 83c64e4
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 10 deletions.
diff --git a/apps/web/src/assets-webkit/styles/serlo-tailwind.css b/apps/web/src/assets-webkit/styles/serlo-tailwind.css
@@ -567,3 +567,9 @@ main b {
 body {
   @apply tracking-slightly-tighter;
 }
+
+/* stop body from scrolling when a modal is open */
+body.ReactModal__Body--open {
+  overflow: hidden;
+  height: 100vh;
+}
diff --git a/packages/editor/src/plugins/article/add-modal/article-add-modal.tsx b/packages/editor/src/plugins/article/add-modal/article-add-modal.tsx
@@ -85,7 +85,7 @@ export function ArticleAddModal({
     <ModalWithCloseButton
       isOpen={open}
       onCloseClick={() => setModalOpen(false)}
-      className="top-8 translate-y-0"
+      className="top-8 max-h-[90vh] w-auto translate-y-0 overflow-y-scroll"
     >
       <h3 className="serlo-h3 mb-4 mt-5">{articleStrings.addModal.title}</h3>
       <div className="mx-side">

diff --git a/packages/editor/src/plugins/article/editor.tsx b/packages/editor/src/plugins/article/editor.tsx
@@ -1,13 +1,18 @@
+import { EditorTooltip } from '@editor/editor-ui/editor-tooltip'
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 import { useEditorStrings } from '@serlo/frontend/src/contexts/logged-in-data-context'
 import { useState } from 'react'
 
 import type { ArticleProps } from '.'
 import { ArticleAddModal } from './add-modal/article-add-modal'
+import { buttonClass } from './const/button-class'
 import { ArticleExercises } from './editor-renderer/article-exercises'
 import { ArticleRelatedContentSection } from './editor-renderer/article-related-content-section'
 import { ArticleSources } from './editor-renderer/article-sources'
 import { ArticleRenderer } from './renderer'
 import { SerloAddButton } from '../../plugin/helpers/serlo-editor-button'
+import { FaIcon } from '@/components/fa-icon'
+import { cn } from '@/helper/cn'
 
 export function ArticleEditor({ state }: ArticleProps) {
   const {
@@ -20,7 +25,8 @@ export function ArticleEditor({ state }: ArticleProps) {
   } = state
   const [modalOpen, setModalOpen] = useState(false)
 
-  const modalStrings = useEditorStrings().templatePlugins.article.addModal
+  const articleStrings = useEditorStrings().templatePlugins.article
+  const modalStrings = articleStrings.addModal
 
   return (
     <>
@@ -35,14 +41,18 @@ export function ArticleEditor({ state }: ArticleProps) {
         }
         exercisesFolder={
           <>
-            <a
-              className="serlo-link font-bold"
-              href={`/${exerciseFolder.id.value}`}
-            >
-              {exerciseFolder.title.value}
-            </a>{' '}
-            <span className="-ml-1 -mt-3 inline-block">
-              {renderButton(modalStrings.buttonExFolder, true)}
+            {exerciseFolder.id.value ? (
+              <>
+                <a
+                  className="serlo-link mr-side font-bold"
+                  href={`/${exerciseFolder.id.value}`}
+                >
+                  {exerciseFolder.title.value}
+                </a>{' '}
+              </>
+            ) : null}
+            <span className="-ml-side -mt-3 inline-block">
+              {renderExerciseFolderButton()}
             </span>
           </>
         }
@@ -78,4 +88,21 @@ export function ArticleEditor({ state }: ArticleProps) {
       />
     )
   }
+
+  function renderExerciseFolderButton() {
+    return exerciseFolder.id.value ? (
+      <button
+        onClick={() => {
+          exerciseFolder.id.set('')
+          exerciseFolder.title.set('')
+        }}
+        className={cn(buttonClass, 'serlo-tooltip-trigger')}
+      >
+        <EditorTooltip text={articleStrings.removeLabel} />
+        <FaIcon icon={faTrashAlt} aria-hidden="true" />
+      </button>
+    ) : (
+      renderButton(modalStrings.buttonExFolder, true)
+    )
+  }
 }