From fb675dbaf5a488e1016024315a4d0ad53b4bebfb Mon Sep 17 00:00:00 2001 From: David Rowe Date: Thu, 3 Mar 2016 18:49:13 +1300 Subject: [PATCH] Add vertical spacing above other settings fields --- .../resources/qml/controls-uit/TextField.qml | 2 +- .../dialogs/preferences/AvatarPreference.qml | 65 ++++++++++-------- .../preferences/BrowsablePreference.qml | 66 +++++++++++-------- .../dialogs/preferences/ButtonPreference.qml | 3 +- .../preferences/ComboBoxPreference.qml | 47 ++++++++----- .../preferences/EditablePreference.qml | 5 +- .../dialogs/preferences/SliderPreference.qml | 46 ++++++++----- .../dialogs/preferences/SpinBoxPreference.qml | 50 +++++++++----- 8 files changed, 175 insertions(+), 109 deletions(-) diff --git a/interface/resources/qml/controls-uit/TextField.qml b/interface/resources/qml/controls-uit/TextField.qml index 42712e9d23..ff1bbe8eb6 100644 --- a/interface/resources/qml/controls-uit/TextField.qml +++ b/interface/resources/qml/controls-uit/TextField.qml @@ -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 diff --git a/interface/resources/qml/dialogs/preferences/AvatarPreference.qml b/interface/resources/qml/dialogs/preferences/AvatarPreference.qml index 20029a1cd7..8f05ca4ffe 100644 --- a/interface/resources/qml/dialogs/preferences/AvatarPreference.qml +++ b/interface/resources/qml/dialogs/preferences/AvatarPreference.qml @@ -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; + }) + } + } + } } diff --git a/interface/resources/qml/dialogs/preferences/BrowsablePreference.qml b/interface/resources/qml/dialogs/preferences/BrowsablePreference.qml index 9a4ae2fbf9..9a19889938 100644 --- a/interface/resources/qml/dialogs/preferences/BrowsablePreference.qml +++ b/interface/resources/qml/dialogs/preferences/BrowsablePreference.qml @@ -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); + }); + } } } } diff --git a/interface/resources/qml/dialogs/preferences/ButtonPreference.qml b/interface/resources/qml/dialogs/preferences/ButtonPreference.qml index c7b5583bf3..06332bd1be 100644 --- a/interface/resources/qml/dialogs/preferences/ButtonPreference.qml +++ b/interface/resources/qml/dialogs/preferences/ButtonPreference.qml @@ -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 } } diff --git a/interface/resources/qml/dialogs/preferences/ComboBoxPreference.qml b/interface/resources/qml/dialogs/preferences/ComboBoxPreference.qml index 10e5f5febf..860cbcb5a8 100644 --- a/interface/resources/qml/dialogs/preferences/ComboBoxPreference.qml +++ b/interface/resources/qml/dialogs/preferences/ComboBoxPreference.qml @@ -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 + } } } diff --git a/interface/resources/qml/dialogs/preferences/EditablePreference.qml b/interface/resources/qml/dialogs/preferences/EditablePreference.qml index 3b0f7802ea..8acf8e1f76 100644 --- a/interface/resources/qml/dialogs/preferences/EditablePreference.qml +++ b/interface/resources/qml/dialogs/preferences/EditablePreference.qml @@ -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 } } } diff --git a/interface/resources/qml/dialogs/preferences/SliderPreference.qml b/interface/resources/qml/dialogs/preferences/SliderPreference.qml index 92cab40133..e9013bc17a 100644 --- a/interface/resources/qml/dialogs/preferences/SliderPreference.qml +++ b/interface/resources/qml/dialogs/preferences/SliderPreference.qml @@ -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 + } } } diff --git a/interface/resources/qml/dialogs/preferences/SpinBoxPreference.qml b/interface/resources/qml/dialogs/preferences/SpinBoxPreference.qml index aa9068bb00..e670cd37c4 100644 --- a/interface/resources/qml/dialogs/preferences/SpinBoxPreference.qml +++ b/interface/resources/qml/dialogs/preferences/SpinBoxPreference.qml @@ -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 + } } }