Style modal dialog background and border

This commit is contained in:
David Rowe 2016-02-23 13:10:02 +13:00
parent d986a45497
commit f7654dce05
5 changed files with 26 additions and 7 deletions

View file

@ -77,6 +77,8 @@ Item {
readonly property real textPadding: 8
readonly property real tablePadding: 12
readonly property real tableRowHeight: largeScreen ? 26 : 23
readonly property real modalDialogMargin: 50
readonly property real modalDialogTitleHeight: 40 // DJRTODO: Use
}
Item {

View file

@ -18,7 +18,6 @@ Item {
id: frame
HifiConstants { id: hifi }
property alias window: frame.parent // Convenience accessor for the window
default property var decoration
readonly property int iconSize: 22

View file

@ -14,11 +14,29 @@ import "."
import "../controls"
Frame {
id: frame
Item {
anchors.fill: parent
id: modalFrame
anchors.fill: parent
anchors.margins: 0
readonly property bool hasTitle: window.title != ""
Rectangle {
anchors {
topMargin: -hifi.dimensions.modalDialogMargin - (modalFrame.hasTitle ? hifi.dimensions.modalDialogTitleHeight : 0)
leftMargin: -hifi.dimensions.modalDialogMargin
rightMargin: -hifi.dimensions.modalDialogMargin
bottomMargin: -hifi.dimensions.modalDialogMargin
fill: parent
}
border {
width: hifi.dimensions.borderWidth
color: hifi.colors.lightGrayText80
}
radius: hifi.dimensions.borderRadius
color: hifi.colors.faintGray
}
Rectangle {
id: background
anchors.fill: parent

View file

@ -13,7 +13,7 @@ import QtQuick 2.5
import "."
Window {
id: root
id: window
anchors.centerIn: parent
modality: Qt.ApplicationModal
destroyOnCloseButton: true

View file

@ -133,12 +133,13 @@ Fadable {
anchors.fill: parent
anchors.rightMargin: parent.isScrolling ? 11 : 0
color: hifi.colors.baseGray
visible: modality != Qt.ApplicationModal
}
LinearGradient {
// FIXME: Alpha gradients display as fuschia under QtQuick 2.5 on OSX.
// Check again when have a later version of QtQuick.
visible: Qt.platform.os != "osx"
visible: modality != Qt.ApplicationModal && Qt.platform.os != "osx"
anchors.top: contentBackground.bottom
anchors.left: contentBackground.left
width: contentBackground.width - 1
@ -201,7 +202,6 @@ Fadable {
}
}
}
children: [ swallower, frame, pane, activator ]
Component.onCompleted: { raise(); setDefaultFocus(); }