1 files changed, 76 insertions, 0 deletions
diff --git a/qt-mobile/qml/mobilecomponents/Heading.qml b/qt-mobile/qml/mobilecomponents/Heading.qml
new file mode 100644
index 000000000..0d3909e12
--- /dev/null
+++ b/qt-mobile/qml/mobilecomponents/Heading.qml
@@ -0,0 +1,76 @@
+/*
+*   Copyright 2012 by Sebastian Kügler <sebas@kde.org>
+*
+*   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  2.010-1301, USA.
+*/
+
+import QtQuick 2.0
+import org.kde.plasma.mobilecomponents 0.2
+
+/**
+ * A heading label used for subsections of texts.
+ *
+ * The characteristics of the text will be automatically set according to the
+ * plasma Theme. Use this components for section titles or headings in your UI,
+ * for example page or section titles.
+ *
+ * Example usage:
+ *
+ * @code
+ * import org.kde.plasma.extras 2.0 as PlasmaExtras
+ * [...]
+ * Column {
+ *     PlasmaExtras.Title { text: "Fruit sweetness on the rise" }
+ *     PlasmaExtras.Heading { text: "Apples in the sunlight"; level: 2 }
+ *     PlasmaExtras.Paragraph { text: "Long text about fruit and apples [...]" }
+ *   [...]
+ * }
+ * @endcode
+ *
+ * The most important property is "text", which applies to the text property of
+ * Label. See PlasmaComponents Label and primitive QML Text element API for
+ * additional properties, methods and signals.
+ */
+Label {
+    id: heading
+
+    /**
+     * The level determines how big the section header is display, values
+     * between 1 (big) and 5 (small) are accepted
+     */
+    property int level: 1
+
+    property int step: 2
+
+    height: Math.round(paintedHeight * 1.2)
+    font.pointSize: headerPointSize(level)
+    font.weight: Font.Light
+    wrapMode: Text.WordWrap
+    opacity: 0.8
+
+    function headerPointSize(l) {
+        var n = Theme.defaultFont.pointSize;
+        var s;
+        if (l > 4) {
+            s = n
+        } else if (l < 2) {
+            s = n + (5*step)
+        } else {
+            s = n + ((5-level)*2)
+        }
+        return s;
+    }
+}