diff options
author | jan Iversen <jan@casacondor.com> | 2019-04-18 17:28:45 +0200 |
---|---|---|
committer | Dirk Hohndel <dirk@hohndel.org> | 2019-12-26 10:18:08 -0800 |
commit | 8468d28a4127e5b79ef948cc42dca4106a36757a (patch) | |
tree | 4be57567ec973c8d0c6474c10a738c5aeb558f54 | |
parent | d4a2c5cdee92f184994e1559baf6c9c6b531d60b (diff) | |
download | subsurface-8468d28a4127e5b79ef948cc42dca4106a36757a.tar.gz |
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>
-rw-r--r-- | mobile-widgets/qml/TemplateSection.qml | 36 | ||||
-rw-r--r-- | mobile-widgets/qml/mobile-resources.qrc | 3 |
2 files changed, 39 insertions, 0 deletions
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> |