M3_ using px instead of dp what seems to match much better with the
displayed controls on the M3 web pages. Also using pt instead of dp. Not sure why the specs mention dp as unit and what is exactly meant by it.
This commit is contained in:
Uwe Rathmann
parent
3a09458031
commit
8d18c6622f
@ -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();
|
||||
}
|
||||
|
||||
@ -38,7 +38,7 @@ namespace
|
||||
: ButtonBox( Qt::Horizontal, 3, parent )
|
||||
{
|
||||
setDefaultAlignment( Qt::AlignCenter );
|
||||
setSpacing( 25 );
|
||||
setSpacing( 10 );
|
||||
populate();
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user