ryanamay/ModularVencord
1
0
Fork 0
mirror of https://github.com/Vendicated/Vencord.git synced 2024-09-19 22:20:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

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

Browse source
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
1 changed files with 97 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

154
src/plugins/betterActivities/index.tsx
View file

@ -64,6 +64,21 @@ const settings = definePluginSettings({
default: true,
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-");
@ -364,69 +379,94 @@ export default definePlugin({
if (!activities.length) return null;
return (
<div style={{ display: "flex", flexDirection: "column" }}>
<ActivityView
activity={currentActivity}
user={user}
guild={guild}
channelId={channelId}
onClose={onClose}
/>
if (settings.store.allActivitiesStyle === "carousel") {
return (
<div style={{ display: "flex", flexDirection: "column" }}>
<ActivityView
activity={currentActivity}
user={user}
guild={guild}
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
className={cl("controls")}
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
flexDirection: "column",
gap: "5px",
}}
>
<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>
{activities.map((activity, index) => (
<ActivityView
key={index}
activity={activity}
user={user}
guild={guild}
channelId={channelId}
onClose={onClose}
/>
))}
</div>
</div>
);
);
}
},
patches: [