Skip to content

Commit 41ec8c5

Browse files
authored
refactor: nest detailed notification sub-settings (#1785)
Signed-off-by: Adam Setch <[email protected]>
1 parent b80aa9f commit 41ec8c5

File tree

2 files changed

+178
-162
lines changed

2 files changed

+178
-162
lines changed

src/renderer/components/settings/AppearanceSettings.tsx

Lines changed: 82 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -167,95 +167,97 @@ export const AppearanceSettings: FC = () => {
167167
tooltip={
168168
<Stack direction="vertical" gap="condensed">
169169
<Text>
170-
Enrich notifications with author or last commenter profile
171-
information, state and GitHub-like colors.
170+
Enrich notifications with detailed user and state information.
171+
</Text>
172+
<Text>
173+
You may also choose to display{' '}
174+
<Text as="strong">notification metric pills</Text> or{' '}
175+
<Text as="strong">notification numbers</Text>.
172176
</Text>
173177
<Text className="text-gitify-caution">
174178
⚠️ Users with a large number of unread notifications <i>may</i>{' '}
175-
experience rate limiting under certain circumstances. Disable
176-
this setting if you experience this.
179+
experience rate limiting under certain circumstances. Please
180+
disable this setting if you experience this.
177181
</Text>
178182
</Stack>
179183
}
180184
/>
181185

182-
<Checkbox
183-
name="showPills"
184-
label="Show notification metric pills"
185-
checked={settings.showPills}
186-
onChange={(evt) => updateSetting('showPills', evt.target.checked)}
187-
tooltip={
188-
<Box>
189-
<Text>Show notification metric pills for:</Text>
190-
<Box className="pl-4">
191-
<ul>
192-
<li className="flex items-center gap-1">
193-
<IssueClosedIcon size={Size.SMALL} />
194-
linked issues
195-
</li>
196-
<li className="flex items-center gap-1">
197-
<CheckIcon size={Size.SMALL} />
198-
pr reviews
199-
</li>
200-
<li className="flex items-center gap-1">
201-
<CommentIcon size={Size.SMALL} />
202-
comments
203-
</li>
204-
<li className="flex items-center gap-1">
205-
<TagIcon size={Size.SMALL} />
206-
labels
207-
</li>
208-
<li className="flex items-center gap-1">
209-
<MilestoneIcon size={Size.SMALL} />
210-
milestones
211-
</li>
212-
</ul>
213-
</Box>
214-
</Box>
215-
}
216-
/>
186+
<Box className="pl-6" hidden={!settings.detailedNotifications}>
187+
<Stack direction="vertical" gap="condensed">
188+
<Checkbox
189+
name="showPills"
190+
label="Show notification metric pills"
191+
checked={settings.showPills}
192+
onChange={(evt) => updateSetting('showPills', evt.target.checked)}
193+
tooltip={
194+
<Stack direction="vertical" gap="condensed">
195+
<Text>Show notification metric pills for:</Text>
196+
<Box className="pl-4">
197+
<ul>
198+
<li className="flex items-center gap-1">
199+
<IssueClosedIcon size={Size.SMALL} />
200+
linked issues
201+
</li>
202+
<li className="flex items-center gap-1">
203+
<CheckIcon size={Size.SMALL} />
204+
pr reviews
205+
</li>
206+
<li className="flex items-center gap-1">
207+
<CommentIcon size={Size.SMALL} />
208+
comments
209+
</li>
210+
<li className="flex items-center gap-1">
211+
<TagIcon size={Size.SMALL} />
212+
labels
213+
</li>
214+
<li className="flex items-center gap-1">
215+
<MilestoneIcon size={Size.SMALL} />
216+
milestones
217+
</li>
218+
</ul>
219+
</Box>
220+
</Stack>
221+
}
222+
/>
217223

218-
<Checkbox
219-
name="showNumber"
220-
label="Show number"
221-
checked={settings.detailedNotifications && settings.showNumber}
222-
onChange={(evt) =>
223-
settings.detailedNotifications &&
224-
updateSetting('showNumber', evt.target.checked)
225-
}
226-
disabled={!settings.detailedNotifications}
227-
tooltip={
228-
<Stack direction="vertical" gap="condensed">
229-
<Text>Show GitHub number for:</Text>
230-
<Box className="pl-4">
231-
<ul>
232-
<li>
233-
<Stack direction="horizontal" gap="condensed">
234-
<CommentIcon size={Size.SMALL} />
235-
Discussion
236-
</Stack>
237-
</li>
238-
<li>
239-
<Stack direction="horizontal" gap="condensed">
240-
<IssueClosedIcon size={Size.SMALL} />
241-
Issue
242-
</Stack>
243-
</li>
244-
<li>
245-
<Stack direction="horizontal" gap="condensed">
246-
<GitPullRequestIcon size={Size.SMALL} />
247-
Pull Request
248-
</Stack>
249-
</li>
250-
</ul>
251-
</Box>
252-
<Text className="text-gitify-caution">
253-
⚠️ This setting requires{' '}
254-
<Text as="strong">Detailed Notifications</Text> to be enabled.
255-
</Text>
256-
</Stack>
257-
}
258-
/>
224+
<Checkbox
225+
name="showNumber"
226+
label="Show notification number"
227+
checked={settings.showNumber}
228+
onChange={(evt) =>
229+
updateSetting('showNumber', evt.target.checked)
230+
}
231+
tooltip={
232+
<Stack direction="vertical" gap="condensed">
233+
<Text>Show GitHub number for:</Text>
234+
<Box className="pl-4">
235+
<ul>
236+
<li>
237+
<Stack direction="horizontal" gap="condensed">
238+
<CommentIcon size={Size.SMALL} />
239+
Discussion
240+
</Stack>
241+
</li>
242+
<li>
243+
<Stack direction="horizontal" gap="condensed">
244+
<IssueClosedIcon size={Size.SMALL} />
245+
Issue
246+
</Stack>
247+
</li>
248+
<li>
249+
<Stack direction="horizontal" gap="condensed">
250+
<GitPullRequestIcon size={Size.SMALL} />
251+
Pull Request
252+
</Stack>
253+
</li>
254+
</ul>
255+
</Box>
256+
</Stack>
257+
}
258+
/>
259+
</Stack>
260+
</Box>
259261

260262
<Checkbox
261263
name="showAccountHeader"

src/renderer/routes/__snapshots__/Settings.test.tsx.snap

Lines changed: 96 additions & 82 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)