diff --git a/src/gui/qml/components/MyAbstractSelector.qml b/src/gui/qml/components/MyAbstractSelector.qml new file mode 100644 index 00000000..acad9fd6 --- /dev/null +++ b/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() + } + } + } + } + } +} + diff --git a/src/gui/qml/components/MyBlindsRaiseIntervalSelector.qml b/src/gui/qml/components/MyBlindsRaiseIntervalSelector.qml index a7b9cf5c..e6fb8442 100644 --- a/src/gui/qml/components/MyBlindsRaiseIntervalSelector.qml +++ b/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 { - id: selector - z:1000 - visible: false +Item { + id: root 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 { - //set empty MouseArea to prevent the background to be clicked - anchors.fill: parent + mySelector.hide() + root.accepted() } - 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) + MyAbstractSelector { + 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); + } - Rectangle { - id: selectionBoxcontent + container: ColumnLayout { anchors.fill: parent - anchors.margins: Math.round(appWindow.height*0.05) - - 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 - } + RowLayout { //Hands interval section + spacing: AppStyle.rowLayoutSpacing ExclusiveGroup { id: raiseTypeGroup } - - RowLayout { //Hands interval section - spacing: AppStyle.rowLayoutSpacing - - RadioButton { - id: radioBtnRaiseOnHands - 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") + RadioButton { + id: radioBtnRaiseOnHands + exclusiveGroup: raiseTypeGroup + style: MyRadioButtonStyle { + myRadioBtn: radioBtnRaiseOnHands; + labelString: "Every" } + onClicked: textFieldHandsInterval.focus = true; } - 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 + TextField { + id: textFieldHandsInterval + width: AppStyle.textFieldFontSize*2 + validator: IntValidator{bottom: raiseOnHandsMinimum; top: raiseOnHandsMaximum;} + text: raiseOnHandsInterval + function correctValue() { + text = GlobalTools.correctTextFieldIntegerValue(root, text, raiseOnHandsMinimum); + } + onFocusChanged: { if(root.ready && !focus) correctValue(); } + onEditingFinished: { if(root.ready) correctValue(); } - Text { - id: cancelButton - font.pixelSize: AppStyle.selectorButtonFontSize - font.bold: true - text: qsTr("CANCEL") - Layout.preferredHeight: contentHeight - MouseArea { - id: cancelMouse - anchors.fill: parent - onClicked: { - reject() - } - } + style: MyTextFieldStyle { + myTextField: textFieldHandsInterval } - 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: { - textFieldHandsInterval.correctValue(); - textFieldMinutesInterval.correctValue(); - //return values - selected(radioBtnRaiseOnHands.checked ? "1": "0", textFieldHandsInterval.text, textFieldMinutesInterval.text); - } - } + } + Text { + id: onHandsString + font.pixelSize: AppStyle.selectorBoxValueFontSize + 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(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") } } } diff --git a/src/gui/qml/components/MyBlindsRaiseModeSelector.qml b/src/gui/qml/components/MyBlindsRaiseModeSelector.qml index 07588712..c88a4cbb 100644 --- a/src/gui/qml/components/MyBlindsRaiseModeSelector.qml +++ b/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 { - id: selector - z:1000 - visible: false +Item { + id: root 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") { -// textFieldHandsInterval.focus = true; -// radioBtnRaiseOnHands.checked = true; -// } -// else { -// textFieldMinutesInterval.focus = true; -// radioBtnRaiseOnMinutes.checked = true; -// } - } + mySelector.show() + + // if(raiseOnHandsType == "1") { + // textFieldHandsInterval.focus = true; + // radioBtnRaiseOnHands.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 { - //set empty MouseArea to prevent the background to be clicked - anchors.fill: parent + mySelector.hide() + root.accepted() } - 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 { - id: selectionBoxcontent + MyAbstractSelector { + 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 - anchors.fill: parent - 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); - } - } - } - } + width: parent.width +// TODO Hier gehts mit dem Inhalt weiter } } + } Component.onCompleted: ready = true; } diff --git a/src/gui/qml/components/MyComboBoxSelector.qml b/src/gui/qml/components/MyComboBoxSelector.qml index 2d78749d..bf1b49b0 100644 --- a/src/gui/qml/components/MyComboBoxSelector.qml +++ b/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 { - id: selector - z:1000 - visible: false +Item { + id: root 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; - } - - function reject() { - visible = false; + mySelector.show() } function selected(newString, index) { @@ -42,79 +37,32 @@ Rectangle { else { returnValue = newString } - visible = false; + mySelector.hide() + root.accepted() } - MouseArea { - //set empty MouseArea to prevent the background to be clicked - anchors.fill: parent - } + MyAbstractSelector { + id: mySelector + titleText: titleString + button1Text: qsTr("CANCEL") + onButton1Clicked: hide() - 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) - - 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 + container: ScrollView { + anchors.fill:parent + 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: { - reject() + root.selected(valueString, index) + } + style: MyRadioButtonStyle { + myRadioBtn: radioBtn + labelString: valueString } } } diff --git a/src/gui/qml/components/MyListViewDelegateFactory.qml b/src/gui/qml/components/MyListViewDelegateFactory.qml index 9669df83..813a0d9e 100644 --- a/src/gui/qml/components/MyListViewDelegateFactory.qml +++ b/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) - Text { - id: comboBoxTitle - anchors.left: parent.left - anchors.margins: 30 - y: myValue != "" ? Math.round(parent.height*0.5 - contentHeight*0.9) : Math.round(parent.height*0.5 - contentHeight*0.5) - color: "black" - font.pixelSize: AppStyle.listViewTitleFontSize - text: myTitle - } - Text { - id: comboBoxValue - anchors.left: parent.left - anchors.margins: 30 - y: Math.round(parent.height*0.5 + contentHeight*0.15) - color: "grey" - font.pixelSize: myValue != "" ? AppStyle.listViewValueFontSize : 0 - //setup value from Index if necessary - text: myValueIsIndex ? myValuesList.get(parseInt(myValue)).value : myValue + height: Math.round(textLayout.height*AppStyle.listViewDelegateHeightBasedOnContentFactor) + ColumnLayout { + id: textLayout + spacing: AppStyle.listViewDelegateTitleAndValueSpacing + anchors.verticalCenter: parent.verticalCenter + Text { + id: comboBoxTitle + anchors.left: parent.left + anchors.margins: AppStyle.listViewDelegateTitleAndValueMargins + color: "black" + font.pixelSize: AppStyle.listViewDelegateTitleFontSize + text: myTitle + Layout.preferredHeight: contentHeight + } + Text { + id: comboBoxValue + anchors.left: parent.left + anchors.margins: AppStyle.listViewDelegateTitleAndValueMargins + 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 - height: 1 + width: parent.width - AppStyle.listViewDelegateSeperatorLineIndent + 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) - Text { - id: spinBoxTitle - anchors.left: parent.left - anchors.margins: 30 - y: myValue != "" ? Math.round(parent.height*0.5 - contentHeight*0.9) : Math.round(parent.height*0.5 - contentHeight*0.5) - color: "black" - font.pixelSize: AppStyle.listViewTitleFontSize - text: myTitle - } - Text { - id: spinBoxValue - anchors.left: parent.left - anchors.margins: 30 - y: Math.round(parent.height*0.5 + contentHeight*0.15) - color: "grey" - font.pixelSize: myValue != "" ? AppStyle.listViewValueFontSize : 0 - text: myPrefix+myValue + height: Math.round(textLayout.height*AppStyle.listViewDelegateHeightBasedOnContentFactor) + ColumnLayout { + id: textLayout + spacing: AppStyle.listViewDelegateTitleAndValueSpacing + anchors.verticalCenter: parent.verticalCenter + Text { + id: spinBoxTitle + anchors.left: parent.left + anchors.margins: AppStyle.listViewDelegateTitleAndValueMargins + color: "black" + font.pixelSize: AppStyle.listViewDelegateTitleFontSize + text: myTitle + Layout.preferredHeight: contentHeight + } + Text { + id: spinBoxValue + anchors.left: parent.left + 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 - height: 1 + width: parent.width - AppStyle.listViewDelegateSeperatorLineIndent + 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) - Text { - id: blindsRaiseIntevalTitle - anchors.left: parent.left - anchors.margins: 30 - y: myValue != "" ? Math.round(parent.height*0.5 - contentHeight*0.9) : Math.round(parent.height*0.5 - contentHeight*0.5) - color: "black" - font.pixelSize: AppStyle.listViewTitleFontSize - text: myTitle - } - Text { - id: blindsRaiseIntevalValue - anchors.left: parent.left - 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"); + height: Math.round(textLayout.height*AppStyle.listViewDelegateHeightBasedOnContentFactor) + ColumnLayout { + id: textLayout + spacing: AppStyle.listViewDelegateTitleAndValueSpacing + anchors.verticalCenter: parent.verticalCenter + Text { + id: blindsRaiseIntevalTitle + anchors.left: parent.left + anchors.margins: AppStyle.listViewDelegateTitleAndValueMargins + color: "black" + font.pixelSize: AppStyle.listViewDelegateTitleFontSize + text: myTitle + Layout.preferredHeight: blindsRaiseIntevalTitle.contentHeight } + Text { + id: blindsRaiseIntevalValue + anchors.left: parent.left + anchors.margins: AppStyle.listViewDelegateTitleAndValueMargins + color: "grey" + font.pixelSize: AppStyle.listViewDelegateValueFontSize + text: "" + Layout.preferredHeight: blindsRaiseIntevalValue.contentHeight - Component.onCompleted: { - buildTextString(); + function 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 - height: 1 + width: parent.width - AppStyle.listViewDelegateSeperatorLineIndent + 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) - } - 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(); - } - } + myBlindsRaiseIntervalSelector.show(myTitle, myRaiseOnHandsType, myRaiseOnHandsInterval, myRaiseOnMinutesInterval) } } @@ -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 - height: 1 + width: parent.width - AppStyle.listViewDelegateSeperatorLineIndent + height: AppStyle.listViewDelegateSeperatorLineHeight color: "lightgrey" } MouseArea { id: mouse anchors.fill: parent onClicked: { -// call selector overlay and set inital values - myBlindsRaiseModeSelector.show(myAlwaysDoubleBlinds, myManualBlindsList, myAfterMBAlwaysDoubleBlinds, myAfterMBAlwaysRaiseAbout, myAfterMBAlwaysRaiseValue, myAfterMBStayAtLastBlind); + // call selector overlay and set inital values + 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: { diff --git a/src/gui/qml/components/MySpinBoxSelector.qml b/src/gui/qml/components/MySpinBoxSelector.qml index 2591a803..4e4c15b2 100644 --- a/src/gui/qml/components/MySpinBoxSelector.qml +++ b/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 { - id: selector - z:1000 - visible: false +Item { + id: root 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() { - visible = false; -// textField.focus = false; + mySelector.show() + textField.focus = true; } function selected(newSelection) { returnValue = newSelection; - visible = false; -// textField.focus = false; + + mySelector.hide() + root.accepted() } - MouseArea { - //set empty MouseArea to prevent the background to be clicked - anchors.fill: parent - } + MyAbstractSelector { + id: mySelector + titleText: titleString + button1Text: qsTr("CANCEL") + onButton1Clicked: hide() + button2Text: qsTr("OK") + onButton2Clicked: { + textField.correctValue(); + root.selected(textField.text); + } - 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) - - ColumnLayout { - id: content + container: ColumnLayout { 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(); } - onEditingFinished: { if(selector.ready) correctValue(); } + onFocusChanged: { if(root.ready && !focus) 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 } - diff --git a/src/gui/qml/components/styles/AppStyle.qml b/src/gui/qml/components/styles/AppStyle.qml index b7331605..aeac5aa2 100644 --- a/src/gui/qml/components/styles/AppStyle.qml +++ b/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); diff --git a/src/gui/qml/components/styles/MyRadioButtonStyle.qml b/src/gui/qml/components/styles/MyRadioButtonStyle.qml index 43f8f94a..8b7138d3 100644 --- a/src/gui/qml/components/styles/MyRadioButtonStyle.qml +++ b/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 { diff --git a/src/gui/qml/components/styles/MyTextFieldStyle.qml b/src/gui/qml/components/styles/MyTextFieldStyle.qml index 8a32d216..bbeeef18 100644 --- a/src/gui/qml/components/styles/MyTextFieldStyle.qml +++ b/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) } } + } diff --git a/src/gui/qml/js/tools.js b/src/gui/qml/js/tools.js index b3533757..8cc8dc20 100644 --- a/src/gui/qml/js/tools.js +++ b/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; diff --git a/src/gui/qml/qml.qrc b/src/gui/qml/qml.qrc index 84243a2e..6f5d8aa9 100644 --- a/src/gui/qml/qml.qrc +++ b/src/gui/qml/qml.qrc @@ -23,5 +23,6 @@ components/MyBlindsRaiseModeSelector.qml components/styles/AppStyle.qml components/styles/qmldir + components/MyAbstractSelector.qml