From 55fa922b4f9350c320a4a949b70498269f0aaf79 Mon Sep 17 00:00:00 2001 From: Mitch Curtis Date: Mon, 12 Feb 2018 10:20:06 +0100 Subject: Add Dense Material style variant for desktop The current Material style is based on the mobile variant of the design, which is far too large for desktop applications. From https://material.io/guidelines/components/lists.html#lists-usage: "When the mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts." This patch adds a dense variant of the style where most controls like buttons and delegates are smaller in height and use smaller font sizes. Note that the Material design guidelines seem to distinguish between mobile, desktop and dense measurements, where "dense" seems to be a specialization of desktop. We cannot afford to/do not see sense in maintaining three separate variants, so the dense variant will be the only desktop version of the Material style. [ChangeLog][Material] Added Dense variant of the Material style for use on desktop platforms. Some controls are slightly smaller in height and use smaller font sizes. The variant can be enabled by setting QT_QUICK_CONTROLS_MATERIAL_VARIANT to Dense or setting Variant=Dense in the qtquickcontrols.conf file. Task-number: QTBUG-51109 Change-Id: I11846b7f6e61f7b5dcf3c146b18c220234a73ef2 Reviewed-by: J-P Nurmi --- .../doc/src/includes/qquickmaterialstyle.qdocinc | 16 ++++ src/imports/controls/material/BusyIndicator.qml | 4 +- src/imports/controls/material/Button.qml | 2 +- src/imports/controls/material/CheckDelegate.qml | 2 +- src/imports/controls/material/ComboBox.qml | 2 +- src/imports/controls/material/DelayButton.qml | 2 +- src/imports/controls/material/DialogButtonBox.qml | 4 +- src/imports/controls/material/Frame.qml | 2 + src/imports/controls/material/GroupBox.qml | 3 +- src/imports/controls/material/ItemDelegate.qml | 4 +- src/imports/controls/material/Menu.qml | 2 +- src/imports/controls/material/MenuItem.qml | 6 +- src/imports/controls/material/RadioDelegate.qml | 2 +- src/imports/controls/material/RoundButton.qml | 4 +- src/imports/controls/material/SpinBox.qml | 10 +-- src/imports/controls/material/SwipeDelegate.qml | 2 +- src/imports/controls/material/SwitchDelegate.qml | 6 +- src/imports/controls/material/TabButton.qml | 2 +- src/imports/controls/material/ToolButton.qml | 4 +- src/imports/controls/material/ToolTip.qml | 2 +- .../controls/material/qquickmaterialstyle.cpp | 89 +++++++++++++++++++--- .../controls/material/qquickmaterialstyle_p.h | 28 +++++++ .../controls/material/qquickmaterialtheme.cpp | 19 +++-- src/quickcontrols2/qquickstyle.cpp | 1 + .../data/applicationwindow.qml | 5 ++ .../qquickmaterialstyleconf.qrc | 10 ++- .../tst_qquickmaterialstyleconf.cpp | 42 ++++++++++ .../qquickmaterialstyleconf/variant-dense.conf | 6 ++ .../qquickmaterialstyleconf/variant-normal.conf | 6 ++ 29 files changed, 234 insertions(+), 53 deletions(-) create mode 100644 tests/auto/qquickmaterialstyleconf/variant-dense.conf create mode 100644 tests/auto/qquickmaterialstyleconf/variant-normal.conf diff --git a/src/imports/controls/doc/src/includes/qquickmaterialstyle.qdocinc b/src/imports/controls/doc/src/includes/qquickmaterialstyle.qdocinc index c5d94279..72c97bb6 100644 --- a/src/imports/controls/doc/src/includes/qquickmaterialstyle.qdocinc +++ b/src/imports/controls/doc/src/includes/qquickmaterialstyle.qdocinc @@ -7,6 +7,14 @@ \li \c Theme \li Specifies the default \l {material-theme-attached-prop}{Material theme}. The value can be one of the available themes, for example \c "Dark". + \row + \li \c Variant + \li Specifies the Material variant. The Material Design has two + variants: a normal variant designed for touch devices, and a dense + variant for desktop. The dense variant uses smaller sizes for + controls and their fonts. + + The value can be \c "Normal" or \c "Dense". \row \li \c Accent \li Specifies the default \l {material-accent-attached-prop}{Material accent color}. @@ -39,6 +47,14 @@ \li \c QT_QUICK_CONTROLS_MATERIAL_THEME \li Specifies the default \l {material-theme-attached-prop}{Material theme}. The value can be one of the available themes, for example \c "Dark". + \row + \li \c QT_QUICK_CONTROLS_MATERIAL_VARIANT + \li Specifies the Material variant. The Material Design has two + variants: a normal variant designed for touch devices, and a dense + variant for desktop. The dense variant uses smaller sizes for + controls and their fonts. + + The value can be \c "Normal" or \c "Dense". \row \li \c QT_QUICK_CONTROLS_MATERIAL_ACCENT \li Specifies the default \l {material-accent-attached-prop}{Material accent color}. diff --git a/src/imports/controls/material/BusyIndicator.qml b/src/imports/controls/material/BusyIndicator.qml index 5e53bdb9..41e5d25f 100644 --- a/src/imports/controls/material/BusyIndicator.qml +++ b/src/imports/controls/material/BusyIndicator.qml @@ -48,8 +48,8 @@ T.BusyIndicator { padding: 6 contentItem: BusyIndicatorImpl { - implicitWidth: 48 - implicitHeight: 48 + implicitWidth: control.Material.buttonHeight + implicitHeight: control.Material.buttonHeight color: control.Material.accentColor running: control.running diff --git a/src/imports/controls/material/Button.qml b/src/imports/controls/material/Button.qml index 6401b2ad..7ed2aa2c 100644 --- a/src/imports/controls/material/Button.qml +++ b/src/imports/controls/material/Button.qml @@ -82,7 +82,7 @@ T.Button { // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state background: Rectangle { implicitWidth: 64 - implicitHeight: 48 + implicitHeight: control.Material.buttonHeight // external vertical padding is 6 (to increase touch area) y: 6 diff --git a/src/imports/controls/material/CheckDelegate.qml b/src/imports/controls/material/CheckDelegate.qml index 1d3ff61d..f6c687d3 100644 --- a/src/imports/controls/material/CheckDelegate.qml +++ b/src/imports/controls/material/CheckDelegate.qml @@ -82,7 +82,7 @@ T.CheckDelegate { } background: Rectangle { - implicitHeight: 48 + implicitHeight: control.Material.delegateHeight color: control.highlighted ? control.Material.listHighlightColor : "transparent" diff --git a/src/imports/controls/material/ComboBox.qml b/src/imports/controls/material/ComboBox.qml index 3dd3cf30..7ecf5d1a 100644 --- a/src/imports/controls/material/ComboBox.qml +++ b/src/imports/controls/material/ComboBox.qml @@ -99,7 +99,7 @@ T.ComboBox { background: Rectangle { implicitWidth: 120 - implicitHeight: 48 + implicitHeight: control.Material.buttonHeight // external vertical padding is 6 (to increase touch area) y: 6 diff --git a/src/imports/controls/material/DelayButton.qml b/src/imports/controls/material/DelayButton.qml index 4043949c..43d09ef5 100644 --- a/src/imports/controls/material/DelayButton.qml +++ b/src/imports/controls/material/DelayButton.qml @@ -75,7 +75,7 @@ T.DelayButton { // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state background: Rectangle { implicitWidth: 64 - implicitHeight: 48 + implicitHeight: control.Material.buttonHeight // external vertical padding is 6 (to increase touch area) y: 6 diff --git a/src/imports/controls/material/DialogButtonBox.qml b/src/imports/controls/material/DialogButtonBox.qml index 628e85f7..c3bea49f 100644 --- a/src/imports/controls/material/DialogButtonBox.qml +++ b/src/imports/controls/material/DialogButtonBox.qml @@ -62,7 +62,7 @@ T.DialogButtonBox { contentItem: ListView { implicitWidth: contentWidth - implicitHeight: 48 + implicitHeight: control.Material.buttonHeight model: control.contentModel spacing: control.spacing @@ -72,7 +72,7 @@ T.DialogButtonBox { } background: PaddedRectangle { - implicitHeight: 52 + implicitHeight: control.Material.dialogButtonBoxHeight radius: 2 color: control.Material.dialogColor // Rounded corners should be only at the top or at the bottom diff --git a/src/imports/controls/material/Frame.qml b/src/imports/controls/material/Frame.qml index 51721c2c..46f5c13e 100644 --- a/src/imports/controls/material/Frame.qml +++ b/src/imports/controls/material/Frame.qml @@ -49,6 +49,8 @@ T.Frame { contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0) padding: 12 + topPadding: Material.frameVerticalPadding + bottomPadding: Material.frameVerticalPadding background: Rectangle { radius: 2 diff --git a/src/imports/controls/material/GroupBox.qml b/src/imports/controls/material/GroupBox.qml index 7ac30ec6..e99deffd 100644 --- a/src/imports/controls/material/GroupBox.qml +++ b/src/imports/controls/material/GroupBox.qml @@ -52,7 +52,8 @@ T.GroupBox { spacing: 6 padding: 12 - topPadding: padding + (label && label.implicitWidth > 0 ? label.implicitHeight + spacing : 0) + topPadding: Material.frameVerticalPadding + (label && label.implicitWidth > 0 ? label.implicitHeight + spacing : 0) + bottomPadding: Material.frameVerticalPadding label: Text { x: control.leftPadding diff --git a/src/imports/controls/material/ItemDelegate.qml b/src/imports/controls/material/ItemDelegate.qml index 0efb3b93..0793dddd 100644 --- a/src/imports/controls/material/ItemDelegate.qml +++ b/src/imports/controls/material/ItemDelegate.qml @@ -51,7 +51,7 @@ T.ItemDelegate { indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding) baselineOffset: contentItem.y + contentItem.baselineOffset - padding: 16 + padding: control.Material.itemDelegateVerticalPadding spacing: 16 icon.width: 24 @@ -71,7 +71,7 @@ T.ItemDelegate { } background: Rectangle { - implicitHeight: 48 + implicitHeight: control.Material.delegateHeight color: control.highlighted ? control.Material.listHighlightColor : "transparent" diff --git a/src/imports/controls/material/Menu.qml b/src/imports/controls/material/Menu.qml index 0f40380c..c91d450e 100644 --- a/src/imports/controls/material/Menu.qml +++ b/src/imports/controls/material/Menu.qml @@ -84,7 +84,7 @@ T.Menu { background: Rectangle { implicitWidth: 200 - implicitHeight: 48 + implicitHeight: control.Material.menuItemHeight radius: 3 color: control.Material.dialogColor diff --git a/src/imports/controls/material/MenuItem.qml b/src/imports/controls/material/MenuItem.qml index 13d4694c..9ef530b7 100644 --- a/src/imports/controls/material/MenuItem.qml +++ b/src/imports/controls/material/MenuItem.qml @@ -52,8 +52,8 @@ T.MenuItem { baselineOffset: contentItem.y + contentItem.baselineOffset padding: 16 - topPadding: 12 - bottomPadding: 12 + topPadding: Material.menuItemVerticalPadding + bottomPadding: Material.menuItemVerticalPadding spacing: 16 icon.width: 24 @@ -96,7 +96,7 @@ T.MenuItem { background: Rectangle { implicitWidth: 200 - implicitHeight: 48 + implicitHeight: control.Material.menuItemHeight color: control.highlighted ? control.Material.listHighlightColor : "transparent" Ripple { diff --git a/src/imports/controls/material/RadioDelegate.qml b/src/imports/controls/material/RadioDelegate.qml index d498ee80..f97a86e9 100644 --- a/src/imports/controls/material/RadioDelegate.qml +++ b/src/imports/controls/material/RadioDelegate.qml @@ -82,7 +82,7 @@ T.RadioDelegate { } background: Rectangle { - implicitHeight: 48 + implicitHeight: control.Material.delegateHeight color: control.highlighted ? control.Material.listHighlightColor : "transparent" diff --git a/src/imports/controls/material/RoundButton.qml b/src/imports/controls/material/RoundButton.qml index 92e6bc84..b900e4d1 100644 --- a/src/imports/controls/material/RoundButton.qml +++ b/src/imports/controls/material/RoundButton.qml @@ -79,8 +79,8 @@ T.RoundButton { // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state background: Rectangle { - implicitWidth: 48 - implicitHeight: 48 + implicitWidth: control.Material.buttonHeight + implicitHeight: control.Material.buttonHeight // external vertical padding is 6 (to increase touch area) x: 6 diff --git a/src/imports/controls/material/SpinBox.qml b/src/imports/controls/material/SpinBox.qml index cf9196ac..5ac617ba 100644 --- a/src/imports/controls/material/SpinBox.qml +++ b/src/imports/controls/material/SpinBox.qml @@ -83,8 +83,8 @@ T.SpinBox { up.indicator: Item { x: control.mirrored ? 0 : parent.width - width - implicitWidth: 48 - implicitHeight: 48 + implicitWidth: control.Material.buttonHeight + implicitHeight: control.Material.buttonHeight height: parent.height width: height @@ -117,8 +117,8 @@ T.SpinBox { down.indicator: Item { x: control.mirrored ? parent.width - width : 0 - implicitWidth: 48 - implicitHeight: 48 + implicitWidth: control.Material.buttonHeight + implicitHeight: control.Material.buttonHeight height: parent.height width: height @@ -144,7 +144,7 @@ T.SpinBox { background: Item { implicitWidth: 192 - implicitHeight: 48 + implicitHeight: control.Material.buttonHeight Rectangle { x: parent.width / 2 - width / 2 diff --git a/src/imports/controls/material/SwipeDelegate.qml b/src/imports/controls/material/SwipeDelegate.qml index 1095ac68..2ffa8797 100644 --- a/src/imports/controls/material/SwipeDelegate.qml +++ b/src/imports/controls/material/SwipeDelegate.qml @@ -75,7 +75,7 @@ T.SwipeDelegate { } background: Rectangle { - implicitHeight: 48 + implicitHeight: control.Material.delegateHeight color: control.Material.backgroundColor diff --git a/src/imports/controls/material/SwitchDelegate.qml b/src/imports/controls/material/SwitchDelegate.qml index 308e9772..f3969a5f 100644 --- a/src/imports/controls/material/SwitchDelegate.qml +++ b/src/imports/controls/material/SwitchDelegate.qml @@ -52,8 +52,8 @@ T.SwitchDelegate { baselineOffset: contentItem.y + contentItem.baselineOffset padding: 16 - topPadding: 8 - bottomPadding: 8 + topPadding: Material.switchDelegateVerticalPadding + bottomPadding: Material.switchDelegateVerticalPadding spacing: 16 icon.width: 24 @@ -82,7 +82,7 @@ T.SwitchDelegate { } background: Rectangle { - implicitHeight: 48 + implicitHeight: control.Material.delegateHeight color: control.highlighted ? control.Material.listHighlightColor : "transparent" diff --git a/src/imports/controls/material/TabButton.qml b/src/imports/controls/material/TabButton.qml index 3134cca9..10da9a5f 100644 --- a/src/imports/controls/material/TabButton.qml +++ b/src/imports/controls/material/TabButton.qml @@ -69,7 +69,7 @@ T.TabButton { } background: Ripple { - implicitHeight: 48 + implicitHeight: control.Material.buttonHeight clip: true pressed: control.pressed diff --git a/src/imports/controls/material/ToolButton.qml b/src/imports/controls/material/ToolButton.qml index 86a9f5c0..a1c47f2a 100644 --- a/src/imports/controls/material/ToolButton.qml +++ b/src/imports/controls/material/ToolButton.qml @@ -70,8 +70,8 @@ T.ToolButton { } background: Ripple { - implicitWidth: 48 - implicitHeight: 48 + implicitWidth: control.Material.buttonHeight + implicitHeight: control.Material.buttonHeight readonly property bool square: control.contentItem.width <= control.contentItem.height diff --git a/src/imports/controls/material/ToolTip.qml b/src/imports/controls/material/ToolTip.qml index 0d690f59..1f786a3f 100644 --- a/src/imports/controls/material/ToolTip.qml +++ b/src/imports/controls/material/ToolTip.qml @@ -76,7 +76,7 @@ T.ToolTip { } background: Rectangle { - implicitHeight: 32 + implicitHeight: control.Material.tooltipHeight color: control.Material.tooltipColor opacity: 0.9 radius: 2 diff --git a/src/imports/controls/material/qquickmaterialstyle.cpp b/src/imports/controls/material/qquickmaterialstyle.cpp index 313ceca2..9aad1199 100644 --- a/src/imports/controls/material/qquickmaterialstyle.cpp +++ b/src/imports/controls/material/qquickmaterialstyle.cpp @@ -387,6 +387,10 @@ static bool globalPrimaryCustom = false; static bool globalAccentCustom = false; static bool globalForegroundCustom = true; static bool globalBackgroundCustom = true; +// This is global because: +// 1) The theme needs access to it to determine font sizes. +// 2) There can only be one variant used for the whole application. +static QQuickMaterialStyle::Variant globalVariant = QQuickMaterialStyle::Normal; static const QRgb backgroundColorLight = 0xFFFAFAFA; static const QRgb backgroundColorDark = 0xFF303030; @@ -445,7 +449,7 @@ QQuickMaterialStyle::QQuickMaterialStyle(QObject *parent) : QQuickAttachedObject m_background(globalBackground), m_elevation(0) { - init(); + QQuickAttachedObject::init(); } QQuickMaterialStyle *QQuickMaterialStyle::qmlAttachedProperties(QObject *object) @@ -1135,17 +1139,60 @@ QColor QQuickMaterialStyle::shade(const QColor &color, Shade shade) const } } -void QQuickMaterialStyle::attachedParentChange(QQuickAttachedObject *newParent, QQuickAttachedObject *oldParent) +int QQuickMaterialStyle::buttonHeight() const { - Q_UNUSED(oldParent); - QQuickMaterialStyle *material = qobject_cast(newParent); - if (material) { - inheritPrimary(material->m_primary, material->m_customPrimary); - inheritAccent(material->m_accent, material->m_customAccent); - inheritForeground(material->m_foreground, material->m_customForeground, material->m_hasForeground); - inheritBackground(material->m_background, material->m_customBackground, material->m_hasBackground); - inheritTheme(material->theme()); - } + // https://material.io/guidelines/components/buttons.html#buttons-style + return globalVariant == Dense ? 44 : 48; +} + +int QQuickMaterialStyle::delegateHeight() const +{ + // https://material.io/guidelines/components/lists.html#lists-specs + return globalVariant == Dense ? 40 : 48; +} + +int QQuickMaterialStyle::dialogButtonBoxHeight() const +{ + return globalVariant == Dense ? 48 : 52; +} + +int QQuickMaterialStyle::frameVerticalPadding() const +{ + return globalVariant == Dense ? 8 : 12; +} + +int QQuickMaterialStyle::itemDelegateVerticalPadding() const +{ + return globalVariant == Dense ? 12 : 16; +} + +int QQuickMaterialStyle::menuItemHeight() const +{ + // https://material.io/guidelines/components/menus.html#menus-simple-menus + return globalVariant == Dense ? 32 : 48; +} + +int QQuickMaterialStyle::menuItemVerticalPadding() const +{ + return globalVariant == Dense ? 8 : 12; +} + +int QQuickMaterialStyle::switchDelegateVerticalPadding() const +{ + // SwitchDelegate's indicator is much larger than the others due to the shadow, + // so we must reduce its padding to ensure its implicitHeight is 40 when dense. + return globalVariant == Dense ? 4 : 8; +} + +int QQuickMaterialStyle::tooltipHeight() const +{ + // https://material.io/guidelines/components/tooltips.html + return globalVariant == Dense ? 22 : 32; +} + +QQuickMaterialStyle::Variant QQuickMaterialStyle::variant() +{ + return globalVariant; } template @@ -1177,6 +1224,13 @@ void QQuickMaterialStyle::initGlobals() else if (!themeValue.isEmpty()) qWarning().nospace().noquote() << "Material: unknown theme value: " << themeValue; + QByteArray variantValue = resolveSetting("QT_QUICK_CONTROLS_MATERIAL_VARIANT", settings, QStringLiteral("Variant")); + Variant variantEnum = toEnumValue(variantValue, &ok); + if (ok) + globalVariant = variantEnum; + else if (!variantValue.isEmpty()) + qWarning().nospace().noquote() << "Material: unknown variant value: " << variantValue; + QByteArray primaryValue = resolveSetting("QT_QUICK_CONTROLS_MATERIAL_PRIMARY", settings, QStringLiteral("Primary")); Color primaryEnum = toEnumValue(primaryValue, &ok); if (ok) { @@ -1242,6 +1296,19 @@ void QQuickMaterialStyle::initGlobals() } } +void QQuickMaterialStyle::attachedParentChange(QQuickAttachedObject *newParent, QQuickAttachedObject *oldParent) +{ + Q_UNUSED(oldParent); + QQuickMaterialStyle *material = qobject_cast(newParent); + if (material) { + inheritPrimary(material->m_primary, material->m_customPrimary); + inheritAccent(material->m_accent, material->m_customAccent); + inheritForeground(material->m_foreground, material->m_customForeground, material->m_hasForeground); + inheritBackground(material->m_background, material->m_customBackground, material->m_hasBackground); + inheritTheme(material->theme()); + } +} + bool QQuickMaterialStyle::variantToRgba(const QVariant &var, const char *name, QRgb *rgba, bool *custom) const { *custom = false; diff --git a/src/imports/controls/material/qquickmaterialstyle_p.h b/src/imports/controls/material/qquickmaterialstyle_p.h index 4b63747c..37baa450 100644 --- a/src/imports/controls/material/qquickmaterialstyle_p.h +++ b/src/imports/controls/material/qquickmaterialstyle_p.h @@ -98,6 +98,16 @@ class QQuickMaterialStyle : public QQuickAttachedObject Q_PROPERTY(QColor toolTextColor READ toolTextColor NOTIFY paletteChanged FINAL) Q_PROPERTY(QColor spinBoxDisabledIconColor READ spinBoxDisabledIconColor NOTIFY paletteChanged FINAL) + Q_PROPERTY(int buttonHeight READ buttonHeight CONSTANT FINAL) + Q_PROPERTY(int delegateHeight READ delegateHeight CONSTANT FINAL) + Q_PROPERTY(int dialogButtonBoxHeight READ dialogButtonBoxHeight CONSTANT FINAL) + Q_PROPERTY(int frameVerticalPadding READ frameVerticalPadding CONSTANT FINAL) + Q_PROPERTY(int itemDelegateVerticalPadding READ itemDelegateVerticalPadding CONSTANT FINAL) + Q_PROPERTY(int menuItemHeight READ menuItemHeight CONSTANT FINAL) + Q_PROPERTY(int menuItemVerticalPadding READ menuItemVerticalPadding CONSTANT FINAL) + Q_PROPERTY(int switchDelegateVerticalPadding READ switchDelegateVerticalPadding CONSTANT FINAL) + Q_PROPERTY(int tooltipHeight READ tooltipHeight CONSTANT FINAL) + public: enum Theme { Light, @@ -105,6 +115,11 @@ public: System }; + enum Variant { + Normal, + Dense + }; + enum Color { Red, Pink, @@ -145,6 +160,7 @@ public: }; Q_ENUM(Theme) + Q_ENUM(Variant) Q_ENUM(Color) Q_ENUM(Shade) @@ -225,8 +241,20 @@ public: Q_INVOKABLE QColor color(Color color, Shade shade = Shade500) const; Q_INVOKABLE QColor shade(const QColor &color, Shade shade) const; + int buttonHeight() const; + int delegateHeight() const; + int dialogButtonBoxHeight() const; + int frameVerticalPadding() const; + int itemDelegateVerticalPadding() const; + int menuItemHeight() const; + int menuItemVerticalPadding() const; + int switchDelegateVerticalPadding() const; + int tooltipHeight() const; + static void initGlobals(); + static Variant variant(); + Q_SIGNALS: void themeChanged(); void primaryChanged(); diff --git a/src/imports/controls/material/qquickmaterialtheme.cpp b/src/imports/controls/material/qquickmaterialtheme.cpp index 0c30ae8f..471f5143 100644 --- a/src/imports/controls/material/qquickmaterialtheme.cpp +++ b/src/imports/controls/material/qquickmaterialtheme.cpp @@ -35,6 +35,7 @@ ****************************************************************************/ #include "qquickmaterialtheme_p.h" +#include "qquickmaterialstyle_p.h" #include #include @@ -67,29 +68,33 @@ void QQuickMaterialTheme::resolveFonts(const QFont &defaultFont) editorFont.setFamily(family); } - systemFont.setPixelSize(14); + const bool dense = QQuickMaterialStyle::variant() == QQuickMaterialStyle::Dense; + systemFont.setPixelSize(dense ? 13 : 14); systemFont = defaultFont.resolve(systemFont); - buttonFont.setPixelSize(14); + // https://material.io/guidelines/components/buttons.html#buttons-style + buttonFont.setPixelSize(dense ? 13 : 14); buttonFont.setCapitalization(QFont::AllUppercase); buttonFont.setWeight(QFont::Medium); buttonFont = defaultFont.resolve(buttonFont); - toolTipFont.setPixelSize(14); + // https://material.io/guidelines/components/tooltips.html + toolTipFont.setPixelSize(dense ? 10 : 14); toolTipFont.setWeight(QFont::Medium); toolTipFont = defaultFont.resolve(toolTipFont); - itemViewFont.setPixelSize(14); + itemViewFont.setPixelSize(dense ? 13 : 14); itemViewFont.setWeight(QFont::Medium); itemViewFont = defaultFont.resolve(itemViewFont); - listViewFont.setPixelSize(16); + // https://material.io/guidelines/components/lists.html#lists-specs + listViewFont.setPixelSize(dense ? 13 : 16); listViewFont = defaultFont.resolve(listViewFont); - menuItemFont.setPixelSize(16); + menuItemFont.setPixelSize(dense ? 13 : 16); menuItemFont = defaultFont.resolve(menuItemFont); - editorFont.setPixelSize(16); + editorFont.setPixelSize(dense ? 13 : 16); editorFont = defaultFont.resolve(editorFont); } diff --git a/src/quickcontrols2/qquickstyle.cpp b/src/quickcontrols2/qquickstyle.cpp index 800341d7..daa48144 100644 --- a/src/quickcontrols2/qquickstyle.cpp +++ b/src/quickcontrols2/qquickstyle.cpp @@ -233,6 +233,7 @@ struct QQuickStyleSpec style.clear(); fallbackStyle.clear(); fallbackMethod.clear(); + configFilePath.clear(); } QString resolveConfigFilePath() diff --git a/tests/auto/qquickmaterialstyleconf/data/applicationwindow.qml b/tests/auto/qquickmaterialstyleconf/data/applicationwindow.qml index 65196393..9a31966f 100644 --- a/tests/auto/qquickmaterialstyleconf/data/applicationwindow.qml +++ b/tests/auto/qquickmaterialstyleconf/data/applicationwindow.qml @@ -57,8 +57,13 @@ ApplicationWindow { height: 400 property alias label: label + property alias button: button Label { id: label } + + Button { + id: button + } } diff --git a/tests/auto/qquickmaterialstyleconf/qquickmaterialstyleconf.qrc b/tests/auto/qquickmaterialstyleconf/qquickmaterialstyleconf.qrc index 53ba6450..49219139 100644 --- a/tests/auto/qquickmaterialstyleconf/qquickmaterialstyleconf.qrc +++ b/tests/auto/qquickmaterialstyleconf/qquickmaterialstyleconf.qrc @@ -1,5 +1,7 @@ - - - qtquickcontrols2.conf - + + + qtquickcontrols2.conf + variant-dense.conf + variant-normal.conf + diff --git a/tests/auto/qquickmaterialstyleconf/tst_qquickmaterialstyleconf.cpp b/tests/auto/qquickmaterialstyleconf/tst_qquickmaterialstyleconf.cpp index 17d1ea6d..72136445 100644 --- a/tests/auto/qquickmaterialstyleconf/tst_qquickmaterialstyleconf.cpp +++ b/tests/auto/qquickmaterialstyleconf/tst_qquickmaterialstyleconf.cpp @@ -36,6 +36,7 @@ #include #include +#include #include "../shared/util.h" #include "../shared/visualtestutil.h" @@ -49,6 +50,8 @@ public: private slots: void conf(); + void variants_data(); + void variants(); }; void tst_qquickmaterialstyleconf::conf() @@ -73,6 +76,45 @@ void tst_qquickmaterialstyleconf::conf() QCOMPARE(label->property("font").value(), customFont); } +void tst_qquickmaterialstyleconf::variants_data() +{ + QTest::addColumn("confPath"); + QTest::addColumn("expectedButtonHeight"); + // Just to ensure that the correct conf is loaded. + QTest::addColumn("expectedColor"); + + // (36 button height + 12 touchable area) + QTest::newRow("normal") << QByteArray(":/variant-normal.conf") << 48 << QColor::fromRgb(0x123456); + // We specified a custom variant (dense), so the button should be small. + // (32 button height + 12 touchable area) + QTest::newRow("dense") << QByteArray(":/variant-dense.conf") << 44 << QColor::fromRgb(0x789abc); +} + +void tst_qquickmaterialstyleconf::variants() +{ + QFETCH(QByteArray, confPath); + QFETCH(int, expectedButtonHeight); + QFETCH(QColor, expectedColor); + + qmlClearTypeRegistrations(); + QQuickStylePrivate::reset(); + qputenv("QT_QUICK_CONTROLS_CONF", confPath); + + QQuickApplicationHelper helper(this, QLatin1String("applicationwindow.qml")); + + QQuickApplicationWindow *window = helper.appWindow; + window->show(); + QVERIFY(QTest::qWaitForWindowExposed(window)); + + QQuickItem *label = window->property("label").value(); + QVERIFY(label); + QCOMPARE(label->property("color").value(), expectedColor); + + QQuickItem *button = window->property("button").value(); + QVERIFY(button); + QCOMPARE(button->height(), expectedButtonHeight); +} + QTEST_MAIN(tst_qquickmaterialstyleconf) #include "tst_qquickmaterialstyleconf.moc" diff --git a/tests/auto/qquickmaterialstyleconf/variant-dense.conf b/tests/auto/qquickmaterialstyleconf/variant-dense.conf new file mode 100644 index 00000000..6636894e --- /dev/null +++ b/tests/auto/qquickmaterialstyleconf/variant-dense.conf @@ -0,0 +1,6 @@ +[Controls] +Style=Material + +[Material] +Variant=Dense +Foreground=#789abc diff --git a/tests/auto/qquickmaterialstyleconf/variant-normal.conf b/tests/auto/qquickmaterialstyleconf/variant-normal.conf new file mode 100644 index 00000000..08778e92 --- /dev/null +++ b/tests/auto/qquickmaterialstyleconf/variant-normal.conf @@ -0,0 +1,6 @@ +[Controls] +Style=Material + +[Material] +Variant=Normal +Foreground=#123456 -- cgit v1.2.3