From 9c8aff6d320b5eeb3f167331ee997b658b75f0cf Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 24 Mar 2024 17:24:47 +0800
Subject: [PATCH] Show post preview inside Boosted/Liked by modal
And show the menu in more places
---
src/components/generic-accounts.css | 20 ++++++++++++++
src/components/generic-accounts.jsx | 9 +++++++
src/components/modals.jsx | 1 +
src/components/status.jsx | 42 ++++++++++++++++-------------
4 files changed, 53 insertions(+), 19 deletions(-)
diff --git a/src/components/generic-accounts.css b/src/components/generic-accounts.css
index ad33900a..ab82ee97 100644
--- a/src/components/generic-accounts.css
+++ b/src/components/generic-accounts.css
@@ -1,4 +1,24 @@
#generic-accounts-container {
+ .post-preview {
+ --max-height: 120px;
+ max-height: var(--max-height);
+ overflow: hidden;
+ margin-block: 8px;
+ border: 1px solid var(--outline-color);
+ border-radius: 8px;
+ pointer-events: none;
+
+ .status {
+ font-size: calc(var(--text-size) * 0.9);
+ mask-image: linear-gradient(
+ to bottom,
+ black calc(var(--max-height) / 2),
+ transparent calc(var(--max-height) - 8px)
+ );
+ filter: saturate(0.5);
+ }
+ }
+
.accounts-list {
--list-gap: 16px;
list-style: none;
diff --git a/src/components/generic-accounts.jsx b/src/components/generic-accounts.jsx
index 0fdd557e..1b502a94 100644
--- a/src/components/generic-accounts.jsx
+++ b/src/components/generic-accounts.jsx
@@ -12,10 +12,12 @@ import useLocationChange from '../utils/useLocationChange';
import AccountBlock from './account-block';
import Icon from './icon';
import Loader from './loader';
+import Status from './status';
export default function GenericAccounts({
instance,
excludeRelationshipAttrs = [],
+ postID,
onClose = () => {},
}) {
const { masto, instance: currentInstance } = api();
@@ -129,6 +131,8 @@ export default function GenericAccounts({
}
}, [snapStates.reloadGenericAccounts.counter]);
+ const post = states.statuses[postID];
+
return (
<div id="generic-accounts-container" class="sheet" tabindex="-1">
<button type="button" class="sheet-close" onClick={onClose}>
@@ -138,6 +142,11 @@ export default function GenericAccounts({
<h2>{heading || 'Accounts'}</h2>
</header>
<main>
+ {post && (
+ <div class="post-preview">
+ <Status status={post} size="s" readOnly />
+ </div>
+ )}
{accounts.length > 0 ? (
<>
<ul class="accounts-list">
diff --git a/src/components/modals.jsx b/src/components/modals.jsx
index 49437959..17474e92 100644
--- a/src/components/modals.jsx
+++ b/src/components/modals.jsx
@@ -179,6 +179,7 @@ export default function Modals() {
excludeRelationshipAttrs={
snapStates.showGenericAccounts.excludeRelationshipAttrs
}
+ postID={snapStates.showGenericAccounts.postID}
onClose={() => (states.showGenericAccounts = false)}
/>
</Modal>
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 971f07cc..beacb6a9 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -724,25 +724,6 @@ function Status({
const isPinnable = ['public', 'unlisted', 'private'].includes(visibility);
const StatusMenuItems = (
<>
- {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-control-group-horizontal status-menu">
@@ -840,6 +821,29 @@ function Status({
</div>
</>
)}
+ {!isSizeLarge && sameInstance && (isSizeLarge || showActionsBar) && (
+ <MenuDivider />
+ )}
+ {(isSizeLarge || showActionsBar) && (
+ <>
+ <MenuItem
+ onClick={() => {
+ states.showGenericAccounts = {
+ heading: 'Boosted/Liked by…',
+ fetchAccounts: fetchBoostedLikedByAccounts,
+ instance,
+ showReactions: true,
+ postID: sKey,
+ };
+ }}
+ >
+ <Icon icon="react" />
+ <span>
+ Boosted/Liked by<span class="more-insignificant">…</span>
+ </span>
+ </MenuItem>
+ </>
+ )}
{(enableTranslate || !language || differentLanguage) && <MenuDivider />}
{enableTranslate ? (
<div class={supportsTTS ? 'menu-horizontal' : ''}>