enhance(ui): polish highlight area image actions bar

src/main/frontend/extensions/pdf/assets.cljs

@@ -416,34 +416,35 @@
       (when @*src
         (let [asset-block (some-> block (:logseq.property.pdf/hl-image))
               resize-metadata (some-> asset-block :logseq.property.asset/resize-metadata)]
-          [:span.hl-area
+          [:div.hl-area
            (when-let [w (:width resize-metadata)] {:style {:width w}})
-           [:span.actions.py-2.px-1
-            (when-let [asset-uuid (and (config/db-based-graph?)
-                                    (some-> asset-block (:block/uuid)))]
-              [:button.asset-action-btn.px-1
-               {:title (t :asset/ref-block)
-                :tabIndex "-1"
-                :on-pointer-down util/stop
-                :on-click (fn [] (route-handler/redirect-to-page! asset-uuid))}
-               (ui/icon "file-symlink")])
-
-            (when-not config/publishing?
-              [:button.asset-action-btn.px-1
-               {:title (t :asset/copy)
-                :tabIndex "-1"
-                :on-pointer-down util/stop
-                :on-click (fn [e]
-                            (util/stop e)
-                            (-> (util/copy-image-to-clipboard (common-config/remove-asset-protocol @*src))
-                              (p/then #(notification/show! "Copied!" :success))))}
-               (ui/icon "copy")])
-
-            [:button.asset-action-btn.px-1
-             {:title (t :asset/maximize)
-              :tabIndex "-1"
-              :on-pointer-down util/stop
-              :on-click open-lightbox}
-
-             (ui/icon "maximize")]]
-           [:img.w-full {:src @*src}]])))))
+           [:div.asset-container
+            [:span.asset-action-bar
+             (when-let [asset-uuid (and (config/db-based-graph?)
+                                     (some-> asset-block (:block/uuid)))]
+               [:button.asset-action-btn
+                {:title (t :asset/ref-block)
+                 :tabIndex "-1"
+                 :on-pointer-down util/stop
+                 :on-click (fn [] (route-handler/redirect-to-page! asset-uuid))}
+                (ui/icon "file-symlink")])
+
+             (when-not config/publishing?
+               [:button.asset-action-btn
+                {:title (t :asset/copy)
+                 :tabIndex "-1"
+                 :on-pointer-down util/stop
+                 :on-click (fn [e]
+                             (util/stop e)
+                             (-> (util/copy-image-to-clipboard (common-config/remove-asset-protocol @*src))
+                               (p/then #(notification/show! "Copied!" :success))))}
+                (ui/icon "copy")])
+
+             [:button.asset-action-btn
+              {:title (t :asset/maximize)
+               :tabIndex "-1"
+               :on-pointer-down util/stop
+               :on-click open-lightbox}
+
+              (ui/icon "maximize")]]
+            [:img.w-full {:src @*src}]]])))))

src/main/frontend/extensions/pdf/pdf.css

@@ -828,13 +828,11 @@ html[data-theme=dark] {
     .hl-area {
       @apply relative block cursor-text border rounded-md overflow-hidden mt-1;
 
-      .actions {
-        @apply absolute right-1 top-1 flex opacity-0 transition-opacity;
-      }
+      > .asset-container {
+        @apply mt-0;
 
-      &:hover {
-        .actions {
-          @apply opacity-100;
+        > .asset-action-bar {
+          @apply top-1 right-1;
         }
       }