Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add bold titles option to post appearance settings #1136

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions src/features/post/inFeed/compact/CompactPost.tsx
Original file line number Diff line number Diff line change
@@ -50,8 +50,9 @@ const Content = styled.div`
flex: 1;
`;

const Title = styled.span<{ isRead: boolean }>`
const Title = styled.span<{ isRead: boolean; isBold: boolean }>`
font-size: 0.9375em;
font-weight: ${({ isBold }) => (isBold ? "bold" : "normal")};

${({ isRead }) =>
isRead &&
@@ -144,6 +145,10 @@ export default function CompactPost({
(state) => state.settings.appearance.compact.showVotingButtons,
);

const boldTitles = useAppSelector(
(state) => state.settings.appearance.posts.boldTitles,
);

const hasBeenRead: boolean =
useAppSelector((state) => state.post.postReadById[post.post.id]) ||
post.read;
@@ -166,7 +171,7 @@ export default function CompactPost({
/>
</Aside>
)}
<Title isRead={hasBeenRead}>
<Title isRead={hasBeenRead} isBold={boldTitles}>
<InlineMarkdown>{post.post.name}</InlineMarkdown>{" "}
{nsfw && <Nsfw />}
</Title>
10 changes: 6 additions & 4 deletions src/features/post/inFeed/large/LargePost.tsx
Original file line number Diff line number Diff line change
@@ -36,7 +36,9 @@ const Container = styled.div`
${maxWidthCss}
`;

const Title = styled.div<{ isRead: boolean }>`
const Title = styled.div<{ isRead: boolean; isBold: boolean }>`
font-weight: ${({ isBold }) => (isBold ? "bold" : "normal")};

${({ isRead }) =>
isRead &&
css`
@@ -119,8 +121,8 @@ export default function LargePost({
() => (post.post.body ? findLoneImage(post.post.body) : undefined),
[post],
);
const blurNsfw = useAppSelector(
(state) => state.settings.appearance.posts.blurNsfw,
const { blurNsfw, boldTitles } = useAppSelector(
(state) => state.settings.appearance.posts,
);

function renderPostBody() {
@@ -168,7 +170,7 @@ export default function LargePost({
<Container>
<ModeratableItemBannerOutlet />

<Title isRead={hasBeenRead}>
<Title isRead={hasBeenRead} isBold={boldTitles}>
<InlineMarkdown>{post.post.name}</InlineMarkdown>{" "}
{isNsfw(post) && <Nsfw />}
</Title>
22 changes: 21 additions & 1 deletion src/features/settings/appearance/posts/Posts.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
import { IonLabel, IonList } from "@ionic/react";
import { IonLabel, IonList, IonToggle } from "@ionic/react";
import { InsetIonItem } from "../../../user/Profile";
import { ListHeader } from "../../shared/formatting";
import BlurNsfw from "./BlurNsfw";
import PostSize from "./PostSize";
import { useAppDispatch, useAppSelector } from "../../../../store";
import { setBoldTitles } from "../../settingsSlice";

export default function Posts() {
const dispatch = useAppDispatch();

const { boldTitles } = useAppSelector(
(state) => state.settings.appearance.posts,
);

return (
<>
<ListHeader>
@@ -12,6 +21,17 @@ export default function Posts() {
<IonList inset>
<PostSize />
<BlurNsfw />

<InsetIonItem>
<IonToggle
checked={boldTitles}
onIonChange={(e) =>
dispatch(setBoldTitles(e.detail.checked ? true : false))
}
>
Bold Titles
</IonToggle>
</InsetIonItem>
</IonList>
</>
);
9 changes: 9 additions & 0 deletions src/features/settings/settingsSlice.tsx
Original file line number Diff line number Diff line change
@@ -64,6 +64,7 @@ interface SettingsState {
posts: {
blurNsfw: PostBlurNsfwType;
type: PostAppearanceType;
boldTitles: boolean;
};
compact: {
thumbnailsPosition: CompactThumbnailPositionType;
@@ -141,6 +142,7 @@ const initialState: SettingsState = {
posts: {
blurNsfw: OPostBlurNsfw.InFeed,
type: OPostAppearanceType.Large,
boldTitles: false,
},
compact: {
thumbnailsPosition: OCompactThumbnailPositionType.Left,
@@ -291,6 +293,10 @@ export const appearanceSlice = createSlice({
state.appearance.posts.blurNsfw = action.payload;
// Per user setting is updated in StoreProvider
},
setBoldTitles(state, action: PayloadAction<boolean>) {
state.appearance.posts.boldTitles = action.payload;
db.setSetting("bold_titles", action.payload);
},
setFilteredKeywords(state, action: PayloadAction<string[]>) {
state.blocks.keywords = action.payload;
// Per user setting is updated in StoreProvider
@@ -512,6 +518,7 @@ export const fetchSettingsFromDatabase = createAsyncThunk<SettingsState>(
const profile_label = await db.getSetting("profile_label");
const post_appearance_type = await db.getSetting("post_appearance_type");
const blur_nsfw = await db.getSetting("blur_nsfw");
const bold_titles = await db.getSetting("bold_titles");
const compact_thumbnail_position_type = await db.getSetting(
"compact_thumbnail_position_type",
);
@@ -566,6 +573,7 @@ export const fetchSettingsFromDatabase = createAsyncThunk<SettingsState>(
posts: {
type: post_appearance_type ?? initialState.appearance.posts.type,
blurNsfw: blur_nsfw ?? initialState.appearance.posts.blurNsfw,
boldTitles: bold_titles ?? initialState.appearance.posts.boldTitles,
},
compact: {
thumbnailsPosition:
@@ -695,6 +703,7 @@ export const {
setPureBlack,
setDefaultFeed,
setNoSubscribedInFeed,
setBoldTitles,
} = appearanceSlice.actions;

export default appearanceSlice.reducer;
1 change: 1 addition & 0 deletions src/services/db.ts
Original file line number Diff line number Diff line change
@@ -287,6 +287,7 @@ export type SettingValueTypes = {
default_post_sort: SortType;
default_post_sort_by_feed: SortType;
remember_community_sort: boolean;
bold_titles: boolean;
};

export interface ISettingItem<T extends keyof SettingValueTypes> {