First step in introducing actions bar

This commit is contained in:
Lim Chee Aun 2024-01-14 00:32:08 +08:00
parent 35974cc89c
commit 0ebc0fa64c
3 changed files with 118 additions and 3 deletions

View file

@ -1766,6 +1766,64 @@ a.card:is(:hover, :focus):visited {
color: var(--green-color); color: var(--green-color);
} }
/* ACTIONS */
.status-actions {
display: flex;
position: absolute;
top: 4px;
right: 4px;
background-color: var(--bg-color);
border-radius: 8px;
z-index: 1;
border: 1px solid var(--outline-color);
box-shadow: 0 2px 6px -3px var(--drop-shadow-color);
overflow: clip;
opacity: 0;
pointer-events: none;
transform: translateX(8px);
transform-origin: right center;
transition: all 0.1s ease-out 0.3s, border-color 0.3s ease-out;
button.plain {
color: var(--text-insignificant-color);
backdrop-filter: none;
padding: 10px;
border-radius: 8px;
&:is(:hover, :focus) {
color: var(--text-color);
background-color: var(--bg-faded-color);
filter: none !important;
box-shadow: inset 0 0 0 2px var(--bg-color);
}
&.reblog-button.checked {
color: var(--reblog-color);
}
&.favourite-button.checked {
color: var(--favourite-color);
}
&.bookmark-button.checked {
color: var(--link-color);
}
}
&:hover {
border-color: var(--outline-hover-color);
}
&:hover,
.status:hover &:not(:hover),
&.open {
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
}
/* BADGE */ /* BADGE */
.status-badge { .status-badge {

View file

@ -125,6 +125,7 @@ function Status({
onStatusLinkClick = () => {}, onStatusLinkClick = () => {},
showFollowedTags, showFollowedTags,
allowContextMenu, allowContextMenu,
showActionsBar,
}) { }) {
if (skeleton) { if (skeleton) {
return ( return (
@ -640,7 +641,7 @@ function Status({
}; };
} }
const menuInstanceRef = useRef(); const actionsRef = useRef();
const StatusMenuItems = ( const StatusMenuItems = (
<> <>
{!isSizeLarge && ( {!isSizeLarge && (
@ -1317,6 +1318,56 @@ function Status({
{StatusMenuItems} {StatusMenuItems}
</ControlledMenu> </ControlledMenu>
)} )}
{showActionsBar && size !== 'l' && !previewMode && !readOnly && (
<div class="status-actions" ref={actionsRef}>
<StatusButton
size="s"
title="Reply"
alt="Reply"
class="reply-button"
icon="comment"
iconSize="m"
onClick={replyStatus}
/>
<StatusButton
size="s"
checked={favourited}
title={['Like', 'Unlike']}
alt={['Like', 'Liked']}
class="favourite-button"
icon="heart"
iconSize="m"
count={favouritesCount}
onClick={favouriteStatus}
/>
<Menu2
portal={{
target: document.querySelector('.status-deck') || document.body,
}}
align="end"
gap={4}
overflow="auto"
viewScroll="close"
menuButton={({ open }) => {
if (actionsRef.current) {
actionsRef.current.classList.toggle('open', open);
}
return (
<button
type="button"
title="More"
class="plain more-button"
onClick={(e) => e.preventDefault()}
>
<Icon icon="more2" size="m" alt="More" />
</button>
);
}}
>
{StatusMenuItems}
</Menu2>
</div>
)}
{size !== 'l' && ( {size !== 'l' && (
<div class="status-badge"> <div class="status-badge">
{reblogged && <Icon class="reblog" icon="rocket" size="s" />} {reblogged && <Icon class="reblog" icon="rocket" size="s" />}
@ -2212,7 +2263,9 @@ function StatusButton({
class: className, class: className,
title, title,
alt, alt,
size,
icon, icon,
iconSize = 'l',
onClick, onClick,
...props ...props
}) { }) {
@ -2240,7 +2293,9 @@ function StatusButton({
<button <button
type="button" type="button"
title={buttonTitle} title={buttonTitle}
class={`plain ${className} ${checked ? 'checked' : ''}`} class={`plain ${size ? 'small' : ''} ${className} ${
checked ? 'checked' : ''
}`}
onClick={(e) => { onClick={(e) => {
if (!onClick) return; if (!onClick) return;
e.preventDefault(); e.preventDefault();
@ -2249,7 +2304,7 @@ function StatusButton({
}} }}
{...props} {...props}
> >
<Icon icon={icon} size="l" alt={iconAlt} /> <Icon icon={icon} size={iconSize} alt={iconAlt} />
{!!count && ( {!!count && (
<> <>
{' '} {' '}

View file

@ -845,6 +845,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
enableTranslate enableTranslate
onMediaClick={handleMediaClick} onMediaClick={handleMediaClick}
onStatusLinkClick={handleStatusLinkClick} onStatusLinkClick={handleStatusLinkClick}
showActionsBar={!!descendant}
/> />
)} )}
{ancestor && repliesCount > 1 && ( {ancestor && repliesCount > 1 && (
@ -1400,6 +1401,7 @@ function SubComments({
size="s" size="s"
enableTranslate enableTranslate
onMediaClick={handleMediaClick} onMediaClick={handleMediaClick}
showActionsBar
/> />
{!r.replies?.length && r.repliesCount > 0 && ( {!r.replies?.length && r.repliesCount > 0 && (
<div class="replies-link"> <div class="replies-link">