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

This commit is contained in:
Felix Hammer
2015-08-21 01:38:35 +02:00
parent f4ac0fbb26
commit 27b524f52f
11 changed files with 439 additions and 554 deletions
@@ -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()
}
}
}
}
}
}
@@ -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")
}
}
}
@@ -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;
}
+28 -80
View File
@@ -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
}
}
}
@@ -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: {
+28 -97
View File
@@ -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
}
+33 -7
View File
@@ -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);
@@ -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 {
@@ -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)
}
}
}
+1 -1
View File
@@ -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;
+1
View File
@@ -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>