From ab37df2c1716f51245666ea08e388c8843ce3dee Mon Sep 17 00:00:00 2001 From: Peter Hartmann Date: Mon, 14 Oct 2024 13:24:03 +0200 Subject: [PATCH] input text: Fix Focused / Editing states and simplify styling --- designsystems/material3/QskMaterial3Skin.cpp | 27 +++++++++----------- src/controls/QskTextInput.cpp | 8 +++--- src/controls/QskTextInput.h | 2 +- src/controls/QskTextInputSkinlet.cpp | 17 +++++++++--- 4 files changed, 30 insertions(+), 24 deletions(-) diff --git a/designsystems/material3/QskMaterial3Skin.cpp b/designsystems/material3/QskMaterial3Skin.cpp index 81ca3140..e7d88b8d 100644 --- a/designsystems/material3/QskMaterial3Skin.cpp +++ b/designsystems/material3/QskMaterial3Skin.cpp @@ -463,6 +463,8 @@ void Editor::setupTextInput() setGradient( Q::Panel, m_pal.surfaceVariant ); + setColor( Q::Panel | Q::Selected, m_pal.primary12 ); + setBoxShape( Q::Panel, m_pal.shapeExtraSmallTop ); setBoxBorderMetrics( Q::Panel, { 0, 0, 0, 1_dp } ); @@ -512,28 +514,23 @@ void Editor::setupTextInput() // LabelText - setAlignment( Q::LabelText, Qt::AlignLeft | Qt::AlignTop ); + setAlignment( Q::LabelText, Qt::AlignLeft | Qt::AlignVCenter ); + setFontRole( Q::LabelText, BodyLarge ); + setColor( Q::LabelText, m_pal.onSurfaceVariant ); - const QskStateCombination textEmptyStates( QskStateCombination::CombinationNoState, - Q::Hovered | Q::ReadOnly | Q::Disabled | Q::Error ); - - setAlignment( Q::LabelText | Q::TextEmpty, Qt::AlignLeft | Qt::AlignVCenter, textEmptyStates ); - setFontRole( Q::LabelText | Q::TextEmpty, BodyLarge, textEmptyStates ); - setColor( Q::LabelText | Q::TextEmpty, m_pal.onSurfaceVariant, textEmptyStates ); - - const QskStateCombination editingHoveredFocused( QskStateCombination::CombinationNoState, - Q::Editing | Q::Hovered | Q::Focused ); - - setMargin( Q::LabelText, { 16_dp, 8_dp, 16_dp, 16_dp }, editingHoveredFocused ); - setColor( Q::LabelText, m_pal.primary, editingHoveredFocused ); - setFontRole( Q::LabelText, BodySmall, editingHoveredFocused ); + for( const auto s : { Q::Focused, Q::Editing, Q::TextPopulated } ) + { + setFontRole( Q::LabelText | s, BodySmall, allStates ); + setMargin( Q::LabelText | s, { 16_dp, 4_dp, 16_dp, 16_dp }, allStates ); + setColor( Q::LabelText | s, m_pal.primary, allStates ); + } setColor( Q::LabelText | Q::Error, m_pal.error, allStates ); setColor( Q::LabelText | Q::Error | Q::Hovered, m_pal.onErrorContainer, allStates ); // LabelText - Outlined - setMargin( Q::LabelText | M3::Outlined, { 4_dp, 0, 4_dp, 0 }, editingHoveredFocused ); + setMargin( Q::LabelText | M3::Outlined, { 4_dp, 0, 4_dp, 0 }, allStates ); // InputText diff --git a/src/controls/QskTextInput.cpp b/src/controls/QskTextInput.cpp index da0e72ad..3971545e 100644 --- a/src/controls/QskTextInput.cpp +++ b/src/controls/QskTextInput.cpp @@ -27,7 +27,7 @@ QSK_SYSTEM_STATE( QskTextInput, ReadOnly, QskAspect::FirstSystemState << 1 ) QSK_SYSTEM_STATE( QskTextInput, Editing, QskAspect::FirstSystemState << 2 ) QSK_SYSTEM_STATE( QskTextInput, Selected, QskAspect::FirstSystemState << 3 ) QSK_SYSTEM_STATE( QskTextInput, Error, QskAspect::FirstSystemState << 4 ) -QSK_SYSTEM_STATE( QskTextInput, TextEmpty, QskAspect::LastUserState << 1 ) +QSK_SYSTEM_STATE( QskTextInput, TextPopulated, QskAspect::LastUserState << 1 ) static inline void qskPropagateReadOnly( QskTextInput* input ) { @@ -337,11 +337,9 @@ QskTextInput::QskTextInput( QQuickItem* parent ) initSizePolicy( QskSizePolicy::Expanding, QskSizePolicy::Fixed ); - setSkinStateFlag( TextEmpty ); - connect( m_data->textInput, &QQuickTextInput::textChanged, this, [this]() { - setSkinStateFlag( TextEmpty, m_data->textInput->text().isEmpty() ); + setSkinStateFlag( TextPopulated, !m_data->textInput->text().isEmpty() ); update(); // character count might have changed } ); } @@ -571,7 +569,7 @@ QSizeF QskTextInput::layoutSizeHint( Qt::SizeHint which, const QSizeF& ) const if( emphasis() == LowEmphasis ) { - const auto fontHeight = effectiveFontHeight( LabelText | TextEmpty ); + const auto fontHeight = effectiveFontHeight( LabelText | Focused ); hint.rheight() += fontHeight / 2; } diff --git a/src/controls/QskTextInput.h b/src/controls/QskTextInput.h index d03516bb..41e0fe05 100644 --- a/src/controls/QskTextInput.h +++ b/src/controls/QskTextInput.h @@ -68,7 +68,7 @@ class QSK_EXPORT QskTextInput : public QskControl TrailingIconRipple, TrailingIcon, HintText, SupportingText, CharacterCount ) - QSK_STATES( ReadOnly, Editing, Selected, Error, TextEmpty ) + QSK_STATES( ReadOnly, Editing, Selected, Error, TextPopulated ) enum Emphasis { diff --git a/src/controls/QskTextInputSkinlet.cpp b/src/controls/QskTextInputSkinlet.cpp index 902c2b1b..2e48074b 100644 --- a/src/controls/QskTextInputSkinlet.cpp +++ b/src/controls/QskTextInputSkinlet.cpp @@ -157,14 +157,25 @@ QRectF QskTextInputSkinlet::subControlRect( const QskSkinnable* skinnable, const auto panelRect = input->subControlRect( Q::Panel ); auto rect = panelRect; rect.setLeft( leadingIconRect.right() ); - rect.setRight( contentsRect.right() ); // ### space for trailing icon + + const auto trailingIconRect = input->subControlRect( Q::TrailingIcon ); + + if( trailingIconRect.isValid() ) + { + rect.setRight( trailingIconRect.left() ); + } + else + { + rect.setRight( contentsRect.right() ); + } + rect = rect.marginsRemoved( margins ); return rect; } else if ( subControl == Q::HintText ) { - if( input->hasSkinState( Q::TextEmpty ) + if( !input->hasSkinState( Q::TextPopulated ) && ( input->hasSkinState( Q::Focused ) || input->hasSkinState( Q::Editing ) ) ) { return input->subControlRect( Q::InputText ); @@ -272,7 +283,7 @@ QSGNode* QskTextInputSkinlet::updateSubNode( return nullptr; if( input->emphasis() == Q::LowEmphasis - && ( !input->hasSkinState( Q::TextEmpty ) + && ( input->hasSkinState( Q::TextPopulated ) || input->hasSkinState( Q::Focused ) || input->hasSkinState( Q::Editing ) ) ) {