Skip to content

Commit

Permalink
QskSlider: Adapt to new Material3 style
Browse files Browse the repository at this point in the history 
( ValueLabel a.k.a Tooltip is not done yet )
  • Loading branch information
@uwerat
uwerat committed Nov 7, 2024
1 parent 05bf6ce commit 525ca3b
Show file tree
Hide file tree
Showing 7 changed files with 244 additions and 102 deletions.
13 changes: 7 additions & 6 deletions designsystems/fluent2/QskFluent2Skin.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1437,11 +1437,11 @@ void Editor::setupSliderMetrics()
setPadding( Q::Panel | A::Horizontal, QskMargins( 0.5 * extent, 0 ) );
setPadding( Q::Panel | A::Vertical, QskMargins( 0, 0.5 * extent ) );

setMetric( Q::Groove | A::Size, 4_px );
setBoxShape( Q::Groove, 100, Qt::RelativeSize );

setMetric( Q::Fill | A::Size, 4_px );
setBoxShape( Q::Fill, 100, Qt::RelativeSize );
for ( auto subControl : { Q::Groove, Q::Fill } )
{
setMetric( subControl | A::Size, 4_px );
setBoxShape( subControl, 100, Qt::RelativeSize );
}

const auto shadowSpread = 1_px;

Expand Down Expand Up @@ -1503,8 +1503,9 @@ void Editor::setupSliderColors(
}

grooveColor = rgbSolid( grooveColor, pal.background.solid.base );
setGradient( Q::Groove | section | state, grooveColor );

setGradient( Q::Groove | section | state, grooveColor );
setGradient( Q::Fill | section | state, grooveColor );
setGradient( Q::Handle | section | state, handleColor );
}
}
Expand Down
78 changes: 48 additions & 30 deletions designsystems/material3/QskMaterial3Skin.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -893,55 +893,65 @@ void Editor::setupSlider()
using A = QskAspect;
using Q = QskSlider;

const qreal extent = 30_dp;
const QSizeF sliderSize( 48_dp, 44_dp );
setStrutSize( Q::Panel | A::Horizontal, sliderSize );
setStrutSize( Q::Panel | A::Vertical, sliderSize.transposed() );

// Panel

setMetric( Q::Panel | A::Size, extent );
setBoxShape( Q::Panel, 0 );
setBoxBorderMetrics( Q::Panel, 0 );
setGradient( Q::Panel, QskGradient() );

setPadding( Q::Panel | A::Horizontal, QskMargins( 0.5 * extent, 0 ) );
setPadding( Q::Panel | A::Vertical, QskMargins( 0, 0.5 * extent ) );

// Groove, Fill

for ( auto subControl : { Q::Groove, Q::Fill } )
{
setPadding( subControl, 0 );

setBoxShape( subControl, 0 );
setBoxBorderMetrics( subControl, 0 );
}

setMetric( Q::Groove | A::Size, 4_dp );
setMetric( Q::Fill | A::Size, 6_dp );
setBoxShape( Q::Groove | A::Horizontal, { 0, 100, 0, 100, Qt::RelativeSize } );
setBoxShape( Q::Groove | A::Vertical, { 100, 100, 0, 0, Qt::RelativeSize } );
setMetric( Q::Groove | A::Size, 16_dp );
setMargin( Q::Groove | A::Horizontal, { 6_dp, 0, 0, 0 } );
setMargin( Q::Groove | A::Vertical, {0, 0, 0, 6_dp } );

setGradient( Q::Groove, m_pal.primaryContainer );
setGradient( Q::Groove | Q::Disabled, m_pal.onSurface12 );

setBoxShape( Q::Fill | A::Horizontal, { 100, 0, 100, 0, Qt::RelativeSize } );
setBoxShape( Q::Fill | A::Vertical, { 0, 0, 100, 100, Qt::RelativeSize } );
setMetric( Q::Fill | A::Size, 16_dp );
setMargin( Q::Fill | A::Horizontal, { 0, 0, 6_dp, 0 } );
setMargin( Q::Fill | A::Vertical, {0, 6_dp, 0, 0 } );

setGradient( Q::Fill, m_pal.primary );
setGradient( Q::Fill | Q::Disabled, m_pal.onSurface38 );

setBoxShape( Q::Handle, 100, Qt::RelativeSize );
setBoxBorderMetrics( Q::Handle, 0 );

setStrutSize( Q::Handle, 20_dp, 20_dp );
const QSizeF handleSize( 4_dp, 44_dp );
const QSizeF handleSizeFocusedPressed( 2_dp, 44_dp );
setStrutSize( Q::Handle | A::Horizontal, handleSize );
setStrutSize( Q::Handle | A::Horizontal, handleSizeFocusedPressed,
{ QskStateCombination::Combination, Q::Focused | Q::Pressed } );

setStrutSize( Q::Handle | A::Vertical, handleSize.transposed() );
setStrutSize( Q::Handle | A::Vertical, handleSizeFocusedPressed.transposed(),
{ QskStateCombination::Combination, Q::Focused | Q::Pressed } );

setGradient( Q::Handle, m_pal.primary );
setGradient( Q::Handle | Q::Pressed, m_pal.primary );

const auto disabledColor = flattenedColor( m_pal.onSurface, m_pal.background, 0.38 );
setGradient( Q::Handle | Q::Disabled, disabledColor );

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 );
for( auto indicator : { Q::GrooveStopIndicators, Q::FillStopIndicators } )
{
setStrutSize( indicator, { 4_dp, 4_dp } );
setBoxShape( indicator, 100, Qt::RelativeSize );
}

const auto p = 6_dp;
setPadding( Q::GrooveStopIndicators | A::Horizontal, { p, 0, p, 0 } );
setPadding( Q::GrooveStopIndicators | A::Vertical, { 0, p, 0, p } );
setPadding( Q::FillStopIndicators | A::Horizontal, { p, 0, p, 0 } );
setPadding( Q::FillStopIndicators | A::Vertical, { 0, p, 0, p } );

setGradient( Q::GrooveStopIndicators, m_pal.primary );
setGradient( Q::GrooveStopIndicators | Q::Disabled, m_pal.onSurface );
setGradient( Q::FillStopIndicators, m_pal.secondaryContainer );
setGradient( Q::FillStopIndicators | Q::Disabled, m_pal.inverseOnSurface );

// move the handle smoothly, when using keys
// move the handle smoothly when using keys
setAnimation( Q::Handle | A::Metric | A::Position, 2 * qskDuration );
setAnimation( Q::Handle | A::Metric | A::Position | Q::Pressed, 0 );
}
Expand Down Expand Up @@ -1406,6 +1416,7 @@ QskMaterial3Theme::QskMaterial3Theme( QskSkin::ColorScheme colorScheme,
onPrimary = color.toned( 100 ).rgb();
primaryContainer = color.toned( 90 ).rgb();
onPrimaryContainer = color.toned( 10 ).rgb();
inversePrimary = color.toned( 80 ).rgb();
}

{
Expand Down Expand Up @@ -1442,6 +1453,9 @@ QskMaterial3Theme::QskMaterial3Theme( QskSkin::ColorScheme colorScheme,
onBackground = color.toned( 10 ).rgb();
surface = color.toned( 99 ).rgb();
onSurface = color.toned( 10 ).rgb();
inverseSurface = color.toned( 20 ).rgb();
inverseOnSurface = color.toned( 95 ).rgb();
scrim = color.toned( 0 ).rgb();
shadow = color.toned( 0 ).rgb();
}

Expand All @@ -1465,6 +1479,7 @@ QskMaterial3Theme::QskMaterial3Theme( QskSkin::ColorScheme colorScheme,
onPrimary = color.toned( 20 ).rgb();
primaryContainer = color.toned( 30 ).rgb();
onPrimaryContainer = color.toned( 90 ).rgb();
inversePrimary = color.toned( 40 ).rgb();
}

{
Expand Down Expand Up @@ -1501,6 +1516,9 @@ QskMaterial3Theme::QskMaterial3Theme( QskSkin::ColorScheme colorScheme,
onBackground = color.toned( 90 ).rgb();
surface = color.toned( 10 ).rgb();
onSurface = color.toned( 80 ).rgb();
inverseSurface = color.toned( 90 ).rgb();
inverseOnSurface = color.toned( 20 ).rgb();
scrim = color.toned( 0 ).rgb();
shadow = color.toned( 0 ).rgb();
}

Expand Down
5 changes: 5 additions & 0 deletions designsystems/material3/QskMaterial3Skin.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,11 @@ class QSK_MATERIAL3_EXPORT QskMaterial3Theme
QRgb surfaceContainerHighest;
QRgb surfaceContainerHighest38;

QRgb inverseSurface;
QRgb inverseOnSurface;
QRgb inversePrimary;

QRgb scrim;
QRgb shadow;

QskShadowMetrics elevation0;
Expand Down
13 changes: 11 additions & 2 deletions src/controls/QskSlider.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ QSK_SUBCONTROL( QskSlider, Groove )
QSK_SUBCONTROL( QskSlider, Fill )
QSK_SUBCONTROL( QskSlider, Scale )
QSK_SUBCONTROL( QskSlider, Handle )
QSK_SUBCONTROL( QskSlider, Halo )
QSK_SUBCONTROL( QskSlider, GrooveStopIndicators )
QSK_SUBCONTROL( QskSlider, FillStopIndicators )

QSK_SYSTEM_STATE( QskSlider, Pressed, QskAspect::FirstSystemState << 2 )

Expand Down Expand Up @@ -117,7 +118,15 @@ QSizeF QskSlider::handleSize() const

QRectF QskSlider::handleRect() const
{
return subControlRect( QskSlider::Handle );
auto rect = subControlRect( Handle );

#if 1 // minimum handle strut size hardcoded here for now
const QSizeF strutSize( 60, 60 );
const auto w = qMax( ( strutSize.width() - rect.width() ) / 2, 0.0 );
const auto h = qMax( ( strutSize.height() - rect.height() ) / 2, 0.0 );
#endif

return rect.marginsAdded( { w, h, w, h } );
}

void QskSlider::mousePressEvent( QMouseEvent* event )
Expand Down
3 changes: 2 additions & 1 deletion src/controls/QskSlider.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ class QSK_EXPORT QskSlider : public QskBoundedValueInput
using Inherited = QskBoundedValueInput;

public:
QSK_SUBCONTROLS( Panel, Groove, Fill, Scale, Handle, Halo )
QSK_SUBCONTROLS( Panel, Groove, Fill, Scale, Handle,
GrooveStopIndicators, FillStopIndicators )
QSK_STATES( Pressed )

explicit QskSlider( QQuickItem* parent = nullptr );
Expand Down
Loading

0 comments on commit 525ca3b

Please sign in to comment.