allow setting row count for scroll mode

fcitx-contrib · Sep 29, 2024 · a5210d4 · a5210d4
1 parent d36dd67
commit a5210d4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/page/customize.ts b/page/customize.ts
@@ -2,6 +2,7 @@ import type {
   HOVER_BEHAVIOR,
   PAGING_BUTTONS_STYLE,
 } from './ux'
+import { setMaxRow } from './scroll'
 import {
   setBlink,
   setBlur,
@@ -42,6 +43,9 @@ interface STYLE_JSON {
   Typography: {
     PagingButtonsStyle: PAGING_BUTTONS_STYLE
   }
+  ScrollMode: {
+    MaxRowCount: string
+  }
   Background: {
     ImageUrl: string
     Blur: CONFIG_BOOL
@@ -108,6 +112,7 @@ const PAGING_OUTER = `${PANEL} :is(.fcitx-prev, .fcitx-next)`
 const PAGING_INNER = `${PANEL} .fcitx-paging-inner`
 const HIGHLIGHT_MARK = `${PANEL} .fcitx-highlighted .fcitx-mark`
 const HIGHLIGHT_ORIGINAL_MARK = `${PANEL} .fcitx-highlighted-original .fcitx-mark`
+const HORIZONTAL_SCROLL = `${PANEL} .fcitx-hoverables.fcitx-horizontal-scroll`
 
 const PANEL_LIGHT = `.fcitx-light${PANEL}`
 const PANEL_LIGHT_HIGHLIGHT = `${PANEL_LIGHT} .fcitx-hoverable.fcitx-highlighted .fcitx-hoverable-inner`
@@ -396,6 +401,12 @@ export function setStyle(style: string) {
 
   setPagingButtonsStyle(j.Typography.PagingButtonsStyle)
 
+  const maxRow = Number(j.ScrollMode.MaxRowCount)
+  setMaxRow(maxRow)
+  rules[HORIZONTAL_SCROLL] = {
+    'max-block-size': px(maxRow * 30),
+  }
+
   if (j.Background.ImageUrl) {
     let url = j.Background.ImageUrl
     if (url.startsWith('fcitx://')) {

diff --git a/page/generic.scss b/page/generic.scss
@@ -88,7 +88,7 @@
   }
 
   &.fcitx-horizontal-scroll {
-    max-block-size: 180px; /* If block-size, 2 rows will have 90px each. */
+    max-block-size: 180px; /* For default 6 rows. If block-size, 2 rows will have 90px each. */
     inline-size: 400px;
     flex-wrap: wrap;
     overflow-y: auto;

diff --git a/page/scroll.ts b/page/scroll.ts
@@ -5,9 +5,13 @@ import {
   hideContextmenu,
 } from './ux'
 
-const MAX_ROW = 6
+let MAX_ROW = 6
 const MAX_COLUMN = 6
 
+export function setMaxRow(n: number) {
+  MAX_ROW = n
+}
+
 let scrollState: SCROLL_STATE = 0
 
 export function getScrollState() {
@@ -244,7 +248,7 @@ hoverables.addEventListener('scroll', () => {
   if (scrollEnd || fetching) {
     return
   }
-  // This is safe since there are at least 7 lines.
+  // This is safe since there are at least 2 lines.
   const bottomRightIndex = itemCountInFirstNRows(rowItemCount.length - 1) - 1
   const candidates = hoverables.querySelectorAll('.fcitx-candidate')
   const bottomRight = candidates[bottomRightIndex]