mirror of
https://github.com/JulianGro/overte.git
synced 2025-04-07 08:23:17 +02:00
Adjust UI with pixel perfect precision. Support devices with on-screen bars.
This commit is contained in:
parent
865e3a05f1
commit
476e1cf7ae
10 changed files with 63 additions and 42 deletions
|
@ -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 |
|
@ -40,8 +40,8 @@ Item {
|
|||
|
||||
Component.onCompleted: {
|
||||
// put on bottom
|
||||
x = 30;
|
||||
y = 0;
|
||||
x = 7;
|
||||
y = 7;
|
||||
width = 300;
|
||||
height = 300;
|
||||
}
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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() {
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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());
|
||||
|
|
Loading…
Reference in a new issue