Commit f0f41839 authored by Jonah Brüchert's avatar Jonah Brüchert 🌳

Implement more parts of the UI based on the HIG example

parent 76852b45
<?xml version="1.0" encoding="utf-8"?>
<component type="desktop-application">
<id>org.kde.phonebook</id>
<name>Kirigami Example Application</name>
<summary>A short summary describing what this software is about</summary>
<metadata_license>A permissive license for this metadata, e.g. "FSFAP"</metadata_license>
<project_license>The license of this software as SPDX string, e.g. "GPL-3+"</project_license>
<developer_name>The software vendor name, e.g. "ACME Corporation"</developer_name>
<name>Phone Book for Plasma Mobile</name>
<summary>View and edit contacts</summary>
<metadata_license>CC0-1.0</metadata_license>
<project_license>GPL-2+3+KDEev</project_license>
<developer_name>KDE Community</developer_name>
<description>
<p>Multiple paragraphs of long description, describing this software component.</p>
<p>You can also use ordered and unordered lists:</p>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
</ul>
<p>Keep in mind to XML-escape characters, and that this is not HTML markup.</p>
<p></p>
</description>
</component>
/*
* Kaidan - A user-friendly XMPP client for every device!
*
* Copyright (C) 2016-2019 Kaidan developers and contributors
* (see the LICENSE file for a full list of copyright authors)
*
* Kaidan 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 3 of the License, or
* (at your option) any later version.
*
* In addition, as a special exception, the author of Kaidan gives
* permission to link the code of its release with the OpenSSL
* project's "OpenSSL" library (or with modified versions of it that
* use the same license as the "OpenSSL" library), and distribute the
* linked executables. You must obey the GNU General Public License in
* all respects for all of the code used other than "OpenSSL". If you
* modify this file, you may extend this exception to your version of
* the file, but you are not obligated to do so. If you do not wish to
* do so, delete this exception statement from your version.
*
* Kaidan 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 Kaidan. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.3
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.0 as Controls
import QtGraphicalEffects 1.0
import org.kde.kirigami 2.0 as Kirigami
Kirigami.SwipeListItem {
id: listItem
property string name
property var icon
actions: [
Kirigami.Action {
iconName: "entry-edit"
},
Kirigami.Action {
iconName: "call-start"
onTriggered: {
console.log("Calling " + model.phoneNumber)
Qt.openUrlExternally("call://" + model.phoneNumber)
}
}
]
RowLayout {
height: Kirigami.Units.gridUnit * 5
spacing: Kirigami.Units.gridUnit * 0.5
// left side: Avatar
Item {
id: avatarSpace
Layout.preferredHeight: parent.height
Layout.preferredWidth: parent.height
RoundImage {
id: avatar
anchors.fill: parent
source: icon
isRound: true
}
}
// contact name
Kirigami.Heading {
text: name
textFormat: Text.PlainText
elide: Text.ElideRight
maximumLineCount: 1
level: 3
Layout.fillWidth: true
}
}
}
This diff is collapsed.
/*
* 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;
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
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: "#fcfcfc"
level: 1
}
}
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: Kirigami.Units.largeSpacing * 2
anchors.verticalCenter: parent.verticalCenter
Kirigami.Icon {
id: icon
width: Kirigami.Units.iconSizes.smallMedium
height: width
source: model.icon
color: "#232627"
Layout.alignment: Qt.AlignVCenter
}
Column {
Layout.alignment: Qt.AlignVCenter
Label {
text: model.text
color: model.default ? "#2980b9" : "#232627"
}
Label {
text: model.description
font.pointSize: 8
color: "#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
text: "History"
id: history
anchors.top: comm.bottom
anchors.left: parent.left
anchors.topMargin: 2 * Kirigami.Units.largeSpacing
anchors.leftMargin: Kirigami.Units.largeSpacing
}
Column {
anchors.top: history.bottom
anchors.topMargin: Kirigami.Units.largeSpacing
width: root.width
Repeater {
model: root.model.history
delegate: Kirigami.SwipeListItem {
Row {
spacing: Kirigami.Units.largeSpacing * 2
anchors.verticalCenter: parent.verticalCenter
Kirigami.Icon {
width: Kirigami.Units.iconSizes.smallMedium
height: width
source: model.icon
color: "#232627"
anchors.verticalCenter: parent.verticalCenter
}
Column {
anchors.verticalCenter: parent.verticalCenter
Label {
text: model.text
color: "#232627"
}
Label {
text: model.date
font.pointSize: 8
color: "#7f8c8d"
}
}
}
}
}
}
}
/*
* 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: model.firstname
Kirigami.Theme.colorSet: Kirigami.Theme.View
background: Rectangle {
color: Kirigami.Theme.backgroundColor
}
Detail {
model: page.model
onEditClicked: form.open();
}
FormPage {
id: form
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
ColumnLayout {
id: root
property var model;
spacing: 2 * Kirigami.Units.largeSpacing
/*HIG.Header {
id: header
content.anchors.leftMargin: Kirigami.Units.largeSpacing
content.anchors.topMargin: Kirigami.Units.largeSpacing
content.anchors.bottomMargin: Kirigami.Units.largeSpacing
source: "../../img/" + model.image
stripContent: Row {
anchors.fill: parent
spacing: (header.width - 3 * Kirigami.Units.iconSizes.medium) / 4
anchors.leftMargin: spacing
Kirigami.Icon {
source: "view-preview"
width: Kirigami.Units.iconSizes.smallMedium
height: width
anchors.verticalCenter: parent.verticalCenter
}
}
Label {
text: model.firstname + " " + model.lastname
color: "#fcfcfc"
font.pointSize: 12
}
}*/
Label {
id: header
text: "Edit details"
font.pointSize: 16
}
Kirigami.FormLayout {
id: form
Layout.fillWidth: true
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"
}
}
Button {
text: "Save"
Layout.alignment: Qt.AlignRight
anchors.rightMargin: Kirigami.Units.largeSpacing
}
}
/*
* 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: page
Layout.fillWidth: true
background: Rectangle {
color: Kirigami.Theme.backgroundColor
}
Form {
model: page.model
}
/*actions {
main: Kirigami.Action {
iconName: "dialog-ok-apply"
//onTriggered: d.state = "large"
}
}
/*contextualActions: [
Kirigami.Action {
iconName: "edit"
text: "Action text"
}
]*/
}
/*
* Kaidan - A user-friendly XMPP client for every device!
*
* Copyright (C) 2016-2019 Kaidan developers and contributors
* (see the LICENSE file for a full list of copyright authors)
*
* Kaidan 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 3 of the License, or
* (at your option) any later version.
*
* In addition, as a special exception, the author of Kaidan gives
* permission to link the code of its release with the OpenSSL
* project's "OpenSSL" library (or with modified versions of it that
* use the same license as the "OpenSSL" library), and distribute the
* linked executables. You must obey the GNU General Public License in
* all respects for all of the code used other than "OpenSSL". If you
* modify this file, you may extend this exception to your version of
* the file, but you are not obligated to do so. If you do not wish to
* do so, delete this exception statement from your version.
*
* Kaidan 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 Kaidan. If not, see <http://www.gnu.org/licenses/>.
*/
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)
}
}
}
}
//import related modules
import QtQuick 2.6
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.4 as Kirigami
import QtGraphicalEffects 1.0
//import "MMCQ.js" as MMCQ
Rectangle {
id: root
width: parent.width
height: Kirigami.Units.gridUnit * 11 * status
clip: true
default property alias contents: content.data
property alias content: contentContainer
property alias stripContent: strip.data
property string source;
property string title;
property string subtitle;
property string overview;
property real status : 1;
// Background image
Image {
anchors.fill: parent
id: bg
source: root.source
fillMode: Image.PreserveAspectCrop
}
FastBlur {
anchors.fill: bg
source: bg
radius: 48
ColorOverlay {
anchors.fill: parent
source: parent
color: "#66808080"
BrightnessContrast {
anchors.fill: parent
source: parent
brightness: 0
contrast: 0
}
}
}
// Container for the content of the header
Item {
anchors.fill: parent
anchors.bottomMargin: strip.children.length > 0 ? strip.height : 0
Item {
id: contentContainer
anchors.fill: parent
anchors.margins: Kirigami.Units.gridUnit
anchors.leftMargin: 200
Image {
id: img
source: root.source
height: contentContainer.height
width: contentContainer.height
fillMode: Image.PreserveAspectCrop
//visible: false
}
/*OpacityMask {
anchors.fill: img
source: img
maskSource: Rectangle {
height: img.width
width: height
radius: height / 2
}
}*/
Item {
id: content
height: childrenRect.height
anchors.left: img.right
anchors.leftMargin: Kirigami.Units.gridUnit
anchors.bottom: img.bottom
}
}
/*
TODO show on desktop only
Rectangle {
color: "#eff0f1"
anchors.top: parent.top;
anchors.right: parent.right;
anchors.margins: Kirigami.Units.largeSpacing
radius: 12
width: 24
height: 24
Kirigami.Icon {
source: "application-menu"
anchors.fill: parent
anchors.margins: Kirigami.Units.smallSpacing
}
}*/
}
Rectangle {
id: strip
color: "#66F0F0F0"
anchors.bottom: parent.bottom;
height: 2 * Kirigami.Units.gridUnit
width: parent.width
visible: children.length > 0
}
/*states: [
State {
name: "small"
PropertyChanges {
target: root;
height: 2 * Kirigami.Units.gridUnit
}
},
State {