Commit 59c984a1 authored by Fabian Riethmayer's avatar Fabian Riethmayer

Merge branch 'addr-qml2' into 'master'

QML Code to create the HIG addressbook examples

See merge request !14
parents c3ba17da 6ced9525
/*
* Copyright 2018 Fabian Riethmayer
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* 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 Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.6
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import org.kde.kirigami 2.7 as Kirigami
import "../models/" as Models
Kirigami.ApplicationItem {
width: parent.width
height: parent.height
id: root
property alias gDrawer: global
property alias cDrawer: context
property Item detailPage;
property Item listPage;
property Item historyPage;
property int index: -1
property bool wide: false
property var mydata : Models.Contacts {
Component.onCompleted: {
adjustGlobalDrawer();
root.pageStack.push(Qt.resolvedUrl("ListPage.qml"), {model: root.mydata});
listPage = root.pageStack.lastItem;
if (root.index >= 0) {
setIndex(root.index)
}
listPage.currentIndexChanged.connect(function() {
setIndex(listPage.currentIndex);
});
}
}
/*pageStack.initialPage: ListPage {
id: list
onCurrentIndexChanged: {
setIndex(list.currentIndex)
}
Kirigami.ColumnView.fillWidth: false
}*/
function setIndex(i) {
//return;
console.log("setIndex")
if (root.pageStack.depth == 1) {
root.pageStack.push(Qt.resolvedUrl("DetailPage.qml"), {model: root.mydata.get(i)});
detailPage = root.pageStack.lastItem;
}
detailPage.model = mydata.get(i)
if (root.wide) {
if (root.pageStack.depth == 2) {
root.pageStack.push(Qt.resolvedUrl("HistoryPage.qml"), {model: root.mydata.get(i)})
historyPage = root.pageStack.lastItem;
}
historyPage.model = mydata.get(i)
show3Columns();
}
else {
show2Columns();
}
}
pageStack.defaultColumnWidth: root.width < 320 ? root.width : 320
pageStack.globalToolBar.style: Kirigami.ApplicationHeaderStyle.Auto
/*DetailPage {
id: detail
visible: false
showHistory: root.wide
Kirigami.ColumnView.fillWidth: true
//Kirigami.ColumnView.reservedSpace: pageStack.defaultColumnWidth * 2
Share {
id: share
sheetOpen: true
model: mydata
}
}
HistoryPage {
id: history
visible: false
//Kirigami.ColumnView.fillWidth: false
}*/
function show3Columns() {
if (listPage) {
listPage. Kirigami.ColumnView.fillWidth = false
}
if (detailPage) {
detailPage.Kirigami.ColumnView.reservedSpace = pageStack.defaultColumnWidth * 2
detailPage.Kirigami.ColumnView.fillWidth = true
}
if (historyPage) {
historyPage.Kirigami.ColumnView.fillWidth = false
}
}
function show2Columns() {
//listPage. Kirigami.ColumnView.fillWidth = true
if (detailPage) {
detailPage.Kirigami.ColumnView.reservedSpace = pageStack.defaultColumnWidth
detailPage.Kirigami.ColumnView.fillWidth = true
}
while (root.pageStack.depth > 2) {
root.pageStack.pop()
}
}
function adjustGlobalDrawer() {
// Change drawer to collapsible if there is enough space
if (width >= 1100 && !global.collapsible) {
console.log("onWidthChanged collapsible")
global.modal = false;
global.collapsible = true
global.collapsed = true;
global.drawerOpen = true
}
if (width < 1100 && global.collapsible) {
console.log("onWidthChanged not collapsible")
global.drawerOpen = false
global.collapsible = false
global.modal = true
}
}
onWidthChanged: {
// Show 3 columns
if (width >= 1050 && !root.wide) {
console.log("onWidthChanged wide")
root.wide = true
show3Columns();
}
// Show 2 columns
if (width < 1050 && root.wide) {
console.log("onWidthChanged narrow")
root.wide = false
show2Columns()
}
adjustGlobalDrawer();
}
globalDrawer: Kirigami.GlobalDrawer {
id: global
title: "Joanne Doe"
titleIcon: "../../img/BernaFace.jpg"
Kirigami.Theme.inherit: false
Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
topContent: [
Row {
Layout.alignment: Qt.AlignRight | Qt.AlignBottom
//anchors.right: parent.right
anchors.rightMargin: Kirigami.Settings.tabletMode ? Kirigami.Units.largeSpacing : Kirigami.Units.smallSpacing
spacing: Kirigami.Settings.tabletMode ? 2 * Kirigami.Units.largeSpacing : 2 * Kirigami.Units.smallSpacing
//anchors.bottomMargin: 4 * Kirigami.Units.largeSpacing
Kirigami.Icon {
source: "document-share"
width: Kirigami.Units.iconSizes.smallMedium
height: width
anchors.verticalCenter: parent.verticalCenter
}
Kirigami.Icon {
source: "document-edit"
width: Kirigami.Units.iconSizes.smallMedium
height: width
anchors.verticalCenter: parent.verticalCenter
}
}
]
actions: [
Kirigami.Action {
iconName: "document-import"
text: i18n("&Import contacts")
},
Kirigami.Action {
iconName: "document-export"
text: i18n("&Export contacts")
},
Kirigami.Action {
iconName: "user-group-delete"
text: i18n("&Merge contacts")
},
Kirigami.Action {
iconName: "user-group-new"
text: i18n("&Search duplicate contacts")
},
Kirigami.Action {
iconName: "configure"
text: i18n("&Settings")
}
]
}
contextDrawer: Kirigami.ContextDrawer {
id: context
}
}
/*
* Copyright 2018 Fabian Riethmayer
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* 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 Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.4 as Kirigami
import QtGraphicalEffects 1.0
import "../lib/" as HIG
Flickable {
id: root
property var model;
property alias history: history
signal editClicked()
HIG.Header {
id: header
content.anchors.leftMargin: root.width > 400 ? 100 : Kirigami.Units.largeSpacing
content.anchors.topMargin: Kirigami.Units.largeSpacing
content.anchors.bottomMargin: Kirigami.Units.largeSpacing
//status: root.contentY == 0 ? 1 : Math.min(1, Math.max(2 / 11, 1 - root.contentY / Kirigami.Units.gridUnit))
source: "../../img/" + model.image
/*Kirigami.ActionToolBar {
anchors.fill: parent
//spacing: (header.width - 3 * Kirigami.Units.iconSizes.medium) / 4
//anchors.leftMargin: spacing
actions: [
Kirigami.Action {
iconName: "favorite"
text: "Save as favorite"
},
Kirigami.Action {
iconName: "favorite"
text: "Save as favorite"
},
Kirigami.Action {
iconName: "favorite"
text: "Save as favorite"
}
]}*/
stripContent: Row {
anchors.fill: parent
spacing: (header.width - 3 * Kirigami.Units.iconSizes.medium) / 4
anchors.leftMargin: spacing
Kirigami.Icon {
source: "favorite"
width: Kirigami.Units.iconSizes.smallMedium
height: width
anchors.verticalCenter: parent.verticalCenter
}
Kirigami.Icon {
source: "document-share"
width: Kirigami.Units.iconSizes.smallMedium
height: width
anchors.verticalCenter: parent.verticalCenter
}
Kirigami.Icon {
source: "document-edit"
width: Kirigami.Units.iconSizes.smallMedium
height: width
anchors.verticalCenter: parent.verticalCenter
MouseArea {
onClicked: root.editClicked()
anchors.fill: parent
}
}
}
Kirigami.Heading {
text: model.firstname + " " + model.lastname
//color: Kirigami.Theme.textColor
color: "#fcfcfc" // Hard coded because of the ColorOverlay
level: 1
width: parent.width
wrapMode: Text.WordWrap
}
}
Column {
id: comm
anchors.top: header.bottom
anchors.topMargin: 2 * Kirigami.Units.largeSpacing
width: parent.width
Repeater {
model: root.model.communication
delegate: Kirigami.BasicListItem {
//height: Kirigami.Units.gridUnit * 2
id: delegate
contentItem: RowLayout {
spacing: delegate.leftPadding
anchors.verticalCenter: parent.verticalCenter
Kirigami.Icon {
id: icon
width: Kirigami.Units.iconSizes.smallMedium
height: width
source: model.icon
color: Kirigami.Theme.textColor
Layout.alignment: Qt.AlignVCenter
}
Column {
Layout.alignment: Qt.AlignVCenter
Label {
text: model.text
color: model.default ? Kirigami.Theme.linkColor : Kirigami.Theme.textColor //"#2980b9" : "#232627"
}
Label {
text: model.description
font.pointSize: 8
color: Kirigami.Theme.textColor //"#7f8c8d"
}
}
Rectangle {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
Kirigami.Icon {
visible: typeof model.actions !== "undefined"
source: "kmouth-phrase-new"
width: Kirigami.Units.iconSizes.smallMedium
height: width
anchors.right: parent.right
anchors.rightMargin: Kirigami.Units.largeSpacing
anchors.verticalCenter: parent.verticalCenter
id: call
}
}
}
/*Component.onCompleted: {
if (typeof model.actions !== "undefined") {
delegate.actions = model.actions
}
}*/
}
}
}
Kirigami.Heading {
level: 4
visible: typeof root.model.history !== "undefined" && root.model.history.count && history.visible
text: "History"
id: hTitle
anchors.top: comm.bottom
anchors.left: parent.left
anchors.topMargin: 2 * Kirigami.Units.largeSpacing
anchors.leftMargin: Kirigami.Units.largeSpacing
}
History {
id: history
anchors.top: hTitle.bottom
anchors.topMargin: Kirigami.Units.largeSpacing
width: root.width
model: root.model
}
}
/*
* Copyright 2018 Fabian Riethmayer
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* 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 Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.6
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.4 as Kirigami
Kirigami.ScrollablePage {
property var model;
visible: false
id: page
title: Kirigami.Settings.tabletMode ? model.firstname : ""
Kirigami.Theme.colorSet: Kirigami.Theme.View
property bool showHistory;
function showForm() {
}
background: Rectangle {
color: Kirigami.Theme.backgroundColor
}
Detail {
model: page.model
onEditClicked: formOverlay.open()
history.visible: showHistory
}
FormPage {
id: formOverlay
model: page.model
}
actions {
left: Kirigami.Action {
iconName: "mail-message"
text: "Write mail"
}
main: Kirigami.Action {
iconName: "call-start"
text: "Make call"
onTriggered: sheet.open()
}
right: Kirigami.Action {
iconName: "kmouth-phrase-new"
text: "Write SMS"
}
}
contextualActions: [
Kirigami.Action {
iconName: "favorite"
text: "Select as favorite"
},
Kirigami.Action {
iconName: "document-share"
text: "Share"
},
Kirigami.Action {
iconName: "document-edit"
text: "Edit"
},
Kirigami.Action {
iconName: "edit-image-face-add"
text: "Choose photo"
},
Kirigami.Action {
iconName: "im-kick-user"
text: "Block number"
},
Kirigami.Action {
iconName: "delete"
text: "Delete contact"
},
Kirigami.Action {
iconName: "edit-clear-history"
text: "Delete history"
}
]
}
/*
* Copyright 2018 Fabian Riethmayer
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* 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 Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.4 as Kirigami
import QtGraphicalEffects 1.0
import "../lib/" as HIG
ColumnLayout {
id: root
property var model;
spacing: 2 * Kirigami.Units.largeSpacing
Kirigami.FormLayout {
id: form
Layout.preferredWidth: Math.round(page.width * 0.9)
TextField {
Kirigami.FormData.label: "Firstname:"
text: model.firstname
}
TextField {
Kirigami.FormData.label: "Lastname:"
text: model.lastname
}
Kirigami.Separator {
Kirigami.FormData.isSection: true
Kirigami.FormData.label: "Phone"
}
Repeater {
model: root.model.communication
delegate: TextField {
visible: model.type === "phone"
Kirigami.FormData.label: model.description + ":"
text: model.text
}
}
Kirigami.Separator {
Kirigami.FormData.isSection: true
Kirigami.FormData.label: "Email"
}
Repeater {
model: root.model.communication
delegate: TextField {
visible: model.type === "email"
Kirigami.FormData.label: model.description + ":"
text: model.text
}
}
Kirigami.Separator {
Kirigami.FormData.isSection: true
}
Switch {
Kirigami.FormData.label: "Additional fields"
}
}
}
/*
* Copyright 2018 Fabian Riethmayer
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* 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 Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.6
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.4 as Kirigami
Kirigami.OverlaySheet {
property var model;
Kirigami.Theme.colorSet: Kirigami.Theme.View
id: sheet
//Layout.preferredWidth: Math.round(page.width * 0.9)
background: Rectangle {
color: Kirigami.Theme.backgroundColor
}
header: Kirigami.Heading {
text: "Edit details"
level: 1
}
showCloseButton: true
footer: Row {
height: childrenRect.height
layoutDirection: Qt.RightToLeft
Button {
text: "Save"
}
}
Form {
model: sheet.model
}
}
/*
* Copyright 2018 Fabian Riethmayer
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* 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 Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.4 as Kirigami
Column {
id: root
property var model;
Repeater {
model: root.model.history
delegate: Kirigami.SwipeListItem {
id: listItem
Row {
spacing: listItem.leftPadding
anchors.verticalCenter: parent.verticalCenter
Kirigami.Icon {
width: Kirigami.Units.iconSizes.smallMedium
height: width
source: model.icon
color: Kirigami.Theme.disabledTextColor //"#232627"
anchors.verticalCenter: parent.verticalCenter
}
Column {
anchors.verticalCenter: parent.verticalCenter
Label {
text: model.text
color: Kirigami.Theme.textColor //"#232627"
}
Label {
text: model.date
font.pointSize: 8
color: Kirigami.Theme.disabledTextColor // "#7f8c8d"
}
}
}
}
}
}