qiurui
/
qtdeclarative
mirror of https://github.com/qt/qtdeclarative.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add QQuickDialog::title 

Dialog is incomplete without built-in support for title. All dialogs in
the examples, screenshots, webinars, and blog posts have had a custom
title. The Material and Universal designs both have specs for dialog
titles. This commit adds support for dialog titles with appropriate
looks (padding & font) out of the box.

Task-number: QTBUG-56711
Change-Id: I248150313f1ce629a7105fdbe1c70c8fcd69e1cc
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
This commit is contained in:
J-P Nurmi 2016-10-22 21:18:52 +02:00
parent fa71ef5a2c
commit 52e933ce2b
9 changed files with 95 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
examples/quickcontrols2/gallery/gallery.qml
View File

@ -221,6 +221,7 @@ ApplicationWindow {
width: Math.round(Math.min(window.width, window.height) / 3 * 2)
modal: true
focus: true
title: "Settings"
standardButtons: Dialog.Ok | Dialog.Cancel
onAccepted: {
@ -236,11 +237,6 @@ ApplicationWindow {
id: settingsColumn
spacing: 20
Label {
text: "Settings"
font.bold: true
}
RowLayout {
spacing: 10
@ -277,6 +273,7 @@ ApplicationWindow {
id: aboutDialog
modal: true
focus: true
title: "About"
x: (window.width - width) / 2
y: window.height / 6
width: Math.min(window.width, window.height) / 3 * 2
@ -286,11 +283,6 @@ ApplicationWindow {
id: aboutColumn
spacing: 20
Label {
text: "About"
font.bold: true
}
Label {
width: aboutDialog.availableWidth
text: "The Qt Quick Controls 2 module delivers the next generation user interface controls based on Qt Quick."

13
src/imports/controls/Dialog.qml
View File

@ -59,6 +59,19 @@ T.Dialog {
border.color: Default.frameDarkColor
}
header: Label {
text: control.title
visible: control.title
elide: Label.ElideRight
font.bold: true
padding: 12
background: Rectangle {
x: 1; y: 1
width: parent.width - 2
height: parent.height - 1
}
}
footer: DialogButtonBox {
visible: count > 0
}

1
src/imports/controls/doc/snippets/qtquickcontrols2-dialog.qml
View File

@ -34,6 +34,7 @@ Item {
//! [1]
Dialog {
id: dialog
title: "Title"
standardButtons: Dialog.Ok | Dialog.Cancel
onAccepted: console.log("Ok clicked")

18
src/imports/controls/material/Dialog.qml
View File

@ -55,6 +55,7 @@ T.Dialog {
contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0)
padding: 24
topPadding: 20
Material.elevation: 24
@ -80,6 +81,23 @@ T.Dialog {
}
}
header: Label {
text: control.title
visible: control.title
elide: Label.ElideRight
padding: 24
bottomPadding: 0
// TODO: QPlatformTheme::TitleBarFont
font.bold: true
font.pixelSize: 16
background: PaddedRectangle {
radius: 2
color: control.Material.dialogColor
bottomPadding: -2
clip: true
}
}
footer: DialogButtonBox {
visible: count > 0
}

17
src/imports/controls/universal/Dialog.qml
View File

@ -63,6 +63,23 @@ T.Dialog {
border.width: 1 // FlyoutBorderThemeThickness
}
header: Label {
text: control.title
visible: control.title
elide: Label.ElideRight
topPadding: 18
leftPadding: 24
rightPadding: 24
// TODO: QPlatformTheme::TitleBarFont
font.pixelSize: 20
background: Rectangle {
x: 1; y: 1 // // FlyoutBorderThemeThickness
color: control.Universal.chromeMediumLowColor
width: parent.width - 2
height: parent.height - 1
}
}
footer: DialogButtonBox {
visible: count > 0
}

38
src/quicktemplates2/qquickdialog.cpp
View File

@ -56,7 +56,10 @@ QT_BEGIN_NAMESPACE
\image qtquickcontrols2-page-wireframe.png
\section1 Dialog Buttons
\section1 Dialog Title and Buttons
Dialog's \l title is displayed by a style-specific title bar that is assigned
as a dialog \l header by default.
Dialog's standard buttons are managed by a \l DialogButtonBox that is assigned
as a dialog \l footer by default. The dialog's \l standardButtons property is
@ -118,6 +121,39 @@ QQuickDialog::QQuickDialog(QObject *parent) :
d->layout.reset(new QQuickPageLayout(d->popupItem));
}
/*!
\qmlproperty string QtQuick.Controls::Dialog::title
This property holds the dialog title.
The title is displayed in the dialog header.
\code
Dialog {
title: qsTr("About")
Label {
text: "Lorem ipsum..."
}
}
\endcode
*/
QString QQuickDialog::title() const
{
Q_D(const QQuickDialog);
return d->title;
}
void QQuickDialog::setTitle(const QString &title)
{
Q_D(QQuickDialog);
if (d->title == title)
return;
d->title = title;
emit titleChanged();
}
/*!
\qmlproperty Item QtQuick.Controls::Dialog::header

5
src/quicktemplates2/qquickdialog_p.h
View File

@ -58,6 +58,7 @@ class QQuickDialogPrivate;
class Q_QUICKTEMPLATES2_PRIVATE_EXPORT QQuickDialog : public QQuickPopup
{
Q_OBJECT
Q_PROPERTY(QString title READ title WRITE setTitle NOTIFY titleChanged FINAL)
Q_PROPERTY(QQuickItem *header READ header WRITE setHeader NOTIFY headerChanged FINAL)
Q_PROPERTY(QQuickItem *footer READ footer WRITE setFooter NOTIFY footerChanged FINAL)
Q_PROPERTY(QPlatformDialogHelper::StandardButtons standardButtons READ standardButtons WRITE setStandardButtons NOTIFY standardButtonsChanged FINAL)
@ -66,6 +67,9 @@ class Q_QUICKTEMPLATES2_PRIVATE_EXPORT QQuickDialog : public QQuickPopup
public:
explicit QQuickDialog(QObject *parent = nullptr);
QString title() const;
void setTitle(const QString &title);
QQuickItem *header() const;
void setHeader(QQuickItem *header);
@ -83,6 +87,7 @@ Q_SIGNALS:
void accepted();
void rejected();
void titleChanged();
void headerChanged();
void footerChanged();
void standardButtonsChanged();

1
src/quicktemplates2/qquickdialog_p_p.h
View File

@ -67,6 +67,7 @@ public:
return dialog->d_func();
}
QString title;
QQuickDialogButtonBox *buttonBox;
QScopedPointer<QQuickPageLayout> layout;
QPlatformDialogHelper::StandardButtons standardButtons;

2
tests/auto/controls/data/tst_dialog.qml
View File

@ -69,7 +69,7 @@ TestCase {
function test_defaults() {
var control = dialog.createObject(testCase)
verify(control)
verify(!control.header)
verify(control.header)
verify(control.footer)
compare(control.standardButtons, 0)
control.destroy()