Adjust UI with pixel perfect precision. Support devices with on-screen bars.

This commit is contained in:
Gabriel Calero 2018-04-12 17:59:38 -03:00
parent 865e3a05f1
commit 476e1cf7ae
10 changed files with 63 additions and 42 deletions

View file

@ -3,17 +3,17 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.85;}
.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
.st0{opacity:0.85;fill:#FFFFFF;}
</style>
<g id="Layer_2_1_">
<g id="Layer_2_1_" class="st0">
</g>
<g class="st0">
<path class="st1" d="M48.1,22.6c-1.6-1.9-3.2-4-5.2-5.6c-5.2-4.4-11.1-6.9-17.8-7.1c-6,0.1-11.1,2-15.8,5.2c-3,2-5.6,4.4-7.6,7.4
c-1.1,1.7-1.1,3.3,0,5c1.8,2.7,4.1,4.8,6.6,6.7c4.9,3.6,10.4,5.9,16.6,5.9c5.8,0,10.9-2,15.6-5.2c3-2,5.6-4.4,7.6-7.4
C49.4,25.9,49.5,24.2,48.1,22.6z M46.4,27.2C41,34.1,33.9,38.1,26.2,38.6c-7.3-0.1-12.6-2.4-17.4-6c-2.2-1.6-4.1-3.5-5.6-5.8
c-0.7-1-0.9-2-0.1-3.1c4.8-7.1,16.4-14.6,28.2-11.1c6.2,1.9,11.3,5.3,15.2,10.5C47.8,24.8,47.8,25.4,46.4,27.2z"/>
<path class="st1" d="M25,15.7c-5.3,0-9.4,4.1-9.5,9.4c0,5.3,4.2,9.5,9.5,9.5s9.4-4.2,9.4-9.5S30.3,15.7,25,15.7z M24.9,33
c-4.2,0-7.8-3.6-7.8-7.9c0-4.2,3.6-7.8,7.8-7.8c4.2,0,7.9,3.6,7.8,7.8C32.8,29.4,29.2,33,24.9,33z"/>
<g>
<path class="st0" d="M45.7,29.3c-0.3-0.3-0.4-0.5-0.7-0.9c-1.2-1.4-2.5-2.9-3.9-4.1c-4.8-4-10.2-6.2-16.1-6.4
c-5,0.2-9.7,1.7-14.1,4.7C8,24.6,5.7,26.8,4,29.3c-1.1,1.8-1.1,3.5,0,5.3c1.4,2.1,3.2,4,6,6.1c4.7,3.5,9.8,5.3,14.9,5.3
c4.8,0,9.4-1.5,14-4.7c2.9-1.9,5.2-4.1,6.8-6.6C47.2,32.9,47.2,31,45.7,29.3z M42.9,33.3c-4.5,5.8-10.5,9.1-16.9,9.6
c-5.5-0.1-10.1-1.7-14.7-5c-1.9-1.4-3.4-3-4.7-4.8c-0.5-0.8-0.4-1.2-0.1-1.7c3-4.4,10-10.1,18.3-10.1c1.7,0,3.4,0.3,5.2,0.8
c5.4,1.7,9.6,4.6,12.8,8.8C43.9,31.9,44,32,42.9,33.3z"/>
<path class="st0" d="M25,23c-5,0-9,3.9-9.1,9c0,5.1,4,9.1,9.1,9.1s9-4,9-9.1S30.1,23,25,23z M19,32c0-3.2,2.7-5.9,5.9-5.9
c1.6,0,3.1,0.7,4.2,1.8s1.7,2.5,1.7,4.1c0,1.6-0.5,3.1-1.7,4.2c-1.1,1.1-2.6,1.8-4.2,1.8C21.8,38,19,35.3,19,32z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

View file

@ -40,8 +40,8 @@ Item {
Component.onCompleted: {
// put on bottom
x = 30;
y = 0;
x = 7;
y = 7;
width = 300;
height = 300;
}

View file

@ -38,13 +38,26 @@ Item {
}
}
Component.onCompleted: {
// put on bottom
x = parent.width-315;
y = 5;
function relocateAndResize(newWindowWidth, newWindowHeight) {
x = newWindowWidth-328;
y = 19;
width = 300;
height = 300;
}
function onWindowGeometryChanged(rect) {
relocateAndResize(rect.width, rect.height);
}
Component.onCompleted: {
relocateAndResize(parent.width, parent.height);
Window.geometryChanged.connect(onWindowGeometryChanged); // In devices with bars appearing at startup we should listen for this
}
Component.onDestruction: {
Window.geometryChanged.disconnect(onWindowGeometryChanged);
}
function addButton(properties) {
var component = Qt.createComponent("button.qml");

View file

@ -32,6 +32,9 @@ Item {
property string hoverTextColor: "#ffffff"
property string activeTextColor: "#ffffff"
property string activeHoverTextColor: "#ffffff"
property string fontFamily: "FiraSans"
property bool fontBold: false
property int bottomMargin: 30
property bool isEntered: false
@ -92,8 +95,8 @@ Item {
id: text
color: "#ffffff"
text: button.text
font.family: "FiraSans"
//font.bold: true
font.family: button.fontFamily
font.bold: button.fontBold
font.pixelSize: textSize
anchors.bottom: parent.bottom
anchors.bottomMargin: bottomMargin
@ -143,15 +146,12 @@ Item {
PropertyChanges {
target: buttonBg
//color: "#cfcfcf"
//opacity: 1
color: button.hoverBgColor
opacity: button.hoverBgOpacity
}
PropertyChanges {
target: text
//color: "#ffffff"
color: button.hoverTextColor
text: button.hoverText
}
@ -166,15 +166,12 @@ Item {
PropertyChanges {
target: buttonBg
//color: "#1fc6a6"
//opacity: 1
color: button.activeBgColor
opacity: button.activeBgOpacity
}
PropertyChanges {
target: text
//color: "#333333"
color: button.activeTextColor
text: button.activeText
}
@ -189,15 +186,12 @@ Item {
PropertyChanges {
target: buttonBg
//color: "#ff0000"
//opacity: 1
color: button.activeHoverBgColor
opacity: button.activeHoverBgOpacity
}
PropertyChanges {
target: text
//color: "#333333"
color: button.activeHoverTextColor
text: button.activeHoverText
}
@ -212,15 +206,12 @@ Item {
PropertyChanges {
target: buttonBg
//color: "#9A9A9A"
//opacity: 0.1
color: button.bgColor
opacity: button.bgOpacity
}
PropertyChanges {
target: text
//color: "#ffffff"
color: button.textColor
text: button.text
}

View file

@ -10,12 +10,25 @@ import ".."
Item {
id: modesbar
y:20
y:5
function relocateAndResize(newWindowWidth, newWindowHeight) {
width = 300;
height = 300;
x=newWindowWidth - 565;
}
function onWindowGeometryChanged(rect) {
relocateAndResize(rect.width, rect.height);
}
Component.onCompleted: {
width = 300; // That 30 is extra regardless the qty of items shown
height = 300;
x=parent.width - 555;
relocateAndResize(parent.width, parent.height);
Window.geometryChanged.connect(onWindowGeometryChanged); // In devices with bars appearing at startup we should listen for this
}
Component.onDestruction: {
Window.geometryChanged.disconnect(onWindowGeometryChanged);
}
function addButton(properties) {

View file

@ -40,8 +40,8 @@ namespace VirtualPad {
const float Manager::STICK_RADIUS_PIXELS = 105.0f;
const float Manager::JUMP_BTN_TRIMMED_RADIUS_PIXELS = 67.0f;
const float Manager::JUMP_BTN_FULL_PIXELS = 164.0f;
const float Manager::JUMP_BTN_BOTTOM_MARGIN_PIXELS = 67.0f;
const float Manager::JUMP_BTN_RIGHT_MARGIN_PIXELS = 20.0f;
const float Manager::JUMP_BTN_BOTTOM_MARGIN_PIXELS = 80.0f;
const float Manager::JUMP_BTN_RIGHT_MARGIN_PIXELS = 13.0f;
Manager::Manager() {

View file

@ -30,8 +30,8 @@ function init() {
activeIcon: "icons/+android/backward.svg",
text: "",
bgOpacity: 0.0,
activeBgOpacity: 0.0,
bgColor: "#FFFFFF"
hoverBgOpacity: 0.0,
activeBgOpacity: 0.0
});
backButton.clicked.connect(onBackPressed);

View file

@ -32,8 +32,9 @@ function init() {
activeIcon: "icons/mic-mute-a.svg",
text: "",
bgOpacity: 0.0,
activeBgOpacity: 0.0,
bgColor: "#FFFFFF"
hoverBgOpacity: 0.0,
activeHoverBgOpacity: 0.0,
activeBgOpacity: 0.0
});
onMuteToggled();

View file

@ -49,8 +49,11 @@ function init() {
activeHoverBgOpacity: 0.0,
text: "MODE",
height:240,
bottomMargin: 6,
textSize: 45
bottomMargin: 16,
textSize: 38,
fontFamily: "Raleway",
fontBold: true
});
switchToMode(getCurrentModeSetting());