From 094e6d8d21cfe41b66106ce22530df099b2f9111 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B2=88=E6=96=87=E9=AA=90?= <50741705+swq11@users.noreply.github.com> Date: Wed, 25 Dec 2024 13:17:14 +0800 Subject: [PATCH] fix: Adjust the bluetooth module UI (#1980) Adjust the bluetooth module UI Log: Adjust the bluetooth module UI pms: BUG-297117 Co-authored-by: swq --- .../qml/BlueToothDeviceListView.qml | 160 ++++++++-------- src/plugin-bluetooth/qml/BluetoothCtl.qml | 175 +++++++++--------- 2 files changed, 164 insertions(+), 171 deletions(-) diff --git a/src/plugin-bluetooth/qml/BlueToothDeviceListView.qml b/src/plugin-bluetooth/qml/BlueToothDeviceListView.qml index 69da37dd7e..3eb5e17339 100644 --- a/src/plugin-bluetooth/qml/BlueToothDeviceListView.qml +++ b/src/plugin-bluetooth/qml/BlueToothDeviceListView.qml @@ -35,14 +35,19 @@ Rectangle { property Item removedItem: null id: itemCtl Layout.fillWidth: true + Layout.fillHeight: true leftPadding: 10 - implicitHeight: 60 + + topPadding: 0 + bottomPadding: 0 + spacing: 0 + + implicitHeight: 50 cascadeSelected: true visible: model.visiable backgroundVisible: root.backgroundVisible icon.name: model.iconName contentFlow: true - hoverEnabled: true background: DccItemBackground { @@ -57,109 +62,96 @@ Rectangle { anchors.fill: parent onDoubleClicked: { console.log("双击了项 ", model.id, model.adapterId); - //处理双击事件 + // 处理双击事件 if (model.connectStatus !== 2) { dccData.work().connectDevice(model.id, model.adapterId) } } } - RowLayout { width: parent.width + anchors.fill: parent Layout.fillWidth: true Layout.fillHeight: true - Column { + ColumnLayout { id: status - Layout.alignment: Qt.AlignVCenter - Layout.leftMargin: 5 + Layout.fillHeight: true spacing: 0 - height: myDeviceName.height + deatilShow.height Label { id: myDeviceName - height: 25 text: model.name font: D.DTK.fontManager.t6 horizontalAlignment: Qt.AlignLeft - verticalAlignment: Qt.AlignBottom - leftPadding: 0 + verticalAlignment: Qt.AlignVCenter elide: Text.ElideRight - width: Math.min(implicitWidth, root.width - 200) + Layout.fillWidth: true + Layout.fillHeight: !showConnectStatus } - Row { - id: deatilShow - height: 25 - visible: showConnectStatus - Label { - id: nameDetail - visible: showConnectStatus - width: 60 - text: model.connectStatusText - horizontalAlignment: Qt.AlignLeft - verticalAlignment: Qt.AlignTop - font.pointSize: 8 - } + Loader { + id: loader + active: showConnectStatus + sourceComponent: + RowLayout { + id: deatilShow + Layout.fillWidth: true + Layout.fillHeight: true + Label { + id: nameDetail + width: 60 + text: model.connectStatusText + horizontalAlignment: Qt.AlignLeft + verticalAlignment: Qt.AlignTop + font.pointSize: 8 + Layout.fillHeight: true + } - D.DciIcon { - id: powerIcon - visible: showPowerStatus && model.battery !== "0%" - width: 20 - name: model.batteryIconPath - sourceSize: Qt.size(14, 14) - } + D.DciIcon { + id: powerIcon + visible: model.battery !== "0%" + width: 20 + name: model.batteryIconPath + sourceSize: Qt.size(14, 14) + } - Label { - id: power - visible: showPowerStatus && model.battery !== "0%" - text: model.battery - horizontalAlignment: Qt.AlignLeft - verticalAlignment: Qt.AlignTop - font.pointSize: 8 + Label { + id: power + visible: model.battery !== "0%" + text: model.battery + horizontalAlignment: Qt.AlignLeft + verticalAlignment: Qt.AlignTop + font.pointSize: 8 + } + } + onLoaded: { + item.show() } - } - } - Rectangle { - id: nameEditBackgrd - width: root.width - 100 - height: 50 - color: "transparent" + D.LineEdit { + id: nameEdit visible: false - D.LineEdit { - id: nameEdit - visible: false - anchors.centerIn: parent - width: root.width - 100 - height: 40 - text: model.name - topPadding: 5 - bottomPadding: 5 - - background: Rectangle { - color: "transparent" // 设置为透明 - border.color: nameEdit.selectionColor // 边框颜色设置为蓝色 - border.width: 2 // 边框宽度 - radius: 5 // 可选：设置圆角 - } + text: model.name + Layout.fillWidth: true + Layout.fillHeight: true + Layout.topMargin: 10 + Layout.bottomMargin: 10 - onEditingFinished: { - nameEdit.visible = false - nameEditBackgrd.visible = false - status.visible = true - itemCtl.hoverEnabled = true + onEditingFinished: { + nameEdit.visible = false + status.visible = true + itemCtl.hoverEnabled = true - console.log("set device name ", model.id, nameEdit.text) - dccData.work().setDeviceAlias(model.id, nameEdit.text) + console.log("set device name ", model.id, nameEdit.text) + dccData.work().setDeviceAlias(model.id, nameEdit.text) - } - Keys.onPressed: { - if (event.key === Qt.Key_Return) { - hostNameEdit.forceActiveFocus(false); // 结束编辑 - } + } + Keys.onPressed: { + if (event.key === Qt.Key_Return) { + hostNameEdit.forceActiveFocus(false); // 结束编辑 } } } @@ -167,19 +159,18 @@ Rectangle { RowLayout { id: rowCtl Layout.alignment: Qt.AlignRight | Qt.AlignVCenter - height: 50 spacing: 10 D.Button { id: connectBtn implicitWidth: 100 - padding: 0 - height: 30 background.visible: true text: model.connectStatus === 2 ? qsTr("Disconnect") : qsTr("Connect") enabled: model.connectStatus === 2 || model.connectStatus === 0 font: D.DTK.fontManager.t6 flat: false visible: itemCtl.hovered + + Layout.alignment: Qt.AlignVCenter onClicked: { if (model.connectStatus === 2) { dccData.work().disconnectDevice(model.id) @@ -193,12 +184,14 @@ Rectangle { id: moreBtn visible: showMoreBtn Layout.alignment: Qt.AlignRight - icon.name: "qrc:/icons/deepin/builtin/icons/bluetooth_option.dci" - icon.width: 16 - icon.height: 16 - width: 20 - height: 20 - flat: true + icon.name: "bluetooth_option" + icon.width: 24 + icon.height: 24 + + implicitHeight: 30 + implicitWidth: 30 + + flat: !hovered D.Menu { id: contextMenu @@ -236,7 +229,6 @@ Rectangle { padding: 0 onTriggered: { nameEdit.visible = true - nameEditBackgrd.visible = true status.visible = false itemCtl.hoverEnabled = false diff --git a/src/plugin-bluetooth/qml/BluetoothCtl.qml b/src/plugin-bluetooth/qml/BluetoothCtl.qml index 85ee61dd28..b18162b5c1 100644 --- a/src/plugin-bluetooth/qml/BluetoothCtl.qml +++ b/src/plugin-bluetooth/qml/BluetoothCtl.qml @@ -18,128 +18,128 @@ DccObject{ backgroundType: DccObject.Normal page: RowLayout { Layout.fillWidth: true - Layout.fillHeight: true - height: 60 + spacing: 0 id: root - DciIcon { id: deviceIcon Layout.leftMargin: 10 Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter name: "qrc:/icons/deepin/builtin/icons/bluetoothNomal" - sourceSize: Qt.size(36, 36) + sourceSize: Qt.size(36, 36) + Layout.preferredHeight: 50 + Layout.preferredWidth: 40 } - Column { + ColumnLayout { spacing: 0 + id: devName + Layout.fillWidth: true Label { - width: 100 id: myDeviceName - height: 25 + Layout.alignment: Qt.AlignLeft text: dccObj.displayName font: DTK.fontManager.t6 horizontalAlignment: Qt.AlignLeft verticalAlignment: Qt.AlignBottom leftPadding: 0 - } - - Row { - width: root.width - deviceSwitch.width - 36 - 52 - spacing: 5 - Label { - id: nameDetail - height: 25 - width: Math.min(implicitWidth, root.width - deviceSwitch.width - 36 - 52) - text: model.nameDetail - horizontalAlignment: Qt.AlignLeft - verticalAlignment: Qt.AlignTop - font.pointSize: 8 - color:"#5A000000" - elide: Text.ElideRight - } - - ToolButton { - id: editBtn - flat: false - height: 25 - font.pointSize: 8 - text: qsTr("Edit") - checked: true - spacing: 0 - topPadding: -5 - onClicked: { - nameEdit.visible = true - nameDetail.visible = false - myDeviceName.visible = false - nameEditBackgrd.visible = true - nameEdit.forceActiveFocus(true) - nameEdit.selectAll() - editBtn.visible = false - } - } + topPadding: 5 + elide: Text.ElideRight + Layout.fillWidth: true } Rectangle { - id: nameEditBackgrd - width: root.width - deviceSwitch.width - 36 - 52 - height: 50 color: "transparent" - visible: false - LineEdit { - id: nameEdit - visible: false - anchors.centerIn: parent - width: root.width - deviceSwitch.width - 36 - 52 - height: 30 - text: myDeviceName.text - topPadding: 5 - bottomPadding: 5 - - onTextChanged: { - if (text.length > 32) { - text = text.substr(0, 32); // 截断到31个字符 - nameEdit.alertText = qsTr("Length greater than or equal to 32") - nameEdit.showAlert = true - } else { - nameEdit.showAlert = false - } + id: nameDetaillay + Layout.fillWidth: true + Layout.fillHeight: true + RowLayout { + spacing: 5 + Layout.fillWidth: true + Label { + id: nameDetail + Layout.alignment: Qt.AlignLeft + width: Math.min(implicitWidth, nameDetaillay.width - editBtn.width - 10) + + text: model.nameDetail + horizontalAlignment: Qt.AlignLeft + verticalAlignment: Qt.AlignTop + font.pointSize: 8 + elide: Text.ElideRight } - // background: Rectangle { - // color: "transparent" // 设置为透明 - // border.color: nameEdit.selectionColor // 边框颜色设置为蓝色 - // border.width: 2 // 边框宽度 - // radius: 5 // 可选：设置圆角 - // } - - onEditingFinished: { - nameEdit.visible = false - nameDetail.visible = true - myDeviceName.visible = true - nameEditBackgrd.visible = false - editBtn.visible = true - - dccData.work().setAdapterAlias(model.id, nameEdit.text) - } - Keys.onPressed: { - if (event.key === Qt.Key_Return) { - nameEdit.forceActiveFocus(false); // 结束编辑 + ToolButton { + id: editBtn + flat: false + font.pointSize: 8 + text: qsTr("Edit") + checked: true + spacing: 0 + implicitHeight: 20 + + anchors.left: nameDetail.right + onClicked: { + nameEdit.visible = true + devName.visible =false + nameEdit.forceActiveFocus(true) + nameEdit.selectAll() } } } } + + + } + + LineEdit { + id: nameEdit + visible: false + Layout.fillWidth: true + // implicitWidth: root.width - deviceSwitch.width - 40 - 32 + text: myDeviceName.text + topPadding: 5 + bottomPadding: 5 + Layout.rightMargin: 10 + implicitHeight: 30 + + onTextChanged: { + if (text.length > 64) { + text = text.substr(0, 64); // 截断到31个字符 + nameEdit.alertText = qsTr("Length greater than or equal to 64") + nameEdit.showAlert = true + alertTimer.start() + } else { + nameEdit.showAlert = false + } + } + Timer { + id: alertTimer + interval: 2000 + repeat: false + onTriggered: { + nameEdit.showAlert = false + } + } + + onEditingFinished: { + nameEdit.visible = false + devName.visible = true + dccData.work().setAdapterAlias(model.id, nameEdit.text) + } + Keys.onPressed: { + if (event.key === Qt.Key_Return) { + nameEdit.forceActiveFocus(false); // 结束编辑 + } + } } BusyIndicator { id: initAnimation - // Layout.alignment: Qt.AlignRight running: true visible: false implicitWidth: 32 implicitHeight: 32 } - Timer { id: timer interval: 6000 // 1000毫秒，即1秒 @@ -156,6 +156,8 @@ DccObject{ Switch { id: deviceSwitch checked: model.powered + Layout.alignment: Qt.AlignRight | Qt.AlignVCenter + Layout.rightMargin: 10 onCheckedChanged: { if (checked === model.powered) { return @@ -207,7 +209,6 @@ DccObject{ horizontalAlignment: Qt.AlignLeft verticalAlignment: Qt.AlignTop font.pointSize: 8 - color:"#5A000000" // 超链接点击事件 onLinkActivated: function(url) { console.log("点击的链接是: " + url)