yetangitu/OpenSTF
1
0
Fork 0
mirror of https://github.com/openstf/stf synced 2025-10-06 12:00:08 +02:00
Code Issues Releases Wiki Activity

Fix canvas rotation being off on devices which are naturally landscape.

Browse source
This commit is contained in:
Simo Kinnunen 2014-09-05 11:55:45 +09:00
parent c5a4727ae3
commit ede65d518c
2 changed files with 12 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

8
res/app/components/stf/screen/screen-directive.js
View file

@ -259,16 +259,16 @@ module.exports = function DeviceScreenDirective($document, ScalingService,
// changes from 180 to 270 (it will do a reverse rotation). // changes from 180 to 270 (it will do a reverse rotation).
switch (rotation) { switch (rotation) {
case 0: case 0:
canvas.style[cssTransform] = 'rotate(0deg)' canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(0deg)'
break break
case 90: case 90:
canvas.style[cssTransform] = 'rotate(-90deg)' canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(-90deg)'
break break
case 180: case 180:
canvas.style[cssTransform] = 'rotate(-180deg)' canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(-180deg)'
break break
case 270: case 270:
canvas.style[cssTransform] = 'rotate(90deg)' canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(90deg)'
break break
} }
} }

23
res/app/control-panes/device-control/device-control.css
View file

@ -3,7 +3,6 @@
-moz-transition: 1s linear opacity; -moz-transition: 1s linear opacity;
-o-transition: 1s linear opacity; -o-transition: 1s linear opacity;
transition: 1s linear opacity; transition: 1s linear opacity;
opacity: 0; opacity: 0;
} }
@ -11,14 +10,6 @@
opacity: 1; opacity: 1;
} }
device-screen canvas {
transition: width 100ms linear, -webkit-transform 250ms ease-in-out;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: width, rotate(0deg);
transform: width, rotate(0deg);
}
device-screen { device-screen {
position: relative; position: relative;
display: block; display: block;
@ -35,12 +26,14 @@ device-screen {
device-screen canvas { device-screen canvas {
position: absolute; position: absolute;
margin: auto; top: 50%;
top: 0; left: 50%;
right: 0; pointer-events: none; /* MUST HAVE or touch coordinates will be off */
bottom: 0; transition: width 100ms linear, -webkit-transform 250ms ease-in-out;
left: 0; -webkit-transform-origin: 50% 50%;
pointer-events: none; /* MUST HAVE */ transform-origin: 50% 50%;
-webkit-transform: rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
} }
device-screen .finger { device-screen .finger {