input text: Add skinlets for different design systems

edelhirsch · Oct 15, 2024 · 39c6e8b · 39c6e8b
1 parent 59d0155
commit 39c6e8b
Show file tree

Hide file tree

Showing 15 changed files with 522 additions and 270 deletions.
diff --git a/designsystems/fluent2/CMakeLists.txt b/designsystems/fluent2/CMakeLists.txt
@@ -8,6 +8,7 @@ set(SOURCES
     QskFluent2Theme.h QskFluent2Theme.cpp
     QskFluent2Skin.h QskFluent2Skin.cpp
     QskFluent2SkinFactory.h QskFluent2SkinFactory.cpp
+    QskFluent2TextInputSkinlet.h QskFluent2TextInputSkinlet.cpp
 )
 qt_add_resources(SOURCES QskFluent2Icons.qrc)
 

diff --git a/designsystems/fluent2/QskFluent2Skin.cpp b/designsystems/fluent2/QskFluent2Skin.cpp
@@ -50,6 +50,8 @@
 #include "QskFluent2Skin.h"
 #include "QskFluent2Theme.h"
 
+#include "QskFluent2TextInputSkinlet.h"
+
 #include <QskSkinHintTableEditor.h>
 
 #include <QskBox.h>
@@ -1762,8 +1764,14 @@ void Editor::setupTextInputMetrics()
 
     setBoxShape( Q::Panel, 3_px );
 
+    setStrutSize( Q::LabelText, { -1, 30_px } );
+    setFontRole( Q::LabelText, Fluent2::Body );
+
     setAlignment( Q::InputText, Qt::AlignLeft | Qt::AlignVCenter );
     setFontRole( Q::InputText, Fluent2::Body );
+
+    setAlignment( Q::HintText, alignment( Q::InputText ) );
+    setFontRole( Q::HintText, fontRole( Q::InputText ) );
 }
 
 void Editor::setupTextInputColors(
@@ -1775,7 +1783,9 @@ void Editor::setupTextInputColors(
     const auto& pal = theme.palette;
 
     setColor( Q::Panel | Q::Selected, pal.fillColor.accent.selectedTextBackground );
+    setColor( Q::LabelText, pal.fillColor.text.primary );
     setColor( Q::InputText | Q::Selected, pal.fillColor.textOnAccent.selectedText );
+    setColor( Q::HintText, pal.fillColor.text.secondary );
 
     for( const auto state : { A::NoState, Q::Hovered, Q::Focused, Q::Editing, Q::Disabled } )
     {
@@ -1786,21 +1796,21 @@ void Editor::setupTextInputColors(
             panelColor = pal.fillColor.control.defaultColor;
             borderColor1 = pal.elevation.textControl.border[0];
             borderColor2 = pal.elevation.textControl.border[1];
-            textColor = pal.fillColor.text.secondary;
+            textColor = pal.fillColor.text.primary;
         }
         else if ( state == Q::Hovered )
         {
             panelColor = pal.fillColor.control.secondary;
             borderColor1 = pal.elevation.textControl.border[0];
             borderColor2 = pal.elevation.textControl.border[1];
-            textColor = pal.fillColor.text.secondary;
+            textColor = pal.fillColor.text.primary;
         }
         else if ( ( state == Q::Focused ) || ( state == Q::Editing ) )
         {
             panelColor = pal.fillColor.control.inputActive;
             borderColor1 = pal.elevation.textControl.border[0];
             borderColor2 = pal.fillColor.accent.defaultColor;
-            textColor = pal.fillColor.text.secondary;
+            textColor = pal.fillColor.text.primary;
         }
         else if ( state == Q::Disabled )
         {
@@ -2005,6 +2015,7 @@ void Editor::setupVirtualKeyboardColors(
 QskFluent2Skin::QskFluent2Skin( QObject* parent )
     : Inherited( parent )
 {
+    setupSkinlets();
     setupFonts();
 
     Editor editor( &hintTable() );
@@ -2092,6 +2103,11 @@ static inline QFont createFont( int size, int lineHeight, QFont::Weight weight )
     return font;
 }
 
+void QskFluent2Skin::setupSkinlets()
+{
+    declareSkinlet< QskTextInput, QskFluent2TextInputSkinlet >();
+}
+
 void QskFluent2Skin::setupFonts()
 {
     // see: https://fluent2.microsoft.design/typography ( Windows )

diff --git a/designsystems/fluent2/QskFluent2Skin.h b/designsystems/fluent2/QskFluent2Skin.h
@@ -40,6 +40,7 @@ class QSK_FLUENT2_EXPORT QskFluent2Skin : public QskSkin
   private:
     void addTheme( QskAspect::Section, const QskFluent2Theme& );
 
+    void setupSkinlets();
     void setupFonts();
     void setupGraphicFilters( const QskFluent2Theme& );
     void setGraphicColor( GraphicRole, QRgb );

diff --git a/designsystems/fluent2/QskFluent2TextInputSkinlet.cpp b/designsystems/fluent2/QskFluent2TextInputSkinlet.cpp
@@ -0,0 +1,75 @@
+/******************************************************************************
+ * QSkinny - Copyright (C) The authors
+ *           SPDX-License-Identifier: BSD-3-Clause
+ *****************************************************************************/
+
+#include "QskFluent2TextInputSkinlet.h"
+#include "QskTextInput.h"
+
+using Q = QskTextInput;
+
+QskFluent2TextInputSkinlet::QskFluent2TextInputSkinlet( QskSkin* skin )
+    : Inherited( skin )
+{
+}
+
+QskFluent2TextInputSkinlet::~QskFluent2TextInputSkinlet()
+{
+}
+
+QRectF QskFluent2TextInputSkinlet::subControlRect( const QskSkinnable* skinnable,
+    const QRectF& contentsRect, QskAspect::Subcontrol subControl ) const
+{
+    const auto input = static_cast< const Q* >( skinnable );
+
+    if ( subControl == Q::Panel )
+    {
+        auto rect = contentsRect;
+
+        const auto h = input->strutSizeHint( subControl ).height();
+        rect.setY( rect.bottom() - h );
+
+        return rect;
+    }
+    else if ( subControl == Q::LabelText )
+    {
+        auto rect = contentsRect;
+
+        const auto h = input->strutSizeHint( subControl ).height();
+        rect.setHeight( h );
+
+        return rect;
+    }
+    else if ( subControl == Q::HintText )
+    {
+        if( input->hasSkinState( Q::TextPopulated ) )
+        {
+            return {};
+        }
+        else
+        {
+            return input->subControlRect( Q::InputText );
+        }
+    }
+
+    return Inherited::subControlRect( skinnable, contentsRect, subControl );
+}
+
+QSizeF QskFluent2TextInputSkinlet::adjustSizeHint( const QskSkinnable* skinnable, Qt::SizeHint which, const QSizeF& oldHint ) const
+{
+    if ( which != Qt::PreferredSize )
+        return QSizeF();
+
+    const auto input = static_cast< const Q* >( skinnable );
+
+    const auto labelHeight = input->labelText().isEmpty() ? 0 : input->strutSizeHint( Q::LabelText ).height();
+    const auto panelHeight = input->strutSizeHint( Q::Panel ).height();
+
+    const auto h = labelHeight + panelHeight;
+
+    QSizeF hint( oldHint.width(), h );
+
+    return hint;
+}
+
+#include "moc_QskFluent2TextInputSkinlet.cpp"
diff --git a/designsystems/fluent2/QskFluent2TextInputSkinlet.h b/designsystems/fluent2/QskFluent2TextInputSkinlet.h
@@ -0,0 +1,28 @@
+/******************************************************************************
+ * QSkinny - Copyright (C) The authors
+ *           SPDX-License-Identifier: BSD-3-Clause
+ *****************************************************************************/
+
+#ifndef QSK_MATERIAL3_INPUT_SKINLET_H
+#define QSK_MATERIAL3_INPUT_SKINLET_H
+
+#include "QskTextInputSkinlet.h"
+
+class QSK_EXPORT QskFluent2TextInputSkinlet : public QskTextInputSkinlet
+{
+    Q_GADGET
+
+    using Inherited = QskTextInputSkinlet;
+
+  public:
+    Q_INVOKABLE QskFluent2TextInputSkinlet( QskSkin* = nullptr );
+    ~QskFluent2TextInputSkinlet() override;
+
+    QRectF subControlRect( const QskSkinnable*,
+        const QRectF& rect, QskAspect::Subcontrol ) const override;
+
+    QSizeF adjustSizeHint( const QskSkinnable*,
+        Qt::SizeHint, const QSizeF& ) const override;
+};
+
+#endif
diff --git a/designsystems/fusion/QskFusionSkin.cpp b/designsystems/fusion/QskFusionSkin.cpp
@@ -383,7 +383,7 @@ void Editor::setupTextInput()
     using A = QskAspect;
     using P = QPalette;
 
-    setAlignment( Q::InputText, Qt::AlignLeft | Qt::AlignTop );
+    setAlignment( Q::InputText, Qt::AlignLeft | Qt::AlignVCenter );
 
     for ( auto state : { A::NoState, Q::Disabled } )
     {

diff --git a/designsystems/material3/CMakeLists.txt b/designsystems/material3/CMakeLists.txt
@@ -6,6 +6,7 @@
 set(SOURCES
     QskMaterial3Global.h QskMaterial3Skin.h QskMaterial3Skin.cpp
     QskMaterial3SkinFactory.h QskMaterial3SkinFactory.cpp
+    QskMaterial3TextInputSkinlet.h QskMaterial3TextInputSkinlet.cpp
 )
 qt_add_resources(SOURCES QskMaterial3Icons.qrc)
 

diff --git a/designsystems/material3/QskMaterial3Skin.cpp b/designsystems/material3/QskMaterial3Skin.cpp
@@ -10,6 +10,8 @@
 
 #include "QskMaterial3Skin.h"
 
+#include "QskMaterial3TextInputSkinlet.h"
+
 #include <QskSkinHintTableEditor.h>
 
 #include <QskBox.h>
@@ -1609,6 +1611,11 @@ static inline QFont createFont( int pointSize, int lineHeight,
     return font;
 }
 
+void QskMaterial3Skin::setupSkinlets()
+{
+    declareSkinlet< QskTextInput, QskMaterial3TextInputSkinlet >();
+}
+
 void QskMaterial3Skin::setupFonts()
 {
     setFont( LabelSmall, createFont( 11, 16, 0.5, QFont::Medium ) );
@@ -1666,6 +1673,7 @@ void QskMaterial3Skin::initHints()
 {
     const QskMaterial3Theme theme( colorScheme() );
 
+    setupSkinlets();
     setupFonts();
     setupGraphicFilters( theme );
 

diff --git a/designsystems/material3/QskMaterial3Skin.h b/designsystems/material3/QskMaterial3Skin.h
@@ -131,6 +131,7 @@ class QSK_MATERIAL3_EXPORT QskMaterial3Skin : public QskSkin
     void initHints() override;
 
   private:
+    void setupSkinlets();
     void setupFonts();
     void setupGraphicFilters( const QskMaterial3Theme& );
     void setGraphicColor( GraphicRole, QRgb );