feat: add auto collapse feature for all memos issue #1463 (#1550)

* add auto collapse feature * fix some styles * pass eslint --------- Co-authored-by: liyang <liyangg@umich.edu>
2024-09-21 00:37:58 +03:00 · 2023-04-17 22:05:36 -04:00 · 2023-04-17 22:05:36 -04:00 · 685a23bce8
commit 685a23bce8
parent 0aa7085303
22 changed files with 57 additions and 20 deletions
--- a/web/.gitignore
+++ b/web/.gitignore
@ -7,4 +7,5 @@ dist-ssr
 /test-results/
 /playwright-report/
 /playwright/.cache/
-/playwright-screenshot/
+/playwright-screenshot/
+
--- a/web/src/components/MemoContent.tsx
+++ b/web/src/components/MemoContent.tsx
@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { marked } from "@/labs/marked";
+import { useUserStore } from "@/store/module";
 import Icon from "./Icon";
 import "@/less/memo-content.less";

@ -29,6 +30,10 @@ const MemoContent: React.FC<Props> = (props: Props) => {
  });
  const memoContentContainerRef = useRef<HTMLDivElement>(null);

+  //variable for auto-collapse
+  const userStore = useUserStore();
+  const { localSetting } = userStore.state.user as User;
+
  useEffect(() => {
    if (showFull) {
      return;
@ -67,13 +72,15 @@ const MemoContent: React.FC<Props> = (props: Props) => {
    <div className={`memo-content-wrapper ${className || ""}`}>
      <div
        ref={memoContentContainerRef}
-        className={`memo-content-text ${state.expandButtonStatus === 0 ? "max-h-64 overflow-y-hidden" : ""}`}
+        className={`memo-content-text ${
+          localSetting.enableAutoCollapse && state.expandButtonStatus === 0 ? "max-h-64 overflow-y-hidden" : ""
+        }`}
        onClick={handleMemoContentClick}
        onDoubleClick={handleMemoContentDoubleClick}
      >
        {marked(content)}
      </div>
-      {state.expandButtonStatus !== -1 && (
+      {localSetting.enableAutoCollapse && state.expandButtonStatus !== -1 && (
        <div className={`expand-btn-container ${state.expandButtonStatus === 0 && "!-mt-7"}`}>
          <div className="absolute top-0 left-0 w-full h-full blur-lg bg-white dark:bg-zinc-700"></div>
          <span className={`btn z-10 ${state.expandButtonStatus === 0 ? "expand-btn" : "fold-btn"}`} onClick={handleExpandBtnClick}>
--- a/web/src/components/Settings/PreferencesSection.tsx
+++ b/web/src/components/Settings/PreferencesSection.tsx
@ -44,6 +44,11 @@ const PreferencesSection = () => {
    userStore.upsertLocalSetting({ ...localSetting, dailyReviewTimeOffset: value });
  };

+  //enableAutoCollapse
+  const handleAutoCollapseChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
+    userStore.upsertLocalSetting({ ...localSetting, enableAutoCollapse: event.target.checked });
+  };
+
  return (
    <div className="section-container preferences-section-container">
      <p className="title-text">{t("common.basic")}</p>
@ -108,6 +113,11 @@ const PreferencesSection = () => {
        <span className="normal-text">{t("setting.preference-section.enable-double-click")}</span>
        <Switch className="ml-2" checked={localSetting.enableDoubleClickEditing} onChange={handleDoubleClickEnabledChanged} />
      </label>
+
+      <label className="form-label selector">
+        <span className="normal-text">{t("setting.preference-section.auto-collapse")}</span>
+        <Switch className="ml-2" checked={localSetting.enableAutoCollapse} onChange={handleAutoCollapseChanged} />
+      </label>
    </div>
  );
 };
--- a/web/src/locales/de.json
+++ b/web/src/locales/de.json
@ -166,7 +166,8 @@
      "default-memo-sort-option": "Angezeigter Memo-Zeitpunkt",
      "created_ts": "Erstellungszeitpunkt",
      "updated_ts": "Änderungszeitpunkt",
-      "enable-double-click": "Enable double-click to edit"
+      "enable-double-click": "Doppelklick zum Bearbeiten aktivieren",
+      "auto-collapse": "Automatisch reduzieren"
    },
    "member-section": {
      "create-a-member": "Mitglied hinzufügen"
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@ -187,7 +187,8 @@
      "default-memo-sort-option": "Memo display time",
      "created_ts": "Created Time",
      "updated_ts": "Updated Time",
-      "daily-review-time-offset": "Daily Review Time Offset"
+      "daily-review-time-offset": "Daily Review Time Offset",
+      "auto-collapse": "Auto Collapse"
    },
    "storage-section": {
      "current-storage": "Current storage",
--- a/web/src/locales/es.json
+++ b/web/src/locales/es.json
@ -166,7 +166,8 @@
      "default-memo-sort-option": "Hora de visualización de la nota",
      "created_ts": "Hora de Creación",
      "updated_ts": "Hora de Actualización",
-      "enable-double-click": "Habilitar doble clic para editar"
+      "enable-double-click": "Habilitar doble clic para editar",
+      "auto-collapse": "Colapso automático"
    },
    "member-section": {
      "create-a-member": "Crear un miembro"
--- a/web/src/locales/fr.json
+++ b/web/src/locales/fr.json
@ -166,7 +166,8 @@
      "default-memo-sort-option": "Memo display time",
      "created_ts": "Heure de création",
      "updated_ts": "Heure de mise à jour",
-      "enable-double-click": "Enable double-click to edit"
+      "enable-double-click": "Activer le double-clic",
+      "auto-collapse": "Réduction automatique"
    },
    "member-section": {
      "create-a-member": "Créer un membre"
--- a/web/src/locales/it.json
+++ b/web/src/locales/it.json
@ -166,7 +166,8 @@
      "default-memo-sort-option": "Ordine visualizzazione memo",
      "created_ts": "Data di creazione",
      "updated_ts": "Ultima modifica",
-      "enable-double-click": "Enable double-click to edit"
+      "enable-double-click": "Abilita il doppio clic",
+      "auto-collapse": "Comprimi automaticamente"
    },
    "member-section": {
      "create-a-member": "Crea un membro"
--- a/web/src/locales/ko.json
+++ b/web/src/locales/ko.json
@ -164,7 +164,8 @@
      "default-memo-sort-option": "메모에 표시할 시각",
      "created_ts": "생성된 시각",
      "updated_ts": "변경된 시각",
-      "daily-review-time-offset": "날마다 돌아보기 기준 시각"       
+      "daily-review-time-offset": "날마다 돌아보기 기준 시각"  ,
+      "auto-collapse": "자동 축소"     
    },
    "storage-section": {
      "storage-services-list": "저장소 서비스 목록",
--- a/web/src/locales/nl.json
+++ b/web/src/locales/nl.json
@ -166,7 +166,8 @@
      "default-memo-sort-option": "Sorteer op tijd van aanmaken/wijziging",
      "created_ts": "Tijd van aanmaken",
      "updated_ts": "Tijd van wijziging",
-      "enable-double-click": "Dubbelklik voor bewerken aanzetten"
+      "enable-double-click": "Dubbelklik voor bewerken aanzetten",
+      "auto-collapse": "Automatisch samenvouwen"
    },
    "member-section": {
      "create-a-member": "Lid toevoegen"
--- a/web/src/locales/pl.json
+++ b/web/src/locales/pl.json
@ -168,7 +168,8 @@
      "mobile-editor-style": "Styl edytora mobilnego",
      "default-memo-sort-option": "Wyświetlana data notatki",
      "created_ts": "Data utworzenia",
-      "updated_ts": "Data aktualizacji"
+      "updated_ts": "Data aktualizacji",
+      "auto-collapse": "Automatyczne zwijanie"
    },
    "storage-section": {
      "storage-services-list": "Lista usług przechowywania",
--- a/web/src/locales/pt-BR.json
+++ b/web/src/locales/pt-BR.json
@ -187,7 +187,8 @@
      "default-memo-sort-option": "Memo display time",
      "created_ts": "Hora de criação",
      "updated_ts": "Hora de atualização",
-      "daily-review-time-offset": "Compensação de tempo do Resumo Diário"
+      "daily-review-time-offset": "Compensação de tempo do Resumo Diário",
+      "auto-collapse": "Recolher automaticamente"
    },
    "storage-section": {
      "current-storage": "Armazenamento atual",
--- a/web/src/locales/ru.json
+++ b/web/src/locales/ru.json
@ -196,7 +196,8 @@
      "created_ts": "Время создания",
      "updated_ts": "Время обновления",
      "enable-double-click": "Разрешить двойной клик для редактирования",
-      "daily-review-time-offset": "Смещение времени ежедневного просмотра"
+      "daily-review-time-offset": "Смещение времени ежедневного просмотра",
+      "auto-collapse": "Автоматическое свертывание"
    },
    "member-section": {
      "create-a-member": "Создать пользователя"
--- a/web/src/locales/sl.json
+++ b/web/src/locales/sl.json
@ -198,7 +198,8 @@
      "default-memo-sort-option": "Čas prikaza beležke",
      "created_ts": "Čas ustvarjanja",
      "updated_ts": "Čas posodobitve",
-      "daily-review-time-offset": "Časovni odmik dnevnega pregleda"
+      "daily-review-time-offset": "Časovni odmik dnevnega pregleda",
+      "auto-collapse":"Samodejno strni"
    },
    "storage-section": {
      "storage-services-list": "Seznam storitev shramb",
--- a/web/src/locales/sv.json
+++ b/web/src/locales/sv.json
@ -166,7 +166,8 @@
      "default-memo-sort-option": "Anteckning visningstid",
      "created_ts": "Skapade tid",
      "updated_ts": "Upodaterad tid",
-      "enable-double-click": "Aktivera dubbelklick för att redigera"
+      "enable-double-click": "Aktivera dubbelklick för att redigera",
+      "auto-collapse": "Autokollaps"
    },
    "member-section": {
      "create-a-member": "Skapa en medlem"
--- a/web/src/locales/tr.json
+++ b/web/src/locales/tr.json
@ -156,7 +156,8 @@
      "default-memo-sort-option": "Yer İşareti Görüntüleme Zamanı",
      "created_ts": "Oluşturulma zamanı",
      "updated_ts": "Güncelleme zamanı",
-      "enable-double-click": "Düzenlemek için çift tıklatmayı etkinleştir"
+      "enable-double-click": "Düzenlemek için çift tıklatmayı etkinleştir",
+      "auto-collapse": "Otomatik Daralt"
    },
    "member-section": {
      "create-a-member": "Kullanıcı oluştur"
--- a/web/src/locales/uk.json
+++ b/web/src/locales/uk.json
@ -166,7 +166,8 @@
      "default-memo-sort-option": "Час відображення закладки",
      "created_ts": "Час створення",
      "updated_ts": "Час оновлення",
-      "enable-double-click": "Enable double-click to edit"
+      "enable-double-click": "Enable double-click to edit",
+      "auto-collapse": "Автоматичне згортання"
    },
    "member-section": {
      "create-a-member": "Створити користувача"
--- a/web/src/locales/vi.json
+++ b/web/src/locales/vi.json
@ -166,7 +166,8 @@
      "default-memo-sort-option": "Thời gian hiện ghi chú",
      "created_ts": "Thời gian tạo",
      "updated_ts": "Thời gian cập nhật",
-      "enable-double-click": "Enable double-click to edit"
+      "enable-double-click": "Bật nhấp đúp để chỉnh sửa",
+      "auto-collapse": "Tự động thu gọn"
    },
    "member-section": {
      "create-a-member": "Thêm thành viên"
--- a/web/src/locales/zh-Hans.json
+++ b/web/src/locales/zh-Hans.json
@ -207,7 +207,8 @@
      "created_ts": "创建时间",
      "updated_ts": "更新时间",
      "daily-review-time-offset": "每日回顾时间偏移",
-      "default-resource-visibility": "默认资源可见性"
+      "default-resource-visibility": "默认资源可见性",
+      "auto-collapse": "自动折叠"
    },
    "storage-section": {
      "storage-services-list": "存储服务列表",
--- a/web/src/locales/zh-Hant.json
+++ b/web/src/locales/zh-Hant.json
@ -207,7 +207,8 @@
      "created_ts": "建立時間",
      "updated_ts": "更新時間",
      "daily-review-time-offset": "每日回顧時間偏移",
-      "default-resource-visibility": "默認資源可見性"
+      "default-resource-visibility": "默認資源可見性",
+      "auto-collapse": "自動摺疊"
    },
    "storage-section": {
      "storage-services-list": "存儲服務列表",
--- a/web/src/store/module/user.ts
+++ b/web/src/store/module/user.ts
@ -16,6 +16,7 @@ const defaultSetting: Setting = {
 const defaultLocalSetting: LocalSetting = {
  enableDoubleClickEditing: true,
  dailyReviewTimeOffset: 0,
+  enableAutoCollapse: true,
 };

 export const convertResponseModelUser = (user: User): User => {
--- a/web/src/types/modules/setting.d.ts
+++ b/web/src/types/modules/setting.d.ts
@ -9,6 +9,7 @@ interface Setting {
 interface LocalSetting {
  enableDoubleClickEditing: boolean;
  dailyReviewTimeOffset: number;
+  enableAutoCollapse: boolean;
 }

 interface UserLocaleSetting {