Retrofit updated margins and spacing to QML dialogs

This commit is contained in:
David Rowe 2016-04-13 16:39:52 +12:00
parent b33d28852b
commit 43f843f731
11 changed files with 56 additions and 32 deletions

View file

@ -230,6 +230,9 @@ input.search {
input.search:focus { input.search:focus {
outline: none; outline: none;
box-sizing: border-box; box-sizing: border-box;
height: 26px;
margin-top: 1px;
margin-bottom: 1px;
box-shadow: 0 0 0px 1px #00b4ef; box-shadow: 0 0 0px 1px #00b4ef;
} }
@ -441,7 +444,7 @@ input[type=checkbox]:checked + label:hover {
} }
.section-header:first-child { .section-header:first-child {
margin-top: 0; margin-top: -2px;
padding-top: 0; padding-top: 0;
background: none; background: none;
height: auto; height: auto;

View file

@ -330,9 +330,10 @@ Window {
HifiControls.ContentSection { HifiControls.ContentSection {
id: assetDirectory id: assetDirectory
name: "Asset Directory" name: "Asset Directory"
spacing: hifi.dimensions.contentSpacing.y
isFirst: true isFirst: true
HifiControls.VerticalSpacer {}
Row { Row {
id: buttonRow id: buttonRow
anchors.left: parent.left anchors.left: parent.left
@ -343,8 +344,7 @@ Window {
glyph: hifi.glyphs.reload glyph: hifi.glyphs.reload
color: hifi.buttons.white color: hifi.buttons.white
colorScheme: root.colorScheme colorScheme: root.colorScheme
height: 26 width: hifi.dimensions.controlLineHeight
width: 26
onClicked: root.reload() onClicked: root.reload()
} }
@ -353,7 +353,6 @@ Window {
text: "ADD TO WORLD" text: "ADD TO WORLD"
color: hifi.buttons.white color: hifi.buttons.white
colorScheme: root.colorScheme colorScheme: root.colorScheme
height: 26
width: 120 width: 120
enabled: canAddToWorld(assetProxyModel.data(treeView.selection.currentIndex, 0x100)) enabled: canAddToWorld(assetProxyModel.data(treeView.selection.currentIndex, 0x100))
@ -365,7 +364,6 @@ Window {
text: "RENAME" text: "RENAME"
color: hifi.buttons.white color: hifi.buttons.white
colorScheme: root.colorScheme colorScheme: root.colorScheme
height: 26
width: 80 width: 80
onClicked: root.renameFile() onClicked: root.renameFile()
@ -378,7 +376,6 @@ Window {
text: "DELETE" text: "DELETE"
color: hifi.buttons.red color: hifi.buttons.red
colorScheme: root.colorScheme colorScheme: root.colorScheme
height: 26
width: 80 width: 80
onClicked: root.deleteFile() onClicked: root.deleteFile()
@ -419,7 +416,7 @@ Window {
id: treeView id: treeView
anchors.top: assetDirectory.bottom anchors.top: assetDirectory.bottom
anchors.bottom: uploadSection.top anchors.bottom: uploadSection.top
anchors.margins: 12 anchors.margins: hifi.dimensions.contentMargin.x + 2 // Extra for border
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
@ -448,7 +445,7 @@ Window {
name: "Upload A File" name: "Upload A File"
spacing: hifi.dimensions.contentSpacing.y spacing: hifi.dimensions.contentSpacing.y
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
height: 92 height: 95
Item { Item {
height: parent.height height: parent.height

View file

@ -19,7 +19,7 @@ Original.Button {
property int colorScheme: hifi.colorSchemes.light property int colorScheme: hifi.colorSchemes.light
width: 120 width: 120
height: 28 height: hifi.dimensions.controlLineHeight
style: ButtonStyle { style: ButtonStyle {

View file

@ -59,7 +59,7 @@ FocusScope {
id: comboBox id: comboBox
anchors.fill: parent anchors.fill: parent
visible: false visible: false
height: hifi.fontSizes.textFieldInput + 14 // Match height of TextField control. height: hifi.fontSizes.textFieldInput + 13 // Match height of TextField control.
} }
FiraSansSemiBold { FiraSansSemiBold {

View file

@ -46,7 +46,7 @@ Column {
Item { Item {
id: leadingSpace id: leadingSpace
width: 1 width: 1
height: isFirst ? hifi.dimensions.contentSpacing.y : 0 height: isFirst ? 7 : 0
anchors.top: parent.top anchors.top: parent.top
} }
@ -80,14 +80,14 @@ Column {
right: parent.right right: parent.right
top: topBar.bottom top: topBar.bottom
} }
height: (isCollapsible ? 3 : 2) * hifi.dimensions.contentSpacing.y height: isCollapsible ? 36 : 28
RalewayRegular { RalewayRegular {
id: title id: title
anchors { anchors {
left: parent.left left: parent.left
top: parent.top top: parent.top
topMargin: hifi.dimensions.contentSpacing.y topMargin: 12
} }
size: hifi.fontSizes.sectionName size: hifi.fontSizes.sectionName
font.capitalization: Font.AllUppercase font.capitalization: Font.AllUppercase

View file

@ -28,7 +28,7 @@ SpinBox {
FontLoader { id: firaSansSemiBold; source: "../../fonts/FiraSans-SemiBold.ttf"; } FontLoader { id: firaSansSemiBold; source: "../../fonts/FiraSans-SemiBold.ttf"; }
font.family: firaSansSemiBold.name font.family: firaSansSemiBold.name
font.pixelSize: hifi.fontSizes.textFieldInput 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 y: spinBoxLabel.visible ? spinBoxLabel.height + spinBoxLabel.anchors.bottomMargin : 0
@ -51,12 +51,13 @@ SpinBox {
horizontalAlignment: Qt.AlignLeft horizontalAlignment: Qt.AlignLeft
padding.left: spinBoxLabelInside.visible ? 30 : hifi.dimensions.textPadding padding.left: spinBoxLabelInside.visible ? 30 : hifi.dimensions.textPadding
padding.right: hifi.dimensions.spinnerSize padding.right: hifi.dimensions.spinnerSize
padding.top: 0
incrementControl: HiFiGlyphs { incrementControl: HiFiGlyphs {
id: incrementButton id: incrementButton
text: hifi.glyphs.caratUp text: hifi.glyphs.caratUp
x: 6 x: 6
y: 2 y: 1
size: hifi.dimensions.spinnerSize size: hifi.dimensions.spinnerSize
color: styleData.upPressed ? (isLightColorScheme ? hifi.colors.black : hifi.colors.white) : hifi.colors.gray color: styleData.upPressed ? (isLightColorScheme ? hifi.colors.black : hifi.colors.white) : hifi.colors.gray
} }

View file

@ -22,7 +22,7 @@ TextField {
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
property bool isSearchField: false property bool isSearchField: false
property string label: "" 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 placeholderText: textField.placeholderText
@ -30,7 +30,7 @@ TextField {
font.family: firaSansSemiBold.name font.family: firaSansSemiBold.name
font.pixelSize: hifi.fontSizes.textFieldInput font.pixelSize: hifi.fontSizes.textFieldInput
font.italic: textField.text == "" 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 y: textFieldLabel.visible ? textFieldLabel.height + textFieldLabel.anchors.bottomMargin : 0
@ -69,7 +69,7 @@ TextField {
colorScheme: textField.colorScheme colorScheme: textField.colorScheme
anchors.left: parent.left anchors.left: parent.left
anchors.bottom: parent.top anchors.bottom: parent.top
anchors.bottomMargin: 4 anchors.bottomMargin: 3
visible: label != "" visible: label != ""
} }
} }

View file

@ -51,7 +51,11 @@ Window {
Rectangle { Rectangle {
id: attachmentsBackground 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 color: hifi.colors.baseGrayShadow
radius: 4 radius: 4
@ -129,7 +133,14 @@ Window {
HifiControls.Button { HifiControls.Button {
id: newAttachmentButton 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" text: "New Attachment"
color: hifi.buttons.black color: hifi.buttons.black
colorScheme: hifi.colorSchemes.dark colorScheme: hifi.colorSchemes.dark
@ -151,7 +162,13 @@ Window {
Row { Row {
id: buttonRow id: buttonRow
spacing: 8 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 { HifiControls.Button {
action: okAction action: okAction
color: hifi.buttons.black color: hifi.buttons.black

View file

@ -24,7 +24,7 @@ Window {
resizable: true resizable: true
destroyOnInvisible: true destroyOnInvisible: true
x: 40; y: 40 x: 40; y: 40
implicitWidth: 400; implicitHeight: 695 implicitWidth: 400; implicitHeight: 691
minSize: Qt.vector2d(200, 300) minSize: Qt.vector2d(200, 300)
HifiConstants { id: hifi } HifiConstants { id: hifi }
@ -109,7 +109,9 @@ Window {
} }
} }
HifiControls.VerticalSpacer {} HifiControls.VerticalSpacer {
height: hifi.dimensions.controlInterlineHeight + 2 // Add space for border
}
HifiControls.Table { HifiControls.Table {
tableModel: runningScriptsModel tableModel: runningScriptsModel
@ -120,7 +122,7 @@ Window {
} }
HifiControls.VerticalSpacer { 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") Component.onCompleted: scriptsModel.filterRegExp = new RegExp("^.*$", "i")
} }
HifiControls.VerticalSpacer {} HifiControls.VerticalSpacer {
height: hifi.dimensions.controlInterlineHeight + 2 // Add space for border
}
HifiControls.Tree { HifiControls.Tree {
id: treeView id: treeView
@ -196,7 +200,9 @@ Window {
anchors.right: parent.right anchors.right: parent.right
} }
HifiControls.VerticalSpacer {} HifiControls.VerticalSpacer {
height: hifi.dimensions.controlInterlineHeight + 2 // Add space for border
}
HifiControls.TextField { HifiControls.TextField {
id: selectedScript id: selectedScript

View file

@ -131,8 +131,8 @@ Item {
readonly property bool largeScreen: Screen.width >= 1920 && Screen.height >= 1080 readonly property bool largeScreen: Screen.width >= 1920 && Screen.height >= 1080
readonly property real borderRadius: largeScreen ? 7.5 : 5.0 readonly property real borderRadius: largeScreen ? 7.5 : 5.0
readonly property real borderWidth: largeScreen ? 2 : 1 readonly property real borderWidth: largeScreen ? 2 : 1
readonly property vector2d contentMargin: Qt.vector2d(12, 24) readonly property vector2d contentMargin: Qt.vector2d(21, 21)
readonly property vector2d contentSpacing: Qt.vector2d(8, 12) readonly property vector2d contentSpacing: Qt.vector2d(11, 14)
readonly property real labelPadding: 40 readonly property real labelPadding: 40
readonly property real textPadding: 8 readonly property real textPadding: 8
readonly property real sliderHandleSize: 18 readonly property real sliderHandleSize: 18
@ -143,8 +143,8 @@ Item {
readonly property real tableHeaderHeight: 40 readonly property real tableHeaderHeight: 40
readonly property vector2d modalDialogMargin: Qt.vector2d(50, 30) readonly property vector2d modalDialogMargin: Qt.vector2d(50, 30)
readonly property real modalDialogTitleHeight: 40 readonly property real modalDialogTitleHeight: 40
readonly property real controlLineHeight: 29 // Height of spinbox control on 1920 x 1080 monitor readonly property real controlLineHeight: 28 // Height of spinbox control on 1920 x 1080 monitor
readonly property real controlInterlineHeight: 22 // 75% of controlLineHeight readonly property real controlInterlineHeight: 21 // 75% of controlLineHeight
readonly property vector2d menuPadding: Qt.vector2d(14, 12) readonly property vector2d menuPadding: Qt.vector2d(14, 12)
} }

View file

@ -215,7 +215,7 @@ Fadable {
bottom: parent.bottom bottom: parent.bottom
} }
width: parent.contentWidth width: parent.contentWidth
height: footer.height + 2 * hifi.dimensions.contentSpacing.y height: footer.height + 2 * hifi.dimensions.contentSpacing.y + 3
color: hifi.colors.baseGray color: hifi.colors.baseGray
visible: footer.height > 0 visible: footer.height > 0