feat: show less when memo expanded (#4143)

* Added show less action and language files * Renaming type as suggested in pr review
usememos · Nov 24, 2024 · 54ee2bf · 54ee2bf
1 parent 2a1c0bb
commit 54ee2bf
Show file tree

Hide file tree

Showing 21 changed files with 35 additions and 7 deletions.
diff --git a/web/src/components/MemoContent/index.tsx b/web/src/components/MemoContent/index.tsx
@@ -26,13 +26,15 @@ interface Props {
   onDoubleClick?: (e: React.MouseEvent) => void;
 }
 
+type ContentCompactView = "ALL" | "SNIPPET";
+
 const MemoContent: React.FC<Props> = (props: Props) => {
   const { className, contentClassName, nodes, memoName, embeddedMemos, onClick, onDoubleClick } = props;
   const t = useTranslate();
   const currentUser = useCurrentUser();
   const memoStore = useMemoStore();
   const memoContentContainerRef = useRef<HTMLDivElement>(null);
-  const [showCompactMode, setShowCompactMode] = useState<boolean>(false);
+  const [showCompactMode, setShowCompactMode] = useState<ContentCompactView | undefined>(undefined);
   const memo = memoName ? memoStore.getMemoByName(memoName) : null;
   const allowEdit = !props.readonly && memo && (currentUser?.name === memo.creator || isSuperUser(currentUser));
 
@@ -46,7 +48,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
     }
 
     if ((memoContentContainerRef.current as HTMLDivElement).getBoundingClientRect().height > MAX_DISPLAY_HEIGHT) {
-      setShowCompactMode(true);
+      setShowCompactMode("ALL");
     }
   }, []);
 
@@ -64,6 +66,10 @@ const MemoContent: React.FC<Props> = (props: Props) => {
 
   let prevNode: Node | null = null;
   let skipNextLineBreakFlag = false;
+  const compactStates = {
+    ALL: { text: t("memo.show-more"), nextState: "SNIPPET" },
+    SNIPPET: { text: t("memo.show-less"), nextState: "ALL" },
+  };
 
   return (
     <RendererContext.Provider
@@ -80,7 +86,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
           ref={memoContentContainerRef}
           className={clsx(
             "relative w-full max-w-full word-break text-base leading-snug space-y-2 whitespace-pre-wrap",
-            showCompactMode && "line-clamp-6 max-h-60",
+            showCompactMode == "ALL" && "line-clamp-6 max-h-60",
             contentClassName,
           )}
           onClick={handleMemoContentClick}
@@ -95,17 +101,19 @@ const MemoContent: React.FC<Props> = (props: Props) => {
             skipNextLineBreakFlag = true;
             return <Renderer key={`${node.type}-${index}`} index={String(index)} node={node} />;
           })}
-          {showCompactMode && (
+          {showCompactMode == "ALL" && (
             <div className="absolute bottom-0 left-0 w-full h-12 bg-gradient-to-b from-transparent dark:to-zinc-800 to-white pointer-events-none"></div>
           )}
         </div>
-        {showCompactMode && (
+        {showCompactMode != undefined && (
           <div className="w-full mt-1">
             <span
               className="w-auto flex flex-row justify-start items-center cursor-pointer text-sm text-blue-600 dark:text-blue-400 hover:opacity-80"
-              onClick={() => setShowCompactMode(false)}
+              onClick={() => {
+                setShowCompactMode(compactStates[showCompactMode].nextState as ContentCompactView);
+              }}
             >
-              <span>{t("memo.show-more")}</span>
+              {compactStates[showCompactMode].text}
             </span>
           </div>
         )}

diff --git a/web/src/locales/en.json b/web/src/locales/en.json
@@ -109,6 +109,7 @@
     "no-archived-memos": "No archived memos.",
     "search-placeholder": "Search memos",
     "show-more": "Show more",
+    "show-less": "Show less",
     "view-detail": "View Detail",
     "visibility": {
       "disabled": "Public memos are disabled",

diff --git a/web/src/locales/es.json b/web/src/locales/es.json
@@ -99,6 +99,7 @@
     "no-archived-memos": "No hay memos archivados.",
     "search-placeholder": "Buscar memos",
     "show-more": "Mostrar más",
+    "show-less": "Mostrar menos",
     "view-detail": "Ver detalles",
     "visibility": {
       "disabled": "Los memos públicos están deshabilitados",

diff --git a/web/src/locales/fr.json b/web/src/locales/fr.json
@@ -111,6 +111,7 @@
     "no-archived-memos": "Pas de memos archivés.",
     "search-placeholder": "Recherche de memos",
     "show-more": "Afficher plus",
+    "show-less": "Afficher moins",
     "to-do": "À faire",
     "view-detail": "Voir le détail",
     "visibility": {

diff --git a/web/src/locales/hu.json b/web/src/locales/hu.json
@@ -107,6 +107,7 @@
     "no-archived-memos": "Nincsenek archivált jegyzetek.",
     "search-placeholder": "Jegyzetek keresése",
     "show-more": "Több mutatása",
+    "show-less": "Mutass kevesebbet",
     "view-detail": "Részletek",
     "visibility": {
       "disabled": "A nyilvános jegyzetek le vannak tiltva",

diff --git a/web/src/locales/id.json b/web/src/locales/id.json
@@ -109,6 +109,7 @@
     "no-archived-memos": "Tidak ada memo yang diarsipkan.",
     "search-placeholder": "Cari memo",
     "show-more": "Tampilkan lebih banyak",
+    "show-less": "Tampilkan lebih sedikit",
     "view-detail": "Lihat Detail",
     "visibility": {
       "disabled": "Memo publik dinonaktifkan",

diff --git a/web/src/locales/ja.json b/web/src/locales/ja.json
@@ -111,6 +111,7 @@
     "no-archived-memos": "アーカイブされたメモはありません。",
     "search-placeholder": "メモを検索",
     "show-more": "続きを見る",
+    "show-less": "表示を少なくする",
     "to-do": "To-do",
     "view-detail": "詳細を見る",
     "visibility": {

diff --git a/web/src/locales/ka-GE.json b/web/src/locales/ka-GE.json
@@ -109,6 +109,7 @@
     "no-archived-memos": "დაარქივებული მემოები არ არის.",
     "search-placeholder": "მემოების ძიება",
     "show-more": "მეტის ჩვენება",
+    "show-less": "ნაკლების ჩვენება",
     "view-detail": "დეტალების ნახვა",
     "visibility": {
       "disabled": "საჯარო მემოები გამორთულია",

diff --git a/web/src/locales/ko.json b/web/src/locales/ko.json
@@ -96,6 +96,7 @@
     "no-archived-memos": "보관처리된 메모가 없습니다.",
     "search-placeholder": "메모 검색하기",
     "show-more": "더보기",
+    "show-less": "간략히 보기",
     "view-detail": "자세히 보기",
     "visibility": {
       "disabled": "공개 메모는 비활성화됨",

diff --git a/web/src/locales/mr.json b/web/src/locales/mr.json
@@ -109,6 +109,7 @@
     "no-archived-memos": "कोणतेही संग्रहित मेमो नाहीत.",
     "search-placeholder": "मेमोज शोधा",
     "show-more": "अधिक दाखवा",
+    "show-less": "कमी दाखवा",
     "view-detail": "तपशील दाखवा",
     "visibility": {
       "disabled": "सार्वजनिक मेमो अक्षम केले आहेत",

diff --git a/web/src/locales/pl.json b/web/src/locales/pl.json
@@ -108,6 +108,7 @@
     "no-archived-memos": "Brak zarchiwizowanych notatek.",
     "search-placeholder": "Szukaj notatek",
     "show-more": "Pokaż więcej",
+    "show-less": "Pokaż mniej",
     "view-detail": "Zobacz szczegóły",
     "visibility": {
       "disabled": "Publiczne notatki są wyłączone",

diff --git a/web/src/locales/pt-BR.json b/web/src/locales/pt-BR.json
@@ -111,6 +111,7 @@
     "no-archived-memos": "Nenhum memo arquivado.",
     "search-placeholder": "Pesquisar memos",
     "show-more": "Mostrar mais",
+    "show-less": "Mostrar menos",
     "to-do": "Tarefas",
     "view-detail": "Ver detalhes",
     "visibility": {

diff --git a/web/src/locales/pt-PT.json b/web/src/locales/pt-PT.json
@@ -109,6 +109,7 @@
     "no-archived-memos": "Não existem memos arquivados.",
     "search-placeholder": "Pesquisar memos",
     "show-more": "Mostrar mais",
+    "show-less": "Mostrar menos",
     "view-detail": "Ver detalhes",
     "visibility": {
       "disabled": "Memos públicos estão desativados",

diff --git a/web/src/locales/ru.json b/web/src/locales/ru.json
@@ -106,6 +106,7 @@
     "no-archived-memos": "Нет заархивированных записей.",
     "search-placeholder": "Поиск записей",
     "show-more": "Подробнее",
+    "show-less": "Показать меньше",
     "view-detail": "Подробно",
     "visibility": {
       "disabled": "Публичные записи отключены",

diff --git a/web/src/locales/sl.json b/web/src/locales/sl.json
@@ -109,6 +109,7 @@
     "no-archived-memos": "Ni arhiviranih beležk.",
     "search-placeholder": "Poišči beležke",
     "show-more": "Prikaži več",
+    "show-less": "Prikaži manj",
     "view-detail": "Poglej podrobnosti",
     "visibility": {
       "disabled": "Javne beležke so onemogočene",

diff --git a/web/src/locales/th.json b/web/src/locales/th.json
@@ -111,6 +111,7 @@
     "no-archived-memos": "ไม่มีบันทึกช่วยจำที่ถูกเก็บถาวร",
     "search-placeholder": "ค้นหาบันทึกช่วยจำ",
     "show-more": "แสดงเพิ่มเติม",
+    "show-less": "แสดงน้อยลง",
     "to-do": "สิ่งที่ต้องทำ",
     "view-detail": "ดูรายละเอียด",
     "visibility": {

diff --git a/web/src/locales/tr.json b/web/src/locales/tr.json
@@ -111,6 +111,7 @@
     "no-archived-memos": "Arşivlenmiş not yok.",
     "search-placeholder": "Notları ara",
     "show-more": "Daha fazlasını göster",
+    "show-less": "Daha az göster",
     "to-do": "Yapılacaklar",
     "view-detail": "Detayları görüntüle",
     "visibility": {

diff --git a/web/src/locales/uk.json b/web/src/locales/uk.json
@@ -109,6 +109,7 @@
       "no-archived-memos": "Немає архівованих нотаток.",
       "search-placeholder": "Пошук нотаток",
       "show-more": "Показати більше",
+      "show-less": "Показувати менше",
       "view-detail": "Переглянути деталі",
       "visibility": {
         "disabled": "Публічні нотатки вимкнені",

diff --git a/web/src/locales/vi.json b/web/src/locales/vi.json
@@ -109,6 +109,7 @@
     "no-archived-memos": "Không có ghi chú nào được lưu trữ.",
     "search-placeholder": "Tìm kiếm ghi chú",
     "show-more": "Hiển thị thêm",
+    "show-less": "Hiển thị ít hơn",
     "view-detail": "Xem chi tiết",
     "visibility": {
       "disabled": "Ghi chú công khai đã bị vô hiệu hóa",

diff --git a/web/src/locales/zh-Hans.json b/web/src/locales/zh-Hans.json
@@ -109,6 +109,7 @@
     "no-archived-memos": "没有已归档备忘录。",
     "search-placeholder": "搜索备忘录",
     "show-more": "查看更多",
+    "show-less": "显示较少",
     "view-detail": "查看详情",
     "visibility": {
       "disabled": "已禁用公开备忘录",

diff --git a/web/src/locales/zh-Hant.json b/web/src/locales/zh-Hant.json
@@ -111,6 +111,7 @@
     "no-archived-memos": "無封存的 Memos",
     "search-placeholder": "搜尋 Memos",
     "show-more": "查看更多",
+    "show-less": "顯示較少",
     "to-do": "待辦",
     "view-detail": "查看詳情",
     "visibility": {