diff --git a/applet/contents/ui/ConnectionItem.qml b/applet/contents/ui/ConnectionItem.qml index 8d370dfe..77e55e9a 100644 --- a/applet/contents/ui/ConnectionItem.qml +++ b/applet/contents/ui/ConnectionItem.qml @@ -27,11 +27,13 @@ import org.kde.plasma.components 2.0 as PlasmaComponents import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.networkmanagement 0.2 as PlasmaNM -PlasmaComponents.ListItem { +ListItem { id: connectionItem property bool activating: ConnectionState == PlasmaNM.Enums.Activating - property int baseHeight: Math.max(units.iconSizes.medium, connectionNameLabel.height + connectionStatusLabel.height) + Math.round(units.gridUnit / 2) + property bool deactivated: ConnectionState === PlasmaNM.Enums.Deactivated + property int baseHeight: Uuid ? connectionNameLabel.implicitHeight + connectionStatusLabel.implicitHeight + units.smallSpacing + : stateChangeButton.implicitHeight property bool expanded: visibleDetails || visiblePasswordDialog property bool predictableWirelessPassword: !Uuid && Type == PlasmaNM.Enums.Wireless && (SecurityType == PlasmaNM.Enums.StaticWep || SecurityType == PlasmaNM.Enums.WpaPsk || @@ -48,22 +50,23 @@ PlasmaComponents.ListItem { property real rxBytes: 0 property real txBytes: 0 - checked: connectionItem.containsMouse - enabled: true - height: expanded ? baseHeight + separator.height + expandableComponentLoader.height + (2 * Math.round(units.gridUnit / 3)) : baseHeight + height: expanded ? baseHeight + expandableComponentLoader.height + (Uuid ? units.smallSpacing : 0) : baseHeight ColumnLayout { anchors.fill: parent + spacing: Uuid ? units.smallSpacing * 2 : units.smallSpacing RowLayout { - Layout.fillWidth: true - spacing: Math.round(units.gridUnit / 2) + spacing: units.smallSpacing * 2 + Layout.alignment: Qt.AlignCenter + Layout.minimumHeight: stateChangeButton.implicitHeight + Layout.topMargin: Uuid ? units.smallSpacing : 0 PlasmaCore.SvgItem { id: connectionSvgIcon - Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft - Layout.preferredHeight: units.iconSizes.medium - Layout.preferredWidth: units.iconSizes.medium + Layout.alignment: Qt.AlignLeft + Layout.preferredHeight: Uuid ? units.iconSizes.medium : units.iconSizes.smallMedium + Layout.preferredWidth: Layout.preferredHeight elementId: ConnectionIcon svg: PlasmaCore.Svg { multipleImages: true @@ -73,13 +76,13 @@ PlasmaComponents.ListItem { } ColumnLayout { - Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft + Layout.alignment: Qt.AlignLeft spacing: 0 PlasmaComponents.Label { + // TODO Fix bind loop messages for width. id: connectionNameLabel Layout.fillWidth: true - height: paintedHeight elide: Text.ElideRight font.weight: ConnectionState == PlasmaNM.Enums.Activated ? Font.DemiBold : Font.Normal font.italic: ConnectionState == PlasmaNM.Enums.Activating ? true : false @@ -88,21 +91,21 @@ PlasmaComponents.ListItem { } PlasmaComponents.Label { + // TODO Fix bind loop messages for width. id: connectionStatusLabel Layout.fillWidth: true - height: paintedHeight elide: Text.ElideRight font.pointSize: theme.smallestFont.pointSize opacity: 0.6 text: itemText() + visible: !!Uuid } } PlasmaComponents.BusyIndicator { id: connectingIndicator - Layout.alignment: Qt.AlignVCenter | Qt.AlignRight Layout.preferredHeight: units.iconSizes.medium - Layout.preferredWidth: units.iconSizes.medium + Layout.preferredWidth: Layout.preferredHeight running: plasmoid.expanded && !stateChangeButton.visible && ConnectionState == PlasmaNM.Enums.Activating visible: running opacity: visible @@ -110,7 +113,6 @@ PlasmaComponents.ListItem { PlasmaComponents.Button { id: stateChangeButton - Layout.alignment: Qt.AlignVCenter | Qt.AlignRight opacity: connectionView.currentVisibleButtonIndex == index ? 1 : 0 visible: opacity != 0 text: (ConnectionState == PlasmaNM.Enums.Deactivated) ? i18n("Connect") : i18n("Disconnect") @@ -122,7 +124,6 @@ PlasmaComponents.ListItem { MouseArea { acceptedButtons: Qt.RightButton - Layout.alignment: Qt.AlignTop | Qt.AlignLeft width: parent.width height: parent.height onPressed: { @@ -133,25 +134,9 @@ PlasmaComponents.ListItem { } } - ColumnLayout { - Layout.fillHeight: true - PlasmaCore.SvgItem { - id: separator - height: lineSvg.elementSize("horizontal-line").height - Layout.fillWidth: true - Layout.maximumHeight: height - elementId: "horizontal-line" - svg: PlasmaCore.Svg { id: lineSvg; imagePath: "widgets/line" } - visible: connectionItem.expanded - opacity: visible - } - - Loader { - id: expandableComponentLoader - Layout.fillHeight: true - Layout.fillWidth: true - height: childrenRect.height - } + Loader { + id: expandableComponentLoader + Layout.fillWidth: true } } @@ -208,8 +193,8 @@ PlasmaComponents.ListItem { Component { id: detailsComponent - Item { - height: childrenRect.height + Column { + spacing: units.smallSpacing PlasmaComponents.TabBar { id: detailsTabBar @@ -217,7 +202,6 @@ PlasmaComponents.ListItem { anchors { left: parent.left right: parent.right - top: parent.top } height: visible ? implicitHeight : 0 visible: showSpeed @@ -242,10 +226,8 @@ PlasmaComponents.ListItem { DetailsText { anchors { left: parent.left - leftMargin: units.iconSizes.medium + leftMargin: units.iconSizes.smallMedium right: parent.right - top: detailsTabBar.visible ? detailsTabBar.bottom : parent.top - topMargin: Math.round(units.gridUnit / 3) } details: ConnectionDetails visible: detailsTabBar.currentTab == detailsTabButton @@ -255,8 +237,6 @@ PlasmaComponents.ListItem { anchors { left: parent.left right: parent.right - top: detailsTabBar.visible ? detailsTabBar.bottom : parent.top - topMargin: Math.round(units.gridUnit / 3) } rxBytes: RxBytes txBytes: TxBytes @@ -269,19 +249,14 @@ PlasmaComponents.ListItem { Component { id: passwordDialogComponent - Item { + Column { property alias password: passwordField.text property alias passwordInput: passwordField - height: childrenRect.height - PasswordField { id: passwordField - anchors { - left: parent.left - right: parent.right - top: parent.top - } + + height: implicitHeight - units.smallSpacing securityType: SecurityType onAccepted: { @@ -391,11 +366,8 @@ PlasmaComponents.ListItem { return VpnState else return DeviceState - } else if (ConnectionState == PlasmaNM.Enums.Deactivated) { - var result = LastUsed - if (SecurityType > PlasmaNM.Enums.NoneSecurity) - result += ", " + SecurityTypeString - return result + } else if (Uuid && ConnectionState == PlasmaNM.Enums.Deactivated) { + return LastUsed } else if (ConnectionState == PlasmaNM.Enums.Activated) { if (showSpeed) { var downloadColor = theme.highlightColor @@ -411,6 +383,7 @@ PlasmaComponents.ListItem { return i18n("Connected") } } + return "" } onShowSpeedChanged: { @@ -443,4 +416,17 @@ PlasmaComponents.ListItem { connectionView.currentVisibleButtonIndex = index } } + + onDeactivatedChanged: { + // Separator is part of section. Which only shows when available connections exist. + // Only need to determine if there is a connection in use, there are always on top, checking first one is enough. + if (appletProxyModel.data(appletProxyModel.index(0, 0), 272) !== "Available connections") { + if (connectionView.showSeparator != true) { + connectionView.showSeparator = true + } + return + } + connectionView.showSeparator = false + return + } } diff --git a/applet/contents/ui/DetailsText.qml b/applet/contents/ui/DetailsText.qml index be89baa8..d24eec13 100644 --- a/applet/contents/ui/DetailsText.qml +++ b/applet/contents/ui/DetailsText.qml @@ -25,7 +25,7 @@ import org.kde.plasma.components 2.0 as PlasmaComponents Item { property var details: [] - height: repeater.contentHeight + height: childrenRect.height + units.smallSpacing KQuickControlsAddons.Clipboard { id: clipboard @@ -50,7 +50,11 @@ Item { } Column { - anchors.fill: parent + anchors { + left: parent.left + right: parent.right + } + height: childrenRect.height Repeater { id: repeater @@ -64,7 +68,6 @@ Item { anchors { left: parent.left right: parent.right - topMargin: Math.round(units.gridUnit / 3) } height: Math.max(detailNameLabel.height, detailValueLabel.height) @@ -73,13 +76,13 @@ Item { anchors { left: parent.left - leftMargin: repeater.longestString - paintedWidth + Math.round(units.gridUnit / 2) - verticalCenter: parent.verticalCenter + leftMargin: repeater.longestString - paintedWidth + units.smallSpacing * 2 } height: paintedHeight font.pointSize: theme.smallestFont.pointSize horizontalAlignment: Text.AlignRight text: details[index*2] + ": " + opacity: 0.6 Component.onCompleted: { if (paintedWidth > repeater.longestString) { @@ -92,9 +95,9 @@ Item { id: detailValueLabel anchors { + // TODO Fix bind loop messages for width. left: detailNameLabel.right right: parent.right - verticalCenter: parent.verticalCenter } height: paintedHeight elide: Text.ElideRight @@ -109,11 +112,6 @@ Item { } } } - - // Count total height from added items, somehow contentRect.height doesn't work - onItemAdded: { - contentHeight = contentHeight + item.height - } } } } diff --git a/applet/contents/ui/Header.qml b/applet/contents/ui/Header.qml index 63c12f7d..aba576b2 100644 --- a/applet/contents/ui/Header.qml +++ b/applet/contents/ui/Header.qml @@ -23,37 +23,26 @@ import org.kde.plasma.components 2.0 as PlasmaComponents import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.networkmanagement 0.2 as PlasmaNM -PlasmaComponents.ListItem { +ListItem { id: header - property alias text: headerLabel.text + height: devicesLine.height + units.smallSpacing * 2 - height: headerLabel.height + units.gridUnit; width: parent.width - sectionDelegate: true - - PlasmaNM.EnabledConnections { - id: enabledConnections + PlasmaCore.Svg { + id: lineSvg + imagePath: "widgets/line" } - PlasmaComponents.Label { - id: headerLabel - - anchors.centerIn: parent - height: paintedHeight - font.weight: Font.DemiBold - } + PlasmaCore.SvgItem { + id: devicesLine - Component.onCompleted: { - if (header.text === i18n("Available connections")) { - connectionView.availableConnectionsVisible = true + anchors { + horizontalCenter: parent.horizontalCenter + top: parent.top + topMargin: units.smallSpacing } - } - - Component.onDestruction: { - connectionView.availableConnectionsVisible = false - } - - onVisibleChanged: { - connectionView.availableConnectionsVisible = visible + elementId: "horizontal-line" + width: parent.width - units.gridUnit + svg: lineSvg } } diff --git a/applet/contents/ui/ListItem.qml b/applet/contents/ui/ListItem.qml new file mode 100644 index 00000000..e174fc00 --- /dev/null +++ b/applet/contents/ui/ListItem.qml @@ -0,0 +1,47 @@ +/* + Copyright 2010 Marco Martin + Copyright 2020 George Vogiatzis + + This library is free software; you can redistribute it and/or + modify it under the terms of the GNU Lesser General Public + License as published by the Free Software Foundation; either + version 2.1 of the License, or (at your option) version 3, or any + later version accepted by the membership of KDE e.V. (or its + successor approved by the membership of KDE e.V.), which shall + act as a proxy defined in Section 6 of version 3 of the license. + + This library is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + Lesser General Public License for more details. + + You should have received a copy of the GNU Lesser General Public + License along with this library. If not, see . +*/ + +import QtQuick 2.1 + +Item { + id: listItem + + /** + * This signal is emitted when there is a click. + */ + signal clicked + + /** + * True if the list item contains mouse + */ + property alias containsMouse: itemMouse.containsMouse + + width: parent.width + height: parent.height + + MouseArea { + id: itemMouse + anchors.fill: parent + hoverEnabled: true + + onClicked: listItem.clicked() + } +} diff --git a/applet/contents/ui/PopupDialog.qml b/applet/contents/ui/PopupDialog.qml index b626e826..20f6c8b2 100644 --- a/applet/contents/ui/PopupDialog.qml +++ b/applet/contents/ui/PopupDialog.qml @@ -28,6 +28,8 @@ import org.kde.plasma.networkmanagement 0.2 as PlasmaNM FocusScope { id: full + property alias toolbarValues: toolbar + PlasmaNM.AvailableDevices { id: availableDevices } @@ -57,20 +59,59 @@ FocusScope { id: scrollView Layout.fillWidth: true Layout.fillHeight: true + frameVisible: false + + PlasmaExtras.Heading { + id: disabledMessage + anchors.fill: parent + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + level: 3 + visible: connectionView.count === 0 && text != "" + text: { + if (toolbarValues.displayplaneModeMessage) { + return i18n("Airplane mode is enabled") + } + if (toolbarValues.displayWifiMessage) { + if (toolbarValues.displayWwanMessage) { + return i18n("Wireless and mobile networks are deactivated") + } + return i18n("Wireless is deactivated") + } + if (toolbarValues.displayWwanMessage) { + return i18n("Mobile network is deactivated") + } + return "" + } + } + + PlasmaExtras.Heading { + id: message + anchors.fill: parent + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + level: 3 + opacity: connectionView.count === 0 && !disabledMessage.visible + // Check connectionView.count again, to avoid a small delay. + visible: opacity === 1 && connectionView.count === 0 + Behavior on opacity { NumberAnimation { duration: 5000 } } + text: i18n("No available connections") + } ListView { id: connectionView - property bool availableConnectionsVisible: false property int currentVisibleButtonIndex: -1 + property bool showSeparator: false + spacing: units.smallSpacing anchors.fill: parent clip: true model: appletProxyModel currentIndex: -1 boundsBehavior: Flickable.StopAtBounds - section.property: showSections ? "Section" : "" - section.delegate: Header { text: section } + section.property: showSeparator ? "Section" : "" + section.delegate: Header { } delegate: ConnectionItem { } } } diff --git a/applet/contents/ui/Toolbar.qml b/applet/contents/ui/Toolbar.qml index a57fe0d3..4dd18459 100644 --- a/applet/contents/ui/Toolbar.qml +++ b/applet/contents/ui/Toolbar.qml @@ -26,16 +26,18 @@ import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.networkmanagement 0.2 as PlasmaNM import org.kde.kquickcontrolsaddons 2.0 -GridLayout { - id: toolbar +ColumnLayout { + + property var displayWifiMessage: !wifiSwitchButton.checked && wifiSwitchButton.visible + property var displayWwanMessage: !wwanSwitchButton.checked && wwanSwitchButton.visible + property var displayplaneModeMessage: planeModeSwitchButton.checked && planeModeSwitchButton.visible + + spacing: units.smallSpacing function closeSearch() { searchToggleButton.checked = false } - rows: 2 - columns: 2 - PlasmaCore.Svg { id: lineSvg imagePath: "widgets/line" @@ -65,8 +67,7 @@ GridLayout { id: configuration } - Row { - Layout.fillWidth: true + RowLayout { SwitchButton { id: wifiSwitchButton @@ -124,11 +125,10 @@ GridLayout { initialized = true } } - } - - Row { - Layout.column: 1 + Item { + Layout.fillWidth: true + } PlasmaComponents3.ToolButton { id: hotspotButton @@ -208,15 +208,24 @@ GridLayout { } } - PlasmaComponents.TextField { + PlasmaCore.SvgItem { + id: devicesLine + + Layout.fillWidth: true + elementId: "horizontal-line" + Layout.leftMargin: - units.smallSpacing * 1.5 + Layout.rightMargin: - units.smallSpacing * 1.5 + svg: lineSvg + } + + PlasmaComponents.TextField { id: searchTextField - Layout.row: 1 - Layout.columnSpan: 2 Layout.fillWidth: true Layout.leftMargin: units.smallSpacing Layout.rightMargin: units.smallSpacing Layout.bottomMargin: units.smallSpacing + Layout.topMargin: units.smallSpacing focus: true clearButtonShown: true diff --git a/applet/contents/ui/TrafficMonitor.qml b/applet/contents/ui/TrafficMonitor.qml index 636b9bce..7651f912 100644 --- a/applet/contents/ui/TrafficMonitor.qml +++ b/applet/contents/ui/TrafficMonitor.qml @@ -28,7 +28,7 @@ Item { property real txBytes: 0 property alias interval: timer.interval - height: visible ? plotter.height + units.gridUnit : 0 + height: visible ? plotter.height + plotter.anchors.topMargin + units.smallSpacing : 0 Repeater { model: 5 @@ -37,9 +37,10 @@ Item { anchors { left: parent.left top: parent.top - topMargin: Math.round(units.gridUnit / 3) + (index * plotter.height / 5) + topMargin: index * plotter.height / 5 } - height: paintedHeight + // Workaround to get paintedHeight. + height: theme.mSize(theme.smallestFont).height font.pointSize: theme.smallestFont.pointSize lineHeight: 1.75 text: KCoreAddons.Format.formatByteSize(plotter.maxValue * (1 - index / 5)) + i18n("/s") @@ -57,7 +58,7 @@ Item { leftMargin: units.gridUnit * 3 right: parent.right top: parent.top - topMargin: units.gridUnit + topMargin: theme.mSize(theme.smallestFont).height / 2 } width: units.gridUnit * 20 height: units.gridUnit * 8 diff --git a/applet/contents/ui/main.qml b/applet/contents/ui/main.qml index c43b0eac..d2eafb7e 100644 --- a/applet/contents/ui/main.qml +++ b/applet/contents/ui/main.qml @@ -27,7 +27,6 @@ import QtQuick.Layouts 1.1 Item { id: mainWindow - property bool showSections: true readonly property string kcm: "kcm_networkmanagement.desktop" readonly property bool kcmAuthorized: KCMShell.authorize(kcm).length == 1