prompt-buffer: Improve source heading buttons.

Change button glypsh for `next-source`, `previous-source` and `toggle-attributes-display`. Move `toggle-attributes-source` to the right. Mute next/previous source arrow when next/previous source is unavailable. Add hover effect to show keybinding and change background color. Change layout to flexbox.
atlas-engineer · Oct 31, 2023 · 366d06f · 366d06f
1 parent 6738931
commit 366d06f
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 34 deletions.
diff --git a/assets/glyphs/down-arrow.svg b/assets/glyphs/down-arrow.svg
diff --git a/assets/glyphs/down.svg b/assets/glyphs/down.svg
diff --git a/assets/glyphs/plus-minus.svg b/assets/glyphs/plus-minus.svg
diff --git a/assets/glyphs/up-arrow.svg b/assets/glyphs/up-arrow.svg
diff --git a/assets/glyphs/up.svg b/assets/glyphs/up.svg
diff --git a/source/prompt-buffer.lisp b/source/prompt-buffer.lisp
@@ -141,6 +141,8 @@ See `nyxt::attribute-widths'.")
           :opacity 0.6)
         `((:and .button (:or :visited :active))
           :color ,theme:background)
+        `(".button.inactive svg path"
+           :stroke ,theme:secondary-)
         `("#input"
           :height "28px"
           :margin-top "0"
@@ -159,12 +161,27 @@ See `nyxt::attribute-widths'.")
         `(".source"
           :margin-left "10px"
           :margin-top "15px")
-        `(".source-name"
+        `(".source-heading"
           :background-color ,theme:secondary
           :color ,theme:on-secondary
-          :padding-left "5px"
+          :display "flex"
+          :justify-content "space-between"
+          :align-items "stretch"
           :line-height "24px"
           :border-radius "3px 0 0 0")
+        `(".source-heading > div"
+          :display "flex"
+          :justify-content "space-between"
+          :align-items "center")
+        `(".source-heading > div > button"
+          :padding "5px 6px 5px 6px"
+          :min-height "100%")
+        `(".source-heading > div > #down-arrow"
+          :margin-right "-2px")
+        `(".source-heading > div > #up-arrow"
+          :margin-left "-2px")
+        `(".source-heading > div > button:hover"
+          :background-color ,theme:secondary+)
         `("#suggestions"
           :background-color ,theme:background
           :color ,theme:on-background
@@ -503,38 +520,46 @@ This does not redraw the whole prompt buffer, use `prompt-render' for that."
          (last-source-index (1- (length sources))))
     (flet ((source->html (source)
              (spinneret:with-html-string
-               (:div :class "source"
-                     (:div :class "source-name"
-                           :style (if (and (hide-single-source-header-p prompt-buffer)
-                                           (sera:single sources))
-                                      "display:none;"
-                                      "display:revert")
-                           (:nbutton
-                             :text "↓"
-                             :title "Next source"
-                             :buffer prompt-buffer
-                             '(funcall (sym:resolve-symbol :next-source :command)))
-                           (:nbutton
-                             :text "↑"
-                             :title "Previous source"
-                             :buffer prompt-buffer
-                             '(funcall (sym:resolve-symbol :previous-source :command)))
-                           (:nbutton
-                             :text "⚙"
-                             :title "Toggle attributes display"
-                             :buffer prompt-buffer
-                             `(funcall (sym:resolve-symbol :toggle-attributes-display :command)
-                                       :source ,source))
-                           (prompter:name source)
-                           (if (prompter:hide-suggestion-count-p source)
-                               ""
-                               (suggestion-and-mark-count prompt-buffer
-                                                          (prompter:suggestions source)
-                                                          (prompter:marks source)
-                                                          :enable-marks-p (prompter:enable-marks-p source)))
-                           (if (prompter:ready-p source)
-                               ""
-                               "(In progress...)"))
+               (:div.source
+                     (:div.source-heading
+                           :style (when (and (hide-single-source-header-p prompt-buffer)
+                                             (sera:single sources))
+                                    "display:none")
+                          (:div
+                            (:nbutton
+                              :class (unless (prompter:adjacent-source prompt-buffer :source source) "inactive")
+                              :id "down-arrow"
+                              :text (:raw (gethash "down-arrow.svg" *static-data*))
+                              :title (format nil "Next source (~a)" (binding-keys (sym:resolve-symbol :next-source :command)
+                                                                                  :modes (modes prompt-buffer)))
+                              :buffer prompt-buffer
+                              '(funcall (sym:resolve-symbol :next-source :command)))
+                            (:nbutton
+                              :class (unless (prompter:adjacent-source prompt-buffer :steps -1 :source source) "inactive")
+                              :id "up-arrow"
+                              :text (:raw (gethash "up-arrow.svg" *static-data*))
+                              :title (format nil "Previous source (~a)" (binding-keys (sym:resolve-symbol :previous-source :command)
+                                                                                      :modes (modes prompt-buffer)))
+                              :buffer prompt-buffer
+                              '(funcall (sym:resolve-symbol :previous-source :command)))
+                            (prompter:name source)
+                            (if (prompter:hide-suggestion-count-p source)
+                                ""
+                                (suggestion-and-mark-count prompt-buffer
+                                                           (prompter:suggestions source)
+                                                           (prompter:marks source)
+                                                           :enable-marks-p (prompter:enable-marks-p source)))
+                            (if (prompter:ready-p source)
+                                ""
+                                "(In progress...)"))
+                           (:div
+                            (:nbutton
+                              :text (:raw (gethash "plus-minus.svg" *static-data*))
+                              :title (format nil "Toggle attributes display (~a)" (binding-keys (sym:resolve-symbol 'toggle-attributes-display :command)
+                                                                                                :modes (modes prompt-buffer)))
+                              :buffer prompt-buffer
+                              `(funcall (sym:resolve-symbol :toggle-attributes-display :command)
+                                        :source ,source))))
                      (:raw (render-attributes source prompt-buffer))))))
       (ps-eval :buffer prompt-buffer
         (setf (ps:@ (nyxt/ps:qs document "#suggestions") |innerHTML|)