fix ghost stripes when Margin=0 (#79)

fcitx-contrib · Dec 27, 2024 · 261a54f · 261a54f
1 parent d63bafd
commit 261a54f
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git a/page/customize.ts b/page/customize.ts
@@ -3,6 +3,7 @@ import type {
   PAGING_BUTTONS_STYLE,
 } from './ux'
 import { setMaxRow } from './scroll'
+import { hoverables } from './selector'
 import {
   setBlink,
   setBlur,
@@ -115,7 +116,8 @@ const HIGHLIGHT_ORIGINAL_MARK = `${PANEL} .fcitx-highlighted-original .fcitx-mar
 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`
+// Not sure why but considering Margin only for initial state (i.e., not hover or press) is good enough for eliminating ghost stripes.
+const PANEL_LIGHT_HIGHLIGHT = `${PANEL_LIGHT} :is(.fcitx-no-margin .fcitx-hoverable.fcitx-highlighted, .fcitx-margin .fcitx-hoverable.fcitx-highlighted .fcitx-hoverable-inner)`
 const PANEL_LIGHT_HIGHLIGHT_HOVER = `${PANEL_LIGHT} .fcitx-mousemoved .fcitx-hoverable.fcitx-highlighted:hover .fcitx-hoverable-inner`
 const PANEL_LIGHT_HIGHLIGHT_PRESS = `${PANEL_LIGHT} .fcitx-hoverable.fcitx-highlighted:active .fcitx-hoverable-inner`
 const PANEL_LIGHT_OTHER_HOVER = `${PANEL_LIGHT} .fcitx-mousemoved .fcitx-hoverable:not(.fcitx-highlighted):hover .fcitx-hoverable-inner`
@@ -146,6 +148,18 @@ function lightToDark(light: string) {
   return light.replace(PANEL_LIGHT, PANEL_DARK)
 }
 
+// For eliminating ghost stripes. See macos.scss for details.
+function setMargin(hasMargin: boolean) {
+  if (hasMargin) {
+    hoverables.classList.add('fcitx-margin')
+    hoverables.classList.remove('fcitx-no-margin')
+  }
+  else {
+    hoverables.classList.remove('fcitx-margin')
+    hoverables.classList.add('fcitx-no-margin')
+  }
+}
+
 const PANEL_DARK_HIGHLIGHT = lightToDark(PANEL_LIGHT_HIGHLIGHT)
 const PANEL_DARK_HIGHLIGHT_HOVER = lightToDark(PANEL_LIGHT_HIGHLIGHT_HOVER)
 const PANEL_DARK_HIGHLIGHT_PRESS = lightToDark(PANEL_LIGHT_HIGHLIGHT_PRESS)
@@ -401,6 +415,8 @@ export function setStyle(style: string) {
 
   setPagingButtonsStyle(j.Typography.PagingButtonsStyle)
 
+  setMargin(j.Size.Margin !== '0')
+
   const maxRow = Number(j.ScrollMode.MaxRowCount)
   setMaxRow(maxRow)
   rules[HORIZONTAL_SCROLL] = {

diff --git a/page/index.html b/page/index.html
@@ -29,7 +29,7 @@
                 <div class="fcitx-preedit fcitx-hidden"></div>
               </div>
               <div class="fcitx-aux-down fcitx-hidden"></div>
-              <div class="fcitx-hoverables fcitx-horizontal"></div>
+              <div class="fcitx-hoverables fcitx-horizontal fcitx-no-margin"></div>
             </div>
           </div>
         </div>

diff --git a/page/macos.scss b/page/macos.scss
@@ -102,7 +102,13 @@ $dark-graphite: rgb(105 105 105);
     color: white;
   }
 
-  .fcitx-hoverable.fcitx-highlighted .fcitx-hoverable-inner, .fcitx-menu-item:hover {
+  /* Assign highlight color to fcitx-hoverable-inner to support positive Margin like WeType.
+   * However, it causes ghost stripes of background color at top-left and bottom-left of a horizontal panel with 0 Margin.
+   * It happens when fcitx-hoverable's width is determined by fcitx-hoverable-inner, i.e., not by itself.
+   * So if Margin is 0, we'd just assign highlight color to fcitx-hoverable.
+   * PS: It's not even reproducible on preview app.
+   */
+  .fcitx-no-margin .fcitx-hoverable.fcitx-highlighted, .fcitx-margin .fcitx-hoverable.fcitx-highlighted .fcitx-hoverable-inner, .fcitx-menu-item:hover {
     background-color: var(--accent-color);
   }
 
@@ -191,6 +197,7 @@ $dark-graphite: rgb(105 105 105);
     color: gray; // disabled
     background-color: $panel-color-light;
 
+    /* stylelint-disable-next-line no-descending-specificity */
     .fcitx-hoverable-inner {
       color: $text-color-light; // enabled
     }

diff --git a/tests/test-generic.spec.ts b/tests/test-generic.spec.ts
@@ -39,7 +39,7 @@ test('HTML structure', async ({ page }) => {
             <div class="fcitx-hidden fcitx-preedit"></div>
           </div>
           <div class="fcitx-aux-down fcitx-hidden"></div>
-          <div class="fcitx-horizontal fcitx-hoverables">
+          <div class="fcitx-horizontal fcitx-hoverables fcitx-no-margin">
             <div class="fcitx-candidate fcitx-candidate-first fcitx-highlighted fcitx-highlighted-original fcitx-hoverable">
               <div class="fcitx-candidate-inner fcitx-hoverable-inner">
                 <div class="fcitx-mark fcitx-no-text"></div>