feat(betterActivities): allow showing all activities below each other

This commit is contained in:
D3SOX 2024-05-07 10:04:53 +02:00
parent 58eb7943db
commit 4f0e9312ec
No known key found for this signature in database
GPG key ID: 39EC1673FC37B048

View file

@ -64,6 +64,21 @@ const settings = definePluginSettings({
default: true, default: true,
restartNeeded: false, restartNeeded: false,
}, },
allActivitiesStyle: {
type: OptionType.SELECT,
description: "Style for showing all activities",
options: [
{
default: true,
label: "Carousel",
value: "carousel",
},
{
label: "List",
value: "list",
},
]
}
}); });
const cl = classNameFactory("vc-bactivities-"); const cl = classNameFactory("vc-bactivities-");
@ -364,69 +379,94 @@ export default definePlugin({
if (!activities.length) return null; if (!activities.length) return null;
return ( if (settings.store.allActivitiesStyle === "carousel") {
<div style={{ display: "flex", flexDirection: "column" }}> return (
<ActivityView <div style={{ display: "flex", flexDirection: "column" }}>
activity={currentActivity} <ActivityView
user={user} activity={currentActivity}
guild={guild} user={user}
channelId={channelId} guild={guild}
onClose={onClose} channelId={channelId}
/> onClose={onClose}/>
<div
className={cl("controls")}
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
}}
>
<Tooltip text="Left" tooltipClassName={cl("controls-tooltip")}>{({
onMouseEnter,
onMouseLeave
}) => {
return <span
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={() => {
const index = activities.indexOf(currentActivity!);
if (index - 1 >= 0)
setCurrentActivity(activities[index - 1]);
}}
>
<Caret
disabled={activities.indexOf(currentActivity!) < 1}
direction="left"/>
</span>;
}}</Tooltip>
<div className="carousell">
{activities.map((activity, index) => (
<div
key={"dot--" + index}
onClick={() => setCurrentActivity(activity)}
className={`dot ${currentActivity === activity ? "selected" : ""}`}/>
))}
</div>
<Tooltip text="Right" tooltipClassName={cl("controls-tooltip")}>{({
onMouseEnter,
onMouseLeave
}) => {
return <span
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={() => {
const index = activities.indexOf(currentActivity!);
if (index + 1 < activities.length)
setCurrentActivity(activities[index + 1]);
}}
>
<Caret
disabled={activities.indexOf(currentActivity!) >= activities.length - 1}
direction="right"/>
</span>;
}}</Tooltip>
</div>
</div>
);
} else {
return (
<div <div
className={cl("controls")}
style={{ style={{
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "column",
justifyContent: "space-between", gap: "5px",
}} }}
> >
<Tooltip text="Left" tooltipClassName={cl("controls-tooltip")}>{({ onMouseEnter, onMouseLeave }) => { {activities.map((activity, index) => (
return <span <ActivityView
onMouseEnter={onMouseEnter} key={index}
onMouseLeave={onMouseLeave} activity={activity}
onClick={() => { user={user}
const index = activities.indexOf(currentActivity!); guild={guild}
if (index - 1 >= 0) channelId={channelId}
setCurrentActivity(activities[index - 1]); onClose={onClose}
}} />
> ))}
<Caret
disabled={activities.indexOf(currentActivity!) < 1}
direction="left"
/>
</span>;
}}</Tooltip>
<div className="carousell">
{activities.map((activity, index) => (
<div
key={"dot--" + index}
onClick={() => setCurrentActivity(activity)}
className={`dot ${currentActivity === activity ? "selected" : ""}`}
/>
))}
</div>
<Tooltip text="Right" tooltipClassName={cl("controls-tooltip")}>{({ onMouseEnter, onMouseLeave }) => {
return <span
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={() => {
const index = activities.indexOf(currentActivity!);
if (index + 1 < activities.length)
setCurrentActivity(activities[index + 1]);
}}
>
<Caret
disabled={activities.indexOf(currentActivity!) >= activities.length - 1}
direction="right"
/>
</span>;
}}</Tooltip>
</div> </div>
</div> );
); }
}, },
patches: [ patches: [