show label (#6)

fcitx-contrib · Jan 26, 2024 · fed42e4 · fed42e4
1 parent 5de7f52
commit fed42e4
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -9,12 +9,23 @@ It can be developed independently of fcitx5.
 To change style, you don't need to build the project.
 Just edit [index.html](index.html) and view it in a browser.
 
-Execute the following JavaScript code to show candidates:
+On macOS, it's best to use Safari since the real candidate window is rendered by WebKit.
+
+Execute the following JavaScript code to show candidates and more:
 ```js
+// Prerequisite: mock C++ callbacks to avoid throwing error.
 _select = console.log
 _resize = console.log
-setCandidates(["虚假的", "🀄", "candidates"], 0)
-setLayout(1) // vertical
+
+// Show candidates with labels, and highlight the first one.
+setCandidates(["虚假的", "🀄", "candidates"], ["1", "2", "3"], 0)
+
+// Set vertical layout. 0 means horizontal.
+setLayout(1)
+
+// Show aux-up.
+setCandidates([], [], -1)
+updateInputPanel("", "A", "")
 ```
 
 ## Build

diff --git a/include/candidate_window.hpp b/include/candidate_window.hpp
@@ -30,8 +30,8 @@ class CandidateWindow {
                                     int preedit_cursor,
                                     const formatted<std::string> &auxUp,
                                     const formatted<std::string> &auxDown) = 0;
-    virtual void set_labels(const std::vector<std::string> &labels) = 0;
     virtual void set_candidates(const std::vector<std::string> &candidates,
+                                const std::vector<std::string> &labels,
                                 int highlighted) = 0;
     virtual void set_highlight_callback(std::function<void(size_t index)>) = 0;
     virtual void set_style(const void *style) = 0;

diff --git a/include/webview_candidate_window.hpp b/include/webview_candidate_window.hpp
@@ -19,8 +19,8 @@ class WebviewCandidateWindow : public CandidateWindow {
                             int preedit_cursor,
                             const formatted<std::string> &auxUp,
                             const formatted<std::string> &auxDown) override;
-    void set_labels(const std::vector<std::string> &labels) override {}
     void set_candidates(const std::vector<std::string> &candidates,
+                        const std::vector<std::string> &labels,
                         int highlighted) override;
     void set_highlight_callback(std::function<void(size_t index)>) override {}
     void set_style(const void *style) override{};

diff --git a/index.html b/index.html
@@ -14,6 +14,14 @@
         overflow: hidden; /* needed because of border-radius */
         display: inline-block; /* wrap content, not fill parent */
       }
+      .preedit, .aux-up, .aux-down {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .preedit.hidden, .aux-up.hidden, .aux-down.hidden {
+        display: none; /* needed because the above display has higher precedence than .hidden's */
+      }
       .candidates {
         display: flex;
       }
@@ -24,9 +32,10 @@
         flex-direction: row;
       }
       .candidate {
-        min-height: 26px; /* compromise to 🀄's height */
         display: flex;
+        gap: 6px;
         align-items: center; /* English words have lower height */
+        line-height: 1em; /* align label and candidates */
       }
       .hidden {
         display: none;
@@ -42,7 +51,9 @@
       }
       .macos .candidate, .macos .preedit, .macos .aux-up, .macos .aux-down {
         color: white;
-        padding: 3px 7px 3px 7px;
+        min-height: 24px; /* compromise to 🀄's height */
+        min-width: 16px;
+        padding: 3px 7px 3px 7px; /* combine min-height, min-width and padding to make aux-up a square for 小 and A */
       }
       .macos .candidate.highlighted {
         background-color: #0059d0;
@@ -55,8 +66,8 @@
   <body>
     <div class="panel macos">
       <div class="header">
-          <div class="aux-up hidden"></div>
-          <div class="preedit hidden"></div>
+        <div class="aux-up hidden"></div>
+        <div class="preedit hidden"></div>
       </div>
       <div class="aux-down hidden"></div>
       <div class="candidates">
@@ -123,17 +134,21 @@
         }
       }
 
-      function setCandidates(cands, highlighted) {
+      function setCandidates(cands, labels, highlighted) {
         candidates.innerHTML = ""
         for (let i = 0; i < cands.length; ++i) {
           const candidate = document.createElement("div")
           candidate.classList.add("candidate")
           if (i === highlighted) {
             candidate.classList.add("highlighted")
           }
+          const label = document.createElement("div")
+          label.classList.add("label")
+          label.innerHTML = labels[i]
           const text = document.createElement("div")
           text.classList.add("text")
           text.innerHTML = cands[i]
+          candidate.appendChild(label)
           candidate.appendChild(text)
           candidates.appendChild(candidate)
         }

diff --git a/preview/preview.mm b/preview/preview.mm
@@ -17,7 +17,8 @@ int main(int argc, const char *argv[]) {
         auto t = std::thread([&] {
             std::this_thread::sleep_for(std::chrono::seconds(1));
             candidateWindow->set_layout(candidate_window::layout_t::vertical);
-            candidateWindow->set_candidates({"虚假的", "候选词"}, 0);
+            candidateWindow->set_candidates({"虚假的", "候选词"}, {"1", "2"},
+                                            0);
             candidateWindow->show(100, 200);
         });
         [application run];

diff --git a/src/webview_candidate_window.mm b/src/webview_candidate_window.mm
@@ -61,8 +61,9 @@
 }
 
 void WebviewCandidateWindow::set_candidates(
-    const std::vector<std::string> &candidates, int highlighted) {
-    invoke_js("setCandidates", candidates, highlighted);
+    const std::vector<std::string> &candidates,
+    const std::vector<std::string> &labels, int highlighted) {
+    invoke_js("setCandidates", candidates, labels, highlighted);
 }
 
 void WebviewCandidateWindow::show(double x, double y) {