Add vertical spacing above other settings fields

This commit is contained in:
David Rowe 2016-03-03 18:49:13 +13:00
parent 2d250e2f64
commit fb675dbaf5
8 changed files with 175 additions and 109 deletions

View file

@ -21,7 +21,7 @@ TextField {
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
property string label: ""
property real controlHeight: height + (textFieldLabel.visible ? textFieldLabel.height + textFieldLabel.anchors.bottomMargin : 0)
property real controlHeight: height + (textFieldLabel.visible ? textFieldLabel.height : 0)
placeholderText: textField.placeholderText

View file

@ -18,9 +18,8 @@ Preference {
property alias text: dataTextField.text
property alias buttonText: button.text
property alias placeholderText: dataTextField.placeholderText
property real spacing: 0
property var browser;
height: Math.max(dataTextField.controlHeight, button.height) + spacing
height: control.height + hifi.dimensions.controlInterlineHeight
Component.onCompleted: {
dataTextField.text = preference.value;
@ -52,34 +51,48 @@ Preference {
preference.save();
}
TextField {
id: dataTextField
placeholderText: root.placeholderText
text: preference.value
label: root.label
Item {
id: control
anchors {
left: parent.left
right: button.left
rightMargin: hifi.dimensions.contentSpacing.x
bottomMargin: spacing
right: parent.right
bottom: parent.bottom
}
colorScheme: hifi.colorSchemes.dark
}
height: Math.max(dataTextField.controlHeight, button.height)
Component {
id: avatarBrowserBuilder;
AvatarBrowser { }
}
Button {
id: button
anchors { right: parent.right; verticalCenter: dataTextField.verticalCenter }
text: "Browse"
onClicked: {
root.browser = avatarBrowserBuilder.createObject(desktop);
root.browser.windowDestroyed.connect(function(){
root.browser = null;
})
TextField {
id: dataTextField
placeholderText: root.placeholderText
text: preference.value
label: root.label
anchors {
left: parent.left
right: button.left
rightMargin: hifi.dimensions.contentSpacing.x
bottom: parent.bottom
}
colorScheme: hifi.colorSchemes.dark
}
Component {
id: avatarBrowserBuilder;
AvatarBrowser { }
}
Button {
id: button
text: "Browse"
anchors {
right: parent.right
verticalCenter: dataTextField.verticalCenter
}
onClicked: {
root.browser = avatarBrowserBuilder.createObject(desktop);
root.browser.windowDestroyed.connect(function(){
root.browser = null;
})
}
}
}
}

View file

@ -17,8 +17,7 @@ Preference {
id: root
property alias text: dataTextField.text
property alias placeholderText: dataTextField.placeholderText
property real spacing: 0
height: Math.max(dataTextField.controlHeight, button.height) + spacing
height: control.height + hifi.dimensions.controlInterlineHeight
Component.onCompleted: {
dataTextField.text = preference.value;
@ -29,36 +28,49 @@ Preference {
preference.save();
}
TextField {
id: dataTextField
Item {
id: control
anchors {
left: parent.left
right: button.left
rightMargin: hifi.dimensions.contentSpacing.x
bottomMargin: spacing
right: parent.right
bottom: parent.bottom
}
height: Math.max(dataTextField.controlHeight, button.height)
TextField {
id: dataTextField
anchors {
left: parent.left
right: button.left
rightMargin: hifi.dimensions.contentSpacing.x
bottom: parent.bottom
}
label: root.label
placeholderText: root.placeholderText
colorScheme: hifi.colorSchemes.dark
}
label: root.label
placeholderText: root.placeholderText
colorScheme: hifi.colorSchemes.dark
}
Component {
id: fileBrowserBuilder;
FileDialog { selectDirectory: true }
}
Component {
id: fileBrowserBuilder;
FileDialog { selectDirectory: true }
}
Button {
id: button
anchors { right: parent.right; verticalCenter: dataTextField.verticalCenter }
text: preference.browseLabel
onClicked: {
var browser = fileBrowserBuilder.createObject(desktop, { selectDirectory: true, folder: fileDialogHelper.pathToUrl(preference.value) });
browser.selectedFile.connect(function(fileUrl){
console.log(fileUrl);
dataTextField.text = fileDialogHelper.urlToPath(fileUrl);
});
Button {
id: button
text: preference.browseLabel
anchors {
right: parent.right
verticalCenter: dataTextField.verticalCenter
}
onClicked: {
var browser = fileBrowserBuilder.createObject(desktop, { selectDirectory: true, folder: fileDialogHelper.pathToUrl(preference.value) });
browser.selectedFile.connect(function(fileUrl){
console.log(fileUrl);
dataTextField.text = fileDialogHelper.urlToPath(fileUrl);
});
}
}
}
}

View file

@ -14,7 +14,7 @@ import "../../controls-uit"
Preference {
id: root
height: button.height
height: button.height + hifi.dimensions.controlInterlineHeight
Component.onCompleted: button.text = preference.name;
@ -24,5 +24,6 @@ Preference {
id: button
onClicked: preference.trigger()
width: 180
anchors.bottom: parent.bottom
}
}

View file

@ -17,7 +17,7 @@ import "../../styles-uit"
Preference {
id: root
height: dataComboBox.controlHeight
height: control.height + hifi.dimensions.controlInterlineHeight
Component.onCompleted: {
dataComboBox.currentIndex = dataComboBox.comboBox.find(preference.value);
@ -25,28 +25,41 @@ Preference {
function save() {
preference.value = dataComboBox.currentText;
//preference.value = comboBox.currentText;
preference.save();
}
HiFiControls.Label {
text: root.label + ":"
colorScheme: hifi.colorSchemes.dark
Item {
id: control
anchors {
left: parent.left
right: dataComboBox.left
rightMargin: hifi.dimensions.labelPadding
verticalCenter: dataComboBox.verticalCenter
right: parent.right
bottom: parent.bottom
}
horizontalAlignment: Text.AlignRight
wrapMode: Text.Wrap
}
height: Math.max(labelText.height, dataComboBox.controlHeight)
HiFiControls.ComboBox {
id: dataComboBox
model: preference.items
width: 150
anchors { right: parent.right }
colorScheme: hifi.colorSchemes.dark
HiFiControls.Label {
id: labelText
text: root.label + ":"
colorScheme: hifi.colorSchemes.dark
anchors {
left: parent.left
right: dataComboBox.left
rightMargin: hifi.dimensions.labelPadding
verticalCenter: parent.verticalCenter
}
horizontalAlignment: Text.AlignRight
wrapMode: Text.Wrap
}
HiFiControls.ComboBox {
id: dataComboBox
model: preference.items
width: 150
anchors {
right: parent.right
verticalCenter: parent.verticalCenter
}
colorScheme: hifi.colorSchemes.dark
}
}
}

View file

@ -15,8 +15,7 @@ import "../../controls-uit"
Preference {
id: root
property real spacing: 8
height: dataTextField.controlHeight + spacing
height: dataTextField.controlHeight + hifi.dimensions.controlInterlineHeight
Component.onCompleted: {
dataTextField.text = preference.value;
@ -36,7 +35,7 @@ Preference {
anchors {
left: parent.left
right: parent.right
bottomMargin: spacing
bottom: parent.bottom
}
}
}

View file

@ -16,7 +16,7 @@ import "../../controls-uit"
Preference {
id: root
property alias slider: slider
height: slider.controlHeight
height: control.height + hifi.dimensions.controlInterlineHeight
Component.onCompleted: {
slider.value = preference.value;
@ -27,24 +27,38 @@ Preference {
preference.save();
}
Label {
text: root.label + ":"
colorScheme: hifi.colorSchemes.dark
Item {
id: control
anchors {
left: parent.left
right: slider.left
rightMargin: hifi.dimensions.labelPadding
verticalCenter: slider.verticalCenter
right: parent.right
bottom: parent.bottom
}
horizontalAlignment: Text.AlignRight
wrapMode: Text.Wrap
}
height: Math.max(labelText.height, slider.height)
Slider {
id: slider
value: preference.value
width: 130
anchors { right: parent.right }
colorScheme: hifi.colorSchemes.dark
Label {
id: labelText
text: root.label + ":"
colorScheme: hifi.colorSchemes.dark
anchors {
left: parent.left
right: slider.left
rightMargin: hifi.dimensions.labelPadding
verticalCenter: parent.verticalCenter
}
horizontalAlignment: Text.AlignRight
wrapMode: Text.Wrap
}
Slider {
id: slider
value: preference.value
width: 130
anchors {
right: parent.right
verticalCenter: parent.verticalCenter
}
colorScheme: hifi.colorSchemes.dark
}
}
}

View file

@ -15,7 +15,7 @@ import "../../controls-uit"
Preference {
id: root
property alias spinner: spinner
height: spinner.controlHeight
height: control.height + hifi.dimensions.controlInterlineHeight
Component.onCompleted: {
spinner.value = preference.value;
@ -26,26 +26,40 @@ Preference {
preference.save();
}
Label {
text: root.label + ":"
colorScheme: hifi.colorSchemes.dark
Item {
id: control
anchors {
left: parent.left
right: spinner.left
rightMargin: hifi.dimensions.labelPadding
verticalCenter: spinner.verticalCenter
right: parent.right
bottom: parent.bottom
}
horizontalAlignment: Text.AlignRight
wrapMode: Text.Wrap
}
height: Math.max(spinnerLabel.height, spinner.controlHeight)
SpinBox {
id: spinner
decimals: preference.decimals
minimumValue: preference.min
maximumValue: preference.max
width: 100
anchors { right: parent.right }
colorScheme: hifi.colorSchemes.dark
Label {
id: spinnerLabel
text: root.label + ":"
colorScheme: hifi.colorSchemes.dark
anchors {
left: parent.left
right: spinner.left
rightMargin: hifi.dimensions.labelPadding
verticalCenter: parent.verticalCenter
}
horizontalAlignment: Text.AlignRight
wrapMode: Text.Wrap
}
SpinBox {
id: spinner
decimals: preference.decimals
minimumValue: preference.min
maximumValue: preference.max
width: 100
anchors {
right: parent.right
verticalCenter: parent.verticalCenter
}
colorScheme: hifi.colorSchemes.dark
}
}
}