New AbstractSelector for Selector-Components to avoid recurrent code blocks.

src/gui/qml/components/MyAbstractSelector.qml

@@ -0,0 +1,114 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.1
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2
+import "../js/colors.js" as GlobalColors
+import "styles"
+
+Rectangle {
+    id: selector
+    z:1000
+    visible: false
+    anchors.fill: parent
+    color: "#88000000" //dark transparent background
+
+    property alias container: ctr.children
+
+    property string titleText: ""
+    property string button1Text: ""
+    property string button2Text: ""
+
+    signal button1Clicked
+    signal button2Clicked
+
+    function show() {
+        visible = true;
+    }
+
+    function hide() {
+        visible = false;
+    }
+
+    MouseArea {
+        //set empty MouseArea to prevent the background to be clicked
+        anchors.fill: parent
+    }
+
+    Rectangle {
+        id: selectorBox
+        visible: true
+        color: "white"
+        height: AppStyle.selectorBoxHeight
+        width: AppStyle.selectorBoxWidth
+        anchors.centerIn: parent;
+        radius: AppStyle.selectorBoxRadius
+
+        ColumnLayout {
+            id: content
+            anchors.fill: parent
+            anchors.margins: AppStyle.selectorBoxContentMargins
+            spacing: AppStyle.columnLayoutSpacing
+            Text {
+                id: title
+                font.pixelSize: AppStyle.selectorBoxTitleFontSize
+                font.bold: AppStyle.selectorBoxTitleFontBold
+                text: titleText
+                anchors.left: parent.left
+                anchors.top: parent.top
+                anchors.topMargin: AppStyle.selectorBoxTitleTopMargin
+                Layout.preferredHeight: contentHeight
+            }
+
+            Rectangle {
+                id: preCtr
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                Rectangle {
+                    anchors.fill: preCtr
+                    anchors.leftMargin: AppStyle.selectorBoxRealContentLeftMargin
+                    anchors.rightMargin: AppStyle.selectorBoxRealContentRightMargin
+                    id: ctr
+                    //The content goes here
+                }
+            }
+
+            RowLayout {
+                width: parent.width
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                spacing: AppStyle.rowLayoutSpacing
+                Layout.preferredHeight: btn1.contentHeight
+
+                Text {
+                    id: btn1
+                    font.pixelSize: AppStyle.selectorBoxButtonFontSize
+                    font.bold: true
+                    width: button1Text == "" ? 0 : contentWidth
+                    text: button1Text
+
+                    signal buttonClicked
+
+                    MouseArea {
+                        id: mouse1
+                        anchors.fill: parent
+                        onClicked: selector.button1Clicked()
+                    }
+                }
+                Text {
+                    id: btn2
+                    font.pixelSize: AppStyle.selectorBoxButtonFontSize
+                    font.bold: true
+                    width: button2Text == "" ? 0 : contentWidth
+                    text: button2Text
+
+                    MouseArea {
+                        id: mouse2
+                        anchors.fill: parent
+                        onClicked: selector.button2Clicked()
+                    }
+                }
+            }
+        }
+    }
+}
+

src/gui/qml/components/MyBlindsRaiseIntervalSelector.qml

@@ -6,12 +6,9 @@ import "../js/colors.js" as GlobalColors
 import "../js/tools.js" as GlobalTools
 import "styles/"
 
-Rectangle {
+Item {
-    id: selector
+    id: root
-    z:1000
-    visible: false
     anchors.fill: parent
-    color: "#88000000" //dark transparent background
 
     property string titleString: ""
     property string raiseOnHandsType: ""
@@ -23,11 +20,15 @@ Rectangle {
     property int raiseOnMinutesMaximum: 99
     property bool ready: false
 
-    function show(type, hands, minutes) {
+    signal accepted
+
+    function show(title, type, hands, minutes) {
+        titleString = title
         raiseOnHandsType = type;
         raiseOnHandsInterval = hands;
         raiseOnMinutesInterval = minutes;
-        visible = true;
+
+        mySelector.show()
 
         if(raiseOnHandsType == "1") {
             textFieldHandsInterval.focus = true;
@@ -37,163 +38,97 @@ Rectangle {
             textFieldMinutesInterval.focus = true;
             radioBtnRaiseOnMinutes.checked = true;
         }
-   }
+    }
-
-    function reject() {
-        visible = false;
-   }
 
     function selected(handsType, handsInterval, minutesInterval) {
         raiseOnHandsType = handsType;
         raiseOnHandsInterval = handsInterval;
         raiseOnMinutesInterval = minutesInterval;
-        visible = false;
-   }
 
-    MouseArea {
+        mySelector.hide()
-        //set empty MouseArea to prevent the background to be clicked
+        root.accepted()
-        anchors.fill: parent
     }
 
-    Rectangle {
+    MyAbstractSelector {
-        id: selectionBox
+        id: mySelector
-        visible: true
+        titleText: titleString
-        color: "white"
+        button1Text: qsTr("CANCEL")
-        height: Math.round(parent.height*0.9)
+        onButton1Clicked: hide()
-        width: Math.round(parent.width*0.6)
+        button2Text: qsTr("OK")
-        x: Math.round(parent.width*0.5 - width*0.5)
+        onButton2Clicked: {
-        y: Math.round(parent.height*0.5 - height*0.5)
+            textFieldHandsInterval.correctValue();
-        radius: Math.round(parent.height*0.01)
+            textFieldMinutesInterval.correctValue();
+            //return values
+            root.selected(radioBtnRaiseOnHands.checked ? "1": "0", textFieldHandsInterval.text, textFieldMinutesInterval.text);
+        }
 
-        Rectangle {
+        container: ColumnLayout {
-            id: selectionBoxcontent
             anchors.fill: parent
-            anchors.margins: Math.round(appWindow.height*0.05)
+            RowLayout { //Hands interval section
-
+                spacing: AppStyle.rowLayoutSpacing
-            ColumnLayout {
-                id: content
-                anchors.fill: parent
-                spacing: AppStyle.columnLayoutSpacing
-                Text {
-                    id: titleText
-                    font.pixelSize: AppStyle.selectorTitleFontSize
-                    font.bold: true
-                    text: qsTr("Raise blinds")
-                    anchors.left: parent.left
-                    anchors.top: parent.top
-                    anchors.topMargin: -Math.round(appWindow.height*0.035)
-                    Layout.preferredHeight: contentHeight
-                }
                 ExclusiveGroup { id: raiseTypeGroup }
-
+                RadioButton {
-                RowLayout { //Hands interval section
+                    id: radioBtnRaiseOnHands
-                    spacing: AppStyle.rowLayoutSpacing
+                    exclusiveGroup: raiseTypeGroup
-
+                    style: MyRadioButtonStyle {
-                    RadioButton {
+                        myRadioBtn: radioBtnRaiseOnHands;
-                        id: radioBtnRaiseOnHands
+                        labelString: "Every"
-                        exclusiveGroup: raiseTypeGroup
-                        style: MyRadioButtonStyle {
-                            myRadioBtn: radioBtnRaiseOnHands;
-                            labelString: "Every"
-                        }
-                        onClicked: textFieldHandsInterval.focus = true;
-                    }
-
-                    TextField {
-                        id: textFieldHandsInterval
-                        width: AppStyle.textFieldFontSize*2
-                        validator: IntValidator{bottom: raiseOnHandsMinimum; top: raiseOnHandsMaximum;}
-                        text: raiseOnHandsInterval
-                        function correctValue() {
-                            text = GlobalTools.correctTextFieldIntegerValue(selector, text, raiseOnHandsMinimum);
-                        }
-                        onFocusChanged: { if(selector.ready && !focus) correctValue(); }
-                        onEditingFinished: { if(selector.ready) correctValue(); }
-
-                        style: MyTextFieldStyle {
-                            myTextField: textFieldHandsInterval
-                        }
-                    }
-                    Text {
-                        id: onHandsString
-                        font.pixelSize: AppStyle.selectorValueFontSize
-                        text: qsTr("hands")
-                    }
-                }
-                RowLayout { //Minutes interval section
-                    spacing: AppStyle.rowLayoutSpacing
-                    RadioButton {
-                        id: radioBtnRaiseOnMinutes
-                        exclusiveGroup: raiseTypeGroup
-                        style: MyRadioButtonStyle {
-                            myRadioBtn: radioBtnRaiseOnMinutes;
-                            labelString: "Every"
-                        }
-                        onClicked: textFieldMinutesInterval.focus = true;
-                    }
-                    TextField {
-                        id: textFieldMinutesInterval
-                        validator: IntValidator{bottom: raiseOnMinutesMinimum; top: raiseOnMinutesMaximum;}
-                        text: raiseOnMinutesInterval
-                        width: AppStyle.textFieldFontSize*2
-                        function correctValue() {
-                            text = GlobalTools.correctTextFieldIntegerValue(selector, text, raiseOnMinutesMinimum);
-
-                        }
-                        onFocusChanged: { if(selector.ready && !focus) correctValue(); }
-                        onEditingFinished: { if(selector.ready) correctValue(); }
-
-                        style: MyTextFieldStyle {
-                            myTextField: textFieldMinutesInterval
-                        }
-                    }
-                    Text {
-                        id: onMinutesString
-                        font.pixelSize: AppStyle.selectorValueFontSize
-                        text: qsTr("minutes")
                     }
+                    onClicked: textFieldHandsInterval.focus = true;
                 }
 
-                RowLayout { //bottom button line
+                TextField {
-                    width: parent.width
+                    id: textFieldHandsInterval
-                    anchors.right: parent.right
+                    width: AppStyle.textFieldFontSize*2
-                    anchors.bottom: parent.bottom
+                    validator: IntValidator{bottom: raiseOnHandsMinimum; top: raiseOnHandsMaximum;}
-                    anchors.bottomMargin: -Math.round(appWindow.height*0.017)
+                    text: raiseOnHandsInterval
-                    spacing: okButton.contentWidth
+                    function correctValue() {
-                    Layout.preferredHeight: cancelButton.contentHeight
+                        text = GlobalTools.correctTextFieldIntegerValue(root, text, raiseOnHandsMinimum);
+                    }
+                    onFocusChanged: { if(root.ready && !focus) correctValue(); }
+                    onEditingFinished: { if(root.ready) correctValue(); }
 
-                    Text {
+                    style: MyTextFieldStyle {
-                        id: cancelButton
+                        myTextField: textFieldHandsInterval
-                        font.pixelSize: AppStyle.selectorButtonFontSize
-                        font.bold: true
-                        text: qsTr("CANCEL")
-                        Layout.preferredHeight: contentHeight
-                        MouseArea {
-                            id: cancelMouse
-                            anchors.fill: parent
-                            onClicked: {
-                                reject()
-                            }
-                        }
                     }
-                    Text {
+                }
-                        id: okButton
+                Text {
-                        font.pixelSize: AppStyle.selectorButtonFontSize
+                    id: onHandsString
-                        font.bold: true
+                    font.pixelSize: AppStyle.selectorBoxValueFontSize
-                        color: GlobalColors.accentColor
+                    text: qsTr("hands")
-                        text: qsTr("OK")
+                }
-                        Layout.preferredHeight: contentHeight
+            }
-                        MouseArea {
+            RowLayout { //Minutes interval section
-                            id: okMouse
+                spacing: AppStyle.rowLayoutSpacing
-                            anchors.fill: parent
+                RadioButton {
-                            onClicked: {
+                    id: radioBtnRaiseOnMinutes
-                                textFieldHandsInterval.correctValue();
+                    exclusiveGroup: raiseTypeGroup
-                                textFieldMinutesInterval.correctValue();
+                    style: MyRadioButtonStyle {
-                                //return values
+                        myRadioBtn: radioBtnRaiseOnMinutes;
-                                selected(radioBtnRaiseOnHands.checked ? "1": "0", textFieldHandsInterval.text, textFieldMinutesInterval.text);
+                        labelString: "Every"
-                            }
-                        }
                     }
+                    onClicked: textFieldMinutesInterval.focus = true;
+                }
+                TextField {
+                    id: textFieldMinutesInterval
+                    validator: IntValidator{bottom: raiseOnMinutesMinimum; top: raiseOnMinutesMaximum;}
+                    text: raiseOnMinutesInterval
+                    width: AppStyle.textFieldFontSize*2
+                    function correctValue() {
+                        text = GlobalTools.correctTextFieldIntegerValue(root, text, raiseOnMinutesMinimum);
+
+                    }
+                    onFocusChanged: { if(root.ready && !focus) correctValue(); }
+                    onEditingFinished: { if(root.ready) correctValue(); }
+
+                    style: MyTextFieldStyle {
+                        myTextField: textFieldMinutesInterval
+                    }
+                }
+                Text {
+                    id: onMinutesString
+                    font.pixelSize: AppStyle.selectorBoxValueFontSize
+                    text: qsTr("minutes")
                 }
             }
         }

src/gui/qml/components/MyBlindsRaiseModeSelector.qml

@@ -6,12 +6,9 @@ import "../js/colors.js" as GlobalColors
 import "../js/tools.js" as GlobalTools
 import "styles"
 
-Rectangle {
+Item {
-    id: selector
+    id: root
-    z:1000
-    visible: false
     anchors.fill: parent
-    color: "#88000000" //dark transparent background
 
     property string titleString: ""
     property bool alwaysDoubleBlinds: false
@@ -22,28 +19,29 @@ Rectangle {
     property int afterMBAlwaysRaiseValue: 0
     property bool ready: false
 
-    function show(doubleBlinds, list, afterMBDouble, afterMBRaise, afterMBRaiseValue, afterMBStay) {
+    signal accepted
+
+    function show(title, doubleBlinds, list, afterMBDouble, afterMBRaise, afterMBRaiseValue, afterMBStay) {
+        titleString = title
         alwaysDoubleBlinds = doubleBlinds;
         manualBlindsList = list;
         afterMBAlwaysDoubleBlinds = afterMBDouble;
         afterMBAlwaysRaiseAbout = afterMBRaise;
         afterMBAlwaysRaiseValue = afterMBRaiseValue;
         afterMBStayAtLastBlind = afterMBStay;
-        visible = true;
 
-//        if(raiseOnHandsType == "1") {
+        mySelector.show()
-//            textFieldHandsInterval.focus = true;
+
-//            radioBtnRaiseOnHands.checked = true;
+        //        if(raiseOnHandsType == "1") {
-//        }
+        //            textFieldHandsInterval.focus = true;
-//        else {
+        //            radioBtnRaiseOnHands.checked = true;
-//            textFieldMinutesInterval.focus = true;
+        //        }
-//            radioBtnRaiseOnMinutes.checked = true;
+        //        else {
-//        }
+        //            textFieldMinutesInterval.focus = true;
-   }
+        //            radioBtnRaiseOnMinutes.checked = true;
+        //        }
+    }
 
-    function reject() {
-        visible = false;
-   }
 
     function selected(doubleBlinds, list, afterMBDouble, afterMBRaise, afterMBRaiseValue, afterMBStay) {
         alwaysDoubleBlinds = doubleBlinds;
@@ -52,84 +50,33 @@ Rectangle {
         afterMBAlwaysRaiseAbout = afterMBRaise;
         afterMBAlwaysRaiseValue = afterMBRaiseValue;
         afterMBStayAtLastBlind = afterMBStay;
-        visible = false;
-   }
 
-    MouseArea {
+        mySelector.hide()
-        //set empty MouseArea to prevent the background to be clicked
+        root.accepted()
-        anchors.fill: parent
     }
 
-    Rectangle {
-        id: selectionBox
-        visible: true
-        color: "white"
-        height: Math.round(parent.height*0.9)
-        width: Math.round(parent.width*0.6)
-        x: Math.round(parent.width*0.5 - width*0.5)
-        y: Math.round(parent.height*0.5 - height*0.5)
-        radius: Math.round(parent.height*0.01)
 
-        Rectangle {
+    MyAbstractSelector {
-            id: selectionBoxcontent
+        id: mySelector
+        titleText: titleString
+        button1Text: qsTr("CANCEL")
+        onButton1Clicked: hide()
+        button2Text: qsTr("OK")
+        onButton2Clicked: {
+            //            textFieldHandsInterval.correctValue();
+            //            textFieldMinutesInterval.correctValue();
+            //return values
+            //            root.selected(radioBtnRaiseOnHands.checked ? "1": "0", textFieldHandsInterval.text, textFieldMinutesInterval.text);
+        }
+
+        container: ScrollView {
             anchors.fill: parent
-            anchors.margins: Math.round(appWindow.height*0.05)
-
             ColumnLayout {
-                id: contentColumnLayout
+                width: parent.width
-                anchors.fill: parent
+//                TODO Hier gehts mit dem Inhalt weiter
-                spacing: AppStyle.columnLayoutSpacing
-
-//                TODO always double or manual list
-
-
-
-
-
-
-                RowLayout { //bottom button line
-                    width: parent.width
-                    anchors.right: parent.right
-                    anchors.bottom: parent.bottom
-                    anchors.bottomMargin: -Math.round(appWindow.height*0.017)
-                    spacing: okButton.contentWidth
-                    Layout.preferredHeight: cancelButton.contentHeight
-
-                    Text {
-                        id: cancelButton
-                        font.pixelSize: appWindow.selectorButtonFontSize
-                        font.bold: true
-                        text: qsTr("CANCEL")
-                        Layout.preferredHeight: contentHeight
-                        MouseArea {
-                            id: cancelMouse
-                            anchors.fill: parent
-                            onClicked: {
-                                reject()
-                            }
-                        }
-                    }
-                    Text {
-                        id: okButton
-                        font.pixelSize: appWindow.selectorButtonFontSize
-                        font.bold: true
-                        color: GlobalColors.accentColor
-                        text: qsTr("OK")
-                        Layout.preferredHeight: contentHeight
-                        MouseArea {
-                            id: okMouse
-                            anchors.fill: parent
-                            onClicked: {
-//                                textFieldHandsInterval.correctValue();
-//                                textFieldMinutesInterval.correctValue();
-                                //return values
-//                                selected(radioBtnRaiseOnHands.checked ? "1": "0", textFieldHandsInterval.text, textFieldMinutesInterval.text);
-                            }
-                        }
-                    }
-                }
             }
         }
+
     }
     Component.onCompleted: ready = true;
 }

src/gui/qml/components/MyComboBoxSelector.qml

@@ -5,19 +5,18 @@ import QtQuick.Controls.Styles 1.2
 import "../js/colors.js" as GlobalColors
 import "styles"
 
-Rectangle {
+Item {
-    id: selector
+    id: root
-    z:1000
-    visible: false
     anchors.fill: parent
-    color: "#88000000" //dark transparent background
 
     property ListModel selectionModel: ListModel {}
-    property string titleString
     property string valueFromParent
+    property string titleString
     property string returnValue
     property bool valueIsIndex
 
+    signal accepted
+
     function show(title, list, vl, valueIndex) {
         titleString = title;
         valueFromParent = vl;
@@ -28,11 +27,7 @@ Rectangle {
         for (var i=0; i < list.count; i++) {
             selectionModel.append({"valueString": list.get(i).value});
         }
-        visible = true;
+        mySelector.show()
-    }
-
-    function reject() {
-        visible = false;
     }
 
     function selected(newString, index) {
@@ -42,79 +37,32 @@ Rectangle {
         else {
             returnValue = newString
         }
-        visible = false;
+        mySelector.hide()
+        root.accepted()
     }
 
-    MouseArea {
+    MyAbstractSelector {
-        //set empty MouseArea to prevent the background to be clicked
+        id: mySelector
-        anchors.fill: parent
+        titleText: titleString
-    }
+        button1Text: qsTr("CANCEL")
+        onButton1Clicked: hide()
 
-    Rectangle {
+        container: ScrollView {
-        id: selectionBox
+            anchors.fill:parent
-        visible: true
+            ListView {
-        color: "white"
+                anchors.fill: parent
-        height: Math.round(parent.height*0.9)
+                spacing: Math.round(appWindow.height*0.05)
-        width: Math.round(parent.width*0.6)
+                model: selectionModel
-        x: Math.round(parent.width*0.5 - width*0.5)
+                delegate: RadioButton {
-        y: Math.round(parent.height*0.5 - height*0.5)
+                    id: radioBtn
-        radius: Math.round(parent.height*0.01)
+                    //check of value is index type and do the corresponding checked? test
-
+                    checked: valueIsIndex ? (parseInt(valueFromParent) == index ? true : false) : (valueFromParent == valueString ? true : false)
-        ColumnLayout {
-            id: content
-            anchors.fill: parent
-            spacing: Math.round(selectionBox.height*0.06)
-            Text {
-                id: titleText
-                font.pixelSize: AppStyle.selectorTitleFontSize
-                font.bold: true
-                text: titleString
-                anchors.left: parent.left
-                anchors.top: parent.top
-                anchors.leftMargin: 30
-                anchors.topMargin: 10
-                Layout.preferredHeight: contentHeight
-            }
-            ScrollView {
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.rightMargin: 30
-                anchors.leftMargin: 50
-                Layout.fillHeight: true
-                ListView {
-                    anchors.fill: parent
-                    spacing: Math.round(appWindow.height*0.05)
-                    model: selectionModel
-                    delegate: RadioButton {
-                        id: radioBtn
-                        //check of value is index type and do the corresponding checked? test
-                        checked: valueIsIndex ? (parseInt(valueFromParent) == index ? true : false) : (valueFromParent == valueString ? true : false)
-                        onClicked: {
-                            selector.selected(valueString, index)
-                        }
-                        style: MyRadioButtonStyle {
-                            myRadioBtn: radioBtn
-                            labelString: valueString
-                        }
-                    }
-                }
-            }
-            Text {
-                id: cancelButton
-                font.pixelSize: AppStyle.selectorButtonFontSize
-                font.bold: true
-                text: qsTr("CANCEL")
-                anchors.right: parent.right
-                anchors.bottom: parent.bottom
-                anchors.rightMargin: 30
-                anchors.bottomMargin: 20
-                Layout.preferredHeight: contentHeight
-
-                MouseArea {
-                    id: cancelMouse
-                    anchors.fill: parent
                     onClicked: {
-                        reject()
+                        root.selected(valueString, index)
+                    }
+                    style: MyRadioButtonStyle {
+                        myRadioBtn: radioBtn
+                        labelString: valueString
                     }
                 }
             }

src/gui/qml/components/MyListViewDelegateFactory.qml

@@ -35,37 +35,43 @@ Item {
             MyComboBoxSelector {
                 id: myComboBoxSelector
                 parent: myListViewRoot // this needs to be parent to display the selector over the whole ListView
+                onAccepted: myListViewModel.setProperty(myComboBoxContent.modelIndex, "myValue", myComboBoxSelector.returnValue);
             }
 
             id: myComboBoxContent
             property int modelIndex: model.index
             color: mouse.pressed ? "#11000000" : "white"
             width: root.width
-            height: Math.round(comboBoxTitle.contentHeight*2.1 + comboBoxValue.contentHeight*1.0)
+            height: Math.round(textLayout.height*AppStyle.listViewDelegateHeightBasedOnContentFactor)
-            Text {
+            ColumnLayout {
-                id: comboBoxTitle
+                id: textLayout
-                anchors.left: parent.left
+                spacing: AppStyle.listViewDelegateTitleAndValueSpacing
-                anchors.margins: 30
+                anchors.verticalCenter: parent.verticalCenter
-                y: myValue != "" ? Math.round(parent.height*0.5 - contentHeight*0.9) : Math.round(parent.height*0.5 - contentHeight*0.5)
+                Text {
-                color: "black"
+                    id: comboBoxTitle
-                font.pixelSize: AppStyle.listViewTitleFontSize
+                    anchors.left: parent.left
-                text: myTitle
+                    anchors.margins: AppStyle.listViewDelegateTitleAndValueMargins
-            }
+                    color: "black"
-            Text {
+                    font.pixelSize: AppStyle.listViewDelegateTitleFontSize
-                id: comboBoxValue
+                    text: myTitle
-                anchors.left: parent.left
+                    Layout.preferredHeight: contentHeight
-                anchors.margins: 30
+                }
-                y: Math.round(parent.height*0.5 + contentHeight*0.15)
+                Text {
-                color: "grey"
+                    id: comboBoxValue
-                font.pixelSize: myValue != "" ? AppStyle.listViewValueFontSize : 0
+                    anchors.left: parent.left
-                //setup value from Index if necessary
+                    anchors.margins: AppStyle.listViewDelegateTitleAndValueMargins
-                text: myValueIsIndex ? myValuesList.get(parseInt(myValue)).value : myValue
+                    color: "grey"
+                    font.pixelSize: myValue != "" ? AppStyle.listViewDelegateValueFontSize : 0
+                    //setup value from Index if necessary
+                    text: myValueIsIndex ? myValuesList.get(parseInt(myValue)).value : myValue
+                    Layout.preferredHeight: contentHeight
+                }
             }
             Rectangle {
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.bottom: parent.bottom
-                width: parent.width - 30
+                width: parent.width - AppStyle.listViewDelegateSeperatorLineIndent
-                height: 1
+                height: AppStyle.listViewDelegateSeperatorLineHeight
                 color: "lightgrey"
             }
             MouseArea {
@@ -75,17 +81,7 @@ Item {
                     //call selector overlay and set inital values
                     myComboBoxSelector.show(myTitle, myValuesList, myValue, myValueIsIndex)
                 }
-                Connections {
-                    target: myComboBoxSelector
-                    onVisibleChanged: {
-                        if(!myComboBoxSelector.visible) {
-                            //call update the currentItem with selection from the comboBox selector
-                            myListViewModel.setProperty(myComboBoxContent.modelIndex, "myValue", myComboBoxSelector.returnValue);
-                        }
-                    }
-                }
             }
-
             Component.onCompleted: {
                 //after building the delegate content set the final height to the root item
                 root.height = Qt.binding(function() { return height })
@@ -100,36 +96,42 @@ Item {
             MySpinBoxSelector {
                 id: mySpinBoxSelector
                 parent: myListViewRoot // this needs to be parent to display the selector over the whole ListView
+                onAccepted: myListViewModel.setProperty(mySpinBoxContent.modelIndex, "myValue", mySpinBoxSelector.returnValue);
             }
 
             id: mySpinBoxContent
             property int modelIndex: model.index
             color: mouse.pressed ? "#11000000" : "white"
             width: root.width
-            height: Math.round(spinBoxTitle.contentHeight*2.1 + spinBoxValue.contentHeight*1.0)
+            height: Math.round(textLayout.height*AppStyle.listViewDelegateHeightBasedOnContentFactor)
-            Text {
+            ColumnLayout {
-                id: spinBoxTitle
+                id: textLayout
-                anchors.left: parent.left
+                spacing: AppStyle.listViewDelegateTitleAndValueSpacing
-                anchors.margins: 30
+                anchors.verticalCenter: parent.verticalCenter
-                y: myValue != "" ? Math.round(parent.height*0.5 - contentHeight*0.9) : Math.round(parent.height*0.5 - contentHeight*0.5)
+                Text {
-                color: "black"
+                    id: spinBoxTitle
-                font.pixelSize: AppStyle.listViewTitleFontSize
+                    anchors.left: parent.left
-                text: myTitle
+                    anchors.margins: AppStyle.listViewDelegateTitleAndValueMargins
-            }
+                    color: "black"
-            Text {
+                    font.pixelSize: AppStyle.listViewDelegateTitleFontSize
-                id: spinBoxValue
+                    text: myTitle
-                anchors.left: parent.left
+                    Layout.preferredHeight: contentHeight
-                anchors.margins: 30
+                }
-                y: Math.round(parent.height*0.5 + contentHeight*0.15)
+                Text {
-                color: "grey"
+                    id: spinBoxValue
-                font.pixelSize: myValue != "" ? AppStyle.listViewValueFontSize : 0
+                    anchors.left: parent.left
-                text: myPrefix+myValue
+                    anchors.margins: AppStyle.listViewDelegateTitleAndValueMargins
+                    color: "grey"
+                    font.pixelSize: myValue != "" ? AppStyle.listViewDelegateValueFontSize : 0
+                    text: myPrefix+myValue
+                    Layout.preferredHeight: contentHeight
+                }
             }
             Rectangle {
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.bottom: parent.bottom
-                width: parent.width - 30
+                width: parent.width - AppStyle.listViewDelegateSeperatorLineIndent
-                height: 1
+                height: AppStyle.listViewDelegateSeperatorLineHeight
                 color: "lightgrey"
             }
             MouseArea {
@@ -139,17 +141,7 @@ Item {
                     //call selector overlay and set inital value
                     mySpinBoxSelector.show(myId, myTitle, myMinValue, myMaxValue, myValue, myPrefix)
                 }
-                Connections {
-                    target: mySpinBoxSelector
-                    onVisibleChanged: {
-                        if(!mySpinBoxSelector.visible) {
-                            //call update the currentItem with selection from the comboBox selector
-                            myListViewModel.setProperty(mySpinBoxContent.modelIndex, "myValue", mySpinBoxSelector.returnValue);
-                        }
-                    }
-                }
             }
-
             Component.onCompleted: {
                 //after building the delegate content set the final height to the root item
                 root.height = Qt.binding(function() { return height })
@@ -161,48 +153,61 @@ Item {
     Component {
         id: myBlindsRaiseInterval
         Rectangle {
+            id: myBlindsRaiseIntervalContent
             MyBlindsRaiseIntervalSelector {
                 id: myBlindsRaiseIntervalSelector
                 parent: myListViewRoot // this needs to be parent to display the selector over the whole ListView
+                onAccepted: {
+                    //call update the currentItem with selection from the comboBox selector
+                    myListViewModel.setProperty(myBlindsRaiseIntervalContent.modelIndex, "myRaiseOnHandsType", myBlindsRaiseIntervalSelector.raiseOnHandsType);
+                    myListViewModel.setProperty(myBlindsRaiseIntervalContent.modelIndex, "myRaiseOnHandsInterval", myBlindsRaiseIntervalSelector.raiseOnHandsInterval);
+                    myListViewModel.setProperty(myBlindsRaiseIntervalContent.modelIndex, "myRaiseOnMinutesInterval", myBlindsRaiseIntervalSelector.raiseOnMinutesInterval);
+                    //here we also need to trigger the textStringBuild from the model again
+                    blindsRaiseIntevalValue.buildTextString();
+                }
             }
 
-            id: myBlindsRaiseIntervalContent
             property int modelIndex: model.index
             color: mouse.pressed ? "#11000000" : "white"
             width: root.width
-            height: Math.round(blindsRaiseIntevalTitle.contentHeight*2.1 + blindsRaiseIntevalValue.contentHeight*1.0)
+            height: Math.round(textLayout.height*AppStyle.listViewDelegateHeightBasedOnContentFactor)
-            Text {
+            ColumnLayout {
-                id: blindsRaiseIntevalTitle
+                id: textLayout
-                anchors.left: parent.left
+                spacing: AppStyle.listViewDelegateTitleAndValueSpacing
-                anchors.margins: 30
+                anchors.verticalCenter: parent.verticalCenter
-                y: myValue != "" ? Math.round(parent.height*0.5 - contentHeight*0.9) : Math.round(parent.height*0.5 - contentHeight*0.5)
+                Text {
-                color: "black"
+                    id: blindsRaiseIntevalTitle
-                font.pixelSize: AppStyle.listViewTitleFontSize
+                    anchors.left: parent.left
-                text: myTitle
+                    anchors.margins: AppStyle.listViewDelegateTitleAndValueMargins
-            }
+                    color: "black"
-            Text {
+                    font.pixelSize: AppStyle.listViewDelegateTitleFontSize
-                id: blindsRaiseIntevalValue
+                    text: myTitle
-                anchors.left: parent.left
+                    Layout.preferredHeight: blindsRaiseIntevalTitle.contentHeight
-                anchors.margins: 30
-                y: Math.round(parent.height*0.5 + contentHeight*0.15)
-                color: "grey"
-                font.pixelSize: AppStyle.listViewValueFontSize
-                text: ""
-
-                function buildTextString() {
-                    if(myRaiseOnHandsType == "1") text = qsTr("Raise blinds every")+" "+myRaiseOnHandsInterval+" "+qsTr("hands");
-                    else text = qsTr("Raise blinds every")+" "+myRaiseOnMinutesInterval+" "+qsTr("minutes");
                 }
+                Text {
+                    id: blindsRaiseIntevalValue
+                    anchors.left: parent.left
+                    anchors.margins: AppStyle.listViewDelegateTitleAndValueMargins
+                    color: "grey"
+                    font.pixelSize: AppStyle.listViewDelegateValueFontSize
+                    text: ""
+                    Layout.preferredHeight: blindsRaiseIntevalValue.contentHeight
 
-                Component.onCompleted: {
+                    function buildTextString() {
-                    buildTextString();
+                        if(myRaiseOnHandsType == "1") text = qsTr("Raise blinds every")+" "+myRaiseOnHandsInterval+" "+qsTr("hands");
+                        else text = qsTr("Raise blinds every")+" "+myRaiseOnMinutesInterval+" "+qsTr("minutes");
+                    }
+
+                    Component.onCompleted: {
+                        buildTextString();
+                    }
                 }
             }
             Rectangle {
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.bottom: parent.bottom
-                width: parent.width - 30
+                width: parent.width - AppStyle.listViewDelegateSeperatorLineIndent
-                height: 1
+                height: AppStyle.listViewDelegateSeperatorLineHeight
                 color: "lightgrey"
             }
             MouseArea {
@@ -210,20 +215,7 @@ Item {
                 anchors.fill: parent
                 onClicked: {
                     //call selector overlay and set inital values
-                    myBlindsRaiseIntervalSelector.show(myRaiseOnHandsType, myRaiseOnHandsInterval, myRaiseOnMinutesInterval)
+                    myBlindsRaiseIntervalSelector.show(myTitle, myRaiseOnHandsType, myRaiseOnHandsInterval, myRaiseOnMinutesInterval)
-                }
-                Connections {
-                    target: myBlindsRaiseIntervalSelector
-                    onVisibleChanged: {
-                        if(!myBlindsRaiseIntervalSelector.visible) {
-                            //call update the currentItem with selection from the comboBox selector
-                            myListViewModel.setProperty(myBlindsRaiseIntervalContent.modelIndex, "myRaiseOnHandsType", myBlindsRaiseIntervalSelector.raiseOnHandsType);
-                            myListViewModel.setProperty(myBlindsRaiseIntervalContent.modelIndex, "myRaiseOnHandsInterval", myBlindsRaiseIntervalSelector.raiseOnHandsInterval);
-                            myListViewModel.setProperty(myBlindsRaiseIntervalContent.modelIndex, "myRaiseOnMinutesInterval", myBlindsRaiseIntervalSelector.raiseOnMinutesInterval);
-                            //here we also need to trigger the textStringBuild from the model again
-                            blindsRaiseIntevalValue.buildTextString();
-                        }
-                    }
                 }
             }
 
@@ -236,36 +228,39 @@ Item {
 
     Component {
         id: myBlindsRaiseMode // Always double vs. Manual blinds List
-
         Rectangle {
             id: myBlindsRaiseModeContent
-
             MyBlindsRaiseModeSelector {
                 id: myBlindsRaiseModeSelector
                 parent: myListViewRoot // this needs to be parent to display the selector over the whole ListView
+                onAccepted: {
+                    //TODO update model
+                }
             }
 
             property int modelIndex: model.index
             color: mouse.pressed ? "#11000000" : "white"
             width: root.width
-            height: Math.round(blindsRaiseModeTitle.contentHeight*2.1 + blindsRaiseModeValue.contentHeight*1.0)
+            height: Math.round(textLayout.height*AppStyle.listViewDelegateHeightBasedOnContentFactor)
             ColumnLayout {
+                id: textLayout
+                spacing: AppStyle.listViewDelegateTitleAndValueSpacing
                 anchors.verticalCenter: parent.verticalCenter
                 Text {
                     id: blindsRaiseModeTitle
                     anchors.left: parent.left
-                    anchors.leftMargin: 30
+                    anchors.leftMargin: AppStyle.listViewDelegateTitleAndValueMargins
                     color: "black"
-                    font.pixelSize: AppStyle.listViewTitleFontSize
+                    font.pixelSize: AppStyle.listViewDelegateTitleFontSize
                     text: myTitle
                     Layout.preferredHeight: contentHeight
                 }
                 Text {
                     id: blindsRaiseModeValue
                     anchors.left: parent.left
-                    anchors.leftMargin: 30
+                    anchors.leftMargin: AppStyle.listViewDelegateTitleAndValueMargins
                     color: "grey"
-                    font.pixelSize: AppStyle.listViewValueFontSize
+                    font.pixelSize: AppStyle.listViewDelegateValueFontSize
                     text: ""
                     wrapMode: Text.WordWrap //maybe blinds list are too long
                     Layout.preferredHeight: contentHeight
@@ -301,30 +296,17 @@ Item {
             Rectangle {
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.bottom: parent.bottom
-                width: parent.width - 30
+                width: parent.width - AppStyle.listViewDelegateSeperatorLineIndent
-                height: 1
+                height: AppStyle.listViewDelegateSeperatorLineHeight
                 color: "lightgrey"
             }
             MouseArea {
                 id: mouse
                 anchors.fill: parent
                 onClicked: {
-//                    call selector overlay and set inital values
+                    //                    call selector overlay and set inital values
-                    myBlindsRaiseModeSelector.show(myAlwaysDoubleBlinds, myManualBlindsList, myAfterMBAlwaysDoubleBlinds, myAfterMBAlwaysRaiseAbout, myAfterMBAlwaysRaiseValue, myAfterMBStayAtLastBlind);
+                    myBlindsRaiseModeSelector.show(myTitle, myAlwaysDoubleBlinds, myManualBlindsList, myAfterMBAlwaysDoubleBlinds, myAfterMBAlwaysRaiseAbout, myAfterMBAlwaysRaiseValue, myAfterMBStayAtLastBlind);
                 }
-                //                Connections {
-                //                    target: myBlindsRaiseIntervalSelector
-                //                    onVisibleChanged: {
-                //                        if(!myBlindsRaiseIntervalSelector.visible) {
-                //                            //call update the currentItem with selection from the comboBox selector
-                //                            myListViewModel.setProperty(myBlindsRaiseIntervalContent.modelIndex, "myRaiseOnHandsType", myBlindsRaiseIntervalSelector.raiseOnHandsType);
-                //                            myListViewModel.setProperty(myBlindsRaiseIntervalContent.modelIndex, "myRaiseOnHandsInterval", myBlindsRaiseIntervalSelector.raiseOnHandsInterval);
-                //                            myListViewModel.setProperty(myBlindsRaiseIntervalContent.modelIndex, "myRaiseOnMinutesInterval", myBlindsRaiseIntervalSelector.raiseOnMinutesInterval);
-                //                            //here we also need to trigger the textStringBuild from the model again
-                //                            blindsRaiseIntevalValue.buildTextString();
-                //                        }
-                //                    }
-                //                }
             }
 
             Component.onCompleted: {

src/gui/qml/components/MySpinBoxSelector.qml

@@ -6,12 +6,9 @@ import "../js/colors.js" as GlobalColors
 import "../js/tools.js" as GlobalTools
 import "styles/"
 
-Rectangle {
+Item {
-    id: selector
+    id: root
-    z:1000
-    visible: false
     anchors.fill: parent
-    color: "#88000000" //dark transparent background
 
     property string titleString: ""
     property string prefix: ""
@@ -23,6 +20,7 @@ Rectangle {
     property int initialSliderValue: 0
     property bool ready: false
 
+    signal accepted
 
     function show(myId, myTitle, myMinValue, myMaxValue, myValue, myPrefix) {
         myIdString = myId;
@@ -32,87 +30,63 @@ Rectangle {
         returnValue = myValue;
         textField.text = myValue;
         prefix = myPrefix;
-        visible = true;
-        textField.focus = true;
-    }
 
-    function reject() {
+        mySelector.show()
-        visible = false;
+        textField.focus = true;
-//        textField.focus = false;
     }
 
     function selected(newSelection) {
         returnValue = newSelection;
-        visible = false;
+
-//        textField.focus = false;
+        mySelector.hide()
+        root.accepted()
     }
 
-    MouseArea {
+    MyAbstractSelector {
-        //set empty MouseArea to prevent the background to be clicked
+        id: mySelector
-        anchors.fill: parent
+        titleText: titleString
-    }
+        button1Text: qsTr("CANCEL")
+        onButton1Clicked: hide()
+        button2Text: qsTr("OK")
+        onButton2Clicked: {
+            textField.correctValue();
+            root.selected(textField.text);
+        }
 
-    Rectangle {
+        container: ColumnLayout {
-        id: selectionBox
-        visible: true
-        color: "white"
-        height: Math.round(parent.height*0.9)
-        width: Math.round(parent.width*0.6)
-        x: Math.round(parent.width*0.5 - width*0.5)
-        y: Math.round(parent.height*0.5 - height*0.5)
-        radius: Math.round(parent.height*0.01)
-
-        ColumnLayout {
-            id: content
             anchors.fill: parent
-            spacing: Math.round(selectionBox.height*0.06)
-            Text {
-                id: titleText
-                font.pixelSize: AppStyle.selectorTitleFontSize
-                font.bold: true
-                text: titleString
-                anchors.left: parent.left
-                anchors.top: parent.top
-                anchors.leftMargin: 30
-                anchors.topMargin: 10
-                Layout.preferredHeight: contentHeight
-            }
             TextField {
                 id: textField
                 anchors.left: parent.left
                 anchors.right: parent.right
-                anchors.rightMargin: 50
                 //make space for the prefix
-                anchors.leftMargin: 50 + Math.round(appWindow.height*0.03)
+                anchors.leftMargin: AppStyle.spinBoxSelectorTextFieldPrefixExtraLeftMargin
                 validator: IntValidator{bottom: minValue; top: maxValue;}
 
                 function correctValue() {
-                    text = GlobalTools.correctTextFieldIntegerValue(selector, text, minValue);
+                    text = GlobalTools.correctTextFieldIntegerValue(root, text, minValue);
                 }
 
-                onFocusChanged: { if(selector.ready && !focus) correctValue(); }
+                onFocusChanged: { if(root.ready && !focus) correctValue(); }
-                onEditingFinished: { if(selector.ready) correctValue(); }
+                onEditingFinished: { if(root.ready) correctValue(); }
 
                 style: MyTextFieldStyle {
-                    prefix: selector.prefix
+                    prefix: root.prefix
                     myTextField: textField
                 }
-
             }
             Slider {
                 id: slider
                 width: parent.width
                 anchors.left: parent.left
                 anchors.right: parent.right
-                anchors.rightMargin: 50
-                anchors.leftMargin: 50
                 maximumValue: maxValue
                 minimumValue: minValue
                 //don't initialize the slider value to avoid the stepSize kills the preselection Value
                 //because of the binding to the TextField value
                 stepSize: minimumValue * 10
                 on__HandlePosChanged: {
-                    if(selector.ready) { //wait until the whole component is ready, otherwise setting min and max changes text field value
+                    if(root.ready) { //wait until the whole component is ready, otherwise setting min and max changes text field value
                         if (slider.value > minimumValue && slider.value < maximumValue)
                             textField.text = slider.value - minimumValue
                         else
@@ -121,17 +95,17 @@ Rectangle {
                 }
                 style: SliderStyle {
                     handle: Rectangle {
-                        width: Math.round(selectionBox.height*0.12)
+                        width: AppStyle.sliderHandleWidth
                         height: width
                         radius: width
                         antialiasing: true
                         color: Qt.lighter(GlobalColors.accentColor, 1.2)
                     }
                     groove: Item {
-                        implicitHeight: Math.round(selectionBox.height*0.04)
+                        implicitHeight: AppStyle.sliderGrooveHeight
                         implicitWidth: slider.width
                         Rectangle {
-                            height: Math.round(selectionBox.height*0.03)
+                            height: AppStyle.sliderGrooveRectHeight
                             width: slider.width
                             anchors.verticalCenter: parent.verticalCenter
                             color: "#666"
@@ -145,51 +119,8 @@ Rectangle {
                         }
                     }
                 }
-
-            }
-
-            RowLayout { //bottom button line
-                width: parent.width
-                anchors.right: parent.right
-                anchors.bottom: parent.bottom
-                anchors.rightMargin: 30
-                anchors.bottomMargin: 20
-                spacing: okButton.contentWidth
-                Layout.preferredHeight: cancelButton.contentHeight
-
-                Text {
-                    id: cancelButton
-                    font.pixelSize: AppStyle.selectorButtonFontSize
-                    font.bold: true
-                    text: qsTr("CANCEL")
-                    Layout.preferredHeight: contentHeight
-                    MouseArea {
-                        id: cancelMouse
-                        anchors.fill: parent
-                        onClicked: {
-                            reject()
-                        }
-                    }
-                }
-                Text {
-                    id: okButton
-                    font.pixelSize: AppStyle.selectorButtonFontSize
-                    font.bold: true
-                    color: GlobalColors.accentColor
-                    text: qsTr("OK")
-                    Layout.preferredHeight: contentHeight
-                    MouseArea {
-                        id: okMouse
-                        anchors.fill: parent
-                        onClicked: {
-                            textField.correctValue();
-                            selected(textField.text);
-                        }
-                    }
-                }
             }
         }
     }
     Component.onCompleted: ready = true
 }
-

src/gui/qml/components/styles/AppStyle.qml

@@ -15,16 +15,42 @@ QtObject {
     property int fontSizeH5: Math.round(appHeight*0.06)
     property int fontSizeH6: Math.round(appHeight*0.05)
 
-    property int listViewTitleFontSize: fontSizeH5
-    property int listViewValueFontSize: fontSizeH6
-    property int selectorTitleFontSize: fontSizeH2
-    property int selectorValueFontSize: fontSizeH5
-    property int selectorButtonFontSize: fontSizeH6
     property int radioButtonLabelFontSize: fontSizeH5
-    property int textFieldFontSize: fontSizeH2
+    property int textFieldFontSize: fontSizeH3
 
     property int rowLayoutSpacing: Math.round(appHeight*0.06)
-    property int columnLayoutSpacing: Math.round(appHeight*0.06)
+    property int columnLayoutSpacing: Math.round(appHeight*0.02)
+
+    //Selector Box (white on darken background)
+    property int selectorBoxHeight: Math.round(appHeight*0.8)
+    property int selectorBoxWidth: Math.round(appWidth*0.6)
+    property int selectorBoxRadius: Math.round(appWidth*0.01)
+    property int selectorBoxTitleFontSize: fontSizeH4
+    property bool selectorBoxTitleFontBold: false
+    property int selectorBoxTitleTopMargin: -Math.round(appHeight*0.02)
+    property int selectorBoxValueFontSize: fontSizeH5
+    property int selectorBoxButtonFontSize: fontSizeH5
+    property bool selectorBoxButtonFontBold: false
+    property int selectorBoxContentMargins: Math.round(appHeight*0.05)
+    property int selectorBoxRealContentLeftMargin: Math.round(appHeight*0.05)
+    property int selectorBoxRealContentRightMargin: Math.round(appHeight*0.05)
+
+    //SpinBoxSelector
+    property int spinBoxSelectorTextFieldPrefixExtraLeftMargin: Math.round(appHeight*0.03)
+
+    //SliderStyle
+    property int sliderHandleWidth: Math.round(appHeight*0.10)
+    property int sliderGrooveHeight: Math.round(appHeight*0.033)
+    property int sliderGrooveRectHeight: Math.round(appHeight*0.025)
+
+    //ListViewDelegate
+    property real listViewDelegateHeightBasedOnContentFactor: 1.5
+    property int listViewDelegateTitleAndValueMargins: 30
+    property int listViewDelegateTitleAndValueSpacing: -3
+    property int listViewDelegateTitleFontSize: fontSizeH5
+    property int listViewDelegateValueFontSize: fontSizeH6
+    property int listViewDelegateSeperatorLineIndent: 30
+    property int listViewDelegateSeperatorLineHeight: 1
 
     Component.onCompleted: {
         console.log("pixelDensity: "+Screen.pixelDensity);

src/gui/qml/components/styles/MyRadioButtonStyle.qml

@@ -9,7 +9,7 @@ RadioButtonStyle {
     indicator: Rectangle {
         implicitWidth: Math.round(appWindow.height*0.05)
         implicitHeight: Math.round(appWindow.height*0.05)
-        radius: Math.round(selectionBox.height*0.03)
+        radius: Math.round(appWindow.height*0.03)
         border.color: myRadioBtn.checked ? GlobalColors.accentColor : "grey"
         border.width: Math.round(appWindow.height*0.005)
         Rectangle {

src/gui/qml/components/styles/MyTextFieldStyle.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.4
+import QtQuick.Controls 1.2
 import QtQuick.Controls.Styles 1.2
 import "../../js/colors.js" as GlobalColors
 import "."
@@ -11,7 +12,7 @@ TextFieldStyle {
     textColor: "black"
     font.pixelSize: AppStyle.textFieldFontSize
     background: Item { //bottom line with colored focus indicator
-        implicitHeight: AppStyle.textFieldFontSize + AppStyle.textFieldFontSize*0.25
+        implicitHeight: AppStyle.textFieldFontSize + Math.round(AppStyle.textFieldFontSize*0.25)
         implicitWidth: myTextField.width
         Text { //prefix
             visible: prefix != "" ? true : false
@@ -21,8 +22,7 @@ TextFieldStyle {
             anchors.left: parent.left
             anchors.leftMargin: -prefixIndent
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: Math.round(appWindow.height*0.008)
+            anchors.bottomMargin: Math.round(AppStyle.appHeight*0.008)
-
         }
         Rectangle {
             color: GlobalColors.accentColor
@@ -31,17 +31,18 @@ TextFieldStyle {
             anchors.left: parent.left
             anchors.leftMargin: - prefixIndent
             width: myTextField.width + prefixIndent
-            height: Math.round(appWindow.height*0.005)
+            height: Math.round(AppStyle.appHeight*0.005)
         }
         Rectangle {
             color: "black"
             opacity: myTextField.activeFocus ? 0.6 : 0.4
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: Math.round(appWindow.height*0.005)
+            anchors.bottomMargin: Math.round(AppStyle.appHeight*0.005)
             anchors.left: parent.left
             anchors.leftMargin: - prefixIndent
             width: myTextField.width + prefixIndent
-            height: Math.round(appWindow.height*0.005)
+            height: Math.round(AppStyle.appHeight*0.005)
         }
     }
+
 }

src/gui/qml/js/tools.js

@@ -1,7 +1,7 @@
 //global tools definition
 
 function correctTextFieldIntegerValue(readyComponent, textValue, minValue) {
-    if(selector.ready) {
+    if(readyComponent.ready) {
         var returnValue = "";
         if(textValue == "" || parseInt(textValue) == 0 || parseInt(textValue) < minValue) {
             returnValue = minValue;

src/gui/qml/qml.qrc

@@ -23,5 +23,6 @@
         <file>components/MyBlindsRaiseModeSelector.qml</file>
         <file>components/styles/AppStyle.qml</file>
         <file>components/styles/qmldir</file>
+        <file>components/MyAbstractSelector.qml</file>
     </qresource>
 </RCC>