Fix:gui/qml:Removed all hardcoded measurements

git-svn-id: https://navit.svn.sourceforge.net/svnroot/navit/trunk@3068 ffa7fe5e-494d-0410-b361-a75ebd5db220

diff --git a/navit/navit/gui/qml/skins/navit/ButtonIcon.qml b/navit/navit/gui/qml/skins/navit/ButtonIcon.qml
index 8400d63..4433be7 100644 (file)
--- a/navit/navit/gui/qml/skins/navit/ButtonIcon.qml
+++ b/navit/navit/gui/qml/skins/navit/ButtonIcon.qml
@@ -15,11 +15,12 @@ Rectangle {
 \r
    Image {\r
        id: imgItem; source: gui.iconPath+container.icon; anchors.top: container.top; anchors.horizontalCenter: container.horizontalCenter;\r
-       width: 48; height: 48\r
+       width: gui.height/8; height: gui.height/8\r
    }\r
 \r
     Text {\r
-        id: txtItem; text: container.text; anchors.top: imgItem.bottom; anchors.horizontalCenter: container.horizontalCenter; color: "White"; font.pointSize: 18;\r
+        id: txtItem; text: container.text; anchors.top: imgItem.bottom; anchors.horizontalCenter: container.horizontalCenter; \r
+       color: "White"; font.pointSize: gui.height/32; horizontalAlignment: Qt.AlignHCenter\r
     }\r
 \r
     states: [\r

diff --git a/navit/navit/gui/qml/skins/navit/PageAbout.qml b/navit/navit/gui/qml/skins/navit/PageAbout.qml
index 2df622e..ac46220 100644 (file)
--- a/navit/navit/gui/qml/skins/navit/PageAbout.qml
+++ b/navit/navit/gui/qml/skins/navit/PageAbout.qml
@@ -3,7 +3,7 @@ import Qt 4.6
 Rectangle {
     id: page
 
-    width: 800; height: 424
+    width: gui.width; height: gui.height
     border.width: 1
     color: "Black"
     opacity: 0
@@ -18,7 +18,7 @@ Rectangle {
         NumberAnimation { id: opacityAnimation; duration: 300; alwaysRunToEnd: true }
     }
 
-    Text { id: myText; anchors.centerIn: parent; text: "Hi, i'm Navit!"; color: "White" }
+    Text { id: myText; anchors.centerIn: parent; text: "Hi, i'm Navit!"; color: "White"; font.pointSize: gui.height/32 }
 
     Cellar {anchors.bottom: page.bottom; anchors.horizontalCenter: page.horizontalCenter; width: page.width }
 }

diff --git a/navit/navit/gui/qml/skins/navit/PageNavigation.qml b/navit/navit/gui/qml/skins/navit/PageNavigation.qml
index d1698d5..6c8475c 100644 (file)
--- a/navit/navit/gui/qml/skins/navit/PageNavigation.qml
+++ b/navit/navit/gui/qml/skins/navit/PageNavigation.qml
@@ -4,7 +4,7 @@ import Qt 4.6
 Rectangle {
     id: page
 
-    width: 800; height: 424
+    width: gui.width; height: gui.height
     color: "Black"
     opacity: 0
 
@@ -21,8 +21,8 @@ Rectangle {
     Grid {
         columns: 3;rows: 1
         anchors.horizontalCenter: parent.horizontalCenter;
-        anchors.bottom: parent.verticalCenter; anchors.bottomMargin: 48;
-        spacing: 64
+        anchors.bottom: parent.verticalCenter; anchors.bottomMargin: ui.height/16;
+        spacing: gui.width/12
         ButtonIcon {
             id: btnView; text: "View on map"; icon: "gui_maps.svg"; onClicked: console.log("Implement me!");
         }
@@ -37,8 +37,8 @@ Rectangle {
     Grid {
         columns: 2;rows: 1
         anchors.horizontalCenter: parent.horizontalCenter;
-        anchors.top: parent.verticalCenter; anchors.topMargin: 48;
-        spacing: 64
+        anchors.top: parent.verticalCenter; anchors.topMargin: ui.height/16;
+        spacing: gui.width/12
         ButtonIcon {
             id: btnQuit; text: "POIs"; icon: "attraction.svg"; onClicked: console.log("Implement me!");
         }

diff --git a/navit/navit/gui/qml/skins/navit/PageRoute.qml b/navit/navit/gui/qml/skins/navit/PageRoute.qml
index f697b65..7f3ea65 100644 (file)
--- a/navit/navit/gui/qml/skins/navit/PageRoute.qml
+++ b/navit/navit/gui/qml/skins/navit/PageRoute.qml
@@ -3,7 +3,7 @@ import Qt 4.6
 Rectangle {\r
     id: page\r
 \r
-    width: 800; height: 424\r
+    width: gui.width; height: gui.height\r
     color: "Black"\r
     opacity: 0\r
 \r
@@ -20,8 +20,8 @@ Rectangle {
     Grid {\r
         columns: 3;rows: 1\r
         anchors.horizontalCenter: parent.horizontalCenter;\r
-        anchors.bottom: parent.verticalCenter; anchors.bottomMargin: 48;\r
-        spacing: 64\r
+        anchors.bottom: parent.verticalCenter; anchors.bottomMargin: gui.height/16;\r
+        spacing: gui.width/12\r
         ButtonIcon {\r
             id: btnBookmarks; text: "Bookmarks"; icon: "gui_bookmark.svg"; onClicked: console.log("Implement me!");\r
         }\r
@@ -36,8 +36,8 @@ Rectangle {
     Grid {\r
         columns: 2;rows: 1\r
         anchors.horizontalCenter: parent.horizontalCenter;\r
-        anchors.top: parent.verticalCenter; anchors.topMargin: 48;\r
-        spacing: 64\r
+        anchors.top: parent.verticalCenter; anchors.topMargin: gui.height/16;\r
+        spacing: gui.width/12\r
         ButtonIcon {\r
             id: btnAbout; text: "Search"; icon: "gui_town.svg"; onClicked: console.log("Implement me!");\r
         }\r

diff --git a/navit/navit/gui/qml/skins/navit/PageSettings.qml b/navit/navit/gui/qml/skins/navit/PageSettings.qml
index 50ff35b..5a10a0f 100644 (file)
--- a/navit/navit/gui/qml/skins/navit/PageSettings.qml
+++ b/navit/navit/gui/qml/skins/navit/PageSettings.qml
@@ -3,7 +3,7 @@ import Qt 4.6
 Rectangle {\r
     id: page\r
 \r
-    width: 800; height: 424\r
+    width: gui.width; height: gui.height\r
     border.width: 1\r
     color: "Black"\r
     opacity: 0\r
@@ -21,8 +21,8 @@ Rectangle {
     Grid {\r
         columns: 3;rows: 1\r
         anchors.horizontalCenter: parent.horizontalCenter;\r
-        anchors.bottom: parent.verticalCenter; anchors.bottomMargin: 48;\r
-        spacing: 64\r
+        anchors.bottom: parent.verticalCenter; anchors.bottomMargin: gui.height/16;\r
+        spacing: gui.width/12\r
         ButtonIcon {\r
             id: btnDisplay; text: "Display"; icon: "gui_display.svg"; onClicked: gui.setPage("PageSettingsDisplay.qml")
         }\r
@@ -36,8 +36,8 @@ Rectangle {
     Grid {\r
         columns: 2;rows: 1\r
         anchors.horizontalCenter: parent.horizontalCenter;\r
-        anchors.top: parent.verticalCenter; anchors.topMargin: 48;\r
-        spacing: 64\r
+        anchors.top: parent.verticalCenter; anchors.topMargin: gui.height/16;\r
+        spacing: gui.width/12\r
         ButtonIcon {\r
             id: btnRules; text: "Rules"; icon: "gui_rules.svg"; onClicked: gui.setPage("PageSettingsRules.qml")
         }\r

diff --git a/navit/navit/gui/qml/skins/navit/PageSettingsDisplay.qml b/navit/navit/gui/qml/skins/navit/PageSettingsDisplay.qml
index 31c050a..f378f42 100644 (file)
--- a/navit/navit/gui/qml/skins/navit/PageSettingsDisplay.qml
+++ b/navit/navit/gui/qml/skins/navit/PageSettingsDisplay.qml
@@ -3,7 +3,7 @@ import Qt 4.6
 Rectangle {
     id: page
 
-    width: 800; height: 424
+    width: gui.width; height: gui.height
     border.width: 1
     color: "Black"
     opacity: 0
@@ -40,29 +40,28 @@ Rectangle {
         NumberAnimation { id: opacityAnimation; duration: 300; alwaysRunToEnd: true }
     }
 
+    ListSelector { 
+       id:layoutList; text: "Current layout"; itemId: navit.getAttrList("layout"); onChanged: navit.setObjectByName("layout",layoutList.value)
+       anchors.top: parent.top;
+       anchors.left: parent.left; anchors.leftMargin: 3
+       anchors.topMargin: gui.height/16; anchors.leftMargin: gui.width/32
+    }
     Grid {
-        columns: 2; rows: 1
-        anchors.verticalCenter: parent.verticalCenter;
-       anchors.left: parent.left; anchors.right: parent.right;
-       ListSelector { 
-               id:layoutList; text: "Current layout"; itemId: navit.getAttrList("layout"); onChanged: navit.setObjectByName("layout",layoutList.value)
-               anchors.left: parent.left
-       }
-        Grid {
-            columns: 1; rows: 3
-            anchors.right: parent.right;
-            spacing: 64
-            ToggleSwitch {
-                id: fullscreenSw; on: gui.getAttr("fullscreen");  text: "Fullscreen"; onChanged: gui.setAttr("fullscreen",fullscreenSw.on)
-            }
-            ToggleSwitch {
-                id: tripledSw; on: page.isTripleD();  text: "2D/3D"; onChanged: setTripleD(tripledSw.on)
-            }
-            Slider {
-                id: pitchSlider; minValue: 5; maxValue: 90; value: navit.getAttr("pitch"); text: "Pitch"; onChanged: { navit.setAttr("pitch",pitchSlider.value); gui.setAttr("pitch",pitchSlider.value) }
-                opacity: 0
-           }
+        columns: 1; rows: 3
+       anchors.right: parent.right
+       anchors.top: parent.top;
+       anchors.topMargin: gui.height/16; anchors.leftMargin: gui.width/32
+        spacing: gui.width/12
+        ToggleSwitch {
+           id: fullscreenSw; on: gui.getAttr("fullscreen");  text: "Fullscreen"; onChanged: gui.setAttr("fullscreen",fullscreenSw.on)
+        }
+        ToggleSwitch {
+           id: tripledSw; on: page.isTripleD();  text: "2D/3D"; onChanged: setTripleD(tripledSw.on)
         }
+        Slider {
+           id: pitchSlider; minValue: 5; maxValue: 90; value: navit.getAttr("pitch"); text: "Pitch"; onChanged: { navit.setAttr("pitch",pitchSlider.value); gui.setAttr("pitch",pitchSlider.value) }
+           opacity: 0
+       }
     }
 
     Cellar {anchors.bottom: page.bottom; anchors.horizontalCenter: page.horizontalCenter; width: page.width }

diff --git a/navit/navit/gui/qml/skins/navit/PageSettingsLocale.qml b/navit/navit/gui/qml/skins/navit/PageSettingsLocale.qml
index 8219e85..bb97f4d 100644 (file)
--- a/navit/navit/gui/qml/skins/navit/PageSettingsLocale.qml
+++ b/navit/navit/gui/qml/skins/navit/PageSettingsLocale.qml
@@ -4,7 +4,7 @@ import Qt 4.6
 Rectangle {
     id: page
 
-    width: 800; height: 424
+    width: gui.width; height: gui.height
     border.width: 1
     color: "Black"
     opacity: 0
@@ -24,9 +24,9 @@ Rectangle {
         anchors.horizontalCenter: parent.horizontalCenter;
         anchors.verticalCenter: parent.verticalCenter; 
 
-       Text { id: lang; anchors.bottom: langname.top; text: gui.localeName; color: "White" }
-       Text { id: langname; anchors.centerIn: parent; text: gui.langName; color: "White" }
-       Text { id: ctryname; anchors.top: langname.bottom; text: gui.ctryName; color: "White" }
+       Text { id: lang; anchors.bottom: langname.top; text: gui.localeName; color: "White";font.pointSize: gui.height/24 }
+       Text { id: langname; anchors.centerIn: parent; text: gui.langName; color: "White";font.pointSize: gui.height/24 }
+       Text { id: ctryname; anchors.top: langname.bottom; text: gui.ctryName; color: "White";font.pointSize: gui.height/24 }
     }
 
     Cellar {anchors.bottom: page.bottom; anchors.horizontalCenter: page.horizontalCenter; width: page.width }

diff --git a/navit/navit/gui/qml/skins/navit/PageSettingsRules.qml b/navit/navit/gui/qml/skins/navit/PageSettingsRules.qml
index 945b298..09b0cda 100644 (file)
--- a/navit/navit/gui/qml/skins/navit/PageSettingsRules.qml
+++ b/navit/navit/gui/qml/skins/navit/PageSettingsRules.qml
@@ -3,7 +3,7 @@ import Qt 4.6
 Rectangle {\r
     id: page\r
 \r
-    width: 800; height: 424\r
+    width: gui.width; height: gui.height\r
     border.width: 1\r
     color: "Black"\r
     opacity: 0\r
@@ -22,7 +22,7 @@ Rectangle {
         columns: 1; rows: 3\r
         anchors.horizontalCenter: parent.horizontalCenter;\r
         anchors.verticalCenter: parent.verticalCenter;\r
-        spacing: 64\r
+        spacing: gui.width/12\r
         ToggleSwitch {\r
              id: trackingSw; on: navit.getAttr("tracking");  text: "Lock on road"; onChanged: navit.setAttr("tracking",trackingSw.on)\r
         }\r

diff --git a/navit/navit/gui/qml/skins/navit/PageSettingsTools.qml b/navit/navit/gui/qml/skins/navit/PageSettingsTools.qml
index a7e8f0f..2efd1bd 100644 (file)
--- a/navit/navit/gui/qml/skins/navit/PageSettingsTools.qml
+++ b/navit/navit/gui/qml/skins/navit/PageSettingsTools.qml
@@ -4,7 +4,7 @@ import Qt 4.6
 Rectangle {
     id: page
 
-    width: 800; height: 424
+    width: gui.width; height: gui.height
     border.width: 1
     color: "Black"
     opacity: 0
@@ -23,7 +23,6 @@ Rectangle {
         columns: 1;rows: 1
         anchors.horizontalCenter: parent.horizontalCenter;
         anchors.verticalCenter: parent.verticalCenter; 
-        spacing: 64
         ButtonIcon {
             id: btnDisplay; text: "Locale"; icon: "gui_actions.svg"; onClicked: gui.setPage("PageSettingsLocale.qml")
         }

diff --git a/navit/navit/gui/qml/skins/navit/PageSettingsVehicle.qml b/navit/navit/gui/qml/skins/navit/PageSettingsVehicle.qml
index f5e9527..dbffd7d 100644 (file)
--- a/navit/navit/gui/qml/skins/navit/PageSettingsVehicle.qml
+++ b/navit/navit/gui/qml/skins/navit/PageSettingsVehicle.qml
@@ -3,7 +3,7 @@ import Qt 4.6
 Rectangle {
     id: page
 
-    width: 800; height: 424
+    width: gui.width; height: gui.height
     border.width: 1
     color: "Black"
     opacity: 0
@@ -20,14 +20,14 @@ Rectangle {
 
        ListSelector { 
                id:vehicleList; text: "Current vehicle profile"; itemId: navit.getAttrList("vehicle"); onChanged: {navit.setObjectByName("vehicle",vehicleList.value) }
-               anchors.top: parent.top; anchors.topMargin: 48
-               anchors.horizontalCenter: parent.horizontalCenter;              
+               anchors.top: parent.top; anchors.topMargin: gui.height/16; anchors.leftMargin: gui.width/32
+               anchors.left: parent.left;              
        }
 
        ButtonIcon {
             id: btnVehicle; text: "Vehicle options"; icon: "gui_vehicle.svg"; onClicked: gui.setPage("PageSettingsVehicleOptions.qml")
-           anchors.top: vehicleList.bottom; anchors.topMargin: 48
-           anchors.right: page.horizontalCenter;
+           anchors.verticalCenter: vehicleList.verticalCenter; anchors.leftMargin: gui.width/32
+           anchors.left: vehicleList.horizontalCenter;
         }
 
     Cellar {anchors.bottom: page.bottom; anchors.horizontalCenter: page.horizontalCenter; width: page.width }

diff --git a/navit/navit/gui/qml/skins/navit/Slider.qml b/navit/navit/gui/qml/skins/navit/Slider.qml
index 9fe8277..6f9feb1 100644 (file)
--- a/navit/navit/gui/qml/skins/navit/Slider.qml
+++ b/navit/navit/gui/qml/skins/navit/Slider.qml
@@ -2,7 +2,7 @@ import Qt 4.6
 
 Rectangle {
     id: slider
-    width: background.width + label.width + 40; height: label.height
+    width: background.width + label.width + gui.width/24; height: label.height
     color: "Black"
 
     property int minValue: 0
@@ -12,10 +12,10 @@ Rectangle {
     signal changed
 
     function toSlider(inputVal) {
-       return 2+(((inputVal-minValue)/(maxValue-minValue))*126);
+       return 2+(((inputVal-minValue)/(maxValue-minValue))*(background.width-knob.width-2));
     }
     function fromSlider(inputVal) {
-       return minValue+(((inputVal-2)/(126))*(maxValue-minValue));
+       return minValue+(((inputVal-2)/(background.width-knob.width-2))*(maxValue-minValue));
     }
 
     function startup () {
@@ -32,7 +32,7 @@ Rectangle {
 
     Rectangle {
         id: background
-       x: 20; width: 160; height: 16
+       x: 20; width: gui.width/5; height: gui.height/24
        gradient: Gradient {
                GradientStop { position: 0.0; color: "steelblue" }
                GradientStop { position: 1.0; color: "lightsteelblue" }
@@ -45,7 +45,7 @@ Rectangle {
        radius: 8; opacity: 0.7
        Rectangle {
            id: knob
-           x: 2; y: 2; width: 30; height: 12
+           x: 2; y: 2; width: gui.width/26; height: gui.height/35
            radius: 6
             gradient: Gradient {
                GradientStop { position: 0.0; color: "lightgray" }
@@ -53,13 +53,13 @@ Rectangle {
             }
            MouseRegion {
                anchors.fill: parent
-               drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: 128
+               drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: background.width-knob.width
                onPositionChanged: slider.value=Math.round(fromSlider(knob.x))
                onReleased: slider.changed()
           }
         }
         Text {
-            id: valueTxt; text: slider.value; color: "White"; font.pointSize: 14;
+            id: valueTxt; text: slider.value; color: "White"; font.pointSize: gui.height/32;
             anchors.horizontalCenter: knob.horizontalCenter;
             anchors.verticalCenter: knob.verticalCenter
         }
@@ -67,8 +67,8 @@ Rectangle {
 
 
     Text {
-        id: label; text: slider.text; color: "White"; font.pointSize: 18;
-        anchors.left: background.right; anchors.leftMargin: 32;
+        id: label; text: slider.text; color: "White"; font.pointSize: gui.height/24;
+        anchors.left: background.right; anchors.leftMargin: gui.width/24;
         anchors.verticalCenter: background.verticalCenter
      }
 }

diff --git a/navit/navit/gui/qml/skins/navit/ToggleSwitch.qml b/navit/navit/gui/qml/skins/navit/ToggleSwitch.qml
index 4a0b251..73b9b07 100644 (file)
--- a/navit/navit/gui/qml/skins/navit/ToggleSwitch.qml
+++ b/navit/navit/gui/qml/skins/navit/ToggleSwitch.qml
@@ -2,7 +2,7 @@ import Qt 4.6
 \r
  Item {\r
      id: toggleswitch\r
-     width: background.width + label.width + 40; height: background.height\r
+     width: background.width + label.width + gui.width/24; height: background.height\r
 \r
      property string on: "false"\r
      property string text: "Toggle switch"\r
@@ -29,7 +29,7 @@ import Qt 4.6
 \r
      Text {\r
         id: label; text: toggleswitch.text; color: "White"; font.pointSize: gui.height/32;\r
-        anchors.left: background.right; anchors.leftMargin: gui.width/12;\r
+        anchors.left: background.right; anchors.leftMargin: gui.width/24;\r
         anchors.verticalCenter: background.verticalCenter\r
      }\r
 \r

diff --git a/navit/navit/gui/qml/skins/navit/main.qml b/navit/navit/gui/qml/skins/navit/main.qml
index ff9a0c1..9b06f70 100644 (file)
--- a/navit/navit/gui/qml/skins/navit/main.qml
+++ b/navit/navit/gui/qml/skins/navit/main.qml
@@ -3,7 +3,7 @@ import Qt 4.6
 Rectangle {\r
     id: page\r
 \r
-    width: 800; height: 424\r
+    width: gui.width; height: gui.height\r
     color: "Black"\r
     opacity: 0\r
 \r
@@ -21,8 +21,8 @@ Rectangle {
     Grid {\r
         columns: 3;rows: 1\r
         anchors.horizontalCenter: parent.horizontalCenter;\r
-        anchors.bottom: parent.verticalCenter; anchors.bottomMargin: 48;\r
-        spacing: 64\r
+        anchors.bottom: parent.verticalCenter; anchors.bottomMargin: gui.height/16;\r
+        spacing: gui.width/12\r
         ButtonIcon {\r
             id: btnRoute; text: "Route"; icon: "cursor.svg";  onClicked: gui.setPage("PageRoute.qml")\r
         }\r
@@ -37,8 +37,8 @@ Rectangle {
     Grid {\r
         columns: 2;rows: 1\r
         anchors.horizontalCenter: parent.horizontalCenter;\r
-        anchors.top: parent.verticalCenter; anchors.topMargin: 48;\r
-        spacing: 64\r
+        anchors.top: parent.verticalCenter; anchors.topMargin: gui.height/16;\r
+        spacing: gui.width/12\r
         ButtonIcon {\r
             id: btnAbout; text: "About"; icon: "gui_about.svg"; onClicked: gui.setPage("PageAbout.qml") \r
         }\r

diff --git a/navit/navit/gui/qml/skins/navit/point.qml b/navit/navit/gui/qml/skins/navit/point.qml
index 1c925d1..f9dc114 100644 (file)
--- a/navit/navit/gui/qml/skins/navit/point.qml
+++ b/navit/navit/gui/qml/skins/navit/point.qml
@@ -3,7 +3,7 @@ import Qt 4.6
 Rectangle {
     id: page
 
-    width: 800; height: 424
+    width: gui.width; height: gui.height
     color: "Black"
     opacity: 0
 
@@ -19,44 +19,44 @@ Rectangle {
 
     Text {
        id: infoTxt;
-       text: point.coordString; color: "White"; font.pointSize: 20;
+       text: point.coordString; color: "White"; font.pointSize: gui.height/20;
        anchors.top:parent.top;anchors.horizontalCenter:parent.horizontalCenter
     }
     Text {
        id: nameTxt;
-       text: point.pointName; color: "White"; font.pointSize: 20;
+       text: point.pointName; color: "White"; font.pointSize: gui.height/20;
        anchors.top:infoTxt.bottom;anchors.topMargin: 5;anchors.horizontalCenter:parent.horizontalCenter
     }
 
     Grid {
         columns: 3;rows: 1
         anchors.horizontalCenter: parent.horizontalCenter;
-        anchors.bottom: parent.verticalCenter; anchors.bottomMargin: 48;
-        spacing: 64
+        anchors.bottom: parent.verticalCenter; anchors.bottomMargin: gui.height/16;
+        spacing: gui.width/12
         ButtonIcon {
             id: btnView; text: "View on map"; icon: "gui_maps.svg"; onClicked: console.log("Implement me!");
         }
         ButtonIcon {
-            id: btnRoadbook; text: "Set as position"; icon: "gui_active.svg"; onClicked: { navit.setPosition(); gui.backToMap() }
+            id: btnRoadbook; text: "Set as\nposition"; icon: "gui_active.svg"; onClicked: { navit.setPosition(); gui.backToMap() }
         }
         ButtonIcon {
-            id: btnSettings; text: "Set as destination"; icon: "gui_active.svg"; onClicked: { navit.setDestination(); gui.backToMap() }
+            id: btnSettings; text: "Set as\ndestination"; icon: "gui_active.svg"; onClicked: { navit.setDestination(); gui.backToMap() }
         }
     }
 
     Grid {
         columns: 3;rows: 1
         anchors.horizontalCenter: parent.horizontalCenter;
-        anchors.top: parent.verticalCenter; anchors.topMargin: 48;
-        spacing: 64
+        anchors.top: parent.verticalCenter; anchors.topMargin: gui.height/16;
+        spacing: gui.width/12
         ButtonIcon {
-            id: btnQuit; text: "Nearest POIs"; icon: "attraction.svg"; onClicked: console.log("Implement me!");
+            id: btnQuit; text: "Nearest\nPOIs"; icon: "attraction.svg"; onClicked: console.log("Implement me!");
         }
         ButtonIcon {
-            id: btnStop; text: "Add as a Bookmark"; icon: "gui_bookmark.svg"; onClicked: console.log("Implement me!");
+            id: btnStop; text: "Add as\na Bookmark"; icon: "gui_bookmark.svg"; onClicked: console.log("Implement me!");
         }
         ButtonIcon {
-            id: btnInfo; text: "Point information"; icon: "gui_menu.svg"; onClicked: console.log("Implement me!");
+            id: btnInfo; text: "Point\ninformation"; icon: "gui_menu.svg"; onClicked: console.log("Implement me!");
         }
     }