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

Material: Add a graphic provider 

... and provide some Material icons
This commit is contained in:
Peter Hartmann 2022-07-07 16:41:05 +02:00
parent 86b806e245
commit ebff26f087
7 changed files with 110 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
skins/material3/QskMaterial3Skin.cpp
View File

@ -9,10 +9,13 @@
#include <QskBox.h>
#include <QskCheckBox.h>
#include <QskColorFilter.h>
#include <QskDialogButton.h>
#include <QskDialogButtonBox.h>
#include <QskFocusIndicator.h>
#include <QskFunctions.h>
#include <QskGraphic.h>
#include <QskGraphicProvider.h>
#include <QskInputPanelBox.h>
#include <QskListView.h>
#include <QskMenu.h>
@ -24,6 +27,7 @@
#include <QskSeparator.h>
#include <QskShadowMetrics.h>
#include <QskSlider.h>
#include <QskStandardSymbol.h>
#include <QskSubWindow.h>
#include <QskSwitchButton.h>
#include <QskSwitchButtonSkinlet.h>
@ -44,6 +48,9 @@
#include <QskNamespace.h>
#include <QskPlatform.h>
#include <QPainter>
#include <QtSvg/QSvgRenderer>
static const int qskDuration = 150;
namespace
@ -90,6 +97,28 @@ namespace
const QskMaterial3Theme& m_pal;
};
class Material3GraphicProvider final : public QskGraphicProvider
{
protected:
const QskGraphic* loadGraphic( const QString& id ) const override
{
static QString scope = QStringLiteral( ":/icons/" );
const QString file = scope + id + QStringLiteral( "_24px.svg" );
QskGraphic graphic;
QSvgRenderer renderer;
if ( renderer.load( file ) )
{
QPainter painter( &graphic );
renderer.render( &painter );
painter.end();
}
return graphic.isNull() ? nullptr : new QskGraphic( graphic );
}
};
QFont createFont( int pixelSize, qreal tracking, QFont::Weight weight )
{
QFont font( "Roboto" );
@ -165,6 +194,7 @@ void Editor::setupControl()
void Editor::setupCheckBox()
{
using Q = QskCheckBox;
using M3 = QskMaterial3Skin;
setSpacing( Q::Panel, 10 );
@ -174,16 +204,17 @@ void Editor::setupCheckBox()
setBoxShape( Q::Box, 2 );
setBoxBorderMetrics( Q::Box, 2 );
setBoxBorderColors( Q::Box, m_pal.onBackground );
setBoxBorderColors( Q::Box | Q::Disabled, stateLayerColor( m_pal.onBackground, m_pal.disabledContentOpacity ) );
setBoxBorderMetrics( Q::Box | Q::Checked, 0 );
setGradient( Q::Box, m_pal.background );
setGradient( Q::Box | Q::Checked, m_pal.primary );
setGradient( Q::Box | Q::Disabled, m_pal.surfaceVariant12 );
setGradient( Q::Box | Q::Checked | Q::Disabled, m_pal.onSurface12 );
setGradient( Q::Box | Q::Disabled, stateLayerColor( m_pal.surfaceVariant, m_pal.disabledContainerOpacity ) );
setGradient( Q::Box | Q::Checked | Q::Disabled, stateLayerColor( m_pal.onSurface, m_pal.disabledContainerOpacity ) );
setColor( Q::Indicator, m_pal.background );
setColor( Q::Indicator | Q::Checked, m_pal.onPrimary );
setColor( Q::Indicator | Q::Checked | Q::Disabled, m_pal.onSurface38 );
setGraphicRole( Q::Indicator, M3::GraphicRoleBackground );
setGraphicRole( Q::Indicator | Q::Checked, M3::GraphicRoleOnPrimary );
setGraphicRole( Q::Indicator | Q::Checked | Q::Disabled, M3::GraphicRoleOnSurfaceDisabled );
setColor( Q::Text, m_pal.onBackground );
}
@ -840,8 +871,8 @@ QskMaterial3Theme::QskMaterial3Theme( Lightness lightness )
{
}
QskMaterial3Theme::QskMaterial3Theme(Lightness lightness,
std::array<QskHctColor, NumPaletteTypes> palettes )
QskMaterial3Theme::QskMaterial3Theme( Lightness lightness,
std::array<QskHctColor, NumPaletteTypes> palettes )
: m_palettes( palettes )
{
if ( lightness == Light )
@ -931,7 +962,9 @@ QskMaterial3Theme::QskMaterial3Theme(Lightness lightness,
QskMaterial3Skin::QskMaterial3Skin( const QskMaterial3Theme& palette, QObject* parent )
: Inherited( parent )
{
setupGraphicFilters( palette );
setupFonts();
addGraphicProvider( "material3", new Material3GraphicProvider );
Editor editor( &hintTable(), palette );
editor.setup();
@ -941,6 +974,41 @@ QskMaterial3Skin::~QskMaterial3Skin()
{
}
QskGraphic QskMaterial3Skin::symbol( int symbolType ) const
{
switch( symbolType )
{
case QskStandardSymbol::Cancel:
return Qsk::loadGraphic( "image://material3/cancel" );
case QskStandardSymbol::Critical:
return Qsk::loadGraphic( "image://material3/error" );
case QskStandardSymbol::CheckMark:
return Qsk::loadGraphic( "image://material3/check" );
case QskStandardSymbol::CrossMark:
return {}; // not existant in Material
default:
return Inherited::symbol( symbolType );
}
}
void QskMaterial3Skin::setupGraphicFilters( const QskMaterial3Theme& palette )
{
QRgb defaultColor( 0xff1f1f1f );
QskColorFilter backgroundFilter;
backgroundFilter.addColorSubstitution( defaultColor, palette.background );
QskSkin::setGraphicFilter( GraphicRoleBackground, backgroundFilter );
QskColorFilter onPrimaryFilter;
onPrimaryFilter.addColorSubstitution( defaultColor, palette.onPrimary );
QskSkin::setGraphicFilter( GraphicRoleOnPrimary, onPrimaryFilter );
QskColorFilter disabledFilter;
QColor onSurfaceDisabledColor = stateLayerColor( palette.onSurface, palette.disabledContentOpacity );
disabledFilter.addColorSubstitution( defaultColor, onSurfaceDisabledColor.rgba() );
QskSkin::setGraphicFilter( GraphicRoleOnSurfaceDisabled, disabledFilter );
}
void QskMaterial3Skin::setupFonts()
{
Inherited::setupFonts( QStringLiteral( "Roboto" ) );

12
skins/material3/QskMaterial3Skin.h
View File

@ -81,6 +81,8 @@ class QSK_MATERIAL3_EXPORT QskMaterial3Theme
const qreal focusOpacity = 0.12;
const qreal pressedOpacity = 0.12;
const qreal draggedOpacity = 0.16;
const qreal disabledContainerOpacity = 0.12;
const qreal disabledContentOpacity = 0.38;
private:
std::array< QskHctColor, NumPaletteTypes > m_palettes;
@ -96,6 +98,15 @@ class QSK_MATERIAL3_EXPORT QskMaterial3Skin : public QskSkin
QskMaterial3Skin( const QskMaterial3Theme&, QObject* parent = nullptr );
~QskMaterial3Skin() override;
virtual QskGraphic symbol( int symbolType ) const override;
enum GraphicRole
{
GraphicRoleBackground,
GraphicRoleOnPrimary,
GraphicRoleOnSurfaceDisabled,
};
enum FontRole
{
M3BodyMedium = QskSkin::HugeFont + 1,
@ -105,6 +116,7 @@ class QSK_MATERIAL3_EXPORT QskMaterial3Skin : public QskSkin
};
private:
void setupGraphicFilters( const QskMaterial3Theme& );
void setupFonts();
};

7
skins/material3/icons.qrc Normal file
View File

@ -0,0 +1,7 @@
<RCC>
<qresource prefix="/">
<file>icons/cancel_24px.svg</file>
<file>icons/check_24px.svg</file>
<file>icons/error_24px.svg</file>
</qresource>
</RCC>

4
skins/material3/icons/cancel_24px.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 10.59L15.59 7L17 8.41L13.41 12L17 15.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59Z" fill="#1F1F1F"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 467 B

4
skins/material3/icons/check_24px.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.00016 16.17L4.83016 12L3.41016 13.41L9.00016 19L21.0002 7L19.5902 5.59L9.00016 16.17Z" fill="#1F1F1F"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 220 B

4
skins/material3/icons/error_24px.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM11 17V15H13V17H11ZM11 7V13H13V7H11Z" fill="#1F1F1F"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 300 B

4
skins/material3/material3.pro
View File

@ -4,6 +4,8 @@ CONFIG += qskinny
TEMPLATE = lib
QSK_PLUGIN_SUBDIR = skins
QT += svg
TARGET = $$qskPluginTarget(material3skin)
DEFINES += QSK_MATERIAL3_MAKEDLL
@ -21,3 +23,5 @@ OTHER_FILES += metadata.json
target.path = $${QSK_INSTALL_PLUGINS}/$${QSK_PLUGIN_SUBDIR}
INSTALLS = target
RESOURCES += \
icons.qrc