diff --git a/apps/readest-app/public/locales/ar/translation.json b/apps/readest-app/public/locales/ar/translation.json index 8bef0189..013e2048 100644 --- a/apps/readest-app/public/locales/ar/translation.json +++ b/apps/readest-app/public/locales/ar/translation.json @@ -57,7 +57,6 @@ "Layout": "التخطيط", "Light Mode": "الوضع الفاتح", "Loading...": "جارٍ التحميل...", - "Loc. {{currentPage}} / {{totalPage}}": "الصفحة {{currentPage}} \\ {{totalPage}}", "Logged in": "تم تسجيل الدخول", "Logged in as {{userDisplayName}}": "تم تسجيل الدخول باسم {{userDisplayName}}", "Match Case": "مطابقة حالة الأحرف", @@ -243,5 +242,7 @@ "Background Color": "لون الخلفية", "Preview": "معاينة", "Contrast": "التباين", - "Sunset": "غروب الشمس" + "Sunset": "غروب الشمس", + "Double Border": "حدود مزدوجة", + "Border Color": "لون الحدود" } diff --git a/apps/readest-app/public/locales/de/translation.json b/apps/readest-app/public/locales/de/translation.json index 9884c905..b9963e11 100644 --- a/apps/readest-app/public/locales/de/translation.json +++ b/apps/readest-app/public/locales/de/translation.json @@ -57,7 +57,6 @@ "Layout": "Layout", "Light Mode": "Hellmodus", "Loading...": "Wird geladen...", - "Loc. {{currentPage}} / {{totalPage}}": "Pos. {{currentPage}} / {{totalPage}}", "Logged in": "Angemeldet", "Logged in as {{userDisplayName}}": "Angemeldet als {{userDisplayName}}", "Match Case": "Groß-/Kleinschreibung beachten", @@ -243,5 +242,7 @@ "Background Color": "Hintergrundfarbe", "Preview": "Vorschau", "Contrast": "Kontrast", - "Sunset": "Sonnenuntergang" + "Sunset": "Sonnenuntergang", + "Double Border": "Doppelter Rand", + "Border Color": "Randfarbe" } diff --git a/apps/readest-app/public/locales/el/translation.json b/apps/readest-app/public/locales/el/translation.json index be0c4f4c..451bc92c 100644 --- a/apps/readest-app/public/locales/el/translation.json +++ b/apps/readest-app/public/locales/el/translation.json @@ -57,7 +57,6 @@ "Layout": "Διάταξη", "Light Mode": "Φωτεινή λειτουργία", "Loading...": "Φόρτωση...", - "Loc. {{currentPage}} / {{totalPage}}": "Θέση {{currentPage}} / {{totalPage}}", "Logged in": "Συνδεδεμένος", "Logged in as {{userDisplayName}}": "Συνδεδεμένος ως {{userDisplayName}}", "Match Case": "Ταίριασμα πεζών-κεφαλαίων", @@ -243,5 +242,7 @@ "Background Color": "Χρώμα φόντου", "Preview": "Προεπισκόπηση", "Contrast": "Αντίθεση", - "Sunset": "Ηλιοβασίλεμα" + "Sunset": "Ηλιοβασίλεμα", + "Double Border": "Διπλό περιθώριο", + "Border Color": "Χρώμα περιγράμματος" } diff --git a/apps/readest-app/public/locales/es/translation.json b/apps/readest-app/public/locales/es/translation.json index 4ca69dcd..57468799 100644 --- a/apps/readest-app/public/locales/es/translation.json +++ b/apps/readest-app/public/locales/es/translation.json @@ -57,7 +57,6 @@ "Layout": "Diseño", "Light Mode": "Modo claro", "Loading...": "Cargando...", - "Loc. {{currentPage}} / {{totalPage}}": "Pos. {{currentPage}} / {{totalPage}}", "Logged in": "Sesión iniciada", "Logged in as {{userDisplayName}}": "Sesión iniciada como {{userDisplayName}}", "Match Case": "Coincidir mayúsculas y minúsculas", @@ -243,5 +242,7 @@ "Background Color": "Color de fondo", "Preview": "Vista previa", "Contrast": "Contraste", - "Sunset": "Atardecer" + "Sunset": "Atardecer", + "Double Border": "Doble borde", + "Border Color": "Color del borde" } diff --git a/apps/readest-app/public/locales/fr/translation.json b/apps/readest-app/public/locales/fr/translation.json index c2ab7fe5..9145db39 100644 --- a/apps/readest-app/public/locales/fr/translation.json +++ b/apps/readest-app/public/locales/fr/translation.json @@ -57,7 +57,6 @@ "Layout": "Mise en page", "Light Mode": "Mode clair", "Loading...": "Chargement...", - "Loc. {{currentPage}} / {{totalPage}}": "Pos. {{currentPage}} / {{totalPage}}", "Logged in": "Connecté", "Logged in as {{userDisplayName}}": "Connecté en tant que {{userDisplayName}}", "Match Case": "Respecter la casse", @@ -243,5 +242,7 @@ "Background Color": "Couleur de fond", "Preview": "Aperçu", "Contrast": "Contraste", - "Sunset": "Coucher de soleil" + "Sunset": "Coucher de soleil", + "Double Border": "Double bordure", + "Border Color": "Couleur de la bordure" } diff --git a/apps/readest-app/public/locales/hi/translation.json b/apps/readest-app/public/locales/hi/translation.json index 57b946bd..d11c157b 100644 --- a/apps/readest-app/public/locales/hi/translation.json +++ b/apps/readest-app/public/locales/hi/translation.json @@ -57,7 +57,6 @@ "Layout": "लेआउट", "Light Mode": "लाइट मोड", "Loading...": "लोड हो रहा है...", - "Loc. {{currentPage}} / {{totalPage}}": "स्थान {{currentPage}} / {{totalPage}}", "Logged in": "लॉग इन किया", "Logged in as {{userDisplayName}}": "{{userDisplayName}} के रूप में लॉग इन किया", "Match Case": "केस मैच करें", @@ -243,5 +242,7 @@ "Background Color": "पृष्ठभूमि रंग", "Preview": "पूर्वावलोकन", "Contrast": "विरोधाभास", - "Sunset": "सनसेट" + "Sunset": "सनसेट", + "Double Border": "डबल बॉर्डर", + "Border Color": "बॉर्डर रंग" } diff --git a/apps/readest-app/public/locales/id/translation.json b/apps/readest-app/public/locales/id/translation.json index cfd96903..e76637f6 100644 --- a/apps/readest-app/public/locales/id/translation.json +++ b/apps/readest-app/public/locales/id/translation.json @@ -57,7 +57,6 @@ "Layout": "Tata Letak", "Light Mode": "Mode Terang", "Loading...": "Memuat...", - "Loc. {{currentPage}} / {{totalPage}}": "Lok. {{currentPage}} / {{totalPage}}", "Logged in": "Sudah Masuk", "Logged in as {{userDisplayName}}": "Masuk sebagai {{userDisplayName}}", "Match Case": "Cocokkan Huruf Besar/Kecil", @@ -243,5 +242,7 @@ "Background Color": "Warna Latar Belakang", "Preview": "Pratinjau", "Contrast": "Kontras", - "Sunset": "Senja" + "Sunset": "Senja", + "Double Border": "Garis Ganda", + "Border Color": "Warna Garis" } diff --git a/apps/readest-app/public/locales/it/translation.json b/apps/readest-app/public/locales/it/translation.json index bf478db9..b6f30b93 100644 --- a/apps/readest-app/public/locales/it/translation.json +++ b/apps/readest-app/public/locales/it/translation.json @@ -57,7 +57,6 @@ "Layout": "Layout", "Light Mode": "Modalità chiara", "Loading...": "Caricamento...", - "Loc. {{currentPage}} / {{totalPage}}": "Pos. {{currentPage}} / {{totalPage}}", "Logged in": "Accesso effettuato", "Logged in as {{userDisplayName}}": "Accesso effettuato come {{userDisplayName}}", "Match Case": "Maiuscole/minuscole", @@ -243,5 +242,7 @@ "Background Color": "Colore sfondo", "Preview": "Anteprima", "Contrast": "Contrasto", - "Sunset": "Tramonto" + "Sunset": "Tramonto", + "Double Border": "Doppio bordo", + "Border Color": "Colore bordo" } diff --git a/apps/readest-app/public/locales/ja/translation.json b/apps/readest-app/public/locales/ja/translation.json index eca30caa..3cd26fc3 100644 --- a/apps/readest-app/public/locales/ja/translation.json +++ b/apps/readest-app/public/locales/ja/translation.json @@ -57,7 +57,6 @@ "Layout": "レイアウト", "Light Mode": "ライトモード", "Loading...": "読み込み中...", - "Loc. {{currentPage}} / {{totalPage}}": "位置 {{currentPage}} / {{totalPage}}", "Logged in": "ログイン済み", "Logged in as {{userDisplayName}}": "{{userDisplayName}}としてログイン中", "Match Case": "大文字・小文字を区別", @@ -243,5 +242,7 @@ "Background Color": "背景色", "Preview": "プレビュー", "Contrast": "コントラスト", - "Sunset": "サンセット" + "Sunset": "サンセット", + "Double Border": "二重枠", + "Border Color": "ボーダーカラー" } diff --git a/apps/readest-app/public/locales/ko/translation.json b/apps/readest-app/public/locales/ko/translation.json index a6370c4b..223cb8f5 100644 --- a/apps/readest-app/public/locales/ko/translation.json +++ b/apps/readest-app/public/locales/ko/translation.json @@ -57,7 +57,6 @@ "Layout": "레이아웃", "Light Mode": "라이트 모드", "Loading...": "로딩 중...", - "Loc. {{currentPage}} / {{totalPage}}": "위치 {{currentPage}} / {{totalPage}}", "Logged in": "로그인됨", "Logged in as {{userDisplayName}}": "{{userDisplayName}}(으)로 로그인됨", "Match Case": "대소문자 구분", @@ -243,5 +242,7 @@ "Background Color": "배경 색상", "Preview": "미리보기", "Contrast": "대비", - "Sunset": "일몰" + "Sunset": "일몰", + "Double Border": "이중 테두리", + "Border Color": "테두리 색상" } diff --git a/apps/readest-app/public/locales/pl/translation.json b/apps/readest-app/public/locales/pl/translation.json index 6cb84188..d726b453 100644 --- a/apps/readest-app/public/locales/pl/translation.json +++ b/apps/readest-app/public/locales/pl/translation.json @@ -57,7 +57,6 @@ "Layout": "Układ", "Light Mode": "Tryb jasny", "Loading...": "Ładowanie...", - "Loc. {{currentPage}} / {{totalPage}}": "Poz. {{currentPage}} / {{totalPage}}", "Logged in": "Zalogowano", "Logged in as {{userDisplayName}}": "Zalogowano jako {{userDisplayName}}", "Match Case": "Uwzględnij wielkość liter", @@ -243,5 +242,7 @@ "Background Color": "Kolor tła", "Preview": "Podgląd", "Contrast": "Kontrast", - "Sunset": "Zachód słońca" + "Sunset": "Zachód słońca", + "Double Border": "Podwójna ramka", + "Border Color": "Kolor ramki" } diff --git a/apps/readest-app/public/locales/pt/translation.json b/apps/readest-app/public/locales/pt/translation.json index e71dae5c..cd5f81ce 100644 --- a/apps/readest-app/public/locales/pt/translation.json +++ b/apps/readest-app/public/locales/pt/translation.json @@ -57,7 +57,6 @@ "Layout": "Layout", "Light Mode": "Modo Claro", "Loading...": "Carregando...", - "Loc. {{currentPage}} / {{totalPage}}": "Loc. {{currentPage}} / {{totalPage}}", "Logged in": "Conectado", "Logged in as {{userDisplayName}}": "Conectado como {{userDisplayName}}", "Match Case": "Diferenciar Maiúsculas e Minúsculas", @@ -243,5 +242,7 @@ "Background Color": "Cor de Fundo", "Preview": "Visualizar", "Contrast": "Contraste", - "Sunset": "Pôr do Sol" + "Sunset": "Pôr do Sol", + "Double Border": "Borda Dupla", + "Border Color": "Cor da Borda" } diff --git a/apps/readest-app/public/locales/ru/translation.json b/apps/readest-app/public/locales/ru/translation.json index 4526efde..4037e7b2 100644 --- a/apps/readest-app/public/locales/ru/translation.json +++ b/apps/readest-app/public/locales/ru/translation.json @@ -57,7 +57,6 @@ "Layout": "Макет", "Light Mode": "Светлая тема", "Loading...": "Загрузка...", - "Loc. {{currentPage}} / {{totalPage}}": "Поз. {{currentPage}} / {{totalPage}}", "Logged in": "Выполнен вход", "Logged in as {{userDisplayName}}": "Вход выполнен как {{userDisplayName}}", "Match Case": "Учитывать регистр", @@ -243,5 +242,7 @@ "Background Color": "Цвет фона", "Preview": "Предпросмотр", "Contrast": "Контраст", - "Sunset": "Закат" + "Sunset": "Закат", + "Double Border": "Двойная граница", + "Border Color": "Цвет границы" } diff --git a/apps/readest-app/public/locales/tr/translation.json b/apps/readest-app/public/locales/tr/translation.json index 78883d75..89d34914 100644 --- a/apps/readest-app/public/locales/tr/translation.json +++ b/apps/readest-app/public/locales/tr/translation.json @@ -57,7 +57,6 @@ "Layout": "Düzen", "Light Mode": "Aydınlık Mod", "Loading...": "Yükleniyor...", - "Loc. {{currentPage}} / {{totalPage}}": "Konum {{currentPage}} / {{totalPage}}", "Logged in": "Giriş Yapıldı", "Logged in as {{userDisplayName}}": "{{userDisplayName}} olarak giriş yapıldı", "Match Case": "Büyük/Küçük Harf Eşleştir", @@ -243,5 +242,7 @@ "Background Color": "Arka Plan Rengi", "Preview": "Önizleme", "Contrast": "Kontrast", - "Sunset": "Gün Batımı" + "Sunset": "Gün Batımı", + "Double Border": "Çift Sınır", + "Border Color": "Sınır Rengi" } diff --git a/apps/readest-app/public/locales/uk/translation.json b/apps/readest-app/public/locales/uk/translation.json index 5de41909..d7ec36fb 100644 --- a/apps/readest-app/public/locales/uk/translation.json +++ b/apps/readest-app/public/locales/uk/translation.json @@ -57,7 +57,6 @@ "Layout": "Макет", "Light Mode": "Світлий режим", "Loading...": "Завантаження...", - "Loc. {{currentPage}} / {{totalPage}}": "Поз. {{currentPage}} / {{totalPage}}", "Logged in": "Увійшли", "Logged in as {{userDisplayName}}": "Увійшли як {{userDisplayName}}", "Match Case": "Враховувати регістр", @@ -243,5 +242,7 @@ "Background Color": "Колір фону", "Preview": "Попередній перегляд", "Contrast": "Контраст", - "Sunset": "Захід сонця" + "Sunset": "Захід сонця", + "Double Border": "Подвійна рамка", + "Border Color": "Колір рамки" } diff --git a/apps/readest-app/public/locales/vi/translation.json b/apps/readest-app/public/locales/vi/translation.json index a12e2347..944d676b 100644 --- a/apps/readest-app/public/locales/vi/translation.json +++ b/apps/readest-app/public/locales/vi/translation.json @@ -57,7 +57,6 @@ "Layout": "Bố cục", "Light Mode": "Chế độ sáng", "Loading...": "Đang tải...", - "Loc. {{currentPage}} / {{totalPage}}": "Vị trí {{currentPage}} / {{totalPage}}", "Logged in": "Đã đăng nhập", "Logged in as {{userDisplayName}}": "Đăng nhập với tên {{userDisplayName}}", "Match Case": "Phân biệt chữ hoa/thường", @@ -243,5 +242,7 @@ "Background Color": "Màu nền", "Preview": "Xem trước", "Contrast": "Tương phản", - "Sunset": "Hoàng hôn" + "Sunset": "Hoàng hôn", + "Double Border": "Đôi viền", + "Border Color": "Màu viền" } diff --git a/apps/readest-app/public/locales/zh-CN/translation.json b/apps/readest-app/public/locales/zh-CN/translation.json index 6e579cb6..4997c180 100644 --- a/apps/readest-app/public/locales/zh-CN/translation.json +++ b/apps/readest-app/public/locales/zh-CN/translation.json @@ -57,7 +57,6 @@ "Layout": "布局", "Light Mode": "浅色主题", "Loading...": "加载中...", - "Loc. {{currentPage}} / {{totalPage}}": "位置 {{currentPage}} / {{totalPage}}", "Logged in": "已登录", "Logged in as {{userDisplayName}}": "{{userDisplayName}} 已登录", "Match Case": "匹配大小写", @@ -243,5 +242,7 @@ "Background Color": "背景颜色", "Preview": "预览", "Contrast": "对比", - "Sunset": "日落" + "Sunset": "日落", + "Double Border": "页面版框", + "Border Color": "版框颜色" } diff --git a/apps/readest-app/public/locales/zh-TW/translation.json b/apps/readest-app/public/locales/zh-TW/translation.json index f161cc27..715b68f1 100644 --- a/apps/readest-app/public/locales/zh-TW/translation.json +++ b/apps/readest-app/public/locales/zh-TW/translation.json @@ -57,7 +57,6 @@ "Layout": "版面", "Light Mode": "淺色主題", "Loading...": "載入中...", - "Loc. {{currentPage}} / {{totalPage}}": "位置 {{currentPage}} / {{totalPage}}", "Logged in": "已登入", "Logged in as {{userDisplayName}}": "{{userDisplayName}} 已登入", "Match Case": "匹配大小寫", @@ -243,5 +242,7 @@ "Background Color": "背景顏色", "Preview": "預覽", "Contrast": "對比", - "Sunset": "日落" + "Sunset": "日落", + "Double Border": "頁面邊框", + "Border Color": "邊框顏色" } diff --git a/apps/readest-app/src/app/reader/components/BooksGrid.tsx b/apps/readest-app/src/app/reader/components/BooksGrid.tsx index 10d1b2eb..bd48c688 100644 --- a/apps/readest-app/src/app/reader/components/BooksGrid.tsx +++ b/apps/readest-app/src/app/reader/components/BooksGrid.tsx @@ -17,6 +17,7 @@ import SettingsDialog from './settings/SettingsDialog'; import Annotator from './annotator/Annotator'; import FootnotePopup from './FootnotePopup'; import HintInfo from './HintInfo'; +import DoubleBorder from './DoubleBorder'; interface BooksGridProps { bookKeys: string[]; @@ -60,7 +61,8 @@ const BooksGrid: React.FC = ({ bookKeys, onCloseBook }) => { const { section, pageinfo, sectionLabel } = progress || {}; const isBookmarked = getViewState(bookKey)?.ribbonVisible; - const marginGap = `${viewSettings.gapPercent}%`; + const horizontalGapPercent = viewSettings.gapPercent; + const verticalMarginPixels = viewSettings.marginPx; return (
= ({ bookKeys, onCloseBook }) => { key={bookKey} className={`${appService?.hasRoundedWindow ? 'rounded-window' : ''} relative h-full w-full overflow-hidden`} > - {isBookmarked && } + {isBookmarked && } = ({ bookKeys, onCloseBook }) => { {viewSettings.scrolled ? null : ( <> - - + {viewSettings.vertical && viewSettings.doubleBorder && ( + + )} + + )} diff --git a/apps/readest-app/src/app/reader/components/DoubleBorder.tsx b/apps/readest-app/src/app/reader/components/DoubleBorder.tsx new file mode 100644 index 00000000..ccc14b9d --- /dev/null +++ b/apps/readest-app/src/app/reader/components/DoubleBorder.tsx @@ -0,0 +1,62 @@ +interface DoubleBorderProps { + borderColor: string; + horizontalGap: number; + verticalMargin: number; +} + +const paddingPx = 10; + +const DoubleBorder: React.FC = ({ + borderColor, + horizontalGap, + verticalMargin, +}) => { + return ( + <> +
+
+
+
+ + ); +}; + +export default DoubleBorder; diff --git a/apps/readest-app/src/app/reader/components/HintInfo.tsx b/apps/readest-app/src/app/reader/components/HintInfo.tsx index c5c6306a..de903bec 100644 --- a/apps/readest-app/src/app/reader/components/HintInfo.tsx +++ b/apps/readest-app/src/app/reader/components/HintInfo.tsx @@ -6,10 +6,17 @@ import { eventDispatcher } from '@/utils/event'; interface SectionInfoProps { bookKey: string; - gapRight: string; + isVertical: boolean; + horizontalGap: number; + verticalMargin: number; } -const HintInfo: React.FC = ({ bookKey, gapRight }) => { +const HintInfo: React.FC = ({ + bookKey, + isVertical, + horizontalGap, + verticalMargin, +}) => { const { isSideBarVisible } = useSidebarStore(); const { isTrafficLightVisible } = useTrafficLightStore(); const [hintMessage, setHintMessage] = React.useState(null); @@ -42,13 +49,26 @@ const HintInfo: React.FC = ({ bookKey, gapRight }) => { return (
-

+

{hintMessage || ''}

diff --git a/apps/readest-app/src/app/reader/components/PageInfo.tsx b/apps/readest-app/src/app/reader/components/PageInfo.tsx index 51b29373..63877677 100644 --- a/apps/readest-app/src/app/reader/components/PageInfo.tsx +++ b/apps/readest-app/src/app/reader/components/PageInfo.tsx @@ -1,3 +1,4 @@ +import clsx from 'clsx'; import React from 'react'; import { useTranslation } from '@/hooks/useTranslation'; import { PageInfo } from '@/types/book'; @@ -6,27 +7,53 @@ interface PageInfoProps { bookFormat: string; section?: PageInfo; pageinfo?: PageInfo; - gapRight: string; + isVertical: boolean; + horizontalGap: number; + verticalMargin: number; } -const PageInfoView: React.FC = ({ bookFormat, section, pageinfo, gapRight }) => { +const PageInfoView: React.FC = ({ + bookFormat, + section, + pageinfo, + isVertical, + horizontalGap, + verticalMargin, +}) => { const _ = useTranslation(); const pageInfo = bookFormat === 'PDF' ? section - ? `${section.current + 1} / ${section.total}` + ? isVertical + ? `${section.current + 1} · ${section.total}` + : `${section.current + 1} / ${section.total}` : '' : pageinfo - ? _('Loc. {{currentPage}} / {{totalPage}}', { - currentPage: pageinfo.current + 1, - totalPage: pageinfo.total, - }) + ? _( + isVertical ? '{{currentPage}} · {{totalPage}}' : 'Loc. {{currentPage}} / {{totalPage}}', + { + currentPage: pageinfo.current + 1, + totalPage: pageinfo.total, + }, + ) : ''; return (

{pageInfo} diff --git a/apps/readest-app/src/app/reader/components/SectionInfo.tsx b/apps/readest-app/src/app/reader/components/SectionInfo.tsx index 3e8c0141..1cbc7074 100644 --- a/apps/readest-app/src/app/reader/components/SectionInfo.tsx +++ b/apps/readest-app/src/app/reader/components/SectionInfo.tsx @@ -6,21 +6,42 @@ import { useTrafficLightStore } from '@/store/trafficLightStore'; interface SectionInfoProps { section?: string; - gapLeft: string; + isVertical: boolean; + horizontalGap: number; + verticalMargin: number; } -const SectionInfo: React.FC = ({ section, gapLeft }) => { +const SectionInfo: React.FC = ({ + section, + isVertical, + horizontalGap, + verticalMargin, +}) => { const { isSideBarVisible } = useSidebarStore(); const { isTrafficLightVisible } = useTrafficLightStore(); return (
-

+

{section || ''}

diff --git a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx index 57f01e96..05f087d4 100644 --- a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx @@ -36,6 +36,8 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { const [writingMode, setWritingMode] = useState(viewSettings.writingMode!); const [overrideLayout, setOverrideLayout] = useState(viewSettings.overrideLayout!); const [isScrolledMode, setScrolledMode] = useState(viewSettings.scrolled!); + const [doubleBorder, setDoubleBorder] = useState(viewSettings.doubleBorder!); + const [borderColor, setBorderColor] = useState(viewSettings.borderColor!); useEffect(() => { viewSettings.paragraphMargin = paragraphMargin; @@ -177,6 +179,9 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { // global settings are not supported for writing mode const prevWritingMode = viewSettings.writingMode; viewSettings.writingMode = writingMode; + if (writingMode.includes('vertical')) { + viewSettings.vertical = true; + } setViewSettings(bookKey, viewSettings); if (view) { view.renderer.setStyles?.(getStyles(viewSettings)); @@ -218,6 +223,26 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [isScrolledMode]); + useEffect(() => { + viewSettings.doubleBorder = doubleBorder; + setViewSettings(bookKey, viewSettings); + if (isFontLayoutSettingsGlobal) { + settings.globalViewSettings.doubleBorder = doubleBorder; + setSettings(settings); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [doubleBorder]); + + useEffect(() => { + viewSettings.borderColor = borderColor; + setViewSettings(bookKey, viewSettings); + if (isFontLayoutSettingsGlobal) { + settings.globalViewSettings.borderColor = borderColor; + setSettings(settings); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [borderColor]); + const langCode = getBookLangCode(bookData.bookDoc?.metadata?.language); const mightBeRTLBook = langCode === 'zh' || langCode === 'ja' || langCode === 'ko' || langCode === ''; @@ -281,6 +306,39 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {

)} + {viewSettings.vertical && ( + <> +
+
+

{_('Double Border')}

+ setDoubleBorder(!doubleBorder)} + /> +
+
+ +
+
+

{_('Border Color')}

+
+ + + +
+
+
+ + )} +

{_('Paragraph')}

@@ -374,7 +432,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { label={_('Horizontal Margins (%)')} value={gapPercent} onChange={setGapPercent} - min={0} + min={viewSettings.vertical ? 2 : 0} max={30} /> viewSettings.hyphenation!, viewSettings.zoomLevel! / 100.0, viewSettings.writingMode!, + viewSettings.vertical!, themeCode.bg, themeCode.fg, themeCode.primary, diff --git a/packages/foliate-js b/packages/foliate-js index a4480cfa..c5096074 160000 --- a/packages/foliate-js +++ b/packages/foliate-js @@ -1 +1 @@ -Subproject commit a4480cfa938b1506c489d09f165e4d32e6da999b +Subproject commit c50960743b9ea0ce4c0eef3edc156f553f2c562a