First pass at restyling dialog frame

"Pin" button is implemented but disabled (as it was before).

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

@@ -9,8 +9,43 @@
 //
 
 import QtQuick 2.5
+import QtQuick.Window 2.2
 
 Item {
+    readonly property alias colors: colors
+    readonly property alias dimensions: dimensions
+    readonly property alias effects: effects
+
+    Item {
+        id: colors
+        readonly property color white: "#ffffff"
+        readonly property color baseGray: "#404040"
+        readonly property color darkGray: "#121212"
+        readonly property color baseGrayShadow: "#252525"
+        readonly property color baseGrayHighlight: "#575757"
+        readonly property color lightGray: "#6a6a6a"
+        readonly property color lightGrayText: "#afafaf"
+        readonly property color faintGray: "#e3e3e3"
+        readonly property color primaryHighlight: "#00b4ef"
+        readonly property color blueHighlight: "#00b4ef"
+        readonly property color blueAccent: "#1080b8"
+        readonly property color redHighlight: "#e2334d"
+        readonly property color redAccent: "#b70a37"
+        readonly property color greenHighlight: "#1ac567"
+        readonly property color greenShadow: "#2c8e72"
+
+        readonly property color baseGrayHighlight40: "#66575757"
+        readonly property color faintGray50: "#80e3e3e3"
+        readonly property color baseGrayShadow60: "#99252525"
+    }
+
+    Item {
+        id: dimensions
+        readonly property real borderRadius: Screen.width >= 1920 && Screen.height >= 1080 ? 7.5 : 5.0
+        readonly property real borderWidth: Screen.width >= 1920 && Screen.height >= 1080 ? 2 : 1
+    }
+
+    /*
     SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }
     readonly property alias colors: colors
     readonly property alias layout: layout
@@ -62,6 +97,7 @@ Item {
         readonly property int borderWidth: 5
         readonly property int borderRadius: borderWidth * 2
     }
+    */
 
     QtObject {
         id: effects

interface/resources/qml/windows-uit/DefaultFrame.qml

@@ -9,20 +9,28 @@
 //
 
 import QtQuick 2.5
+import QtGraphicalEffects 1.0
 
 import "."
 import "../controls-uit"
+import "../styles-uit"
 
 Frame {
     id: frame
+    HifiConstants { id: hifi }
 
     property bool wideTopMargin: (window && (window.closable || window.title));
 
     Rectangle {
+        // Dialog frame
         anchors { margins: -iconSize; topMargin: -iconSize * (wideTopMargin ? 2 : 1); }
-        anchors.fill: parent;
-        color: "#7f7f7f7f";
-        radius: 3;
+        anchors.fill: parent
+        color: hifi.colors.baseGrayHighlight40
+        border {
+            width: hifi.dimensions.borderWidth
+            color: hifi.colors.faintGray50
+        }
+        radius: hifi.dimensions.borderRadius
 
         // Allow dragging of the window
         MouseArea {
@@ -34,25 +42,27 @@ Frame {
             id: controlsRow
             anchors { right: parent.right; top: parent.top; rightMargin: iconSize; topMargin: iconSize / 2; }
             spacing: iconSize / 4
-            FontAwesome {
+
+            HiFiGlyphs {
+                // "Pin" button
                 visible: false
-                text: "\uf08d"
-                style: Text.Outline; styleColor: "white"
+                text: (frame.pinned && !pinClickArea.containsMouse) || (!frame.pinned && pinClickArea.containsMouse) ? "z" : "y"
+                color: pinClickArea.containsMouse && !pinClickArea.pressed ? hifi.colors.redHighlight : hifi.colors.white
                 size: frame.iconSize
-                rotation: !frame.parent ? 90 : frame.parent.pinned ? 0 : 90
-                color: frame.pinned ? "red" : "black"
                 MouseArea {
+                    id: pinClickArea
                     anchors.fill: parent
+                    hoverEnabled: true
                     propagateComposedEvents: true
                     onClicked: { frame.pin(); mouse.accepted = false; }
                 }
             }
-            FontAwesome {
+
+            HiFiGlyphs {
+                // "Close" button
                 visible: window ? window.closable : false
-                text: closeClickArea.containsMouse ? "\uf057" : "\uf05c"
-                style: Text.Outline;
-                styleColor: "white"
-                color: closeClickArea.containsMouse ? "red" : "black"
+                text: closeClickArea.containsPress ? "x" : "w"
+                color: closeClickArea.containsMouse ? hifi.colors.redHighlight : hifi.colors.white
                 size: frame.iconSize
                 MouseArea {
                     id: closeClickArea
@@ -63,17 +73,25 @@ Frame {
             }
         }
 
-        Text {
+        RalewayRegular {
+            // Title
             id: titleText
-            anchors { left: parent.left; leftMargin: iconSize; right: controlsRow.left;  rightMargin: iconSize; top: parent.top; topMargin: iconSize / 2; }
+            anchors { left: parent.left; leftMargin: iconSize; right: controlsRow.left;  rightMargin: iconSize; top: parent.top; topMargin: iconSize / 2; }  // DJRTODO
             text: window ? window.title : ""
-            elide: Text.ElideRight
-            font.bold: true
-            color: (window && window.focus) ? "white" : "gray"
-            style: Text.Outline;
-            styleColor: "black"
+            color: hifi.colors.white
+            size: 16
+        }
+
+        DropShadow {
+            source: titleText
+            anchors.fill: titleText
+            horizontalOffset: 1
+            verticalOffset: 1
+            samples: 2
+            color: hifi.colors.baseGrayShadow60
+            visible: (window && window.focus)
+            cached: true
         }
     }
-
 }
 

interface/resources/qml/windows-uit/Frame.qml

@@ -11,6 +11,7 @@
 import QtQuick 2.5
 
 import "../controls-uit"
+import "../styles-uit"
 import "../js/Utils.js" as Utils
 
 Item {
@@ -56,17 +57,19 @@ Item {
     }
 
     MouseArea {
+        // Resize handle
         id: sizeDrag
         width: iconSize
         height: iconSize
         enabled: window ? window.resizable : false
+        hoverEnabled: true
         x: window ? window.width : 0
         y: window ? window.height : 0
         property vector2d pressOrigin
         property vector2d sizeOrigin
         property bool hid: false
         onPressed: {
-            console.log("Pressed on size")
+            //console.log("Pressed on size")
             pressOrigin = Qt.vector2d(mouseX, mouseY)
             sizeOrigin = Qt.vector2d(window.content.width, window.content.height)
             hid = false;
@@ -87,14 +90,13 @@ Item {
                 frame.deltaSize(delta.x, delta.y)
             }
         }
-        FontAwesome {
+        HiFiGlyphs {
             visible: sizeDrag.enabled
-            rotation: -45
             anchors { centerIn: parent }
             horizontalAlignment: Text.AlignHCenter
-            text: "\uf07d"
+            text: "A"
             size: iconSize / 3 * 2
-            style: Text.Outline; styleColor: "white"
+            color: sizeDrag.containsMouse ? hifi.colors.white : hifi.colors.lightGray
         }
     }
 

tests/ui/qml/main.qml

@@ -4,7 +4,8 @@ import QtQuick.Dialogs 1.2 as OriginalDialogs
 import Qt.labs.settings 1.0
 
 import "../../../interface/resources/qml"
-import "../../../interface/resources/qml/windows"
+//import "../../../interface/resources/qml/windows"
+import "../../../interface/resources/qml/windows-uit"
 import "../../../interface/resources/qml/dialogs"
 import "../../../interface/resources/qml/hifi"
 import "../../../interface/resources/qml/hifi/dialogs"
@@ -20,7 +21,7 @@ ApplicationWindow {
         id: desktop
         anchors.fill: parent
         rootMenu: StubMenu { id: rootMenu }
-        Component.onCompleted: offscreenWindow = appWindow
+        //Component.onCompleted: offscreenWindow = appWindow
 
         MouseArea {
             anchors.fill: parent