fix: 将「启用菜单区域」设置项改为「缩小菜单区域」

https://sleazyfork.org/scripts/374903/discussions/308707

Author: hymbz

locales/en.json

@@ -144,7 +144,6 @@
       "dir_ltr": "LTR (American comics)",
       "dir_rtl": "RTL (Japanese manga)",
       "disable_auto_enlarge": "Disable automatic image enlarge",
-      "enable_menu": "Enable menu area",
       "first_page_fill": "Enable first page fill by default",
       "fit_to_width": "Fit to width",
       "img_recognition": "Image Recognition",
@@ -172,6 +171,7 @@
       "scrollbar_show_img_status": "Show image loading status",
       "show_clickable_area": "Show clickable areas",
       "show_comments": "Show comments on the end page",
+      "shrink_menu": "Enable menu area",
       "swap_page_turn_key": "Swap LR page-turning keys",
       "zoom": "Image zoom ratio"
     },

locales/hu.json

@@ -144,7 +144,6 @@
       "dir_ltr": "从左到右（美漫）",
       "dir_rtl": "从右到左（日漫）",
       "disable_auto_enlarge": "禁止图片自动放大",
-      "enable_menu": "Menüterület engedélyezése",
       "first_page_fill": "默认启用首页填充",
       "fit_to_width": "图片适合宽度",
       "img_recognition": "图像识别",
@@ -172,6 +171,7 @@
       "scrollbar_show_img_status": "显示图片加载状态",
       "show_clickable_area": "显示点击区域",
       "show_comments": "在结束页显示评论",
+      "shrink_menu": "Menüterület engedélyezése",
       "swap_page_turn_key": "左右翻页键交换",
       "zoom": "图片缩放"
     },

locales/ru.json

@@ -144,7 +144,6 @@
       "dir_ltr": "Чтение слева направо (Американские комиксы)",
       "dir_rtl": "Чтение справа налево (Японская манга)",
       "disable_auto_enlarge": "Отключить автоматическое масштабирование изображений",
-      "enable_menu": "Включить область меню",
       "first_page_fill": "Включить заполнение первой страницы по умолчанию",
       "fit_to_width": "По ширине",
       "img_recognition": "распознавание изображений",
@@ -172,6 +171,7 @@
       "scrollbar_show_img_status": "Показывать статус загрузки изображения",
       "show_clickable_area": "Показывать кликабельные области",
       "show_comments": "Показывать комментарии на последней странице",
+      "shrink_menu": "Включить область меню",
       "swap_page_turn_key": "Поменять местами клавиши переключения страниц",
       "zoom": "Коэффициент масштабирования изображения"
     },

locales/ta.json

@@ -144,7 +144,6 @@
       "dir_ltr": "இடமிருந்து வலமாக (மெய் மேன்)",
       "dir_rtl": "வலமிருந்து இடமாக (ரிமான்)",
       "disable_auto_enlarge": "தடைசெய்யப்பட்ட படங்கள் தானாக விரிவாக்கப்படுகின்றன",
-      "enable_menu": "மெனு பகுதியை இயக்கு",
       "first_page_fill": "இயல்பாக, முகப்புப்பக்க நிரப்புதலை இயக்கவும்",
       "fit_to_width": "அகலத்திற்கு ஏற்ற படம்",
       "img_recognition": "பட ஏற்பு",
@@ -172,6 +171,7 @@
       "scrollbar_show_img_status": "பட ஏற்றுதல் நிலையை காட்டு",
       "show_clickable_area": "சொடுக்கு பகுதியைக் காட்டு",
       "show_comments": "இறுதிப் பக்கத்தில் கருத்துகளைக் காண்பி",
+      "shrink_menu": "மெனு பகுதியை இயக்கு",
       "swap_page_turn_key": "இடது மற்றும் வலது பக்கங்கள் மாறுதல்",
       "zoom": "படம் பெரிதாக்கு"
     },

locales/zh.json

@@ -144,7 +144,6 @@
       "dir_ltr": "从左到右（美漫）",
       "dir_rtl": "从右到左（日漫）",
       "disable_auto_enlarge": "禁止图片自动放大",
-      "enable_menu": "启用菜单区域",
       "first_page_fill": "默认启用首页填充",
       "fit_to_width": "图片适合宽度",
       "img_recognition": "图像识别",
@@ -172,6 +171,7 @@
       "scrollbar_show_img_status": "显示图片加载状态",
       "show_clickable_area": "显示点击区域",
       "show_comments": "在结束页显示评论",
+      "shrink_menu": "缩小菜单区域",
       "swap_page_turn_key": "左右翻页键交换",
       "zoom": "图片缩放"
     },

src/components/Manga/components/TouchArea.module.css

@@ -61,10 +61,23 @@
   &[data-vert='true'] {
     flex-direction: column !important;
   }
-}
 
-.touchAreaRoot[data-area='edge'] {
-  grid-template-columns: 1fr min(30%, 10em) 1fr;
+  &:not([data-turn-page]) {
+    .touchArea[data-area='next'],
+    .touchArea[data-area='NEXT'],
+    .touchArea[data-area='prev'],
+    .touchArea[data-area='PREV'] {
+      visibility: hidden;
+    }
+  }
+
+  &[data-shrink-menu] {
+    grid-template-columns: 1fr 2em 1fr;
+
+    .touchArea[data-area='MENU'] {
+      letter-spacing: 0;
+    }
+  }
 }
 
 .root[data-mobile] {

src/components/Manga/components/TouchArea.tsx

@@ -47,35 +47,22 @@ export const dir = createRootMemo(() => {
   return store.option.dir === 'rtl' ? 'ltr' : 'rtl';
 });
 
-const isShowArea = (area: Area) => {
-  switch (area) {
-    case 'PREV':
-    case 'prev':
-    case 'NEXT':
-    case 'next':
-      return store.option.clickPageTurn.enabled;
-
-    case 'MENU':
-    case 'menu':
-      return store.option.clickPageTurn.enableMenu;
-  }
-};
-
 export const TouchArea: Component = () => (
   <div
     ref={bindRef('touchArea')}
     class={classes.touchAreaRoot}
     dir={dir()}
     data-show={boolDataVal(store.show.touchArea)}
     data-area={areaType()}
+    data-turn-page={boolDataVal(store.option.clickPageTurn.enabled)}
+    data-shrink-menu={boolDataVal(store.option.clickPageTurn.shrinkMenu)}
   >
     <For each={areaArrayMap[areaType()]}>
       {(rows) => (
         <For each={rows}>
           {(area) => (
             <div
               class={classes.touchArea}
-              style={{ visibility: isShowArea(area) ? undefined : 'hidden' }}
               data-area={area}
               role="button"
               tabIndex={-1}

src/components/Manga/defaultSettingList.tsx

@@ -271,8 +271,8 @@ export const defaultSettingList: () => SettingList = () => [
         />
 
         <SettingsItemSwitch
-          name={t('setting.option.enable_menu')}
-          {...bindOption('clickPageTurn', 'enableMenu')}
+          name={t('setting.option.shrink_menu')}
+          {...bindOption('clickPageTurn', 'shrinkMenu')}
         />
 
         <SettingsShowItem when={store.option.clickPageTurn.enabled}>

src/components/Manga/store/option.ts

@@ -58,7 +58,8 @@ export type Option = {
     enabled: boolean;
     /** 左右反转点击区域 */
     reverse: boolean;
-    enableMenu: boolean;
+    /** 缩小菜单区域 */
+    shrinkMenu: boolean;
     /** 区域排列类型 */
     area: keyof typeof areaArrayMap;
   };
@@ -140,7 +141,7 @@ const _defaultOption: Readonly<Option> = {
     enabled: 'ontouchstart' in document.documentElement,
     reverse: false,
     area: 'left_right',
-    enableMenu: true,
+    shrinkMenu: false,
   },
   firstPageFill: true,
   disableZoom: false,