mirror of
https://github.com/usememos/memos.git
synced 2024-12-25 20:32:18 +03:00
* add auto collapse feature * fix some styles * pass eslint --------- Co-authored-by: liyang <liyangg@umich.edu>
This commit is contained in:
parent
0aa7085303
commit
685a23bce8
1
web/.gitignore
vendored
1
web/.gitignore
vendored
@ -8,3 +8,4 @@ dist-ssr
|
||||
/playwright-report/
|
||||
/playwright/.cache/
|
||||
/playwright-screenshot/
|
||||
|
||||
|
@ -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}>
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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"
|
||||
|
@ -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",
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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": "저장소 서비스 목록",
|
||||
|
@ -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"
|
||||
|
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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": "Создать пользователя"
|
||||
|
@ -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",
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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": "Створити користувача"
|
||||
|
@ -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"
|
||||
|
@ -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": "存储服务列表",
|
||||
|
@ -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": "存儲服務列表",
|
||||
|
@ -16,6 +16,7 @@ const defaultSetting: Setting = {
|
||||
const defaultLocalSetting: LocalSetting = {
|
||||
enableDoubleClickEditing: true,
|
||||
dailyReviewTimeOffset: 0,
|
||||
enableAutoCollapse: true,
|
||||
};
|
||||
|
||||
export const convertResponseModelUser = (user: User): User => {
|
||||
|
1
web/src/types/modules/setting.d.ts
vendored
1
web/src/types/modules/setting.d.ts
vendored
@ -9,6 +9,7 @@ interface Setting {
|
||||
interface LocalSetting {
|
||||
enableDoubleClickEditing: boolean;
|
||||
dailyReviewTimeOffset: number;
|
||||
enableAutoCollapse: boolean;
|
||||
}
|
||||
|
||||
interface UserLocaleSetting {
|
||||
|
Loading…
Reference in New Issue
Block a user