Skip to content

Commit 8c055b5

Browse files
Fixed non rotatable devices rotating when "Rotate All" button in top of GUI is pressed (#1439)
* added checks for if a device is rotatable on the rotate all devices button-- rotation on individual devices still rotates regardless of device properties * fixed request for pr * fixed build errors * Reused the conditional --------- Co-authored-by: Manoj Vivek <[email protected]>
1 parent b529d90 commit 8c055b5

File tree

3 files changed

+28
-13
lines changed

3 files changed

+28
-13
lines changed

desktop-app/src/renderer/components/Button/index.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ interface CustomProps {
1111
disableHoverEffects?: boolean;
1212
isActionButton?: boolean;
1313
subtle?: boolean;
14+
disabled?: boolean;
1415
}
1516

1617
const Button = ({
@@ -22,6 +23,7 @@ const Button = ({
2223
isActionButton = false,
2324
subtle = false,
2425
disableHoverEffects = false,
26+
disabled = false,
2527
children,
2628
...props
2729
}: CustomProps &
@@ -66,9 +68,12 @@ const Button = ({
6668
'bg-slate-200': isActionButton,
6769
'dark:bg-slate-700': isActionButton,
6870
'px-2': isActionButton || isTextButton,
71+
'cursor-not-allowed opacity-40': disabled,
72+
'hover:bg-transparent dark:hover:bg-transparent': disabled,
6973
}
7074
)}
7175
type="button"
76+
disabled={disabled}
7277
// eslint-disable-next-line react/jsx-props-no-spreading
7378
{...props}
7479
>

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

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,9 @@ interface Props {
1919
onRotate: (state: boolean) => void;
2020
onIndividualLayoutHandler: (device: Device) => void;
2121
isIndividualLayout: boolean;
22+
isDeviceRotationEnabled: boolean;
2223
}
2324

24-
const newVersionText = {
25-
id: 'new-version',
26-
text: 'There is a new version available.',
27-
link: 'https://responsively.app/download',
28-
linkText: 'See More',
29-
};
30-
3125
const Toolbar = ({
3226
webview,
3327
device,
@@ -37,6 +31,7 @@ const Toolbar = ({
3731
onRotate,
3832
onIndividualLayoutHandler,
3933
isIndividualLayout,
34+
isDeviceRotationEnabled,
4035
}: Props) => {
4136
const [eventMirroringOff, setEventMirroringOff] = useState<boolean>(false);
4237
const [playScreenshotDone] = useSound(screenshotSfx, { volume: 0.5 });
@@ -194,7 +189,15 @@ const Toolbar = ({
194189
<Button onClick={openDevTools} title="Open Devtools">
195190
<Icon icon="ic:round-code" />
196191
</Button>
197-
<Button onClick={rotate} title="Rotate This Device">
192+
<Button
193+
onClick={rotate}
194+
disabled={!isDeviceRotationEnabled}
195+
title={
196+
isDeviceRotationEnabled
197+
? 'Rotate This Device'
198+
: 'Rotation not available for non-mobile devices'
199+
}
200+
>
198201
<Icon
199202
icon={
200203
rotated

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -95,20 +95,24 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
9595
const currentUrl = ref.current.getURL();
9696
if (address !== currentUrl) {
9797
isNavigatingFromAddressBar.current = true;
98-
dispatch(setAddress(address));
98+
ref.current.loadURL(address);
9999
}
100100
} catch (err) {
101101
// eslint-disable-next-line no-console
102102
console.error('Error loading URL', err);
103103
}
104104
}
105-
}, [address, isPrimary, dispatch]);
105+
}, [address, isPrimary]);
106106

107107
const isIndividualLayout = layout === PREVIEW_LAYOUTS.INDIVIDUAL;
108108

109109
let { height, width } = device;
110110

111-
if (rotateDevices || singleRotated) {
111+
// Check if device rotation is enabled (only mobile-capable devices can be rotated)
112+
const isDeviceRotationEnabled = device.isMobileCapable && (rotateDevices || singleRotated);
113+
114+
// Apply rotation: both global and individual rotation only affect mobile-capable devices
115+
if (isDeviceRotationEnabled) {
112116
const temp = width;
113117
width = height;
114118
height = temp;
@@ -531,7 +535,9 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
531535
const scaledWidth = width * zoomfactor;
532536

533537
const isRestrictedMinimumDeviceSize =
534-
device.width < 400 && zoomfactor < 0.6 && !rotateDevices && !singleRotated;
538+
device.width < 400 &&
539+
zoomfactor < 0.6 &&
540+
!isDeviceRotationEnabled;
535541

536542
return (
537543
<div
@@ -557,6 +563,7 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
557563
onRotate={onRotateHandler}
558564
onIndividualLayoutHandler={onIndividualLayoutHandler}
559565
isIndividualLayout={isIndividualLayout}
566+
isDeviceRotationEnabled={isDeviceRotationEnabled}
560567
/>
561568
<div
562569
style={{
@@ -603,7 +610,7 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
603610
preload={`file://${window.responsively.webviewPreloadPath}`}
604611
data-scale-factor={zoomfactor}
605612
/* eslint-disable-next-line react/no-unknown-property */
606-
allowpopups={isPrimary ? ('true' as any) : undefined}
613+
allowpopups={isPrimary ? true : undefined}
607614
/* eslint-disable-next-line react/no-unknown-property */
608615
useragent={device.userAgent}
609616
/>

0 commit comments

Comments
 (0)