From 8468d28a4127e5b79ef948cc42dca4106a36757a Mon Sep 17 00:00:00 2001
From: jan Iversen <jan@casacondor.com>
Date: Thu, 18 Apr 2019 17:28:45 +0200
Subject: mobile-widgets/qml: add TemplateSection

TempleSection is a clickable rectangle that contains
information.

It is used to
- group information
- hide/unhide details

And are an important building block in decluttering small
screen, while showing all information on bigger screens

Signed-off-by: Jan Iversen <jani@apache.org>
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
---
 mobile-widgets/qml/TemplateSection.qml  | 36 +++++++++++++++++++++++++++++++++
 mobile-widgets/qml/mobile-resources.qrc |  3 +++
 2 files changed, 39 insertions(+)
 create mode 100644 mobile-widgets/qml/TemplateSection.qml

diff --git a/mobile-widgets/qml/TemplateSection.qml b/mobile-widgets/qml/TemplateSection.qml
new file mode 100644
index 000000000..3bebaca9b
--- /dev/null
+++ b/mobile-widgets/qml/TemplateSection.qml
@@ -0,0 +1,36 @@
+// SPDX-License-Identifier: GPL-2.0
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Layouts 1.11
+
+Column {
+	width: parent.width -20
+	property string title: "no title"
+	property bool isExpanded: false
+
+	Button {
+		width: parent.width
+
+		background: Rectangle {
+			id: buttonBackground
+			antialiasing: true
+			height: buttonText.height + 2
+			width: parent.width
+			border.color: "black"
+			border.width: 1
+			color: subsurfaceTheme.backgroundColor
+			opacity: 0.5
+		}
+		contentItem: Text {
+			id: buttonText
+			font.pointSize: subsurfaceTheme.regularPointSize
+			anchors.centerIn: buttonBackground
+			color: subsurfaceTheme.textColor
+			text: (isExpanded ? "- " : "+ ") + title
+			font.bold: true
+		}
+		onClicked: {
+			isExpanded = !isExpanded
+		}
+	}
+}
diff --git a/mobile-widgets/qml/mobile-resources.qrc b/mobile-widgets/qml/mobile-resources.qrc
index c1c8bb36f..2a42d9f46 100644
--- a/mobile-widgets/qml/mobile-resources.qrc
+++ b/mobile-widgets/qml/mobile-resources.qrc
@@ -1,5 +1,8 @@
 <RCC>
 	<qresource prefix="/qml">
+		<!-- ********** Templates ********** -->
+		<file>TemplateSection.qml</file>
+
 		<!-- ********** qml ********** -->
 		<file>About.qml</file>
 		<file>CloudCredentials.qml</file>
-- 
cgit v1.2.3-70-g09d2