Implement new design of attachment dialog

interface/resources/qml/controls-uit/AttachmentsTable.qml

@@ -0,0 +1,171 @@
+//
+//  AttachmentsTable.qml
+//
+//  Created by David Rowe on 18 Feb 2016
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import QtQuick 2.5
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+import QtQuick.XmlListModel 2.0
+
+import "../styles-uit"
+import "../controls-uit" as HifiControls
+import "../windows-uit"
+import "../hifi/models"
+
+TableView {
+    id: tableView
+
+    //    property var tableModel: ListModel { }
+    property int colorScheme: hifi.colorSchemes.light
+    readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
+
+    model: S3Model{}
+
+    Rectangle {
+        anchors.fill: parent
+        visible: tableView.model.status !== XmlListModel.Ready
+        color: hifi.colors.darkGray0
+        BusyIndicator {
+            anchors.centerIn: parent
+            width: 48; height: 48
+            running: true
+        }
+    }
+
+    headerDelegate: Rectangle {
+        height: hifi.dimensions.tableHeaderHeight
+        color: hifi.colors.darkGray
+        border.width: 0.5
+        border.color: hifi.colors.baseGrayHighlight
+
+        RalewayRegular {
+            id: textHeader
+            size: hifi.fontSizes.tableText
+            color: hifi.colors.lightGrayText
+            text: styleData.value
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+                verticalCenter: parent.verticalCenter
+            }
+        }
+    }
+
+    // Use rectangle to draw border with rounded corners.
+    Rectangle {
+        color: "#00000000"
+        anchors { fill: parent; margins: -2 }
+        radius: hifi.dimensions.borderRadius
+        border.color: hifi.colors.baseGrayHighlight
+        border.width: 3
+    }
+    anchors.margins: 2  // Shrink TableView to lie within border.
+    backgroundVisible: true
+
+    horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
+    verticalScrollBarPolicy: Qt.ScrollBarAsNeeded
+
+    style: TableViewStyle {
+        // Needed in order for rows to keep displaying rows after end of table entries.
+        backgroundColor: parent.isLightColorScheme ? hifi.colors.tableRowLightEven : hifi.colors.tableRowDarkEven
+        alternateBackgroundColor: parent.isLightColorScheme ? hifi.colors.tableRowLightOdd : hifi.colors.tableRowDarkOdd
+
+        handle: Item {
+            id: scrollbarHandle
+            implicitWidth: 6
+            Rectangle {
+                anchors {
+                    fill: parent
+                    leftMargin: 2       // Move it right
+                    rightMargin: -2     // ""
+                    topMargin: 3        // Shrink vertically
+                    bottomMargin: 3     // ""
+                }
+                radius: 3
+                color: hifi.colors.tableScrollHandle
+            }
+        }
+
+        scrollBarBackground: Item {
+            implicitWidth: 10
+            Rectangle {
+                anchors {
+                    fill: parent
+                    margins: -1     // Expand
+                }
+                color: hifi.colors.baseGrayHighlight
+            }
+
+            Rectangle {
+                anchors {
+                    fill: parent
+                    margins: 1      // Shrink
+                }
+                radius: 4
+                color: hifi.colors.tableScrollBackground
+            }
+        }
+
+        incrementControl: Item {
+            visible: false
+        }
+
+        decrementControl: Item {
+            visible: false
+        }
+    }
+
+    rowDelegate: Rectangle {
+        height: (styleData.selected ? 1.2 : 1) * hifi.dimensions.tableRowHeight
+        color: styleData.selected
+               ? hifi.colors.primaryHighlight
+               : tableView.isLightColorScheme
+                 ? (styleData.alternate ? hifi.colors.tableRowLightEven : hifi.colors.tableRowLightOdd)
+                 : (styleData.alternate ? hifi.colors.tableRowDarkEven : hifi.colors.tableRowDarkOdd)
+    }
+
+    itemDelegate: Item {
+        anchors {
+            left: parent ? parent.left : undefined
+            leftMargin: hifi.dimensions.tablePadding
+            right: parent ? parent.right : undefined
+            rightMargin: hifi.dimensions.tablePadding
+        }
+        FiraSansSemiBold {
+            id: textItem
+            text: styleData.value
+            size: hifi.fontSizes.tableText
+            color: colorScheme == hifi.colorSchemes.light
+                   ? (styleData.selected ? hifi.colors.black : hifi.colors.baseGrayHighlight)
+                   : (styleData.selected ? hifi.colors.black : hifi.colors.lightGrayText)
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+                verticalCenter: parent.verticalCenter
+            }
+        }
+    }
+
+    TableViewColumn {
+        role: "name"
+        title: "NAME"
+        width: parent.width *0.3
+        horizontalAlignment: Text.AlignHCenter
+    }
+    TableViewColumn {
+        role: "size"
+        title: "SIZE"
+        width: parent.width *0.2
+        horizontalAlignment: Text.AlignHCenter
+    }
+    TableViewColumn {
+        role: "modified"
+        title: "LAST MODIFIED"
+        width: parent.width *0.5
+        horizontalAlignment: Text.AlignHCenter
+    }
+}

interface/resources/qml/controls-uit/SpinBox.qml

@@ -21,6 +21,8 @@ SpinBox {
     property int colorScheme: hifi.colorSchemes.light
     readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
     property string label: ""
+    property string labelInside: ""
+    property color colorLabelInside: hifi.colors.white
     property real controlHeight: height + (spinBoxLabel.visible ? spinBoxLabel.height + spinBoxLabel.anchors.bottomMargin : 0)
 
     FontLoader { id: firaSansSemiBold; source: "../../fonts/FiraSans-SemiBold.ttf"; }
@@ -31,12 +33,14 @@ SpinBox {
     y: spinBoxLabel.visible ? spinBoxLabel.height + spinBoxLabel.anchors.bottomMargin : 0
 
     style: SpinBoxStyle {
+        id: spinStyle
         background: Rectangle {
+            id: backgrondRec
             color: isLightColorScheme
                    ? (spinBox.focus ? hifi.colors.white : hifi.colors.lightGray)
                    : (spinBox.focus ? hifi.colors.black : hifi.colors.baseGrayShadow)
-            border.color: hifi.colors.primaryHighlight
+            border.color: spinBoxLabelInside.visible ? spinBoxLabelInside.color : hifi.colors.primaryHighlight
-            border.width: spinBox.focus ? 1 : 0
+            border.width: spinBox.focus ? spinBoxLabelInside.visible ? 2 : 1 : 0
         }
 
         textColor: isLightColorScheme
@@ -46,7 +50,7 @@ SpinBox {
         selectionColor: hifi.colors.primaryHighlight
 
         horizontalAlignment: Qt.AlignLeft
-        padding.left: hifi.dimensions.textPadding
+        padding.left: spinBoxLabelInside.visible ? 30 : hifi.dimensions.textPadding
         padding.right: hifi.dimensions.spinnerSize
 
         incrementControl: HiFiGlyphs {
@@ -76,4 +80,15 @@ SpinBox {
         anchors.bottomMargin: 4
         visible: label != ""
     }
+
+    HifiControls.Label {
+        id: spinBoxLabelInside
+        text: spinBox.labelInside
+        anchors.left: parent.left
+        anchors.leftMargin: 10
+        font.bold: true
+        anchors.verticalCenter: parent.verticalCenter
+        color: spinBox.colorLabelInside
+        visible: spinBox.labelInside != ""
+    }
 }

interface/resources/qml/hifi/dialogs/AttachmentsDialog.qml

@@ -1,19 +1,29 @@
 import QtQuick 2.5
 import QtQuick.Controls 1.4
+import QtQuick.Dialogs 1.2 as OriginalDialogs
 import Qt.labs.settings 1.0
+import QtQuick.Controls.Styles 1.4
+
+//import "../../windows"
+
+
+import "../../styles-uit"
+import "../../controls-uit" as HifiControls
+import "../../windows-uit"
 
-import "../../windows"
 import "attachments"
 
 Window {
     id: root
-    title: "Edit Attachments"
+    title: "Attachments Dialog"
     objectName: "AttachmentsDialog"
     width: 600
     height: 600
     resizable: true
-    // User must click OK or cancel to close the window
+    destroyOnInvisible: true
-    closable: false
+    minSize: Qt.vector2d(400, 500)
+
+    HifiConstants { id: hifi }
 
     readonly property var originalAttachments: MyAvatar.getAttachmentsVariant();
     property var attachments: [];
@@ -33,21 +43,49 @@ Window {
             listView.model.append({});
         }
     }
+    Column {
+        width: pane.contentWidth
 
         Rectangle {
-        anchors.fill: parent
+            width: parent.width
+            height: root.height
             radius: 4
+            color: hifi.colors.baseGray
 
             Rectangle {
                 id: attachmentsBackground
                 anchors { left: parent.left; right: parent.right; top: parent.top; bottom: newAttachmentButton.top; margins: 8 }
-            color: "gray"
+                color: hifi.colors.lightGrayText
                 radius: 4
 
                 ScrollView{
                     id: scrollView
                     anchors.fill: parent
                     anchors.margins: 4
+                    style: ScrollViewStyle {
+                        decrementControl: Item {
+                            visible: false
+                        }
+                        incrementControl: Item {
+                            visible: false
+                        }
+                        scrollBarBackground: Rectangle{
+                            implicitWidth: 14
+                            color: hifi.colors.baseGray
+                        }
+
+                        handle:
+                            Rectangle {
+                            implicitWidth: 8
+                            anchors.left: parent.left
+                            anchors.leftMargin: 3
+                            anchors.top: parent.top
+                            anchors.bottom: parent.bottom
+                            radius: 3
+                            color: hifi.colors.lightGrayText
+                        }
+                    }
+
                     ListView {
                         id: listView
                         model: ListModel {}
@@ -70,11 +108,12 @@ Window {
                 }
             }
 
-        Button {
+            HifiControls.Button {
                 id: newAttachmentButton
                 anchors { left: parent.left; right: parent.right; bottom: buttonRow.top; margins: 8 }
                 text: "New Attachment"
-
+                color: hifi.buttons.black
+		colorScheme: hifi.colorSchemes.dark 
                 onClicked: {
                     var template = {
                         modelUrl: "",
@@ -94,8 +133,16 @@ Window {
                 id: buttonRow
                 spacing: 8
                 anchors { right: parent.right; bottom: parent.bottom; margins: 8 }
-            Button { action: cancelAction }
+                HifiControls.Button {
-            Button { action: okAction }
+                    action: cancelAction
+                    color: hifi.buttons.black
+                    colorScheme: hifi.colorSchemes.dark 
+                }
+                HifiControls.Button {
+                    action: okAction
+                    color: hifi.buttons.black
+                    colorScheme: hifi.colorSchemes.dark 
+                }
             }
 
             Action {
@@ -120,5 +167,6 @@ Window {
                 }
             }
         }
+    }
 }
 

interface/resources/qml/hifi/dialogs/ModelBrowserDialog.qml

@@ -7,36 +7,45 @@ import "../../windows"
 import "../../js/Utils.js" as Utils
 import "../models"
 
-ModalWindow {
+import "../../styles-uit"
+import "../../controls-uit" as HifiControls
+import "../../windows-uit"
+
+Window {
     id: root
     resizable: true
-    width: 640
+    width: 600
     height: 480
+    closable: false
 
     property var result;
 
     signal selected(var modelUrl);
     signal canceled();
 
+    HifiConstants {id: hifi}
+
+    Column {
+        width: pane.contentWidth
+
         Rectangle {
-        anchors.fill: parent
+            width: parent.width
-        color: "white"
+            height: root.height
+            radius: 4
+            color: hifi.colors.baseGray
 
-        Item {
+            HifiControls.TextField {
-            anchors { fill: parent; margins: 8 }
-
-            TextField {
                 id: filterEdit
-                style:  TextFieldStyle { renderType: Text.QtRendering }
+                anchors { left: parent.left; right: parent.right; top: parent.top ; margins: 8}
-                anchors { left: parent.left; right: parent.right; top: parent.top }
                 placeholderText: "filter"
                 onTextChanged: tableView.model.filter = text
+                colorScheme: hifi.colorSchemes.dark
             }
 
-            TableView {
+            HifiControls.AttachmentsTable {
                 id: tableView
-                anchors { left: parent.left; right: parent.right; top: filterEdit.bottom; topMargin: 8; bottom: buttonRow.top; bottomMargin: 8 }
+                anchors { left: parent.left; right: parent.right; top: filterEdit.bottom; bottom: buttonRow.top; margins: 8; }
-                model: S3Model{}
+                colorScheme: hifi.colorSchemes.dark
                 onCurrentRowChanged: {
                     if (currentRow == -1) {
                         root.result = null;
@@ -44,60 +53,14 @@ ModalWindow {
                     }
                     result = model.baseUrl + "/" + model.get(tableView.currentRow).key;
                 }
-                itemDelegate: Component {
-                    Item {
-                        clip: true
-                        Text {
-                            x: 3
-                            anchors.verticalCenter: parent.verticalCenter
-                            color: tableView.activeFocus && styleData.row === tableView.currentRow ? "yellow" : styleData.textColor
-                            elide: styleData.elideMode
-                            text: getText()
-
-                            function getText() {
-                                switch(styleData.column) {
-                                    case 1:
-                                        return Utils.formatSize(styleData.value)
-                                    default:
-                                        return styleData.value;
-                                }
-                            }
-
-                        }
-                    }
-                }
-                TableViewColumn {
-                    role: "name"
-                    title: "Name"
-                    width: 200
-                }
-                TableViewColumn {
-                    role: "size"
-                    title: "Size"
-                    width: 100
-                }
-                TableViewColumn {
-                    role: "modified"
-                    title: "Last Modified"
-                    width: 200
-                }
-                Rectangle {
-                    anchors.fill: parent
-                    visible: tableView.model.status !== XmlListModel.Ready
-                    color: "#7fffffff"
-                    BusyIndicator {
-                        anchors.centerIn: parent
-                        width: 48; height: 48
-                        running: true
-                    }
-                }
             }
 
             Row {
                 id: buttonRow
-                anchors { right: parent.right; bottom: parent.bottom }
+                spacing: 8
-                Button { action: acceptAction }
+                anchors { right: parent.right; rightMargin: 8; bottom: parent.bottom; bottomMargin: 8; }
-                Button { action: cancelAction }
+                HifiControls.Button { action: acceptAction ;  color: hifi.buttons.black; colorScheme: hifi.colorSchemes.dark }
+                HifiControls.Button { action: cancelAction ;  color: hifi.buttons.black; colorScheme: hifi.colorSchemes.dark }
             }
 
             Action {
@@ -121,7 +84,6 @@ ModalWindow {
                 }
             }
         }
-
     }
 }
 

interface/resources/qml/hifi/dialogs/attachments/Attachment.qml

@@ -1,22 +1,30 @@
 import QtQuick 2.5
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
+import QtQuick.Dialogs 1.2 as OriginalDialogs
+import Qt.labs.settings 1.0
 
-import "../../../windows"
+//import "../../../windows"
-import "../../../controls" as VrControls
+//import "../../../controls" as VrControls
 import "."
 import ".."
 
+import "../../../styles-uit"
+import "../../../controls-uit" as HifiControls
+import "../../../windows-uit"
+
 Item {
     height: column.height + 2 * 8
 
     property var attachment;
 
+    HifiConstants { id: hifi }
+
     signal deleteAttachment(var attachment);
     signal updateAttachment();
     property bool completed: false;
 
-    Rectangle { color: "white"; anchors.fill: parent; radius: 4 }
+    Rectangle { color: hifi.colors.baseGray; anchors.fill: parent; radius: 4 }
 
     Component.onCompleted: {
         completed = true;
@@ -29,13 +37,14 @@ Item {
         spacing: 8
 
         Item {
-            height: modelChooserButton.height
+            height: modelChooserButton.height + urlLabel.height
-            anchors { left: parent.left; right: parent.right; }
+            anchors { left: parent.left; right: parent.right;}
-            Text { id: urlLabel; text: "Model URL:"; width: 80; anchors.verticalCenter: modelUrl.verticalCenter }
+            Text { id: urlLabel; color: hifi.colors.lightGrayText; text: "Model URL:"; width: 80;  anchors.top: parent.top;}
-            VrControls.TextField {
+            HifiControls.TextField {
                 id: modelUrl;
                 height:  jointChooser.height;
-                anchors { left: urlLabel.right; leftMargin: 8; rightMargin: 8; right: modelChooserButton.left }
+                colorScheme: hifi.colorSchemes.dark
+                anchors { bottom: parent.bottom; left: parent.left; rightMargin: 8; right: modelChooserButton.left }
                 text: attachment ? attachment.modelUrl : ""
                 onTextChanged: {
                     if (completed && attachment && attachment.modelUrl !== text) {
@@ -44,9 +53,11 @@ Item {
                     }
                 }
             }
-            Button {
+            HifiControls.Button {
                 id: modelChooserButton;
                 text: "Choose";
+                color: hifi.buttons.black
+                colorScheme: hifi.colorSchemes.dark
                 anchors { right: parent.right; verticalCenter: modelUrl.verticalCenter }
                 Component {
                     id: modelBrowserBuiler;
@@ -63,18 +74,20 @@ Item {
         }
 
         Item {
-            height: jointChooser.height
+            height: jointChooser.height + jointLabel.height
             anchors { left: parent.left; right: parent.right; }
             Text {
                 id: jointLabel;
                 width: 80;
                 text: "Joint:";
-                anchors.verticalCenter: jointChooser.verticalCenter;
+                color: hifi.colors.lightGrayText;
+                anchors.top: parent.top
             }
-            VrControls.ComboBox {
+            HifiControls.ComboBox {
                 id: jointChooser;
-                anchors { left: jointLabel.right; leftMargin: 8; right: parent.right }
+                anchors { bottom: parent.bottom; left: parent.left; right: parent.right }
                 model: MyAvatar.jointNames
+                colorScheme: hifi.colorSchemes.dark
                 currentIndex: attachment ? model.indexOf(attachment.jointName) : -1
                 onCurrentIndexChanged: {
                     if (completed && attachment && currentIndex != -1 && currentText && currentText !== attachment.jointName) {
@@ -86,12 +99,12 @@ Item {
         }
 
         Item {
-            height: translation.height
+            height: translation.height + translationLabel.height
             anchors { left: parent.left; right: parent.right; }
-            Text { id: translationLabel; width: 80; text: "Translation:"; anchors.verticalCenter: translation.verticalCenter; }
+            Text { id: translationLabel; width: 80; color: hifi.colors.lightGrayText; text: "Translation:"; anchors.top: parent.top; }
             Translation {
                 id: translation;
-                anchors { left: translationLabel.right; leftMargin: 8; right: parent.right }
+                anchors { left: parent.left; right: parent.right; bottom: parent.bottom}
                 vector: attachment ? attachment.translation : {x: 0, y: 0, z: 0};
                 onValueChanged: {
                     if (completed && attachment) {
@@ -103,12 +116,12 @@ Item {
         }
 
         Item {
-            height: rotation.height
+            height: rotation.height + rotationLabel.height
             anchors { left: parent.left; right: parent.right; }
-            Text { id: rotationLabel; width: 80; text: "Rotation:"; anchors.verticalCenter: rotation.verticalCenter; }
+            Text { id: rotationLabel; width: 80; color: hifi.colors.lightGrayText; text: "Rotation:"; anchors.top: parent.top; }
             Rotation {
                 id: rotation;
-                anchors { left: rotationLabel.right; leftMargin: 8; right: parent.right }
+                anchors { left: parent.left; right: parent.right; bottom: parent.bottom; }
                 vector: attachment ? attachment.rotation : {x: 0, y: 0, z: 0};
                 onValueChanged: {
                     if (completed && attachment) {
@@ -120,17 +133,18 @@ Item {
         }
 
         Item {
-            height: scaleSpinner.height
+            height: scaleSpinner.height + scaleLabel.height
             anchors { left: parent.left; right: parent.right; }
-            Text { id: scaleLabel; width: 80; text: "Scale:"; anchors.verticalCenter: scale.verticalCenter; }
+            Text { id: scaleLabel; width: 80; color: hifi.colors.lightGrayText; text: "Scale:"; anchors.top: parent.top; }
-            SpinBox {
+            HifiControls.SpinBox {
                 id: scaleSpinner;
-                anchors { left: scaleLabel.right; leftMargin: 8; right: parent.right }
+                anchors { left: parent.left; right: parent.right; bottom: parent.bottom; }
                 decimals: 1;
                 minimumValue: 0.1
                 maximumValue: 10
                 stepSize: 0.1;
                 value: attachment ? attachment.scale : 1.0
+                colorScheme: hifi.colorSchemes.dark
                 onValueChanged: {
                     if (completed && attachment && attachment.scale !== value) {
                         attachment.scale = value;
@@ -143,11 +157,12 @@ Item {
         Item {
             height: soft.height
             anchors { left: parent.left; right: parent.right; }
-            Text { id: softLabel; width: 80; text: "Is soft:"; anchors.verticalCenter: soft.verticalCenter; }
+            Text { id: softLabel; width: 80; color: hifi.colors.lightGrayText; text: "Is soft"; anchors.left: soft.right; anchors.leftMargin: 8; }
-            CheckBox {
+            HifiControls.CheckBox {
                 id: soft;
-                anchors { left: softLabel.right; leftMargin: 8; right: parent.right }
+                anchors { left: parent.left; bottom: parent.bottom;}
                 checked: attachment ? attachment.soft : false
+                colorScheme: hifi.colorSchemes.dark
                 onCheckedChanged: {
                     if (completed && attachment && attachment.soft !== checked) {
                         attachment.soft = checked;
@@ -157,7 +172,9 @@ Item {
             }
         }
 
-        Button {
+        HifiControls.Button {
+            color: hifi.buttons.black
+            colorScheme: hifi.colorSchemes.dark
             anchors { left: parent.left; right: parent.right; }
             text: "Delete"
             onClicked: deleteAttachment(root.attachment);

interface/resources/qml/hifi/dialogs/attachments/Vector3.qml

@@ -1,6 +1,10 @@
 import QtQuick 2.5
 import QtQuick.Controls 1.4
 
+import "../../../styles-uit"
+import "../../../controls-uit" as HifiControls
+import "../../../windows-uit"
+
 Item {
     id: root
     implicitHeight: xspinner.height
@@ -14,12 +18,16 @@ Item {
 
     signal valueChanged();
 
-    SpinBox {
+    HifiConstants { id: hifi }
+
+    HifiControls.SpinBox {
         id: xspinner
         width: root.spinboxWidth
         anchors { left: parent.left }
         value: root.vector.x
-
+        labelInside: "X:"
+        colorScheme: hifi.colorSchemes.dark
+        colorLabelInside: hifi.colors.redHighlight
         decimals: root.decimals
         stepSize: root.stepSize
         maximumValue: root.maximumValue
@@ -32,12 +40,14 @@ Item {
         }
     }
 
-    SpinBox {
+    HifiControls.SpinBox {
         id: yspinner
         width: root.spinboxWidth
         anchors { horizontalCenter: parent.horizontalCenter }
         value: root.vector.y
-
+        labelInside: "Y:"
+        colorLabelInside: hifi.colors.greenHighlight
+        colorScheme: hifi.colorSchemes.dark
         decimals: root.decimals
         stepSize: root.stepSize
         maximumValue: root.maximumValue
@@ -50,12 +60,14 @@ Item {
         }
     }
 
-    SpinBox {
+    HifiControls.SpinBox {
         id: zspinner
         width: root.spinboxWidth
         anchors { right: parent.right; }
         value: root.vector.z
-
+        labelInside: "Z:"
+        colorLabelInside: hifi.colors.primaryHighlight
+        colorScheme: hifi.colorSchemes.dark
         decimals: root.decimals
         stepSize: root.stepSize
         maximumValue: root.maximumValue

interface/resources/qml/styles-uit/HifiConstants.qml

@@ -75,6 +75,7 @@ Item {
         readonly property color lightGrayText80: "#ccafafaf"
         readonly property color faintGray80: "#cce3e3e3"
         readonly property color faintGray50: "#80e3e3e3"
+        readonly property color locked: "#252525"
 
         // Other colors
         readonly property color white: "#ffffff"
@@ -136,6 +137,7 @@ Item {
         readonly property real spinnerSize: 42
         readonly property real tablePadding: 12
         readonly property real tableRowHeight: largeScreen ? 26 : 23
+        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