Skip to content

Commit 0088af4

Browse files
committed
feat: ability to toggle hide scrollbars for mobile devices
1 parent 47f9827 commit 0088af4

File tree

4 files changed

+39
-1
lines changed

4 files changed

+39
-1
lines changed

desktop-app/src/renderer/components/Previewer/Device/index.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -458,7 +458,11 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
458458
}, [isInspecting]);
459459

460460
useEffect(() => {
461-
if (!ref.current || !device.isMobileCapable) {
461+
if (
462+
!ref.current ||
463+
!device.isMobileCapable ||
464+
!window.electron.store.get('userPreferences.hideScrollbarForMobile')
465+
) {
462466
return;
463467
}
464468

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { useState } from 'react';
2+
import Toggle from 'renderer/components/Toggle';
3+
4+
const HideScrollBarForMobile = () => {
5+
const [allowed, setAllowed] = useState<boolean>(
6+
window.electron.store.get('userPreferences.hideScrollbarForMobile')
7+
);
8+
9+
return (
10+
<div className="flex flex-row items-center justify-start px-4">
11+
<span className="w-1/2">Hide Scrollbar for Mobile</span>
12+
<div className="flex items-center gap-2 border-l px-4 dark:border-slate-400">
13+
<Toggle
14+
isOn={allowed}
15+
onChange={(value) => {
16+
setAllowed(value.target.checked);
17+
window.electron.store.set(
18+
'userPreferences.hideScrollbarForMobile',
19+
value.target.checked
20+
);
21+
}}
22+
/>
23+
</div>
24+
</div>
25+
);
26+
};
27+
28+
export default HideScrollBarForMobile;

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import ClearHistory from './ClearHistory';
1010
import PreviewLayout from './PreviewLayout';
1111
import Bookmark from './Bookmark';
1212
import { Settings } from './Settings';
13+
import HideScrollBarForMobile from './HideScrollbarForMobile';
1314

1415
const Divider = () => (
1516
<div className="h-[1px] bg-slate-200 dark:bg-slate-700" />
@@ -29,6 +30,7 @@ const MenuFlyout = ({ closeFlyout }: Props) => {
2930
<UITheme />
3031
<Devtools />
3132
<AllowInSecureSSL />
33+
<HideScrollBarForMobile />
3234
<ClearHistory />
3335
<Divider />
3436
<div>

desktop-app/src/store/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,10 @@ const schema = {
138138
type: 'boolean',
139139
default: false,
140140
},
141+
hideScrollbarForMobile: {
142+
type: 'boolean',
143+
default: true,
144+
},
141145
guides: {
142146
type: 'array',
143147
items: {

0 commit comments

Comments
 (0)