Skip to content

Commit 239c1b8

Browse files
AeledfyrAeledfyr
committed
chore: add <SettingsGroup> to auto-group settings blocks
1 parent 9645755 commit 239c1b8

File tree

11 files changed

+143
-220
lines changed

11 files changed

+143
-220
lines changed

‎src/components/settings/ActivityStatus.tsx‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { FlexColumn, FlexRow } from "../ui/Flexbox";
1313
import useStore from "@/chat-api/store/useStore";
1414
import Breadcrumb, { BreadcrumbItem } from "../ui/Breadcrumb";
1515
import { t } from "@nerimity/i18lite";
16-
import SettingsBlock from "../ui/settings-block/SettingsBlock";
16+
import SettingsBlock, { SettingsGroup } from "../ui/settings-block/SettingsBlock";
1717
import { Notice } from "../ui/Notice/Notice";
1818
import {
1919
electronWindowAPI,
@@ -293,12 +293,11 @@ function ProgramOptions() {
293293
};
294294

295295
return (
296-
<FlexColumn>
296+
<SettingsGroup>
297297
<SettingsBlock
298298
icon="gamepad"
299299
label={t("settings.activity.activityStatus")}
300300
description={t("settings.activity.activityStatusDescription")}
301-
header={!!addedPrograms().length}
302301
>
303302
<Show when={addedPrograms().length + 1} keyed>
304303
<DropDown
@@ -313,10 +312,7 @@ function ProgramOptions() {
313312

314313
<For each={addedPrograms()}>
315314
{(item, i) => (
316-
<Block
317-
borderTopRadius={false}
318-
borderBottomRadius={i() === addedPrograms().length - 1}
319-
>
315+
<Block>
320316
<FlexRow
321317
gap={12}
322318
class={css`
@@ -365,7 +361,7 @@ function ProgramOptions() {
365361
</Block>
366362
)}
367363
</For>
368-
</FlexColumn>
364+
</SettingsGroup>
369365
);
370366
}
371367

@@ -419,26 +415,25 @@ const EditActivityStatusModal = (props: {
419415
value={newValues().name}
420416
onText={(v) => setValues({ ...newValues(), name: v })}
421417
/>
422-
<div>
418+
<SettingsGroup>
423419
<SettingsBlock
424-
header={showEmojiPicker()}
425420
label={t("settings.activity.activityStatusModal.emoji")}
426421
icon={emojiUrl() ? undefined : "face"}
427422
iconSrc={emojiUrl()}
428423
onClick={() => setShowEmojiPicker(!showEmojiPicker())}
429424
onClickIcon="keyboard_arrow_down"
430425
/>
431-
<div
432-
style={{
433-
background: "rgba(255, 255, 255, 0.05)",
434-
"margin-top": "-1px",
435-
}}
436-
>
437-
<Show when={showEmojiPicker()}>
426+
<Show when={showEmojiPicker()}>
427+
<Block
428+
style={{
429+
"margin-top": "-1px",
430+
padding: "0",
431+
}}
432+
>
438433
<EmojiPicker close={() => {}} onClick={emojiPicked} />
439-
</Show>
440-
</div>
441-
</div>
434+
</Block>
435+
</Show>
436+
</SettingsGroup>
442437
</FlexColumn>
443438
</Modal.Body>
444439
<Modal.Footer>
@@ -569,7 +564,6 @@ const LastFmActivity = () => {
569564
<SettingsBlock
570565
label={t("settings.activity.lastfmActivity")}
571566
description={t("settings.activity.lastfmActivityDescription")}
572-
header
573567
>
574568
<FlexColumn gap={6}>
575569
<Input

‎src/components/settings/BadgeSettings.tsx‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,13 @@ import { t } from "@nerimity/i18lite";
99
import { electronWindowAPI } from "@/common/Electron";
1010
import { addBit, Bitwise, USER_BADGES, UserBadge } from "@/chat-api/Bitwise";
1111
import { RawUser } from "@/chat-api/RawData";
12-
import SettingsBlock from "../ui/settings-block/SettingsBlock";
12+
import SettingsBlock, { SettingsGroup } from "../ui/settings-block/SettingsBlock";
1313
import { SelfUser } from "@/chat-api/events/connectionEventTypes";
1414
import Avatar from "../ui/Avatar";
1515
import { Notice } from "../ui/Notice/Notice";
1616
import { cn } from "@/common/classNames";
1717
import Icon from "../ui/icon/Icon";
18+
import Block from "../ui/settings-block/Block";
1819

1920
const Container = styled("div")`
2021
display: flex;
@@ -97,21 +98,17 @@ const BadgesPreview = (props: { badges: Bitwise[]; price: number }) => {
9798

9899
return (
99100
<Show when={user()}>
100-
<div>
101+
<SettingsGroup>
101102
<SettingsBlock
102-
header
103103
label={t("settings.badges.price", { price: `$${props.price}` })}
104104
icon="favorite"
105105
/>
106-
<div
106+
<Block
107107
class={css`
108108
display: grid;
109109
grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
110110
gap: 6px;
111-
background: rgba(255, 255, 255, 0.05);
112111
justify-items: center;
113-
border-bottom-left-radius: 8px;
114-
border-bottom-right-radius: 8px;
115112
padding: 6px;
116113
`}
117114
>
@@ -125,8 +122,8 @@ const BadgesPreview = (props: { badges: Bitwise[]; price: number }) => {
125122
/>
126123
)}
127124
</For>
128-
</div>
129-
</div>
125+
</Block>
126+
</SettingsGroup>
130127
</Show>
131128
);
132129
};
@@ -206,22 +203,18 @@ const BadgeItem = (props: {
206203

207204
const SupportMethodBlock = () => {
208205
return (
209-
<div>
206+
<SettingsGroup>
210207
<SettingsBlock
211208
label={t("settings.badges.supportMethods")}
212209
icon="info"
213-
header
214210
/>
215211
<SettingsBlock
216212
label="Ko-Fi"
217-
borderBottomRadius={false}
218-
borderTopRadius={false}
219213
iconSrc="/assets/kofi.svg"
220214
href="https://ko-fi.com/supertiger"
221215
hrefBlank
222216
/>
223217
<SettingsBlock
224-
borderTopRadius={false}
225218
class={css`
226219
img {
227220
border-radius: 50%;
@@ -232,6 +225,6 @@ const SupportMethodBlock = () => {
232225
href="https://boosty.to/supertigerdev/donate"
233226
hrefBlank
234227
/>
235-
</div>
228+
</SettingsGroup>
236229
);
237230
};

‎src/components/settings/CallSettings.tsx‎

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
onMount,
88
Show
99
} from "solid-js";
10-
import { css, styled } from "solid-styled-components";
10+
import { styled } from "solid-styled-components";
1111
import useStore from "@/chat-api/store/useStore";
1212
import {
1313
StorageKeys,
@@ -16,7 +16,7 @@ import {
1616
} from "@/common/localStorage";
1717
import Breadcrumb, { BreadcrumbItem } from "../ui/Breadcrumb";
1818
import { t } from "@nerimity/i18lite";
19-
import SettingsBlock from "../ui/settings-block/SettingsBlock";
19+
import SettingsBlock, { SettingsGroup } from "../ui/settings-block/SettingsBlock";
2020
import DropDown, { DropDownItem } from "../ui/drop-down/DropDown";
2121
import { Notice } from "../ui/Notice/Notice";
2222
import { electronWindowAPI } from "@/common/Electron";
@@ -27,6 +27,7 @@ import Button from "../ui/Button";
2727
import { downKeys, useGlobalKey } from "@/common/GlobalKey";
2828
import { toast } from "../ui/custom-portal/CustomPortal";
2929
import Checkbox from "../ui/Checkbox";
30+
import Block from "../ui/settings-block/Block";
3031

3132
const Container = styled("div")`
3233
display: flex;
@@ -146,11 +147,10 @@ function InputDevices() {
146147
);
147148

148149
return (
149-
<div>
150+
<SettingsGroup>
150151
<SettingsBlock
151152
icon="mic"
152153
label={t("settings.call.inputDevices")}
153-
borderBottomRadius={!supportedConstraints().length}
154154
>
155155
<DropDown
156156
items={dropDownItem()}
@@ -161,11 +161,10 @@ function InputDevices() {
161161
/>
162162
</SettingsBlock>
163163
<For each={supportedConstraints()}>
164-
{(constraint, i) => (
164+
{(constraint) => (
165165
<CheckboxOption
166166
constraint={constraint}
167167
checked={constraints()[constraint.key]}
168-
bottomBorder={i() === supportedConstraints().length - 1}
169168
onChange={(val) => {
170169
setConstraints({
171170
...constraints(),
@@ -175,7 +174,7 @@ function InputDevices() {
175174
/>
176175
)}
177176
</For>
178-
</div>
177+
</SettingsGroup>
179178
);
180179
}
181180

@@ -222,33 +221,25 @@ function OutputDevices() {
222221
);
223222
}
224223

225-
const InputModeRadioBoxContainer = styled(FlexColumn)`
226-
background: rgba(255, 255, 255, 0.05);
227-
padding: 10px;
228-
border-bottom-left-radius: 6px;
229-
border-bottom-right-radius: 6px;
230-
padding-left: 50px;
231-
`;
232-
233224
function InputMode() {
234225
const [inputMode, setInputMode] = useVoiceInputMode();
235226
const store = useStore();
236227

237228
const isInCall = () => store.voiceUsers.currentUser()?.channelId;
238229

239230
return (
240-
<div>
231+
<SettingsGroup>
241232
<SettingsBlock
242233
icon="steppers"
243234
label={t("settings.call.inputMode")}
244-
header
245235
/>
246-
<InputModeRadioBoxContainer
236+
<Block
247237
onClick={() => {
248238
if (isInCall()) {
249239
toast(t("settings.call.leaveCall"));
250240
}
251241
}}
242+
style={{ "padding-left": "50px" }}
252243
>
253244
<RadioBox
254245
style={isInCall() ? { "pointer-events": "none" } : {}}
@@ -260,8 +251,8 @@ function InputMode() {
260251
{ id: "PTT", label: t("settings.call.pushToTalk") }
261252
]}
262253
/>
263-
</InputModeRadioBoxContainer>
264-
</div>
254+
</Block>
255+
</SettingsGroup>
265256
);
266257
}
267258

@@ -355,16 +346,13 @@ function CheckboxOption(props: {
355346
constraint: AvailableConstraint;
356347
onChange: (checked: boolean) => void;
357348
checked: boolean;
358-
bottomBorder?: boolean;
359349
}) {
360350
return (
361351
<SettingsBlock
362352
icon={props.constraint.icon}
363353
label={t(props.constraint.label)}
364-
borderTopRadius={false}
365354
description={props.constraint.description}
366355
onClick={() => props.onChange?.(!props.checked)}
367-
borderBottomRadius={props.bottomBorder}
368356
>
369357
<Checkbox checked={props.checked} />
370358
</SettingsBlock>

‎src/components/settings/ConnectionsSettings.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@ import { styled } from "solid-styled-components";
44
import useStore from "@/chat-api/store/useStore";
55
import Breadcrumb, { BreadcrumbItem } from "../ui/Breadcrumb";
66
import { t } from "@nerimity/i18lite";
7-
import SettingsBlock from "../ui/settings-block/SettingsBlock";
7+
import SettingsBlock, { SettingsGroup } from "../ui/settings-block/SettingsBlock";
88
import Button from "../ui/Button";
99
import {
1010
createGoogleAccountLink,
1111
unlinkAccountWithGoogle,
1212
} from "@/chat-api/services/UserService";
13-
import { FlexColumn, FlexRow } from "../ui/Flexbox";
1413
import {
1514
OAuth2AuthorizedApplication,
1615
OAuth2AuthorizedApplications,
@@ -67,9 +66,8 @@ function ThirdPartyConnections() {
6766
});
6867

6968
return (
70-
<FlexColumn>
69+
<SettingsGroup>
7170
<SettingsBlock
72-
header={connections().length > 0}
7371
icon="info"
7472
label={t("settings.connections.thirdParty.title")}
7573
>
@@ -78,25 +76,23 @@ function ThirdPartyConnections() {
7876
</Text>
7977
</SettingsBlock>
8078
<For each={connections()}>
81-
{(connection, i) => (
79+
{(connection) => (
8280
<ThirdPartyConnectionItem
8381
onUnauthorize={() => {
8482
setConnections(
8583
connections().filter((c) => c.id !== connection.id)
8684
);
8785
}}
8886
connection={connection}
89-
borderBottomRadius={i() === connections().length - 1}
9087
/>
9188
)}
9289
</For>
93-
</FlexColumn>
90+
</SettingsGroup>
9491
);
9592
}
9693

9794
const ThirdPartyConnectionItem = (props: {
9895
connection: OAuth2AuthorizedApplication;
99-
borderBottomRadius: boolean;
10096
onUnauthorize: () => void;
10197
}) => {
10298
const application = () => props.connection.application;
@@ -118,7 +114,6 @@ const ThirdPartyConnectionItem = (props: {
118114

119115
return (
120116
<SettingsBlock
121-
borderTopRadius={false}
122117
label={application().name}
123118
icon={
124119
<Avatar

0 commit comments

Comments
 (0)