Skip to content

Commit

Permalink
using halo instead of ripple
Browse files Browse the repository at this point in the history
  • Loading branch information
@uwerat
uwerat committed Oct 23, 2024
1 parent c5f8c54 commit f3aed21
Show file tree
Hide file tree
Showing 19 changed files with 102 additions and 103 deletions.
19 changes: 9 additions & 10 deletions designsystems/fluent2/QskFluent2Skin.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1445,12 +1445,11 @@ void Editor::setupSliderMetrics()
setBoxShape( Q::Handle, 100, Qt::RelativeSize );
setBoxBorderMetrics( Q::Handle, 1_px );

setStrutSize( Q::Ripple, { 12_px, 12_px } );
setBoxShape( Q::Ripple, 100, Qt::RelativeSize );
setStrutSize( Q::Halo, { 12_px, 12_px } );
setBoxShape( Q::Halo, 100, Qt::RelativeSize );

setStrutSize( Q::Ripple | Q::Hovered, { 14_px, 14_px } );

setStrutSize( Q::Ripple | Q::Pressed, { 10_px, 10_px } );
setStrutSize( Q::Halo | Q::Hovered, { 14_px, 14_px } );
setStrutSize( Q::Halo | Q::Pressed, { 10_px, 10_px } );
}

void Editor::setupSliderColors(
Expand All @@ -1470,32 +1469,32 @@ void Editor::setupSliderColors(

for ( auto state : { A::NoState, Q::Pressed, Q::Disabled } )
{
QRgb grooveColor, fillColor, rippleColor;
QRgb grooveColor, fillColor, haloColor;

if ( state == A::NoState )
{
grooveColor = pal.fillColor.controlStrong.defaultColor;
fillColor = pal.fillColor.accent.defaultColor;
rippleColor = fillColor;
haloColor = fillColor;
}
else if ( state == Q::Pressed )
{
grooveColor = pal.fillColor.controlStrong.defaultColor;
fillColor = pal.fillColor.accent.defaultColor;
rippleColor = pal.fillColor.accent.tertiary;
haloColor = pal.fillColor.accent.tertiary;
}
else if ( state == Q::Disabled )
{
grooveColor = pal.fillColor.controlStrong.disabled;
fillColor = pal.fillColor.accent.disabled;
rippleColor = grooveColor;
haloColor = grooveColor;
}

grooveColor = rgbSolid( grooveColor, pal.background.solid.base );

setGradient( Q::Groove | section | state, grooveColor );
setGradient( Q::Fill | section | state, fillColor );
setGradient( Q::Ripple | section | state, rippleColor );
setGradient( Q::Halo | section | state, haloColor );
}
}

Expand Down
2 changes: 1 addition & 1 deletion designsystems/fusion/QskFusionSkin.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -489,7 +489,7 @@ void Editor::setupRadioBox()

setStrutSize( Q::CheckIndicatorPanel, 20_dp, 20_dp );

for ( auto subControl : { Q::CheckIndicatorPanel, Q::CheckIndicator, Q::Ripple } )
for ( auto subControl : { Q::CheckIndicatorPanel, Q::CheckIndicator, Q::Halo } )
setBoxShape( subControl, 100, Qt::RelativeSize ); // circular

setBoxBorderMetrics( Q::CheckIndicatorPanel, 1_dp );
Expand Down
64 changes: 32 additions & 32 deletions designsystems/material3/QskMaterial3Skin.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,9 +232,9 @@ void Editor::setupCheckBox()
setSymbol( aspect | Q::Error, checkMark );
}

setStrutSize( Q::Ripple, 40_dp, 40_dp );
setBoxShape( Q::Ripple, 100, Qt::RelativeSize );
setGradient( Q::Ripple, Qt::transparent );
setStrutSize( Q::Halo, 40_dp, 40_dp );
setBoxShape( Q::Halo, 100, Qt::RelativeSize );
setGradient( Q::Halo, Qt::transparent );

setColor( Q::Text, m_pal.onBackground ); // not mentioned in the specs

Expand All @@ -252,25 +252,25 @@ void Editor::setupCheckBox()

// 3. Hovered

setGradient( Q::Ripple | Q::Hovered | Q::Checked, m_pal.primary8 );
setGradient( Q::Ripple | Q::Hovered, m_pal.onSurface8 );
setGradient( Q::Ripple | Q::Error | Q::Hovered, m_pal.error8 );
setGradient( Q::Ripple | Q::Error | Q::Hovered | Q::Checked, m_pal.error8 );
setGradient( Q::Halo | Q::Hovered | Q::Checked, m_pal.primary8 );
setGradient( Q::Halo | Q::Hovered, m_pal.onSurface8 );
setGradient( Q::Halo | Q::Error | Q::Hovered, m_pal.error8 );
setGradient( Q::Halo | Q::Error | Q::Hovered | Q::Checked, m_pal.error8 );

// 4. Focused

setGradient( Q::Ripple | Q::Focused | Q::Checked, m_pal.primary12 );
setGradient( Q::Ripple | Q::Focused, m_pal.onSurface12 );
setGradient( Q::Ripple | Q::Error | Q::Focused, m_pal.error12 );
setGradient( Q::Ripple | Q::Error | Q::Focused | Q::Checked, m_pal.error12 );
setGradient( Q::Halo | Q::Focused | Q::Checked, m_pal.primary12 );
setGradient( Q::Halo | Q::Focused, m_pal.onSurface12 );
setGradient( Q::Halo | Q::Error | Q::Focused, m_pal.error12 );
setGradient( Q::Halo | Q::Error | Q::Focused | Q::Checked, m_pal.error12 );

// 5. Pressed

setGradient( Q::Ripple | Q::Pressed, m_pal.primary12 );
setGradient( Q::Ripple | Q::Pressed | Q::Checked, m_pal.primary12 );
setGradient( Q::Ripple | Q::Hovered | Q::Pressed, m_pal.primary12 );
setGradient( Q::Ripple | Q::Error | Q::Pressed, m_pal.error12 );
setGradient( Q::Ripple | Q::Error | Q::Pressed | Q::Checked, m_pal.error12 );
setGradient( Q::Halo | Q::Pressed, m_pal.primary12 );
setGradient( Q::Halo | Q::Pressed | Q::Checked, m_pal.primary12 );
setGradient( Q::Halo | Q::Hovered | Q::Pressed, m_pal.primary12 );
setGradient( Q::Halo | Q::Error | Q::Pressed, m_pal.error12 );
setGradient( Q::Halo | Q::Error | Q::Pressed | Q::Checked, m_pal.error12 );
}

void Editor::setupComboBox()
Expand Down Expand Up @@ -480,9 +480,9 @@ void Editor::setupRadioBox()
setSpacing( Q::Button, 10_dp );

setStrutSize( Q::CheckIndicatorPanel, 20_dp, 20_dp );
setStrutSize( Q::Ripple, 40_dp, 40_dp );
setStrutSize( Q::Halo, 40_dp, 40_dp );

for ( auto subControl : { Q::CheckIndicatorPanel, Q::CheckIndicator, Q::Ripple } )
for ( auto subControl : { Q::CheckIndicatorPanel, Q::CheckIndicator, Q::Halo } )
setBoxShape( subControl, 100, Qt::RelativeSize ); // circular

setBoxBorderMetrics( Q::CheckIndicatorPanel, 2_dp );
Expand All @@ -494,8 +494,8 @@ void Editor::setupRadioBox()
setColor( Q::Text, m_pal.onBackground );
setColor( Q::Text | Q::Disabled, m_pal.onSurface38 );

setColor( Q::Ripple, stateLayerColor( m_pal.onSurface, m_pal.focusOpacity ) );
setColor( Q::Ripple | Q::Selected,
setColor( Q::Halo, stateLayerColor( m_pal.onSurface, m_pal.focusOpacity ) );
setColor( Q::Halo | Q::Selected,
stateLayerColor( m_pal.primary, m_pal.focusOpacity ) );

setColor( Q::CheckIndicator, Qt::transparent);
Expand All @@ -509,7 +509,7 @@ void Editor::setupRadioBox()
setBoxBorderColors(
Q::CheckIndicatorPanel | Q::Disabled | Q::Selected, m_pal.onSurface38 );

setAnimation( Q::Ripple | A::Metric | A::Position, qskDuration );
setAnimation( Q::Halo | A::Metric | A::Position, qskDuration );
}

void Editor::setupFocusIndicator()
Expand Down Expand Up @@ -881,11 +881,11 @@ void Editor::setupSlider()
const auto disabledColor = flattenedColor( m_pal.onSurface, m_pal.background, 0.38 );
setGradient( Q::Handle | Q::Disabled, disabledColor );

setStrutSize( Q::Ripple, 40_dp, 40_dp );
setBoxShape( Q::Ripple, 100, Qt::RelativeSize );
setGradient( Q::Ripple, Qt::transparent );
setGradient( Q::Ripple | Q::Hovered, m_pal.primary12 );
setGradient( Q::Ripple | Q::Pressed, m_pal.primary12 );
setStrutSize( Q::Halo, 40_dp, 40_dp );
setBoxShape( Q::Halo, 100, Qt::RelativeSize );
setGradient( Q::Halo, Qt::transparent );
setGradient( Q::Halo | Q::Hovered, m_pal.primary12 );
setGradient( Q::Halo | Q::Pressed, m_pal.primary12 );

// move the handle smoothly, when using keys
setAnimation( Q::Handle | A::Metric | A::Position, 2 * qskDuration );
Expand Down Expand Up @@ -1003,13 +1003,13 @@ void Editor::setupSwitchButton()
setGradient( Q::Handle | Q::Disabled | Q::Checked, m_pal.surface );

// just to keep the strut size the same at all times:
setStrutSize( Q::Ripple, 40_dp, 40_dp );
setGradient( Q::Ripple, Qt::transparent );
setStrutSize( Q::Halo, 40_dp, 40_dp );
setGradient( Q::Halo, Qt::transparent );

setStrutSize( Q::Ripple | Q::Hovered, 40_dp, 40_dp );
setBoxShape( Q::Ripple, 100, Qt::RelativeSize );
setGradient( Q::Ripple | Q::Hovered, stateLayerColor( m_pal.onSurface, m_pal.focusOpacity ) );
setGradient( Q::Ripple | Q::Hovered | Q::Checked,
setStrutSize( Q::Halo | Q::Hovered, 40_dp, 40_dp );
setBoxShape( Q::Halo, 100, Qt::RelativeSize );
setGradient( Q::Halo | Q::Hovered, stateLayerColor( m_pal.onSurface, m_pal.focusOpacity ) );
setGradient( Q::Halo | Q::Hovered | Q::Checked,
stateLayerColor( m_pal.primary, m_pal.focusOpacity ) );

setBoxBorderColors( Q::Handle, m_pal.outline );
Expand Down
2 changes: 1 addition & 1 deletion src/controls/QskCheckBox.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ QSK_SUBCONTROL( QskCheckBox, Panel )
QSK_SUBCONTROL( QskCheckBox, Box )
QSK_SUBCONTROL( QskCheckBox, Indicator )
QSK_SUBCONTROL( QskCheckBox, Text )
QSK_SUBCONTROL( QskCheckBox, Ripple )
QSK_SUBCONTROL( QskCheckBox, Halo )

QSK_SYSTEM_STATE( QskCheckBox, Error, QskAspect::FirstSystemState << 1 )

Expand Down
2 changes: 1 addition & 1 deletion src/controls/QskCheckBox.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ class QSK_EXPORT QskCheckBox : public QskAbstractButton
using Inherited = QskAbstractButton;

public:
QSK_SUBCONTROLS( Panel, Box, Indicator, Text, Ripple )
QSK_SUBCONTROLS( Panel, Box, Indicator, Text, Halo )
QSK_STATES( Error )

QskCheckBox( QQuickItem* parent = nullptr );
Expand Down
18 changes: 9 additions & 9 deletions src/controls/QskCheckBoxSkinlet.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
QskCheckBoxSkinlet::QskCheckBoxSkinlet( QskSkin* skin )
: QskSkinlet( skin )
{
setNodeRoles( { BoxRole, IndicatorRole, TextRole, RippleRole } );
setNodeRoles( { BoxRole, IndicatorRole, TextRole, HaloRole } );
}

QskCheckBoxSkinlet::~QskCheckBoxSkinlet()
Expand Down Expand Up @@ -40,8 +40,8 @@ QRectF QskCheckBoxSkinlet::subControlRect( const QskSkinnable* skinnable,
if ( subControl == Q::Text )
return textRect( checkBox, contentsRect );

if ( subControl == Q::Ripple )
return rippleRect( checkBox, contentsRect );
if ( subControl == Q::Halo )
return haloRect( checkBox, contentsRect );

return contentsRect;
}
Expand Down Expand Up @@ -83,14 +83,14 @@ QRectF QskCheckBoxSkinlet::boxRect(
return r;
}

QRectF QskCheckBoxSkinlet::rippleRect(
QRectF QskCheckBoxSkinlet::haloRect(
const QskCheckBox* checkBox, const QRectF& rect ) const
{
const auto rippleSize = checkBox->strutSizeHint( QskCheckBox::Ripple );
const auto haloSize = checkBox->strutSizeHint( QskCheckBox::Halo );
const auto boxSize = checkBox->strutSizeHint( QskCheckBox::Box );

const auto w = ( rippleSize.width() - boxSize.width() ) / 2;
const auto h = ( rippleSize.height() - boxSize.height() ) / 2;
const auto w = ( haloSize.width() - boxSize.width() ) / 2;
const auto h = ( haloSize.height() - boxSize.height() ) / 2;

auto r = boxRect( checkBox, rect );
r = r.marginsAdded( { w, h, w, h } );
Expand Down Expand Up @@ -119,8 +119,8 @@ QSGNode* QskCheckBoxSkinlet::updateSubNode(
case TextRole:
return updateTextNode( checkBox, node );

case RippleRole:
return updateBoxNode( checkBox, node, Q::Ripple );
case HaloRole:
return updateBoxNode( checkBox, node, Q::Halo );
}

return Inherited::updateSubNode( skinnable, nodeRole, node );
Expand Down
4 changes: 2 additions & 2 deletions src/controls/QskCheckBoxSkinlet.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ class QSK_EXPORT QskCheckBoxSkinlet : public QskSkinlet
BoxRole,
IndicatorRole,
TextRole,
RippleRole,
HaloRole,

RoleCount
};
Expand All @@ -44,7 +44,7 @@ class QSK_EXPORT QskCheckBoxSkinlet : public QskSkinlet
private:
QRectF textRect( const QskCheckBox*, const QRectF& ) const;
QRectF boxRect( const QskCheckBox*, const QRectF& ) const;
QRectF rippleRect( const QskCheckBox*, const QRectF& ) const;
QRectF haloRect( const QskCheckBox*, const QRectF& ) const;

QSGNode* updateTextNode( const QskCheckBox*, QSGNode* ) const;
};
Expand Down
10 changes: 5 additions & 5 deletions src/controls/QskRadioBox.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ QSK_SUBCONTROL( QskRadioBox, Button )
QSK_SUBCONTROL( QskRadioBox, CheckIndicatorPanel )
QSK_SUBCONTROL( QskRadioBox, CheckIndicator )
QSK_SUBCONTROL( QskRadioBox, Text )
QSK_SUBCONTROL( QskRadioBox, Ripple )
QSK_SUBCONTROL( QskRadioBox, Halo )

QSK_STATE( QskRadioBox, Selected, QskAspect::FirstUserState << 1 )
QSK_STATE( QskRadioBox, Pressed, QskAspect::FirstUserState << 2 )
Expand All @@ -38,7 +38,7 @@ QskRadioBox::QskRadioBox( QQuickItem* parent )
setFocusPolicy( Qt::StrongFocus );
setAcceptedMouseButtons( Qt::LeftButton );

setPositionHint( Ripple, -1 );
setPositionHint( Halo, -1 );

setAcceptHoverEvents( true );
}
Expand Down Expand Up @@ -182,7 +182,7 @@ void QskRadioBox::keyPressEvent( QKeyEvent* event )
{
setFocusedIndex( nextTabIndex );

const auto aspect = Ripple | QskAspect::Metric | QskAspect::Position;
const auto aspect = Halo | QskAspect::Metric | QskAspect::Position;
const auto hint = animationHint( aspect | skinStates() );

if( hint.isValid() )
Expand Down Expand Up @@ -277,7 +277,7 @@ void QskRadioBox::setHoveredIndex( int index )
return;

m_data->hoveredIndex = index;
setPositionHint( Ripple | Hovered, index );
setPositionHint( Halo | Hovered, index );

update();
}
Expand All @@ -288,7 +288,7 @@ void QskRadioBox::setFocusedIndex( int index )
return;

m_data->focusedIndex = index;
setPositionHint( Ripple, index );
setPositionHint( Halo, index );

update();

Expand Down
2 changes: 1 addition & 1 deletion src/controls/QskRadioBox.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ class QSK_EXPORT QskRadioBox : public QskControl
using Inherited = QskControl;

public:
QSK_SUBCONTROLS( Panel, Button, CheckIndicatorPanel, CheckIndicator, Text, Ripple )
QSK_SUBCONTROLS( Panel, Button, CheckIndicatorPanel, CheckIndicator, Text, Halo )
QSK_STATES( Selected, Pressed )

QskRadioBox( QQuickItem* parent = nullptr );
Expand Down
20 changes: 10 additions & 10 deletions src/controls/QskRadioBoxSkinlet.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ namespace
QskRadioBoxSkinlet::QskRadioBoxSkinlet( QskSkin* )
{
setNodeRoles( { PanelRole, ButtonRole, CheckPanelRole,
CheckIndicatorRole, TextRole, RippleRole } );
CheckIndicatorRole, TextRole, HaloRole } );
}

QskRadioBoxSkinlet::~QskRadioBoxSkinlet()
Expand All @@ -54,8 +54,8 @@ QRectF QskRadioBoxSkinlet::subControlRect( const QskSkinnable* skinnable,

auto radioBox = static_cast< const QskRadioBox* >( skinnable );

if( subcontrol == Q::Ripple )
return rippleRect( radioBox, contentsRect );
if( subcontrol == Q::Halo )
return haloRect( radioBox, contentsRect );

return contentsRect;
}
Expand All @@ -82,8 +82,8 @@ QSGNode* QskRadioBoxSkinlet::updateSubNode( const QskSkinnable* skinnable,
case TextRole:
return updateSeriesNode( skinnable, Q::Text, node );

case RippleRole:
return updateBoxNode( skinnable, node, Q::Ripple );
case HaloRole:
return updateBoxNode( skinnable, node, Q::Halo );
}

return Inherited::updateSubNode( skinnable, nodeRole, node );
Expand All @@ -96,17 +96,17 @@ int QskRadioBoxSkinlet::sampleCount(
return radioBox->options().count();
}

QRectF QskRadioBoxSkinlet::rippleRect(
QRectF QskRadioBoxSkinlet::haloRect(
const QskRadioBox* radioBox, const QRectF& rect ) const
{
using Q = QskRadioBox;

const auto index = qFloor( radioBox->positionHint( Q::Ripple ) );
const auto index = qFloor( radioBox->positionHint( Q::Halo ) );
if( index < 0 )
return QRectF();

QRectF r;
r.setSize( radioBox->strutSizeHint( Q::Ripple ) );
r.setSize( radioBox->strutSizeHint( Q::Halo ) );

if ( !r.isEmpty() )
{
Expand Down Expand Up @@ -219,12 +219,12 @@ QskAspect::States QskRadioBoxSkinlet::sampleStates(
states |= Q::Pressed;

#if 1
if( radioBox->positionHint( Q::Ripple | Q::Hovered ) == index )
if( radioBox->positionHint( Q::Halo | Q::Hovered ) == index )
states |= Q::Hovered;
else
states &= ~Q::Hovered;

if( radioBox->positionHint( Q::Ripple ) == index )
if( radioBox->positionHint( Q::Halo ) == index )
states |= Q::Focused;
else
states &= ~Q::Focused;
Expand Down
Loading

0 comments on commit f3aed21

Please sign in to comment.