9752510817

Committed 01 Jul 2024 11:36PM UTC coverage: 97.043% (-0.05%) from 97.092%

Build # 9752510817

Build Type

Pull #1318

github

Committed by

web-flow

Commit Message

Merge bb00f1a5f into 1d10aef7f

Pull Request Pull Request #1318: feat: zoom slider component

Run Details

508 of 520 branches covered (97.69%)

Branch coverage included in aggregate %.

24 of 26 new or added lines in 5 files covered. (92.31%)

6 existing lines in 2 files now uncovered.

1330 of 1374 relevant lines covered (96.8%)

23.18 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

77.78

/src/components/settings/AppearanceSettings.tsx

import {
  CheckIcon,
  CommentIcon,
  IssueClosedIcon,
  MilestoneIcon,
  TagIcon,
} from '@primer/octicons-react';
import { ipcRenderer, webFrame } from 'electron';
import { type FC, useContext, useEffect, useState } from 'react';
import { AppContext } from '../../context/App';
import { Size, Theme } from '../../types';
import { setTheme } from '../../utils/theme';
import { percentageToZoom, zoomToPercentage } from '../../utils/zoom';
import { Checkbox } from '../fields/Checkbox';
import { RadioGroup } from '../fields/RadioGroup';
import { Slider } from '../fields/Slider';

export const AppearanceSettings: FC = () => {
  const { settings, updateSetting } = useContext(AppContext);
  const [zoomLevel, setZoomLevel] = useState(
    zoomToPercentage(webFrame.getZoomLevel()),
  );

  useEffect(() => {
    ipcRenderer.on('gitify:update-theme', (_, updatedTheme: Theme) => {
      if (settings.theme === Theme.SYSTEM) {
        setTheme(updatedTheme);
      }
    });
  }, [settings.theme]);

  window.addEventListener('resize', () => {
    setZoomLevel(zoomToPercentage(webFrame.getZoomLevel()));
  });

  return (
    <fieldset className="mb-3">
      <legend id="appearance" className="mb-1 mt-2 font-semibold">
        Appearance
      </legend>
      <RadioGroup
        name="theme"
        label="Theme:"
        value={settings.theme}
        options={[
          { label: 'System', value: Theme.SYSTEM },
          { label: 'Light', value: Theme.LIGHT },
          { label: 'Dark', value: Theme.DARK },
        ]}
        onChange={(evt) => {
          updateSetting('theme', evt.target.value);
        }}
        className="mb-1"
      />
      <Slider
        defaultValue={[zoomLevel]}
        value={[zoomLevel]}
        max={150}
        min={0}
        step={25}
        name="Zoom"
        onValueChange={(value) =>
          webFrame.setZoomLevel(percentageToZoom(value[0]))
        }
        unit="%"
      />
      <Checkbox
        name="detailedNotifications"
        label="Detailed notifications"
        checked={settings.detailedNotifications}
        onChange={(evt) =>
          updateSetting('detailedNotifications', evt.target.checked)
        }
        tooltip={
          <div>
            <div className="pb-3">
              Enrich notifications with author or last commenter profile
              information, state and GitHub-like colors.
            </div>
            <div className="text-orange-600">
              ⚠️ Users with a large number of unread notifications <i>may</i>{' '}
              experience rate limiting under certain circumstances. Disable this
              setting if you experience this.
            </div>
          </div>
        }
      />
      <Checkbox
        name="showPills"
        label="Show notification metric pills"
        checked={settings.showPills}
        onChange={(evt) => updateSetting('showPills', evt.target.checked)}
        tooltip={
          <div>
            <div>Show notification metric pills for:</div>
            <div className="pl-6">
              <ul className="list-disc">
                <li>
                  <IssueClosedIcon size={Size.MEDIUM} className="pr-1" />
                  linked issues
                </li>
                <li>
                  <CheckIcon size={Size.MEDIUM} className="pr-1" /> pr reviews
                </li>
                <li>
                  <CommentIcon size={Size.MEDIUM} className="pr-1" />
                  comments
                </li>

                <li>
                  <TagIcon size={Size.MEDIUM} className="pr-1" />
                  labels
                </li>
                <li>
                  <MilestoneIcon size={Size.MEDIUM} className="pr-1" />
                  milestones
                </li>
              </ul>
            </div>
          </div>
        }
      />
      <Checkbox
        name="showAccountHostname"
        label="Show account hostname"
        checked={settings.showAccountHostname}
        onChange={(evt) =>
          updateSetting('showAccountHostname', evt.target.checked)
        }
      />
    </fieldset>
  );
};

1	import {	4✔
2	CheckIcon,
3	CommentIcon,
4	IssueClosedIcon,
5	MilestoneIcon,
6	TagIcon,
7	} from '@primer/octicons-react';
8	import { ipcRenderer, webFrame } from 'electron';	4✔
9	import { type FC, useContext, useEffect, useState } from 'react';	4✔
10	import { AppContext } from '../../context/App';	4✔
11	import { Size, Theme } from '../../types';	4✔
12	import { setTheme } from '../../utils/theme';	4✔
13	import { percentageToZoom, zoomToPercentage } from '../../utils/zoom';	4✔
14	import { Checkbox } from '../fields/Checkbox';	4✔
15	import { RadioGroup } from '../fields/RadioGroup';	4✔
16	import { Slider } from '../fields/Slider';	4✔
17
18	export const AppearanceSettings: FC = () => {	4✔
19	const { settings, updateSetting } = useContext(AppContext);	12✔
20	const [zoomLevel, setZoomLevel] = useState(	12✔
21	zoomToPercentage(webFrame.getZoomLevel()),
22	);
23
24	useEffect(() => {	12✔
25	ipcRenderer.on('gitify:update-theme', (_, updatedTheme: Theme) => {	12✔
UNCOV 26	if (settings.theme === Theme.SYSTEM) {	×
UNCOV 27	setTheme(updatedTheme);	×
28	}
29	});
30	}, [settings.theme]);
31
32	window.addEventListener('resize', () => {	12✔
NEW UNCOV 33	setZoomLevel(zoomToPercentage(webFrame.getZoomLevel()));	×
34	});
35
36	return (	12✔
37	<fieldset className="mb-3">
38	<legend id="appearance" className="mb-1 mt-2 font-semibold">
39	Appearance
40	</legend>
41	<RadioGroup
42	name="theme"
43	label="Theme:"
44	value={settings.theme}
45	options={[
46	{ label: 'System', value: Theme.SYSTEM },
47	{ label: 'Light', value: Theme.LIGHT },
48	{ label: 'Dark', value: Theme.DARK },
49	]}
50	onChange={(evt) => {
51	updateSetting('theme', evt.target.value);	2✔
52	}}
53	className="mb-1"
54	/>
55	<Slider
56	defaultValue={[zoomLevel]}
57	value={[zoomLevel]}
58	max={150}
59	min={0}
60	step={25}
61	name="Zoom"
62	onValueChange={(value) =>
NEW UNCOV 63	webFrame.setZoomLevel(percentageToZoom(value[0]))	×
64	}
65	unit="%"
66	/>
67	<Checkbox
68	name="detailedNotifications"
69	label="Detailed notifications"
70	checked={settings.detailedNotifications}
71	onChange={(evt) =>
72	updateSetting('detailedNotifications', evt.target.checked)	2✔
73	}
74	tooltip={
75	<div>
76	<div className="pb-3">
77	Enrich notifications with author or last commenter profile
78	information, state and GitHub-like colors.
79	</div>
80	<div className="text-orange-600">
81	⚠️ Users with a large number of unread notifications <i>may</i>{' '}
82	experience rate limiting under certain circumstances. Disable this
83	setting if you experience this.
84	</div>
85	</div>
86	}
87	/>
88	<Checkbox
89	name="showPills"
90	label="Show notification metric pills"
91	checked={settings.showPills}
92	onChange={(evt) => updateSetting('showPills', evt.target.checked)}	2✔
93	tooltip={
94	<div>
95	<div>Show notification metric pills for:</div>
96	<div className="pl-6">
97	<ul className="list-disc">
98	<li>
99	<IssueClosedIcon size={Size.MEDIUM} className="pr-1" />
100	linked issues
101	</li>
102	<li>
103	<CheckIcon size={Size.MEDIUM} className="pr-1" /> pr reviews
104	</li>
105	<li>
106	<CommentIcon size={Size.MEDIUM} className="pr-1" />
107	comments
108	</li>
109
110	<li>
111	<TagIcon size={Size.MEDIUM} className="pr-1" />
112	labels
113	</li>
114	<li>
115	<MilestoneIcon size={Size.MEDIUM} className="pr-1" />
116	milestones
117	</li>
118	</ul>
119	</div>
120	</div>
121	}
122	/>
123	<Checkbox
124	name="showAccountHostname"
125	label="Show account hostname"
126	checked={settings.showAccountHostname}
127	onChange={(evt) =>
128	updateSetting('showAccountHostname', evt.target.checked)	2✔
129	}
130	/>
131	</fieldset>
132	);
133	};

gitify-app / gitify / 9752510817

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous