wifi/ui/main.qml

0001 /*
0002     SPDX-FileCopyrightText: 2018 Aditya Mehra <aix.m@outlook.com>
0003
0004     SPDX-License-Identifier: LGPL-2.1-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
0005
0006 */
0007
0008 import QtQuick.Layouts 1.14
0009 import QtQuick 2.14
0010 import QtQuick.Window 2.14
0011 import QtQuick.Controls 2.14
0012 import org.kde.plasma.core 2.0 as PlasmaCore
0013 import org.kde.kirigami as Kirigami
0014 import org.kde.plasma.networkmanagement as PlasmaNM
0015 import org.kde.kcmutils as KCM
0016 import org.kde.mycroft.bigscreen 1.0 as BigScreen
0017 import "views" as Views
0018 import "delegates" as Delegates
0019
0020 KCM.SimpleKCM {
0021     id: networkSelectionView
0022
0023     title: Screen.devicePixelRatio.toFixed(2) //i18n("Network")
0024     background: null
0025
0026     leftPadding: Kirigami.Units.smallSpacing
0027     topPadding: 0
0028     rightPadding: Kirigami.Units.smallSpacing
0029     bottomPadding: 0
0030
0031     property string pathToRemove
0032     property string nameToRemove
0033     property bool isStartUp: false
0034     property var securityType
0035     property var connectionName
0036     property var devicePath
0037     property var specificPath
0038
0039     function connectToOpenNetwork(){
0040         handler.addAndActivateConnection(devicePath, specificPath, passField.text)
0041     }
0042
0043     onActiveFocusChanged: {
0044         if (activeFocus) {
0045             handler.requestScan();
0046             connectionView.forceActiveFocus();
0047         }
0048     }
0049
0050     function removeConnection() {
0051         handler.removeConnection(pathToRemove)
0052     }
0053
0054     PlasmaNM.EnabledConnections {
0055         id: enabledConnections
0056     }
0057
0058     PlasmaNM.NetworkStatus {
0059         id: networkStatus
0060     }
0061
0062     PlasmaNM.ConnectionIcon {
0063         id: connectionIconProvider
0064     }
0065
0066     PlasmaNM.Handler {
0067         id: handler
0068     }
0069
0070     PlasmaNM.AvailableDevices {
0071         id: availableDevices
0072     }
0073
0074     PlasmaNM.NetworkModel {
0075         id: connectionModel
0076     }
0077
0078     Component {
0079         id: networkModelComponent
0080         PlasmaNM.NetworkModel {}
0081     }
0082
0083     PlasmaNM.AppletProxyModel {
0084         id: appletProxyModel
0085         sourceModel: connectionModel
0086     }
0087
0088     PlasmaNM.AppletProxyModel {
0089         id: connectedProxyModel
0090         sourceModel: connectionModel
0091     }
0092
0093     onRefreshingChanged: {
0094         if (refreshing) {
0095             refreshTimer.restart()
0096             handler.requestScan();
0097         }
0098     }
0099     Timer {
0100         id: refreshTimer
0101         interval: 3000
0102         onTriggered: networkSelectionView.refreshing = false
0103     }
0104
0105     Dialog {
0106         id: passwordLayer
0107         parent: networkSelectionView
0108
0109         closePolicy: Popup.CloseOnEscape
0110         x: (parent.width - width) / 2
0111         y: (parent.height - height) / 2
0112         dim: true
0113         onVisibleChanged: {
0114             if (visible) {
0115                 passField.forceActiveFocus();
0116             } else {
0117                 connectionView.forceActiveFocus();
0118             }
0119         }
0120         contentItem: ColumnLayout {
0121             implicitWidth: Kirigami.Units.gridUnit * 25
0122
0123             Keys.onEscapePressed: passwordLayer.close()
0124             Kirigami.Heading {
0125                 level: 2
0126                 wrapMode: Text.WordWrap
0127                 Layout.fillWidth: true
0128                 horizontalAlignment: Text.AlignHCenter
0129                 text: i18n("Enter Password For %1", connectionName)
0130             }
0131
0132             Kirigami.PasswordField {
0133                 id: passField
0134
0135                 KeyNavigation.down: connectButton
0136                 KeyNavigation.up: closeButton
0137                 Layout.fillWidth: true
0138                 placeholderText: i18n("Password...")
0139                 validator: RegularExpressionValidator {
0140                     regularExpression: if (securityType == PlasmaNM.Enums.StaticWep) {
0141                                 /^(?:.{5}|[0-9a-fA-F]{10}|.{13}|[0-9a-fA-F]{26}){1}$/
0142                             } else {
0143                                 /^(?:.{8,64}){1}$/
0144                             }
0145                 }
0146
0147                 onAccepted: {
0148                     handler.addAndActivateConnection(devicePath, specificPath, passField.text)
0149                     passwordLayer.close();
0150                 }
0151             }
0152
0153             RowLayout {
0154                 Layout.fillWidth: true
0155                 Button {
0156                     id: connectButton
0157                     KeyNavigation.up: passField
0158                     KeyNavigation.down: passField
0159                     KeyNavigation.left: passField
0160                     KeyNavigation.right: closeButton
0161                     Layout.fillWidth: true
0162                     text: i18n("Connect")
0163
0164                     onClicked: passField.accepted();
0165                     Keys.onReturnPressed: {
0166                         passField.accepted();
0167                     }
0168                 }
0169
0170                 Button {
0171                     id: closeButton
0172                     KeyNavigation.up: passField
0173                     KeyNavigation.down: passField
0174                     KeyNavigation.left: connectButton
0175                     KeyNavigation.right: passField
0176                     Layout.fillWidth: true
0177                     text: i18n("Cancel")
0178
0179                     onClicked: passwordLayer.close();
0180                     Keys.onReturnPressed: {
0181                         passwordLayer.close();
0182                     }
0183                 }
0184             }
0185             Item {
0186                 Layout.fillHeight: true
0187             }
0188         }
0189     }
0190
0191     Kirigami.OverlaySheet {
0192         id: networkActions
0193         parent: networkSelectionView
0194         showCloseButton: false
0195
0196         onVisibleChanged: {
0197             if (visible) {
0198                 forgetBtn.forceActiveFocus()
0199             }
0200         }
0201
0202         contentItem: ColumnLayout {
0203             implicitWidth: Kirigami.Units.gridUnit * 25
0204
0205             Label {
0206                 Layout.fillWidth: true
0207                 Layout.fillHeight: true
0208                 wrapMode: Text.WordWrap
0209                 text: i18n("Are you sure you want to forget the network %1?", nameToRemove)
0210             }
0211
0212             RowLayout {
0213                 Button {
0214                     id: forgetBtn
0215                     Layout.fillWidth: true
0216                     text: i18n("Forget")
0217
0218                     onClicked: {
0219                         removeConnection()
0220                         networkActions.close()
0221                         connectionView.forceActiveFocus()
0222                     }
0223
0224                     KeyNavigation.right: cancelBtn
0225
0226                     Keys.onReturnPressed: {
0227                         removeConnection()
0228                         networkActions.close()
0229                         connectionView.forceActiveFocus()
0230                     }
0231
0232                     Rectangle {
0233                         anchors.fill: parent
0234                         anchors.margins: -Kirigami.Units.smallSpacing * 0.5
0235                         color: Kirigami.Theme.linkColor
0236                         visible: forgetBtn.focus ? 1 : 0
0237                         z: -10
0238                     }
0239                 }
0240                 Button {
0241                     id: cancelBtn
0242                     Layout.fillWidth: true
0243                     text: i18n("Cancel")
0244
0245                     KeyNavigation.left: forgetBtn
0246
0247                     onClicked: {
0248                         networkActions.close()
0249                         connectionView.forceActiveFocus()
0250                     }
0251
0252                     Keys.onReturnPressed: {
0253                         networkActions.close()
0254                         connectionView.forceActiveFocus()
0255                     }
0256
0257                     Rectangle {
0258                         anchors.fill: parent
0259                         anchors.margins: -Kirigami.Units.smallSpacing * 0.5
0260                         color: Kirigami.Theme.linkColor
0261                         visible: cancelBtn.focus ? 1 : 0
0262                         z: -10
0263                     }
0264                 }
0265             }
0266         }
0267     }
0268
0269
0270     contentItem: FocusScope {
0271
0272         Rectangle {
0273             id: headerAreaTop
0274             anchors.left: parent.left
0275             anchors.right: parent.right
0276             anchors.leftMargin: -Kirigami.Units.largeSpacing
0277             anchors.rightMargin: -Kirigami.Units.largeSpacing
0278             height: parent.height * 0.075
0279             z: 10
0280             gradient: Gradient {
0281                 GradientStop { position: 0.1; color: Qt.rgba(0, 0, 0, 0.5) }
0282                 GradientStop { position: 0.9; color: Qt.rgba(0, 0, 0, 0.25) }
0283             }
0284
0285             Kirigami.Heading {
0286                 level: 1
0287                 anchors.fill: parent
0288                 anchors.topMargin: Kirigami.Units.largeSpacing
0289                 anchors.leftMargin: Kirigami.Units.largeSpacing * 2
0290                 anchors.bottomMargin: Kirigami.Units.largeSpacing
0291                 color: Kirigami.Theme.textColor
0292                 text: "Networks"
0293             }
0294         }
0295
0296         Item {
0297             id: footerMain
0298             anchors.left: parent.left
0299             anchors.right: deviceConnectionView.left
0300             anchors.leftMargin: -Kirigami.Units.largeSpacing
0301             anchors.bottom: parent.bottom
0302             implicitHeight: Kirigami.Units.gridUnit * 2
0303
0304         RowLayout {
0305             id: footerArea
0306             anchors.fill: parent
0307
0308             Button {
0309                 id: reloadButton
0310                 Layout.fillWidth: true
0311                 Layout.fillHeight: true
0312                 KeyNavigation.up: connectionView
0313                 KeyNavigation.right: kcmcloseButton
0314
0315                 background: Rectangle {
0316                     color: reloadButton.activeFocus ? Kirigami.Theme.highlightColor : Kirigami.Theme.backgroundColor
0317                 }
0318
0319                 contentItem: Item {
0320                     RowLayout {
0321                         anchors.centerIn: parent
0322                         Kirigami.Icon {
0323                             Layout.preferredWidth: Kirigami.Units.iconSizes.small
0324                             Layout.preferredHeight: Kirigami.Units.iconSizes.small
0325                             source: "view-refresh"
0326                         }
0327                         Label {
0328                             text: i18n("Refresh")
0329                         }
0330                     }
0331                 }
0332
0333                 onClicked: {
0334                     networkSelectionView.refreshing = true;
0335                     connectionView.contentY = -Kirigami.Units.gridUnit * 4;
0336                 }
0337                 Keys.onReturnPressed: {
0338                     networkSelectionView.refreshing = true;
0339                     connectionView.contentY = -Kirigami.Units.gridUnit * 4;
0340                 }
0341             }
0342
0343             Button {
0344                 id: kcmcloseButton
0345                 KeyNavigation.up: connectionView
0346                 KeyNavigation.left: reloadButton
0347                 Layout.fillWidth: true
0348                 Layout.fillHeight: true
0349
0350                 background: Rectangle {
0351                     color: kcmcloseButton.activeFocus ? Kirigami.Theme.highlightColor : Kirigami.Theme.backgroundColor
0352                 }
0353
0354                 contentItem: Item {
0355                     RowLayout {
0356                         anchors.centerIn: parent
0357                         Kirigami.Icon {
0358                             Layout.preferredWidth: Kirigami.Units.iconSizes.small
0359                             Layout.preferredHeight: Kirigami.Units.iconSizes.small
0360                             source: "window-close"
0361                         }
0362                         Label {
0363                             text: i18n("Exit")
0364                         }
0365                     }
0366                 }
0367
0368                 onClicked: {
0369                     Window.window.close()
0370                 }
0371                 Keys.onReturnPressed: {
0372                     Window.window.close()
0373                 }
0374             }
0375         }
0376     }
0377
0378         ColumnLayout {
0379             anchors.left: parent.left
0380             anchors.leftMargin: Kirigami.Units.largeSpacing
0381             anchors.top: headerAreaTop.bottom
0382             anchors.topMargin: Kirigami.Units.largeSpacing * 2
0383             anchors.bottom: footerMain.top
0384             width: parent.width - deviceConnectionView.width
0385
0386             BigScreen.TileView {
0387                 id: connectionView
0388                 focus: true
0389                 model: appletProxyModel
0390                 Layout.alignment: Qt.AlignTop
0391                 title: i18n("Manage Connections")
0392                 currentIndex: 0
0393                 delegate: Delegates.NetworkDelegate{}
0394                 navigationDown: reloadButton
0395                 Behavior on x {
0396                     NumberAnimation {
0397                         duration: Kirigami.Units.longDuration * 2
0398                         easing.type: Easing.InOutQuad
0399                     }
0400                 }
0401
0402                 onCurrentItemChanged: {
0403                     deviceConnectionViewDetails.currentIndex = connectionView.currentIndex
0404                     deviceConnectionViewDetails.positionViewAtIndex(currentIndex, ListView.Center);
0405                 }
0406             }
0407         }
0408
0409         Kirigami.Separator {
0410             id: viewSept
0411             anchors.right: deviceConnectionView.left
0412             anchors.top: deviceConnectionView.top
0413             anchors.bottom: deviceConnectionView.bottom
0414             width: 1
0415         }
0416
0417         Rectangle {
0418             id: deviceConnectionView
0419             anchors.top: parent.top
0420             anchors.right: parent.right
0421             anchors.rightMargin: -Kirigami.Units.smallSpacing
0422             height: parent.height
0423             width: Kirigami.Units.gridUnit * 15
0424             color: Kirigami.Theme.backgroundColor
0425
0426             ListView {
0427                 id: deviceConnectionViewDetails
0428                 model: connectionView.model
0429                 anchors.fill: parent
0430                 anchors.topMargin: parent.height * 0.075
0431                 layoutDirection: Qt.LeftToRight
0432                 orientation: ListView.Horizontal
0433                 snapMode: ListView.SnapOneItem;
0434                 highlightRangeMode: ListView.StrictlyEnforceRange
0435                 highlightFollowsCurrentItem: true
0436                 spacing: Kirigami.Units.largeSpacing
0437                 clip: true
0438                 interactive: false
0439                 implicitHeight: deviceConnectionView.implicitHeight
0440                 currentIndex: 0
0441                 delegate: DeviceConnectionItem{}
0442             }
0443         }
0444     }
0445 }