peranger/qskinny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Windows style: Style spin box and add some use cases in skinlet

Browse Source
This commit is contained in:
Peter Hartmann 2023-05-13 10:15:02 +02:00 committed by uwerat
parent b5d7c9c52a
commit 9e4e31f349
11 changed files with 130 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
skins/material3/QskMaterial3Skin.cpp
View File

@ -861,7 +861,7 @@ void Editor::setupSpinBox()
{
using Q = QskSpinBox;
setHint( Q::Panel | QskAspect::Style, Q::Buttons );
setHint( Q::Panel | QskAspect::Style, Q::ButtonsLeftAndRight );
setSpacing( Q::Panel, 4_dp );
setStrutSize( Q::TextPanel, 80_dp, 40_dp );

59
skins/windows/QskWindowsSkin.cpp
View File

@ -500,6 +500,65 @@ void Editor::setupSlider()
void Editor::setupSpinBox()
{
using Q = QskSpinBox;
setHint( Q::Panel | QskAspect::Style, Q::ButtonsRight );
setStrutSize( Q::Panel, { -1, 32 } );
setBoxBorderMetrics( Q::Panel, 1 );
setBoxShape( Q::Panel, 3 );
setPadding( Q::Panel, { 11, 0, 11, 0 } );
setGradient( Q::Panel, theme.palette.fillColor.control.defaultColor );
setBoxBorderGradient( Q::Panel, theme.palette.elevation.control.border,
theme.palette.fillColor.control.defaultColor );
setAlignment( Q::Text, Qt::AlignLeft );
setFontRole( Q::Text, QskWindowsSkin::Body );
setColor( Q::Text, theme.palette.fillColor.text.primary );
setPadding( Q::TextPanel, { 11, 5, 0, 0 } );
setStrutSize( Q::UpPanel, 16, 16 );
setStrutSize( Q::DownPanel, 16, 16 );
setStrutSize( Q::UpPanel, 32, 20 );
setPadding( Q::UpPanel, { 11, 7, 11, 7 } );
setStrutSize( Q::DownPanel, 34, 20 );
setPadding( Q::DownPanel, { 11, 7, 13, 7 } );
setSymbol( Q::UpIndicator, symbol( "spin-box-arrow-up" ) );
setSymbol( Q::DownIndicator, symbol( "spin-box-arrow-down" ) );
setGraphicRole( Q::UpIndicator, QskWindowsSkin::GraphicRoleFillColorTextSecondary );
setGraphicRole( Q::DownIndicator, QskWindowsSkin::GraphicRoleFillColorTextSecondary );
// Hovered:
setGradient( Q::Panel | Q::Hovered, theme.palette.fillColor.control.secondary );
setBoxBorderGradient( Q::Panel | Q::Hovered, theme.palette.elevation.textControl.border,
theme.palette.fillColor.control.secondary );
// Focused (Pressed doesn't exist yet):
setBoxBorderMetrics( Q::Panel | Q::Focused, { 1, 1, 1, 2 } );
setGradient( Q::Panel | Q::Focused, theme.palette.fillColor.control.inputActive );
auto gradient = theme.palette.elevation.textControl.border;
gradient.at( 1 ) = theme.palette.fillColor.accent.defaultColor;
setBoxBorderGradient( Q::Panel | Q::Focused, gradient, theme.palette.fillColor.control.inputActive );
// Disabled:
setGradient( Q::Panel | Q::Disabled, theme.palette.fillColor.control.disabled );
setBoxBorderColors( Q::Panel | Q::Disabled, theme.palette.strokeColor.controlStroke.defaultColor );
setColor( Q::Text | Q::Disabled, theme.palette.fillColor.text.disabled );
setGraphicRole( Q::UpIndicator | Q::Disabled, QskWindowsSkin::GraphicRoleFillColorTextDisabled );
setGraphicRole( Q::DownIndicator | Q::Disabled, QskWindowsSkin::GraphicRoleFillColorTextDisabled );
}
void Editor::setupTabBar()

2
skins/windows/icons.qrc
View File

@ -4,5 +4,7 @@
<file>icons/qvg/combo-box-arrow-closed.qvg</file>
<file>icons/qvg/combo-box-arrow-open.qvg</file>
<file>icons/qvg/segmented-button-check.qvg</file>
<file>icons/qvg/spin-box-arrow-down.qvg</file>
<file>icons/qvg/spin-box-arrow-up.qvg</file>
</qresource>
</RCC>

BIN
skins/windows/icons/qvg/spin-box-arrow-down.qvg Normal file
View File

Binary file not shown.

BIN
skins/windows/icons/qvg/spin-box-arrow-up.qvg Normal file
View File

Binary file not shown.

4
skins/windows/icons/spin-box-arrow-down.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 1.125C0.5 1.02344 0.537109 0.935547 0.611328 0.861328C0.685547 0.787109 0.773438 0.75 0.875 0.75C0.976562 0.75 1.06445 0.787109 1.13867 0.861328L5 4.7168L8.86133 0.861328C8.93555 0.787109 9.02344 0.75 9.125 0.75C9.22656 0.75 9.31445 0.787109 9.38867 0.861328C9.46289 0.935547 9.5 1.02344 9.5 1.125C9.5 1.22656 9.46289 1.31445 9.38867 1.38867L5.26367 5.51367C5.18945 5.58789 5.10156 5.625 5 5.625C4.89844 5.625 4.81055 5.58789 4.73633 5.51367L0.611328 1.38867C0.537109 1.31445 0.5 1.22656 0.5 1.125Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 631 B

4
skins/windows/icons/spin-box-arrow-up.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 4.875C0.5 4.77344 0.537109 4.68555 0.611328 4.61133L4.73633 0.486328C4.81055 0.412109 4.89844 0.375 5 0.375C5.10156 0.375 5.18945 0.412109 5.26367 0.486328L9.38867 4.61133C9.46289 4.68555 9.5 4.77344 9.5 4.875C9.5 4.97656 9.46289 5.06445 9.38867 5.13867C9.31445 5.21289 9.22656 5.25 9.125 5.25C9.02344 5.25 8.93555 5.21289 8.86133 5.13867L5 1.2832L1.13867 5.13867C1.06445 5.21289 0.976562 5.25 0.875 5.25C0.773438 5.25 0.685547 5.21289 0.611328 5.13867C0.537109 5.06445 0.5 4.97656 0.5 4.875Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 625 B

2
src/controls/QskSpinBox.cpp
View File

@ -173,7 +173,7 @@ void QskSpinBox::resetDecoration()
QskSpinBox::Decoration QskSpinBox::decoration() const
{
return flagHint< QskSpinBox::Decoration >( aspectDecoration(), Buttons );
return flagHint< QskSpinBox::Decoration >( aspectDecoration(), ButtonsLeftAndRight );
}
void QskSpinBox::setTextAlignment( Qt::Alignment alignment )

3
src/controls/QskSpinBox.h
View File

@ -37,7 +37,8 @@ class QSK_EXPORT QskSpinBox : public QskBoundedValueInput
{
NoDecoration,
Buttons,
ButtonsLeftAndRight,
ButtonsRight,
UpDownControl
};
Q_ENUM( Decoration )

58
src/controls/QskSpinBoxSkinlet.cpp
View File

@ -38,8 +38,8 @@ static inline QskAspect::States qskButtonStates(
QskSpinBoxSkinlet::QskSpinBoxSkinlet( QskSkin* )
{
setNodeRoles( { UpPanel, DownPanel, TextPanel,
UpIndicator, DownIndicator, Text } );
setNodeRoles( { PanelRole, UpPanelRole, DownPanelRole, TextPanelRole,
UpIndicatorRole, DownIndicatorRole, TextRole } );
}
QRectF QskSpinBoxSkinlet::subControlRect( const QskSkinnable* skinnable,
@ -50,6 +50,9 @@ QRectF QskSpinBoxSkinlet::subControlRect( const QskSkinnable* skinnable,
QskSkinStateChanger stateChanger( skinnable );
stateChanger.setStates( qskButtonStates( skinnable, subControl ) );
if ( subControl == Q::Panel )
return contentsRect;
if ( subControl == Q::DownIndicator )
return skinnable->subControlContentsRect( contentsRect, Q::DownPanel );
@ -77,36 +80,41 @@ QSGNode* QskSpinBoxSkinlet::updateSubNode(
switch( nodeRole )
{
case UpPanel:
case PanelRole:
{
return updateBoxNode( skinnable, node, Q::Panel );
}
case UpPanelRole:
{
stateChanger.setStates( qskButtonStates( skinnable, Q::UpPanel ) );
return updateBoxNode( skinnable, node, Q::UpPanel );
}
case DownPanel:
case DownPanelRole:
{
stateChanger.setStates( qskButtonStates( skinnable, Q::DownPanel ) );
return updateBoxNode( skinnable, node, Q::DownPanel );
}
case UpIndicator:
case UpIndicatorRole:
{
stateChanger.setStates( qskButtonStates( skinnable, Q::UpIndicator ) );
return updateSymbolNode( skinnable, node, Q::UpIndicator );
}
case DownIndicator:
case DownIndicatorRole:
{
stateChanger.setStates( qskButtonStates( skinnable, Q::DownIndicator ) );
return updateSymbolNode( skinnable, node, Q::DownIndicator );
}
case TextPanel:
case TextPanelRole:
{
return updateBoxNode( skinnable, node, Q::TextPanel );
}
case Text:
case TextRole:
{
auto spinBox = static_cast< const QskSpinBox* >( skinnable );
@ -141,6 +149,16 @@ QRectF QskSpinBoxSkinlet::textPanelRect(
if ( w > 0.0 )
r.setRight( r.right() - spacing - w );
}
else if ( decoration == Q::ButtonsRight )
{
const auto w1 = subControlRect( skinnable, rect, Q::DownPanel ).width();
if ( w1 > 0.0 )
r.setRight( r.right() - w1 - spacing );
const auto w2 = subControlRect( skinnable, rect, Q::UpPanel ).width();
if ( w2 > 0.0 )
r.setRight( r.right() - w2 - spacing );
}
else
{
const auto w1 = subControlRect( skinnable, rect, Q::DownPanel ).width();
@ -180,6 +198,30 @@ QRectF QskSpinBoxSkinlet::buttonRect( const QskSkinnable* skinnable,
x = rect.right() - w;
y = ( subControl == Q::UpPanel ) ? rect.top() : rect.bottom() - h;
}
else if ( decoration == Q::ButtonsRight )
{
const auto hint = spinBox->strutSizeHint( subControl );
h = hint.height();
if ( h <= 0.0 )
h = rect.height();
w = hint.width();
if ( w <= 0.0 )
w = h;
if( subControl == Q::UpPanel )
{
const auto downRect = buttonRect( skinnable, rect, Q::DownPanel );
x = downRect.left() - w;
}
else
{
x = rect.right() - w;
}
y = 0.5 * ( rect.height() - h );
}
else
{
const auto hint = spinBox->strutSizeHint( subControl );

13
src/controls/QskSpinBoxSkinlet.h
View File

@ -18,14 +18,15 @@ class QSK_EXPORT QskSpinBoxSkinlet : public QskSkinlet
enum NodeRole
{
TextPanel,
Text,
PanelRole,
TextPanelRole,
TextRole,
UpPanel,
UpIndicator,
UpPanelRole,
UpIndicatorRole,
DownPanel,
DownIndicator,
DownPanelRole,
DownIndicatorRole,
RoleCount
};