enhance(ui): add icons for the slash command items

feat/asset-sync
charlie 2024-07-08 19:08:28 +08:00
parent 0b3c59c155
commit afe122a17a
3 changed files with 63 additions and 39 deletions

File diff suppressed because one or more lines are too long

View File

@ -149,8 +149,12 @@
(mapv (fn [m] (mapv (fn [m]
(let [command (if db-based? (let [command (if db-based?
[:div.flex.flex-row.items-center.gap-2 m [:div.text-xs.opacity-50 "Status"]] [:div.flex.flex-row.items-center.gap-2 m [:div.text-xs.opacity-50 "Status"]]
m)] m)
[command (->marker m) (str "Set status to " m)]))))] icon (case m
"Canceled" "Cancelled"
"Doing" "InProgress50"
m)]
[command (->marker m) (str "Set status to " m) icon]))))]
(when (seq result) (when (seq result)
(update result 0 (fn [v] (conj v "TASK")))))) (update result 0 (fn [v] (conj v "TASK"))))))
@ -174,7 +178,7 @@
(let [command (if db-based? (let [command (if db-based?
[:div.flex.flex-row.items-center.gap-2 item [:div.text-xs.opacity-50 "Priority"]] [:div.flex.flex-row.items-center.gap-2 item [:div.text-xs.opacity-50 "Priority"]]
item)] item)]
[command (->priority item) (str "Set priority to " item)]))))] [command (->priority item) (str "Set priority to " item) (str "priorityLvl" item)]))))]
(when (seq result) (when (seq result)
(update result 0 (fn [v] (conj v "PRIORITY")))))) (update result 0 (fn [v] (conj v "PRIORITY"))))))
@ -190,7 +194,7 @@
[] []
(mapv (fn [level] (mapv (fn [level]
(let [heading (str "Heading " level)] (let [heading (str "Heading " level)]
[heading (->heading level)])) (range 1 7))) [heading (->heading level) heading (str "h-" level)])) (range 1 7)))
(defonce *matched-commands (atom nil)) (defonce *matched-commands (atom nil))
(defonce *initial-commands (atom nil)) (defonce *initial-commands (atom nil))
@ -272,30 +276,34 @@
[[:editor/input page-ref/left-and-right-brackets {:backward-pos 2}] [[:editor/input page-ref/left-and-right-brackets {:backward-pos 2}]
[:editor/search-page]] [:editor/search-page]]
"Create a backlink to a page" "Create a backlink to a page"
:icon/pageRef
"BASIC"] "BASIC"]
["Page embed" (embed-page) "Embed a page here"] ["Page embed" (embed-page) "Embed a page here" :icon/xEmbed]
["Block reference" [[:editor/input block-ref/left-and-right-parens {:backward-pos 2}] ["Block reference" [[:editor/input block-ref/left-and-right-parens {:backward-pos 2}]
[:editor/search-block :reference]] "Create a backlink to a block"] [:editor/search-block :reference]]
["Block embed" (embed-block) "Embed a block here"]] "Create a backlink to a block" :icon/blockRef]
["Block embed" (embed-block) "Embed a block here" :icon/xEmbed]]
;; format ;; format
[["Link" (link-steps) "Create a HTTP link" "FORMAT"] [["Link" (link-steps) "Create a HTTP link" :icon/link "FORMAT"]
["Image link" (image-link-steps) "Create a HTTP link to a image"] ["Image link" (image-link-steps) "Create a HTTP link to a image" :icon/photoLink]
(when (state/markdown?) (when (state/markdown?)
["Underline" [[:editor/input "<ins></ins>" ["Underline" [[:editor/input "<ins></ins>"
{:last-pattern command-trigger {:last-pattern command-trigger
:backward-pos 6}]] "Create a underline text decoration"]) :backward-pos 6}]] "Create a underline text decoration"
:icon/underline])
["Code block" [[:editor/input "```\n```\n" {:type "block" ["Code block" [[:editor/input "```\n```\n" {:type "block"
:backward-pos 5 :backward-pos 5
:only-breakline? true}] :only-breakline? true}]
[:editor/select-code-block-mode]] "Insert code block"]] [:editor/select-code-block-mode]] "Insert code block"
:icon/code]]
(headings) (headings)
;; task management ;; task management
(get-statuses) (get-statuses)
[["Deadline" [[:editor/clear-current-slash] [["Deadline" [[:editor/clear-current-slash]
[:editor/set-deadline]]] [:editor/set-deadline]] "" :icon/calendar-stats]
(when-not db? (when-not db?
["Scheduled" [[:editor/clear-current-slash] ["Scheduled" [[:editor/clear-current-slash]
[:editor/set-scheduled]]])] [:editor/set-scheduled]]])]
@ -307,33 +315,38 @@
[["Tomorrow" [["Tomorrow"
#(get-page-ref-text (date/tomorrow)) #(get-page-ref-text (date/tomorrow))
"Insert the date of tomorrow" "Insert the date of tomorrow"
:icon/tomorrow
"TIME & DATE"] "TIME & DATE"]
["Yesterday" #(get-page-ref-text (date/yesterday)) "Insert the date of yesterday"] ["Yesterday" #(get-page-ref-text (date/yesterday)) "Insert the date of yesterday" :icon/yesterday]
["Today" #(get-page-ref-text (date/today)) "Insert the date of today"] ["Today" #(get-page-ref-text (date/today)) "Insert the date of today" :icon/calendar]
["Current time" #(date/get-current-time) "Insert current time"] ["Current time" #(date/get-current-time) "Insert current time" :icon/clock]
["Date picker" [[:editor/show-date-picker]] "Pick a date and insert here"]] ["Date picker" [[:editor/show-date-picker]] "Pick a date and insert here" :icon/calendar-dots]]
;; order list ;; order list
[["Number list" [["Number list"
[[:editor/clear-current-slash] [[:editor/clear-current-slash]
[:editor/toggle-own-number-list]] [:editor/toggle-own-number-list]]
"Number list" "Number list"
:icon/numberedParents
"LIST TYPE"] "LIST TYPE"]
["Number children" [[:editor/clear-current-slash] ["Number children" [[:editor/clear-current-slash]
[:editor/toggle-children-number-list]] "Number children"]] [:editor/toggle-children-number-list]]
"Number children"
:icon/numberedChildren]]
;; advanced ;; advanced
[["Query" [["Query"
[[:editor/input "{{query }}" {:backward-pos 2}] [[:editor/input "{{query }}" {:backward-pos 2}]
[:editor/exit]] [:editor/exit]]
query-doc query-doc
:icon/query
"ADVANCED"] "ADVANCED"]
(when-not db? (when-not db?
["Zotero" (zotero-steps) "Import Zotero journal article"]) ["Zotero" (zotero-steps) "Import Zotero journal article"])
["Query function" [[:editor/input "{{function }}" {:backward-pos 2}]] "Create a query function"] ["Query function" [[:editor/input "{{function }}" {:backward-pos 2}]] "Create a query function" :icon/queryCode]
["Calculator" [[:editor/input "```calc\n\n```" {:type "block" ["Calculator" [[:editor/input "```calc\n\n```" {:type "block"
:backward-pos 4}] :backward-pos 4}]
[:codemirror/focus]] "Insert a calculator"] [:codemirror/focus]] "Insert a calculator" :icon/calculator]
(when-not db? (when-not db?
["Draw" (fn [] ["Draw" (fn []
(let [file (draw/file-name) (let [file (draw/file-name)
@ -346,24 +359,29 @@
(cond (cond
(and (util/electron?) (config/local-file-based-graph? (state/get-current-repo))) (and (util/electron?) (config/local-file-based-graph? (state/get-current-repo)))
["Upload an asset" [[:editor/click-hidden-file-input :id]] "Upload file types like image, pdf, docx, etc.)"]) ["Upload an asset" [[:editor/click-hidden-file-input :id]] "Upload file types like image, pdf, docx, etc.)" :icon/upload])
(when-not db? (when-not db?
["Template" [[:editor/input command-trigger nil] ["Template" [[:editor/input command-trigger nil]
[:editor/search-template]] "Insert a created template here"]) [:editor/search-template]] "Insert a created template here"
:icon/template])
["Embed HTML " (->inline "html")] ["Embed HTML " (->inline "html") "" :icon/htmlEmbed]
["Embed Video URL" [[:editor/input "{{video }}" {:last-pattern command-trigger ["Embed Video URL" [[:editor/input "{{video }}" {:last-pattern command-trigger
:backward-pos 2}]]] :backward-pos 2}]] ""
:icon/videoEmbed]
["Embed Youtube timestamp" [[:youtube/insert-timestamp]]] ["Embed Youtube timestamp" [[:youtube/insert-timestamp]] "" :icon/videoEmbed]
["Embed Twitter tweet" [[:editor/input "{{tweet }}" {:last-pattern command-trigger ["Embed Twitter tweet" [[:editor/input "{{tweet }}" {:last-pattern command-trigger
:backward-pos 2}]]] :backward-pos 2}]] ""
:icon/xEmbed]
(when db? (when db?
["Add new property" [[:editor/clear-current-slash] ["Add new property" [[:editor/clear-current-slash]
[:editor/new-property]]])] [:editor/new-property]] ""
:icon/cube-plus])]
(let [commands (cond->> @*extend-slash-commands (let [commands (cond->> @*extend-slash-commands
db? db?
@ -374,7 +392,9 @@
;; Allow user to modify or extend, should specify how to extend. ;; Allow user to modify or extend, should specify how to extend.
(state/get-commands) (state/get-commands)
(state/get-plugins-slash-commands)) (when-let [plugin-commands (some->> (state/get-plugins-slash-commands)
(mapv #(vec (concat % [nil :icon/puzzle]))))]
(update plugin-commands 0 (fn [v] (conj v "PLUGINS")))))
(remove nil?) (remove nil?)
(util/distinct-by-last-wins first)))) (util/distinct-by-last-wins first))))

View File

@ -46,14 +46,20 @@
matched matched
{:get-group-name {:get-group-name
(fn [item] (fn [item]
(when (= (count item) 4) (last item))) (when (= (count item) 5) (last item)))
:item-render :item-render
(fn [item] (fn [item]
(let [command-name (first item) (let [command-name (first item)
command-doc (get item 2) command-doc (get item 2)
plugin-id (get-in item [1 1 1 :pid]) plugin-id (get-in item [1 1 1 :pid])
doc (when (state/show-command-doc?) command-doc)] doc (when (state/show-command-doc?) command-doc)
icon-name (some-> item (get 3) (name))
command-name (if icon-name
[:span.flex.items-center.gap-1
(shui/tabler-icon icon-name)
[:strong.font-normal command-name]]
command-name)]
(cond (cond
(or plugin-id (vector? doc)) (or plugin-id (vector? doc))
[:div.has-help [:div.has-help
@ -64,9 +70,7 @@
:fixed-position? true :fixed-position? true
:position "right"} :position "right"}
[:small (svg/help-circle)])) [:small (svg/help-circle)]))]
(when plugin-id
[:small {:title (str plugin-id)} (ui/icon "puzzle")])]
(string? doc) (string? doc)
[:div {:title doc} [:div {:title doc}
@ -98,12 +102,12 @@
(when (= :block-commands (state/get-editor-action)) (when (= :block-commands (state/get-editor-action))
(let [matched (util/react *matched-block-commands)] (let [matched (util/react *matched-block-commands)]
(ui/auto-complete (ui/auto-complete
(map first matched) (map first matched)
{:on-chosen (fn [chosen] {:on-chosen (fn [chosen]
(editor-handler/insert-command! id (get (into {} matched) chosen) (editor-handler/insert-command! id (get (into {} matched) chosen)
format format
{:last-pattern commands/angle-bracket {:last-pattern commands/angle-bracket
:command :block-commands})) :command :block-commands}))
:class "black"})))) :class "black"}))))
(defn- page-on-chosen-handler (defn- page-on-chosen-handler