Test add "more" icon near timestamp

This commit is contained in:
Lim Chee Aun 2024-01-10 01:47:50 +08:00
parent c47687e2e4
commit d71b1a7e36
3 changed files with 16 additions and 3 deletions

View file

@ -41,6 +41,7 @@ export const ICONS = {
upload: () => import('@iconify-icons/mingcute/upload-3-line'), upload: () => import('@iconify-icons/mingcute/upload-3-line'),
gear: () => import('@iconify-icons/mingcute/settings-3-line'), gear: () => import('@iconify-icons/mingcute/settings-3-line'),
more: () => import('@iconify-icons/mingcute/more-3-line'), more: () => import('@iconify-icons/mingcute/more-3-line'),
more2: () => import('@iconify-icons/mingcute/more-1-fill'),
external: () => import('@iconify-icons/mingcute/external-link-line'), external: () => import('@iconify-icons/mingcute/external-link-line'),
popout: () => import('@iconify-icons/mingcute/external-link-line'), popout: () => import('@iconify-icons/mingcute/external-link-line'),
popin: [() => import('@iconify-icons/mingcute/external-link-line'), '180deg'], popin: [() => import('@iconify-icons/mingcute/external-link-line'), '180deg'],

View file

@ -364,9 +364,8 @@
vertical-align: middle; vertical-align: middle;
} }
.status > .container > .meta :is(.time, .edited) { .status > .container > .meta :is(.time, .edited) {
color: inherit; color: var(--text-insignificant-color);
text-align: end; text-align: end;
opacity: 0.5;
text-decoration: none; text-decoration: none;
flex-shrink: 0; flex-shrink: 0;
margin-left: 4px; margin-left: 4px;
@ -375,9 +374,21 @@
.status > .container > .meta a.time { .status > .container > .meta a.time {
position: relative; position: relative;
overflow: visible; overflow: visible;
display: flex;
align-items: center;
gap: 2px;
font-size: 90%;
.more {
margin-left: 4px;
transition: transform 0.2s ease-out;
}
} }
.status > .container > .meta a.time:is(:hover, :focus) { .status > .container > .meta a.time:is(:hover, :focus) {
text-decoration: underline; .more {
transform: scale(1.2);
color: var(--link-color);
}
} }
.status > .container > .meta a.time:active, .status > .container > .meta a.time:active,
.status > .container > .meta a.time.is-open { .status > .container > .meta a.time.is-open {

View file

@ -1412,6 +1412,7 @@ function Status({
/> />
)}{' '} )}{' '}
<RelativeTime datetime={createdAtDate} format="micro" /> <RelativeTime datetime={createdAtDate} format="micro" />
{showContextMenu && <Icon icon="more2" class="more" />}
</Link> </Link>
) : ( ) : (
// <Menu // <Menu