Merge pull request #4362 from serlo/share-copy-button-add-explanation

feat(copy content button): make "de" only and add some explanation
serlo · Dec 19, 2024 · 66a7333 · 66a7333
2 parents 7b96719 + b603da5
commit 66a7333
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 17 deletions.
diff --git a/apps/web/src/components/pages/user/profile.tsx b/apps/web/src/components/pages/user/profile.tsx
@@ -86,7 +86,7 @@ export const Profile: NextPage<ProfileProps> = ({ userData }) => {
             <ProfileBadges userData={userData} date={date} />
           </div>
           <div className="serlo-p mt-5 w-full text-1.5xl [grid-area:motivation] sm:mt-0">
-            {motivation && <>&quot;{motivation}&quot;</>}
+            {motivation && <>&bdquo;{motivation}&ldquo;</>}
             {isOwnProfile &&
               !isNewlyRegisteredUser &&
               renderEditMotivationLink()}

diff --git a/apps/web/src/components/user-tools/share/share-modal.tsx b/apps/web/src/components/user-tools/share/share-modal.tsx
@@ -91,11 +91,14 @@ export function ShareModal({
         )
       }
       await navigator.clipboard.writeText(JSON.stringify(data))
-      showToastNotice('👌 ' + strings.share.copyContentSuccess, 'success')
+      showToastNotice('👌 Erfolgreich kopiert', 'success')
     } catch (e) {
       // eslint-disable-next-line no-console
       console.error(e)
-      showToastNotice('❌ ' + strings.share.copyContentFailed, 'warning')
+      showToastNotice(
+        '❌ Leider gab es ein Problem beim kopieren. Tut uns leid.',
+        'warning'
+      )
     }
   }
 
@@ -105,7 +108,7 @@ export function ShareModal({
 
   const contentCopy = [
     {
-      title: strings.share.copyContent,
+      title: 'Inhalt kopieren',
       icon: faFileText,
       onClick: () => copyContentToClipboard(),
     },
@@ -183,12 +186,6 @@ export function ShareModal({
         <QRCodeSVG value={shareUrl} fgColor={colors.brand} />
       </div>
       {renderShareInput()}
-      {showCopyContent && (
-        <>
-          <hr className="mx-side my-4" />
-          {renderButtons(contentCopy)}
-        </>
-      )}
       <hr className="mx-side my-4" />
       {renderButtons(lmsData)}
       <hr className="mx-side my-4" />
@@ -199,6 +196,24 @@ export function ShareModal({
           {renderButtons(pdfData)}
         </>
       )}
+
+      {showCopyContent ? ( // "de" only
+        <>
+          <hr className="mx-side my-4" />
+          <h3 className="serlo-h3 my-4">Inhalt zum Bearbeiten kopieren</h3>
+          <p className="serlo-p mb-0 text-base">
+            Du kannst diesen Inhalt in jedem Serlo Editor weiterbearbeiten: Hier
+            auf <b>serlo.org</b> und in LMS wie Moodle, Edu-sharing oder
+            itslearning, die den Serlo Editor eingebaut haben.
+            <br />
+            <br />
+            Dazu einfach auf unten auf &bdquo;Inhalt kopieren&ldquo; klicken,
+            einen Moment warten und dann Inhalt im Editor Textfeld Deines LMS
+            einfügen.
+          </p>
+          {renderButtons(contentCopy)}
+        </>
+      ) : null}
     </ModalWithCloseButton>
   )
 

diff --git a/apps/web/src/components/user-tools/share/share.tsx b/apps/web/src/components/user-tools/share/share.tsx
@@ -15,7 +15,7 @@ const ShareModal = dynamic<ShareModalProps>(() =>
 )
 
 export function Share({ data, aboveContent }: MoreAuthorToolsProps) {
-  const { strings } = useInstanceData()
+  const { lang, strings } = useInstanceData()
   const [shareOpen, setShareOpen] = useState(false)
 
   const showPdf =
@@ -29,6 +29,7 @@ export function Share({ data, aboveContent }: MoreAuthorToolsProps) {
     ].includes(data.typename as UuidType)
 
   const showCopyContent =
+    lang === 'de' &&
     data &&
     [UuidType.Article, UuidType.ExerciseGroup, UuidType.Exercise].includes(
       data.typename as UuidType

diff --git a/apps/web/src/components/user/event.tsx b/apps/web/src/components/user/event.tsx
@@ -141,7 +141,7 @@ export function Event({
             ),
             comment: (
               <p className="font-normal">
-                &quot;{event.thread.thread.nodes[0].content}&quot;
+                &bdquo;{event.thread.thread.nodes[0].content}&ldquo;
               </p>
             ),
           })

diff --git a/apps/web/src/data/en/index.ts b/apps/web/src/data/en/index.ts
@@ -97,9 +97,6 @@ export const instanceData = {
       copyLink: 'Copy link',
       copySuccess: 'Link copied!',
       copyFailed: 'Error copying link!',
-      copyContent: 'Copy content',
-      copyContentSuccess: 'Content copied!',
-      copyContentFailed: 'Error copying content!',
       close: 'Close',
       pdf: 'Download as PDF',
       pdfNoSolutions: 'PDF without solutions',

diff --git a/apps/web/src/serlo-editor-integration/h5p/index.tsx b/apps/web/src/serlo-editor-integration/h5p/index.tsx
@@ -130,7 +130,7 @@ function H5pEditor({ state }: H5pProps) {
                 Registriere dich mit deiner E-Mail-Adresse und melde dich an.
               </li>
               <li>
-                Klicke auf &quot;Neuen Inhalt erstellen&quot; und wähle eines
+                Klicke auf &bdquo;Neuen Inhalt erstellen&ldquo; und wähle eines
                 der folgenden Inhaltstypen:
                 <ul className="serlo-ul">
                   {Object.values(availableH5pExercises).map((exercise) => (
@@ -140,7 +140,7 @@ function H5pEditor({ state }: H5pProps) {
               </li>
               <li>
                 Erstelle deinen Inhalt, speichere ihn und klicke dann auf
-                &quot;Inhalt bereitstellen&quot;.
+                &bdquo;Inhalt bereitstellen&ldquo;.
               </li>
               <li>Füge die Verknüpfung zur Bereitstellung hier ein:</li>
             </ul>