mirror of
https://github.com/cheeaun/phanpy.git
synced 2025-02-16 23:31:19 +03:00
Improve context menu design
This commit is contained in:
Lim Chee Aun
parent
731f91122b
commit
50eb9b9f59
3 changed files with 119 additions and 48 deletions
24
src/app.css
24
src/app.css
|
|
@ -1100,10 +1100,16 @@ body:has(.status-deck) .media-post-link {
|
|||
line-height: 1;
|
||||
padding: 8px 16px !important;
|
||||
transition: all 0.1s ease-in-out;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-decoration: none;
|
||||
}
|
||||
.szh-menu .szh-menu__item span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.05;
|
||||
}
|
||||
.szh-menu .szh-menu__item * {
|
||||
vertical-align: middle;
|
||||
|
|
@ -1141,6 +1147,22 @@ body:has(.status-deck) .media-post-link {
|
|||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.szh-menu .menu-double-lines {
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.szh-menu .menu-double-lines span {
|
||||
white-space: normal;
|
||||
}
|
||||
.szh-menu .menu-horizontal {
|
||||
display: flex;
|
||||
}
|
||||
.szh-menu .menu-horizontal .szh-menu__item {
|
||||
flex: 1;
|
||||
}
|
||||
.szh-menu .szh-menu__item .menu-shortcut {
|
||||
opacity: 0.5;
|
||||
font-weight: normal;
|
||||
|
|
|
|||
|
|
@ -68,7 +68,14 @@ const ICONS = {
|
|||
|
||||
const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');
|
||||
|
||||
function Icon({ icon, size = 'm', alt, title, class: className = '' }) {
|
||||
function Icon({
|
||||
icon,
|
||||
size = 'm',
|
||||
alt,
|
||||
title,
|
||||
class: className = '',
|
||||
style = {},
|
||||
}) {
|
||||
if (!icon) return null;
|
||||
|
||||
const iconSize = SIZES[size];
|
||||
|
|
@ -97,6 +104,7 @@ function Icon({ icon, size = 'm', alt, title, class: className = '' }) {
|
|||
display: 'inline-block',
|
||||
overflow: 'hidden',
|
||||
lineHeight: 0,
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{iconData && (
|
||||
|
|
|
|||
|
|
@ -373,7 +373,7 @@ function Status({
|
|||
</MenuHeader>
|
||||
<MenuLink to={instance ? `/${instance}/s/${id}` : `/s/${id}`}>
|
||||
<Icon icon="arrow-right" />
|
||||
View post and replies
|
||||
<span>View post by @{username || acct}</span>
|
||||
</MenuLink>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -408,7 +408,12 @@ function Status({
|
|||
} catch (e) {}
|
||||
}}
|
||||
>
|
||||
<Icon icon="rocket" />
|
||||
<Icon
|
||||
icon="rocket"
|
||||
style={{
|
||||
color: reblogged && 'var(--reblog-color)',
|
||||
}}
|
||||
/>
|
||||
<span>{reblogged ? 'Unboost' : 'Boost…'}</span>
|
||||
</MenuItem>
|
||||
)}
|
||||
|
|
@ -421,7 +426,12 @@ function Status({
|
|||
} catch (e) {}
|
||||
}}
|
||||
>
|
||||
<Icon icon="heart" />
|
||||
<Icon
|
||||
icon="heart"
|
||||
style={{
|
||||
color: favourited && 'var(--favourite-color)',
|
||||
}}
|
||||
/>
|
||||
<span>{favourited ? 'Unfavourite' : 'Favourite'}</span>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
|
|
@ -433,62 +443,69 @@ function Status({
|
|||
} catch (e) {}
|
||||
}}
|
||||
>
|
||||
<Icon icon="bookmark" />
|
||||
<Icon
|
||||
icon="bookmark"
|
||||
style={{
|
||||
color: bookmarked && 'var(--favourite-color)',
|
||||
}}
|
||||
/>
|
||||
<span>{bookmarked ? 'Unbookmark' : 'Bookmark'}</span>
|
||||
</MenuItem>
|
||||
{enableTranslate && (
|
||||
<MenuItem
|
||||
disabled={forceTranslate}
|
||||
onClick={() => {
|
||||
setForceTranslate(true);
|
||||
}}
|
||||
>
|
||||
<Icon icon="translate" />
|
||||
<span>Translate</span>
|
||||
</MenuItem>
|
||||
)}
|
||||
<MenuDivider />
|
||||
</>
|
||||
)}
|
||||
<MenuItem href={url} target="_blank">
|
||||
<Icon icon="external" />
|
||||
<span>Open link to post</span>
|
||||
<small class="menu-double-lines">{nicePostURL(url)}</small>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
// Copy url to clipboard
|
||||
try {
|
||||
navigator.clipboard.writeText(url);
|
||||
showToast('Link copied');
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
showToast('Unable to copy link');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon icon="link" />
|
||||
<span>Copy link to post</span>
|
||||
</MenuItem>
|
||||
{enableTranslate && (
|
||||
<div class="menu-horizontal">
|
||||
<MenuItem
|
||||
disabled={forceTranslate}
|
||||
onClick={() => {
|
||||
setForceTranslate(true);
|
||||
// Copy url to clipboard
|
||||
try {
|
||||
navigator.clipboard.writeText(url);
|
||||
showToast('Link copied');
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
showToast('Unable to copy link');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon icon="translate" />
|
||||
<span>Translate</span>
|
||||
<Icon icon="link" />
|
||||
<span>Copy</span>
|
||||
</MenuItem>
|
||||
)}
|
||||
{navigator?.share &&
|
||||
navigator?.canShare?.({
|
||||
url,
|
||||
}) && (
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
try {
|
||||
navigator.share({
|
||||
url,
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert("Sharing doesn't seem to work.");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon icon="share" />
|
||||
<span>Share…</span>
|
||||
</MenuItem>
|
||||
)}
|
||||
{navigator?.share &&
|
||||
navigator?.canShare?.({
|
||||
url,
|
||||
}) && (
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
try {
|
||||
navigator.share({
|
||||
url,
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert("Sharing doesn't seem to work.");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon icon="share" />
|
||||
<span>Share…</span>
|
||||
</MenuItem>
|
||||
)}
|
||||
</div>
|
||||
{isSelf && (
|
||||
<>
|
||||
<MenuDivider />
|
||||
|
|
@ -546,6 +563,9 @@ function Status({
|
|||
onContextMenu={(e) => {
|
||||
if (size === 'l') return;
|
||||
if (e.metaKey) return;
|
||||
console.log('context menu', e);
|
||||
const link = e.target.closest('a');
|
||||
if (link && /^https?:\/\//.test(link.getAttribute('href'))) return;
|
||||
e.preventDefault();
|
||||
setContextMenuAnchorPoint({
|
||||
x: e.clientX,
|
||||
|
|
@ -1537,6 +1557,27 @@ function _unfurlMastodonLink(instance, url) {
|
|||
return Promise.any([remoteInstanceFetch, mastoSearchFetch]);
|
||||
}
|
||||
|
||||
function nicePostURL(url) {
|
||||
const urlObj = new URL(url);
|
||||
const { host, pathname } = urlObj;
|
||||
const path = pathname.replace(/\/$/, '');
|
||||
// split only first slash
|
||||
const [_, username, restPath] = path.match(/\/(@[^\/]+)\/(.*)/) || [];
|
||||
return (
|
||||
<>
|
||||
{host}
|
||||
{username ? (
|
||||
<>
|
||||
/{username}
|
||||
<span class="more-insignificant">/{restPath}</span>
|
||||
</>
|
||||
) : (
|
||||
<span class="more-insignificant">{path}</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const unfurlMastodonLink = throttle(_unfurlMastodonLink);
|
||||
|
||||
const div = document.createElement('div');
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue