diff --git a/designsystems/fluent2/CMakeLists.txt b/designsystems/fluent2/CMakeLists.txt index 4fb73177..ce0d222c 100644 --- 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 index 10f73b74..9f7dbc1f 100644 --- a/designsystems/fluent2/QskFluent2Skin.cpp +++ b/designsystems/fluent2/QskFluent2Skin.cpp @@ -48,6 +48,8 @@ #include "QskFluent2Skin.h" #include "QskFluent2Theme.h" +#include "QskFluent2TextInputSkinlet.h" + #include #include @@ -1773,8 +1775,14 @@ void Editor::setupTextInputMetrics() setBoxShape( Q::Panel, 3_px ); - setAlignment( Q::Text, Qt::AlignLeft | Qt::AlignVCenter ); - setFontRole( Q::Text, Fluent2::Body ); + 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( @@ -1785,8 +1793,10 @@ void Editor::setupTextInputColors( const auto& pal = theme.palette; - setColor( Q::PanelSelected, pal.fillColor.accent.selectedTextBackground ); - setColor( Q::TextSelected, pal.fillColor.textOnAccent.selectedText ); + 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 } ) { @@ -1797,21 +1807,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 ) { @@ -1821,7 +1831,7 @@ void Editor::setupTextInputColors( } const auto panel = Q::Panel | section | state; - const auto text = Q::Text | section | state; + const auto text = Q::InputText | section | state; panelColor = rgbSolid( panelColor, pal.background.solid.base ); @@ -2016,6 +2026,7 @@ void Editor::setupVirtualKeyboardColors( QskFluent2Skin::QskFluent2Skin( QObject* parent ) : Inherited( parent ) { + setupSkinlets(); setupFonts(); Editor editor( &hintTable() ); @@ -2103,6 +2114,11 @@ static inline QFont createFont( qreal 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 index 5a72c481..2d919a84 100644 --- 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 new file mode 100644 index 00000000..656028c8 --- /dev/null +++ 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 new file mode 100644 index 00000000..17cda6e8 --- /dev/null +++ b/designsystems/fluent2/QskFluent2TextInputSkinlet.h @@ -0,0 +1,29 @@ +/****************************************************************************** + * QSkinny - Copyright (C) The authors + * SPDX-License-Identifier: BSD-3-Clause + *****************************************************************************/ + +#ifndef QSK_FLUENT2_INPUT_SKINLET_H +#define QSK_FLUENT2_INPUT_SKINLET_H + +#include "QskFluent2Global.h" +#include "QskTextInputSkinlet.h" + +class QSK_FLUENT2_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 index bad14860..358fb8df 100644 --- a/designsystems/fusion/QskFusionSkin.cpp +++ b/designsystems/fusion/QskFusionSkin.cpp @@ -386,18 +386,17 @@ void Editor::setupTextInput() using A = QskAspect; using P = QPalette; - setAlignment( Q::Text, Qt::AlignLeft | Qt::AlignTop ); + setAlignment( Q::InputText, Qt::AlignLeft | Qt::AlignVCenter ); for ( auto state : { A::NoState, Q::Disabled } ) { const auto colorGroup = ( state == A::NoState ) ? P::Active : P::Disabled; setGradient( Q::Panel | state, m_pal.color( colorGroup, P::Base ) ); - setColor( Q::PanelSelected | state, m_pal.color( colorGroup, P::Highlight ) ); - - setColor( Q::Text | state, m_pal.color( colorGroup, P::Text ) ); - setColor( Q::TextSelected | state, m_pal.color( colorGroup, P::HighlightedText ) ); + setColor( Q::Panel | Q::Selected | state, m_pal.color( colorGroup, P::Highlight ) ); + setColor( Q::InputText | state, m_pal.color( colorGroup, P::Text ) ); + setColor( Q::InputText | Q::Selected | state, m_pal.color( colorGroup, P::HighlightedText ) ); } setBoxBorderMetrics( Q::Panel, 1_px ); diff --git a/designsystems/material3/CMakeLists.txt b/designsystems/material3/CMakeLists.txt index 051e8ed9..da9f1862 100644 --- 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/QskMaterial3Icons.qrc b/designsystems/material3/QskMaterial3Icons.qrc index 72725b7a..2c44364a 100644 --- a/designsystems/material3/QskMaterial3Icons.qrc +++ b/designsystems/material3/QskMaterial3Icons.qrc @@ -17,5 +17,8 @@ icons/qvg/arrow_drop_up.qvg icons/qvg/check.qvg icons/qvg/remove.qvg + icons/qvg/text_field_search.qvg + icons/qvg/text_field_cancel.qvg + icons/qvg/text_field_error.qvg diff --git a/designsystems/material3/QskMaterial3Skin.cpp b/designsystems/material3/QskMaterial3Skin.cpp index 22d662bf..1ae75711 100644 --- a/designsystems/material3/QskMaterial3Skin.cpp +++ b/designsystems/material3/QskMaterial3Skin.cpp @@ -10,6 +10,8 @@ #include "QskMaterial3Skin.h" +#include "QskMaterial3TextInputSkinlet.h" + #include #include @@ -451,34 +453,157 @@ void Editor::setupTextLabel() void Editor::setupTextInput() { using Q = QskTextInput; + using M3 = QskMaterial3Skin; + + const QskStateCombination allStates( QskStateCombination::CombinationNoState, QskAspect::AllStates ); + + // Panel setStrutSize( Q::Panel, -1.0, 56_dp ); - setPadding( Q::Panel, { 12_dp, 8_dp, 12_dp, 8_dp } ); - setGradient( Q::Panel, m_pal.surfaceVariant ); - setBoxShape( Q::Panel, m_pal.shapeExtraSmallTop ); - setBoxBorderMetrics( Q::Panel, { 0, 0, 0, 1_dp } ); - setBoxBorderColors( Q::Panel, m_pal.onSurfaceVariant ); - setSpacing( Q::Panel, 8_dp ); - const auto hoverColor = flattenedColor( m_pal.onSurfaceVariant, + // Panel - Filled + + 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 } ); + setBoxBorderMetrics( Q::Panel | Q::Focused, { 0, 0, 0, 2_dp }, allStates ); + + setBoxBorderColors( Q::Panel, m_pal.onSurfaceVariant ); + setBoxBorderColors( Q::Panel | Q::Error, m_pal.error, allStates ); + setBoxBorderColors( Q::Panel | Q::Error | Q::Hovered, m_pal.onErrorContainer, allStates ); + + const auto normalHoverColor = flattenedColor( m_pal.onSurfaceVariant, m_pal.surfaceVariant, m_pal.hoverOpacity ); - setGradient( Q::Panel | Q::Hovered, hoverColor ); + setGradient( Q::Panel | Q::Hovered, normalHoverColor, allStates ); + + const auto errorHoverColor = flattenedColor( m_pal.onSurface, + m_pal.surfaceVariant, m_pal.hoverOpacity ); + setGradient( Q::Panel | Q::Error | Q::Hovered, errorHoverColor, allStates ); const auto focusColor = flattenedColor( m_pal.onSurfaceVariant, m_pal.surfaceVariant, m_pal.focusOpacity ); - setGradient( Q::Panel | Q::Focused, focusColor ); - - // ### Also add a pressed state - - setColor( Q::Text, m_pal.onSurface ); - setFontRole( Q::Text, BodyMedium ); - setAlignment( Q::Text, Qt::AlignLeft | Qt::AlignVCenter ); + setGradient( Q::Panel | Q::Focused, focusColor, allStates ); const auto disabledPanelColor = QskRgb::toTransparentF( m_pal.onSurface, 0.04 ); - setGradient( Q::Panel | Q::Disabled, disabledPanelColor ); - setBoxBorderColors( Q::Panel | Q::Disabled, m_pal.onSurface38 ); + setGradient( Q::Panel | Q::Disabled, disabledPanelColor, allStates ); + setBoxBorderColors( Q::Panel | Q::Disabled, m_pal.onSurface38, allStates ); - setColor( Q::Text | Q::Disabled, m_pal.onSurface38 ); + // Panel - Outlined + + setGradient( Q::Panel | M3::Outlined, Qt::transparent ); + setBoxShape( Q::Panel | M3::Outlined, m_pal.shapeExtraSmall ); + setBoxBorderMetrics( Q::Panel | M3::Outlined, 1_dp ); + setBoxBorderColors( Q::Panel | M3::Outlined, m_pal.outline ); + + setBoxBorderMetrics( Q::Panel | M3::Outlined | Q::Focused, 2_dp, allStates ); + setBoxBorderColors( Q::Panel | M3::Outlined | Q::Focused, m_pal.primary, allStates ); + + setBoxBorderColors( Q::Panel | M3::Outlined | Q::Error, m_pal.error, allStates ); + + // LeadingIcon + + setStrutSize( Q::LeadingIcon, { 24_dp, 24_dp } ); + setMargin( Q::LeadingIcon, { 12_dp, 0, 0, 0 } ); + const auto leadingIcon = symbol( "text_field_search" ); + setSymbol( Q::LeadingIcon, leadingIcon ); + + setGraphicRole( Q::LeadingIcon, M3::GraphicRoleOnSurface ); + setGraphicRole( Q::LeadingIcon | Q::Error, M3::GraphicRoleOnSurfaceVariant, allStates ); + + setGraphicRole( Q::LeadingIcon | Q::Disabled, M3::GraphicRoleOnSurface38, allStates ); + + // LabelText + + setAlignment( Q::LabelText, Qt::AlignLeft | Qt::AlignVCenter ); + setFontRole( Q::LabelText, BodyLarge ); + setColor( Q::LabelText, m_pal.onSurfaceVariant ); + + 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 ); + + setColor( Q::LabelText | Q::Disabled, m_pal.onSurface38, allStates ); + + // LabelText - Outlined + + setMargin( Q::LabelText | M3::Outlined, { 4_dp, 0, 4_dp, 0 }, allStates ); + + + // InputText + + setMargin( Q::InputText, { 16_dp, 8_dp, 16_dp, 8_dp } ); + setColor( Q::InputText, m_pal.onSurface ); + setColor( Q::Panel | Q::Selected, m_pal.surfaceVariant, allStates ); + setFontRole( Q::InputText, BodyLarge ); + setAlignment( Q::InputText, Qt::AlignLeft | Qt::AlignBottom ); + + setColor( Q::InputText | Q::Error, m_pal.onSurface, allStates ); // same as with Hovered and Focused + + setColor( Q::InputText | Q::Disabled, m_pal.onSurface38, allStates ); + + // InputText - Outlined + + setColor( Q::Panel | Q::Selected | M3::Outlined, m_pal.surfaceVariant, allStates ); + setAlignment( Q::InputText | M3::Outlined, Qt::AlignLeft | Qt::AlignVCenter ); + + + // HintText + + setColor( Q::HintText, color( Q::InputText ) ); + setFontRole( Q::HintText, fontRole( Q::InputText ) ); + setAlignment( Q::HintText, alignment( Q::InputText ) ); + setAlignment( Q::HintText | M3::Outlined, alignment( Q::InputText | M3::Outlined ) ); + + + // TrailingIcon + + setStrutSize( Q::TrailingIcon, { 24_dp, 24_dp } ); + setMargin( Q::TrailingIcon, { 0, 0, 12_dp, 0 } ); + setGraphicRole( Q::TrailingIcon, M3::GraphicRoleOnSurfaceVariant ); + const auto trailingIcon = symbol( "text_field_cancel" ); + setSymbol( Q::TrailingIcon, trailingIcon ); + + const auto errorIcon = symbol( "text_field_error" ); + setSymbol( Q::TrailingIcon | Q::Error, errorIcon, allStates ); + setGraphicRole( Q::TrailingIcon | Q::Error, M3::GraphicRoleError, allStates ); + setGraphicRole( Q::TrailingIcon | Q::Error | Q::Hovered, M3::GraphicRoleOnErrorContainer, allStates ); + + setGraphicRole( Q::TrailingIcon | Q::Disabled, M3::GraphicRoleOnSurface38, allStates ); + + // TrailingIconRipple + + setStrutSize( Q::TrailingIconRipple, { 45_dp, 45_dp } ); + setGradient( Q::TrailingIconRipple | Q::Hovered, m_pal.onSurface8, allStates ); + setBoxShape( Q::TrailingIconRipple, 100, Qt::RelativeSize ); + + + // SupportingText + + setMargin( Q::SupportingText, { 16_dp, 4_dp, 16_dp, 4_dp } ); + setColor( Q::SupportingText, m_pal.onSurfaceVariant ); + setColor( Q::SupportingText | Q::Error, m_pal.error, allStates ); + setFontRole( Q::SupportingText, BodySmall ); + setAlignment( Q::SupportingText, Qt::AlignLeft | Qt::AlignVCenter ); + + setColor( Q::SupportingText | Q::Disabled, m_pal.onSurface38, allStates ); + + // CharacterCount + + setMargin( Q::CharacterCount, margin( Q::SupportingText ) ); + setColor( Q::CharacterCount, color( Q::SupportingText ) ); + setFontRole( Q::CharacterCount, fontRole( Q::SupportingText ) ); + setAlignment( Q::CharacterCount, Qt::AlignRight | Qt::AlignVCenter ); + setColor( Q::CharacterCount | Q::Disabled, color( Q::SupportingText | Q::Disabled ) ); } void Editor::setupProgressBar() @@ -1550,7 +1675,7 @@ QskMaterial3Theme::QskMaterial3Theme( QskSkin::ColorScheme colorScheme, onSurface8 = QskRgb::toTransparentF( onSurface, 0.08 ); onSurface12 = QskRgb::toTransparentF( onSurface, 0.12 ); - onSurface38 = QskRgb::toTransparentF( onSurface, 0.38 ); + onSurface38 = QskRgb::toTransparentF( onSurface, 0.38 ); // ### rename to onSurfaceDisabled surfaceVariant12 = QskRgb::toTransparentF( surfaceVariant, 0.12 ); @@ -1561,6 +1686,7 @@ QskMaterial3Theme::QskMaterial3Theme( QskSkin::ColorScheme colorScheme, elevation2 = QskShadowMetrics( -2, 8, { 0, 2 } ); elevation3 = QskShadowMetrics( -1, 11, { 0, 2 } ); + shapeExtraSmall = QskBoxShapeMetrics( 4_dp, 4_dp, 4_dp, 4_dp ); shapeExtraSmallTop = QskBoxShapeMetrics( 4_dp, 4_dp, 0, 0 ); } @@ -1615,6 +1741,11 @@ static inline QFont createFont( qreal size, int lineHeight, return font; } +void QskMaterial3Skin::setupSkinlets() +{ + declareSkinlet< QskTextInput, QskMaterial3TextInputSkinlet >(); +} + void QskMaterial3Skin::setupFonts() { /* @@ -1661,10 +1792,12 @@ void QskMaterial3Skin::setGraphicColor( GraphicRole role, QRgb rgb ) void QskMaterial3Skin::setupGraphicFilters( const QskMaterial3Theme& theme ) { + setGraphicColor( GraphicRoleError, theme.error ); setGraphicColor( GraphicRoleOnPrimary, theme.onPrimary ); setGraphicColor( GraphicRoleOnPrimaryContainer, theme.onPrimaryContainer ); setGraphicColor( GraphicRoleOnSecondaryContainer, theme.onSecondaryContainer ); setGraphicColor( GraphicRoleOnError, theme.onError ); + setGraphicColor( GraphicRoleOnErrorContainer, theme.onErrorContainer ); setGraphicColor( GraphicRoleOnSurface, theme.onSurface ); setGraphicColor( GraphicRoleOnSurface38, theme.onSurface38 ); setGraphicColor( GraphicRoleOnSurfaceVariant, theme.onSurfaceVariant ); @@ -1678,6 +1811,7 @@ void QskMaterial3Skin::initHints() { const QskMaterial3Theme theme( colorScheme() ); + setupSkinlets(); setupFonts(); setupGraphicFilters( theme ); diff --git a/designsystems/material3/QskMaterial3Skin.h b/designsystems/material3/QskMaterial3Skin.h index 309fd3cd..6a02dce2 100644 --- a/designsystems/material3/QskMaterial3Skin.h +++ b/designsystems/material3/QskMaterial3Skin.h @@ -102,6 +102,7 @@ class QSK_MATERIAL3_EXPORT QskMaterial3Theme qreal stateOpacity( int state ) const; + QskBoxShapeMetrics shapeExtraSmall; QskBoxShapeMetrics shapeExtraSmallTop; }; @@ -114,7 +115,9 @@ class QSK_MATERIAL3_EXPORT QskMaterial3Skin : public QskSkin public: enum GraphicRole { + GraphicRoleError, GraphicRoleOnError, + GraphicRoleOnErrorContainer, GraphicRoleOnPrimary, GraphicRoleOnPrimaryContainer, GraphicRoleOnSecondaryContainer, @@ -140,6 +143,7 @@ class QSK_MATERIAL3_EXPORT QskMaterial3Skin : public QskSkin void initHints() override; private: + void setupSkinlets(); void setupFonts(); void setupGraphicFilters( const QskMaterial3Theme& ); void setGraphicColor( GraphicRole, QRgb ); diff --git a/designsystems/material3/QskMaterial3TextInputSkinlet.cpp b/designsystems/material3/QskMaterial3TextInputSkinlet.cpp new file mode 100644 index 00000000..1a5c228f --- /dev/null +++ b/designsystems/material3/QskMaterial3TextInputSkinlet.cpp @@ -0,0 +1,340 @@ +/****************************************************************************** + * QSkinny - Copyright (C) The authors + * SPDX-License-Identifier: BSD-3-Clause + *****************************************************************************/ + +#include "QskMaterial3TextInputSkinlet.h" +#include "QskTextInput.h" + +#include "QskBoxBorderColors.h" +#include "QskBoxBorderMetrics.h" +#include "QskBoxShapeMetrics.h" +#include "QskFunctions.h" + +#include + +using Q = QskTextInput; + +namespace +{ + QString maxLengthString( const QskTextInput* input ) + { + QString s = QString::number( input->inputText().length() ) + + " / " + QString::number( input->maxLength() ); + return s; + } + + // We need to "cut a hole" in the upper gradient for the label text: + QskBoxBorderColors outlineColors( const QskTextInput* input ) + { + auto borderColors = input->boxBorderColorsHint( Q::Panel ); + + if( input->labelText().isEmpty() ) + { + return borderColors; + } + + auto topGradient = borderColors.gradientAt( Qt::TopEdge ); + + const auto panelRect = input->subControlRect( Q::Panel ); + + const auto margins = input->marginHint( Q::LabelText ); + const auto iconMargins = input->marginHint( Q::LeadingIcon ); + + const auto x1 = iconMargins.left() - margins.left(); + auto r1 = x1 / panelRect.width(); + r1 = qBound( 0.0, r1, 1.0 ); + + const auto w = qskHorizontalAdvance( input->effectiveFont( Q::LabelText ), input->labelText() ); + + const auto x2 = x1 + w + margins.right(); + auto r2 = x2 / panelRect.width(); + r2 = qBound( 0.0, r2, 1.0 ); + + topGradient.setStops( { + { 0.0, topGradient.startColor() }, + { r1, topGradient.startColor() }, + { r1, Qt::transparent }, + { r2, Qt::transparent }, + { r2, topGradient.startColor() }, + { 1.0, topGradient.startColor() } + } ); + + borderColors.setGradientAt( Qt::TopEdge, topGradient ); + + return borderColors; + } +} + +QskMaterial3TextInputSkinlet::QskMaterial3TextInputSkinlet( QskSkin* skin ) + : Inherited( skin ) +{ + setNodeRoles( { + PanelRole, + LeadingIconRole, + LabelTextRole, + HintTextRole, + SupportingTextRole, + CharacterCountRole, + TrailingIconRippleRole, + TrailingIconRole, + } ); +} + +QskMaterial3TextInputSkinlet::~QskMaterial3TextInputSkinlet() +{ +} + +QRectF QskMaterial3TextInputSkinlet::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; + + if( input->emphasis() == Q::LowEmphasis ) + { + const auto fontHeight = input->effectiveFontHeight( Q::LabelText | Q::Focused ); + rect.setY( fontHeight / 2 ); + } + + const auto h = input->strutSizeHint( subControl ).height(); + rect.setHeight( h ); + + return rect; + } + else if ( subControl == Q::LabelText ) + { + const auto inputRect = input->subControlRect( Q::InputText ); + + if( !input->inputText().isEmpty() + || input->hasSkinState( Q::Focused ) + || input->hasSkinState( Q::Editing ) ) + { + const auto margins = input->marginHint( subControl ); + auto rect = inputRect; + const QFontMetricsF fm( input->effectiveFont( subControl ) ); + + if( input->emphasis() == Q::LowEmphasis ) + { + const auto iconMargins = input->marginHint( Q::LeadingIcon ); + rect.setX( iconMargins.left() ); + rect.setY( 0 ); + } + else + { + rect.setY( contentsRect.y() + margins.top() ); + } + + rect.setHeight( fm.height() ); + + return rect; + } + else + { + return inputRect; + } + } + else if ( subControl == Q::LeadingIcon ) + { + if( input->symbolHint( subControl ).isEmpty() ) + { + return {}; + } + else + { + const auto margins = input->marginHint( subControl ); + const auto panelRect = input->subControlRect( Q::Panel ); + auto rect = panelRect.marginsRemoved( margins ); + + const auto size = input->strutSizeHint( subControl ); + rect.setSize( size ); + rect.moveCenter( { rect.center().x(), panelRect.center().y() } ); + + return rect; + } + } + else if ( subControl == Q::HintText ) + { + if( !input->hasSkinState( Q::TextPopulated ) + && ( input->hasSkinState( Q::Focused ) || input->hasSkinState( Q::Editing ) ) ) + { + return input->subControlRect( Q::InputText ); + } + else + { + return {}; + } + } + else if ( subControl == Q::SupportingText ) + { + if( input->supportingText().isEmpty() ) + { + return {}; + } + else + { + auto rect = contentsRect; + + const auto margins = input->marginHint( subControl ); + const auto h = margins.top() + input->effectiveFontHeight( subControl ) + margins.bottom(); + rect.setTop( rect.bottom() - h ); + + rect.setLeft( rect.left() + margins.left() ); + + return rect; + } + } + else if ( subControl == Q::CharacterCount ) + { + if( input->maxLength() == 32767 ) // magic number hardcoded in qquicktextinput.cpp + { + return {}; + } + else + { + auto rect = contentsRect; + + const auto margins = input->marginHint( subControl ); + const auto h = margins.top() + input->effectiveFontHeight( subControl ) + margins.bottom(); + rect.setTop( rect.bottom() - h ); + + const QFontMetricsF fm( input->effectiveFont( subControl ) ); + const auto w = qskHorizontalAdvance( fm, maxLengthString( input ) ); + rect.setRight( rect.right() - margins.right() ); + rect.setLeft( rect.right() - ( margins.left() + w + margins.right() ) ); + + return rect; + } + } + else if ( subControl == Q::TrailingIconRipple ) + { + const auto cursorPos = input->effectiveSkinHint( + Q::TrailingIconRipple | Q::Hovered | QskAspect::Metric | QskAspect::Position ).toPointF(); + const auto trailingIconRect = input->subControlRect( Q::TrailingIcon ); + + if( !cursorPos.isNull() && trailingIconRect.contains( cursorPos ) ) + { + const auto size = input->strutSizeHint( subControl ); + QRectF rect( { 0, 0 }, size ); + + rect.moveCenter( trailingIconRect.center() ); + + return rect; + } + else + { + return {}; + } + } + else if ( subControl == Q::TrailingIcon ) + { + if( input->symbolHint( subControl ).isEmpty() ) + { + return {}; + } + else + { + const auto margins = input->marginHint( subControl ); + const auto panelRect = input->subControlRect( Q::Panel ); + auto rect = panelRect.marginsRemoved( margins ); + + const auto size = input->strutSizeHint( subControl ); + rect.setHeight( size.height() ); + rect.moveCenter( { rect.center().x(), panelRect.center().y() } ); + rect.setLeft( rect.right() - size.width() ); + + return rect; + } + } + + return Inherited::subControlRect( skinnable, contentsRect, subControl ); +} + +QSizeF QskMaterial3TextInputSkinlet::adjustSizeHint( const QskSkinnable* skinnable, Qt::SizeHint which, const QSizeF& oldHint ) const +{ + if ( which != Qt::PreferredSize ) + return QSizeF(); + + auto hint = oldHint; + + const auto input = static_cast< const Q* >( skinnable ); + + if( input->emphasis() == Q::LowEmphasis ) + { + const auto fontHeight = input->effectiveFontHeight( Q::LabelText | Q::Focused ); + hint.rheight() += fontHeight / 2; + } + + if( !input->supportingText().isEmpty() || input->maxLength() != 32767 ) // magic number hardcoded in qquicktextinput.cpp + { + const auto margins = input->marginHint( Q::SupportingText ); + hint.rheight() += margins.top() + input->effectiveFontHeight( Q::SupportingText ) + margins.bottom(); + } + + return hint; +} + +QSGNode* QskMaterial3TextInputSkinlet::updateSubNode( + const QskSkinnable* skinnable, quint8 nodeRole, QSGNode* node ) const +{ + const auto input = static_cast< const Q* >( skinnable ); + + switch ( nodeRole ) + { + case PanelRole: + { + if ( !input->hasPanel() ) + return nullptr; + + if( input->emphasis() == Q::LowEmphasis + && ( input->hasSkinState( Q::TextPopulated ) + || input->hasSkinState( Q::Focused ) + || input->hasSkinState( Q::Editing ) ) ) + { + const auto shape = skinnable->boxShapeHint( Q::Panel ); + const auto borderMetrics = skinnable->boxBorderMetricsHint( Q::Panel ); + const auto borderColors = outlineColors( input ); + const auto gradient = input->gradientHint( Q::Panel ); + + return updateBoxNode( skinnable, node, input->subControlRect( Q::Panel ), + shape, borderMetrics, borderColors, gradient ); + } + else + { + return updateBoxNode( skinnable, node, Q::Panel ); + } + } + + case LeadingIconRole: + { + return updateSymbolNode( skinnable, node, Q::LeadingIcon ); + } + + case SupportingTextRole: + { + return updateTextNode( skinnable, node, input->supportingText(), Q::SupportingText ); + } + + case CharacterCountRole: + { + return updateTextNode( skinnable, node, maxLengthString( input ), Q::CharacterCount ); + } + + case TrailingIconRippleRole: + { + return updateBoxNode( skinnable, node, Q::TrailingIconRipple ); + } + + case TrailingIconRole: + { + return updateSymbolNode( skinnable, node, Q::TrailingIcon ); + } + } + + return Inherited::updateSubNode( skinnable, nodeRole, node ); +} + +#include "moc_QskMaterial3TextInputSkinlet.cpp" diff --git a/designsystems/material3/QskMaterial3TextInputSkinlet.h b/designsystems/material3/QskMaterial3TextInputSkinlet.h new file mode 100644 index 00000000..88077239 --- /dev/null +++ b/designsystems/material3/QskMaterial3TextInputSkinlet.h @@ -0,0 +1,42 @@ +/****************************************************************************** + * QSkinny - Copyright (C) The authors + * SPDX-License-Identifier: BSD-3-Clause + *****************************************************************************/ + +#ifndef QSK_MATERIAL3_INPUT_SKINLET_H +#define QSK_MATERIAL3_INPUT_SKINLET_H + +#include "QskMaterial3Global.h" +#include "QskTextInputSkinlet.h" + +class QSK_MATERIAL3_EXPORT QskMaterial3TextInputSkinlet : public QskTextInputSkinlet +{ + Q_GADGET + + using Inherited = QskTextInputSkinlet; + + public: + enum NodeRole + { + LeadingIconRole = Inherited::RoleCount, + SupportingTextRole, + TrailingIconRippleRole, + TrailingIconRole, + CharacterCountRole + }; + + Q_INVOKABLE QskMaterial3TextInputSkinlet( QskSkin* = nullptr ); + ~QskMaterial3TextInputSkinlet() override; + + QRectF subControlRect( const QskSkinnable*, + const QRectF& rect, QskAspect::Subcontrol ) const override; + + QSizeF adjustSizeHint( const QskSkinnable*, + Qt::SizeHint, const QSizeF& ) const override; + + protected: + QSGNode* updateSubNode( const QskSkinnable*, + quint8 nodeRole, QSGNode* ) const override; +}; + +#endif diff --git a/designsystems/material3/icons/qvg/text_field_cancel.qvg b/designsystems/material3/icons/qvg/text_field_cancel.qvg new file mode 100644 index 00000000..7607d209 Binary files /dev/null and b/designsystems/material3/icons/qvg/text_field_cancel.qvg differ diff --git a/designsystems/material3/icons/qvg/text_field_error.qvg b/designsystems/material3/icons/qvg/text_field_error.qvg new file mode 100644 index 00000000..013508ad Binary files /dev/null and b/designsystems/material3/icons/qvg/text_field_error.qvg differ diff --git a/designsystems/material3/icons/qvg/text_field_search.qvg b/designsystems/material3/icons/qvg/text_field_search.qvg new file mode 100644 index 00000000..b289e352 Binary files /dev/null and b/designsystems/material3/icons/qvg/text_field_search.qvg differ diff --git a/designsystems/material3/icons/text_field_cancel.svg b/designsystems/material3/icons/text_field_cancel.svg new file mode 100644 index 00000000..3c8de038 --- /dev/null +++ b/designsystems/material3/icons/text_field_cancel.svg @@ -0,0 +1,4 @@ + + + + diff --git a/designsystems/material3/icons/text_field_error.svg b/designsystems/material3/icons/text_field_error.svg new file mode 100644 index 00000000..3b7b117b --- /dev/null +++ b/designsystems/material3/icons/text_field_error.svg @@ -0,0 +1,4 @@ + + + + diff --git a/designsystems/material3/icons/text_field_search.svg b/designsystems/material3/icons/text_field_search.svg new file mode 100644 index 00000000..d10c97b6 --- /dev/null +++ b/designsystems/material3/icons/text_field_search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/examples/gallery/inputs/InputPage.cpp b/examples/gallery/inputs/InputPage.cpp index e733edce..30edcb96 100644 --- a/examples/gallery/inputs/InputPage.cpp +++ b/examples/gallery/inputs/InputPage.cpp @@ -61,31 +61,69 @@ namespace } }; - class InputBox : public QskLinearBox + class TextInputBox : public QskLinearBox { public: - InputBox( QQuickItem* parent = nullptr ) - : QskLinearBox( Qt::Horizontal, parent ) + TextInputBox( QQuickItem* parent = nullptr ) + : QskLinearBox( Qt::Horizontal, 3, parent ) { - setSpacing( 20 ); - + setSpacing( 25 ); + setDefaultAlignment( Qt::AlignHCenter | Qt::AlignTop ); { - new QskTextInput( "Edit Me", this ); } + for( const auto& emphasis : { QskTextInput::NoEmphasis, QskTextInput::LowEmphasis } ) { - auto input = new QskTextInput( "Only Read Me", this ); - input->setReadOnly( true ); - input->setSizePolicy( Qt::Horizontal, QskSizePolicy::MinimumExpanding ); - } + { + auto input = new QskTextInput( this ); + input->setEmphasis( emphasis ); + const QString text = ( emphasis == QskTextInput::NoEmphasis ) ? "filled" : "outlined"; + input->setLabelText( text ); + input->setHintText( "hint text" ); + input->setSupportingText( "supporting text" ); + input->setMaxLength( 10 ); + } - { - auto input = new QskTextInput( "12345", this ); - input->setMaxLength( 5 ); - input->setEchoMode( QskTextInput::PasswordEchoOnEdit ); -#if 1 - input->setFixedWidth( 80 ); -#endif + { + auto input = new QskTextInput( this ); + input->setEmphasis( emphasis ); + input->setLeadingIcon( {} ); + input->setLabelText( "no leading icon" ); + input->setHintText( "hint text" ); + input->setSupportingText( "supporting text" ); + } + { + auto input = new QskTextInput( this ); + input->setEmphasis( emphasis ); + input->setLeadingIcon( {} ); + input->setHintText( "no label text" ); + } + + { + auto input = new QskTextInput( this ); + input->setEmphasis( emphasis ); + input->setSkinStateFlag( QskTextInput::Error ); + input->setLabelText( "error" ); + input->setHintText( "hint text" ); + input->setSupportingText( "error text" ); + } + + { + auto input = new QskTextInput( this ); + input->setEmphasis( emphasis ); + input->setReadOnly( true ); + input->setLabelText( "read only" ); + input->setSizePolicy( Qt::Horizontal, QskSizePolicy::MinimumExpanding ); + } + + { + auto input = new QskTextInput( this ); + input->setEmphasis( emphasis ); + input->setMaxLength( 15 ); + input->setLabelText( "password" ); + input->setEchoMode( QskTextInput::Password ); + input->setHintText( "better be strong" ); + } } } }; @@ -111,17 +149,17 @@ InputPage::InputPage( QQuickItem* parent ) auto spinBox = new QskSpinBox( 0.0, 100.0, 1.0 ); spinBox->setSizePolicy( Qt::Horizontal, QskSizePolicy::Fixed ); - auto inputBox = new InputBox(); - inputBox->setSizePolicy( Qt::Vertical, QskSizePolicy::Fixed ); + auto textInputBox = new TextInputBox(); + textInputBox->setSizePolicy( Qt::Vertical, QskSizePolicy::Fixed ); auto vBox = new QskLinearBox( Qt::Vertical ); vBox->setSpacing( 30 ); vBox->setExtraSpacingAt( Qt::RightEdge | Qt::BottomEdge ); - + vBox->addItem( sliders[0].continous ); vBox->addItem( sliders[0].discrete ); - vBox->addItem( inputBox ); vBox->addItem( spinBox ); + vBox->addItem( textInputBox ); auto mainBox = new QskLinearBox( Qt::Horizontal, this ); mainBox->setSpacing( 30 ); diff --git a/playground/gradients/main.cpp b/playground/gradients/main.cpp index e952c8f2..46a0b6e5 100644 --- a/playground/gradients/main.cpp +++ b/playground/gradients/main.cpp @@ -52,7 +52,7 @@ namespace m_input = new QskTextInput( this ); m_input->setValidator( new InputValidator( m_input ) ); - m_input->setText( QString::number( value ) ); + m_input->setInputText( QString::number( value ) ); const QFontMetricsF fm( m_input->font() ); m_input->setFixedWidth( fm.horizontalAdvance( "-0.000" ) ); @@ -65,7 +65,7 @@ namespace qreal value() const { - return m_input->text().toDouble(); + return m_input->inputText().toDouble(); } Q_SIGNALS: diff --git a/playground/inputpanel/main.cpp b/playground/inputpanel/main.cpp index eabc5362..af3f46a4 100644 --- a/playground/inputpanel/main.cpp +++ b/playground/inputpanel/main.cpp @@ -202,24 +202,24 @@ class InputBox : public QskLinearBox setSpacing( 10 ); auto* textInput1 = new QskTextInput( this ); - textInput1->setText( "Press and edit Me." ); + textInput1->setInputText( "Press and edit Me." ); textInput1->setSizePolicy( Qt::Horizontal, QskSizePolicy::Preferred ); auto* textInput2 = new QskTextInput( this ); - textInput2->setText( "Press and edit Me." ); + textInput2->setInputText( "Press and edit Me." ); textInput2->setSizePolicy( Qt::Horizontal, QskSizePolicy::Preferred ); textInput2->setActivationModes( QskTextInput::ActivationOnAll ); auto* textInput3 = new QskTextInput( this ); textInput3->setReadOnly( true ); - textInput3->setText( "Read Only information." ); + textInput3->setInputText( "Read Only information." ); textInput3->setSizePolicy( Qt::Horizontal, QskSizePolicy::Preferred ); auto* textInput4 = new QskTextInput( this ); textInput4->setEchoMode( QskTextInput::Password ); textInput4->setPasswordMaskDelay( 1000 ); textInput4->setMaxLength( 8 ); - textInput4->setText( "12345678" ); + textInput4->setInputText( "12345678" ); textInput4->setSizePolicy( Qt::Horizontal, QskSizePolicy::Preferred ); } }; diff --git a/src/controls/QskTextInput.cpp b/src/controls/QskTextInput.cpp index a4982bcc..149fb12c 100644 --- a/src/controls/QskTextInput.cpp +++ b/src/controls/QskTextInput.cpp @@ -4,8 +4,10 @@ *****************************************************************************/ #include "QskTextInput.h" +#include "QskEvent.h" #include "QskFontRole.h" #include "QskQuick.h" +#include "QskTextInputSkinlet.h" QSK_QT_PRIVATE_BEGIN #include @@ -13,16 +15,20 @@ QSK_QT_PRIVATE_BEGIN QSK_QT_PRIVATE_END QSK_SUBCONTROL( QskTextInput, Panel ) -QSK_SUBCONTROL( QskTextInput, Text ) - -#if 1 -// shouldn't this be a Selected state, TODO ... -QSK_SUBCONTROL( QskTextInput, PanelSelected ) -QSK_SUBCONTROL( QskTextInput, TextSelected ) -#endif +QSK_SUBCONTROL( QskTextInput, LeadingIcon ) +QSK_SUBCONTROL( QskTextInput, LabelText ) +QSK_SUBCONTROL( QskTextInput, InputText ) +QSK_SUBCONTROL( QskTextInput, TrailingIconRipple ) +QSK_SUBCONTROL( QskTextInput, TrailingIcon ) +QSK_SUBCONTROL( QskTextInput, HintText ) +QSK_SUBCONTROL( QskTextInput, SupportingText ) +QSK_SUBCONTROL( QskTextInput, CharacterCount ) 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, TextPopulated, QskAspect::LastUserState << 1 ) static inline void qskPropagateReadOnly( QskTextInput* input ) { @@ -36,13 +42,13 @@ static inline void qskBindSignals( const QQuickTextInput* wrappedInput, QskTextInput* input ) { QObject::connect( wrappedInput, &QQuickTextInput::textChanged, - input, [ input ] { Q_EMIT input->textChanged( input->text() ); } ); + input, [ input ] { Q_EMIT input->inputTextChanged( input->inputText() ); } ); QObject::connect( wrappedInput, &QQuickTextInput::displayTextChanged, input, [ input ] { Q_EMIT input->displayTextChanged( input->displayText() ); } ); QObject::connect( wrappedInput, &QQuickTextInput::textEdited, - input, [ input ] { Q_EMIT input->textEdited( input->text() ); } ); + input, [ input ] { Q_EMIT input->textEdited( input->inputText() ); } ); QObject::connect( wrappedInput, &QQuickTextInput::validatorChanged, input, &QskTextInput::validatorChanged ); @@ -252,7 +258,7 @@ namespace QColor color; - color = input->color( QskTextInput::Text ); + color = input->color( QskTextInput::InputText ); if ( d->color != color ) { d->color = color; @@ -261,14 +267,14 @@ namespace if ( d->hasSelectedText() ) { - color = input->color( QskTextInput::PanelSelected ); + color = input->color( QskTextInput::Panel | QskTextInput::Selected ); if ( d->selectionColor != color ) { d->selectionColor = color; isDirty = true; } - color = input->color( QskTextInput::TextSelected ); + color = input->color( QskTextInput::InputText | QskTextInput::Selected ); if ( d->selectedTextColor != color ) { d->selectedTextColor = color; @@ -288,11 +294,19 @@ namespace class QskTextInput::PrivateData { public: + PrivateData() + : emphasis( NoEmphasis ) + { + } + TextInput* textInput; - QString description; // f.e. used as prompt in QskInputPanel + QString labelText; + QString hintText; + QString supportingText; unsigned int activationModes : 3; bool hasPanel : 1; + int emphasis : 4; }; QskTextInput::QskTextInput( QQuickItem* parent ) @@ -323,12 +337,18 @@ QskTextInput::QskTextInput( QQuickItem* parent ) m_data->textInput->setAcceptedMouseButtons( Qt::NoButton ); initSizePolicy( QskSizePolicy::Expanding, QskSizePolicy::Fixed ); + + connect( m_data->textInput, &QQuickTextInput::textChanged, this, [this]() + { + setSkinStateFlag( TextPopulated, !m_data->textInput->text().isEmpty() ); + update(); // character count might have changed + } ); } QskTextInput::QskTextInput( const QString& text, QQuickItem* parent ) : QskTextInput( parent ) { - m_data->textInput->setText( text ); + setInputText( text ); } QskTextInput::~QskTextInput() @@ -425,7 +445,14 @@ void QskTextInput::keyReleaseEvent( QKeyEvent* event ) void QskTextInput::mousePressEvent( QMouseEvent* event ) { - m_data->textInput->handleEvent( event ); + if( !isReadOnly() && subControlContentsRect( TrailingIcon ).contains( event->pos() ) ) + { + setInputText( {} ); + } + else + { + m_data->textInput->handleEvent( event ); + } if ( !isReadOnly() && !qGuiApp->styleHints()->setFocusOnTouchRelease() ) setEditing( true ); @@ -494,6 +521,36 @@ void QskTextInput::focusOutEvent( QFocusEvent* event ) Inherited::focusOutEvent( event ); } +void QskTextInput::hoverEnterEvent( QHoverEvent* event ) +{ + using A = QskAspect; + + setSkinHint( TrailingIconRipple | Hovered | A::Metric | A::Position, qskHoverPosition( event ) ); + update(); + + Inherited::hoverEnterEvent( event ); +} + +void QskTextInput::hoverMoveEvent( QHoverEvent* event ) +{ + using A = QskAspect; + + setSkinHint( TrailingIconRipple | Hovered | A::Metric | A::Position, qskHoverPosition( event ) ); + update(); + + Inherited::hoverMoveEvent( event ); +} + +void QskTextInput::hoverLeaveEvent( QHoverEvent* event ) +{ + using A = QskAspect; + + setSkinHint( TrailingIconRipple | Hovered | A::Metric | A::Position, QPointF() ); + update(); + + Inherited::hoverLeaveEvent( event ); +} + QSizeF QskTextInput::layoutSizeHint( Qt::SizeHint which, const QSizeF& ) const { if ( which != Qt::PreferredSize ) @@ -511,7 +568,8 @@ QSizeF QskTextInput::layoutSizeHint( Qt::SizeHint which, const QSizeF& ) const hint = hint.expandedTo( strutSizeHint( Panel ) ); } - return hint; + const auto textInputSkinlet = static_cast< const QskTextInputSkinlet* >( effectiveSkinlet() ); + return textInputSkinlet->adjustSizeHint( this, which, hint ); } void QskTextInput::updateLayout() @@ -519,37 +577,94 @@ void QskTextInput::updateLayout() auto input = m_data->textInput; input->updateMetrics(); - qskSetItemGeometry( input, subControlRect( Text ) ); + qskSetItemGeometry( input, subControlRect( InputText ) ); } void QskTextInput::updateNode( QSGNode* node ) { m_data->textInput->updateColors(); + m_data->textInput->updateMetrics(); Inherited::updateNode( node ); } -QString QskTextInput::text() const +void QskTextInput::setEmphasis( Emphasis emphasis ) +{ + if ( emphasis != m_data->emphasis ) + { + m_data->emphasis = emphasis; + + resetImplicitSize(); + update(); + + Q_EMIT emphasisChanged( emphasis ); + } +} + +QskTextInput::Emphasis QskTextInput::emphasis() const +{ + return static_cast< Emphasis >( m_data->emphasis ); +} + +QString QskTextInput::inputText() const { return m_data->textInput->text(); } -void QskTextInput::setText( const QString& text ) +void QskTextInput::setInputText( const QString& text ) { m_data->textInput->setText( text ); } -void QskTextInput::setDescription( const QString& text ) +QString QskTextInput::labelText() const { - if ( m_data->description != text ) + return m_data->labelText; +} + +void QskTextInput::setLabelText( const QString& text ) +{ + if ( m_data->labelText != text ) { - m_data->description = text; - Q_EMIT descriptionChanged( text ); + m_data->labelText = text; + Q_EMIT labelTextChanged( text ); } } -QString QskTextInput::description() const +QskGraphic QskTextInput::leadingIcon() const { - return m_data->description; + return symbolHint( LeadingIcon ); +} + +void QskTextInput::setLeadingIcon( const QskGraphic& icon ) +{ + setSymbolHint( LeadingIcon, icon ); +} + +void QskTextInput::setHintText( const QString& text ) +{ + if ( m_data->hintText != text ) + { + m_data->hintText = text; + Q_EMIT hintTextChanged( text ); + } +} + +QString QskTextInput::hintText() const +{ + return m_data->hintText; +} + +void QskTextInput::setSupportingText( const QString& text ) +{ + if ( m_data->supportingText != text ) + { + m_data->supportingText = text; + Q_EMIT supportingTextChanged( text ); + } +} + +QString QskTextInput::supportingText() const +{ + return m_data->supportingText; } QskTextInput::ActivationModes QskTextInput::activationModes() const @@ -574,7 +689,7 @@ static inline void qskUpdateInputMethodFont( const QskTextInput* input ) void QskTextInput::setFontRole( const QskFontRole& role ) { - if ( setFontRoleHint( Text, role ) ) + if ( setFontRoleHint( InputText, role ) ) { qskUpdateInputMethodFont( this ); Q_EMIT fontRoleChanged(); @@ -583,7 +698,7 @@ void QskTextInput::setFontRole( const QskFontRole& role ) void QskTextInput::resetFontRole() { - if ( resetFontRoleHint( Text ) ) + if ( resetFontRoleHint( InputText ) ) { qskUpdateInputMethodFont( this ); Q_EMIT fontRoleChanged(); @@ -592,12 +707,12 @@ void QskTextInput::resetFontRole() QskFontRole QskTextInput::fontRole() const { - return fontRoleHint( Text ); + return fontRoleHint( InputText ); } void QskTextInput::setAlignment( Qt::Alignment alignment ) { - if ( setAlignmentHint( Text, alignment ) ) + if ( setAlignmentHint( InputText, alignment ) ) { m_data->textInput->setAlignment( alignment ); Q_EMIT alignmentChanged(); @@ -606,7 +721,7 @@ void QskTextInput::setAlignment( Qt::Alignment alignment ) void QskTextInput::resetAlignment() { - if ( resetAlignmentHint( Text ) ) + if ( resetAlignmentHint( InputText ) ) { m_data->textInput->setAlignment( alignment() ); Q_EMIT alignmentChanged(); @@ -615,7 +730,7 @@ void QskTextInput::resetAlignment() Qt::Alignment QskTextInput::alignment() const { - return alignmentHint( Text, Qt::AlignLeft | Qt::AlignTop ); + return alignmentHint( InputText, Qt::AlignLeft | Qt::AlignTop ); } void QskTextInput::setWrapMode( QskTextOptions::WrapMode wrapMode ) @@ -632,7 +747,7 @@ QskTextOptions::WrapMode QskTextInput::wrapMode() const QFont QskTextInput::font() const { - return effectiveFont( QskTextInput::Text ); + return effectiveFont( QskTextInput::InputText ); } bool QskTextInput::isReadOnly() const @@ -701,6 +816,18 @@ void QskTextInput::ensureVisible( int position ) m_data->textInput->ensureVisible( position ); } +QskAspect::Variation QskTextInput::effectiveVariation() const +{ + switch( m_data->emphasis ) + { + case LowEmphasis: + return QskAspect::Small; + + default: + return QskAspect::NoVariation; + } +} + int QskTextInput::cursorPosition() const { return m_data->textInput->cursorPosition(); @@ -922,7 +1049,7 @@ void QskTextInput::setupFrom( const QQuickItem* item ) if ( event.queries() & Qt::ImSurroundingText ) { const auto text = event.value( Qt::ImSurroundingText ).toString(); - setText( text ); + setInputText( text ); } if ( event.queries() & Qt::ImCursorPosition ) diff --git a/src/controls/QskTextInput.h b/src/controls/QskTextInput.h index 3aae8c05..91f4e74e 100644 --- a/src/controls/QskTextInput.h +++ b/src/controls/QskTextInput.h @@ -7,6 +7,7 @@ #define QSK_TEXT_INPUT_H #include "QskControl.h" +#include "QskGraphic.h" #include "QskTextOptions.h" class QValidator; @@ -16,15 +17,22 @@ class QSK_EXPORT QskTextInput : public QskControl { Q_OBJECT - Q_PROPERTY( QString text READ text WRITE setText NOTIFY textChanged USER true) + Q_PROPERTY( QString inputText READ inputText + WRITE setInputText NOTIFY inputTextChanged USER true ) - Q_PROPERTY( QString description READ description - WRITE setDescription NOTIFY descriptionChanged ) + Q_PROPERTY( QString labelText READ labelText + WRITE setLabelText NOTIFY labelTextChanged ) + + Q_PROPERTY( QString hintText READ hintText + WRITE setHintText NOTIFY hintTextChanged ) + + Q_PROPERTY( QString supportingText READ supportingText + WRITE setSupportingText NOTIFY supportingTextChanged ) Q_PROPERTY( QskFontRole fontRole READ fontRole WRITE setFontRole RESET resetFontRole NOTIFY fontRoleChanged ) - Q_PROPERTY( QFont font READ font ) + Q_PROPERTY( QFont font READ font CONSTANT ) Q_PROPERTY( Qt::Alignment alignment READ alignment WRITE setAlignment RESET resetAlignment NOTIFY alignmentChanged ) @@ -52,11 +60,24 @@ class QSK_EXPORT QskTextInput : public QskControl Q_PROPERTY( bool panel READ hasPanel WRITE setPanel NOTIFY panelChanged ) + Q_PROPERTY( Emphasis emphasis READ emphasis + WRITE setEmphasis NOTIFY emphasisChanged ) + using Inherited = QskControl; public: - QSK_SUBCONTROLS( Panel, Text, PanelSelected, TextSelected ) - QSK_STATES( ReadOnly, Editing ) + QSK_SUBCONTROLS( Panel, LeadingIcon, LabelText, InputText, + TrailingIconRipple, TrailingIcon, HintText, SupportingText, + CharacterCount ) + + QSK_STATES( ReadOnly, Editing, Selected, Error, TextPopulated ) + + enum Emphasis + { + LowEmphasis = -1, + NoEmphasis = 0, + }; + Q_ENUM( Emphasis ) enum ActivationMode { @@ -84,16 +105,27 @@ class QSK_EXPORT QskTextInput : public QskControl Q_ENUM( EchoMode ) QskTextInput( QQuickItem* parent = nullptr ); - QskTextInput( const QString& text, QQuickItem* parent = nullptr ); + QskTextInput( const QString&, QQuickItem* parent = nullptr ); ~QskTextInput() override; void setupFrom( const QQuickItem* ); - QString text() const; + void setEmphasis( Emphasis ); + Emphasis emphasis() const; - void setDescription( const QString& ); - QString description() const; + QString inputText() const; + + QString labelText() const; + + QskGraphic leadingIcon() const; + void setLeadingIcon( const QskGraphic& ); + + void setHintText( const QString& ); + QString hintText() const; + + void setSupportingText( const QString& ); + QString supportingText() const; void setPanel( bool ); bool hasPanel() const; @@ -162,22 +194,31 @@ class QSK_EXPORT QskTextInput : public QskControl void ensureVisible( int position ); + QskAspect::Variation effectiveVariation() const override; + public Q_SLOTS: - void setText( const QString& ); + void setInputText( const QString& ); + void setLabelText( const QString& ); + void setEditing( bool ); Q_SIGNALS: + void emphasisChanged( Emphasis ); + void editingChanged( bool ); void activationModesChanged(); void readOnlyChanged( bool ); void panelChanged( bool ); - void textChanged( const QString& ); + void inputTextChanged( const QString& ); + void labelTextChanged( const QString& ); + void displayTextChanged( const QString& ); void textEdited( const QString& ); - void descriptionChanged( const QString& ); + void hintTextChanged( const QString& ); + void supportingTextChanged( const QString& ); void fontRoleChanged(); void alignmentChanged(); @@ -201,6 +242,10 @@ class QSK_EXPORT QskTextInput : public QskControl void focusInEvent( QFocusEvent* ) override; void focusOutEvent( QFocusEvent* ) override; + void hoverEnterEvent( QHoverEvent* ) override; + void hoverMoveEvent( QHoverEvent* ) override; + void hoverLeaveEvent( QHoverEvent* ) override; + void mousePressEvent( QMouseEvent* ) override; void mouseMoveEvent( QMouseEvent* ) override; void mouseReleaseEvent( QMouseEvent* ) override; diff --git a/src/controls/QskTextInputSkinlet.cpp b/src/controls/QskTextInputSkinlet.cpp index 8f0e1b4c..8f56bca6 100644 --- a/src/controls/QskTextInputSkinlet.cpp +++ b/src/controls/QskTextInputSkinlet.cpp @@ -6,10 +6,23 @@ #include "QskTextInputSkinlet.h" #include "QskTextInput.h" +#include "QskBoxBorderColors.h" +#include "QskBoxBorderMetrics.h" +#include "QskBoxShapeMetrics.h" +#include "QskFunctions.h" + +#include + +using Q = QskTextInput; + QskTextInputSkinlet::QskTextInputSkinlet( QskSkin* skin ) : Inherited( skin ) { - setNodeRoles( { PanelRole } ); + setNodeRoles( { + PanelRole, + LabelTextRole, + HintTextRole, + } ); } QskTextInputSkinlet::~QskTextInputSkinlet() @@ -19,30 +32,68 @@ QskTextInputSkinlet::~QskTextInputSkinlet() QRectF QskTextInputSkinlet::subControlRect( const QskSkinnable* skinnable, const QRectF& contentsRect, QskAspect::Subcontrol subControl ) const { - if ( subControl == QskTextInput::Panel ) + const auto input = static_cast< const Q* >( skinnable ); + + if ( subControl == Q::Panel ) { return contentsRect; } - else if ( subControl == QskTextInput::Text ) + else if ( subControl == Q::InputText ) { - return skinnable->subControlContentsRect( contentsRect, QskTextInput::Panel ); + const auto margins = input->marginHint( subControl ); + + const auto leadingIconRect = input->subControlRect( Q::LeadingIcon ); + const auto panelRect = input->subControlRect( Q::Panel ); + auto rect = panelRect; + rect.setLeft( leadingIconRect.right() ); + + 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; } return Inherited::subControlRect( skinnable, contentsRect, subControl ); } +QSizeF QskTextInputSkinlet::adjustSizeHint( const QskSkinnable*, Qt::SizeHint, const QSizeF& hint ) const +{ + return hint; +} + QSGNode* QskTextInputSkinlet::updateSubNode( const QskSkinnable* skinnable, quint8 nodeRole, QSGNode* node ) const { + const auto input = static_cast< const Q* >( skinnable ); + switch ( nodeRole ) { case PanelRole: { - const auto input = static_cast< const QskTextInput* >( skinnable ); if ( !input->hasPanel() ) return nullptr; - return updateBoxNode( skinnable, node, QskTextInput::Panel ); + return updateBoxNode( skinnable, node, Q::Panel ); + } + + case LabelTextRole: + { + return updateTextNode( skinnable, node, input->labelText(), Q::LabelText ); + } + + case HintTextRole: + { + return updateTextNode( skinnable, node, input->hintText(), Q::HintText ); } } diff --git a/src/controls/QskTextInputSkinlet.h b/src/controls/QskTextInputSkinlet.h index 946c6d32..eec8dbc1 100644 --- a/src/controls/QskTextInputSkinlet.h +++ b/src/controls/QskTextInputSkinlet.h @@ -18,6 +18,8 @@ class QSK_EXPORT QskTextInputSkinlet : public QskSkinlet enum NodeRole { PanelRole, + LabelTextRole, + HintTextRole, RoleCount }; @@ -27,6 +29,9 @@ class QSK_EXPORT QskTextInputSkinlet : public QskSkinlet QRectF subControlRect( const QskSkinnable*, const QRectF& rect, QskAspect::Subcontrol ) const override; + virtual QSizeF adjustSizeHint( const QskSkinnable*, + Qt::SizeHint, const QSizeF& ) const; + protected: QSGNode* updateSubNode( const QskSkinnable*, quint8 nodeRole, QSGNode* ) const override; diff --git a/src/inputpanel/QskInputPanelBox.cpp b/src/inputpanel/QskInputPanelBox.cpp index 46cda216..90991d0f 100644 --- a/src/inputpanel/QskInputPanelBox.cpp +++ b/src/inputpanel/QskInputPanelBox.cpp @@ -35,7 +35,7 @@ namespace if ( subControl == QskTextInput::Panel ) return m_panelBox->effectiveSubcontrol( QskInputPanelBox::ProxyPanel ); - if ( subControl == QskTextInput::Text ) + if ( subControl == QskTextInput::InputText ) return m_panelBox->effectiveSubcontrol( QskInputPanelBox::ProxyText ); return subControl; @@ -187,7 +187,7 @@ QskAspect::Subcontrol QskInputPanelBox::substitutedSubcontrol( return QskTextInput::Panel; if ( subControl == QskInputPanelBox::ProxyText ) - return QskTextInput::Text; + return QskTextInput::InputText; #endif return subControl;