168492376
/
qskinny
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

input text: Fix Focused / Editing states and simplify styling

This commit is contained in:
Peter Hartmann 2024-10-14 13:24:03 +02:00
parent 59a42395b2
commit ab37df2c17
4 changed files with 30 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
designsystems/material3/QskMaterial3Skin.cpp
View File

@ -463,6 +463,8 @@ void Editor::setupTextInput()
setGradient( Q::Panel, m_pal.surfaceVariant ); setGradient( Q::Panel, m_pal.surfaceVariant );
setColor( Q::Panel | Q::Selected, m_pal.primary12 );
setBoxShape( Q::Panel, m_pal.shapeExtraSmallTop ); setBoxShape( Q::Panel, m_pal.shapeExtraSmallTop );
setBoxBorderMetrics( Q::Panel, { 0, 0, 0, 1_dp } ); setBoxBorderMetrics( Q::Panel, { 0, 0, 0, 1_dp } );
@ -512,28 +514,23 @@ void Editor::setupTextInput()
// LabelText // 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, for( const auto s : { Q::Focused, Q::Editing, Q::TextPopulated } )
Q::Hovered | Q::ReadOnly | Q::Disabled | Q::Error ); {
setFontRole( Q::LabelText | s, BodySmall, allStates );
setAlignment( Q::LabelText | Q::TextEmpty, Qt::AlignLeft | Qt::AlignVCenter, textEmptyStates ); setMargin( Q::LabelText | s, { 16_dp, 4_dp, 16_dp, 16_dp }, allStates );
setFontRole( Q::LabelText | Q::TextEmpty, BodyLarge, textEmptyStates ); setColor( Q::LabelText | s, m_pal.primary, allStates );
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 );
setColor( Q::LabelText | Q::Error, m_pal.error, allStates ); setColor( Q::LabelText | Q::Error, m_pal.error, allStates );
setColor( Q::LabelText | Q::Error | Q::Hovered, m_pal.onErrorContainer, allStates ); setColor( Q::LabelText | Q::Error | Q::Hovered, m_pal.onErrorContainer, allStates );
// LabelText - Outlined // 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 // InputText

8
src/controls/QskTextInput.cpp
View File

@ -27,7 +27,7 @@ QSK_SYSTEM_STATE( QskTextInput, ReadOnly, QskAspect::FirstSystemState << 1 )
QSK_SYSTEM_STATE( QskTextInput, Editing, QskAspect::FirstSystemState << 2 ) QSK_SYSTEM_STATE( QskTextInput, Editing, QskAspect::FirstSystemState << 2 )
QSK_SYSTEM_STATE( QskTextInput, Selected, QskAspect::FirstSystemState << 3 ) QSK_SYSTEM_STATE( QskTextInput, Selected, QskAspect::FirstSystemState << 3 )
QSK_SYSTEM_STATE( QskTextInput, Error, QskAspect::FirstSystemState << 4 ) 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 ) static inline void qskPropagateReadOnly( QskTextInput* input )
{ {
@ -337,11 +337,9 @@ QskTextInput::QskTextInput( QQuickItem* parent )
initSizePolicy( QskSizePolicy::Expanding, QskSizePolicy::Fixed ); initSizePolicy( QskSizePolicy::Expanding, QskSizePolicy::Fixed );
setSkinStateFlag( TextEmpty );
connect( m_data->textInput, &QQuickTextInput::textChanged, this, [this]() 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 update(); // character count might have changed
} ); } );
} }
@ -571,7 +569,7 @@ QSizeF QskTextInput::layoutSizeHint( Qt::SizeHint which, const QSizeF& ) const
if( emphasis() == LowEmphasis ) if( emphasis() == LowEmphasis )
{ {
const auto fontHeight = effectiveFontHeight( LabelText | TextEmpty ); const auto fontHeight = effectiveFontHeight( LabelText | Focused );
hint.rheight() += fontHeight / 2; hint.rheight() += fontHeight / 2;
} }

2
src/controls/QskTextInput.h
View File

@ -68,7 +68,7 @@ class QSK_EXPORT QskTextInput : public QskControl
TrailingIconRipple, TrailingIcon, HintText, SupportingText, TrailingIconRipple, TrailingIcon, HintText, SupportingText,
CharacterCount ) CharacterCount )
QSK_STATES( ReadOnly, Editing, Selected, Error, TextEmpty ) QSK_STATES( ReadOnly, Editing, Selected, Error, TextPopulated )
enum Emphasis enum Emphasis
{ {

17
src/controls/QskTextInputSkinlet.cpp
View File

@ -157,14 +157,25 @@ QRectF QskTextInputSkinlet::subControlRect( const QskSkinnable* skinnable,
const auto panelRect = input->subControlRect( Q::Panel ); const auto panelRect = input->subControlRect( Q::Panel );
auto rect = panelRect; auto rect = panelRect;
rect.setLeft( leadingIconRect.right() ); 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 ); rect = rect.marginsRemoved( margins );
return rect; return rect;
} }
else if ( subControl == Q::HintText ) else if ( subControl == Q::HintText )
{ {
if( input->hasSkinState( Q::TextEmpty ) if( !input->hasSkinState( Q::TextPopulated )
&& ( input->hasSkinState( Q::Focused ) || input->hasSkinState( Q::Editing ) ) ) && ( input->hasSkinState( Q::Focused ) || input->hasSkinState( Q::Editing ) ) )
{ {
return input->subControlRect( Q::InputText ); return input->subControlRect( Q::InputText );
@ -272,7 +283,7 @@ QSGNode* QskTextInputSkinlet::updateSubNode(
return nullptr; return nullptr;
if( input->emphasis() == Q::LowEmphasis if( input->emphasis() == Q::LowEmphasis
&& ( !input->hasSkinState( Q::TextEmpty ) && ( input->hasSkinState( Q::TextPopulated )
|| input->hasSkinState( Q::Focused ) || input->hasSkinState( Q::Focused )
|| input->hasSkinState( Q::Editing ) ) ) || input->hasSkinState( Q::Editing ) ) )
{ {