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

using icons from https://github.com/microsoft/fluentui-system-icons/tree/main/assets

Browse Source
This commit is contained in:
Uwe Rathmann 2024-04-23 15:36:07 +02:00
parent 2236e44686
commit 0afecc4b9e
19 changed files with 43 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
designsystems/fluent2/QskFluent2Icons.qrc
View File

@ -1,10 +1,7 @@
<RCC>
<qresource prefix="/fluent2">
<file>icons/qvg/checkmark.qvg</file>
<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>
<file>icons/qvg/chevron_down.qvg</file>
<file>icons/qvg/chevron_up.qvg</file>
</qresource>
</RCC>

39
designsystems/fluent2/QskFluent2Skin.cpp
View File

@ -419,7 +419,6 @@ void Editor::setupCheckBoxMetrics()
setStrutSize( Q::Box, { 20_px, 20_px } ); // 18 + 2*1 border
setBoxShape( Q::Box, 4_px ); // adapt to us taking the border into account
setBoxBorderMetrics( Q::Box, 1_px );
setPadding( Q::Box, 5_px ); // "icon size"
setFontRole( Q::Text, Fluent2::Body );
}
@ -548,9 +547,9 @@ void Editor::setupComboBoxMetrics()
setAlignment( Q::Text, Qt::AlignLeft | Qt::AlignVCenter );
setFontRole( Q::Text, Fluent2::Body );
setStrutSize( Q::StatusIndicator, 12_px, 12_px );
setSymbol( Q::StatusIndicator, symbol( "spin-box-arrow-down" ) );
setSymbol( Q::StatusIndicator | Q::PopupOpen, symbol( "spin-box-arrow-up" ) );
setStrutSize( Q::StatusIndicator, 16_px, 16_px );
setSymbol( Q::StatusIndicator, symbol( "chevron_down" ) );
// setSymbol( Q::StatusIndicator | Q::PopupOpen, symbol( "chevron_up" ) );
// Using Focused (Pressed doesn't exist yet):
setBoxBorderMetrics( Q::Panel | Q::Focused, { 1_px, 1_px, 1_px, 2_px } );
@ -1523,20 +1522,19 @@ void Editor::setupSpinBoxMetrics()
setPadding( Q::TextPanel, { 11_px, 0, 11_px, 0 } );
#if 1
// probably obsolete once QskGraphic supports viewBox
setStrutSize( Q::UpPanel, 32_px, 20_px );
setPadding( Q::UpPanel, { 11_px, 7_px, 11_px, 7_px } );
for ( auto panel : { Q::UpPanel, Q::DownPanel } )
setStrutSize( panel, 32_px, 18_px );
setStrutSize( Q::DownPanel, 34_px, 20_px );
setPadding( Q::DownPanel, { 11_px, 7_px, 13_px, 7_px } );
setSymbol( Q::UpIndicator, symbol( "chevron_up" ) );
setSymbol( Q::DownIndicator, symbol( "chevron_down" ) );
setPadding( Q::UpPanel, { 0, 1_px, 0, 0 } );
setPadding( Q::DownPanel, { 0, 0, 0, 1_px } );
#if 0
// QskSpinBox::Pressed is missing yet
setBoxBorderMetrics( Q::Panel | Q::Pressed, { 1_px, 1_px, 1_px, 2_px } );
#endif
setSymbol( Q::UpIndicator, symbol( "spin-box-arrow-up" ) );
setSymbol( Q::DownIndicator, symbol( "spin-box-arrow-down" ) );
// Focused (Pressed doesn't exist yet):
setBoxBorderMetrics( Q::Panel | Q::Focused, { 1_px, 1_px, 1_px, 2_px } );
}
void Editor::setupSpinBoxColors(
@ -1599,8 +1597,17 @@ void Editor::setupSpinBoxColors(
panelColor = rgbSolid( panelColor, pal.background.solid.base );
setGradient( panel, panelColor );
setBoxBorderGradient( panel, borderColor1, borderColor2, panelColor );
if ( state == Q::Focused )
{
const auto colors = boxBorderColors( panel );
setBoxBorderColors( panel | Q::Decreasing, colors );
setBoxBorderColors( panel | Q::Increasing, colors );
}
setColor( text, textColor );
setGraphicRole( upIndicator, graphicRole );

10
designsystems/fluent2/icons/README Normal file
View File

@ -0,0 +1,10 @@
SVGs have been taken from https://github.com/microsoft/fluentui-system-icons/tree/main/assets.
Icons are available in different sizes. As SVGs can be scaled we only need
one version of them - chosing the '12'.
As we are replacing the colors of the SVGs using graphic filters we set the
color in the SVGs manually to black ( instead of #212121 ). So they are in
line with icons coming from somewhere else.
Names have been shortened ( ic_fluent_xyz_16_regular.svg -> xyz.svg )

5
designsystems/fluent2/icons/checkmark.svg
View File

@ -1,4 +1,3 @@
<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.00195312 3.49805C0.00195312 3.36133 0.0507812 3.24414 0.148438 3.14648C0.246094 3.04883 0.363281 3 0.5 3C0.636719 3 0.753906 3.04883 0.851562 3.14648L3.5 5.79492L9.14844 0.146484C9.24609 0.0488281 9.36328 0 9.5 0C9.57031 0 9.63477 0.0136719 9.69336 0.0410156C9.75586 0.0644531 9.80859 0.0996094 9.85156 0.146484C9.89844 0.189453 9.93555 0.242187 9.96289 0.304688C9.99023 0.363281 10.0039 0.427734 10.0039 0.498047C10.0039 0.634766 9.95312 0.753906 9.85156 0.855469L3.85156 6.85547C3.75391 6.95312 3.63672 7.00195 3.5 7.00195C3.36328 7.00195 3.24609 6.95312 3.14844 6.85547L0.148438 3.85547C0.0507812 3.75781 0.00195312 3.63867 0.00195312 3.49805Z" fill="black"/>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z" fill="black"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 777 B

After

Width:  |  Height:  |  Size: 444 B

3
designsystems/fluent2/icons/chevron_down.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.14645 4.64645C2.34171 4.45118 2.65829 4.45118 2.85355 4.64645L6 7.79289L9.14645 4.64645C9.34171 4.45118 9.65829 4.45118 9.85355 4.64645C10.0488 4.84171 10.0488 5.15829 9.85355 5.35355L6.35355 8.85355C6.15829 9.04882 5.84171 9.04882 5.64645 8.85355L2.14645 5.35355C1.95118 5.15829 1.95118 4.84171 2.14645 4.64645Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 444 B

3
designsystems/fluent2/icons/chevron_up.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.14645 7.35355C2.34171 7.54882 2.65829 7.54882 2.85355 7.35355L6 4.20711L9.14645 7.35355C9.34171 7.54882 9.65829 7.54882 9.85355 7.35355C10.0488 7.15829 10.0488 6.84171 9.85355 6.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645L2.14645 6.64645C1.95118 6.84171 1.95118 7.15829 2.14645 7.35355Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 444 B

4
designsystems/fluent2/icons/combo-box-arrow-closed.svg
View File

@ -1,4 +0,0 @@
<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.25 0.5L4 4.25L7.75 0.5H0.25Z" fill="black"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 157 B

4
designsystems/fluent2/icons/combo-box-arrow-open.svg
View File

@ -1,4 +0,0 @@
<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.25 0.5L4 4.25L7.75 0.5H0.25Z" transform="rotate(180 4 2.5)" fill="black"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 187 B

BIN
designsystems/fluent2/icons/qvg/checkmark.qvg
View File

Binary file not shown.

BIN
designsystems/fluent2/icons/qvg/chevron_down.qvg Normal file
View File

Binary file not shown.

BIN
designsystems/fluent2/icons/qvg/chevron_up.qvg Normal file
View File

Binary file not shown.

BIN
designsystems/fluent2/icons/qvg/combo-box-arrow-closed.qvg
View File

Binary file not shown.

BIN
designsystems/fluent2/icons/qvg/combo-box-arrow-open.qvg
View File

Binary file not shown.

BIN
designsystems/fluent2/icons/qvg/segmented-button-check.qvg
View File

Binary file not shown.

BIN
designsystems/fluent2/icons/qvg/spin-box-arrow-down.qvg
View File

Binary file not shown.

BIN
designsystems/fluent2/icons/qvg/spin-box-arrow-up.qvg
View File

Binary file not shown.

4
designsystems/fluent2/icons/segmented-button-check.svg
View File

@ -1,4 +0,0 @@
<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.24914 8.12738L1.12164 4.99988L0.0566406 6.05738L4.24914 10.2499L13.2491 1.24988L12.1916 0.192383L4.24914 8.12738Z" fill="black"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 246 B

4
designsystems/fluent2/icons/spin-box-arrow-down.svg
View File

@ -1,4 +0,0 @@
<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

Before

Width:  |  Height:  |  Size: 631 B

4
designsystems/fluent2/icons/spin-box-arrow-up.svg
View File

@ -1,4 +0,0 @@
<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

Before

Width:  |  Height:  |  Size: 625 B