Misc fixes in settings dialog.

app/qml/ApplicationSettings.qml

@@ -19,6 +19,7 @@
 *******************************************************************************/
 
 import QtQuick 2.2
+import QtQuick.Controls 1.0
 
 import "utils.js" as Utils
 
@@ -455,4 +456,11 @@ QtObject{
         storeCustomProfiles();
         //storage.dropSettings(); //DROPS THE SETTINGS!.. REMEMBER TO DISABLE ONCE ENABLED!!
     }
+
+    // VARS ///////////////////////////////////////////////////////////////////
+
+    property Label _sampleLabel: Label {
+        text: "100%"
+    }
+    property real labelWidth: _sampleLabel.width
 }

app/qml/CheckableSlider.qml

@@ -22,6 +22,8 @@ import QtQuick 2.2
 import QtQuick.Controls 1.1
 import QtQuick.Layouts 1.1
 
+import "Components"
+
 RowLayout {
     property alias name: check.text
 
@@ -35,7 +37,6 @@ RowLayout {
     id: setting_component
     anchors.left: parent.left
     anchors.right: parent.right
-    spacing: 25
 
     onValueChanged: {
         check.checked = !(value == 0);
@@ -45,7 +46,7 @@ RowLayout {
 
     CheckBox{
         id: check
-        implicitWidth: 150
+        implicitWidth: 160
         onClicked: {
             if(!checked){
                 checked = false;
@@ -66,16 +67,8 @@ RowLayout {
             newValue(value);
         }
     }
-    Text{
-        id: textfield
-        property string unformattedText: Math.round(((value - min_value) / (max_value - min_value)) * 100)
-        text: formatNumber(unformattedText)
-    }
-    function formatNumber(num) {
-        var n = "" + num;
-        while (n.length < 3) {
-            n = " " + n;
-        }
-        return n + "%";
+    SizedLabel {
+        anchors { top: parent.top; bottom: parent.bottom }
+        text: Math.round(((value - min_value) / (max_value - min_value)) * 100) + "%"
     }
 }

app/qml/Components/SizedLabel.qml

@@ -0,0 +1,35 @@
+/*******************************************************************************
+* Copyright (c) 2013 "Filippo Scognamiglio"
+* https://github.com/Swordfish90/cool-retro-term
+*
+* This file is part of cool-retro-term.
+*
+* cool-retro-term is free software: you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation, either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License
+* along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*******************************************************************************/
+
+
+import QtQuick 2.0
+import QtQuick.Controls 1.0
+
+// This component is simply a label with a predifined size.
+// Used to improve alignment.
+
+Item {
+    property alias text: textfield.text
+    width: appSettings.labelWidth
+    Label{
+        id: textfield
+        anchors { right: parent.right; verticalCenter: parent.verticalCenter }
+    }
+}

app/qml/SettingsGeneralTab.qml

@@ -88,6 +88,7 @@ Tab{
                     Item {
                         // Spacing
                         Layout.fillHeight: true
+                        visible: false
                     }
                     Button{
                         Layout.fillWidth: true

app/qml/SettingsPerformanceTab.qml

@@ -22,6 +22,8 @@ import QtQuick 2.2
 import QtQuick.Controls 1.1
 import QtQuick.Layouts 1.1
 
+import "Components"
+
 Tab{
     ColumnLayout{
         anchors.fill: parent
@@ -47,10 +49,10 @@ Tab{
                     maximumValue: 60
                     minimumValue: 1
                     enabled: appSettings.fps !== 0
-                    value: appSettings.fps !== 0 ? appSettings.fps : 60
+                    value: appSettings.fps !== 0 ? appSettings.fps : 24
                 }
-                Text{text: slider.value}
-                Text{text: qsTr("Texture Quality")}
+                SizedLabel { text: slider.value }
+                Label{text: qsTr("Texture Quality")}
                 Slider{
                     Layout.fillWidth: true
                     id: txtslider
@@ -63,7 +65,7 @@ Tab{
                         enabled = true;
                     }
                 }
-                Text{text: Math.round(txtslider.value * 100) + "%"}
+                SizedLabel{text: Math.round(txtslider.value * 100) + "%"}
             }
         }
         GroupBox{
@@ -74,8 +76,7 @@ Tab{
             GridLayout{
                 id: bloomQualityContainer
                 anchors.fill: parent
-
-                Text{text: qsTr("Bloom Quality")}
+                Label{text: qsTr("Bloom Quality")}
                 Slider{
                     Layout.fillWidth: true
                     id: bloomSlider
@@ -88,7 +89,7 @@ Tab{
                         enabled = true;
                     }
                 }
-                Text{text: Math.round(bloomSlider.value * 100) + "%"}
+                SizedLabel{text: Math.round(bloomSlider.value * 100) + "%"}
             }
         }
         GroupBox{
@@ -100,7 +101,7 @@ Tab{
                 id: blurQualityContainer
                 anchors.fill: parent
 
-                Text{text: qsTr("BurnIn Quality")}
+                Label{text: qsTr("BurnIn Quality")}
                 Slider{
                     Layout.fillWidth: true
                     id: burnInSlider
@@ -113,7 +114,7 @@ Tab{
                         enabled = true;
                     }
                 }
-                Text{text: Math.round(burnInSlider.value * 100) + "%"}
+                SizedLabel{text: Math.round(burnInSlider.value * 100) + "%"}
             }
         }
         GroupBox{

app/qml/SettingsScreenTab.qml

@@ -46,17 +46,17 @@ Tab{
             GridLayout{
                 anchors.fill: parent
                 columns: 2
-                Text{ text: qsTr("Brightness") }
+                Label{ text: qsTr("Brightness") }
                 SimpleSlider{
                     onValueChanged: appSettings.brightness = value
                     value: appSettings.brightness
                 }
-                Text{ text: qsTr("Contrast") }
+                Label{ text: qsTr("Contrast") }
                 SimpleSlider{
                     onValueChanged: appSettings.contrast = value
                     value: appSettings.contrast
                 }
-                Text{ text: qsTr("Opacity") }
+                Label{ text: qsTr("Opacity") }
                 SimpleSlider{
                     onValueChanged: appSettings.windowOpacity = value
                     value: appSettings.windowOpacity

app/qml/SettingsTerminalTab.qml

@@ -22,6 +22,8 @@ import QtQuick 2.2
 import QtQuick.Controls 1.1
 import QtQuick.Layouts 1.1
 
+import "Components"
+
 Tab{
     ColumnLayout{
         anchors.fill: parent
@@ -32,7 +34,7 @@ Tab{
             GridLayout{
                 anchors.fill: parent
                 columns: 2
-                Text{ text: qsTr("Name") }
+                Label{ text: qsTr("Name") }
                 ComboBox{
                     id: fontChanger
                     Layout.fillWidth: true
@@ -54,7 +56,7 @@ Tab{
                     }
                     Component.onCompleted: updateIndex();
                 }
-                Text{ text: qsTr("Scaling") }
+                Label{ text: qsTr("Scaling") }
                 RowLayout{
                     Layout.fillWidth: true
                     Slider{
@@ -74,11 +76,11 @@ Tab{
                             onFontScalingChanged: fontScalingChanger.value = appSettings.fontScaling;
                         }
                     }
-                    Text{
+                    SizedLabel{
                         text: Math.round(fontScalingChanger.value * 100) + "%"
                     }
                 }
-                Text{ text: qsTr("Font Width") }
+                Label{ text: qsTr("Font Width") }
                 RowLayout{
                     Layout.fillWidth: true
                     Slider{
@@ -93,7 +95,7 @@ Tab{
                             maximumValue = 1.5;
                         }
                     }
-                    Text{
+                    SizedLabel{
                         text: Math.round(widthChanger.value * 100) + "%"
                     }
                 }

app/qml/SimpleSlider.qml

@@ -22,6 +22,8 @@ import QtQuick 2.2
 import QtQuick.Controls 1.1
 import QtQuick.Layouts 1.1
 
+import "Components"
+
 RowLayout {
     property alias value: slider.value
     property alias stepSize: slider.stepSize
@@ -36,15 +38,7 @@ RowLayout {
         stepSize: parent.stepSize
         Layout.fillWidth: true
     }
-    Text{
-        id: textfield
-        text: formatNumber(Math.round(value * maxMultiplier))
-    }
-    function formatNumber(num) {
-        var n = "" + num;
-        while (n.length < 3) {
-            n = " " + n;
-        }
-        return n + "%";
+    SizedLabel{
+        text: Math.round(value * maxMultiplier) + "%"
     }
 }

app/qml/resources.qrc

@@ -51,5 +51,6 @@
         <file>fonts/modern-inconsolata/Inconsolata.otf</file>
         <file>SettingsScreenTab.qml</file>
         <file>fonts/modern-fixedsys-excelsior/FSEX301-L2.ttf</file>
+        <file>Components/SizedLabel.qml</file>
     </qresource>
 </RCC>