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).
switch (rotation) {
case 0:
canvas.style[cssTransform] = 'rotate(0deg)'
canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(0deg)'
break
case 90:
canvas.style[cssTransform] = 'rotate(-90deg)'
canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(-90deg)'
break
case 180:
canvas.style[cssTransform] = 'rotate(-180deg)'
canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(-180deg)'
break
case 270:
canvas.style[cssTransform] = 'rotate(90deg)'
canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(90deg)'
break
}
}

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

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