enhance: mod+p to set icon and able to set block's icon

A block can use its tags' icon if it doesn't has its own icon.

deps/db/src/logseq/db/frontend/property.cljs

@@ -324,4 +324,4 @@
   "Indicates whether built-in property can be seen and edited by users"
   [entity]
   ;; No need to do :built-in? check yet since user properties can't set this
-  (get-in entity [:block/schema :public?]))
+  (get-in entity [:block/schema :public?]))

src/main/frontend/components/block.cljs

@@ -22,6 +22,7 @@
             [frontend.components.icon :as icon]
             [frontend.components.property :as property-component]
             [frontend.components.property.value :as pv]
+            [frontend.components.icon :as icon-component]
             [frontend.config :as config]
             [frontend.context.i18n :refer [t]]
             [frontend.date :as date]
@@ -1896,6 +1897,10 @@
 
      (every? #(= % ["Horizontal_Rule"]) ast-body))))
 
+(defn- get-block-icon
+  [block]
+  (some :logseq.property/icon (cons block (:block/tags block))))
+
 (rum/defcs block-control < rum/reactive
   [state config block {:keys [uuid block-id collapsed? *control-show? edit? selected?]}]
   (let [doc-mode?          (state/sub :document/mode?)
@@ -1949,15 +1954,20 @@
                                      " hide-inner-bullet")
                                    (when order-list? " as-order-list typed-list"))}
 
-                      (if link?
-                        (ui/icon "link" {:size 14})
-                        [:span.bullet (cond->
-                                       {:blockid (str uuid)}
-                                        selected?
-                                        (assoc :class "selected"))
-                         (when
-                           order-list?
-                           [:label (str order-list-idx ".")])])]]]
+                      (let [icon (get-block-icon block)]
+                        (cond
+                          link?
+                          (ui/icon "link" {:size 14})
+                          icon
+                          (icon-component/icon icon)
+                          :else
+                          [:span.bullet (cond->
+                                         {:blockid (str uuid)}
+                                          selected?
+                                          (assoc :class "selected"))
+                           (when
+                            order-list?
+                             [:label (str order-list-idx ".")])]))]]]
          (cond
            (and (or (mobile-util/native-platform?)
                     (:ui/show-empty-bullets? (state/get-config))

src/main/frontend/components/icon.cljs

@@ -417,30 +417,38 @@
             (:native (first (:skins @*hover))))]])]]))
 
 (rum/defc icon-picker
-  [icon-value {:keys [empty-label disabled? on-chosen icon-props popup-opts]}]
-  (let [content-fn
+  [icon-value {:keys [empty-label disabled? initial-open? on-chosen icon-props popup-opts]}]
+  (let [*trigger-ref (rum/use-ref nil)
+        content-fn
         (if config/publishing?
           (constantly [])
           (fn [{:keys [id]}]
             (icon-search
-              {:on-chosen (fn [e icon-value]
-                            (on-chosen e icon-value)
-                            (shui/popup-hide! id))})))]
+             {:on-chosen (fn [e icon-value]
+                           (on-chosen e icon-value)
+                           (shui/popup-hide! id))})))]
+    (rum/use-effect!
+     (fn []
+       (when initial-open?
+         (js/setTimeout #(some-> (rum/deref *trigger-ref) (.click)) 32)))
+     [initial-open?])
+
     ;; trigger
     (let [has-icon? (not (nil? icon-value))]
       (shui/button
-        {:variant (if has-icon? :ghost :text)
-         :size :sm
-         :class (if has-icon? "px-1 leading-none" "font-normal text-sm px-[0.5px] opacity-50")
-         :on-click (fn [^js e]
-                     (when-not disabled?
-                       (shui/popup-show! (.-target e) content-fn
-                         (medley/deep-merge
-                           {:id :ls-icon-picker
-                            :content-props {:class "ls-icon-picker"
-                                            :onEscapeKeyDown #(.preventDefault %)}}
-                           popup-opts))))}
-        (if has-icon?
-          [:span {:style {:color (or (:color icon-value) "inherit")}}
-           (icon icon-value (merge {:size 18} icon-props))]
-          (or empty-label "Empty"))))))
+       {:ref *trigger-ref
+        :variant (if has-icon? :ghost :text)
+        :size :sm
+        :class (if has-icon? "px-1 leading-none" "font-normal text-sm px-[0.5px] opacity-50")
+        :on-click (fn [^js e]
+                    (when-not disabled?
+                      (shui/popup-show! (.-target e) content-fn
+                                        (medley/deep-merge
+                                         {:id :ls-icon-picker
+                                          :content-props {:class "ls-icon-picker"
+                                                          :onEscapeKeyDown #(.preventDefault %)}}
+                                         popup-opts))))}
+       (if has-icon?
+         [:span {:style {:color (or (:color icon-value) "inherit")}}
+          (icon icon-value (merge {:size 18} icon-props))]
+         (or empty-label "Empty"))))))

src/main/frontend/components/property.cljs

@@ -319,16 +319,20 @@
              [:div.col-span-3.flex.flex-row.items-center.gap-2
               (icon-component/icon-picker icon-value
                                           {:on-chosen (fn [_e icon]
-                                                        (db-property-handler/upsert-property!
-                                                         (:db/ident property)
-                                                         (:block/schema property)
-                                                         {:properties {:logseq.property/icon icon}}))})
+                                                        (p/do!
+                                                         (db-property-handler/upsert-property!
+                                                          (:db/ident property)
+                                                          (:block/schema property)
+                                                          {:properties {:logseq.property/icon icon}})
+                                                         (shui/popup-hide!)))})
 
               (when icon-value
                 [:a.fade-link.flex {:on-click (fn [_e]
-                                                (db-property-handler/remove-block-property!
-                                                 (:db/ident property)
-                                                 :logseq.property/icon))
+                                                (p/do!
+                                                 (db-property-handler/remove-block-property!
+                                                  (:db/ident property)
+                                                  :logseq.property/icon)
+                                                 (shui/popup-hide!)))
                                     :title "Delete this icon"}
                  (ui/icon "X")])])]
 
@@ -936,17 +940,12 @@
                                        (state/set-selection-blocks! [block])
                                        (some-> js/document.activeElement (.blur)))
                                      (d/remove-class! target "ls-popup-closed")))))
-       (let [properties' (cond
-                           (and page? page-configure?)
+       (let [properties' (if (and page? page-configure?)
                            (concat [[:block/tags (:block/tags block)]
                                     [:logseq.property/icon (:logseq.property/icon block)]]
                                    (remove (fn [[k _v]] (contains? #{:block/tags :logseq.property/icon} k)) full-properties))
 
-                           page?
-                           (remove (fn [[k _v]] (contains? #{:logseq.property/icon} k)) full-properties)
-
-                           :else
-                           full-properties)]
+                           (remove (fn [[k _v]] (contains? #{:logseq.property/icon} k)) full-properties))]
          (properties-section block (if class-schema? properties properties') opts))
 
        (rum/with-key (new-property block opts) (str id "-add-property"))])))

src/main/frontend/components/property/value.cljs

@@ -38,22 +38,29 @@
   [:span.inline-flex.items-center.cursor-pointer
    (merge {:class "empty-text-btn" :variant :text} opts) "Empty"])
 
-(rum/defc icon-row < rum/reactive
-  [block]
+(rum/defc icon-row
+  [block editing?]
   (let [icon-value (:logseq.property/icon block)]
     [:div.col-span-3.flex.flex-row.items-center.gap-2
      (icon-component/icon-picker icon-value
                                  {:disabled? config/publishing?
+                                  :initial-open? editing?
                                   :on-chosen (fn [_e icon]
-                                               (db-property-handler/set-block-property!
-                                                (:db/id block)
-                                                :logseq.property/icon
-                                                (select-keys icon [:type :id :color])))})
+                                               (p/do!
+                                                (db-property-handler/set-block-property!
+                                                 (:db/id block)
+                                                 :logseq.property/icon
+                                                 (select-keys icon [:type :id :color]))
+                                                (shui/popup-hide!)
+                                                (shui/dialog-close!)))})
      (when (and icon-value (not config/publishing?))
        [:a.fade-link.flex {:on-click (fn [_e]
-                                       (db-property-handler/remove-block-property!
-                                        (:db/id block)
-                                        :logseq.property/icon))
+                                       (p/do!
+                                        (db-property-handler/remove-block-property!
+                                         (:db/id block)
+                                         :logseq.property/icon)
+                                        (shui/popup-hide!)
+                                        (shui/dialog-close!)))
                            :title "Delete this icon"}
         (ui/icon "X")])]))
 
@@ -762,6 +769,7 @@
   [state block property value* {:keys [container-id editing? on-chosen]
                                 :as opts}]
   (let [property (model/sub-block (:db/id property))
+        block (db/sub-block (:db/id block))
         schema (:block/schema property)
         type (get schema :type :default)
         editing? (or editing?
@@ -774,7 +782,7 @@
                 nil
                 value*)]
     (if (= :logseq.property/icon (:db/ident property))
-      (icon-row block)
+      (icon-row block editing?)
       (if (and select-type?'
                (not (and (not closed-values?) (= type :date))))
         (single-value-select block property value

src/main/frontend/db/async.cljs

@@ -62,7 +62,8 @@
          ;; remove private built-in properties
          (remove #(and (:db/ident %)
                        (db-property/logseq-property? (:db/ident %))
-                       (not (ldb/public-built-in-property? %)))))))
+                       (not (ldb/public-built-in-property? %))
+                       (not= (:db/ident %) :logseq.property/icon))))))
 
 (defn <get-all-properties
   "Returns all public properties as property maps including their