mirror of
https://invent.kde.org/marcoa/shift-shell.git
synced 2026-08-01 17:24:48 +00:00
[dialer] Revamp contacts page
This commit is contained in:
Nicolas Fella
parent
9278d99600
commit
a31c6ac6c7
4 changed files with 30 additions and 368 deletions
|
|
@ -17,13 +17,11 @@
|
||||||
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import QtQuick 2.0
|
import QtQuick 2.7
|
||||||
import QtQuick.Controls 2.2 as Controls
|
import QtQuick.Controls 2.2 as Controls
|
||||||
import QtQuick.Layouts 1.1
|
import QtQuick.Layouts 1.1
|
||||||
import org.kde.kirigami 2.8 as Kirigami
|
import org.kde.kirigami 2.10 as Kirigami
|
||||||
import org.kde.people 1.0 as KPeople
|
import org.kde.people 1.0 as KPeople
|
||||||
import org.kde.plasma.core 2.0 as PlasmaCore
|
|
||||||
|
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
Controls.Label {
|
Controls.Label {
|
||||||
|
|
@ -38,104 +36,46 @@ Item {
|
||||||
Kirigami.SearchField {
|
Kirigami.SearchField {
|
||||||
id: searchField
|
id: searchField
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
onTextChanged: contactsProxyModel.setFilterFixedString(text)
|
||||||
}
|
}
|
||||||
|
|
||||||
Controls.ScrollView {
|
ListView {
|
||||||
id: contactScrollView
|
id: contactsList
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.fillHeight: true
|
Layout.fillHeight: true
|
||||||
Controls.ScrollBar.vertical.policy: Controls.ScrollBar.AlwaysOn
|
|
||||||
|
|
||||||
contentItem: ListView {
|
|
||||||
id: contactsList
|
|
||||||
|
|
||||||
property string numberToCall
|
|
||||||
|
|
||||||
section.property: "display"
|
section.property: "display"
|
||||||
section.criteria: ViewSection.FirstCharacter
|
section.criteria: ViewSection.FirstCharacter
|
||||||
|
section.delegate: Kirigami.ListSectionHeader {text: section}
|
||||||
clip: true
|
clip: true
|
||||||
model: PlasmaCore.SortFilterModel {
|
|
||||||
sourceModel: KPeople.PersonsSortFilterProxyModel {
|
model: KPeople.PersonsSortFilterProxyModel {
|
||||||
|
id: contactsProxyModel
|
||||||
sourceModel: KPeople.PersonsModel {
|
sourceModel: KPeople.PersonsModel {
|
||||||
id: contactsModel
|
id: contactsModel
|
||||||
}
|
}
|
||||||
requiredProperties: "phoneNumber"
|
requiredProperties: "phoneNumber"
|
||||||
|
filterRole: Qt.DisplayRole
|
||||||
|
sortRole: Qt.DisplayRole
|
||||||
|
filterCaseSensitivity: Qt.CaseInsensitive
|
||||||
|
Component.onCompleted: sort(0)
|
||||||
}
|
}
|
||||||
sortRole: "display"
|
|
||||||
filterRole: "display"
|
|
||||||
filterRegExp: ".*" + searchField.text + ".*"
|
|
||||||
sortOrder: Qt.AscendingOrder
|
|
||||||
}
|
|
||||||
|
|
||||||
// PlasmaCore.SortFilterModel {
|
|
||||||
// sortRole: "display"
|
|
||||||
// sourceModel:
|
|
||||||
// }
|
|
||||||
|
|
||||||
boundsBehavior: Flickable.StopAtBounds
|
boundsBehavior: Flickable.StopAtBounds
|
||||||
|
|
||||||
delegate: Kirigami.SwipeListItem {
|
Component {
|
||||||
height: Kirigami.Units.gridUnit * 6
|
id: contactListDelegate
|
||||||
enabled: true
|
|
||||||
clip: true
|
|
||||||
|
|
||||||
onClicked: {
|
Kirigami.BasicListItem {
|
||||||
contactsList.numberToCall = model.phoneNumber;
|
icon: model.decoration
|
||||||
}
|
label: model.display
|
||||||
|
// onClicked: dialerUtils.dial(model.phoneNumber)
|
||||||
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
|
|
||||||
|
|
||||||
RoundImage {
|
|
||||||
id: avatar
|
|
||||||
source: model.decoration
|
|
||||||
isRound: true
|
|
||||||
|
|
||||||
Layout.preferredHeight: parent.height - Kirigami.Units.gridUnit
|
|
||||||
Layout.preferredWidth: parent.height - Kirigami.Units.gridUnit
|
|
||||||
}
|
|
||||||
|
|
||||||
ColumnLayout {
|
|
||||||
// contact name
|
|
||||||
Kirigami.Heading {
|
|
||||||
id: nickLabel
|
|
||||||
text: model.display
|
|
||||||
textFormat: Text.PlainText
|
|
||||||
elide: Text.ElideRight
|
|
||||||
maximumLineCount: 1
|
|
||||||
level: 3
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
|
|
||||||
Controls.Label {
|
|
||||||
id: dataLabel
|
|
||||||
text: model.phoneNumber
|
|
||||||
|
|
||||||
elide: Text.ElideRight
|
|
||||||
visible: dataLabel.text !== nickLabel.text
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
CustomSectionScroller {
|
delegate: Kirigami.DelegateRecycler {
|
||||||
listView: contactsList
|
width: parent.width
|
||||||
}
|
sourceComponent: contactListDelegate
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,205 +0,0 @@
|
||||||
/****************************************************************************
|
|
||||||
**
|
|
||||||
** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
|
|
||||||
** All rights reserved.
|
|
||||||
** Contact: Nokia Corporation (qt-info@nokia.com)
|
|
||||||
**
|
|
||||||
** This file is part of the Qt Components project.
|
|
||||||
**
|
|
||||||
** $QT_BEGIN_LICENSE:BSD$
|
|
||||||
** You may use this file under the terms of the BSD license as follows:
|
|
||||||
**
|
|
||||||
** "Redistribution and use in source and binary forms, with or without
|
|
||||||
** modification, are permitted provided that the following conditions are
|
|
||||||
** met:
|
|
||||||
** * Redistributions of source code must retain the above copyright
|
|
||||||
** notice, this list of conditions and the following disclaimer.
|
|
||||||
** * Redistributions in binary form must reproduce the above copyright
|
|
||||||
** notice, this list of conditions and the following disclaimer in
|
|
||||||
** the documentation and/or other materials provided with the
|
|
||||||
** distribution.
|
|
||||||
** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
|
|
||||||
** the names of its contributors may be used to endorse or promote
|
|
||||||
** products derived from this software without specific prior written
|
|
||||||
** permission.
|
|
||||||
**
|
|
||||||
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
|
||||||
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
|
||||||
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
|
||||||
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
|
||||||
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
|
||||||
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
|
||||||
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
|
||||||
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
|
||||||
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
|
||||||
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
||||||
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
|
|
||||||
** $QT_END_LICENSE$
|
|
||||||
**
|
|
||||||
****************************************************************************/
|
|
||||||
|
|
||||||
import QtQuick 2.1
|
|
||||||
import QtQuick.Layouts 1.1
|
|
||||||
|
|
||||||
import "private/SectionScroller.js" as Sections
|
|
||||||
import org.kde.plasma.core 2.0 as PlasmaCore
|
|
||||||
import org.kde.plasma.extras 2.0 as PlasmaExtras
|
|
||||||
import org.kde.plasma.components 2.0 as PlasmaComponents
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Similar to a ScrollBar or a ScrollDecorator.
|
|
||||||
*
|
|
||||||
* It's interactive and works on ListViews that have section.property set, so
|
|
||||||
* its contents are categorized.
|
|
||||||
*
|
|
||||||
* An indicator will say to what category the user scrolled to. Useful for
|
|
||||||
* things like address books or things sorted by date. Don't use with models
|
|
||||||
* too big (thousands of items) because it implies loading all the items to
|
|
||||||
* memory, as well loses precision.
|
|
||||||
*
|
|
||||||
* @inherit QtQuick.Item
|
|
||||||
*/
|
|
||||||
Item {
|
|
||||||
id: root
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The listview the sectionScroller will operate on. This component doesn't
|
|
||||||
* work with Flickable or GridView.
|
|
||||||
*/
|
|
||||||
property ListView listView
|
|
||||||
|
|
||||||
onListViewChanged: {
|
|
||||||
if (listView && listView.model)
|
|
||||||
internal.initDirtyObserver();
|
|
||||||
}
|
|
||||||
|
|
||||||
Connections {
|
|
||||||
target: listView
|
|
||||||
onModelChanged: {
|
|
||||||
if (listView && listView.model) {
|
|
||||||
internal.initDirtyObserver()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
implicitWidth: scrollBar.implicitWidth
|
|
||||||
Behavior on opacity {
|
|
||||||
NumberAnimation {
|
|
||||||
duration: units.longDuration
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
anchors {
|
|
||||||
right: listView.right
|
|
||||||
top: listView.top
|
|
||||||
bottom: listView.bottom
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
PlasmaComponents.RangeModel {
|
|
||||||
id: range
|
|
||||||
|
|
||||||
minimumValue: 0
|
|
||||||
maximumValue: Math.max(0, listView.contentHeight - listView.height)
|
|
||||||
stepSize: 0
|
|
||||||
//inverted: true
|
|
||||||
positionAtMinimum: root.width*2
|
|
||||||
positionAtMaximum: root.height - root.width*2
|
|
||||||
value: listView.contentY
|
|
||||||
onPositionChanged: {
|
|
||||||
var section = Sections.closestSection(position/listView.height);
|
|
||||||
if (section) {
|
|
||||||
if (listView.section.criteria == ViewSection.FirstCharacter) {
|
|
||||||
sectionLabel.text = section[0];
|
|
||||||
} else {
|
|
||||||
sectionLabel.text = section;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
PlasmaComponents.ScrollBar {
|
|
||||||
id: scrollBar
|
|
||||||
flickableItem: listView
|
|
||||||
anchors.fill: parent
|
|
||||||
interactive: true
|
|
||||||
}
|
|
||||||
PlasmaCore.FrameSvgItem {
|
|
||||||
id: tooltip
|
|
||||||
imagePath: "widgets/background"
|
|
||||||
width: units.gridUnit * 5 + margins.left + margins.right
|
|
||||||
height: sectionLabel.height + /*subtitle.height +*/ margins.top + margins.bottom
|
|
||||||
|
|
||||||
ColumnLayout {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
|
|
||||||
PlasmaExtras.Title {
|
|
||||||
id: sectionLabel
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.fillHeight: true
|
|
||||||
horizontalAlignment: Text.AlignHCenter
|
|
||||||
}
|
|
||||||
|
|
||||||
// PlasmaComponents.Label {
|
|
||||||
// id: subtitle
|
|
||||||
// Layout.fillWidth: true
|
|
||||||
// horizontalAlignment: Text.AlignHCenter
|
|
||||||
// visible: text.length > 0
|
|
||||||
// text: "Thursday, 7th"
|
|
||||||
// }
|
|
||||||
|
|
||||||
}
|
|
||||||
y: 0
|
|
||||||
x: -listView.width/2 - width/2
|
|
||||||
|
|
||||||
opacity: sectionLabel.text && scrollBar.pressed ? 1 : 0
|
|
||||||
Behavior on opacity {
|
|
||||||
NumberAnimation {
|
|
||||||
duration: units.longDuration
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
Timer {
|
|
||||||
id: dirtyTimer
|
|
||||||
interval: 250
|
|
||||||
onTriggered: {
|
|
||||||
Sections.initSectionData(listView);
|
|
||||||
internal.modelDirty = false;
|
|
||||||
tooltip.visible = Sections._sections.length > 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
QtObject {
|
|
||||||
id: internal
|
|
||||||
|
|
||||||
property bool modelDirty: false
|
|
||||||
function initDirtyObserver() {
|
|
||||||
Sections.initSectionData(listView);
|
|
||||||
tooltip.visible = Sections._sections.length > 1
|
|
||||||
function dirtyObserver() {
|
|
||||||
if (!internal.modelDirty) {
|
|
||||||
internal.modelDirty = true;
|
|
||||||
dirtyTimer.running = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (listView.model.countChanged)
|
|
||||||
listView.model.countChanged.connect(dirtyObserver);
|
|
||||||
|
|
||||||
if (listView.model.itemsChanged)
|
|
||||||
listView.model.itemsChanged.connect(dirtyObserver);
|
|
||||||
|
|
||||||
if (listView.model.itemsInserted)
|
|
||||||
listView.model.itemsInserted.connect(dirtyObserver);
|
|
||||||
|
|
||||||
if (listView.model.itemsMoved)
|
|
||||||
listView.model.itemsMoved.connect(dirtyObserver);
|
|
||||||
|
|
||||||
if (listView.model.itemsRemoved)
|
|
||||||
listView.model.itemsRemoved.connect(dirtyObserver);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Accessible.role: Accessible.ScrollBar
|
|
||||||
}
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
/****************************************************************************
|
|
||||||
**
|
|
||||||
** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
|
|
||||||
** All rights reserved.
|
|
||||||
** Contact: Nokia Corporation (qt-info@nokia.com)
|
|
||||||
**
|
|
||||||
** This file is part of the Qt Components project.
|
|
||||||
**
|
|
||||||
** $QT_BEGIN_LICENSE:BSD$
|
|
||||||
** You may use this file under the terms of the BSD license as follows:
|
|
||||||
**
|
|
||||||
** "Redistribution and use in source and binary forms, with or without
|
|
||||||
** modification, are permitted provided that the following conditions are
|
|
||||||
** met:
|
|
||||||
** * Redistributions of source code must retain the above copyright
|
|
||||||
** notice, this list of conditions and the following disclaimer.
|
|
||||||
** * Redistributions in binary form must reproduce the above copyright
|
|
||||||
** notice, this list of conditions and the following disclaimer in
|
|
||||||
** the documentation and/or other materials provided with the
|
|
||||||
** distribution.
|
|
||||||
** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
|
|
||||||
** the names of its contributors may be used to endorse or promote
|
|
||||||
** products derived from this software without specific prior written
|
|
||||||
** permission.
|
|
||||||
**
|
|
||||||
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
|
||||||
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
|
||||||
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
|
||||||
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
|
||||||
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
|
||||||
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
|
||||||
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
|
||||||
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
|
||||||
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
|
||||||
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
||||||
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
|
|
||||||
** $QT_END_LICENSE$
|
|
||||||
**
|
|
||||||
****************************************************************************/
|
|
||||||
|
|
||||||
var _sectionData = [];
|
|
||||||
var _sections = [];
|
|
||||||
|
|
||||||
function initSectionData(list) {
|
|
||||||
if (!list || !list.model) return;
|
|
||||||
_sectionData = [];
|
|
||||||
_sections = [];
|
|
||||||
var current = "";
|
|
||||||
var prop = list.section.property;
|
|
||||||
|
|
||||||
for (var i = 0, count = list.model.count; i < count; i++) {
|
|
||||||
var item = list.model.get(i);
|
|
||||||
if (item[prop] !== current) {
|
|
||||||
current = item[prop];
|
|
||||||
_sections.push(current);
|
|
||||||
_sectionData.push({ index: i, header: current });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function closestSection(pos) {
|
|
||||||
var tmp = (_sections.length) * pos;
|
|
||||||
var val = Math.ceil(tmp) // TODO: better algorithm
|
|
||||||
val = val < 2 ? 1 : val;
|
|
||||||
return _sections[val-1];
|
|
||||||
}
|
|
||||||
|
|
||||||
function indexOf(sectionName) {
|
|
||||||
var val = _sectionData[_sections.indexOf(sectionName)].index;
|
|
||||||
return val === 0 || val > 0 ? val : -1;
|
|
||||||
}
|
|
||||||
|
|
@ -7,10 +7,8 @@
|
||||||
<file alias="Dialer/Dialer.qml">qml/Dialer/Dialer.qml</file>
|
<file alias="Dialer/Dialer.qml">qml/Dialer/Dialer.qml</file>
|
||||||
<file alias="Dialer/ContactsList.qml">qml/Dialer/ContactsList.qml</file>
|
<file alias="Dialer/ContactsList.qml">qml/Dialer/ContactsList.qml</file>
|
||||||
<file alias="Dialer/DialPage.qml">qml/Dialer/DialPage.qml</file>
|
<file alias="Dialer/DialPage.qml">qml/Dialer/DialPage.qml</file>
|
||||||
<file alias="Dialer/private/SectionScroller.js">qml/Dialer/private/SectionScroller.js</file>
|
|
||||||
<file alias="Dialer/RoundImage.qml">qml/Dialer/RoundImage.qml</file>
|
<file alias="Dialer/RoundImage.qml">qml/Dialer/RoundImage.qml</file>
|
||||||
<file alias="Dialer/History.qml">qml/Dialer/History.qml</file>
|
<file alias="Dialer/History.qml">qml/Dialer/History.qml</file>
|
||||||
<file alias="Dialer/CustomSectionScroller.qml">qml/Dialer/CustomSectionScroller.qml</file>
|
|
||||||
<file alias="Dialer/HistoryDelegate.qml">qml/Dialer/HistoryDelegate.qml</file>
|
<file alias="Dialer/HistoryDelegate.qml">qml/Dialer/HistoryDelegate.qml</file>
|
||||||
<file alias="Dialpad/Dialpad.qml">qml/Dialpad/Dialpad.qml</file>
|
<file alias="Dialpad/Dialpad.qml">qml/Dialpad/Dialpad.qml</file>
|
||||||
<file alias="Dialpad/PhoneNumberInput.qml">qml/Dialpad/PhoneNumberInput.qml</file>
|
<file alias="Dialpad/PhoneNumberInput.qml">qml/Dialpad/PhoneNumberInput.qml</file>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue