enhance: add context menu for properties

src/main/frontend/components/content.cljs

@@ -5,6 +5,7 @@
             [frontend.components.editor :as editor]
             [frontend.components.page-menu :as page-menu]
             [frontend.components.export :as export]
+            [frontend.components.property :as property]
             [frontend.context.i18n :refer [t]]
             [frontend.db :as db]
             [frontend.extensions.srs :as srs]
@@ -15,6 +16,7 @@
             [frontend.handler.notification :as notification]
             [frontend.handler.page :as page-handler]
             [frontend.handler.common.developer :as dev-common-handler]
+            [frontend.handler.property :as property-handler]
             [frontend.mixins :as mixins]
             [frontend.state :as state]
             [frontend.ui :as ui]
@@ -355,6 +357,23 @@
            (ui/menu-link options title nil)
            title))])))
 
+(rum/defc property-custom-context-menu-content
+  [block property]
+  (let [repo (state/get-current-repo)]
+    [:.menu-links-wrapper
+    (ui/menu-link
+     {:key "Configure this property"
+      :on-click (fn []
+                  (state/set-modal! #(property/property-config repo property)))}
+     (t :context-menu/configure-property)
+     nil)
+    (ui/menu-link
+     {:key "Delete this property"
+      :on-click (fn []
+                  (property-handler/remove-property! repo block (:block/uuid property)))}
+     (t :context-menu/delete-property)
+     nil)]))
+
 ;; TODO: content could be changed
 ;; Also, keyboard bindings should only be activated after
 ;; blocks were already selected.
@@ -368,9 +387,19 @@
                       (let [target (gobj/get e "target")
                             block-el (.closest target ".bullet-container[blockid]")
                             block-id (some-> block-el (.getAttribute "blockid"))
+                            property-id (some-> target (.getAttribute "propertyid"))
+                            property-block-id (some-> target (.getAttribute "blockid"))
                             {:keys [block block-ref]} (state/sub :block-ref/context)
                             {:keys [page]} (state/sub :page-title/context)]
                         (cond
+                          (and property-id property-block-id)
+                          (let [block (db/entity [:block/uuid (uuid property-block-id)])
+                                property (db/entity [:block/uuid (uuid property-id)])]
+                            (when (and block property)
+                              (common-handler/show-custom-context-menu!
+                               e
+                               (property-custom-context-menu-content block property))))
+
                           page
                           (do
                             (common-handler/show-custom-context-menu!

src/main/frontend/components/property.cljs

@@ -299,24 +299,16 @@
        [:a.add-button-link.block {:style {:margin-left -4}}
         (ui/icon "circle-plus")]]])))
 
-(rum/defcs property-key < (rum/local false ::show-close?)
+(rum/defcs property-key
   [state block property]
-  (let [repo (state/get-current-repo)
-        *show-close? (::show-close? state)]
+  (let [repo (state/get-current-repo)]
     [:div.relative
-     {:on-mouse-over (fn [_] (reset! *show-close? true))
-      :on-mouse-out (fn [_] (reset! *show-close? false))}
-     [:a.mr-2
-      {:title (str "Configure property: " (:block/original-name property))
+     [:a.property-key
+      {:propertyid (:block/uuid property)
+       :blockid (:block/uuid block)
+       :title (str "Configure property: " (:block/original-name property))
        :on-click (fn [] (state/set-modal! #(property-config repo property)))}
-      (:block/original-name property)]
-     (when @*show-close?
-       [:div.absolute.top-0.right-0
-        [:a.fade-link.fade-in.py-2.px-1
-         {:title "Remove this property"
-          :on-click (fn [_e]
-                      (property-handler/remove-property! repo block (:block/uuid property)))}
-         (ui/icon "x")]])]))
+      (:block/original-name property)]]))
 
 (rum/defcs multiple-value-item < (rum/local false ::show-close?)
   [state entity property items item {:keys [dom-id editor-id

src/resources/dicts/en.edn

@@ -248,6 +248,8 @@
  :context-menu/input-template-name "What's the template's name?"
  :context-menu/template-include-parent-block "Including the parent block in the template?"
  :context-menu/template-exists-warning "Template already exists!"
+ :context-menu/delete-property "Delete property"
+ :context-menu/configure-property "Configure property"
  :settings-page/git-tip "If you have Logseq Sync enabled, you can view a page's edit history directly. This section is for tech-savvy only."
  :settings-page/git-desc-1 "To view page's edit history, click the three horizontal dots in the top-right corner and select \"View page history\"."
  :settings-page/git-desc-2 "For professional users, Logseq also supports using "