Limit KeyIcon image width to the parent item width

This is to ensure that the image does not exceed the edges of the key.
The image is scaled properly even though the aspect ratio of the
sourceSize is not correct.

Change-Id: I3f8be863cb4656d1692545edc449ea80ed806069
Reviewed-by: Mitch Curtis <mitch.curtis@digia.com>

2 files changed, 23 insertions, 17 deletions

diff --git a/src/virtualkeyboard/content/styles/default/style.qml b/src/virtualkeyboard/content/styles/default/style.qml
index 834178b0..6d144575 100644
--- a/src/virtualkeyboard/content/styles/default/style.qml
+++ b/src/virtualkeyboard/content/styles/default/style.qml
@@ -102,7 +102,8 @@ KeyboardStyle {
                 source: "qrc:/images/backspace.png"
                 color: "#868482"
                 anchors.fill: parent
-                anchors.margins: keyContentMargin
+                anchors.topMargin: keyContentMargin
+                anchors.bottomMargin: keyContentMargin
             }
         }
         states: [
@@ -145,7 +146,8 @@ KeyboardStyle {
                 source: "qrc:/images/globe.png"
                 color: "#868482"
                 anchors.fill: parent
-                anchors.margins: keyContentMargin
+                anchors.topMargin: keyContentMargin
+                anchors.bottomMargin: keyContentMargin
             }
         }
         states: [
@@ -189,10 +191,8 @@ KeyboardStyle {
                 source: "qrc:/images/enter.png"
                 color: "#868482"
                 anchors.fill: parent
-                anchors.topMargin: Math.round(50 * scaleHint)
-                anchors.bottomMargin: Math.round(50 * scaleHint)
-                anchors.leftMargin: Math.round(150 * scaleHint)
-                anchors.rightMargin: Math.round(85 * scaleHint)
+                anchors.margins: keyContentMargin
+                anchors.leftMargin: enterKeyBackground.width > enterKeyBackground.height * 1.5 ? Math.round(150 * scaleHint) : keyContentMargin
             }
             Text {
                 id: enterKeyText
@@ -261,7 +261,8 @@ KeyboardStyle {
                 source: "qrc:/images/hidekeyboard.png"
                 color: "#868482"
                 anchors.fill: parent
-                anchors.margins: keyContentMargin
+                anchors.topMargin: keyContentMargin
+                anchors.bottomMargin: keyContentMargin
             }
         }
         states: [
@@ -304,7 +305,8 @@ KeyboardStyle {
                 source: "qrc:/images/shift.png"
                 color: "#868482"
                 anchors.fill: parent
-                anchors.margins: keyContentMargin
+                anchors.topMargin: keyContentMargin
+                anchors.bottomMargin: keyContentMargin
             }
             states: [
                 State {
diff --git a/src/virtualkeyboard/content/styles/retro/style.qml b/src/virtualkeyboard/content/styles/retro/style.qml
index 51c6f237..e65ef8f7 100644
--- a/src/virtualkeyboard/content/styles/retro/style.qml
+++ b/src/virtualkeyboard/content/styles/retro/style.qml
@@ -145,7 +145,10 @@ KeyboardStyle {
             source: "qrc:/images/backspace.png"
             color: "#c5a96f"
             anchors.fill: parent
-            anchors.margins: Math.round(keyContentMargin * 1.2)
+            anchors.topMargin: keyContentMargin
+            anchors.bottomMargin: keyContentMargin
+            anchors.leftMargin: Math.round(29 * scaleHint)
+            anchors.rightMargin: Math.round(29 * scaleHint)
         }
         states: [
             State {
@@ -188,7 +191,8 @@ KeyboardStyle {
             source: "qrc:/images/globe.png"
             color: "#110b05"
             anchors.fill: parent
-            anchors.margins: keyContentMargin
+            anchors.topMargin: keyContentMargin
+            anchors.bottomMargin: keyContentMargin
         }
         states: [
             State {
@@ -238,10 +242,8 @@ KeyboardStyle {
             source: "qrc:/images/enter.png"
             color: "#c5a96f"
             anchors.fill: parent
-            anchors.topMargin: Math.round(59 * scaleHint)
-            anchors.bottomMargin: Math.round(59 * scaleHint)
-            anchors.leftMargin: Math.round(142 * scaleHint)
-            anchors.rightMargin: Math.round(59 * scaleHint)
+            anchors.margins: keyContentMargin
+            anchors.leftMargin: enterKeyBackground.width > enterKeyBackground.height * 1.5 ? Math.round(142 * scaleHint) : anchors.margins
         }
         Text {
             id: enterKeyText
@@ -253,7 +255,7 @@ KeyboardStyle {
             verticalAlignment: Text.AlignVCenter
             anchors.fill: parent
             anchors.leftMargin: keyContentMargin
-            anchors.topMargin: Math.round(60 * scaleHint)
+            anchors.topMargin: Math.round(50 * scaleHint)
             anchors.rightMargin: keyContentMargin
             anchors.bottomMargin: Math.round(30 * scaleHint)
             color: "#c5a96f"
@@ -319,7 +321,8 @@ KeyboardStyle {
             source: "qrc:/images/hidekeyboard.png"
             color: "#c5a96f"
             anchors.fill: parent
-            anchors.margins: keyContentMargin
+            anchors.topMargin: keyContentMargin
+            anchors.bottomMargin: keyContentMargin
         }
         states: [
             State {
@@ -394,7 +397,8 @@ KeyboardStyle {
             source: "qrc:/images/shift.png"
             color: "#c5a96f"
             anchors.fill: parent
-            anchors.margins: keyContentMargin
+            anchors.topMargin: keyContentMargin
+            anchors.bottomMargin: keyContentMargin
         }
         states: [
             State {