Selected state for Plasma::Svg and IconItem

Like KIconloader, support a Selected state, in IconItem,
as in all generic svgs/framesvg
it replaces the text color with HighlightedText and the
background color with HighlightColor

Change-Id: Id97a527405d2c3feed75a172f05547defdbf440c
REVIEW:127975

src/declarativeimports/core/framesvgitem.cpp

@@ -267,6 +267,7 @@ FrameSvgItem::FrameSvgItem(QQuickItem *parent)
     connect(m_frameSvg, SIGNAL(repaintNeeded()), this, SLOT(doUpdate()));
     connect(&m_units, &Units::devicePixelRatioChanged, this, &FrameSvgItem::updateDevicePixelRatio);
     connect(m_frameSvg, &Svg::fromCurrentThemeChanged, this, &FrameSvgItem::fromCurrentThemeChanged);
+    connect(m_frameSvg, &Svg::stateChanged, this, &FrameSvgItem::stateChanged);
 }
 
 FrameSvgItem::~FrameSvgItem()
@@ -371,6 +372,16 @@ bool FrameSvgItem::fromCurrentTheme() const
     return m_frameSvg->fromCurrentTheme();
 }
 
+void FrameSvgItem::setState(Plasma::Svg::State state)
+{
+    m_frameSvg->setState(state);
+}
+
+Plasma::Svg::State FrameSvgItem::state() const
+{
+    return m_frameSvg->state();
+}
+
 void FrameSvgItem::setEnabledBorders(const Plasma::FrameSvg::EnabledBorders borders)
 {
     if (m_frameSvg->enabledBorders() == borders) {

src/declarativeimports/core/framesvgitem.h

@@ -158,6 +158,17 @@ class FrameSvgItem : public QQuickItem
      */
     Q_PROPERTY(Plasma::Theme::ColorGroup colorGroup READ colorGroup WRITE setColorGroup NOTIFY colorGroupChanged)
 
+    /**
+     * Sets the image in a selected state.
+     * Svgs can be colored with system color themes, if the state is selected,
+     * the TextColor will become HighlightedText color and BackgroundColor
+     * will become HighlightColor, making the svg graphics (for instance an icon)
+     * will look correct together selected text
+     * @see Plasma::Svg::state
+     * @since 5.23
+     */
+    Q_PROPERTY(Plasma::Svg::State state READ state WRITE setState NOTIFY stateChanged)
+
 public:
     /**
      * @return true if the svg has the necessary elements with the given prefix
@@ -187,6 +198,9 @@ public:
 
     bool fromCurrentTheme() const;
 
+    void setState(Plasma::Svg::State state);
+    Plasma::Svg::State state() const;
+
     void geometryChanged(const QRectF &newGeometry,
                          const QRectF &oldGeometry) Q_DECL_OVERRIDE;
 
@@ -211,6 +225,7 @@ Q_SIGNALS:
     void fromCurrentThemeChanged();
     void colorGroupChanged();
     void repaintNeeded();
+    void stateChanged();
 
 private Q_SLOTS:
     void doUpdate();

src/declarativeimports/core/iconitem.cpp

@@ -40,6 +40,7 @@
 IconItem::IconItem(QQuickItem *parent)
     : QQuickItem(parent),
       m_svgIcon(0),
+      m_state(Plasma::Svg::Normal),
       m_smooth(false),
       m_active(false),
       m_animated(true),
@@ -108,6 +109,7 @@ void IconItem::setSource(const QVariant &source)
             if (!m_svgIcon) {
                 m_svgIcon = new Plasma::Svg(this);
                 m_svgIcon->setColorGroup(m_colorGroup);
+                m_svgIcon->setState(m_state);
                 m_svgIcon->setDevicePixelRatio((window() ? window()->devicePixelRatio() : qApp->devicePixelRatio()));
                 connect(m_svgIcon, &Plasma::Svg::repaintNeeded, this, &IconItem::schedulePixmapUpdate);
             }
@@ -221,6 +223,7 @@ void IconItem::setActive(bool active)
     }
 
     m_active = active;
+
     if (isComponentComplete()) {
         m_allowNextAnimation = true;
         schedulePixmapUpdate();
@@ -295,6 +298,24 @@ int IconItem::paintedHeight() const
     return Units::roundToIconSize(qMin(boundingRect().size().width(), boundingRect().size().height()));
 }
 
+void IconItem::setState(Plasma::Svg::State state)
+{
+    if (m_state == state) {
+        return;
+    }
+
+    m_state = state;
+    if (m_svgIcon) {
+        m_svgIcon->setState(state);
+    }
+    emit stateChanged();
+}
+
+Plasma::Svg::State IconItem::state() const
+{
+    return m_state;
+}
+
 void IconItem::updatePolish()
 {
     QQuickItem::updatePolish();

src/declarativeimports/core/iconitem.h

@@ -71,6 +71,17 @@ class IconItem : public QQuickItem
      */
     Q_PROPERTY(bool active READ isActive WRITE setActive NOTIFY activeChanged)
 
+    /**
+     * Sets the image in a selected state.
+     * Svgs can be colored with system color themes, if the state is selected,
+     * the TextColor will become HighlightedText color and BackgroundColor
+     * will become HighlightColor, making the svg graphics (for instance an icon)
+     * will look correct together selected text
+     * @see Plasma::Svg::state
+     * @since 5.23
+     */
+    Q_PROPERTY(Plasma::Svg::State state READ state WRITE setState NOTIFY stateChanged)
+
     /**
      * If set, icon will blend when the source is changed
      */
@@ -99,7 +110,6 @@ class IconItem : public QQuickItem
     Q_PROPERTY(int paintedHeight READ paintedHeight NOTIFY paintedSizeChanged)
 
 public:
-
     IconItem(QQuickItem *parent = 0);
     ~IconItem();
 
@@ -126,6 +136,9 @@ public:
     int paintedWidth() const;
     int paintedHeight() const;
 
+    void setState(Plasma::Svg::State state);
+    Plasma::Svg::State state() const;
+
     void updatePolish() Q_DECL_OVERRIDE;
     QSGNode* updatePaintNode(QSGNode * oldNode, UpdatePaintNodeData * updatePaintNodeData) Q_DECL_OVERRIDE;
 
@@ -144,6 +157,7 @@ Q_SIGNALS:
     void validChanged();
     void colorGroupChanged();
     void paintedSizeChanged();
+    void stateChanged();
 
 private Q_SLOTS:
     void schedulePixmapUpdate();
@@ -162,6 +176,7 @@ private:
     QImage m_imageIcon;
     //this contains the raw variant it was passed
     QVariant m_source;
+    Plasma::Svg::State m_state;
 
     QSizeF m_implicitSize;
 
@@ -182,7 +197,6 @@ private:
     //animation on pixmap change
     QPropertyAnimation *m_animation;
     qreal m_animValue;
-
 };
 
 #endif

src/plasma/private/svg_p.h

@@ -112,6 +112,7 @@ public:
     unsigned int lastModified;
     qreal devicePixelRatio;
     qreal scaleFactor;
+    Svg::State state;
     bool multipleImages : 1;
     bool themed : 1;
     bool useSystemColors : 1;

src/plasma/private/theme_p.cpp

@@ -357,6 +357,7 @@ void ThemePrivate::discardCache(CacheTypes caches)
 
     cachedDefaultStyleSheet = QString();
     cachedSvgStyleSheets.clear();
+    cachedSelectedSvgStyleSheets.clear();
 
     if (caches & SvgElementsCache) {
         discoveries.clear();
@@ -410,7 +411,7 @@ void ThemePrivate::notifyOfChanged()
     emit themeChanged();
 }
 
-const QString ThemePrivate::processStyleSheet(const QString &css)
+const QString ThemePrivate::processStyleSheet(const QString &css, Plasma::Svg::State state)
 {
     QString stylesheet;
     if (css.isEmpty()) {
@@ -427,7 +428,7 @@ const QString ThemePrivate::processStyleSheet(const QString &css)
                         a:visited { color: %visitedlink; }\n\
                         a:hover   { color: %hoveredlink; text-decoration: none; }\n\
                         ");
-            stylesheet = cachedDefaultStyleSheet = processStyleSheet(stylesheet);
+            stylesheet = cachedDefaultStyleSheet = processStyleSheet(stylesheet, state);
         }
 
         return stylesheet;
@@ -438,8 +439,8 @@ const QString ThemePrivate::processStyleSheet(const QString &css)
     QHash<QString, QString> elements;
     // If you add elements here, make sure their names are sufficiently unique to not cause
     // clashes between element keys
-    elements[QStringLiteral("%textcolor")] = color(Theme::TextColor, Theme::NormalColorGroup).name();
+    elements[QStringLiteral("%textcolor")] = color(state == Svg::State::Selected ? Theme::HighlightedTextColor : Theme::TextColor, Theme::NormalColorGroup).name();
-    elements[QStringLiteral("%backgroundcolor")] = color(Theme::BackgroundColor, Theme::NormalColorGroup).name();
+    elements[QStringLiteral("%backgroundcolor")] = color(state == Svg::State::Selected ? Theme::HighlightColor : Theme::BackgroundColor, Theme::NormalColorGroup).name();
     elements[QStringLiteral("%highlightcolor")] = color(Theme::HighlightColor, Theme::NormalColorGroup).name();
     elements[QStringLiteral("%highlightedtextcolor")] = color(Theme::HighlightedTextColor, Theme::NormalColorGroup).name();
     elements[QStringLiteral("%visitedlink")] = color(Theme::VisitedLinkColor, Theme::NormalColorGroup).name();
@@ -450,8 +451,8 @@ const QString ThemePrivate::processStyleSheet(const QString &css)
     elements[QStringLiteral("%neutraltextcolor")] = color(Theme::NeutralTextColor, Theme::NormalColorGroup).name();
     elements[QStringLiteral("%negativetextcolor")] = color(Theme::NegativeTextColor, Theme::NormalColorGroup).name();
 
-    elements[QStringLiteral("%buttontextcolor")] = color(Theme::TextColor, Theme::ButtonColorGroup).name();
+    elements[QStringLiteral("%buttontextcolor")] = color(state == Svg::State::Selected ? Theme::HighlightedTextColor : Theme::TextColor, Theme::ButtonColorGroup).name();
-    elements[QStringLiteral("%buttonbackgroundcolor")] = color(Theme::BackgroundColor, Theme::ButtonColorGroup).name();
+    elements[QStringLiteral("%buttonbackgroundcolor")] = color(state == Svg::State::Selected ? Theme::HighlightColor : Theme::BackgroundColor, Theme::ButtonColorGroup).name();
     elements[QStringLiteral("%buttonhovercolor")] = color(Theme::HoverColor, Theme::ButtonColorGroup).name();
     elements[QStringLiteral("%buttonfocuscolor")] = color(Theme::FocusColor, Theme::ButtonColorGroup).name();
     elements[QStringLiteral("%buttonhighlightedtextcolor")] = color(Theme::HighlightedTextColor, Theme::ButtonColorGroup).name();
@@ -459,8 +460,8 @@ const QString ThemePrivate::processStyleSheet(const QString &css)
     elements[QStringLiteral("%buttonneutraltextcolor")] = color(Theme::NeutralTextColor, Theme::ButtonColorGroup).name();
     elements[QStringLiteral("%buttonnegativetextcolor")] = color(Theme::NegativeTextColor, Theme::ButtonColorGroup).name();
 
-    elements[QStringLiteral("%viewtextcolor")] = color(Theme::TextColor, Theme::ViewColorGroup).name();
+    elements[QStringLiteral("%viewtextcolor")] = color(state == Svg::State::Selected ? Theme::HighlightedTextColor : Theme::TextColor, Theme::ViewColorGroup).name();
-    elements[QStringLiteral("%viewbackgroundcolor")] = color(Theme::BackgroundColor, Theme::ViewColorGroup).name();
+    elements[QStringLiteral("%viewbackgroundcolor")] = color(state == Svg::State::Selected ? Theme::HighlightColor : Theme::BackgroundColor, Theme::ViewColorGroup).name();
     elements[QStringLiteral("%viewhovercolor")] = color(Theme::HoverColor, Theme::ViewColorGroup).name();
     elements[QStringLiteral("%viewfocuscolor")] = color(Theme::FocusColor, Theme::ViewColorGroup).name();
     elements[QStringLiteral("%viewhighlightedtextcolor")] = color(Theme::HighlightedTextColor, Theme::ViewColorGroup).name();
@@ -468,11 +469,11 @@ const QString ThemePrivate::processStyleSheet(const QString &css)
     elements[QStringLiteral("%viewneutraltextcolor")] = color(Theme::NeutralTextColor, Theme::ViewColorGroup).name();
     elements[QStringLiteral("%viewnegativetextcolor")] = color(Theme::NegativeTextColor, Theme::ViewColorGroup).name();
 
-    elements[QStringLiteral("%complementarytextcolor")] = color(Theme::TextColor, Theme::ComplementaryColorGroup).name();
+    elements[QStringLiteral("%complementarytextcolor")] = color(state == Svg::State::Selected ? Theme::HighlightedTextColor : Theme::TextColor, Theme::ComplementaryColorGroup).name();
-    elements[QStringLiteral("%complementarybackgroundcolor")] = color(Theme::BackgroundColor, Theme::ComplementaryColorGroup).name();
+    elements[QStringLiteral("%complementarybackgroundcolor")] = color(state == Svg::State::Selected ? Theme::HighlightColor : Theme::BackgroundColor, Theme::ComplementaryColorGroup).name();
     elements[QStringLiteral("%complementaryhovercolor")] = color(Theme::HoverColor, Theme::ComplementaryColorGroup).name();
     elements[QStringLiteral("%complementaryfocuscolor")] = color(Theme::FocusColor, Theme::ComplementaryColorGroup).name();
-    elements[QStringLiteral("%complementaryhighlightedtextcolor")] = color(Theme::TextColor, Theme::ComplementaryColorGroup).name();
+    elements[QStringLiteral("%complementaryhighlightedtextcolor")] = color(Theme::HighlightedTextColor, Theme::ComplementaryColorGroup).name();
     elements[QStringLiteral("%complementarypositivetextcolor")] = color(Theme::PositiveTextColor, Theme::ComplementaryColorGroup).name();
     elements[QStringLiteral("%complementaryneutraltextcolor")] = color(Theme::NeutralTextColor, Theme::ComplementaryColorGroup).name();
     elements[QStringLiteral("%complementarynegativetextcolor")] = color(Theme::NegativeTextColor, Theme::ComplementaryColorGroup).name();
@@ -490,9 +491,9 @@ const QString ThemePrivate::processStyleSheet(const QString &css)
     return stylesheet;
 }
 
-const QString ThemePrivate::svgStyleSheet(Plasma::Theme::ColorGroup group)
+const QString ThemePrivate::svgStyleSheet(Plasma::Theme::ColorGroup group, Plasma::Svg::State state)
 {
-    QString stylesheet = cachedSvgStyleSheets.value(group);
+    QString stylesheet = (state == Svg::State::Selected) ? cachedSelectedSvgStyleSheets.value(group) : cachedSvgStyleSheets.value(group);
     if (stylesheet.isEmpty()) {
         QString skel = QStringLiteral(".ColorScheme-%1{color:%2;}");
 
@@ -565,9 +566,13 @@ const QString ThemePrivate::svgStyleSheet(Plasma::Theme::ColorGroup group)
         stylesheet += skel.arg(QStringLiteral("ComplementaryNeutralText"), QStringLiteral("%complementaryneutraltextcolor"));
         stylesheet += skel.arg(QStringLiteral("ComplementaryNegativeText"), QStringLiteral("%complementarynegativetextcolor"));
 
-        stylesheet = processStyleSheet(stylesheet);
+        stylesheet = processStyleSheet(stylesheet, state);
+        if (state == Svg::State::Selected) {
+            cachedSelectedSvgStyleSheets.insert(group, stylesheet);
+        } else {
             cachedSvgStyleSheets.insert(group, stylesheet);
         }
+    }
 
     return stylesheet;
 }

src/plasma/private/theme_p.h

@@ -77,8 +77,8 @@ public:
     void processWallpaperSettings(KConfigBase *metadata);
     void processContrastSettings(KConfigBase *metadata);
 
-    const QString processStyleSheet(const QString &css);
+    const QString processStyleSheet(const QString &css, Plasma::Svg::State state);
-    const QString svgStyleSheet(Plasma::Theme::ColorGroup group);
+    const QString svgStyleSheet(Plasma::Theme::ColorGroup group, Plasma::Svg::State state);
     QColor color(Theme::ColorRole role, Theme::ColorGroup group = Theme::NormalColorGroup) const;
 
 public Q_SLOTS:
@@ -133,6 +133,7 @@ public:
     QHash<QString, QString> keysToCache;
     QHash<QString, QString> idsToCache;
     QHash<Theme::ColorGroup, QString> cachedSvgStyleSheets;
+    QHash<Theme::ColorGroup, QString> cachedSelectedSvgStyleSheets;
     QHash<QString, QString> discoveries;
     QTimer *pixmapSaveTimer;
     QTimer *rectSaveTimer;

src/plasma/svg.cpp

@@ -136,8 +136,8 @@ bool SharedSvgRenderer::load(
 }
 
 #define QLSEP QLatin1Char('_')
-#define CACHE_ID_WITH_SIZE(size, id, devicePixelRatio) QString::number(int(size.width())) % QLSEP % QString::number(int(size.height())) % QLSEP % id % QLSEP % QLSEP % QString::number(int(devicePixelRatio))
+#define CACHE_ID_WITH_SIZE(size, id, state, devicePixelRatio) QString::number(int(size.width())) % QLSEP % QString::number(int(size.height())) % QLSEP % id % QLSEP % QString::number(state) % QLSEP % QString::number(int(devicePixelRatio))
-#define CACHE_ID_NATURAL_SIZE(id, devicePixelRatio) QLatin1String("Natural") % QLSEP % id % QLSEP % QLSEP % QString::number(int(devicePixelRatio))
+#define CACHE_ID_NATURAL_SIZE(id, state, devicePixelRatio) QLatin1String("Natural") % QLSEP % id % QLSEP % QString::number(state) % QLSEP % QString::number(int(devicePixelRatio))
 
 SvgPrivate::SvgPrivate(Svg *svg)
     : q(svg),
@@ -147,6 +147,7 @@ SvgPrivate::SvgPrivate(Svg *svg)
       lastModified(0),
       devicePixelRatio(1.0),
       scaleFactor(1.0),
+      state(Svg::State::Normal),
       multipleImages(false),
       themed(false),
       useSystemColors(false),
@@ -167,16 +168,16 @@ SvgPrivate::~SvgPrivate()
 QString SvgPrivate::cacheId(const QString &elementId) const
 {
     if (size.isValid() && size != naturalSize) {
-        return CACHE_ID_WITH_SIZE(size, elementId, devicePixelRatio);
+        return CACHE_ID_WITH_SIZE(size, elementId, state, devicePixelRatio);
     } else {
-        return CACHE_ID_NATURAL_SIZE(elementId, devicePixelRatio);
+        return CACHE_ID_NATURAL_SIZE(elementId, state, devicePixelRatio);
     }
 }
 
 //This function is meant for the pixmap cache
 QString SvgPrivate::cachePath(const QString &path, const QSize &size) const
 {
-    return CACHE_ID_WITH_SIZE(size, path, devicePixelRatio) % QLSEP % QString::number(colorGroup);
+    return CACHE_ID_WITH_SIZE(size, path, state, devicePixelRatio) % QLSEP % QString::number(colorGroup);
 }
 
 bool SvgPrivate::setImagePath(const QString &imagePath)
@@ -308,7 +309,7 @@ QPixmap SvgPrivate::findInCache(const QString &elementId, qreal ratio, const QSi
     if (elementsWithSizeHints.isEmpty()) {
         // Fetch all size hinted element ids from the theme's rect cache
         // and store them locally.
-        QRegExp sizeHintedKeyExpr(CACHE_ID_NATURAL_SIZE("(\\d+)-(\\d+)-(.+)", ratio));
+        QRegExp sizeHintedKeyExpr(CACHE_ID_NATURAL_SIZE("(\\d+)-(\\d+)-(.+)", state, ratio));
 
         foreach (const QString &key, cacheAndColorsTheme()->listCachedRectKeys(path)) {
             if (sizeHintedKeyExpr.exactMatch(key)) {
@@ -454,7 +455,7 @@ void SvgPrivate::createRenderer()
     //qCDebug(LOG_PLASMA) << "FAIL! **************************";
     //qCDebug(LOG_PLASMA) << path << "**";
 
-    QString styleSheet = cacheAndColorsTheme()->d->svgStyleSheet(colorGroup);
+    QString styleSheet = cacheAndColorsTheme()->d->svgStyleSheet(colorGroup, state);
     styleCrc = qChecksum(styleSheet.toUtf8(), styleSheet.size());
 
     QHash<QString, SharedSvgRenderer::Ptr>::const_iterator it = s_renderers.constFind(styleCrc + path);
@@ -477,7 +478,7 @@ void SvgPrivate::createRenderer()
                 const QString &elementId = i.key();
                 const QRectF &elementRect = i.value();
 
-                const QString cacheId = CACHE_ID_NATURAL_SIZE(elementId, devicePixelRatio);
+                const QString cacheId = CACHE_ID_NATURAL_SIZE(elementId, state, devicePixelRatio);
                 localRectCache.insert(cacheId, elementRect);
                 cacheAndColorsTheme()->insertIntoRectsCache(path, cacheId, elementRect);
             }
@@ -979,6 +980,23 @@ Theme *Svg::theme() const
     return d->actualTheme();
 }
 
+void Svg::setState(Plasma::Svg::State state)
+{
+    if (state == d->state) {
+        return;
+    }
+
+    d->state = state;
+    d->eraseRenderer();
+    emit stateChanged(state);
+    emit repaintNeeded();
+}
+
+Svg::State Svg::state() const
+{
+    return d->state;
+}
+
 } // Plasma namespace
 
 #include "private/moc_svg_p.cpp"

src/plasma/svg.h

@@ -63,8 +63,15 @@ class PLASMA_EXPORT Svg : public QObject
     Q_PROPERTY(bool usingRenderingCache READ isUsingRenderingCache WRITE setUsingRenderingCache)
     Q_PROPERTY(bool fromCurrentTheme READ fromCurrentTheme NOTIFY fromCurrentThemeChanged)
     Q_PROPERTY(Plasma::Theme::ColorGroup colorGroup READ colorGroup WRITE setColorGroup NOTIFY colorGroupChanged)
+    Q_PROPERTY(Plasma::Svg::State state READ state WRITE setState NOTIFY stateChanged)
 
 public:
+    enum State {
+        Normal = 0,
+        Selected
+    };
+    Q_ENUMS(State)
+
     /**
      * Constructs an SVG object that implicitly shares and caches rendering.
      *
@@ -431,6 +438,23 @@ public:
      */
     Theme *theme() const;
 
+    /**
+     * Sets the image in a selected state.
+     * Svgs can be colored with system color themes, if the state is selected,
+     * the TextColor will become HighlightedText color and BackgroundColor
+     * will become HighlightColor, making the svg graphics (for instance an icon)
+     * will look correct together selected text
+     * Supported states as of 5.23 are Normal and Selected
+     * @since 5.23
+     */
+    void setState(Svg::State state);
+
+    /**
+     * @return the state of the Svg
+     * @since 5.23
+     */
+    Svg::State state() const;
+
 Q_SIGNALS:
     /**
      * Emitted whenever the SVG data has changed in such a way that a repaint is required.
@@ -470,6 +494,12 @@ Q_SIGNALS:
      */
     void fromCurrentThemeChanged(bool fromCurrentTheme);
 
+    /**
+     * Emitted when the state changes
+     * @since 5.23
+     */
+    void stateChanged(Plasma::Svg::State state);
+
 private:
     SvgPrivate *const d;
     bool eventFilter(QObject *watched, QEvent *event) Q_DECL_OVERRIDE;

src/plasma/theme.cpp

@@ -196,7 +196,7 @@ QString Theme::backgroundPath(const QString& image) const
 
 QString Theme::styleSheet(const QString &css) const
 {
-    return d->processStyleSheet(css);
+    return d->processStyleSheet(css, Svg::State::Normal);
 }
 
 QString Theme::wallpaperPath(const QSize &size) const

tests/selected_svg.qml

@@ -0,0 +1,54 @@
+/*
+ *   Copyright 2016 Marco Martin <mart@kde.org>
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU General Public License as
+ *   published by the Free Software Foundation; either version 2,
+ *   or (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU General Public License for more details
+ *
+ *   You should have received a copy of the GNU Library General Public
+ *   License along with this program; if not, write to the
+ *   Free Software Foundation, Inc.,
+ *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import QtQuick 2.2
+import QtQuick.Controls 1.1 as Controls
+import org.kde.plasma.core 2.0 as PlasmaCore
+
+PlasmaCore.FrameSvgItem {
+    id: root
+    imagePath: "widgets/background"
+    state: PlasmaCore.Svg.Normal
+    width: 600
+    height: 800
+
+    Column {
+        anchors.centerIn: parent
+        spacing: 4
+
+        Controls.Button {
+            text: "Switch Selected State"
+            onClicked: root.state = (root.state == PlasmaCore.Svg.Selected ? PlasmaCore.Svg.Normal : PlasmaCore.Svg.Selected)
+        }
+
+        PlasmaCore.SvgItem {
+            svg: PlasmaCore.Svg {
+                id: svg
+                imagePath: "icons/phone"
+                state: root.state
+            }
+        }
+
+        PlasmaCore.IconItem {
+            id: icon
+            source: "phone"
+            state: root.state
+        }
+    }
+}