Commit 24b737bc authored by George Vogiatzis's avatar George Vogiatzis Committed by George Vogiatzis

[Applet]Update layout based on T10470

Summary:
Decrease the Height of unknown connections.
Remove sections as headings, but keep available connections section as
a separator. Now positioned below active/deactivating (instead of only
connected) connections from the rest.
Readjust details expand/minimize area and highlight to the main row.
Set custom margins for ListItem's background.

Remove info row for unknown connections.
Move security type in details.
Add line between buttons and search field.
Change toolbar from GridLayout to ColumnLayout.
Add spacing between toolbuttons in toolbar.
Add opacity in details.

Test Plan:
Toolbar view with up-to-date build
{F8110453, size=full, layout=inline}
Breeze Dark
{F8098508, layout=inline} {F8098507, layout=inline}
Breeze Light
{F8108683, layout=inline} {F8108679, layout=inline} {F8108680, layout=inline}
Air
{F8108682, layout=inline} {F8108681, layout=inline}

Reviewers: #plasma, #vdg, jgrulich, manueljlin, ngraham

Reviewed By: #vdg, jgrulich, manueljlin, ngraham

Subscribers: ngraham, plasma-devel

Tags: #plasma

Maniphest Tasks: T10470

Differential Revision: https://phabricator.kde.org/D27199
parent b7daee75
This diff is collapsed.
......@@ -73,6 +73,7 @@ Column {
font.pointSize: theme.smallestFont.pointSize
horizontalAlignment: Text.AlignRight
text: details[index*2] + ": "
opacity: 0.6
Component.onCompleted: {
if (paintedWidth > repeater.longestString) {
......
/*
Copyright 2013-2017 Jan Grulich <jgrulich@redhat.com>
Copyright 2010 Marco Martin <notmart@gmail.com>
Copyright 2016 Jan Grulich <jgrulich@redhat.com>
Copyright 2020 George Vogiatzis <gvgeo@protonmail.com>
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
......@@ -18,42 +20,71 @@
License along with this library. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.2
import org.kde.plasma.components 2.0 as PlasmaComponents
import QtQuick 2.1
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.networkmanagement 0.2 as PlasmaNM
PlasmaComponents.ListItem {
id: header
/**
* Ignores the theme's listItem margins, and uses custom highlight(pressed) area.
* Could break some themes but the majority look fine.
* Also includes a separator to be used in sections.
*/
Item {
id: listItem
property alias text: headerLabel.text
signal clicked
height: headerLabel.height + units.gridUnit; width: parent.width
sectionDelegate: true
property alias containsMouse: itemMouse.containsMouse
property bool checked: false
property bool separator: false
property rect highlightRect: Qt.rect(0, 0, width, height)
PlasmaNM.EnabledConnections {
id: enabledConnections
}
width: parent.width
PlasmaComponents.Label {
id: headerLabel
// Sections have spacing above but not below. Will use 2 of them below.
height: separator ? separatorLine.height + units.smallSpacing * 3 : parent.height
anchors.centerIn: parent
height: paintedHeight
font.weight: Font.DemiBold
PlasmaCore.Svg {
id: lineSvg
imagePath: "widgets/line"
}
Component.onCompleted: {
if (header.text === i18n("Available connections")) {
connectionView.availableConnectionsVisible = true
PlasmaCore.SvgItem {
id: separatorLine
anchors {
horizontalCenter: parent.horizontalCenter
top: parent.top
topMargin: units.smallSpacing
}
elementId: "horizontal-line"
width: parent.width - units.gridUnit * 2
svg: lineSvg
visible: separator
}
Component.onDestruction: {
connectionView.availableConnectionsVisible = false
PlasmaCore.FrameSvgItem {
id : background
imagePath: "widgets/listitem"
prefix: "normal"
anchors.fill: parent
visible: separator ? false : true
}
PlasmaCore.FrameSvgItem {
id : pressed
imagePath: "widgets/listitem"
prefix: "pressed"
opacity: checked ? 1 : 0
Behavior on opacity { NumberAnimation { duration: units.shortDuration } }
x: highlightRect.x
y: highlightRect.y
height: highlightRect.height
width: highlightRect.width
}
onVisibleChanged: {
connectionView.availableConnectionsVisible = visible
MouseArea {
id: itemMouse
anchors.fill: parent
hoverEnabled: true
onClicked: listItem.clicked()
}
}
......@@ -25,7 +25,6 @@ import org.kde.plasma.networkmanagement 0.2 as PlasmaNM
PlasmaComponents.TextField {
property int securityType
width: units.gridUnit * 15
echoMode: TextInput.Password
revealPasswordButtonShown: true
placeholderText: i18n("Password...")
......
......@@ -102,16 +102,16 @@ FocusScope {
ListView {
id: connectionView
property bool availableConnectionsVisible: false
property int currentVisibleButtonIndex: -1
property bool showSeparator: false
anchors.fill: parent
spacing: units.smallSpacing
clip: true
model: appletProxyModel
currentIndex: -1
boundsBehavior: Flickable.StopAtBounds
section.property: showSections ? "Section" : ""
section.delegate: Header { text: section }
section.property: showSeparator ? "Section" : ""
section.delegate: ListItem { separator: true }
delegate: ConnectionItem { }
}
}
......
......@@ -33,7 +33,7 @@ Item {
signal clicked
height: Math.max(switchButtonCheckbox.height, switchButtonIcon.height)
width: switchButtonCheckbox.width + switchButtonIcon.width + units.gridUnit
width: switchButtonCheckbox.width + switchButtonIcon.width + units.smallSpacing * 3
PlasmaComponents.CheckBox {
id: switchButtonCheckbox
......
......@@ -26,8 +26,9 @@ 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 {
ColumnLayout {
id: toolbar
spacing: units.smallSpacing
readonly property var displayWifiMessage: !wifiSwitchButton.checked && wifiSwitchButton.visible
readonly property var displayWwanMessage: !wwanSwitchButton.checked && wwanSwitchButton.visible
......@@ -37,9 +38,6 @@ GridLayout {
searchToggleButton.checked = false
}
rows: 2
columns: 2
PlasmaCore.Svg {
id: lineSvg
imagePath: "widgets/line"
......@@ -69,8 +67,8 @@ GridLayout {
id: configuration
}
Row {
Layout.fillWidth: true
RowLayout {
spacing: units.smallSpacing
SwitchButton {
id: wifiSwitchButton
......@@ -128,11 +126,10 @@ GridLayout {
initialized = true
}
}
}
Row {
Layout.column: 1
Item {
Layout.fillWidth: true
}
PlasmaComponents3.ToolButton {
id: hotspotButton
......@@ -212,14 +209,21 @@ GridLayout {
}
}
PlasmaComponents.TextField {
PlasmaCore.SvgItem {
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.topMargin: units.smallSpacing
Layout.bottomMargin: units.smallSpacing
focus: true
......
......@@ -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
......
......@@ -71,6 +71,7 @@ public:
RxBytesRole,
TxBytesRole
};
Q_ENUMS(ItemRole)
int rowCount(const QModelIndex &parent) const override;
QVariant data(const QModelIndex &index, int role) const override;
......
......@@ -327,10 +327,10 @@ QString NetworkModelItem::originalName() const
QString NetworkModelItem::sectionType() const
{
if (m_connectionState == NetworkManager::ActiveConnection::Activated) {
return i18n("Active connections");
if (m_connectionState == NetworkManager::ActiveConnection::Deactivated) {
return "Available connections";
} else {
return i18n("Available connections");
return QString();
}
}
......@@ -585,9 +585,7 @@ void NetworkModelItem::updateDetails() const
if (m_mode == NetworkManager::WirelessSetting::Infrastructure) {
m_details << i18n("Signal strength") << QStringLiteral("%1%").arg(m_signal);
}
if (m_connectionState == NetworkManager::ActiveConnection::Activated) {
m_details << i18n("Security type") << UiUtils::labelFromWirelessSecurity(m_securityType);
}
m_details << i18n("Security type") << UiUtils::labelFromWirelessSecurity(m_securityType);
if (wirelessDevice) {
if (m_connectionState == NetworkManager::ActiveConnection::Activated) {
m_details << i18n("Connection speed") << UiUtils::connectionSpeed(wirelessDevice->bitRate());
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment