Redesign the context menu
This commit is contained in:
Lim Chee Aun
parent
afd9d2cf97
commit
9a9667d824
49
src/app.css
49
src/app.css
|
|
@ -1804,7 +1804,7 @@ body > .szh-menu-container {
|
|||
align-items: center;
|
||||
line-height: 1.1;
|
||||
padding: 8px 16px !important;
|
||||
transition: all 0.1s ease-in-out;
|
||||
/* transition: all 0.1s ease-in-out; */
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -1851,6 +1851,7 @@ body > .szh-menu-container {
|
|||
}
|
||||
.szh-menu__divider {
|
||||
background-color: var(--divider-color);
|
||||
margin-block: 4px;
|
||||
}
|
||||
.szh-menu .szh-menu__item .menu-grow {
|
||||
flex-grow: 1;
|
||||
|
|
@ -1927,6 +1928,52 @@ body > .szh-menu-container {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.szh-menu {
|
||||
.menu-control-group-horizontal {
|
||||
display: grid;
|
||||
/* auto columns */
|
||||
grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
|
||||
|
||||
.szh-menu__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px !important;
|
||||
gap: 2px;
|
||||
|
||||
.icon {
|
||||
opacity: 1;
|
||||
|
||||
+ span {
|
||||
font-size: 80%;
|
||||
/* line-height: 1.2; */
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
text-overflow: clip;
|
||||
mask-image: linear-gradient(to left, transparent, black 16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-control-group-horizontal:first-child,
|
||||
li[aria-hidden='true'] + .menu-control-group-horizontal {
|
||||
margin-top: -8px;
|
||||
margin-bottom: -4px;
|
||||
|
||||
.szh-menu__item {
|
||||
padding-block: 12px !important;
|
||||
}
|
||||
|
||||
> [class^='szh-menu']:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
}
|
||||
> [class^='szh-menu']:last-child {
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.szh-menu
|
||||
.szh-menu__item--type-checkbox:not(.szh-menu__item--disabled):not(
|
||||
.szh-menu__item--hover
|
||||
|
|
|
|||
|
|
@ -100,4 +100,5 @@ export const ICONS = {
|
|||
building: () => import('@iconify-icons/mingcute/building-5-line'),
|
||||
history: () => import('@iconify-icons/mingcute/history-2-line'),
|
||||
document: () => import('@iconify-icons/mingcute/document-line'),
|
||||
'arrows-right': () => import('@iconify-icons/mingcute/arrows-right-line'),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1836,6 +1836,43 @@ a.card:is(:hover, :focus):visited {
|
|||
animation: bookmarked 1s ease-in-out;
|
||||
}
|
||||
|
||||
/* STATUS MENU */
|
||||
|
||||
.status-menu {
|
||||
.szh-menu__item,
|
||||
.szh-menu__submenu {
|
||||
.icon + span {
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
&.szh-menu__item--hover .icon + span {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.checked {
|
||||
&:not(.szh-menu__item--hover) {
|
||||
color: var(--checked-color) !important;
|
||||
}
|
||||
|
||||
.icon + span {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
box-shadow: inset 0 -2px 0 var(--checked-color),
|
||||
inset 0 -16px 8px -16px var(--checked-color);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-reblog {
|
||||
--checked-color: var(--reblog-color);
|
||||
}
|
||||
.menu-favourite.checked {
|
||||
--checked-color: var(--favourite-color);
|
||||
}
|
||||
.menu-bookmark.checked {
|
||||
--checked-color: var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* ENHANCED CONTENT */
|
||||
|
||||
.status .content pre {
|
||||
|
|
|
|||
|
|
@ -682,82 +682,34 @@ function Status({
|
|||
const actionsRef = useRef();
|
||||
const StatusMenuItems = (
|
||||
<>
|
||||
{!isSizeLarge && (
|
||||
{isSizeLarge && (
|
||||
<>
|
||||
<MenuHeader>
|
||||
<span class="ib">
|
||||
<Icon icon={visibilityIconsMap[visibility]} size="s" />{' '}
|
||||
<span>{visibilityText[visibility]}</span>
|
||||
</span>{' '}
|
||||
<span class="ib">
|
||||
{repliesCount > 0 && (
|
||||
<span>
|
||||
<Icon icon="comment2" alt="Replies" size="s" />{' '}
|
||||
<span>{shortenNumber(repliesCount)}</span>
|
||||
</span>
|
||||
)}{' '}
|
||||
{reblogsCount > 0 && (
|
||||
<span>
|
||||
<Icon icon="rocket" alt="Boosts" size="s" />{' '}
|
||||
<span>{shortenNumber(reblogsCount)}</span>
|
||||
</span>
|
||||
)}{' '}
|
||||
{favouritesCount > 0 && (
|
||||
<span>
|
||||
<Icon icon="heart" alt="Likes" size="s" />{' '}
|
||||
<span>{shortenNumber(favouritesCount)}</span>
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<br />
|
||||
{createdDateText}
|
||||
</MenuHeader>
|
||||
<MenuLink
|
||||
to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
|
||||
onClick={(e) => {
|
||||
onStatusLinkClick(e, status);
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
states.showGenericAccounts = {
|
||||
heading: 'Boosted/Liked by…',
|
||||
fetchAccounts: fetchBoostedLikedByAccounts,
|
||||
instance,
|
||||
showReactions: true,
|
||||
};
|
||||
}}
|
||||
>
|
||||
<Icon icon="arrow-right" />
|
||||
<span>View post by @{username || acct}</span>
|
||||
</MenuLink>
|
||||
<Icon icon="react" />
|
||||
<span>
|
||||
Boosted/Liked by<span class="more-insignificant">…</span>
|
||||
</span>
|
||||
</MenuItem>
|
||||
</>
|
||||
)}
|
||||
{!!editedAt && (
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setShowEdited(id);
|
||||
}}
|
||||
>
|
||||
<Icon icon="history" />
|
||||
<span>
|
||||
Show Edit History
|
||||
<br />
|
||||
<small class="more-insignificant">Edited: {editedDateText}</small>
|
||||
</span>
|
||||
</MenuItem>
|
||||
)}
|
||||
{(!isSizeLarge || !!editedAt) && <MenuDivider />}
|
||||
{isSizeLarge && (
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
states.showGenericAccounts = {
|
||||
heading: 'Boosted/Liked by…',
|
||||
fetchAccounts: fetchBoostedLikedByAccounts,
|
||||
instance,
|
||||
showReactions: true,
|
||||
};
|
||||
}}
|
||||
>
|
||||
<Icon icon="react" />
|
||||
<span>
|
||||
Boosted/Liked by<span class="more-insignificant">…</span>
|
||||
</span>
|
||||
</MenuItem>
|
||||
)}
|
||||
{!isSizeLarge && sameInstance && (
|
||||
<>
|
||||
<div class="menu-horizontal">
|
||||
<div class="menu-control-group-horizontal status-menu">
|
||||
<MenuItem onClick={replyStatus}>
|
||||
<Icon icon="comment" />
|
||||
<span>
|
||||
{repliesCount > 0 ? shortenNumber(repliesCount) : 'Reply'}
|
||||
</span>
|
||||
</MenuItem>
|
||||
<MenuConfirm
|
||||
subMenu
|
||||
confirmLabel={
|
||||
|
|
@ -766,6 +718,7 @@ function Status({
|
|||
<span>{reblogged ? 'Unboost?' : 'Boost to everyone?'}</span>
|
||||
</>
|
||||
}
|
||||
className={`menu-reblog ${reblogged ? 'checked' : ''}`}
|
||||
menuFooter={
|
||||
mediaNoDesc &&
|
||||
!reblogged && (
|
||||
|
|
@ -789,13 +742,14 @@ function Status({
|
|||
} catch (e) {}
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
icon="rocket"
|
||||
style={{
|
||||
color: reblogged && 'var(--reblog-color)',
|
||||
}}
|
||||
/>
|
||||
<span>{reblogged ? 'Unboost' : 'Boost…'}</span>
|
||||
<Icon icon="rocket" />
|
||||
<span>
|
||||
{reblogsCount > 0
|
||||
? shortenNumber(reblogsCount)
|
||||
: reblogged
|
||||
? 'Unboost'
|
||||
: 'Boost…'}
|
||||
</span>
|
||||
</MenuConfirm>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
|
|
@ -810,20 +764,16 @@ function Status({
|
|||
}
|
||||
} catch (e) {}
|
||||
}}
|
||||
className={`menu-favourite ${favourited ? 'checked' : ''}`}
|
||||
>
|
||||
<Icon
|
||||
icon="heart"
|
||||
style={{
|
||||
color: favourited && 'var(--favourite-color)',
|
||||
}}
|
||||
/>
|
||||
<span>{favourited ? 'Unlike' : 'Like'}</span>
|
||||
</MenuItem>
|
||||
</div>
|
||||
<div class="menu-horizontal">
|
||||
<MenuItem onClick={replyStatus}>
|
||||
<Icon icon="comment" />
|
||||
<span>Reply</span>
|
||||
<Icon icon="heart" />
|
||||
<span>
|
||||
{favouritesCount > 0
|
||||
? shortenNumber(favouritesCount)
|
||||
: favourited
|
||||
? 'Unlike'
|
||||
: 'Like'}
|
||||
</span>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
|
|
@ -838,18 +788,15 @@ function Status({
|
|||
}
|
||||
} catch (e) {}
|
||||
}}
|
||||
className={`menu-bookmark ${bookmarked ? 'checked' : ''}`}
|
||||
>
|
||||
<Icon
|
||||
icon="bookmark"
|
||||
style={{
|
||||
color: bookmarked && 'var(--link-color)',
|
||||
}}
|
||||
/>
|
||||
<Icon icon="bookmark" />
|
||||
<span>{bookmarked ? 'Unbookmark' : 'Bookmark'}</span>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{(enableTranslate || !language || differentLanguage) && <MenuDivider />}
|
||||
{enableTranslate ? (
|
||||
<div class={supportsTTS ? 'menu-horizontal' : ''}>
|
||||
<MenuItem
|
||||
|
|
@ -900,7 +847,46 @@ function Status({
|
|||
</div>
|
||||
)
|
||||
)}
|
||||
{((!isSizeLarge && sameInstance) || enableTranslate) && <MenuDivider />}
|
||||
{!isSizeLarge ||
|
||||
((enableTranslate || !language || differentLanguage) && (
|
||||
<MenuDivider />
|
||||
))}
|
||||
{!isSizeLarge && (
|
||||
<>
|
||||
<MenuDivider />
|
||||
<MenuLink
|
||||
to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
|
||||
onClick={(e) => {
|
||||
onStatusLinkClick(e, status);
|
||||
}}
|
||||
>
|
||||
<Icon icon="arrows-right" />
|
||||
<small>
|
||||
View post by @{username || acct}
|
||||
<br />
|
||||
<span class="more-insignificant">
|
||||
{visibilityText[visibility]} • {createdDateText}
|
||||
</span>
|
||||
</small>
|
||||
</MenuLink>
|
||||
</>
|
||||
)}
|
||||
{!!editedAt && (
|
||||
<>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setShowEdited(id);
|
||||
}}
|
||||
>
|
||||
<Icon icon="history" />
|
||||
<small>
|
||||
Show Edit History
|
||||
<br />
|
||||
<span class="more-insignificant">Edited: {editedDateText}</span>
|
||||
</small>
|
||||
</MenuItem>
|
||||
</>
|
||||
)}
|
||||
<MenuItem href={url} target="_blank">
|
||||
<Icon icon="external" />
|
||||
<small class="menu-double-lines">{nicePostURL(url)}</small>
|
||||
|
|
|
|||
Loading…
Reference in a new issue