greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

enhance(ui): polish assets action bar

pull/11433/head
charlie 2024-07-25 11:12:18 +08:00
parent 2c4a68f228
commit f8c66f3a1f
2 changed files with 20 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/main/frontend/components/block.cljs
View File

@ -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

43
src/main/frontend/components/block.css
View File

@ -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;
}
}