mirror of
https://github.com/Vendicated/Vencord.git
synced 2025-01-10 18:06:22 +00:00
feat(betterActivities): allow showing all activities below each other
This commit is contained in:
parent
58eb7943db
commit
4f0e9312ec
1 changed files with 97 additions and 57 deletions
|
@ -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: [
|
||||||
|
|
Loading…
Reference in a new issue