From eba62334a9b646f61e73b5b734ec5971e56d672a Mon Sep 17 00:00:00 2001 From: Nikita Krupenko Date: Thu, 9 Mar 2017 20:01:27 +0200 Subject: Material: use proper layout of the buttons in the DialogButtonBox Instead of using system button layout, use layout from macOS, which better fits the Material Design guidelines and also used in the Android QPA plugin. Task-number: QTBUG-58060 Change-Id: I06381219b5f1ad0a32742487fd314a8017d82dfc Reviewed-by: J-P Nurmi --- src/imports/controls/material/qquickmaterialtheme.cpp | 18 ++++++++++++++++++ src/imports/controls/material/qquickmaterialtheme_p.h | 3 +++ src/quicktemplates2/qquickdialogbuttonbox.cpp | 7 ++++++- 3 files changed, 27 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/imports/controls/material/qquickmaterialtheme.cpp b/src/imports/controls/material/qquickmaterialtheme.cpp index 63def7a5..3ea41779 100644 --- a/src/imports/controls/material/qquickmaterialtheme.cpp +++ b/src/imports/controls/material/qquickmaterialtheme.cpp @@ -36,6 +36,7 @@ #include "qquickmaterialtheme_p.h" +#include #include #include @@ -105,4 +106,21 @@ const QFont *QQuickMaterialTheme::font(QPlatformTheme::Font type) const } } +QVariant QQuickMaterialTheme::themeHint(ThemeHint hint) const +{ + switch (hint) { + case QPlatformTheme::DialogButtonBoxLayout: + // https://material.io/guidelines/components/dialogs.html#dialogs-specs + // As per spec, affirmative actions are placed to the right, dismissive + // actions are placed directly to the left of affirmative actions. + // In the Android sources, there are additional type of actions - + // neutral, which are placed to the left. + // Rules for macOS seems to be the most suitable here and are also used + // in the Android QPA plugin. + return QVariant(QPlatformDialogHelper::MacLayout); + default: + return QQuickProxyTheme::themeHint(hint); + } +} + QT_END_NAMESPACE diff --git a/src/imports/controls/material/qquickmaterialtheme_p.h b/src/imports/controls/material/qquickmaterialtheme_p.h index 828ca83a..d505d4ff 100644 --- a/src/imports/controls/material/qquickmaterialtheme_p.h +++ b/src/imports/controls/material/qquickmaterialtheme_p.h @@ -48,6 +48,7 @@ // We mean it. // +#include #include #include @@ -60,6 +61,8 @@ public: const QFont *font(Font type = SystemFont) const override; + QVariant themeHint(ThemeHint hint) const override; + private: QFont systemFont; QFont buttonFont; diff --git a/src/quicktemplates2/qquickdialogbuttonbox.cpp b/src/quicktemplates2/qquickdialogbuttonbox.cpp index 40b1e2c7..b85e85c8 100644 --- a/src/quicktemplates2/qquickdialogbuttonbox.cpp +++ b/src/quicktemplates2/qquickdialogbuttonbox.cpp @@ -258,7 +258,12 @@ void QQuickDialogButtonBoxPrivate::updateLayout() return firstRole != QPlatformDialogHelper::InvalidRole; } - const int *m_layout = QPlatformDialogHelper::buttonLayout(); + static const int *themeButtonLayout() + { + const int hint = QGuiApplicationPrivate::platformTheme()->themeHint(QPlatformTheme::DialogButtonBoxLayout).toInt(); + return QPlatformDialogHelper::buttonLayout(Qt::Horizontal, static_cast(hint)); + } + const int *m_layout = themeButtonLayout(); }; std::sort(buttons.begin(), buttons.end(), ButtonLayout()); -- cgit v1.2.3 From 91e29613f9671989455345a01da9f840a98d06f9 Mon Sep 17 00:00:00 2001 From: Nikita Krupenko Date: Wed, 8 Mar 2017 23:10:29 +0200 Subject: Material: fix vertical paddings of the DialogButtonBox Height of a single-line button box should be 52. Change-Id: I9c65719dcf73f323996e9c687241259f8e6473fa Reviewed-by: J-P Nurmi --- src/imports/controls/material/DialogButtonBox.qml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/imports/controls/material/DialogButtonBox.qml b/src/imports/controls/material/DialogButtonBox.qml index 668b7664..e4af6c4f 100644 --- a/src/imports/controls/material/DialogButtonBox.qml +++ b/src/imports/controls/material/DialogButtonBox.qml @@ -50,8 +50,8 @@ T.DialogButtonBox { spacing: 8 padding: 8 - topPadding: padding - 4 - bottomPadding: padding - 4 + topPadding: 2 + bottomPadding: 2 alignment: Qt.AlignRight Material.foreground: Material.accent @@ -73,6 +73,7 @@ T.DialogButtonBox { implicitHeight: 52 radius: 2 color: control.Material.dialogColor + // Rounded corners should be only at the top or at the bottom topPadding: control.position === T.DialogButtonBox.Footer ? -2 : 0 bottomPadding: control.position === T.DialogButtonBox.Header ? -2 : 0 clip: true -- cgit v1.2.3