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 <jpnurmi@qt.io>

1 files changed, 78 insertions, 11 deletions

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<QQuickMaterialStyle *>(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 <typename Enum>
@@ -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<Variant>(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<Color>(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<QQuickMaterialStyle *>(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;