diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml index 055f06d60b..7de760bfd1 100644 --- a/interface/resources/qml/styles-uit/HifiConstants.qml +++ b/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 diff --git a/interface/resources/qml/windows-uit/DefaultFrame.qml b/interface/resources/qml/windows-uit/DefaultFrame.qml index df632236a2..34db27c663 100644 --- a/interface/resources/qml/windows-uit/DefaultFrame.qml +++ b/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 } } - } diff --git a/interface/resources/qml/windows-uit/Frame.qml b/interface/resources/qml/windows-uit/Frame.qml index 9654143cd8..7c946f41c7 100644 --- a/interface/resources/qml/windows-uit/Frame.qml +++ b/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 } } diff --git a/tests/ui/qml/main.qml b/tests/ui/qml/main.qml index 4a04e4a93a..ef27ff3633 100644 --- a/tests/ui/qml/main.qml +++ b/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