QskSlider: Adapt to new Material3 style

Resolves #391
This commit is contained in:
Peter Hartmann 2024-04-30 13:03:59 +02:00
parent 36ac8d95d6
commit e7b64bf4a0
3 changed files with 57 additions and 39 deletions

View File

@ -839,41 +839,34 @@ 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 );
setStrutSize( Q::Handle | A::Horizontal, handleSize );
setStrutSize( Q::Handle | A::Vertical, handleSize.transposed() );
setGradient( Q::Handle, m_pal.primary );
setGradient( Q::Handle | Q::Pressed, m_pal.primary );
@ -881,13 +874,7 @@ 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 );
// 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 );
}
@ -1309,6 +1296,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();
}
{
@ -1345,6 +1333,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();
}
@ -1368,6 +1359,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();
}
{
@ -1404,6 +1396,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();
}

View File

@ -81,6 +81,11 @@ class QSK_MATERIAL3_EXPORT QskMaterial3Theme
QRgb surfaceContainerHighest;
QRgb inverseSurface;
QRgb inverseOnSurface;
QRgb inversePrimary;
QRgb scrim;
QRgb shadow;
QskShadowMetrics elevation0;

View File

@ -161,9 +161,24 @@ QRectF QskSliderSkinlet::innerRect( const QskSlider* slider,
}
QRectF QskSliderSkinlet::grooveRect(
const QskSlider* slider, const QRectF& rect ) const
const QskSlider* slider, const QRectF& contentsRect ) const
{
return innerRect( slider, rect, QskSlider::Groove );
const auto r = qskInnerPanelRect( slider, contentsRect );
auto grooveRect = innerRect( slider, contentsRect, QskSlider::Groove );
const auto pos = qBound( 0.0, slider->handlePosition(), 1.0 );
if ( slider->orientation() == Qt::Horizontal )
{
grooveRect.setLeft( r.left() + pos * r.width() );
grooveRect.setRight( r.right() );
}
else
{
grooveRect.setBottom( r.bottom() - pos * r.height() );
grooveRect.setTop( r.top() );
}
return grooveRect;
}
QRectF QskSliderSkinlet::scaleRect(
@ -254,14 +269,17 @@ QSizeF QskSliderSkinlet::sizeHint( const QskSkinnable* skinnable,
if ( which != Qt::PreferredSize )
return QSizeF();
const auto slider = static_cast< const QskSlider* >( skinnable );
const auto panelHint = skinnable->strutSizeHint( QskSlider::Panel );
const auto grooveHint = skinnable->strutSizeHint( QskSlider::Groove );
const auto fillHint = skinnable->strutSizeHint( QskSlider::Fill );
const auto handleHint = skinnable->strutSizeHint( QskSlider::Handle );
// strutSizeHint( ... ) ???
const qreal m1 = slider->metric( QskSlider::Panel | QskAspect::Size );
const qreal m2 = 4 * m1;
auto hint = panelHint;
hint = hint.expandedTo( grooveHint );
hint = hint.expandedTo( fillHint );
hint = hint.expandedTo( handleHint );
return ( slider->orientation() == Qt::Horizontal )
? QSizeF( m2, m1 ) : QSizeF( m1, m2 );
return hint;
}
#include "moc_QskSliderSkinlet.cpp"