Style content background, size frame, and position frame elements

This commit is contained in:
David Rowe 2016-02-14 21:01:23 +13:00
parent 9479da616f
commit 31930e879a
4 changed files with 46 additions and 24 deletions

View file

@ -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 {

View file

@ -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

View file

@ -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
}
}

View file

@ -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();