Cleaning up qml

interface/resources/qml/AddressBarDialog.qml

@@ -1,10 +1,8 @@
 import Hifi 1.0
 import QtQuick 2.3
-import QtQuick.Controls 1.2
+import "controls"
-import QtQuick.Window 2.2
-import QtQuick.Controls.Styles 1.3
 
-CustomDialog {
+Dialog {
     title: "Go to..."
     objectName: "AddressBarDialog"
     height: 128
@@ -36,14 +34,14 @@ CustomDialog {
         anchors.margins: parent.margins
         anchors.topMargin: parent.topMargin
 
-        CustomBorder {
+        Border {
             height: 64
             anchors.left: parent.left
             anchors.leftMargin: 0
             anchors.right: goButton.left
             anchors.rightMargin: 8
             anchors.verticalCenter: parent.verticalCenter
-            CustomTextInput {
+            TextInput {
                 id: addressLine
                 anchors.fill: parent
                 helperText: "domain, location, @user, /x,y,z"

interface/resources/qml/Browser.qml

@@ -1,12 +1,10 @@
 import QtQuick 2.3
 import QtQuick.Controls 1.2
-import QtQuick.Window 2.2
-import QtQuick.Dialogs 1.2
-import QtQuick.Controls.Styles 1.3
 import QtWebKit 3.0
+import "controls"
 
-CustomDialog {
+Dialog {
-    title: "Test Dlg"
+    title: "Browser Window"
     id: testDialog
     objectName: "Browser"
     width: 1280
@@ -18,7 +16,6 @@ CustomDialog {
         anchors.fill: parent
         anchors.margins: parent.margins
         anchors.topMargin: parent.topMargin
-        
  
         ScrollView {
             anchors.fill: parent
@@ -30,16 +27,4 @@ CustomDialog {
         }        
         
      }
-
-
 }
-
-
-/*
-
-// This is the behavior, and it applies a NumberAnimation to any attempt to set the x property
-
-MouseArea {
-    anchors.fill: parent
-}
-*/

interface/resources/qml/CustomButton.qml

@@ -1,27 +0,0 @@
-import QtQuick 2.3
-import QtQuick.Controls 1.3
-import QtQuick.Window 2.2
-import QtQuick.Controls.Styles 1.3
-
-Button {
-    SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
-    text: "Text"
-    style: ButtonStyle {
-    	padding {
-            top: 8
-            left: 12
-            right: 12
-            bottom: 8
-    	}
-        background:  CustomBorder {
-            anchors.fill: parent
-        }
-        label: CustomText {
-           renderType: Text.NativeRendering
-           verticalAlignment: Text.AlignVCenter
-           horizontalAlignment: Text.AlignHCenter
-           text: control.text
-           color: control.enabled ? myPalette.text : myPalette.dark
-        }
-    }
-}

interface/resources/qml/CustomTextArea.qml

@@ -1,10 +0,0 @@
-import QtQuick 2.3
-import QtQuick.Controls 1.2
-
-TextArea {
-    font.family: "Helvetica"
-    font.pointSize: 18
-    backgroundVisible: false
-    readOnly: true
-}
-

interface/resources/qml/Icon.qml

@@ -1,8 +0,0 @@
-import QtQuick 1.0
-
-Image {
-id: icon
-width: 64
-height: 64
-source: "file.svg"
-}

interface/resources/qml/LoginDialog.qml

@@ -1,12 +1,11 @@
 import Hifi 1.0
 import QtQuick 2.3
-import QtQuick.Controls 1.2
-import QtQuick.Window 2.2
 import QtQuick.Controls.Styles 1.3
-import "hifiConstants.js" as HifiConstants
+import "controls"
 
-CustomDialog {
+Dialog {
     title: "Login"
+    HifiPalette { id: hifiPalette }
     SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
     objectName: "LoginDialog"
     height: 512
@@ -50,11 +49,11 @@ CustomDialog {
                 source: "../images/hifi-logo.svg"
             }
 
-            CustomBorder {
+            Border {
                 width: 304
                 height: 64
                 anchors.horizontalCenter: parent.horizontalCenter
-                CustomTextInput {
+                TextInput {
                     id: username
                     anchors.fill: parent
                     helperText: "Username or Email"
@@ -67,11 +66,11 @@ CustomDialog {
                 }
             }
 
-            CustomBorder {
+            Border {
                 width: 304
                 height: 64
                 anchors.horizontalCenter: parent.horizontalCenter
-                CustomTextInput {
+                TextInput {
                     id: password
                     anchors.fill: parent
                     echoMode: TextInput.Password
@@ -94,7 +93,7 @@ CustomDialog {
                 }
             }
 
-            CustomText {
+            Text {
                 anchors.horizontalCenter: parent.horizontalCenter
                 textFormat: Text.StyledText
                 width: parent.width
@@ -117,7 +116,7 @@ CustomDialog {
                 width: 192
                 height: 64
                 anchors.horizontalCenter: parent.horizontalCenter
-                color: HifiConstants.color
+                color: hifiPalette.hifiBlue
                 border.width: 0
                 radius: 10
 
@@ -142,7 +141,7 @@ CustomDialog {
                         width: 32
                         source: "../images/login.svg"
                     }
-                    CustomText {
+                    Text {
                         text: "Login"
                         color: "white"
                         width: 64
@@ -152,7 +151,7 @@ CustomDialog {
 
             }
 
-            CustomText {
+            Text {
                 width: parent.width
                 height: 24
                 horizontalAlignment: Text.AlignHCenter
@@ -160,7 +159,7 @@ CustomDialog {
                 text:"Create Account"
                 font.pointSize: 12
                 font.bold: true
-                color: HifiConstants.color
+                color: hifiPalette.hifiBlue
 
                 MouseArea {
                     anchors.fill: parent
@@ -170,14 +169,14 @@ CustomDialog {
                 }
             }
 
-            CustomText {
+            Text {
                 width: parent.width
                 height: 24
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
                 font.pointSize: 12
                 text: "Recover Password"
-                color: HifiConstants.color
+                color: hifiPalette.hifiBlue
 
                 MouseArea {
                     anchors.fill: parent

interface/resources/qml/MarketplaceDialog.qml

@@ -1,12 +1,11 @@
 import Hifi 1.0
 import QtQuick 2.3
 import QtQuick.Controls 1.2
-import QtQuick.Window 2.2
-import QtQuick.Dialogs 1.2
 import QtQuick.Controls.Styles 1.3
 import QtWebKit 3.0
+import "controls"
 
-CustomDialog {
+Dialog {
     title: "Test Dlg"
     id: testDialog
     objectName: "Browser"

interface/resources/qml/MenuTest.qml

@@ -0,0 +1,12 @@
+import QtQuick 2.4
+import QtQuick.Controls 1.3
+import QtQuick.Controls.Styles 1.3
+
+Item {
+	anchors.fill: parent
+
+	Rectangle {
+		anchors.fill: parent
+		color: "red"
+	}
+}

interface/resources/qml/MessageDialog.qml

@@ -43,8 +43,9 @@ import QtQuick 2.2
 import QtQuick.Controls 1.2
 import QtQuick.Window 2.1
 import QtQuick.Dialogs 1.2
+import "controls"
 
-CustomDialog {
+Dialog {
     id: root
     property real spacing: 8
     property real outerSpacing: 16
@@ -179,115 +180,115 @@ CustomDialog {
                 spacing: root.spacing
                 layoutDirection: Qt.RightToLeft
                 width: parent.width
-                CustomButton {
+                Button {
                     id: okButton
                     text: qsTr("OK")
                     onClicked: content.click(StandardButton.Ok)
                     visible: content.standardButtons & StandardButton.Ok
                 }
-                CustomButton {
+                Button {
                     id: openButton
                     text: qsTr("Open")
                     onClicked: content.click(StandardButton.Open)
                     visible: content.standardButtons & StandardButton.Open
                 }
-                CustomButton {
+                Button {
                     id: saveButton
                     text: qsTr("Save")
                     onClicked: content.click(StandardButton.Save)
                     visible: content.standardButtons & StandardButton.Save
                 }
-                CustomButton {
+                Button {
                     id: saveAllButton
                     text: qsTr("Save All")
                     onClicked: content.click(StandardButton.SaveAll)
                     visible: content.standardButtons & StandardButton.SaveAll
                 }
-                CustomButton {
+                Button {
                     id: retryButton
                     text: qsTr("Retry")
                     onClicked: content.click(StandardButton.Retry)
                     visible: content.standardButtons & StandardButton.Retry
                 }
-                CustomButton {
+                Button {
                     id: ignoreButton
                     text: qsTr("Ignore")
                     onClicked: content.click(StandardButton.Ignore)
                     visible: content.standardButtons & StandardButton.Ignore
                 }
-                CustomButton {
+                Button {
                     id: applyButton
                     text: qsTr("Apply")
                     onClicked: content.click(StandardButton.Apply)
                     visible: content.standardButtons & StandardButton.Apply
                 }
-                CustomButton {
+                Button {
                     id: yesButton
                     text: qsTr("Yes")
                     onClicked: content.click(StandardButton.Yes)
                     visible: content.standardButtons & StandardButton.Yes
                 }
-                CustomButton {
+                Button {
                     id: yesAllButton
                     text: qsTr("Yes to All")
                     onClicked: content.click(StandardButton.YesToAll)
                     visible: content.standardButtons & StandardButton.YesToAll
                 }
-                CustomButton {
+                Button {
                     id: noButton
                     text: qsTr("No")
                     onClicked: content.click(StandardButton.No)
                     visible: content.standardButtons & StandardButton.No
                 }
-                CustomButton {
+                Button {
                     id: noAllButton
                     text: qsTr("No to All")
                     onClicked: content.click(StandardButton.NoToAll)
                     visible: content.standardButtons & StandardButton.NoToAll
                 }
-                CustomButton {
+                Button {
                     id: discardButton
                     text: qsTr("Discard")
                     onClicked: content.click(StandardButton.Discard)
                     visible: content.standardButtons & StandardButton.Discard
                 }
-                CustomButton {
+                Button {
                     id: resetButton
                     text: qsTr("Reset")
                     onClicked: content.click(StandardButton.Reset)
                     visible: content.standardButtons & StandardButton.Reset
                 }
-                CustomButton {
+                Button {
                     id: restoreDefaultsButton
                     text: qsTr("Restore Defaults")
                     onClicked: content.click(StandardButton.RestoreDefaults)
                     visible: content.standardButtons & StandardButton.RestoreDefaults
                 }
-                CustomButton {
+                Button {
                     id: cancelButton
                     text: qsTr("Cancel")
                     onClicked: content.click(StandardButton.Cancel)
                     visible: content.standardButtons & StandardButton.Cancel
                 }
-                CustomButton {
+                Button {
                     id: abortButton
                     text: qsTr("Abort")
                     onClicked: content.click(StandardButton.Abort)
                     visible: content.standardButtons & StandardButton.Abort
                 }
-                CustomButton {
+                Button {
                     id: closeButton
                     text: qsTr("Close")
                     onClicked: content.click(StandardButton.Close)
                     visible: content.standardButtons & StandardButton.Close
                 }
-                CustomButton {
+                Button {
                     id: moreButton
                     text: qsTr("Show Details...")
                     onClicked: content.state = (content.state === "" ? "expanded" : "")
                     visible: content.detailedText.length > 0
                 }
-                CustomButton {
+                Button {
                     id: helpButton
                     text: qsTr("Help")
                     onClicked: content.click(StandardButton.Help)

interface/resources/qml/Palettes.qml

@@ -1,8 +1,5 @@
 import QtQuick 2.3
 import QtQuick.Controls 1.2
-import QtQuick.Window 2.2
-import QtQuick.Dialogs 1.2
-import QtQuick.Controls.Styles 1.3
 
 Rectangle {
     color: "teal"
@@ -150,87 +147,4 @@ Rectangle {
             Rectangle { height: parent.height; width: 16; color: spd.highlightedText}
         }
     }
-
-
-/*
-    CustomDialog {
-        title: "Test Dlg"
-        anchors.fill: parent
-    
-        Rectangle {
-            property int d: 100
-            id: square
-            objectName: "testRect"
-            width: d
-            height: d
-            anchors.centerIn: parent
-            color: "red"
-            NumberAnimation on rotation { from: 0; to: 360; duration: 2000; loops: Animation.Infinite; }
-        }
-    
-    
-        CustomTextEdit {
-            anchors.left: parent.left
-            anchors.leftMargin: 12
-            anchors.right: parent.right
-            anchors.rightMargin: 12
-            clip: true
-            text: "test edit"
-            anchors.top: parent.top
-            anchors.topMargin: parent.titleSize + 12
-        }
-    
-        CustomButton {
-            x: 128
-            y: 192
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 12
-            anchors.right: parent.right
-            anchors.rightMargin: 12
-            onClicked: {
-                console.log("Click");
-                if (square.visible) {
-                    square.visible = false
-                } else {
-                    square.visible = true
-                }
-            }
-        }
-    
-        CustomButton {
-            id: customButton2
-            y: 192
-            text: "Close"
-            anchors.left: parent.left
-            anchors.leftMargin: 12
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 12
-            onClicked: {
-                onClicked: testDialog.x == 0 ? testDialog.x = 200 : testDialog.x = 0
-            }
-        }
-        
-        Keys.onPressed: {
-            console.log("Key " + event.key);
-            switch (event.key) {
-            case Qt.Key_Q:
-                if (Qt.ControlModifier == event.modifiers) {
-                    event.accepted = true;
-                    break;
-                }
-            }
-        }
-    }
-*/
-
 }
-
-
-/*
-
-// This is the behavior, and it applies a NumberAnimation to any attempt to set the x property
-
-MouseArea {
-    anchors.fill: parent
-}
-*/

interface/resources/qml/Root.qml

@@ -1,9 +1,10 @@
 import Hifi 1.0
 import QtQuick 2.3
 
+// This is our primary 'window' object to which all dialogs and controls will 
+// be childed. 
 Root {
     id: root
-    width: 1280
+    anchors.fill: parent
-    height: 720
 }
 

interface/resources/qml/TestDialog.qml

@@ -1,10 +1,9 @@
 import QtQuick 2.3
 import QtQuick.Controls 1.2
-import QtQuick.Window 2.2
-import QtQuick.Dialogs 1.2
 import QtQuick.Controls.Styles 1.3
+import "controls"
 
-CustomDialog {
+Dialog {
     title: "Test Dialog"
     id: testDialog
     objectName: "TestDialog"
@@ -37,7 +36,7 @@ CustomDialog {
         }
     
     
-        CustomTextEdit {
+        TextEdit {
             id: edit
             anchors.left: parent.left
             anchors.leftMargin: 12
@@ -49,7 +48,7 @@ CustomDialog {
             anchors.topMargin: 12
         }
 
-        CustomButton {
+        Button {
             x: 128
             y: 192
             text: "Test"
@@ -68,7 +67,7 @@ CustomDialog {
             }
         }
     
-        CustomButton {
+        Button {
             id: customButton2
             y: 192
             text: "Move"
@@ -92,15 +91,4 @@ CustomDialog {
             }
         }
     }
-
 }
-
-
-/*
-
-// This is the behavior, and it applies a NumberAnimation to any attempt to set the x property
-
-MouseArea {
-    anchors.fill: parent
-}
-*/

interface/resources/qml/TestRoot.qml

@@ -1,12 +1,26 @@
 import Hifi 1.0
 import QtQuick 2.3
+// Import local folder last so that our own control customizations override 
+// the built in ones
+import "controls"
 
 Root {
     id: root
-    width: 1280
+    anchors.fill: parent
-    height: 720
 
-    CustomButton {
+    onWidthChanged: {
+		console.log("Root width: " + width)
+	}
+	onHeightChanged: {
+		console.log("Root height: " + height)
+	}
+    
+    Component.onCompleted: {
+    	console.log("Completed root")
+    	root.forceActiveFocus()
+    }
+
+    Button {
         id: messageBox
         anchors.right: createDialog.left
         anchors.rightMargin: 24
@@ -20,7 +34,7 @@ Root {
         }
     }
 
-    CustomButton {
+    Button {
         id: createDialog
         anchors.right: parent.right
         anchors.rightMargin: 24
@@ -28,8 +42,12 @@ Root {
         anchors.bottomMargin: 24
         text: "Create"
         onClicked: {
-            root.loadChild("TestDialog.qml");
+            root.loadChild("MenuTest.qml");
         }
     }
+
+    Keys.onPressed: {
+    	console.log(event.key);
+    }
 }
 

interface/resources/qml/controls/Button.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.3
+import QtQuick.Controls 1.3 as Original
+import QtQuick.Controls.Styles 1.3
+import "."
+import "../styles"
+
+Original.Button {
+    style: ButtonStyle {
+    }
+}

interface/resources/qml/controls/Dialog.qml

@@ -1,40 +1,78 @@
 import QtQuick 2.3
 import QtQuick.Controls 1.2
-import QtQuick.Window 2.2
+import "."
-import QtQuick.Dialogs 1.2
+import "../styles"
-import QtQuick.Controls.Styles 1.3
-import "hifiConstants.js" as HifiConstants
 
+/*
+ * FIXME Need to create a client property here so that objects can be
+ * placed in it without having to think about positioning within the outer 
+ * window.
+ * 
+ * Examine the QML ApplicationWindow.qml source for how it does this
+ * 
+ */
 Item {
-    SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
+    id: root
-    id: dialog
+
-    width: 256
+    HifiPalette { id: hifiPalette }
-    height: 256
+    SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }
-    scale: 0.0
+
-    enabled: false
     property int animationDuration: 400
     property bool destroyOnInvisible: false
     property bool destroyOnCloseButton: true
     property bool resizable: false
     property int minX: 256
     property int minY: 256
-    clip: true
+    property int topMargin: root.height - clientBorder.height + 8
+    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
+    enabled: false
+    scale: 0.0
+
+    /*
+     * Support for animating the dialog in and out. 
+     */
+    
+    // The offscreen UI will enable an object, rather than manipulating it's 
+    // 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.  
     onEnabledChanged: {
         scale = enabled ? 1.0 : 0.0
     }
-    
+
+    // The actual animator
+    Behavior on scale {
+        NumberAnimation {
+            duration: root.animationDuration
+            easing.type: Easing.InOutBounce
+        }
+    }
+
+    // We remove any load the dialog might have on the QML by toggling it's 
+    // 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
     onVisibleChanged: {
         if (!visible && destroyOnInvisible) {
-            console.log("Destroying closed component");
             destroy();
         }
     }
 
+    // our close function performs the same way as the OffscreenUI class:
+    // don't do anything but manipulate the enabled flag and let the other 
+    // mechanisms decide if the window should be destoryed after the close
+    // animation completes
     function close() {
         if (destroyOnCloseButton) {
             destroyOnInvisible = true
@@ -42,102 +80,14 @@ Item {
         enabled = false;
     }
     
+    /*
+     * Resize support
+     */
     function deltaSize(dx, dy) {
         width = Math.max(width + dx, minX) 
         height = Math.max(height + dy, minY) 
     }
 
-    Behavior on scale {
-        NumberAnimation {
-            //This specifies how long the animation takes
-            duration: dialog.animationDuration
-            //This selects an easing curve to interpolate with, the default is Easing.Linear
-            easing.type: Easing.InOutBounce
-        }
-    }
-
-    property int topMargin: dialog.height - clientBorder.height + 8
-    property int margins: 8
-    property string title
-    property int titleSize: titleBorder.height + 12
-    property string frameColor: HifiConstants.color
-    property string backgroundColor: myPalette.window
-    property string headerBackgroundColor: myPalette.dark
-
-    CustomBorder {
-        id: windowBorder
-        anchors.fill: parent
-        border.color: dialog.frameColor
-        color: dialog.backgroundColor
-
-        CustomBorder {
-            id: titleBorder
-            height: 48
-            anchors.right: parent.right
-            anchors.rightMargin: 0
-            anchors.left: parent.left
-            anchors.leftMargin: 0
-            border.color: dialog.frameColor
-            color: dialog.headerBackgroundColor
-
-            CustomText {
-                id: titleText
-                color: "white"
-                text: dialog.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: dialog
-                    minimumX: 0
-                    minimumY: 0
-                    maximumX: dialog.parent ? dialog.parent.width - dialog.width : 0
-                    maximumY: dialog.parent ? dialog.parent.height - dialog.height : 0
-                }
-            }
-            Image {
-                id: closeButton
-                x: 360
-                height: 16
-                anchors.verticalCenter: parent.verticalCenter
-                width: 16
-                anchors.right: parent.right
-                anchors.rightMargin: 12
-                source: "../styles/close.svg"
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: {
-                        dialog.close();
-                    }
-                }
-            }
-        } // header border
-
-        CustomBorder {
-            id: clientBorder
-            border.color: dialog.frameColor
-            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
-
     MouseArea {
         id: sizeDrag
         property int startX
@@ -152,11 +102,91 @@ Item {
             startY = mouseY
         }
         onPositionChanged: {
-            if (pressed && dialog.resizable) {
+            if (pressed && root.resizable) {
-                dialog.deltaSize((mouseX - startX), (mouseY - startY))
+                root.deltaSize((mouseX - startX), (mouseY - startY))
                 startX = mouseX
                 startY = mouseY
             }
         }
     }
+
+    /* 
+     * Window decorations, with a title bar and frames
+     */
+    Border {
+        id: windowBorder
+        anchors.fill: parent
+        border.color: root.frameColor
+        color: root.backgroundColor
+
+        Border {
+            id: titleBorder
+            height: 48
+            anchors.right: parent.right
+            anchors.rightMargin: 0
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+            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
+                anchors.right: parent.right
+                anchors.rightMargin: 12
+                source: "../../styles/close.svg"
+                MouseArea {
+                    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/MenuButton.qml

@@ -0,0 +1,9 @@
+import QtQuick 2.3
+import QtQuick.Controls 1.3 as Original
+import QtQuick.Controls.Styles 1.3
+import "../styles"
+
+Original.Button {
+    style: MenuButtonStyle {
+    }
+}

interface/resources/qml/controls/README.md

@@ -0,0 +1,2 @@
+These are our own custom controls with the same names as existing controls, but
+customized for readability / usability in VR.

interface/resources/qml/controls/Text.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.3
+import QtQuick 2.3 as Original
 
-TextEdit {
+Original.Text {
     font.family: "Helvetica"
     font.pointSize: 18
 }

interface/resources/qml/controls/TextArea.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.3
+import QtQuick 2.3 as Original
 
-Text {
+Original.TextArea {
     font.family: "Helvetica"
     font.pointSize: 18
 }

interface/resources/qml/controls/TextEdit.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.3 as Original
+
+Original.TextEdit {
+    font.family: "Helvetica"
+    font.pointSize: 18
+}
+

interface/resources/qml/controls/TextInput.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls 1.2
 
 TextInput {
     SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
-    property string helperText: ""
+    property string helperText
     font.family: "Helvetica"
     font.pointSize: 18
     width: 256
@@ -24,7 +24,7 @@ TextInput {
         id: helperText
         anchors.fill: parent
         font.pointSize: parent.font.pointSize
-        font.family: "Helvetica"
+        font.family: parent.font.family
         verticalAlignment: TextInput.AlignVCenter
         text: parent.helperText
         color: myPalette.dark

interface/resources/qml/hifiConstants.js

@@ -1,4 +0,0 @@
-var color = "#0e7077"
-var Colors = {
-    hifiBlue: "#0e7077"
-}

interface/resources/qml/styles/Border.qml

@@ -1,6 +1,5 @@
 import QtQuick 2.3
 
-
 Rectangle {
     SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
     property int margin: 5

interface/resources/qml/styles/ButtonStyle.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.4 as Original
+import QtQuick.Controls.Styles 1.3 as OriginalStyles
+import "."
+import "../controls"
+		
+OriginalStyles.ButtonStyle {
+	Original.SystemPalette { id: myPalette; colorGroup: Original.SystemPalette.Active }
+	padding {
+        top: 8
+        left: 12
+        right: 12
+        bottom: 8
+	}
+    background:  Border {
+        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
+    }
+}

interface/resources/qml/styles/HifiPalette.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.4
+
+QtObject {
+	property string hifiBlue: "#0e7077"
+}

interface/resources/qml/styles/IconButtonStyle.qml

@@ -0,0 +1,15 @@
+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/styles/MenuButtonStyle.qml

@@ -0,0 +1,24 @@
+import "../controls"
+import "."
+		
+ButtonStyle {
+    SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
+	padding {
+        top: 8
+        left: 12
+        right: 12
+        bottom: 8
+	}
+    background:  Border {
+        anchors.fill: parent
+        color: "#00000000"
+    	borderColor: "red"
+    }
+    label: Text {
+       renderType: Text.NativeRendering
+       verticalAlignment: Text.AlignVCenter
+       horizontalAlignment: Text.AlignHCenter
+       text: control.text
+       color: control.enabled ? myPalette.text : myPalette.dark
+    }
+}