From eb821dc64184f7593ce32109c4bfa92bcac097cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonah=20Br=C3=BCchert?= Date: Thu, 20 Jun 2019 18:34:11 +0200 Subject: [PATCH] Port ContactList to Kirigami where visible --- .../contents/ui/Dialer/ContactsList.qml | 173 +++++------------- .../package/contents/ui/Dialer/RoundImage.qml | 44 +++++ 2 files changed, 92 insertions(+), 125 deletions(-) create mode 100644 dialer/package/contents/ui/Dialer/RoundImage.qml diff --git a/dialer/package/contents/ui/Dialer/ContactsList.qml b/dialer/package/contents/ui/Dialer/ContactsList.qml index c01e59f3..cf75fa13 100644 --- a/dialer/package/contents/ui/Dialer/ContactsList.qml +++ b/dialer/package/contents/ui/Dialer/ContactsList.qml @@ -18,17 +18,16 @@ */ import QtQuick 2.0 -import QtQuick.Controls 1.3 +import QtQuick.Controls 2.2 as Controls import QtQuick.Layouts 1.1 +import org.kde.kirigami 2.7 as Kirigami import org.kde.people 1.0 as KPeople -import org.kde.kquickcontrolsaddons 2.0 as ExtraComponents import org.kde.plasma.core 2.0 as PlasmaCore -import org.kde.plasma.components 2.0 as PlasmaComponents -import org.kde.plasma.extras 2.0 as PlasmaExtras import org.kde.plasma.private.kpeoplehelper 1.0 + Item { - PlasmaComponents.Label { + Controls.Label { anchors.centerIn: parent text: i18n("No contacts") visible: contactsModel.count == 0 @@ -38,37 +37,36 @@ Item { anchors.fill: parent //visible: contactsModel.count > 0 - PlasmaComponents.ToolBar { + + Kirigami.ActionTextField { + id: searchField Layout.fillWidth: true - tools: RowLayout { - id: toolBarLayout - PlasmaComponents.TextField { - id: searchField - clearButtonShown: true - Layout.fillWidth: true - Layout.fillHeight: true - placeholderText: i18n("Search...") + placeholderText: i18n("Search...") + rightActions: [ + Kirigami.Action { + icon.name: "edit-clear" + onTriggered: searchField.text = "" + visible: searchField.text != "" } - } + ] } - PlasmaExtras.ScrollArea { + Controls.ScrollView { + id: contactScrollView Layout.fillWidth: true Layout.fillHeight: true - verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff + Controls.ScrollBar.vertical.policy: Controls.ScrollBar.AlwaysOn contentItem: ListView { id: contactsList - property bool delegateSelected: false property string numberToCall - section.property: "display" section.criteria: ViewSection.FirstCharacter clip: true - model:PlasmaCore.SortFilterModel { + model: PlasmaCore.SortFilterModel { sourceModel: KPeople.PersonsSortFilterProxyModel { sourceModel: KPeopleHelper { id: contactsModel @@ -77,7 +75,7 @@ Item { } sortRole: "display" filterRole: "display" - filterRegExp: ".*"+searchField.text+".*" + filterRegExp: ".*" + searchField.text + ".*" sortOrder: Qt.AscendingOrder } @@ -87,144 +85,69 @@ Item { // } boundsBehavior: Flickable.StopAtBounds - highlight: PlasmaComponents.Highlight { - hover: contactsList.focus - } - highlightMoveDuration: 0 - delegate: PlasmaComponents.ListItem { - height: units.gridUnit * 6 + delegate: Kirigami.SwipeListItem { + height: Kirigami.Units.gridUnit * 6 enabled: true clip: true - opacity: contactsList.delegateSelected && contactsList.currentIndex != index ? 0.4 : 1 onClicked: { - if (contactsList.delegateSelected) { - contactsList.currentIndex = -1; - contactsList.delegateSelected = false; - contactsList.numberToCall = ""; - } else { - contactsList.currentIndex = index; - contactsList.delegateSelected = true; contactsList.numberToCall = model.phoneNumber; - } - - contactsList.toggleOverlayButtons(contactsList.delegateSelected); } + actions: [ + Kirigami.Action { + icon.name: "call-start" + text: i18n("Call") + onTriggered: call(contactsList.numberToCall) + }, + Kirigami.Action { + icon.name: "configure-shortcuts" + text: i18n("Send message") + } + ] + RowLayout { id: mainLayout anchors.fill: parent + spacing: 10 - ExtraComponents.QPixmapItem { - id: avatarLabel + RoundImage { + id: avatar + source: model.decoration + isRound: true - Layout.maximumWidth: parent.height - Layout.minimumWidth: parent.height - Layout.fillHeight: true - - pixmap: model.decoration - fillMode: ExtraComponents.QPixmapItem.PreserveAspectFit - smooth: true + Layout.preferredHeight: parent.height - Kirigami.Units.gridUnit + Layout.preferredWidth: parent.height - Kirigami.Units.gridUnit } ColumnLayout { - Layout.fillHeight: true - Layout.fillWidth: true - - Label { + // contact name + Kirigami.Heading { id: nickLabel - - Layout.fillWidth: true - text: model.display + textFormat: Text.PlainText elide: Text.ElideRight + maximumLineCount: 1 + level: 3 + Layout.fillWidth: true } - Label { + Controls.Label { id: dataLabel - - Layout.fillWidth: true - text: model.phoneNumber + elide: Text.ElideRight visible: dataLabel.text != nickLabel.text } - } } } - function toggleOverlayButtons(show) { - if (show) { - settingsRect.parent = contactsList.currentItem - settingsRect.visible = true; - - callRect.parent = contactsList.currentItem - callRect.visible = true; - } else { - settingsRect.visible = false; - callRect.visible = false; - } - } - - Rectangle { - id: settingsRect - height: units.gridUnit * 6 - width: height + units.gridUnit * 2 - radius: height - z: 100 - visible: false - color: "lightblue" - - anchors { - left: parent.left - leftMargin: -width/2 - verticalCenter: parent.verticalCenter - } - - - PlasmaCore.IconItem { - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - anchors.rightMargin: parent.height / 4 - source: "configure-shortcuts" - } - } - - Rectangle { - id: callRect - height: settingsRect.height - width: settingsRect.width - radius: height - z: 100 - visible: false - color: "lightgreen" - - anchors { - right: parent.right - rightMargin: -width/2 - verticalCenter: parent.verticalCenter - } - - PlasmaCore.IconItem { - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: parent.height / 4 - source: "call-start" - } - MouseArea { - anchors.fill: parent - //TODO: needs the proper number - onClicked: call(contactsList.numberToCall) - } - } - CustomSectionScroller { listView: contactsList } - } } } diff --git a/dialer/package/contents/ui/Dialer/RoundImage.qml b/dialer/package/contents/ui/Dialer/RoundImage.qml new file mode 100644 index 00000000..99119a42 --- /dev/null +++ b/dialer/package/contents/ui/Dialer/RoundImage.qml @@ -0,0 +1,44 @@ +/* + * Copyright 2017-2019 Kaidan Developers and Contributors + * Copyright 2019 Jonah Brüchert + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU General Public License as + * published by the Free Software Foundation; either version 2 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 14 of version 3 of the license. + * + * This program 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 General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import QtQuick 2.6 +import QtGraphicalEffects 1.0 +import org.kde.kirigami 2.6 as Kirigami + +Kirigami.Icon { + id: img + property bool isRound: true + + layer.enabled: isRound + layer.effect: OpacityMask { + maskSource: Item { + width: img.width + height: img.height + + Rectangle { + anchors.centerIn: parent + width: Math.min(img.width, img.height) + height: width + radius: Math.min(width, height) + } + } + } +}