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

@@ -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
+		}
+	}
+}

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>