enhance(ui): polish assets action bar

src/main/frontend/components/block.cljs

@@ -310,21 +310,8 @@
             metadata)]
          (when-not breadcrumb?
            [:<>
-            [:.asset-overlay]
             (let [image-src (fs/asset-path-normalize src)]
               [:.asset-action-bar {:aria-hidden "true"}
-               ;; the image path bar
-               (when (util/electron?)
-                 [:button.asset-action-btn.text-left
-                  {:title (t (if local? :asset/show-in-folder :asset/open-in-browser))
-                   :tabIndex "-1"
-                   :on-pointer-down util/stop
-                   :on-click (fn [e]
-                               (util/stop e)
-                               (if local?
-                                 (ipc/ipc "openFileInFolder" image-src)
-                                 (js/window.apis.openExternal image-src)))}
-                  image-src])
                [:.flex
                 (when-not config/publishing?
                   [:button.asset-action-btn
@@ -374,7 +361,20 @@
                   :on-pointer-down util/stop
                   :on-click open-lightbox}
 
-                 (ui/icon "maximize")]]])])]))))
+                 (ui/icon "maximize")]
+
+                (when (util/electron?)
+                  [:button.asset-action-btn
+                   {:title (t (if local? :asset/show-in-folder :asset/open-in-browser))
+                    :tabIndex "-1"
+                    :on-pointer-down util/stop
+                    :on-click (fn [e]
+                                (util/stop e)
+                                (if local?
+                                  (ipc/ipc "openFileInFolder" image-src)
+                                  (js/window.apis.openExternal image-src)))}
+                   (shui/tabler-icon "folder-pin")])
+                ]])])]))))
 
 (rum/defc audio-cp [src]
   ;; Change protocol to allow media fragment uris to play

src/main/frontend/components/block.css

@@ -27,48 +27,17 @@
   }
 
   .asset-container {
-    @apply relative inline-block;
-
-    margin-top: 0.5rem;
-
-    .asset-overlay {
-      @apply inset-0 absolute p-2;
-
-      opacity: 0;
-      transition: opacity 300ms;
-      background-image: linear-gradient(var(--ls-primary-background-color), transparent);
-      pointer-events: none;
-    }
+    @apply relative inline-block mt-2 group;
 
     .asset-action-bar {
-      @apply top-0 left-0 w-full flex absolute items-start justify-between px-1;
-
-      transition: opacity 300ms;
-      opacity: 0;
-      color: var(--ls-primary-text-color);
+      @apply top-0.5 right-0.5 absolute flex items-center
+      border bg-gray-02 rounded opacity-0 transition-opacity
+      group-hover:opacity-100 group-active:opacity-100;
     }
 
     .asset-action-btn {
-      @apply m-1 p-1 rounded truncate;
-
-      opacity: 0.8;
-      user-select: none;
-
-      &:hover,
-      &:active {
-        opacity: 1;
-      }
-    }
-
-    &:hover,
-    &:focus {
-      .asset-overlay {
-        opacity: 0.9;
-      }
-
-      .asset-action-bar {
-        opacity: 1;
-      }
+      @apply m-1 p-0.5 truncate flex items-center opacity-70 select-none
+      hover:opacity-90 active:opacity-60;
     }
   }