From 43f843f731b239e2b34df89f4509b40e2d3ac0ca Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 13 Apr 2016 16:39:52 +1200 Subject: [PATCH] Retrofit updated margins and spacing to QML dialogs --- examples/html/edit-style.css | 5 +++- interface/resources/qml/AssetServer.qml | 13 ++++------- .../resources/qml/controls-uit/Button.qml | 2 +- .../resources/qml/controls-uit/ComboBox.qml | 2 +- .../qml/controls-uit/ContentSection.qml | 6 ++--- .../resources/qml/controls-uit/SpinBox.qml | 5 ++-- .../resources/qml/controls-uit/TextField.qml | 6 ++--- .../qml/hifi/dialogs/AttachmentsDialog.qml | 23 ++++++++++++++++--- .../qml/hifi/dialogs/RunningScripts.qml | 16 +++++++++---- .../qml/styles-uit/HifiConstants.qml | 8 +++---- .../resources/qml/windows-uit/Window.qml | 2 +- 11 files changed, 56 insertions(+), 32 deletions(-) diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css index 0ccbbb90be..63d0cdc69c 100644 --- a/examples/html/edit-style.css +++ b/examples/html/edit-style.css @@ -230,6 +230,9 @@ input.search { input.search:focus { outline: none; box-sizing: border-box; + height: 26px; + margin-top: 1px; + margin-bottom: 1px; box-shadow: 0 0 0px 1px #00b4ef; } @@ -441,7 +444,7 @@ input[type=checkbox]:checked + label:hover { } .section-header:first-child { - margin-top: 0; + margin-top: -2px; padding-top: 0; background: none; height: auto; diff --git a/interface/resources/qml/AssetServer.qml b/interface/resources/qml/AssetServer.qml index 86b158c0e9..495d13d118 100644 --- a/interface/resources/qml/AssetServer.qml +++ b/interface/resources/qml/AssetServer.qml @@ -330,9 +330,10 @@ Window { HifiControls.ContentSection { id: assetDirectory name: "Asset Directory" - spacing: hifi.dimensions.contentSpacing.y isFirst: true + HifiControls.VerticalSpacer {} + Row { id: buttonRow anchors.left: parent.left @@ -343,8 +344,7 @@ Window { glyph: hifi.glyphs.reload color: hifi.buttons.white colorScheme: root.colorScheme - height: 26 - width: 26 + width: hifi.dimensions.controlLineHeight onClicked: root.reload() } @@ -353,7 +353,6 @@ Window { text: "ADD TO WORLD" color: hifi.buttons.white colorScheme: root.colorScheme - height: 26 width: 120 enabled: canAddToWorld(assetProxyModel.data(treeView.selection.currentIndex, 0x100)) @@ -365,7 +364,6 @@ Window { text: "RENAME" color: hifi.buttons.white colorScheme: root.colorScheme - height: 26 width: 80 onClicked: root.renameFile() @@ -378,7 +376,6 @@ Window { text: "DELETE" color: hifi.buttons.red colorScheme: root.colorScheme - height: 26 width: 80 onClicked: root.deleteFile() @@ -419,7 +416,7 @@ Window { id: treeView anchors.top: assetDirectory.bottom anchors.bottom: uploadSection.top - anchors.margins: 12 + anchors.margins: hifi.dimensions.contentMargin.x + 2 // Extra for border anchors.left: parent.left anchors.right: parent.right @@ -448,7 +445,7 @@ Window { name: "Upload A File" spacing: hifi.dimensions.contentSpacing.y anchors.bottom: parent.bottom - height: 92 + height: 95 Item { height: parent.height diff --git a/interface/resources/qml/controls-uit/Button.qml b/interface/resources/qml/controls-uit/Button.qml index e7c8320ae6..298943b551 100644 --- a/interface/resources/qml/controls-uit/Button.qml +++ b/interface/resources/qml/controls-uit/Button.qml @@ -19,7 +19,7 @@ Original.Button { property int colorScheme: hifi.colorSchemes.light width: 120 - height: 28 + height: hifi.dimensions.controlLineHeight style: ButtonStyle { diff --git a/interface/resources/qml/controls-uit/ComboBox.qml b/interface/resources/qml/controls-uit/ComboBox.qml index d25a8c5940..f99e18b12b 100755 --- a/interface/resources/qml/controls-uit/ComboBox.qml +++ b/interface/resources/qml/controls-uit/ComboBox.qml @@ -59,7 +59,7 @@ FocusScope { id: comboBox anchors.fill: parent visible: false - height: hifi.fontSizes.textFieldInput + 14 // Match height of TextField control. + height: hifi.fontSizes.textFieldInput + 13 // Match height of TextField control. } FiraSansSemiBold { diff --git a/interface/resources/qml/controls-uit/ContentSection.qml b/interface/resources/qml/controls-uit/ContentSection.qml index 86549afc9f..98350a9333 100644 --- a/interface/resources/qml/controls-uit/ContentSection.qml +++ b/interface/resources/qml/controls-uit/ContentSection.qml @@ -46,7 +46,7 @@ Column { Item { id: leadingSpace width: 1 - height: isFirst ? hifi.dimensions.contentSpacing.y : 0 + height: isFirst ? 7 : 0 anchors.top: parent.top } @@ -80,14 +80,14 @@ Column { right: parent.right top: topBar.bottom } - height: (isCollapsible ? 3 : 2) * hifi.dimensions.contentSpacing.y + height: isCollapsible ? 36 : 28 RalewayRegular { id: title anchors { left: parent.left top: parent.top - topMargin: hifi.dimensions.contentSpacing.y + topMargin: 12 } size: hifi.fontSizes.sectionName font.capitalization: Font.AllUppercase diff --git a/interface/resources/qml/controls-uit/SpinBox.qml b/interface/resources/qml/controls-uit/SpinBox.qml index ec7821851f..599d94c28d 100755 --- a/interface/resources/qml/controls-uit/SpinBox.qml +++ b/interface/resources/qml/controls-uit/SpinBox.qml @@ -28,7 +28,7 @@ SpinBox { FontLoader { id: firaSansSemiBold; source: "../../fonts/FiraSans-SemiBold.ttf"; } font.family: firaSansSemiBold.name font.pixelSize: hifi.fontSizes.textFieldInput - height: hifi.fontSizes.textFieldInput + 14 // Match height of TextField control. + height: hifi.fontSizes.textFieldInput + 13 // Match height of TextField control. y: spinBoxLabel.visible ? spinBoxLabel.height + spinBoxLabel.anchors.bottomMargin : 0 @@ -51,12 +51,13 @@ SpinBox { horizontalAlignment: Qt.AlignLeft padding.left: spinBoxLabelInside.visible ? 30 : hifi.dimensions.textPadding padding.right: hifi.dimensions.spinnerSize + padding.top: 0 incrementControl: HiFiGlyphs { id: incrementButton text: hifi.glyphs.caratUp x: 6 - y: 2 + y: 1 size: hifi.dimensions.spinnerSize color: styleData.upPressed ? (isLightColorScheme ? hifi.colors.black : hifi.colors.white) : hifi.colors.gray } diff --git a/interface/resources/qml/controls-uit/TextField.qml b/interface/resources/qml/controls-uit/TextField.qml index 6cf88c43c3..79027cdc3b 100644 --- a/interface/resources/qml/controls-uit/TextField.qml +++ b/interface/resources/qml/controls-uit/TextField.qml @@ -22,7 +22,7 @@ TextField { readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light property bool isSearchField: false property string label: "" - property real controlHeight: height + (textFieldLabel.visible ? textFieldLabel.height : 0) + property real controlHeight: height + (textFieldLabel.visible ? textFieldLabel.height + 1 : 0) placeholderText: textField.placeholderText @@ -30,7 +30,7 @@ TextField { font.family: firaSansSemiBold.name font.pixelSize: hifi.fontSizes.textFieldInput font.italic: textField.text == "" - height: implicitHeight + 4 // Make surrounding box higher so that highlight is vertically centered. + height: implicitHeight + 3 // Make surrounding box higher so that highlight is vertically centered. y: textFieldLabel.visible ? textFieldLabel.height + textFieldLabel.anchors.bottomMargin : 0 @@ -69,7 +69,7 @@ TextField { colorScheme: textField.colorScheme anchors.left: parent.left anchors.bottom: parent.top - anchors.bottomMargin: 4 + anchors.bottomMargin: 3 visible: label != "" } } diff --git a/interface/resources/qml/hifi/dialogs/AttachmentsDialog.qml b/interface/resources/qml/hifi/dialogs/AttachmentsDialog.qml index 01be4ddbde..437e02e149 100755 --- a/interface/resources/qml/hifi/dialogs/AttachmentsDialog.qml +++ b/interface/resources/qml/hifi/dialogs/AttachmentsDialog.qml @@ -51,7 +51,11 @@ Window { Rectangle { id: attachmentsBackground - anchors { left: parent.left; right: parent.right; top: parent.top; bottom: newAttachmentButton.top; margins: 8 } + anchors { + left: parent.left; right: parent.right; top: parent.top; bottom: newAttachmentButton.top; + margins: hifi.dimensions.contentMargin.x + bottomMargin: hifi.dimensions.contentSpacing.y + } color: hifi.colors.baseGrayShadow radius: 4 @@ -129,7 +133,14 @@ Window { HifiControls.Button { id: newAttachmentButton - anchors { left: parent.left; right: parent.right; bottom: buttonRow.top; margins: 8 } + anchors { + left: parent.left + right: parent.right + bottom: buttonRow.top + margins: hifi.dimensions.contentMargin.x; + topMargin: hifi.dimensions.contentSpacing.y + bottomMargin: hifi.dimensions.contentSpacing.y + } text: "New Attachment" color: hifi.buttons.black colorScheme: hifi.colorSchemes.dark @@ -151,7 +162,13 @@ Window { Row { id: buttonRow spacing: 8 - anchors { right: parent.right; bottom: parent.bottom; margins: 8 } + anchors { + right: parent.right + bottom: parent.bottom + margins: hifi.dimensions.contentMargin.x + topMargin: hifi.dimensions.contentSpacing.y + bottomMargin: hifi.dimensions.contentSpacing.y + } HifiControls.Button { action: okAction color: hifi.buttons.black diff --git a/interface/resources/qml/hifi/dialogs/RunningScripts.qml b/interface/resources/qml/hifi/dialogs/RunningScripts.qml index b9fc7f37ab..81520ab3a9 100644 --- a/interface/resources/qml/hifi/dialogs/RunningScripts.qml +++ b/interface/resources/qml/hifi/dialogs/RunningScripts.qml @@ -24,7 +24,7 @@ Window { resizable: true destroyOnInvisible: true x: 40; y: 40 - implicitWidth: 400; implicitHeight: 695 + implicitWidth: 400; implicitHeight: 691 minSize: Qt.vector2d(200, 300) HifiConstants { id: hifi } @@ -109,7 +109,9 @@ Window { } } - HifiControls.VerticalSpacer {} + HifiControls.VerticalSpacer { + height: hifi.dimensions.controlInterlineHeight + 2 // Add space for border + } HifiControls.Table { tableModel: runningScriptsModel @@ -120,7 +122,7 @@ Window { } HifiControls.VerticalSpacer { - height: hifi.dimensions.controlInterlineHeight + 2 // Table view draws a little taller than it's height. + height: hifi.dimensions.controlInterlineHeight + 2 // Add space for border } } @@ -185,7 +187,9 @@ Window { Component.onCompleted: scriptsModel.filterRegExp = new RegExp("^.*$", "i") } - HifiControls.VerticalSpacer {} + HifiControls.VerticalSpacer { + height: hifi.dimensions.controlInterlineHeight + 2 // Add space for border + } HifiControls.Tree { id: treeView @@ -196,7 +200,9 @@ Window { anchors.right: parent.right } - HifiControls.VerticalSpacer {} + HifiControls.VerticalSpacer { + height: hifi.dimensions.controlInterlineHeight + 2 // Add space for border + } HifiControls.TextField { id: selectedScript diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml index c1ba92ed31..cb4d2157ca 100644 --- a/interface/resources/qml/styles-uit/HifiConstants.qml +++ b/interface/resources/qml/styles-uit/HifiConstants.qml @@ -131,8 +131,8 @@ Item { readonly property bool largeScreen: Screen.width >= 1920 && Screen.height >= 1080 readonly property real borderRadius: largeScreen ? 7.5 : 5.0 readonly property real borderWidth: largeScreen ? 2 : 1 - readonly property vector2d contentMargin: Qt.vector2d(12, 24) - readonly property vector2d contentSpacing: Qt.vector2d(8, 12) + readonly property vector2d contentMargin: Qt.vector2d(21, 21) + readonly property vector2d contentSpacing: Qt.vector2d(11, 14) readonly property real labelPadding: 40 readonly property real textPadding: 8 readonly property real sliderHandleSize: 18 @@ -143,8 +143,8 @@ Item { readonly property real tableHeaderHeight: 40 readonly property vector2d modalDialogMargin: Qt.vector2d(50, 30) readonly property real modalDialogTitleHeight: 40 - readonly property real controlLineHeight: 29 // Height of spinbox control on 1920 x 1080 monitor - readonly property real controlInterlineHeight: 22 // 75% of controlLineHeight + readonly property real controlLineHeight: 28 // Height of spinbox control on 1920 x 1080 monitor + readonly property real controlInterlineHeight: 21 // 75% of controlLineHeight readonly property vector2d menuPadding: Qt.vector2d(14, 12) } diff --git a/interface/resources/qml/windows-uit/Window.qml b/interface/resources/qml/windows-uit/Window.qml index 32fc816173..7227069a09 100644 --- a/interface/resources/qml/windows-uit/Window.qml +++ b/interface/resources/qml/windows-uit/Window.qml @@ -215,7 +215,7 @@ Fadable { bottom: parent.bottom } width: parent.contentWidth - height: footer.height + 2 * hifi.dimensions.contentSpacing.y + height: footer.height + 2 * hifi.dimensions.contentSpacing.y + 3 color: hifi.colors.baseGray visible: footer.height > 0