mirror of
https://invent.kde.org/marcoa/shift-shell.git
synced 2026-04-29 15:03:09 +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.
|
||||
*/
|
||||
|
||||
import QtQuick 2.0
|
||||
import QtQuick 2.7
|
||||
import QtQuick.Controls 2.2 as Controls
|
||||
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.plasma.core 2.0 as PlasmaCore
|
||||
|
||||
|
||||
Item {
|
||||
Controls.Label {
|
||||
|
|
@ -38,104 +36,46 @@ Item {
|
|||
Kirigami.SearchField {
|
||||
id: searchField
|
||||
Layout.fillWidth: true
|
||||
onTextChanged: contactsProxyModel.setFilterFixedString(text)
|
||||
}
|
||||
|
||||
Controls.ScrollView {
|
||||
id: contactScrollView
|
||||
ListView {
|
||||
id: contactsList
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Controls.ScrollBar.vertical.policy: Controls.ScrollBar.AlwaysOn
|
||||
|
||||
contentItem: ListView {
|
||||
id: contactsList
|
||||
section.property: "display"
|
||||
section.criteria: ViewSection.FirstCharacter
|
||||
section.delegate: Kirigami.ListSectionHeader {text: section}
|
||||
clip: true
|
||||
|
||||
property string numberToCall
|
||||
|
||||
section.property: "display"
|
||||
section.criteria: ViewSection.FirstCharacter
|
||||
clip: true
|
||||
model: PlasmaCore.SortFilterModel {
|
||||
sourceModel: KPeople.PersonsSortFilterProxyModel {
|
||||
sourceModel: KPeople.PersonsModel {
|
||||
id: contactsModel
|
||||
}
|
||||
requiredProperties: "phoneNumber"
|
||||
}
|
||||
sortRole: "display"
|
||||
filterRole: "display"
|
||||
filterRegExp: ".*" + searchField.text + ".*"
|
||||
sortOrder: Qt.AscendingOrder
|
||||
model: KPeople.PersonsSortFilterProxyModel {
|
||||
id: contactsProxyModel
|
||||
sourceModel: KPeople.PersonsModel {
|
||||
id: contactsModel
|
||||
}
|
||||
requiredProperties: "phoneNumber"
|
||||
filterRole: Qt.DisplayRole
|
||||
sortRole: Qt.DisplayRole
|
||||
filterCaseSensitivity: Qt.CaseInsensitive
|
||||
Component.onCompleted: sort(0)
|
||||
}
|
||||
|
||||
// PlasmaCore.SortFilterModel {
|
||||
// sortRole: "display"
|
||||
// sourceModel:
|
||||
// }
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
Component {
|
||||
id: contactListDelegate
|
||||
|
||||
delegate: Kirigami.SwipeListItem {
|
||||
height: Kirigami.Units.gridUnit * 6
|
||||
enabled: true
|
||||
clip: true
|
||||
|
||||
onClicked: {
|
||||
contactsList.numberToCall = 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
|
||||
}
|
||||
}
|
||||
}
|
||||
Kirigami.BasicListItem {
|
||||
icon: model.decoration
|
||||
label: model.display
|
||||
// onClicked: dialerUtils.dial(model.phoneNumber)
|
||||
}
|
||||
}
|
||||
|
||||
CustomSectionScroller {
|
||||
listView: contactsList
|
||||
}
|
||||
delegate: Kirigami.DelegateRecycler {
|
||||
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/ContactsList.qml">qml/Dialer/ContactsList.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/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="Dialpad/Dialpad.qml">qml/Dialpad/Dialpad.qml</file>
|
||||
<file alias="Dialpad/PhoneNumberInput.qml">qml/Dialpad/PhoneNumberInput.qml</file>
|
||||
|
|
|
|||
Loading…
Reference in a new issue