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

View File

@ -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

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, 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;
}

View File

@ -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
{

View File

@ -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 ) ) )
{