Backporting visual work from branch

interface/resources/qml/LoginDialog.qml

@@ -5,9 +5,8 @@ import "controls"
 import "styles"
 
 Dialog {
+    HifiConstants { id: hifi }
     title: "Login"
-    HifiPalette { id: hifiPalette }
-    SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
     objectName: "LoginDialog"
     height: 512
     width: 384
@@ -117,7 +116,7 @@ Dialog {
                 width: 192
                 height: 64
                 anchors.horizontalCenter: parent.horizontalCenter
-                color: hifiPalette.hifiBlue
+                color: hifi.colors.hifiBlue
                 border.width: 0
                 radius: 10
 
@@ -160,7 +159,7 @@ Dialog {
                 text:"Create Account"
                 font.pointSize: 12
                 font.bold: true
-                color: hifiPalette.hifiBlue
+                color: hifi.colors.hifiBlue
 
                 MouseArea {
                     anchors.fill: parent
@@ -177,7 +176,7 @@ Dialog {
                 verticalAlignment: Text.AlignVCenter
                 font.pointSize: 12
                 text: "Recover Password"
-                color: hifiPalette.hifiBlue
+                color: hifi.colors.hifiBlue
 
                 MouseArea {
                     anchors.fill: parent

interface/resources/qml/MessageDialog.qml

@@ -18,8 +18,6 @@ Dialog {
     onImplicitHeightChanged: root.height = implicitHeight
     onImplicitWidthChanged: root.width = implicitWidth
 
-    SystemPalette { id: palette }
-
     function calculateImplicitWidth() {
         if (buttons.visibleChildren.length < 2)
             return;

interface/resources/qml/VrMenu.qml

@@ -7,12 +7,19 @@ import "styles"
 
 Hifi.VrMenu {
     id: root
+    HifiConstants { id: hifi }
+
     anchors.fill: parent
+
     objectName: "VrMenu"
+
     enabled: false
     opacity: 0.0
+
     property int animationDuration: 200
-    HifiPalette { id: hifiPalette }
+    property var models: []
+    property var columns: []
+
     z: 10000
 
     onEnabledChanged: {
@@ -22,7 +29,7 @@ Hifi.VrMenu {
         opacity = enabled ? 1.0 : 0.0
         if (enabled) {
             forceActiveFocus()
-        } 
+        }
     }
 
     // The actual animator
@@ -41,10 +48,6 @@ Hifi.VrMenu {
         if (!visible) reset();
     }
 
-
-    property var models: []
-    property var columns: []
-    
     property var menuBuilder: Component {
         Border {
             Component.onCompleted: {
@@ -58,10 +61,20 @@ Hifi.VrMenu {
                     y = lastMousePosition.y - height / 2;
                 }
             }
-            SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }
+            border.color: hifi.colors.hifiBlue
-            border.color: hifiPalette.hifiBlue
+            color: hifi.colors.window
-            color: sysPalette.window
             property int menuDepth
+/*
+            MouseArea {
+//                Rectangle { anchors.fill: parent; color: "#7f0000FF"; visible: enabled }
+                anchors.fill: parent
+                onClicked: {
+                    while (parent.menuDepth != root.models.length - 1) {
+                        root.popColumn()
+                    }
+                }
+            }
+*/
 
             ListView {
                 spacing: 6
@@ -71,12 +84,11 @@ Hifi.VrMenu {
                 anchors.margins: outerMargin
                 id: listView
                 height: root.height
-                currentIndex: -1
 
                 onCountChanged: {
                     recalculateSize()
-                }                 
+                }
-                
+
                 function recalculateSize() {
                     var newHeight = 0
                     var newWidth = minWidth;
@@ -87,11 +99,11 @@ Hifi.VrMenu {
                     parent.height = newHeight + outerMargin * 2;
                     parent.width = newWidth + outerMargin * 2
                 }
-            
+
                 highlight: Rectangle {
                     width: listView.minWidth - 32; 
                     height: 32
-                    color: sysPalette.highlight
+                    color: hifi.colors.hifiBlue
                     y: (listView.currentItem) ? listView.currentItem.y : 0;
                     x: 32
                     Behavior on y { 
@@ -101,10 +113,8 @@ Hifi.VrMenu {
                           }
                     }
                 }
-           
 
-                property int columnIndex: root.models.length - 1 
+                model: root.models[menuDepth]
-                model: root.models[columnIndex]
                 delegate: Loader {
                     id: loader
                     sourceComponent: root.itemBuilder
@@ -120,12 +130,6 @@ Hifi.VrMenu {
                         value: modelData
                         when: loader.status == Loader.Ready
                     }        
-                    Binding {
-                        target: loader.item
-                        property: "listViewIndex"
-                        value: index
-                        when: loader.status == Loader.Ready
-                    }        
                     Binding {
                         target: loader.item
                         property: "listView"
@@ -133,26 +137,24 @@ Hifi.VrMenu {
                         when: loader.status == Loader.Ready
                     }        
                 }
-
             }
-                
         }
     }
-    
+
     property var itemBuilder: Component {
         Text {
-            SystemPalette { id: sp; colorGroup: SystemPalette.Active }
             id: thisText
             x: 32
             property var source
             property var root
-            property var listViewIndex
             property var listView
             text: typedText()
             height: implicitHeight
             width: implicitWidth
-            color: source.enabled ? "black" : "gray"
+            color: source.enabled ? hifi.colors.text : hifi.colors.disabledText
-                
+            enabled: source.enabled
+            
+
             onImplicitWidthChanged: {
                 if (listView) {
                     listView.minWidth = Math.max(listView.minWidth, implicitWidth + 64);
@@ -163,15 +165,27 @@ Hifi.VrMenu {
             FontAwesome {
                 visible: source.type == 1 && source.checkable
                 x: -32
-                text: (source.type == 1 && source.checked) ? "\uF05D" : "\uF10C"
+                text: checkText();  
+                color: parent.color
+                function checkText() {
+                    if (source.type != 1) {
+                        return;
+                    }
+                    // FIXME this works for native QML menus but I don't think it will
+                    // for proxied QML menus
+                    if (source.exclusiveGroup) {
+                        return source.checked ? "\uF05D" : "\uF10C"
+                    }
+                    return source.checked ? "\uF046" : "\uF096"
+                }
             }
-            
+
             FontAwesome {
                 visible: source.type == 2
-                x: listView.width - 64
+                x: listView.width - 32 - (hifi.layout.spacing * 2)
                 text: "\uF0DA"
+                color: parent.color
             }
-             
 
             function typedText() {
                 switch(source.type) {
@@ -200,38 +214,53 @@ Hifi.VrMenu {
                     interval: 1000
                     onTriggered: parent.select();
                 }
-                onEntered: {
+                /*  
-                    if (source.type == 2 && enabled) {
+                 * Uncomment below to have menus auto-popup
-                        timer.start()
+                 * 
-                    }
+                 * FIXME if we enabled timer based menu popup, either the timer has 
-                }
+                 * to be very very short or after auto popup there has to be a small 
-                onExited: {
+                 * amount of time, or a test if the mouse has moved before a click 
-                    timer.stop()
+                 * will be accepted, otherwise it's too easy to accidently click on
-                }
+                 * something immediately after the auto-popup appears underneath your 
+                 * cursor
+                 *
+                 */
+                //onEntered: {
+                //    if (source.type == 2 && enabled) {
+                //        timer.start()
+                //    }
+                //}
+                //onExited: {
+                //    timer.stop()
+                //}
                 onClicked: {
                     select();
                 }
                 function select() {
                     timer.stop();
-                    listView.currentIndex = listViewIndex
+                    var popped = false;
-                    parent.root.selectItem(parent.source);
+                    while (columns.length - 1 > listView.parent.menuDepth) {
+                        popColumn();
+                        popped = true;
+                    }
+
+                    if (!popped || source.type != 1) {
+                        parent.root.selectItem(parent.source);
+                    }
                 }
             }
         }
     }
 
- 
-
     function lastColumn() {
         return columns[root.columns.length - 1];
     }
-    
+
     function pushColumn(items) {
         models.push(items)
         if (columns.length) {
             var oldColumn = lastColumn();
-            oldColumn.enabled = false;
+            //oldColumn.enabled = false
-            oldColumn.opacity = 0.5;
         }
         var newColumn = menuBuilder.createObject(root); 
         columns.push(newColumn);

interface/resources/qml/controls/Button.qml

@@ -5,6 +5,5 @@ import "."
 import "../styles"
 
 Original.Button {
-    style: ButtonStyle {
+    style: ButtonStyle { }
-    }
 }

interface/resources/qml/controls/CheckBox.qml

@@ -0,0 +1,16 @@
+import QtQuick.Controls 1.3 as Original
+import QtQuick.Controls.Styles 1.3
+import "../styles"
+import "."
+Original.CheckBox {
+    text: "Check Box"
+    style: CheckBoxStyle {
+        indicator: FontAwesome {
+            text: control.checked ? "\uf046" : "\uf096"
+        }
+        label: Text {
+            text: control.text
+        }
+    }
+    
+}

interface/resources/qml/controls/Dialog.qml

@@ -11,28 +11,21 @@ import "../styles"
  * Examine the QML ApplicationWindow.qml source for how it does this
  * 
  */
-Item {
+DialogBase {
     id: root
-
+    HifiConstants { id: hifi }
-    HifiPalette { id: hifiPalette }
+    // FIXME better placement via a window manager
-    SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }
     x: parent ? parent.width / 2 - width / 2 : 0
     y: parent ? parent.height / 2 - height / 2 : 0
 
-    property int animationDuration: 400
     property bool destroyOnInvisible: false
     property bool destroyOnCloseButton: true
     property bool resizable: false
+
+    property int animationDuration: hifi.effects.fadeInDuration
     property int minX: 256
     property int minY: 256
-    property int topMargin: root.height - clientBorder.height + 8
+    readonly property int topMargin: root.height - clientBorder.height + hifi.layout.spacing
-    property int margins: 8
-    property string title
-    property int titleSize: titleBorder.height + 12
-    property string frameColor: hifiPalette.hifiBlue
-    property string backgroundColor: sysPalette.window
-    property string headerBackgroundColor: sysPalette.dark
-    clip: true
 
     /*
      * Support for animating the dialog in and out. 
@@ -44,7 +37,8 @@ Item {
     // visibility, so that we can do animations in both directions.  Because 
     // visibility and enabled are boolean flags, they cannot be animated.  So when 
     // enabled is change, we modify a property that can be animated, like scale or 
-    // opacity.  
+    // opacity, and then when the target animation value is reached, we can
+    // modify the visibility
     onEnabledChanged: {
         scale = enabled ? 1.0 : 0.0
     }
@@ -57,13 +51,13 @@ Item {
         }
     }
 
-    // We remove any load the dialog might have on the QML by toggling it's 
+    // Once we're scaled to 0, disable the dialog's visibility
-    // visibility based on the state of the animated property
     onScaleChanged: {
         visible = (scale != 0.0);
     }
-    
+
-    // Some dialogs should be destroyed when they become invisible, so handle that
+    // Some dialogs should be destroyed when they become invisible,
+    // so handle that
     onVisibleChanged: {
         if (!visible && destroyOnInvisible) {
             destroy();
@@ -91,6 +85,7 @@ Item {
 
     MouseArea {
         id: sizeDrag
+        enabled: root.resizable
         property int startX
         property int startY
         anchors.right: parent.right
@@ -103,7 +98,7 @@ Item {
             startY = mouseY
         }
         onPositionChanged: {
-            if (pressed && root.resizable) {
+            if (pressed) {
                 root.deltaSize((mouseX - startX), (mouseY - startY))
                 startX = mouseX
                 startY = mouseY
@@ -111,83 +106,41 @@ Item {
         }
     }
 
-    /* 
+    MouseArea {
-     * Window decorations, with a title bar and frames
+        id: titleDrag
-     */
+        x: root.titleX
-    Border {
+        y: root.titleY
-        id: windowBorder
+        width: root.titleWidth
-        anchors.fill: parent
+        height: root.titleHeight
-        border.color: root.frameColor
-        color: root.backgroundColor
 
-        Border {
+        drag {
-            id: titleBorder
+            target: root
-            height: 48
+            minimumX: 0
+            minimumY: 0
+            maximumX: root.parent ? root.parent.width - root.width : 0
+            maximumY: root.parent ? root.parent.height - root.height : 0
+        }
+
+        Row {
+            id: windowControls
+            anchors.bottom: parent.bottom
+            anchors.top: parent.top
             anchors.right: parent.right
-            anchors.rightMargin: 0
+            anchors.rightMargin: hifi.layout.spacing
-            anchors.left: parent.left
+            FontAwesome {
-            anchors.leftMargin: 0
+                id: icon
-            border.color: root.frameColor
-            color: root.headerBackgroundColor
-
-            Text {
-                id: titleText
-                // FIXME move all constant colors to our own palette class HifiPalette
-                color: "white"
-                text: root.title
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-                anchors.fill: parent
-            }
-
-            MouseArea {
-                id: titleDrag
-                anchors.right: closeButton.left
-                anchors.bottom: parent.bottom
-                anchors.left: parent.left
-                anchors.top: parent.top
-                anchors.rightMargin: 4
-                drag {
-                    target: root
-                    minimumX: 0
-                    minimumY: 0
-                    maximumX: root.parent ? root.parent.width - root.width : 0
-                    maximumY: root.parent ? root.parent.height - root.height : 0
-                }
-            }
-            Image {
-                id: closeButton
-                x: 360
-                height: 16
                 anchors.verticalCenter: parent.verticalCenter
-                width: 16
+                size: root.titleHeight - hifi.layout.spacing * 2
-                anchors.right: parent.right
+                color: "red"
-                anchors.rightMargin: 12
+                text: "\uf00d"
-                source: "../../styles/close.svg"
                 MouseArea {
+                    anchors.margins: hifi.layout.spacing / 2
                     anchors.fill: parent
                     onClicked: {
                         root.close();
                     }
                 }
             }
-        } // header border
+        }
-
+    }
-        Border {
-            id: clientBorder
-            border.color: root.frameColor
-            // FIXME move all constant colors to our own palette class HifiPalette
-            color: "#00000000"
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 0
-            anchors.top: titleBorder.bottom
-            anchors.topMargin: -titleBorder.border.width
-            anchors.right: parent.right
-            anchors.rightMargin: 0
-            anchors.left: parent.left
-            anchors.leftMargin: 0
-            clip: true
-        } // client border
-    } // window border
-
 }

interface/resources/qml/controls/DialogBase.qml

@@ -0,0 +1,74 @@
+import QtQuick 2.3
+import QtQuick.Controls 1.2
+import "."
+import "../styles"
+
+Item {
+    id: root
+    HifiConstants { id: hifi }
+    implicitHeight: 512
+    implicitWidth: 512
+    property string title
+    property int titleSize: titleBorder.height + 12
+    property string frameColor: hifi.colors.hifiBlue
+    property string backgroundColor: hifi.colors.dialogBackground
+    property bool active: false
+
+    property alias titleBorder: titleBorder
+    readonly property alias titleX: titleBorder.x
+    readonly property alias titleY: titleBorder.y
+    readonly property alias titleWidth: titleBorder.width
+    readonly property alias titleHeight: titleBorder.height
+
+    property alias clientBorder: clientBorder
+    readonly property real clientX: clientBorder.x + hifi.styles.borderWidth
+    readonly property real clientY: clientBorder.y + hifi.styles.borderWidth
+    readonly property real clientWidth: clientBorder.width - hifi.styles.borderWidth * 2
+    readonly property real clientHeight: clientBorder.height - hifi.styles.borderWidth * 2
+
+    /*
+     * Window decorations, with a title bar and frames
+     */
+    Border {
+        id: windowBorder
+        anchors.fill: parent
+        border.color: root.frameColor
+        color: "#00000000"
+
+        Border {
+            id: titleBorder
+            height: hifi.layout.windowTitleHeight
+            anchors.right: parent.right
+            anchors.left: parent.left
+            border.color: root.frameColor
+            clip: true
+            color: root.active ?
+                       hifi.colors.activeWindow.headerBackground :
+                       hifi.colors.inactiveWindow.headerBackground
+
+            Text {
+                id: titleText
+                color: root.active ?
+                           hifi.colors.activeWindow.headerText :
+                           hifi.colors.inactiveWindow.headerText
+                text: root.title
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                anchors.fill: parent
+            }
+        } // header border
+
+        Border {
+            id: clientBorder
+            border.color: root.frameColor
+            color: root.backgroundColor
+            anchors.bottom: parent.bottom
+            anchors.top: titleBorder.bottom
+            anchors.topMargin: -titleBorder.border.width
+            anchors.right: parent.right
+            anchors.left: parent.left
+            clip: true
+        } // client border
+    } // window border
+
+}

interface/resources/qml/controls/FontAwesome.qml

@@ -8,9 +8,9 @@ Text {
     property int size: 32
     width: size
     height: size
+    font.pixelSize: size
     verticalAlignment: Text.AlignVCenter
-    horizontalAlignment: Text.AlignHCenter
+    horizontalAlignment: Text.AlignLeft
     font.family: iconFont.name
-    font.pointSize: 18
 }
 

interface/resources/qml/controls/IconButton.qml

@@ -1,24 +0,0 @@
-import QtQuick 2.3
-import QtQuick.Controls 1.3
-import QtQuick.Window 2.2
-import QtQuick.Controls.Styles 1.3
-
-Button {
-    text: "Text"
-    style: ButtonStyle {
-        background:  Item { anchors.fill: parent }
-        label: Text {
-            id: icon
-            width: height
-            verticalAlignment: Text.AlignVCenter
-            renderType: Text.NativeRendering
-            font.family: iconFont.name
-            font.pointSize: 18
-            property alias unicode: icon.text
-            FontLoader { id: iconFont; source: "/fonts/fontawesome-webfont.ttf"; }
-            text: control.text
-            color: control.enabled ? "white" : "dimgray"
-        }
-    }
-}
-

interface/resources/qml/controls/MenuButton.qml

@@ -1,5 +0,0 @@
-import QtQuick 2.3
-import QtQuick.Controls 1.3 as Original
-import "../styles"
-import "../controls"
-

interface/resources/qml/controls/Slider.qml

@@ -0,0 +1,8 @@
+import QtQuick.Controls 1.3 as Original
+import QtQuick.Controls.Styles 1.3
+
+import "../styles"
+import "."
+
+Original.Slider {
+}

interface/resources/qml/controls/Spacer.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.4
+import "../styles"
+
+Item {
+    id: root
+    HifiConstants { id: hifi }
+    property real size: hifi.layout.spacing
+    property real multiplier: 1.0
+    height: size * multiplier
+    width: size * multiplier
+}

interface/resources/qml/controls/SpinBox.qml

@@ -0,0 +1,15 @@
+
+import QtQuick.Controls 1.3 as Original
+import QtQuick.Controls.Styles 1.3
+
+import "../styles"
+import "."
+
+Original.SpinBox {
+    style: SpinBoxStyle {
+        HifiConstants { id: hifi }
+        font.family: hifi.fonts.fontFamily
+        font.pointSize: hifi.fonts.fontSize
+    }
+    
+}

interface/resources/qml/controls/Text.qml

@@ -1,7 +1,9 @@
 import QtQuick 2.3 as Original
+import "../styles"
 
 Original.Text {
-    font.family: "Helvetica"
+    HifiConstants { id: hifi }
-    font.pointSize: 18
+    font.family: hifi.fonts.fontFamily
+    font.pointSize: hifi.fonts.fontSize
 }
 

interface/resources/qml/controls/TextAndSlider.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.3 as Original
+import "../styles"
+import "."
+
+Original.Item {
+    property alias text: label.text
+    property alias value: slider.value
+
+    Text {
+        id: label
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        verticalAlignment: Original.Text.AlignVCenter
+    }
+
+    Slider  {
+        id: slider
+        width: 120
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+    }
+}

interface/resources/qml/controls/TextAndSpinBox.qml

@@ -0,0 +1,26 @@
+import QtQuick 2.3 as Original
+import "../styles"
+import "."
+
+Original.Item {
+    property alias text: label.text
+    property alias value: spinBox.value
+
+    Text {
+        id: label
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        verticalAlignment: Original.Text.AlignVCenter
+        text: "Minimum HMD FPS"
+    }
+    SpinBox {
+        id: spinBox
+        width: 120
+        maximumValue: 240
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+    }
+
+}

interface/resources/qml/controls/TextArea.qml

@@ -1,7 +1,9 @@
-import QtQuick 2.3 as Original
+import QtQuick.Controls 2.3 as Original
+import "../styles"
 
 Original.TextArea {
-    font.family: "Helvetica"
+    HifiConstants { id: hifi }
-    font.pointSize: 18
+    font.family: hifi.fonts.fontFamily
+    font.pointSize: hifi.fonts.fontSize
 }
 

interface/resources/qml/controls/TextEdit.qml

@@ -1,7 +1,9 @@
 import QtQuick 2.3 as Original
+import "../styles"
 
 Original.TextEdit {
-    font.family: "Helvetica"
+    HifiConstants { id: hifi }
-    font.pointSize: 18
+    font.family: hifi.fonts.fontFamily
+    font.pointSize: hifi.fonts.fontSize
 }
 

interface/resources/qml/controls/TextHeader.qml

@@ -0,0 +1,9 @@
+import "."
+import "../styles"
+
+Text {
+    HifiConstants { id: hifi }
+    color: hifi.colors.hifiBlue
+    font.pointSize: hifi.fonts.headerPointSize
+    font.bold: true
+}

interface/resources/qml/controls/TextInput.qml

@@ -1,34 +1,36 @@
-import QtQuick 2.3
+import QtQuick 2.3 as Original
-import QtQuick.Controls 1.2
+import "../styles"
+import "."
 
-TextInput {
+Original.TextInput {
-    SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
+    id: root
+    HifiConstants { id: hifi }
     property string helperText
-    font.family: "Helvetica"
+    height: hifi.layout.rowHeight
-    font.pointSize: 18
-    width: 256
-    height: 64
-    color: myPalette.text
     clip: true
-    verticalAlignment: TextInput.AlignVCenter
+    color: hifi.colors.text
+    verticalAlignment: Original.TextInput.AlignVCenter
+    font.family: hifi.fonts.fontFamily
+    font.pointSize: hifi.fonts.fontSize
 
-    onTextChanged: {
+
-        if (text == "") {
+    Original.Rectangle {
-            helperText.visible = true;
+        // Render the rectangle as background
-        } else {
+        z: -1
-            helperText.visible = false;
+        anchors.fill: parent
-        }
+        color: hifi.colors.inputBackground
     }
 
     Text {
-        id: helperText
         anchors.fill: parent
         font.pointSize: parent.font.pointSize
         font.family: parent.font.family
-        verticalAlignment: TextInput.AlignVCenter
+        verticalAlignment: parent.verticalAlignment
-        text: parent.helperText
+        horizontalAlignment: parent.horizontalAlignment
-        color: myPalette.dark
+        text: root.helperText
-        clip: true
+        color: hifi.colors.hintText
+        visible: !root.text
     }
 }
 
+

interface/resources/qml/controls/TextInputAndButton.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.3 as Original
+import "../styles"
+import "."
+
+Original.Item {
+    id: root
+    HifiConstants { id: hifi }
+    height: hifi.layout.rowHeight
+    property string text
+    property string helperText
+    property string buttonText
+    property int buttonWidth: 0
+    property alias input: input
+    property alias button: button
+    signal clicked()
+
+    TextInput {
+        id: input
+        text: root.text
+        helperText: root.helperText
+        anchors.left: parent.left
+        anchors.right: button.left
+        anchors.rightMargin: 8
+        anchors.bottom: parent.bottom
+        anchors.top: parent.top
+    }
+
+    Button {
+        id: button
+        clip: true
+        width: root.buttonWidth ? root.buttonWidth : implicitWidth
+        text: root.buttonText
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.top: parent.top
+        onClicked: root.clicked()
+    }
+}
+
+

interface/resources/qml/styles/Border.qml

@@ -1,11 +1,12 @@
 import QtQuick 2.3
 
 Rectangle {
-    SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
+    HifiConstants { id: hifi }
-    property int margin: 5
+    implicitHeight: 64
-    color: myPalette.window
+    implicitWidth: 64
-    border.color: myPalette.dark
+    color: hifi.colors.window
-    border.width: 5
+    border.color: hifi.colors.hifiBlue
-    radius: border.width * 2
+    border.width: hifi.styles.borderWidth
+    radius: hifi.styles.borderRadius
 }
 

interface/resources/qml/styles/ButtonStyle.qml

@@ -4,7 +4,7 @@ import "."
 import "../controls"
         
 OriginalStyles.ButtonStyle {
-    Original.SystemPalette { id: myPalette; colorGroup: Original.SystemPalette.Active }
+    HifiConstants { id: hifi }
     padding {
         top: 8
         left: 12
@@ -15,10 +15,9 @@ OriginalStyles.ButtonStyle {
         anchors.fill: parent
     }
     label: Text {
-       renderType: Original.Text.NativeRendering
        verticalAlignment: Original.Text.AlignVCenter
        horizontalAlignment: Original.Text.AlignHCenter
        text: control.text
-       color: control.enabled ? myPalette.text : myPalette.dark
+       color: control.enabled ? hifi.colors.text : hifi.colors.disabledText
     }
 }

interface/resources/qml/styles/HifiConstants.qml

@@ -0,0 +1,61 @@
+import QtQuick 2.4
+
+Item {
+    SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }
+    readonly property alias colors: colors
+    readonly property alias layout: layout
+    readonly property alias fonts: fonts
+    readonly property alias styles: styles
+    readonly property alias effects: effects
+
+    Item {
+        id: colors
+        readonly property color hifiBlue: "#0e7077"
+        readonly property color window: sysPalette.window
+        readonly property color dialogBackground: sysPalette.window
+        //readonly property color dialogBackground: "#00000000"
+        readonly property color inputBackground: "white"
+        readonly property color background: sysPalette.dark
+        readonly property color text: sysPalette.text
+        readonly property color disabledText: "gray"
+        readonly property color hintText: sysPalette.dark
+        readonly property color light: sysPalette.light
+        readonly property alias activeWindow: activeWindow
+        readonly property alias inactiveWindow: inactiveWindow
+        QtObject {
+            id: activeWindow
+            readonly property color headerBackground: "white"
+            readonly property color headerText: "black"
+        }
+        QtObject {
+            id: inactiveWindow
+            readonly property color headerBackground: "gray"
+            readonly property color headerText: "black"
+        }
+     }
+
+    QtObject {
+        id: fonts
+        readonly property real headerPointSize: 24
+        readonly property string fontFamily: "Helvetica"
+        readonly property real fontSize: 18
+    }
+
+    QtObject {
+        id: layout
+        property int spacing: 8
+        property int rowHeight: 40
+        property int windowTitleHeight: 48
+    }
+
+    QtObject {
+        id: styles
+        readonly property int borderWidth: 5
+        readonly property int borderRadius: borderWidth * 2
+    }
+
+    QtObject {
+        id: effects
+        readonly property int fadeInDuration: 400
+    }
+}

interface/resources/qml/styles/HifiPalette.qml

@@ -1,5 +1,11 @@
 import QtQuick 2.4
 
-QtObject {
+Item {
     property string hifiBlue: "#0e7077"
-}
+    property alias colors: colorsObj
+
+    Item {
+        id: colorsObj
+        property string hifiRed: "red"
+    }
+}

interface/resources/qml/styles/IconButtonStyle.qml

@@ -1,15 +1,10 @@
 ButtonStyle {
     background:  Item { anchors.fill: parent }
-    label: Text {
+    label: FontAwesome {
         id: icon
-        width: height
-        verticalAlignment: Text.AlignVCenter
-        renderType: Text.NativeRendering
-        font.family: iconFont.name
         font.pointSize: 18
-        property alias unicode: icon.text
+        property alias unicode: text
-        FontLoader { id: iconFont; source: "../../fonts/fontawesome-webfont.ttf"; }
         text: control.text
-        color: control.enabled ? "white" : "dimgray"
+        color: control.enabled ? hifi.colors.text : hifi.colors.disabledText
     }
 }

interface/resources/qml/styles/MenuButtonStyle.qml

@@ -1,22 +0,0 @@
-import QtQuick 2.4
-import QtQuick.Controls.Styles 1.3
-import "../controls"
-import "."
-        
-ButtonStyle {
-    HifiPalette { id: hifiPalette }
-    padding {
-        top: 2
-        left: 4
-        right: 4
-        bottom: 2
-    }
-    background: Item {}
-    label: Text {
-       renderType: Text.NativeRendering
-       verticalAlignment: Text.AlignVCenter
-       horizontalAlignment: Text.AlignHCenter
-       text: control.text
-       color: control.enabled ? "yellow" : "brown"
-    }
-}