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

style My Devices some more

This commit is contained in:
Peter Hartmann 2021-04-07 09:44:21 +02:00
parent 4776e73c24
commit db3a59fb7a
6 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/iot-dashboard/BoxWithButtons.cpp
View File

@ -6,8 +6,6 @@
#include <QskTextLabel.h>
QSK_SUBCONTROL( BigRoundedIcon, Panel )
QSK_SUBCONTROL( BoxWithButtons, Panel )
QSK_SUBCONTROL( IndoorTemperature, Panel )
@ -24,8 +22,7 @@ BoxWithButtons::BoxWithButtons( const QString& title, bool isBright, QQuickItem*
QString iconFile = title.toLower();
iconFile = iconFile.replace( ' ', '-' );
auto* icon = new BigRoundedIcon( iconFile, isBright, layout );
icon->setFixedSize( 68, 68 ); // ### fix properly
new RoundedIcon( iconFile, isBright, false, layout );
auto* titleAndValue = new QskLinearBox( Qt::Vertical, layout );
titleAndValue->setMargins( {0, 10, 0, 0} );

11
examples/iot-dashboard/BoxWithButtons.h
View File

@ -6,17 +6,6 @@
#include <QskBoxShapeMetrics.h>
class BigRoundedIcon : public RoundedIcon
{
public:
QSK_SUBCONTROLS( Panel )
BigRoundedIcon( const QString& iconName, bool isBright, QQuickItem* parent = nullptr )
: RoundedIcon( iconName, isBright, parent )
{
}
};
class BoxWithButtons : public Box
{
public:

28
examples/iot-dashboard/MyDevices.cpp
View File

@ -21,9 +21,9 @@ namespace
setDefaultAlignment( Qt::AlignCenter );
setAutoAddChildren( false );
m_icon = new RoundedIcon( QString(), isBright, this );
m_icon = new RoundedIcon( QString(), isBright, true, this );
m_icon->setSkinState( m_icon->skinState() | RoundedIcon::Small );
m_icon->setOpacity( 0.15 );
m_icon->setFixedWidth( 60 );
addItem( m_icon );
auto* textLabel = new QskTextLabel( name, this );
@ -44,7 +44,10 @@ namespace
{
QskLinearBox::updateLayout();
m_graphicLabel->setSize( {36, 36} );
// We cannot use the icon from RoundedIcon here because
// it would inherit the transparency
const qreal size = metric( RoundedIcon::Icon | QskAspect::Size );
m_graphicLabel->setSize( {size, size} );
m_graphicLabel->setPosition( { m_icon->position().x() + ( m_icon->width() - m_graphicLabel->width() ) / 2,
( m_icon->position().y() + m_icon->height() - m_graphicLabel->height() ) / 2 } );
}
@ -59,17 +62,18 @@ namespace
MyDevices::MyDevices( QQuickItem* parent )
: Box( "My devices", parent )
{
auto* content = new QskGridBox( this );
auto* gridBox = new QskGridBox( this );
gridBox->setSpacing( 15 );
auto* lamps = new Device( "Lamps", true, content );
content->addItem( lamps, 0, 0 );
auto* lamps = new Device( "Lamps", true, gridBox );
gridBox->addItem( lamps, 0, 0 );
auto* musicSystem = new Device( "Music System", false, content );
content->addItem( musicSystem, 0, 1 );
auto* musicSystem = new Device( "Music System", false, gridBox );
gridBox->addItem( musicSystem, 0, 1 );
auto* ac = new Device( "AC", false, content );
content->addItem( ac, 1, 0 );
auto* ac = new Device( "AC", false, gridBox );
gridBox->addItem( ac, 1, 0 );
auto* router = new Device( "Router", true, content );
content->addItem( router, 1, 1 );
auto* router = new Device( "Router", true, gridBox );
gridBox->addItem( router, 1, 1 );
}

18
examples/iot-dashboard/RoundedIcon.cpp
View File

@ -7,22 +7,31 @@
#include <QImage>
QSK_SUBCONTROL( RoundedIcon, Panel )
QSK_SUBCONTROL( RoundedIcon, Icon )
QSK_STATE( RoundedIcon, Bright, ( QskAspect::FirstUserState << 1 ) )
QSK_STATE( RoundedIcon, Small, ( QskAspect::FirstUserState << 2 ) )
RoundedIcon::RoundedIcon( const QString& iconName, bool isBright, QQuickItem* parent )
RoundedIcon::RoundedIcon( const QString& iconName, bool isBright, bool isSmall, QQuickItem* parent )
: QskBox( parent )
, m_iconName( iconName )
{
setPanel( true );
setPolishOnResize( true );
if( isSmall )
{
setSkinState( skinState() | Small );
}
setSizePolicy( QskSizePolicy::Minimum, QskSizePolicy::Constrained );
const qreal size = metric( RoundedIcon::Panel | QskAspect::Size );
setFixedWidth( size );
if( isBright )
{
setSkinState( Bright );
}
setSizePolicy( QskSizePolicy::Minimum, QskSizePolicy::Constrained );
QString fileName = ":/images/" + iconName + ".png";
if( QFile::exists( fileName ) )
@ -37,7 +46,8 @@ void RoundedIcon::updateLayout()
{
if( m_graphicLabel )
{
m_graphicLabel->setSize( {36, 36} );
const qreal size = metric( Icon | QskAspect::Size );
m_graphicLabel->setSize( {size, size} );
m_graphicLabel->setPosition( { ( width() - m_graphicLabel->width() ) / 2, ( height() - m_graphicLabel->height() ) / 2 } );
}
}

6
examples/iot-dashboard/RoundedIcon.h
View File

@ -11,10 +11,10 @@ class RoundedIcon : public QskBox
Q_OBJECT
public:
QSK_SUBCONTROLS( Panel )
QSK_STATES( Bright ) // just to differentiate between orange and purple
QSK_SUBCONTROLS( Panel, Icon )
QSK_STATES( Bright, Small ) // to differentiate between orange and purple and small vs. big
RoundedIcon( const QString& iconName, bool isBright, QQuickItem* parent = nullptr );
RoundedIcon( const QString& iconName, bool isBright, bool isSmall, QQuickItem* parent = nullptr );
QskAspect::Subcontrol effectiveSubcontrol(
QskAspect::Subcontrol subControl ) const override

4
examples/iot-dashboard/Skin.cpp
View File

@ -101,9 +101,13 @@ void Skin::initHints( const Palette& palette )
// content in boxes (indoor temperature, humidity etc.):
ed.setPadding( BoxWithButtons::Panel, 8 );
ed.setBoxShape( RoundedIcon::Panel, 6 );
ed.setVGradient( RoundedIcon::Panel | RoundedIcon::Bright, "#ff7d34", "#ff3122" );
ed.setVGradient( RoundedIcon::Panel, "#6776FF", "#6100FF" );
ed.setMetric( RoundedIcon::Panel | QskAspect::Size, 68 );
ed.setMetric( RoundedIcon::Panel | RoundedIcon::Small | QskAspect::Size, 60 );
ed.setMetric( RoundedIcon::Icon | QskAspect::Size, 36 );
// palette dependent skin hints:
ed.setGradient( MenuBar::Panel, palette.menuBar );