mirror of
https://github.com/cheeaun/phanpy.git
synced 2025-01-23 17:16:26 +01:00
First step in introducing actions bar
This commit is contained in:
parent
35974cc89c
commit
0ebc0fa64c
3 changed files with 118 additions and 3 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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 && (
|
||||||
<>
|
<>
|
||||||
{' '}
|
{' '}
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in a new issue