diff --git a/src/features/community/MoreActions.tsx b/src/features/community/MoreActions.tsx
index 8058dbfdb4..1d115c1dd4 100644
--- a/src/features/community/MoreActions.tsx
+++ b/src/features/community/MoreActions.tsx
@@ -1,4 +1,4 @@
-import { IonActionSheet, IonButton } from "@ionic/react";
+import { IonButton, useIonActionSheet } from "@ionic/react";
import {
createOutline,
heartDislikeOutline,
@@ -10,49 +10,30 @@ import {
eyeOffOutline,
shareOutline,
} from "ionicons/icons";
-import { useState } from "react";
import useHidePosts from "../feed/useHidePosts";
import useCommunityActions from "./useCommunityActions";
import { Community, CommunityView } from "lemmy-js-client";
import { useAppSelector } from "../../store";
import { compact } from "lodash";
import HeaderEllipsisIcon from "../shared/HeaderEllipsisIcon";
+import { buildTogglePostAppearanceButton } from "../feed/SpecialFeedMoreActions";
interface MoreActionsProps {
community: CommunityView | undefined;
}
export default function MoreActions({ community }: MoreActionsProps) {
- const [open, setOpen] = useState(false);
+ if (!community) return buildButtonJsx();
- return (
- <>
- setOpen(true)}>
-
-
-
- {community && (
-
- )}
- >
- );
+ return ;
}
interface MoreActionsActionSheetProps {
community: Community;
- open: boolean;
- setOpen: (open: boolean) => void;
}
-function MoreActionsActionSheet({
- community,
- open,
- setOpen,
-}: MoreActionsActionSheetProps) {
+function MoreActionsWithCommunity({ community }: MoreActionsActionSheetProps) {
+ const [presentActionSheet] = useIonActionSheet();
const {
isSubscribed,
isBlocked,
@@ -70,11 +51,10 @@ function MoreActionsActionSheet({
(state) => state.settings.general.posts.showHiddenInCommunities,
);
- return (
- setOpen(false)}
- />
+ ]),
+ });
+ }
+
+ return buildButtonJsx(present);
+}
+
+function buildButtonJsx(onClick?: () => void) {
+ return (
+
+
+
);
}
diff --git a/src/features/feed/SpecialFeedMoreActions.tsx b/src/features/feed/SpecialFeedMoreActions.tsx
index 2766906af6..5e15b251bc 100644
--- a/src/features/feed/SpecialFeedMoreActions.tsx
+++ b/src/features/feed/SpecialFeedMoreActions.tsx
@@ -1,27 +1,60 @@
import { IonButton, useIonActionSheet } from "@ionic/react";
-import { eyeOffOutline } from "ionicons/icons";
+import {
+ eyeOffOutline,
+ imageOutline,
+ listOutline,
+ shareOutline,
+} from "ionicons/icons";
import useHidePosts from "./useHidePosts";
import HeaderEllipsisIcon from "../shared/HeaderEllipsisIcon";
+import { Share } from "@capacitor/share";
+import { ListingType } from "lemmy-js-client";
+import store from "../../store";
+import { urlSelector } from "../auth/authSelectors";
+import {
+ OPostAppearanceType,
+ setPostAppearance,
+} from "../settings/settingsSlice";
-export default function SpecialFeedMoreActions() {
- const [presentActionSheet] = useIonActionSheet();
+interface SpecialFeedMoreActionsProps {
+ type: ListingType;
+}
+export default function SpecialFeedMoreActions({
+ type,
+}: SpecialFeedMoreActionsProps) {
+ const [presentActionSheet] = useIonActionSheet();
const hidePosts = useHidePosts();
function present() {
- presentActionSheet([
- {
- text: "Hide Read Posts",
- icon: eyeOffOutline,
- handler: () => {
- hidePosts();
+ presentActionSheet({
+ cssClass: "left-align-buttons",
+ buttons: [
+ {
+ text: "Hide Read Posts",
+ icon: eyeOffOutline,
+ handler: () => {
+ hidePosts();
+ },
},
- },
- {
- text: "Cancel",
- role: "cancel",
- },
- ]);
+ buildTogglePostAppearanceButton(),
+ {
+ text: "Share",
+ icon: shareOutline,
+ handler: () => {
+ const url = urlSelector(store.getState());
+
+ Share.share({
+ url: `https://${url}?dataType=Post&listingType=${type}`,
+ });
+ },
+ },
+ {
+ text: "Cancel",
+ role: "cancel",
+ },
+ ],
+ });
}
return (
@@ -30,3 +63,26 @@ export default function SpecialFeedMoreActions() {
);
}
+
+export function buildTogglePostAppearanceButton() {
+ const postAppearanceType = store.getState().settings.appearance.posts.type;
+
+ switch (postAppearanceType) {
+ case OPostAppearanceType.Compact:
+ return {
+ text: "Large Posts",
+ icon: imageOutline,
+ handler: () => {
+ store.dispatch(setPostAppearance(OPostAppearanceType.Large));
+ },
+ };
+ case OPostAppearanceType.Large:
+ return {
+ text: "Compact Posts",
+ icon: listOutline,
+ handler: () => {
+ store.dispatch(setPostAppearance(OPostAppearanceType.Compact));
+ },
+ };
+ }
+}
diff --git a/src/features/settings/appearance/posts/PostSize.tsx b/src/features/settings/appearance/posts/PostSize.tsx
index 7681f86dcc..d069c09b35 100644
--- a/src/features/settings/appearance/posts/PostSize.tsx
+++ b/src/features/settings/appearance/posts/PostSize.tsx
@@ -1,6 +1,7 @@
import { OPostAppearanceType, setPostAppearance } from "../../settingsSlice";
import { useAppSelector } from "../../../../store";
import SettingSelector from "../../shared/SettingSelector";
+import { imageOutline, listOutline } from "ionicons/icons";
export default function PostSize() {
const postsAppearanceType = useAppSelector(
@@ -13,6 +14,10 @@ export default function PostSize() {
selected={postsAppearanceType}
setSelected={setPostAppearance}
options={OPostAppearanceType}
+ optionIcons={{
+ [OPostAppearanceType.Compact]: listOutline,
+ [OPostAppearanceType.Large]: imageOutline,
+ }}
/>
);
}
diff --git a/src/routes/pages/shared/SpecialFeedPage.tsx b/src/routes/pages/shared/SpecialFeedPage.tsx
index 35bcf20b58..5d3a212b18 100644
--- a/src/routes/pages/shared/SpecialFeedPage.tsx
+++ b/src/routes/pages/shared/SpecialFeedPage.tsx
@@ -109,7 +109,7 @@ export default function SpecialFeedPage({ type }: SpecialFeedProps) {
{type === "ModeratorView" && }
-
+