Merge branch 'main' into cr-3096/wrong-board-password-hint

public/locales/de/translation.json

@@ -82,7 +82,8 @@
     "openPrintView": "Druckansicht öffnen",
     "exportToClipboard": "Markdown in die Zwischenablage kopieren",
     "copyToClipboardSuccess": "Markdown kopiert!",
-    "hintHiddenColumns": "Die folgenden Spalten sind ausgeblendet und werden nicht exportiert:"
+    "hintHiddenColumns": "Die folgenden Spalten sind ausgeblendet und werden nicht exportiert:",
+    "hintHiddenNotes": "Die Kärtchen der anderen Teilnehmenden sind ausgeblendet und werden nicht exportiert."
   },
   "PrintView": {
     "Participants": "Teilnehmer",

public/locales/en/translation.json

@@ -82,7 +82,8 @@
     "openPrintView": "Open print view",
     "exportToClipboard": "Copy Markdown to Clipboard",
     "copyToClipboardSuccess": "Markdown copied!",
-    "hintHiddenColumns": "The following columns are hidden and will not be exported:"
+    "hintHiddenColumns": "The following columns are hidden and will not be exported:",
+    "hintHiddenNotes": "The notes of other participants are hidden and will not be exported."
   },
   "PrintView": {
     "Participants": "Participants",

src/components/SettingsDialog/ExportBoard/ExportBoard.tsx

@@ -1,5 +1,4 @@
 import classNames from "classnames";
-import {VFC} from "react";
 import {useTranslation} from "react-i18next";
 import {ReactComponent as ExportCSV} from "assets/icon-export-csv.svg";
 import {ReactComponent as ExportJSON} from "assets/icon-export-json.svg";
@@ -10,16 +9,15 @@ import {exportAsJSON, exportAsCSV, getMarkdownExport} from "utils/export";
 import {Toast} from "utils/Toast";
 import {TOAST_TIMER_SHORT} from "constants/misc";
 import {SettingsButton} from "../Components/SettingsButton";
-import {ExportHintHiddenColumns} from "./ExportHintHiddenColumns";
 import "./ExportBoard.scss";
 import "../SettingsDialog.scss";
+import ExportHintHiddenContent from "./ExportHintHiddenContent/ExportHintHiddenContent";
 
-export const ExportBoard: VFC = () => {
+export const ExportBoard = () => {
   const {t} = useTranslation();
 
   const boardId = useAppSelector((state) => state.board.data!.id);
   const boardName = useAppSelector((state) => state.board.data!.name);
-  const columns = useAppSelector((state) => state.columns);
 
   return (
     <div data-testid="export" className="settings-dialog__container">
@@ -72,7 +70,7 @@ export const ExportBoard: VFC = () => {
         />
       </div>
 
-      <ExportHintHiddenColumns columns={columns} />
+      <ExportHintHiddenContent />
     </div>
   );
 };

src/components/SettingsDialog/ExportBoard/ExportHintHiddenColumns/ExportHintHiddenColumns.scss → src/components/SettingsDialog/ExportBoard/ExportHintHiddenContent/ExportHintHiddenContent.scss

@@ -14,6 +14,7 @@ $list-style-type: "– ";
   grid-gap: $spacing--xs $spacing--base;
   margin-top: $spacing--lg;
   padding: 0 $spacing--base;
+  line-height: $line-height--medium;
 }
 
 .hint-hidden-columns__info-icon {

src/components/SettingsDialog/ExportBoard/ExportHintHiddenContent/ExportHintHiddenContent.tsx

@@ -0,0 +1,35 @@
+import {useTranslation} from "react-i18next";
+import {ReactComponent as InfoIcon} from "assets/icon-warning.svg";
+import {useAppSelector} from "store";
+import "./ExportHintHiddenContent.scss";
+
+const ExportHintHiddenContent = () => {
+  const {t} = useTranslation();
+
+  const hiddenColumns = useAppSelector((state) => state.columns.filter((col) => !col.visible));
+  const showNotesOfOtherParticipants = useAppSelector((state) => state.board.data?.showNotesOfOtherUsers);
+
+  if (hiddenColumns.length || !showNotesOfOtherParticipants) {
+    return (
+      <div className="hint-hidden-columns__grid-container">
+        <InfoIcon className="hint-hidden-columns__info-icon" />
+        {hiddenColumns.length > 0 && (
+          <>
+            <span className="hint-hidden-columns__info-text">{t("ExportBoardOption.hintHiddenColumns")}</span>
+            <div className="hint-hidden-columns__columns-list-container">
+              <ul className="hint-hidden-columns__columns-list">
+                {hiddenColumns.map((hiddenCol) => (
+                  <li key={hiddenCol.id}>{hiddenCol.name}</li>
+                ))}
+              </ul>
+            </div>
+          </>
+        )}
+        {!showNotesOfOtherParticipants && <span className="hint-hidden-columns__info-text">{t("ExportBoardOption.hintHiddenNotes")}</span>}
+      </div>
+    );
+  }
+  return null;
+};
+
+export default ExportHintHiddenContent;

src/components/SettingsDialog/ExportBoard/index.ts

@@ -1,2 +1 @@
 export * from "./ExportBoard";
-export * from "./ExportHintHiddenColumns";

src/components/ShareButton/ShareButton.scss

@@ -24,6 +24,10 @@
   &:active {
     transform: scale(1);
   }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px rgba($color-backlog-blue, 0.32);
+  }
 }
 
 .share-button > svg {
@@ -35,6 +39,10 @@
   .share-button {
     border: 2px solid $color-icon-light-blue;
     color: $color-icon-light-blue;
+
+    &:focus-visible {
+      box-shadow: 0 0 0 2px rgba($color-planning-pink, 0.48);
+    }
   }
 }