sync: from linuxdeepin/dtkdeclarative

Synchronize source files from linuxdeepin/dtkdeclarative.

Source-pull-request: linuxdeepin/dtkdeclarative#366

examples/exhibition/ControlGroup.qml

@@ -0,0 +1,52 @@
+// SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd.
+//
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.0
+import QtQuick.Window 2.11
+import QtQuick.Layouts 1.11
+import org.deepin.dtk 1.0
+import ".."
+
+ ControlGroup {
+ title: "磁盘"
+ ControlGroupItem {
+ Label {
+ visible: true
+ text: "test0111111111111"
+ }
+ Label {
+ visible: true
+ text: "test13333333333"
+ }
+ }
+ ControlGroupItem {
+ Rectangle {
+ width: 100
+ height: 100
+ color: "red"
+ border.color: "black"
+ border.width: 5
+ radius: 10
+ }
+ Switch {
+ checked: true
+ Layout.alignment: Qt.AlignHCenter
+ }
+ }
+ ControlGroupItem {
+ Rectangle {
+ width: 100
+ height: 100
+ color: "green"
+ border.color: "black"
+ border.width: 5
+ radius: 10
+ }
+ Button {
+ width: 100
+ height: 100
+ Layout.alignment: Qt.AlignHCenter
+ }
+ }
+ }

examples/exhibition/qml-qt6.qrc

@@ -25,5 +25,6 @@
  <file>ToolBar.qml</file>
  <file>Dialog.qml</file>
  <file>ProgressBar.qml</file>
+ <file>ControlGroup.qml</file>
  </qresource>
 </RCC>

qt6/src/dtkdeclarative_qml.qrc

@@ -109,6 +109,8 @@
  <file>qml/ButtonIndicator.qml</file>
  <file>qml/EmbeddedProgressBar.qml</file>
  <file>qml/WaterProgressBar.qml</file>
+ <file>qml/ControlGroup.qml</file>
+ <file>qml/ControlGroupItem.qml</file>
  <file>qml/private/ProgressBarImpl.qml</file>
  <file>qml/private/ProgressBarPanel.qml</file>
  <file>qml/PlaceholderText.qml</file>

qt6/src/qml.cmake

@@ -96,6 +96,8 @@ set(QML_DTK_CONTROLS
  "qml/EmbeddedProgressBar.qml"
  "qml/WaterProgressBar.qml"
  "qml/PlaceholderText.qml"
+ "qml/ControlGroup.qml"
+ "qml/ControlGroupItem.qml"
 )
 
 foreach(QML_FILE ${QML_DTK_CONTROLS})

qt6/src/qml/ArrowListView.qml

@@ -5,6 +5,7 @@
 import QtQuick 2.11
 import QtQuick.Window 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
 
@@ -48,6 +49,20 @@ FocusScope {
  }
  interactive: Window.window ? (contentHeight > Window.window.height || model.count > maxVisibleItems) : false
  ScrollIndicator.vertical: ScrollIndicator { }
+ highlight: Rectangle {
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.leftMargin: 6
+ anchors.rightMargin: 6
+ anchors.topMargin: 6
+ anchors.bottomMargin: 6
+ property D.Palette backgroundColor: DS.Style.highlightPanel.background
+ color: D.ColorSelector.backgroundColor
+ radius: 6 // TODO can't display background when using dtk's InWindowBlur.
+ }
+ highlightFollowsCurrentItem: true
+ highlightMoveDuration: -1
+ highlightMoveVelocity: 400
  }
 
  P.ArrowListViewButton {

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/ControlGroup.qml

@@ -0,0 +1,171 @@
+// SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd.
+//
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.0
+import QtQuick.Layouts 1.11
+import org.deepin.dtk 1.0 as D
+import org.deepin.dtk.style 1.0 as DS
+
+ColumnLayout {
+ id: root
+ spacing: 10
+ clip: true
+
+ property string title
+ property bool isExpanded: true
+ property int interval: 400 / (itemLayout.children.length)
+ property int index: 0
+ property int titleHeight: 36
+ default property alias childItem: itemLayout.children
+
+ Control {
+ id: title
+ Layout.fillWidth: true
+ Layout.preferredHeight: 36
+ property int inset: 4
+ leftInset: inset
+ rightInset: inset
+ topInset: inset
+ bottomInset: inset
+ state: "normal"
+ states: [
+ State {
+ name: "normal"
+ PropertyChanges {
+ target: title
+ inset:4
+ }
+ },
+ State {
+ name: "hovered"
+ PropertyChanges {
+ target: title
+ inset:0
+ }
+ },
+ State {
+ name: "pressed"
+ PropertyChanges {
+ target: title
+ inset: 4
+ }
+ }
+ ]
+ transitions: [
+ Transition {
+ from: "normal"
+ to: "hovered"
+ NumberAnimation {
+ properties: "inset"
+ easing.type: Easing.Linear
+ duration: 500
+ }
+ },
+ Transition {
+ from: "hovered"
+ to: "normal"
+ NumberAnimation {
+ properties: "inset"
+ easing.type: Easing.Linear
+ duration: 500
+ }
+ },
+ Transition {
+ from: "hovered"
+ to: "pressed"
+ NumberAnimation {
+ properties: "inset"
+ easing.type: Easing.Linear
+ duration: 500
+ }
+ },
+ Transition {
+ from: "pressed"
+ to: "hovered"
+ NumberAnimation {
+ properties: "inset"
+ easing.type: Easing.Linear
+ duration: 500
+ }
+ }
+ ]
+ RowLayout {
+ anchors.fill: parent
+ spacing: 0
+ Label {
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ text: root.title
+ font: DTK.fontManager.t5
+ verticalAlignment: Qt.AlignVCenter
+ }
+ D.DciIcon {
+ Layout.preferredWidth: 36
+ Layout.preferredHeight: 36
+ rotation: root.isExpanded ? 0 : - 90
+ name: "arrow_ordinary_down"
+
+ Behavior on rotation {
+ NumberAnimation {
+ duration: root.interval
+ easing.type: Easing.Linear
+ }
+ }
+ }
+ }
+ MouseArea {
+ id: mouseArea
+ anchors.fill: parent
+ hoverEnabled: true
+ onClicked: root.isExpanded = !root.isExpanded
+ onPressed: title.state = "pressed"
+ onReleased: title.state = "hovered"
+ onEntered: title.state = "hovered"
+ onExited: title.state = "normal"
+ }
+ background: Item {
+ Loader {
+ anchors.fill: parent
+ active: title.hovered
+ sourceComponent: D.RoundRectangle {
+ color: DS.Style.itemDelegate.normalColor
+ radius: DS.Style.control.radius
+ corners: D.RoundRectangle.TopLeftCorner | D.RoundRectangle.TopRightCorner | D.RoundRectangle.BottomLeftCorner | D.RoundRectangle.BottomRightCorner
+ }
+ }
+ }
+ }
+
+ Timer {
+ id: timer
+ }
+
+ ColumnLayout {
+ id: itemLayout
+ }
+
+ onIsExpandedChanged: (isExpanded) => {
+ for(let i = 0; i < itemLayout.children.length; ++i) {
+ itemLayout.children[i].isExpanded = !itemLayout.children[i].isExpanded
+ }
+ // delay(0, timeout)
+ }
+
+ function timeout() {
+ itemLayout.children[index].isExpanded = !itemLayout.children[index].isExpanded
+ ++index
+ if (index === itemLayout.children.length) {
+ timer.stop()
+ timer.triggered.disconnect(timeout)
+ index = 0
+ }
+ }
+
+ function delay(delayTime, cb) {
+ timer.interval = delayTime
+ timer.repeat = true
+ timer.triggered.connect(cb)
+ timer.restart()
+ }
+}

qt6/src/qml/ControlGroupItem.qml

@@ -0,0 +1,39 @@
+// SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd.
+//
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.0
+import QtQuick.Layouts 1.11
+import QtQml.Models 2.11
+import org.deepin.dtk 1.0
+
+RowLayout {
+ id: root
+
+ property int initY
+ property bool isExpanded: true
+
+ y: isExpanded ? initY : - parent.parent.titleHeight
+ opacity: isExpanded ? 1.0 : 0.0
+ visible: opacity === 0.0 ? false : true
+
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+
+ Behavior on y {
+ NumberAnimation {
+ duration: parent.parent.interval
+ easing.type: Easing.Linear
+ }
+ }
+ Behavior on opacity {
+ NumberAnimation {
+ duration: parent.parent.interval
+ easing.type: Easing.Linear
+ }
+ }
+
+ Component.onCompleted: {
+ root.initY = root.y
+ }
+}