chore: dci icon contorl support animation

qt6/src/qml/ButtonBox.qml

@@ -6,6 +6,7 @@ import QtQuick 2.11
 import QtQuick.Layouts 1.11
 import org.deepin.dtk 1.0 as D
 import org.deepin.dtk.style 1.0 as DS
+import org.deepin.dtk.private 1.0 as P
 
 Control {
     id: control
@@ -31,4 +32,27 @@ Control {
         outsideBorderColor: null
         color2: color1
     }
+
+    ParallelAnimation {
+        running:  btnGroup.checkedButton && (btnGroup.checkedButton.x !== backgroundPanel.x || btnGroup.checkedButton.y !== backgroundPanel.y)
+        NumberAnimation { target: backgroundPanel; property: "x"; to: btnGroup.checkedButton.x; duration: 200 }
+        NumberAnimation { target: backgroundPanel; property: "y"; to: btnGroup.checkedButton.y; duration: 200 }
+        NumberAnimation { target: backgroundPanel; property: "width"; to: btnGroup.checkedButton.width; duration: 200 }
+        NumberAnimation { target: backgroundPanel; property: "height"; to: btnGroup.checkedButton.height; duration: 200 }
+    }
+
+    P.ButtonPanel {
+        id: backgroundPanel
+        visible: btnGroup.checkedButton
+        implicitWidth: btnGroup.checkedButton.width
+        implicitHeight: btnGroup.checkedButton.height
+        button: control
+        outsideBorderColor: null
+        color1: D.Palette {
+            normal {
+                common: Qt.rgba(0, 0, 0, 0.2)
+            }
+        }
+        color2: color1
+    }
 }

qt6/src/qml/Switch.qml

@@ -20,43 +20,57 @@ T.Switch {
     topPadding: DS.Style.control.vPadding
     bottomPadding: DS.Style.control.vPadding
     spacing: DS.Style.control.spacing
+    D.ColorSelector.hovered: false // disable hover ==> normal animation
 
-    indicator: Rectangle {
+    indicator: D.DciIcon {
+        id: handle
         implicitWidth: DS.Style.switchButton.indicatorWidth
         implicitHeight: DS.Style.switchButton.indicatorHeight
 
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
-        radius: DS.Style.control.radius
-        color: control.D.ColorSelector.backgroundColor
-        opacity: control.D.ColorSelector.controlState === D.DTK.DisabledState ? 0.4 : 1
 
-        D.DciIcon {
-            id: handle
-            x: Math.max(0, Math.min(parent.width - width, control.visualPosition * parent.width - (width / 2)))
-            y: (parent.height - height) / 2
-            width: DS.Style.switchButton.handleWidth
-            height: DS.Style.switchButton.handleHeight
-            sourceSize: Qt.size(DS.Style.switchButton.handleWidth, DS.Style.switchButton.handleHeight)
-            name: DS.Style.switchButton.iconName
-            opacity: control.D.ColorSelector.controlState === D.DTK.DisabledState && control.checked ? 0.4 : 1
-            palette {
-                highlight: control.checked ? control.palette.highlight : control.D.ColorSelector.handleColor
-                highlightForeground: control.palette.highlightedText
-                foreground: control.palette.windowText
-                background: control.palette.window
-            }
-            mode: control.D.ColorSelector.controlState
-            theme: control.D.ColorSelector.controlTheme
-            fallbackToQIcon: false
+        width: DS.Style.switchButton.handleWidth
+        height: DS.Style.switchButton.handleHeight
+        sourceSize: Qt.size(DS.Style.switchButton.indicatorWidth, DS.Style.switchButton.indicatorWidth)
+        name: control.checked ? "switch_on_static" : "switch_off_static"
+        opacity: control.D.ColorSelector.controlState === D.DTK.DisabledState && control.checked ? 0.4 : 1
+        palette {
+            highlight: control.checked ? control.palette.highlight : control.D.ColorSelector.handleColor
+            highlightForeground: control.palette.highlightedText
+            foreground: control.palette.windowText
+            background: control.palette.window
+        }
+        mode: control.D.ColorSelector.controlState
+        theme: control.D.ColorSelector.controlTheme
+        fallbackToQIcon: false
+    }
 
-            Behavior on x {
-                enabled: !control.down
-                SmoothedAnimation { velocity: 200 }
-            }
+    Timer {
+        id: toggletimer
+        interval: 200
+        onTriggered: {
+            control.toggle()
+            handle.name = control.checked ? "switch_on_static" : "switch_off_static"
         }
     }
 
+    function palyAndSetImage() {
+        handle.name = !control.checked ? "switch_on" : "switch_off"
+        handle.play(D.DTK.NormalState)
+        toggletimer.start();
+    }
+
+    Keys.onSpacePressed: palyAndSetImage()
+    Keys.onEnterPressed: palyAndSetImage()
+    Keys.onReturnPressed: palyAndSetImage()
+
+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.LeftButton
+        onClicked: palyAndSetImage()
+    }
+
     contentItem: Label {
         leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
         rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0

qt6/src/qml/ToolButton.qml

@@ -10,7 +10,7 @@ import org.deepin.dtk.private 1.0 as P
 
 T.ToolButton {
     id: control
-    property D.Palette textColor: checked ? DS.Style.checkedButton.text : (highlighted ? DS.Style.highlightedButton.text : DS.Style.button.text)
+    property D.Palette textColor: checked ? DS.Style.highlightedButton.text : (highlighted ? DS.Style.highlightedButton.text : DS.Style.button.text)
 
     implicitWidth: DS.Style.control.implicitWidth(control)
     implicitHeight: DS.Style.control.implicitHeight(control)
@@ -66,10 +66,40 @@ T.ToolButton {
         }
     }
 
+    states: [
+        State {
+            name: "hovered"
+            when: control.hovered && !control.checked
+            PropertyChanges {
+                target: contentItem
+                scale : 1.2
+            }
+        },
+        State {
+            name: "checked"
+            when: control.checked
+            PropertyChanges {
+                target: contentItem
+                scale : 1.0
+            }
+        }
+    ]
+
+    transitions: Transition {
+        NumberAnimation { properties: "scale"; easing.type: Easing.InOutQuad }
+    }
+
     background: P.ButtonPanel {
+        visible: control.state === "hovered"
         implicitWidth: DS.Style.toolButton.width
         implicitHeight: DS.Style.toolButton.height
         button: control
         outsideBorderColor: null
+        color1: D.Palette {
+            normal {
+                common: Qt.rgba(0, 0, 0, 0.1)
+            }
+        }
+        color2 : color1
     }
 }

src/dtkdeclarative_assets.qrc

@@ -46,7 +46,10 @@
         <file alias="built-in-icons/slider_point_left.dci">icons/bloom/slider_point_left.dci</file>
         <file alias="built-in-icons/slider_round_hor.dci">icons/bloom/slider_round_hor.dci</file>
         <file alias="built-in-icons/slider_round_ver.dci">icons/bloom/slider_round_ver.dci</file>
-        <file alias="built-in-icons/switch_button.dci">icons/bloom/switch_button.dci</file>
+        <file alias="built-in-icons/switch_on.dci">icons/bloom/switch_on.dci</file>
+        <file alias="built-in-icons/switch_off.dci">icons/bloom/switch_off.dci</file>
+        <file alias="built-in-icons/switch_on_static.dci">icons/bloom/switch_on_static.dci</file>
+        <file alias="built-in-icons/switch_off_static.dci">icons/bloom/switch_off_static.dci</file>
         <file alias="built-in-icons/slider_point_up.dci">icons/bloom/slider_point_up.dci</file>
         <file alias="built-in-icons/checkbox_mix.dci">icons/bloom/checkbox_mix.dci</file>
         <file alias="built-in-icons/checkbox_checked.dci">icons/bloom/checkbox_checked.dci</file>

src/private/dquickdciiconimage.cpp

@@ -18,6 +18,47 @@ static QString appIconThemeName()
     return DGuiApplicationHelper::instance()->applicationTheme()->iconThemeName();
 }
 
+static QString findDciIconPath(const QString &iconName, const QString &themeName)
+{
+    QString iconPath;
+    auto cached = DIconTheme::cached();
+
+    if (cached) {
+        iconPath = cached->findDciIconFile(iconName, themeName);
+    } else {
+        iconPath = DIconTheme::findDciIconFile(iconName, themeName);
+    }
+    return iconPath;
+}
+
+static DDciIcon::Mode controlState2DciMode(int state)
+{
+    DDciIcon::Mode dcimode = DDciIcon::Normal;
+    switch (state) {
+    case DQMLGlobalObject::NormalState:
+        dcimode = DDciIcon::Normal;
+        break;
+    case DQMLGlobalObject::DisabledState:
+        dcimode = DDciIcon::Disabled;
+        break;
+    case DQMLGlobalObject::HoveredState:
+        dcimode = DDciIcon::Hover;
+        break;
+    case DQMLGlobalObject::PressedState:
+        dcimode = DDciIcon::Pressed;
+        break;
+    default:
+        break;
+    }
+
+    return dcimode;
+}
+
+static inline DDciIcon::Theme dciTheme(DGuiApplicationHelper::ColorType type)
+{
+    return type == DGuiApplicationHelper::DarkType ? DDciIcon::Dark : DDciIcon::Light;
+}
+
 DQuickDciIconImageItemPrivate::DQuickDciIconImageItemPrivate(DQuickDciIconImagePrivate *pqq)
     : parentPriv(pqq)
 {
@@ -31,11 +72,27 @@ void DQuickDciIconImageItemPrivate::maybeUpdateUrl()
         return DQuickIconImagePrivate::maybeUpdateUrl();
     }
 
-    QUrl url;
-    url.setScheme(QLatin1String("image"));
-    url.setHost(QLatin1String("dtk.dci.icon"));
-    url.setQuery(getUrlQuery());
-    q->setSource(url);
+    QString iconPath = findDciIconPath(parentPriv->imageItem->name(), appIconThemeName());
+    if (iconPath.isEmpty())
+        return DQuickIconImagePrivate::maybeUpdateUrl();
+
+    updatePlayer();
+
+    if (player)
+        player->setMode(controlState2DciMode(parentPriv->mode));
+}
+
+void DQuickDciIconImageItemPrivate::play(int mode)
+{
+    Q_Q(DQuickIconImage);
+    if (parentPriv->imageItem->name().isEmpty() || iconType != ThemeIconName) {
+        return;
+    }
+
+    updatePlayer();
+
+    if (player)
+        player->play(controlState2DciMode(mode));
 }
 
 QUrlQuery DQuickDciIconImageItemPrivate::getUrlQuery()
@@ -56,6 +113,57 @@ QUrlQuery DQuickDciIconImageItemPrivate::getUrlQuery()
     return query;
 }
 
+void DQuickDciIconImageItemPrivate::updatePlayerIconSize()
+{
+    if (!player)
+        return;
+
+    int boundingSize = qMax(q_func()->sourceSize().width(), q_func()->sourceSize().height());
+#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
+    if (qApp->testAttribute(Qt::AA_UseHighDpiPixmaps))
+#endif
+        boundingSize = qRound(boundingSize / devicePixelRatio);
+    player->setIconSize(boundingSize);
+
+}
+
+void DQuickDciIconImageItemPrivate::updatePlayer()
+{
+    if (!player) {
+        Q_Q(DQuickIconImage);
+        player = new DDciIconPlayer(parentPriv->imageItem);
+        QObject::connect(player, &DDciIconPlayer::updated, parentPriv->imageItem, [this](){
+            parentPriv->imageItem->setImage(player->currentImage());
+        });
+        QObject::connect(parentPriv->imageItem, &DQuickIconImage::sourceSizeChanged, player, [this](){
+            updatePlayerIconSize();
+        });
+    }
+
+    QString iconPath = findDciIconPath(parentPriv->imageItem->name(), appIconThemeName());
+
+    // 防止频繁构造 dciicon
+    if (iconPathCache != iconPath) {
+        DDciIcon dciIcon(iconPath);
+        if (!dciIcon.isNull()) {
+            player->setIcon(dciIcon);
+            iconPathCache =  iconPath;
+        }
+    }
+
+    player->setTheme(dciTheme(parentPriv->theme));
+
+    DDciIconPalette palette = parentPriv->palette;
+    if (!parentPriv->palette.foreground().isValid() && q_func()->color().isValid())
+        palette.setForeground(q_func()->color());
+
+    player->setPalette(palette);
+
+    updatePlayerIconSize();
+
+    player->setDevicePixelRatio(devicePixelRatio);
+}
+
 DQuickDciIconImagePrivate::DQuickDciIconImagePrivate(DQuickDciIconImage *qq)
     : DObjectPrivate(qq)
     , imageItem(new DQuickIconImage(*new DQuickDciIconImageItemPrivate(this), qq))
@@ -76,6 +184,11 @@ void DQuickDciIconImagePrivate::updateImageSourceUrl()
     imageItem->d_func()->maybeUpdateUrl();
 }
 
+void DQuickDciIconImagePrivate::play(DQMLGlobalObject::ControlState mode)
+{
+    imageItem->d_func()->play(mode);
+}
+
 DQuickDciIconImage::DQuickDciIconImage(QQuickItem *parent)
     : QQuickItem(parent)
     , DObject(*new DQuickDciIconImagePrivate(this))
@@ -119,6 +232,13 @@ void DQuickDciIconImage::setMode(DQMLGlobalObject::ControlState mode)
     Q_EMIT modeChanged();
 }
 
+void DQuickDciIconImage::play(DQMLGlobalObject::ControlState mode)
+{
+    D_D(DQuickDciIconImage);
+    if (d->imageItem)
+        d->play(mode);
+}
+
 DGuiApplicationHelper::ColorType DQuickDciIconImage::theme() const
 {
     D_DC(DQuickDciIconImage);
@@ -226,15 +346,7 @@ Dtk::Quick::DQuickIconImage *DQuickDciIconImage::imageItem() const
 
 bool DQuickDciIconImage::isNull(const QString &iconName)
 {
-    QString iconPath;
-    auto cached = DIconTheme::cached();
-
-    if (cached) {
-        iconPath = cached->findDciIconFile(iconName, appIconThemeName());
-    } else {
-        iconPath = DIconTheme::findDciIconFile(iconName, appIconThemeName());
-    }
-    return iconPath.isEmpty();
+    return findDciIconPath(iconName,  appIconThemeName()).isEmpty();
 }
 
 DQuickIconAttached *DQuickDciIconImage::qmlAttachedProperties(QObject *object)

src/private/dquickdciiconimage_p.h

@@ -46,6 +46,7 @@ class DQuickDciIconImage : public QQuickItem, DCORE_NAMESPACE::DObject
 
     DQMLGlobalObject::ControlState mode() const;
     void setMode(DQMLGlobalObject::ControlState mode);
+    Q_INVOKABLE void play(DQMLGlobalObject::ControlState mode);
 
     DGuiApplicationHelper::ColorType theme() const;
     void setTheme(DGuiApplicationHelper::ColorType theme);