diff --git a/designsystems/material3/QskMaterial3Skin.cpp b/designsystems/material3/QskMaterial3Skin.cpp index b75b88bd..0a92096d 100644 --- a/designsystems/material3/QskMaterial3Skin.cpp +++ b/designsystems/material3/QskMaterial3Skin.cpp @@ -104,47 +104,28 @@ namespace namespace { - inline constexpr qreal dpToPixels( qreal value ) + /* + mapping between px/pt and Qt's logical coordinates + */ + inline constexpr double operator ""_px( long double value ) Q_DECL_UNUSED { - /* - see: https://en.wikipedia.org/wiki/Device-independent_pixel - https://developer.android.com/training/multiscreen/screendensities - - One dp is a virtual pixel unit that's roughly equal to one pixel - on a medium-density screen ( 160 dpi ). - - One logical pixel is equivalent to 1/96th of an inch. - */ - - /* - For non scalable resources the following density buckets - are recommended: - - ldpi: ( 0 -> 140 ) : 120 - mdpi: ( 140 -> 200 ): 160 - hdpi: ( 140 -> 280 ): 240 - xhdpi: ( 280 -> 400 ): 320 - xxhdpi: ( 400 -> 560 ): 480 - xxxhdpi: ( 560 -> ... ): 640 - - For some reason the metrics from the Figma model seem to be - too small on our deskop system. Until this has bee understood - we use the ldpi bucket as the density of the logical coordinate - system falls into it. - - Need to find out why TODO ... - */ - return value * 96.0 / 120.0; + return static_cast< double >( value ); } - Q_DECL_UNUSED inline constexpr double operator ""_dp( long double value ) + inline constexpr double operator ""_px( unsigned long long value ) Q_DECL_UNUSED { - return dpToPixels( static_cast< qreal >( value ) ); + return static_cast< double >( value ); } - Q_DECL_UNUSED inline constexpr double operator ""_dp( unsigned long long value ) + inline constexpr double operator ""_pt( long double value ) Q_DECL_UNUSED { - return dpToPixels( value ); + // px: 1/96 inch, pt: 1/72 inch + return value * 72.0 / 96.0; + } + + inline constexpr double operator ""_pt( unsigned long long value ) Q_DECL_UNUSED + { + return value * 72.0 / 96.0; } class Combination : public QskStateCombination @@ -169,6 +150,9 @@ namespace void setup() { + // default font + setFontRole( QskAspect::NoSubcontrol, BodyLarge ); + for ( int i = 0; i < staticMetaObject.methodCount(); i++ ) staticMetaObject.method( i ).invokeOnGadget( this ); } @@ -234,15 +218,15 @@ void Editor::setupCheckBox() // == metrics - setSpacing( Q::Panel, 40_dp ); + setSpacing( Q::Panel, 6_px ); { - setStrutSize( Q::Box, 18_dp, 18_dp ); - setBoxBorderMetrics( Q::Box, 2_dp ); - setBoxShape( Q::Box, 2_dp ); - setPadding( Q::Box, 3_dp ); // "icon size" + setStrutSize( Q::Box, 18_px, 18_px ); + setBoxBorderMetrics( Q::Box, 2_px ); + setBoxShape( Q::Box, 2_px ); + setPadding( Q::Box, 3_px ); // "icon size" - QskShadowMetrics shadowMetrics( 12_dp, 0.0 ); + QskShadowMetrics shadowMetrics( 12_px, 0.0 ); shadowMetrics.setShapeMode( QskShadowMetrics::Ellipse ); setShadowMetrics( Q::Box, shadowMetrics ); } @@ -324,13 +308,13 @@ void Editor::setupComboBox() { using Q = QskComboBox; - setStrutSize( Q::Panel, -1.0, 56_dp ); - setPadding( Q::Panel, { 12_dp, 8_dp, 12_dp, 8_dp } ); + setStrutSize( Q::Panel, -1.0, 56_px ); + setPadding( Q::Panel, { 12_px, 8_px, 12_px, 8_px } ); setGradient( Q::Panel, m_pal.surfaceVariant ); setBoxShape( Q::Panel, m_pal.shapeExtraSmallTop ); - setBoxBorderMetrics( Q::Panel, { 0, 0, 0, 1_dp } ); + setBoxBorderMetrics( Q::Panel, { 0, 0, 0, 1_px } ); setBoxBorderColors( Q::Panel, m_pal.onSurfaceVariant ); - setSpacing( Q::Panel, 8_dp ); + setSpacing( Q::Panel, 8_px ); setGradient( Q::Panel | Q::Hovered, m_pal.hoverColor( m_pal.onSurfaceVariant, m_pal.surfaceVariant ) ); @@ -344,13 +328,13 @@ void Editor::setupComboBox() setGradient( Q::Panel | Q::PopupOpen, m_pal.pressedColor( m_pal.onSurfaceVariant, m_pal.surfaceVariant ) ); - setStrutSize( Q::Icon, 24_dp, 24_dp ); + setStrutSize( Q::Icon, 24_px, 24_px ); setGraphicRole( Q::Icon, QskMaterial3Skin::GraphicRoleOnSurface ); setColor( Q::Text, m_pal.onSurface ); - setFontRole( Q::Text, BodyMedium ); + setFontRole( Q::Text, BodyLarge ); - setStrutSize( Q::StatusIndicator, 12_dp, 12_dp ); + setStrutSize( Q::StatusIndicator, 12_px, 12_px ); setGraphicRole( Q::StatusIndicator, QskMaterial3Skin::GraphicRoleOnSurface ); setAlignment( Q::StatusIndicator, Qt::AlignRight | Qt::AlignVCenter ); @@ -396,7 +380,7 @@ void Editor::setupMenu() setHint( Q::Overlay | A::Style, false ); setGradient( Q::Overlay, stateLayerColor( m_pal.outline, 0.8 ) ); - setBoxShape( Q::Panel, 4_dp ); + setBoxShape( Q::Panel, 4_px ); setBoxBorderMetrics( Q::Panel, 0 ); setPadding( Q::Panel, 0 ); @@ -408,13 +392,13 @@ void Editor::setupMenu() setShadowMetrics( Q::Panel, m_pal.elevation2 ); setShadowColor( Q::Panel, m_pal.shadow ); - setMetric( Q::Separator | A::Size, 1_dp ); + setMetric( Q::Separator | A::Size, 1_px ); setBoxShape( Q::Separator, 0 ); setBoxBorderMetrics( Q::Separator, 0 ); setGradient( Q::Separator, m_pal.primary12 ); - setPadding( Q::Segment, 6_dp ); - setSpacing( Q::Segment, 5_dp ); + setPadding( Q::Segment, 6_px ); + setSpacing( Q::Segment, 5_px ); setGradient( Q::Segment, Qt::transparent ); setGradient( Q::Segment | Q::Hovered, @@ -426,12 +410,12 @@ void Editor::setupMenu() setGradient( Q::Segment | Q::Pressed | Q::Selected, m_pal.pressedColor( m_pal.onSurface, m_pal.primary12 ) ); - setPadding( Q::Icon, 7_dp ); - setStrutSize( Q::Icon, 24_dp, 24_dp ); + setPadding( Q::Icon, 7_px ); + setStrutSize( Q::Icon, 24_px, 24_px ); setGraphicRole( Q::Icon, QskMaterial3Skin::GraphicRoleOnSurface ); setColor( Q::Text, m_pal.onSurface ); - setFontRole( Q::Text, BodyMedium ); + setFontRole( Q::Text, BodyLarge ); setAnimation( Q::Cursor | A::Position | A::Metric, 75, QEasingCurve::OutCubic ); @@ -443,7 +427,8 @@ void Editor::setupTextLabel() using Q = QskTextLabel; setColor( Q::Text, m_pal.onSurface ); - setPadding( Q::Panel, 5_dp ); + setFontRole( Q::Text, BodyLarge ); + setPadding( Q::Panel, 5_px ); } void Editor::setupTextField() @@ -451,14 +436,14 @@ void Editor::setupTextField() using Q = QskTextField; using SK = QskTextFieldSkinlet; - setStrutSize( Q::Panel, -1.0, 56_dp ); - setPadding( Q::Panel, { 12_dp, 8_dp, 12_dp, 8_dp } ); + setStrutSize( Q::Panel, -1.0, 56_px ); + setPadding( Q::Panel, { 12_px, 8_px, 12_px, 8_px } ); setGradient( Q::Panel, m_pal.surfaceVariant ); setColor( Q::Panel | SK::Selected, m_pal.primary12 ); setBoxShape( Q::Panel, m_pal.shapeExtraSmallTop ); - setBoxBorderMetrics( Q::Panel, { 0, 0, 0, 1_dp } ); + setBoxBorderMetrics( Q::Panel, { 0, 0, 0, 1_px } ); setBoxBorderColors( Q::Panel, m_pal.onSurfaceVariant ); - setSpacing( Q::Panel, 8_dp ); + setSpacing( Q::Panel, 8_px ); const auto hoverColor = flattenedColor( m_pal.onSurfaceVariant, m_pal.surfaceVariant, m_pal.hoverOpacity ); @@ -471,7 +456,7 @@ void Editor::setupTextField() // ### Also add a pressed state setColor( Q::Text, m_pal.onSurface ); - setFontRole( Q::Text, BodyMedium ); + setFontRole( Q::Text, BodyLarge ); setAlignment( Q::Text, Qt::AlignLeft | Qt::AlignVCenter ); setAlignment( Q::PlaceholderText, Qt::AlignLeft | Qt::AlignVCenter ); @@ -485,7 +470,7 @@ void Editor::setupTextField() // PlaceholderText setColor( Q::PlaceholderText, color( Q::Text ) ); - setFontRole( Q::PlaceholderText, fontRole( Q::Text ) ); + setFontRole( Q::PlaceholderText, BodyLarge ); setAlignment( Q::PlaceholderText, alignment( Q::Text ) ); } @@ -497,7 +482,7 @@ void Editor::setupProgressBar() for ( auto subControl : { Q::Groove, Q::Fill } ) { setBoxShape( subControl, { 100, Qt::RelativeSize } ); - setMetric( subControl | A::Size, 4_dp ); + setMetric( subControl | A::Size, 4_px ); } setGradient( Q::Groove, m_pal.surfaceContainerHighest ); @@ -511,13 +496,13 @@ void Editor::setupProgressRing() { using Q = QskProgressRing; - setArcMetrics( Q::Groove, 90, -360, 4_dp ); + setArcMetrics( Q::Groove, 90, -360, 4_px ); setGradient( Q::Groove, m_pal.surfaceContainerHighest ); setGradient( Q::Groove | Q::Disabled, m_pal.onSurface12 ); setSpacing( Q::Fill, 10 ); - setStrutSize( Q::Fill, { 48_dp, 48_dp } ); - setArcMetrics( Q::Fill, 90, -360, 4_dp ); + setStrutSize( Q::Fill, { 48_px, 48_px } ); + setArcMetrics( Q::Fill, 90, -360, 4_px ); setGradient( Q::Fill, m_pal.primary ); setGradient( Q::Fill | Q::Disabled, m_pal.onSurface38 ); } @@ -527,17 +512,17 @@ void Editor::setupRadioBox() using Q = QskRadioBox; using A = QskAspect; - setSpacing( Q::Panel, 10_dp ); - setSpacing( Q::Button, 10_dp ); + setSpacing( Q::Panel, 6_px ); + setSpacing( Q::Button, 10_px ); - setStrutSize( Q::CheckIndicatorPanel, 20_dp, 20_dp ); + setStrutSize( Q::CheckIndicatorPanel, 20_px, 20_px ); for ( auto subControl : { Q::CheckIndicatorPanel, Q::CheckIndicator } ) setBoxShape( subControl, 100, Qt::RelativeSize ); // circular - setBoxBorderMetrics( Q::CheckIndicatorPanel, 2_dp ); + setBoxBorderMetrics( Q::CheckIndicatorPanel, 2_px ); setBoxBorderColors( Q::CheckIndicatorPanel, m_pal.onBackground ); - setPadding( Q::CheckIndicatorPanel, 5_dp ); + setPadding( Q::CheckIndicatorPanel, 5_px ); setGradient( Q::Button, QskGradient() ); @@ -550,7 +535,7 @@ void Editor::setupRadioBox() { const auto aspect = Q::CheckIndicatorPanel | state1 | state2; - setShadowMetrics( aspect, { 10_dp, 0 } ); + setShadowMetrics( aspect, { 10_px, 0 } ); auto rgb = ( state2 == Q::Selected ) ? m_pal.primary : m_pal.onSurface; rgb = stateLayerColor( rgb, m_pal.stateOpacity( state1 ) ); @@ -584,19 +569,19 @@ void Editor::setupSegmentedBar() using A = QskAspect; using Q = QskSegmentedBar; - const QSizeF panelStrutSize( -1, 48_dp ); - const QSizeF segmentStrutSize( 48_dp, 40_dp ); + const QSizeF panelStrutSize( -1, 48_px ); + const QSizeF segmentStrutSize( 48_px, 40_px ); { // Container setGradient( Q::Panel, Qt::transparent ); setPadding( Q::Panel, 0 ); - setSpacing( Q::Panel, 8_dp ); + setSpacing( Q::Panel, 8_px ); setBoxShape( Q::Panel, 100, Qt::RelativeSize ); - setBoxBorderMetrics( Q::Panel, 1_dp ); + setBoxBorderMetrics( Q::Panel, 1_px ); setBoxBorderColors( Q::Panel, m_pal.outline ); setBoxBorderColors( Q::Panel | Q::Disabled, m_pal.onSurface12 ); @@ -625,15 +610,15 @@ void Editor::setupSegmentedBar() setGradient( Q::Segment | Q::Selected | Q::Disabled, m_pal.onSurface12 ); - setPadding( Q::Segment | A::Horizontal, 12_dp, 0, 12_dp, 0 ); - setPadding( Q::Segment | A::Vertical, 0, 12_dp, 0, 12_dp ); + setPadding( Q::Segment | A::Horizontal, 12_px, 0, 12_px, 0 ); + setPadding( Q::Segment | A::Vertical, 0, 12_px, 0, 12_px ); } { // Separator - setStrutSize( Q::Separator | A::Horizontal, 1_dp, segmentStrutSize.height() ); - setStrutSize( Q::Separator | A::Vertical, segmentStrutSize.height(), 1_dp ); + setStrutSize( Q::Separator | A::Horizontal, 1_px, segmentStrutSize.height() ); + setStrutSize( Q::Separator | A::Vertical, segmentStrutSize.height(), 1_px ); setPadding( Q::Separator, 0 ); setGradient( Q::Separator, m_pal.outline ); setColor( Q::Separator | Q::Disabled, m_pal.onSurface12 ); @@ -663,7 +648,7 @@ void Editor::setupSegmentedBar() // Icon setSymbol( Q::Icon, symbol( "check" ) ); - setStrutSize( Q::Icon, 18_dp, 18_dp ); + setStrutSize( Q::Icon, 18_px, 18_px ); setGraphicRole( Q::Icon, QskMaterial3Skin::GraphicRoleOnSurface ); setGraphicRole( Q::Icon | Q::Selected, @@ -681,7 +666,7 @@ void Editor::setupSeparator() { const auto aspect = Q::Panel | variation; - setMetric( aspect | A::Size, 1_dp ); + setMetric( aspect | A::Size, 1_px ); setBoxShape( Q::Panel, 0 ); setBoxBorderMetrics( Q::Panel, 0 ); setGradient( aspect, m_pal.outlineVariant ); @@ -692,12 +677,12 @@ void Editor::setupPageIndicator() { using Q = QskPageIndicator; - const auto extent = 9_dp; + const auto extent = 9_px; setStrutSize( Q::Bullet, extent, extent ); // circles, without border setBoxShape( Q::Bullet, 100, Qt::RelativeSize ); - setBoxBorderMetrics( Q::Bullet, 0 ); + setBoxBorderMetrics( Q::Bullet, 0_px ); setGradient( Q::Bullet, m_pal.primaryContainer ); setGradient( Q::Bullet | Q::Selected, m_pal.primary ); @@ -705,8 +690,8 @@ void Editor::setupPageIndicator() setGradient( Q::Bullet | Q::Disabled, m_pal.onSurface12 ); setGradient( Q::Bullet | Q::Selected | Q::Disabled, m_pal.onSurface38 ); - setSpacing( Q::Panel, 3_dp ); - setPadding( Q::Panel, 0 ); + setSpacing( Q::Panel, 3_px ); + setPadding( Q::Panel, 0_px ); setGradient( Q::Panel, QskGradient() ); // invisible } @@ -720,20 +705,20 @@ void Editor::setupPushButton() constexpr auto Text = QskAspect::Tiny; setHint( Q::Panel | QskAspect::Direction, Qsk::LeftToRight ); - setStrutSize( Q::Panel, -1, 40_dp ); - setSpacing( Q::Panel, 8_dp ); - setPadding( Q::Panel, { 24_dp, 0, 24_dp, 0 } ); + setStrutSize( Q::Panel, -1, 40_px ); + setSpacing( Q::Panel, 8_px ); + setPadding( Q::Panel, { 24_px, 0, 24_px, 0 } ); setBoxShape( Q::Panel, 100, Qt::RelativeSize ); setShadowColor( Q::Panel, m_pal.shadow ); - setStrutSize( Q::Icon, 18_dp, 18_dp ); - setPadding( Q::Icon, { 0, 0, 8_dp, 0 } ); + setStrutSize( Q::Icon, 18_px, 18_px ); + setPadding( Q::Icon, { 0, 0, 8_px, 0 } ); setGraphicRole( Q::Icon, QskMaterial3Skin::GraphicRoleOnPrimary ); setFontRole( Q::Text, LabelLarge ); setPadding( Q::Text, 0 ); - setBoxShape( Q::Splash, 40_dp ); + setBoxShape( Q::Splash, 40_px ); setAnimation( Q::Splash | QskAspect::Color, qskDuration ); const auto checkedOpacity = m_pal.focusOpacity + m_pal.pressedOpacity; @@ -833,7 +818,7 @@ void Editor::setupPushButton() setGradient( Q::Panel | Outlined, m_pal.surface ); setBoxBorderColors( Q::Panel | Outlined, m_pal.outline ); - setBoxBorderMetrics( Q::Panel | Outlined, 1_dp ); + setBoxBorderMetrics( Q::Panel | Outlined, 1_px ); setShadowMetrics( Q::Panel | Outlined, m_pal.elevation0 ); setColor( Q::Text | Outlined, m_pal.primary ); @@ -919,8 +904,8 @@ void Editor::setupSlider() using Q = QskSlider; using SK = QskSliderSkinlet; - const auto extentGroove = 16_dp; - const auto extentPanel = 44_dp; + const auto extentGroove = 16_px; + const auto extentPanel = 44_px; setStrutSize( Q::Panel | A::Horizontal, 3 * extentGroove, extentPanel ); setStrutSize( Q::Panel | A::Vertical, extentPanel, 3 * extentGroove ); @@ -938,7 +923,7 @@ void Editor::setupSlider() setBoxShape( Q::Groove, 100, Qt::RelativeSize ); setBoxShape( Q::Fill, 100, Qt::RelativeSize ); - setStrutSize( Q::Tick, { 4_dp, 4_dp } ); + setStrutSize( Q::Tick, { 4_px, 4_px } ); setBoxShape( Q::Tick, 100, Qt::RelativeSize ); setGradient( Q::Tick, m_pal.primary ); @@ -954,8 +939,8 @@ void Editor::setupSlider() for ( const auto variation : { A::Horizontal, A::Vertical } ) { QSizeF handleSize( extentGroove, extentPanel ); - QskMargins margin1{ 6_dp, 0_dp }; - QskMargins margin2{ 7_dp, 0_dp }; + QskMargins margin1{ 6_px, 0_px }; + QskMargins margin2{ 7_px, 0_px }; if ( variation == A::Vertical ) { @@ -987,29 +972,29 @@ void Editor::setupSpinBox() setHint( Q::Panel | QskAspect::Style, Q::ButtonsLeftAndRight ); - setStrutSize( Q::Panel, -1.0, 48_dp ); - setBoxShape( Q::Panel, 4_dp ); - setBoxBorderMetrics( Q::Panel, 1_dp ); + setStrutSize( Q::Panel, -1.0, 48_px ); + setBoxShape( Q::Panel, 4_px ); + setBoxBorderMetrics( Q::Panel, 1_px ); setBoxBorderColors( Q::Panel, m_pal.outline ); setBoxBorderColors( Q::Panel | Q::Focused, m_pal.primary, Combination( { Q::Increasing, Q::Decreasing } ) ); - setPadding( Q::Panel, 4_dp ); - setSpacing( Q::Panel, 4_dp ); + setPadding( Q::Panel, 4_px ); + setSpacing( Q::Panel, 4_px ); - setStrutSize( Q::TextPanel, 80_dp, 40_dp ); - setStrutSize( Q::UpPanel, 40_dp, 40_dp ); - setStrutSize( Q::DownPanel, 40_dp, 40_dp ); + setStrutSize( Q::TextPanel, 80_px, 40_px ); + setStrutSize( Q::UpPanel, 40_px, 40_px ); + setStrutSize( Q::DownPanel, 40_px, 40_px ); setAlignment( Q::Text, Qt::AlignCenter ); for( const auto subControl : { Q::DownPanel, Q::UpPanel, Q::TextPanel } ) { - setBoxBorderMetrics( subControl, 1_dp ); + setBoxBorderMetrics( subControl, 1_px ); } - setBoxShape( Q::TextPanel, 4_dp ); + setBoxShape( Q::TextPanel, 4_px ); setBoxShape( Q::DownPanel, 100, Qt::RelativeSize ); setBoxShape( Q::UpPanel, 100, Qt::RelativeSize ); @@ -1017,7 +1002,7 @@ void Editor::setupSpinBox() for( const auto subControl : { Q::DownPanel, Q::UpPanel } ) { setGradient( subControl | Q::Hovered, m_pal.primary8 ); - setPadding( subControl, 11_dp ); + setPadding( subControl, 11_px ); } { @@ -1041,19 +1026,19 @@ void Editor::setupSpinBox() setColor( Q::Text | Q::Disabled, m_pal.onSurface38 ); #if 0 - setPadding( Q::TextPanel, 5_dp ); - setBoxShape( Q::TextPanel, 4_dp, 4_dp, 0, 0 ); - setBoxBorderMetrics( Q::TextPanel, 0, 0, 0, 1_dp ); + setPadding( Q::TextPanel, 5_px ); + setBoxShape( Q::TextPanel, 4_px, 4_px, 0, 0 ); + setBoxBorderMetrics( Q::TextPanel, 0, 0, 0, 1_px ); setBoxBorderColors( Q::TextPanel, m_pal.onSurface ); - setBoxBorderMetrics( Q::TextPanel | Q::Focused, 0, 0, 0, 2_dp ); + setBoxBorderMetrics( Q::TextPanel | Q::Focused, 0, 0, 0, 2_px ); setBoxBorderColors( Q::TextPanel | Q::Focused, m_pal.primary ); setGradient( Q::TextPanel, m_pal.surfaceVariant ); const auto c1 = QskRgb::toTransparentF( m_pal.onSurface, 0.04 ); setGradient( Q::TextPanel | Q::Disabled, c1 ); - setBoxBorderMetrics( Q::TextPanel | Q::Disabled, 0, 0, 0, 1_dp ); + setBoxBorderMetrics( Q::TextPanel | Q::Disabled, 0, 0, 0, 1_px ); setColor( Q::TextPanel | Q::Disabled, m_pal.onSurface38 ); setBoxBorderColors( Q::TextPanel | Q::Disabled, m_pal.onSurface38 ); @@ -1066,7 +1051,7 @@ void Editor::setupSwitchButton() using Q = QskSwitchButton; setBoxShape( Q::Groove, 100, Qt::RelativeSize ); - const QSizeF strutSize( 52_dp, 32_dp ); + const QSizeF strutSize( 52_px, 32_px ); setStrutSize( Q::Groove | A::Horizontal, strutSize ); setStrutSize( Q::Groove | A::Vertical, strutSize.transposed() ); setGradient( Q::Groove, m_pal.surfaceVariant ); @@ -1075,23 +1060,23 @@ void Editor::setupSwitchButton() setGradient( Q::Groove | Q::Checked, m_pal.primary ); setGradient( Q::Groove | Q::Checked | Q::Disabled, m_pal.onSurface12 ); - setBoxBorderMetrics( Q::Groove, 2_dp ); + setBoxBorderMetrics( Q::Groove, 2_px ); setBoxBorderColors( Q::Groove, m_pal.outline ); setBoxBorderColors( Q::Groove | Q::Disabled, m_pal.onSurface12 ); setBoxBorderMetrics( Q::Groove | Q::Checked, 0 ); setBoxShape( Q::Handle, 100, Qt::RelativeSize ); - setStrutSize( Q::Handle, { 30_dp, 30_dp } ); - setMargin( Q::Handle, 7_dp ); - setShadowMetrics( Q::Handle, { 17_dp, 0 } ); + setStrutSize( Q::Handle, { 28_px, 28_px } ); + setMargin( Q::Handle, 7_px ); + setShadowMetrics( Q::Handle, { 17_px, 0 } ); setShadowColor( Q::Handle, QskRgb::Transparent ); setGradient( Q::Handle, m_pal.outline ); setGradient( Q::Handle | Q::Checked, m_pal.onPrimary ); - setStrutSize( Q::Icon, { 16_dp, 16_dp } ); - setPadding( Q::Icon, 6_dp ); + setStrutSize( Q::Icon, { 16_px, 16_px } ); + setPadding( Q::Icon, 6_px ); setSymbol( Q::Icon, symbol( "switchbutton-unchecked" ) ); setSymbol( Q::Icon | Q::Checked, symbol( "switchbutton-checked" ) ); @@ -1111,13 +1096,13 @@ void Editor::setupSwitchButton() if ( state1 == Q::Pressed ) { - setShadowMetrics( aspect, { 10_dp, 0 } ); + setShadowMetrics( aspect, { 10_px, 0 } ); setMargin( aspect, 0.0 ); } else if ( state2 == Q::Checked ) { - setShadowMetrics( aspect, { 13_dp, 0 } ); - setMargin( aspect, 3_dp ); + setShadowMetrics( aspect, { 13_px, 0 } ); + setMargin( aspect, 3_px ); } if ( state1 ) @@ -1160,7 +1145,7 @@ void Editor::setupTabButton() using A = QskAspect; using Q = QskTabButton; - setStrutSize( Q::Panel, 48_dp, 64_dp ); + setStrutSize( Q::Panel, 48_px, 48_px ); #if 1 // couldn't find a value in the specs setPadding( Q::Panel, 8, 0, 8, 0 ); @@ -1176,7 +1161,7 @@ void Editor::setupTabButton() setColor( Q::Text | Q::Hovered, m_pal.primary ); QskBoxBorderMetrics border; - border.setWidthAt( Qt::BottomEdge, 3_dp ); + border.setWidthAt( Qt::BottomEdge, 3_px ); setBoxBorderMetrics( Q::Panel, border ); QskBoxBorderColors borderColors( m_pal.surface ); @@ -1211,7 +1196,7 @@ void Editor::setupTabButton() setAnimation( Q::Panel | A::Color, qskDuration ); - setFontRole( Q::Text, LabelLarge ); + setFontRole( Q::Text, TitleSmall ); setAlignment( Q::Text, Qt::AlignCenter ); } @@ -1256,11 +1241,11 @@ void Editor::setupVirtualKeyboard() using Q = QskVirtualKeyboard; // key panel - setMargin( Q::ButtonPanel, 5_dp ); + setMargin( Q::ButtonPanel, 5_px ); setGradient( Q::ButtonPanel, m_pal.surface2 ); setGradient( Q::ButtonPanel | QskPushButton::Pressed, m_pal.surface ); setColor( Q::ButtonText | QskPushButton::Pressed, m_pal.outlineVariant ); - setBoxShape( Q::ButtonPanel, 6_dp ); + setBoxShape( Q::ButtonPanel, 6_px ); setBoxShape( Q::ButtonPanel | A::Huge, 100, Qt::RelativeSize ); setGradient( Q::ButtonPanel | A::Huge, m_pal.primary ); @@ -1286,7 +1271,7 @@ void Editor::setupVirtualKeyboard() // panel setGradient( Q::Panel, m_pal.background ); - setPadding( Q::Panel, { 3_dp, 25_dp, 3_dp, 5_dp } ); + setPadding( Q::Panel, { 3_px, 25_px, 3_px, 5_px } ); } void Editor::setupScrollView() @@ -1299,11 +1284,11 @@ void Editor::setupScrollView() for ( auto subControl : { Q::HorizontalScrollBar, Q::VerticalScrollBar } ) { - setMetric( subControl | A::Size, 6_dp ); + setMetric( subControl | A::Size, 6_px ); setPadding( subControl, 0 ); } - const auto handleExtent = 40_dp; + const auto handleExtent = 40_px; setStrutSize( Q::HorizontalScrollHandle, handleExtent, 0.0 ); setStrutSize( Q::VerticalScrollHandle, 0.0, handleExtent ); @@ -1324,8 +1309,8 @@ void Editor::setupListView() using Q = QskListView; using A = QskAspect; - setStrutSize( Q::Cell, { -1, 56_dp } ); - setPadding( Q::Cell, { 16_dp, 8_dp, 24_dp, 8_dp } ); + setStrutSize( Q::Cell, { -1, 56_px } ); + setPadding( Q::Cell, { 16_px, 8_px, 24_px, 8_px } ); setBoxBorderColors( Q::Cell, m_pal.outline ); @@ -1376,7 +1361,7 @@ void Editor::setupListView() } } - setFontRole( Q::Text, BodyMedium ); + setFontRole( Q::Text, BodyLarge ); setColor( Q::Text, m_pal.onSurface ); setColor( Q::Text | Q::Disabled, m_pal.onSurface38 ); @@ -1394,17 +1379,17 @@ void Editor::setupSubWindow() // Panel - setPadding( Q::Panel, { 24_dp, 0, 24_dp, 24_dp } ); - setStrutSize( Q::Panel, { 280_dp, -1 } ); - setBoxShape( Q::Panel, 28_dp ); + setPadding( Q::Panel, { 24_px, 0, 24_px, 24_px } ); + setStrutSize( Q::Panel, { 280_px, -1 } ); + setBoxShape( Q::Panel, 28_px ); setBoxBorderMetrics( Q::Panel, 0 ); setGradient( Q::Panel, m_pal.secondaryContainer ); setShadowMetrics( Q::Panel, m_pal.elevation3 ); setShadowColor( Q::Panel, m_pal.shadow ); // TitleBarPanel - setBoxShape( Q::TitleBarPanel, { 28_dp, 28_dp, 0, 0 } ); - setPadding( Q::TitleBarPanel, { 24_dp, 24_dp, 24_dp, 16_dp } ); + setBoxShape( Q::TitleBarPanel, { 28_px, 28_px, 0, 0 } ); + setPadding( Q::TitleBarPanel, { 24_px, 24_px, 24_px, 16_px } ); setHint( Q::TitleBarPanel | QskAspect::Style, Q::NoDecoration ); setGradient( Q::TitleBarPanel, m_pal.secondaryContainer ); @@ -1584,7 +1569,7 @@ QskMaterial3Theme::QskMaterial3Theme( QskSkin::ColorScheme colorScheme, elevation2 = QskShadowMetrics( -2, 8, { 0, 2 } ); elevation3 = QskShadowMetrics( -1, 11, { 0, 2 } ); - shapeExtraSmallTop = QskBoxShapeMetrics( 4_dp, 4_dp, 0, 0 ); + shapeExtraSmallTop = QskBoxShapeMetrics( 4_px, 4_px, 0, 0 ); } qreal QskMaterial3Theme::stateOpacity( int state ) const @@ -1633,7 +1618,7 @@ QskMaterial3Skin::~QskMaterial3Skin() { } -static inline QFont createFont( qreal size, int lineHeight, +static inline QFont createFont( qreal size, qreal lineHeight, qreal spacing, QFont::Weight weight ) { Q_UNUSED( lineHeight ); @@ -1652,8 +1637,7 @@ static inline QFont createFont( qreal size, int lineHeight, checkFont = false; } - // px: 1/96 inch, pt: 1/72 inch - font.setPointSize( size * 72.0 / 96.0 ); + font.setPointSizeF( size ); if ( spacing > 0.0 ) font.setLetterSpacing( QFont::AbsoluteSpacing, spacing ); @@ -1668,30 +1652,30 @@ void QskMaterial3Skin::setupFonts() From the results on our desktop system we guess they are in pt - corresponding to the QFont point size. */ - setFont( LabelSmall, createFont( 11, 16_dp, 0.5, QFont::Medium ) ); - setFont( LabelMedium, createFont( 12, 16_dp, 0.5, QFont::Medium ) ); - setFont( LabelLarge, createFont( 14, 20_dp, 0.1, QFont::Medium ) ); + setFont( LabelSmall, createFont( 11_pt, 16_pt, 0.5_pt, QFont::Medium ) ); + setFont( LabelMedium, createFont( 12_pt, 16_pt, 0.5_pt, QFont::Medium ) ); + setFont( LabelLarge, createFont( 14_pt, 20_pt, 0.1_pt, QFont::Medium ) ); - setFont( BodySmall, createFont( 12, 16_dp, 0.4, QFont::Normal ) ); - setFont( BodyMedium, createFont( 14, 20_dp, 0.25, QFont::Normal ) ); - setFont( BodyLarge, createFont( 16, 24_dp, 0.5, QFont::Normal ) ); + setFont( BodySmall, createFont( 12_pt, 16_pt, 0.4_pt, QFont::Normal ) ); + setFont( BodyMedium, createFont( 14_pt, 20_pt, 0.25_pt, QFont::Normal ) ); + setFont( BodyLarge, createFont( 16_pt, 24_pt, 0.5_pt, QFont::Normal ) ); - setFont( TitleSmall, createFont( 14, 20_dp, 0.1, QFont::Medium ) ); - setFont( TitleMedium, createFont( 16, 24_dp, 0.15, QFont::Medium ) ); - setFont( TitleLarge, createFont( 22, 28_dp, 0.0, QFont::Normal ) ); + setFont( TitleSmall, createFont( 14_pt, 20_pt, 0.1_pt, QFont::Medium ) ); + setFont( TitleMedium, createFont( 16_pt, 24_pt, 0.15_pt, QFont::Medium ) ); + setFont( TitleLarge, createFont( 22_pt, 28_pt, 0.0_pt, QFont::Normal ) ); - setFont( HeadlineSmall, createFont( 24, 32_dp, 0.0, QFont::Normal ) ); - setFont( HeadlineMedium, createFont( 28, 36_dp, 0.0, QFont::Medium ) ); - setFont( HeadlineLarge, createFont( 32, 40_dp, 0.0, QFont::Medium ) ); + setFont( HeadlineSmall, createFont( 24_pt, 32_pt, 0.0_pt, QFont::Normal ) ); + setFont( HeadlineMedium, createFont( 28_pt, 36_pt, 0.0_pt, QFont::Medium ) ); + setFont( HeadlineLarge, createFont( 32_pt, 40_pt, 0.0_pt, QFont::Medium ) ); - setFont( DisplaySmall, createFont( 36, 44_dp, 0.0, QFont::Normal ) ); - setFont( DisplayMedium, createFont( 45, 52_dp, 0.0, QFont::Normal ) ); - setFont( DisplayLarge, createFont( 57, 64_dp, 0.0, QFont::Normal ) ); + setFont( DisplaySmall, createFont( 36_pt, 44_pt, 0.0_pt, QFont::Normal ) ); + setFont( DisplayMedium, createFont( 45_pt, 52_pt, 0.0_pt, QFont::Normal ) ); + setFont( DisplayLarge, createFont( 57_pt, 64_pt, 0.0_pt, QFont::Normal ) ); // to have something for the unused roles setFont( { QskFontRole::Subtitle, QskFontRole::Normal }, - createFont( 16, 24_dp, 0.0, QFont::Normal ) ); + createFont( 16_pt, 24_pt, 0_pt, QFont::Normal ) ); QskSkin::completeFontTable(); } diff --git a/examples/gallery/button/ButtonPage.cpp b/examples/gallery/button/ButtonPage.cpp index d1658a31..b18e4527 100644 --- a/examples/gallery/button/ButtonPage.cpp +++ b/examples/gallery/button/ButtonPage.cpp @@ -38,7 +38,7 @@ namespace : ButtonBox( Qt::Horizontal, 3, parent ) { setDefaultAlignment( Qt::AlignCenter ); - setSpacing( 25 ); + setSpacing( 10 ); populate(); }