From d71b1a7e36cf97fc1b1d3980aad691aa5647286a Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 10 Jan 2024 01:47:50 +0800
Subject: [PATCH] Test add "more" icon near timestamp
---
src/components/icon.jsx | 1 +
src/components/status.css | 17 ++++++++++++++---
src/components/status.jsx | 1 +
3 files changed, 16 insertions(+), 3 deletions(-)
diff --git a/src/components/icon.jsx b/src/components/icon.jsx
index 1f60dcba..5942cfd1 100644
--- a/src/components/icon.jsx
+++ b/src/components/icon.jsx
@@ -41,6 +41,7 @@ export const ICONS = {
upload: () => import('@iconify-icons/mingcute/upload-3-line'),
gear: () => import('@iconify-icons/mingcute/settings-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'),
popout: () => import('@iconify-icons/mingcute/external-link-line'),
popin: [() => import('@iconify-icons/mingcute/external-link-line'), '180deg'],
diff --git a/src/components/status.css b/src/components/status.css
index 8921b7e5..eb451353 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -364,9 +364,8 @@
vertical-align: middle;
}
.status > .container > .meta :is(.time, .edited) {
- color: inherit;
+ color: var(--text-insignificant-color);
text-align: end;
- opacity: 0.5;
text-decoration: none;
flex-shrink: 0;
margin-left: 4px;
@@ -375,9 +374,21 @@
.status > .container > .meta a.time {
position: relative;
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) {
- text-decoration: underline;
+ .more {
+ transform: scale(1.2);
+ color: var(--link-color);
+ }
}
.status > .container > .meta a.time:active,
.status > .container > .meta a.time.is-open {
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 9c4fd9cc..29914e0c 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1412,6 +1412,7 @@ function Status({
/>
)}{' '}
<RelativeTime datetime={createdAtDate} format="micro" />
+ {showContextMenu && <Icon icon="more2" class="more" />}
</Link>
) : (
// <Menu