From 31930e879aa1621c935a81b2306724894564c3ac Mon Sep 17 00:00:00 2001 From: David Rowe Date: Sun, 14 Feb 2016 21:01:23 +1300 Subject: [PATCH] Style content background, size frame, and position frame elements --- .../qml/hifi/dialogs/RunningScripts.qml | 6 ++-- .../qml/windows-uit/DefaultFrame.qml | 30 ++++++++++++++----- interface/resources/qml/windows-uit/Frame.qml | 29 ++++++++++-------- .../resources/qml/windows-uit/Window.qml | 5 ++-- 4 files changed, 46 insertions(+), 24 deletions(-) diff --git a/interface/resources/qml/hifi/dialogs/RunningScripts.qml b/interface/resources/qml/hifi/dialogs/RunningScripts.qml index 01f21f2c2a..d03d9a15c0 100644 --- a/interface/resources/qml/hifi/dialogs/RunningScripts.qml +++ b/interface/resources/qml/hifi/dialogs/RunningScripts.qml @@ -13,7 +13,7 @@ import QtQuick.Controls 1.4 import QtQuick.Dialogs 1.2 as OriginalDialogs import Qt.labs.settings 1.0 -import "../../styles-uit" as Hifi +import "../../styles-uit" import "../../controls-uit" as HifiControls import "../../windows-uit" @@ -26,6 +26,8 @@ Window { x: 40; y: 40 implicitWidth: 384; implicitHeight: 640 + HifiConstants { id: hifi } + property var scripts: ScriptDiscoveryService; property var scriptsModel: scripts.scriptsModelFilter property var runningScriptsModel: ListModel { } @@ -77,7 +79,7 @@ Window { } Rectangle { - color: "white" + color: hifi.colors.baseGray anchors.fill: parent Item { diff --git a/interface/resources/qml/windows-uit/DefaultFrame.qml b/interface/resources/qml/windows-uit/DefaultFrame.qml index 652af878a8..81b2dd2cde 100644 --- a/interface/resources/qml/windows-uit/DefaultFrame.qml +++ b/interface/resources/qml/windows-uit/DefaultFrame.qml @@ -16,15 +16,17 @@ import "../controls-uit" import "../styles-uit" Frame { - id: frame HifiConstants { id: hifi } - property bool wideTopMargin: (window && (window.closable || window.title)); - Rectangle { // Dialog frame id: frameContent - anchors { margins: -iconSize; topMargin: -iconSize * (wideTopMargin ? 2 : 1); } + anchors { + topMargin: -frameMarginTop + leftMargin: -frameMarginLeft + rightMargin: -frameMarginRight + bottomMargin: -frameMarginBottom + } anchors.fill: parent color: hifi.colors.baseGrayHighlight40 border { @@ -41,7 +43,12 @@ Frame { Row { id: controlsRow - anchors { right: parent.right; top: parent.top; rightMargin: iconSize; topMargin: iconSize / 2; } + anchors { + right: parent.right; + top: parent.top; + topMargin: frameMargin + 1 // Move down a little to visually align with the title + rightMargin: frameMarginRight; + } spacing: iconSize / 4 HiFiGlyphs { @@ -49,7 +56,7 @@ Frame { visible: false 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 + size: iconSize MouseArea { id: pinClickArea anchors.fill: parent @@ -64,7 +71,7 @@ Frame { visible: window ? window.closable : false text: closeClickArea.containsPress ? "x" : "w" color: closeClickArea.containsMouse ? hifi.colors.redHighlight : hifi.colors.white - size: frame.iconSize + size: iconSize MouseArea { id: closeClickArea anchors.fill: parent @@ -77,7 +84,14 @@ Frame { RalewayRegular { // Title id: titleText - anchors { left: parent.left; leftMargin: iconSize; right: controlsRow.left; rightMargin: iconSize; top: parent.top; topMargin: iconSize / 2; } // DJRTODO + anchors { + left: parent.left + leftMargin: frameMarginLeft + window.contentMarginLeft + right: controlsRow.left + rightMargin: iconSize + top: parent.top + topMargin: frameMargin + } text: window ? window.title : "" color: hifi.colors.white size: 16 diff --git a/interface/resources/qml/windows-uit/Frame.qml b/interface/resources/qml/windows-uit/Frame.qml index af0fbc29da..aad22faf86 100644 --- a/interface/resources/qml/windows-uit/Frame.qml +++ b/interface/resources/qml/windows-uit/Frame.qml @@ -20,10 +20,15 @@ Item { // beyond the window via negative margin sizes anchors.fill: parent - // Convenience accessor for the window - property alias window: frame.parent - readonly property int iconSize: 24 - default property var decoration; + property alias window: frame.parent // Convenience accessor for the window + default property var decoration + + readonly property int iconSize: 22 + readonly property int frameMargin: 9 + readonly property int frameMarginLeft: frameMargin + readonly property int frameMarginRight: frameMargin + readonly property int frameMarginTop: 2 * frameMargin + iconSize + readonly property int frameMarginBottom: iconSize + 2 children: [ decoration, @@ -48,10 +53,10 @@ Item { Rectangle { id: sizeOutline - x: -iconSize - y: -(wideTopMargin ? 2 : 1) * iconSize - width: window ? window.width + 2 * iconSize : 0 - height: window ? window.height + (1 + (wideTopMargin ? 2 : 1)) * iconSize : 0 + x: -frameMarginLeft + y: -frameMarginTop + width: window ? window.width + frameMarginLeft + frameMarginRight : 0 + height: window ? window.height + frameMarginTop + frameMarginBottom : 0 color: hifi.colors.baseGrayHighlight15 border.width: 3 border.color: hifi.colors.white50 @@ -66,7 +71,7 @@ Item { height: iconSize enabled: window ? window.resizable : false hoverEnabled: true - x: window ? window.width : 0 + x: window ? window.width + frameMarginRight - iconSize : 0 y: window ? window.height : 0 property vector2d pressOrigin property vector2d sizeOrigin @@ -97,10 +102,10 @@ Item { } HiFiGlyphs { visible: sizeDrag.enabled - anchors { centerIn: parent } - horizontalAlignment: Text.AlignHCenter + x: -5 // Move a little to visually align + y: -3 // "" text: "A" - size: iconSize / 3 * 2 + size: iconSize + 4 color: sizeDrag.containsMouse || !(window && window.focus) ? hifi.colors.white : hifi.colors.lightGray } } diff --git a/interface/resources/qml/windows-uit/Window.qml b/interface/resources/qml/windows-uit/Window.qml index fda82f1313..dc74d47072 100644 --- a/interface/resources/qml/windows-uit/Window.qml +++ b/interface/resources/qml/windows-uit/Window.qml @@ -49,6 +49,9 @@ Fadable { // property bool pinnable: false // property bool pinned: false property bool resizable: false + + readonly property int contentMarginLeft: 12 + readonly property int contentMarginRight: 12 property vector2d minSize: Qt.vector2d(100, 100) property vector2d maxSize: Qt.vector2d(1280, 720) @@ -74,8 +77,6 @@ Fadable { } } } - - onXChanged: rectifier.begin(); onYChanged: rectifier.begin();