From 60d788a7692035d4146e2602b6a9408592234df6 Mon Sep 17 00:00:00 2001 From: reionwong Date: Thu, 21 Oct 2021 16:36:58 +0800 Subject: [PATCH] WLAN connection new UI --- src/qml/WLAN/WifiItem.qml | 328 +++++++++++++++++++++----------------- src/qml/WLAN/WifiView.qml | 10 +- translations/en_US.ts | 42 ++--- translations/zh_CN.ts | 40 +++-- 4 files changed, 236 insertions(+), 184 deletions(-) diff --git a/src/qml/WLAN/WifiItem.qml b/src/qml/WLAN/WifiItem.qml index 575e7ef..bb945fd 100644 --- a/src/qml/WLAN/WifiItem.qml +++ b/src/qml/WLAN/WifiItem.qml @@ -30,192 +30,230 @@ import "../" Item { id: control + height: _itemLayout.implicitHeight + FishUI.Units.largeSpacing + property bool passwordIsStatic: (model.securityType === NM.Enums.StaticWep || model.securityType === NM.Enums.WpaPsk || model.securityType === NM.Enums.Wpa2Psk || model.securityType === NM.Enums.SAE) property bool predictableWirelessPassword: !model.uuid && model.type === NM.Enums.Wireless && passwordIsStatic - Rectangle { + ColumnLayout { + id: _itemLayout anchors.fill: parent - radius: FishUI.Theme.smallRadius - color: FishUI.Theme.textColor - opacity: mouseArea.pressed ? 0.15 : mouseArea.containsMouse ? 0.1 : 0.0 - } + anchors.leftMargin: 0 + anchors.rightMargin: FishUI.Units.smallSpacing + anchors.topMargin: FishUI.Units.smallSpacing + anchors.bottomMargin: FishUI.Units.smallSpacing + spacing: 0 - MouseArea { - id: mouseArea - anchors.fill: parent - hoverEnabled: true - acceptedButtons: Qt.LeftButton - - onClicked: { - if (model.uuid || !predictableWirelessPassword) { - if (connectionState === NM.Enums.Deactivated) { - if (!predictableWirelessPassword && !model.uuid) { - handler.addAndActivateConnection(model.devicePath, model.specificPath); - } else { - handler.activateConnection(model.connectionPath, model.devicePath, model.specificPath); - } - } else { - handler.deactivateConnection(model.connectionPath, model.devicePath); - } - } else if (predictableWirelessPassword) { - passwordDialog.show() - } - } - } + // 顶部项 + Item { + Layout.fillWidth: true + Layout.preferredHeight: _topItem.implicitHeight + FishUI.Units.largeSpacing - RowLayout { - anchors.fill: parent - anchors.margins: FishUI.Units.smallSpacing - spacing: FishUI.Units.largeSpacing - - Image { - width: 22 - height: width - sourceSize: Qt.size(width, height) - source: "qrc:/images/" + (FishUI.Theme.darkMode ? "dark/" : "light/") + model.connectionIcon + ".svg" - smooth: false - } + Rectangle { + anchors.fill: parent + radius: FishUI.Theme.smallRadius + color: FishUI.Theme.textColor + opacity: mouseArea.pressed ? 0.15 : mouseArea.containsMouse ? 0.1 : 0.0 + } - Label { - text: model.itemUniqueName - } + MouseArea { + id: mouseArea + anchors.fill: parent + hoverEnabled: true + acceptedButtons: Qt.LeftButton - Item { - Layout.fillWidth: true - } + onClicked: { + additionalSettings.toggle() - FishUI.BusyIndicator { - id: busyIndicator - width: 22 - height: width - visible: connectionState === NM.Enums.Activating || - connectionState === NM.Enums.Deactivating - running: busyIndicator.visible - } +// if (model.uuid || !predictableWirelessPassword) { +// if (connectionState === NM.Enums.Deactivated) { +// if (!predictableWirelessPassword && !model.uuid) { +// handler.addAndActivateConnection(model.devicePath, model.specificPath); +// } else { +// handler.activateConnection(model.connectionPath, model.devicePath, model.specificPath); +// } +// } else { +// additionalSettings.toggle() +// // handler.deactivateConnection(model.connectionPath, model.devicePath); +// } +// } else if (predictableWirelessPassword) { +// // passwordDialog.show() - // Activated - Image { - width: 16 - height: width - sourceSize: Qt.size(width, height) - source: "qrc:/images/light/checked.svg" - visible: model.connectionState === NM.Enums.Activated +// // wirelessView.hideAllItems() +// additionalSettings.toggle() +// } + } + } - ColorOverlay { + RowLayout { + id: _topItem anchors.fill: parent - source: parent - color: FishUI.Theme.highlightColor - opacity: 1 - visible: true - } - } + spacing: FishUI.Units.largeSpacing - // Locked - Image { - width: 22 - height: width - sourceSize: Qt.size(width, height) - source: FishUI.Theme.darkMode ? "qrc:/images/dark/locked.svg" : "qrc:/images/light/locked.svg" - visible: (model.securityType === -1 | model.securityType === 0) ? false : true - smooth: false - } + Image { + width: 22 + height: width + sourceSize: Qt.size(width, height) + source: "qrc:/images/" + (FishUI.Theme.darkMode ? "dark/" : "light/") + model.connectionIcon + ".svg" + smooth: false + } - IconButton { - source: "qrc:/images/info.svg" - onClicked: { - var component = Qt.createComponent("WirelessDetailsDialog.qml") - if (component.status === Component.Ready) { - var dialog = component.createObject(rootWindow) - dialog.open() + Label { + text: model.itemUniqueName } - } - } - } - Window { - id: passwordDialog - title: model.itemUniqueName - - width: 300 - height: mainLayout.implicitHeight + FishUI.Units.largeSpacing * 2 - minimumWidth: width - minimumHeight: height - maximumHeight: height - maximumWidth: width - flags: Qt.Dialog - modality: Qt.WindowModal - - signal accept() - - onVisibleChanged: { - passwordField.text = "" - passwordField.forceActiveFocus() - showPasswordCheckbox.checked = false - } + Item { + Layout.fillWidth: true + } - onAccept: { - handler.addAndActivateConnection(model.devicePath, model.specificPath, passwordField.text) - passwordDialog.close() - } + FishUI.BusyIndicator { + id: busyIndicator + width: 22 + height: width + visible: connectionState === NM.Enums.Activating || + connectionState === NM.Enums.Deactivating + running: busyIndicator.visible + } - Rectangle { - anchors.fill: parent - color: FishUI.Theme.secondBackgroundColor - } + // Activated + Image { + width: 16 + height: width + sourceSize: Qt.size(width, height) + source: "qrc:/images/light/checked.svg" + visible: model.connectionState === NM.Enums.Activated - ColumnLayout { - id: mainLayout - anchors.fill: parent - anchors.margins: FishUI.Units.largeSpacing - - TextField { - id: passwordField - focus: true - echoMode: showPasswordCheckbox.checked ? TextInput.Normal : TextInput.Password - selectByMouse: true - placeholderText: qsTr("Password") - validator: RegExpValidator { - regExp: { - if (model.securityType === NM.Enums.StaticWep) - return /^(?:[\x20-\x7F]{5}|[0-9a-fA-F]{10}|[\x20-\x7F]{13}|[0-9a-fA-F]{26}){1}$/; - return /^(?:[\x20-\x7F]{8,64}){1}$/; + ColorOverlay { + anchors.fill: parent + source: parent + color: FishUI.Theme.highlightColor + opacity: 1 + visible: true } } - onAccepted: passwordDialog.accept() - Keys.onEscapePressed: passwordDialog.close() - Layout.fillWidth: true - } - Item { - height: FishUI.Units.smallSpacing + // Locked + Image { + width: 22 + height: width + sourceSize: Qt.size(width, height) + source: FishUI.Theme.darkMode ? "qrc:/images/dark/locked.svg" : "qrc:/images/light/locked.svg" + visible: (model.securityType === -1 | model.securityType === 0) ? false : true + smooth: false + } + + IconButton { + source: "qrc:/images/info.svg" + onClicked: { + var component = Qt.createComponent("WirelessDetailsDialog.qml") + if (component.status === Component.Ready) { + var dialog = component.createObject(rootWindow) + dialog.open() + } + } + } } + } + + Hideable { + id: additionalSettings + spacing: 0 - CheckBox { - id: showPasswordCheckbox - checked: false - text: qsTr("Show password") + onShownChanged: { + // 清除数据 + if (!shown) { + passwordField.clear() + } else { + // wirelessView.contentY = control.y + passwordField.forceActiveFocus() + } } Item { - height: FishUI.Units.largeSpacing + height: FishUI.Units.largeSpacing * 2 } + // 密码对话 RowLayout { + visible: predictableWirelessPassword + spacing: FishUI.Units.largeSpacing + + Label { + text: qsTr("Password") + } + + TextField { + id: passwordField + focus: true + echoMode: TextInput.Password + selectByMouse: true + placeholderText: qsTr("Password") + validator: RegExpValidator { + regExp: { + if (model.securityType === NM.Enums.StaticWep) + return /^(?:[\x20-\x7F]{5}|[0-9a-fA-F]{10}|[\x20-\x7F]{13}|[0-9a-fA-F]{26}){1}$/; + return /^(?:[\x20-\x7F]{8,64}){1}$/; + } + } + onAccepted: connectWithPassword() + Keys.onEscapePressed: additionalSettings.toggle() + Layout.fillWidth: true + } + Button { text: qsTr("Cancel") - Layout.fillWidth: true - onClicked: passwordDialog.close() + onClicked: additionalSettings.hide() } Button { text: qsTr("Connect") + flat: true enabled: passwordField.acceptableInput - Layout.fillWidth: true + onClicked: connectWithPassword() + } + } + + RowLayout { + visible: !predictableWirelessPassword + + Button { + visible: (model.uuid || !predictableWirelessPassword) && connectionState === NM.Enums.Deactivated + text: qsTr("Connect") flat: true - onClicked: passwordDialog.accept() + + onClicked: { + if (!predictableWirelessPassword && !model.uuid) { + handler.addAndActivateConnection(model.devicePath, model.specificPath) + } else { + handler.activateConnection(model.connectionPath, model.devicePath, model.specificPath) + } + } + } + + Button { + visible: connectionState === NM.Enums.Activated + text: qsTr("Disconnect") + + onClicked: { + handler.deactivateConnection(model.connectionPath, model.devicePath) + } } } + + Item { + height: FishUI.Units.smallSpacing + } + + HorizontalDivider {} } } + + function connectWithPassword() { + handler.addAndActivateConnection(model.devicePath, model.specificPath, passwordField.text) + } + + function hideAdditional() { + additionalSettings.hide() + } } diff --git a/src/qml/WLAN/WifiView.qml b/src/qml/WLAN/WifiView.qml index 3d88801..b1fee9f 100644 --- a/src/qml/WLAN/WifiView.qml +++ b/src/qml/WLAN/WifiView.qml @@ -73,7 +73,7 @@ ColumnLayout { sourceModel: connectionModel } - spacing: FishUI.Units.largeSpacing + spacing: 0 interactive: false visible: count > 0 @@ -81,7 +81,13 @@ ColumnLayout { delegate: WifiItem { width: ListView.view.width - height: ListView.view.itemHeight + // height: ListView.view.itemHeight + } + + function hideAllItems() { + for (var i = 0; i < wirelessView.count; ++i) { + wirelessView.itemAtIndex(i).hideAdditional() + } } } } diff --git a/translations/en_US.ts b/translations/en_US.ts index 09f0229..fb8c405 100644 --- a/translations/en_US.ts +++ b/translations/en_US.ts @@ -390,44 +390,44 @@ - + Add new user - - + + User name - - + + Verify password Verify password - + Account type Account type - + Standard Standard - + Administrator Administrator - + Cancel Cancel - + Add Add @@ -521,8 +521,8 @@ - - + + Password Password @@ -793,25 +793,27 @@ WifiItem - + + Password Password - - Show password - - - - + Cancel Cancel - + + Connect + + + Disconnect + + WifiView diff --git a/translations/zh_CN.ts b/translations/zh_CN.ts index 8abe3f6..f1b54aa 100644 --- a/translations/zh_CN.ts +++ b/translations/zh_CN.ts @@ -390,44 +390,44 @@ 用户 - + Add new user 添加新用户 - - + + User name 用户名 - - + + Verify password 验证密码 - + Account type 类型 - + Standard 标准 - + Administrator 管理员 - + Cancel 取消 - + Add 添加 @@ -521,8 +521,8 @@ - - + + Password 密码 @@ -793,25 +793,31 @@ WifiItem - + + Password 密码 - Show password - 显示密码 + 显示密码 - + Cancel 取消 - + + Connect 连接 + + + Disconnect + 断开连接 + WifiView