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" && } - +