extract controls from twitter, add mock model

Change-Id: I977ce347d9d414c502012a7c4adb9e7223c4b987
Reviewed-by: Tomasz Olszak <olszak.tomasz@gmail.com>

15 files changed, 246 insertions, 349 deletions

diff --git a/examples/twitter/content/ListDelegate.qml b/examples/twitter/content/ListDelegate.qml
index 3937d29..7c0f702 100644
--- a/examples/twitter/content/ListDelegate.qml
+++ b/examples/twitter/content/ListDelegate.qml
@@ -37,6 +37,8 @@
 ****************************************************************************/
 
 import QtQuick 2.1
+import QtQuick.Controls.Tizen 1.0
+import QtQuick.Controls.Styles.Tizen 1.0 // tmp
 import "utils.js" as Utils
 
 Item {
@@ -47,7 +49,7 @@ Item {
     property alias text: textitem.text
     signal clicked
 
-    Settings { id: settings }
+    //Settings { id: settings }
 
     Rectangle {
         anchors.fill: parent
@@ -101,7 +103,7 @@ Item {
         anchors.bottomMargin: 40
         wrapMode: Text.Wrap
         textFormat: Text.RichText
-        font.family: settings.defaultFont
+        font.family: Theme.fonts.defaultFamily
         font.pixelSize: 36
         elide: Text.ElideLeft
         MouseArea {
diff --git a/examples/twitter/content/ScrollDecorator.qml b/examples/twitter/content/ScrollDecorator.qml
deleted file mode 100644
index 4da1e00..0000000
--- a/examples/twitter/content/ScrollDecorator.qml
+++ /dev/null
@@ -1,233 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
-** Copyright (C) 2013 Jarosław Staniek <staniek@kde.org>
-** Contact: http://www.qt-project.org/legal
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
-**     of its contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-import "private"
-
-Item {
-    id: root
-    anchors.fill: flickableItem
-
-    property Flickable flickableItem
-
-    Item {
-        id: priv
-        property int minIndicatorSize: 20
-        property int hideTimeout: 500
-        property int showTimeout: 150
-        property int shadowLength: 25
-
-        function canFlick(direction) {
-            return flickableItem.flickableDirection === direction ||
-                    flickableItem.flickableDirection === Flickable.HorizontalAndVerticalFlick ||
-                    flickableItem.flickableDirection === Flickable.AutoFlickDirection;
-        }
-    }
-
-    Rectangle {
-        id: verticalShadow
-        anchors.fill: root
-        opacity: 0
-        gradient: Gradient {
-            GradientStop { position: 0.0; color: "#32000000" }
-            GradientStop { position: priv.shadowLength/flickableItem.height; color: "#00000000" }
-            GradientStop { position: 1.0 - (priv.shadowLength/flickableItem.height); color: "#00000000" }
-            GradientStop { position: 1.0; color: "#32000000" }
-        }
-
-        states: State {
-            name: "visible"
-            when: flickableItem && flickableItem.movingVertically
-            PropertyChanges { target: verticalShadow; opacity: 1; visible: true }
-        }
-
-        transitions: [
-            Transition {
-                from: "visible"
-                to: ""
-                NumberAnimation { target: verticalShadow; property: "opacity"; duration: priv.hideTimeout; onStopped: verticalShadow.visible = false }
-            },
-            Transition {
-                from: ""
-                to: "visible"
-                NumberAnimation { target: verticalShadow; property: "opacity"; duration: priv.showTimeout }
-            }
-        ]
-    }
-
-    Rectangle {
-        id: horizontalShadow
-        anchors.centerIn: root
-        width: root.height
-        height: root.width
-        opacity: 0
-        rotation: 90
-        gradient: Gradient {
-            GradientStop { position: 0.0; color: "#32000000" }
-            GradientStop { position: priv.shadowLength/flickableItem.height; color: "transparent" }
-            GradientStop { position: 1.0 - (priv.shadowLength/flickableItem.height); color: "transparent" }
-            GradientStop { position: 1.0; color: "#32000000" }
-        }
-
-        states: State {
-            name: "visible"
-            when: flickableItem && flickableItem.movingHorizontally
-            PropertyChanges { target: horizontalShadow; opacity: 1 }
-        }
-
-        transitions: [
-            Transition {
-                from: "visible"
-                to: ""
-                NumberAnimation { target: horizontalShadow; property: "opacity"; duration: priv.hideTimeout; onStopped: verticalShadow.visible = false }
-            },
-            Transition {
-                from: ""
-                to: "visible"
-                NumberAnimation { target: horizontalShadow; property: "opacity"; duration: priv.showTimeout }
-            }
-        ]
-    }
-
-    Component {
-        id: verticalSizerWrapper
-        ScrollSizer {
-            id: verticalSizer
-            positionRatio: flickableItem ? flickableItem.visibleArea.yPosition : 0
-            sizeRatio: flickableItem ? flickableItem.visibleArea.heightRatio : 0
-            maxPosition: flickableItem ? flickableItem.height : 0
-            minSize: priv.minIndicatorSize
-        }
-    }
-
-    Component {
-        id: horizontalSizerWrapper
-        ScrollSizer {
-            id: horizontalSizer
-            positionRatio: flickableItem ? flickableItem.visibleArea.xPosition : 0
-            sizeRatio: flickableItem ? flickableItem.visibleArea.widthRatio : 0
-            maxPosition: flickableItem ? flickableItem.width : 0
-            minSize: priv.minIndicatorSize
-        }
-    }
-
-    Loader { id: verticalSizerLoader }
-    Loader { id: horizontalSizerLoader }
-
-    NinePatchImageWithEffect {
-        id: verticalIndicator
-        anchors.right: parent.right
-        anchors.rightMargin: 6
-        opacity: 0
-        source: "pics/00_scroll_bar_v.9.png"
-        effectSource: "pics/00_scroll_bar_v_ef.9.png"
-        leftCut: 7; topCut: 7; rightCut: 10; bottomCut: 10
-
-        y: shouldShow && verticalSizerLoader.status == Loader.Ready ? verticalSizerLoader.item.position : 0
-        height: shouldShow && verticalSizerLoader.status == Loader.Ready ? verticalSizerLoader.item.size - (horizontalIndicator.shouldShow ? 8 : 0) : 0
-
-        property bool shouldShow: flickableItem && priv.canFlick(Flickable.VerticalFlick) && (flickableItem.height > 0 && flickableItem.contentHeight > flickableItem.height)
-
-        onShouldShowChanged: {
-            if (shouldShow)
-                verticalSizerLoader.sourceComponent = verticalSizerWrapper;
-            else
-                verticalSizerLoader.sourceComponent = undefined;
-        }
-
-        states: State {
-            name: "visible"
-            when: flickableItem && flickableItem.movingVertically
-            PropertyChanges { target: verticalIndicator; opacity: 1 }
-        }
-        transitions: [
-            Transition {
-                from: "visible"
-                to: ""
-                NumberAnimation { target: verticalIndicator; property: "opacity"; duration: priv.hideTimeout }
-            },
-            Transition {
-                from: ""
-                to: "visible"
-                NumberAnimation { target: verticalIndicator; property: "opacity"; duration: priv.showTimeout }
-            }
-        ]
-    }
-
-    NinePatchImageWithEffect {
-        id: horizontalIndicator
-        anchors.bottom: parent.bottom
-        opacity: 0
-        // FIXME not tested
-        source: "pics/00_scroll_bar_v.9.png"
-        effectSource: "pics/00_scroll_bar_v_ef.9.png"
-        leftCut: 4; topCut: 5; rightCut: 14; bottomCut: 10
-
-        x: shouldShow && horizontalSizerLoader.status == Loader.Ready ? horizontalSizerLoader.item.position : 0
-        width: shouldShow && horizontalSizerLoader.status == Loader.Ready ? horizontalSizerLoader.item.size - (verticalIndicator.shouldShow ? 8 : 0) : 0
-        height: implicitWidth
-
-        property bool shouldShow: flickableItem && priv.canFlick(Flickable.HorizontalFlick) && (flickableItem.width > 0 && flickableItem.contentWidth > flickableItem.width)
-
-        onShouldShowChanged: {
-            if (shouldShow)
-                horizontalSizerLoader.sourceComponent = horizontalSizerWrapper;
-            else
-                horizontalSizerLoader.sourceComponent = undefined;
-        }
-
-        states: State {
-            name: "visible"
-            when: flickableItem && flickableItem.movingHorizontally
-            PropertyChanges { target: horizontalIndicator; opacity: 1 }
-        }
-        transitions: [
-            Transition {
-                from: "visible"
-                to: ""
-                NumberAnimation { target: horizontalIndicator; property: "opacity"; duration: priv.hideTimeout }
-            },
-            Transition {
-                from: ""
-                to: "visible"
-                NumberAnimation { target: horizontalIndicator; property: "opacity"; duration: priv.showTimeout }
-            }
-        ]
-    }
-}
diff --git a/examples/twitter/content/TwitterMockModel.qml b/examples/twitter/content/TwitterMockModel.qml
new file mode 100644
index 0000000..4bf230e
--- /dev/null
+++ b/examples/twitter/content/TwitterMockModel.qml
@@ -0,0 +1,63 @@
+/****************************************************************************
+**
+** Copyright (C) 2013 Jarosław Staniek <staniek@kde.org>
+** Contact: http://www.qt-project.org/legal
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
+**     of its contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import QtQuick.XmlListModel 2.0
+import "utils.js" as Utils
+
+ListModel {
+    property string user
+
+    ListElement {
+        date: "16 Jun 13 8:54 AM"
+        statusText: 'Become #Qt for #Tizen\'s Media Partner. We\'re looking for local nonenglish bloggers, enthusiasts. Do you want to join? http://qt-project.org/wiki/Qt-for-Tizen-Media-Partners'
+    }
+    ListElement {
+        date: "15 Jun 13 3:36 PM"
+        statusText: 'New #Qt Quick Controls Alpha 2 running on #Samsung\'s "PQ" Tizen reference device! http://www.youtube.com/watch?v=nkTqf8Eb_1k'
+    }
+    ListElement {
+        date: "11 Jun 13 12:48 AM"
+        statusText: 'Scrolling performance check: #Qt Quick app for #Tizen simulated on PC outperforms Emulator. 5 to 6 times smoother. http://www.youtube.com/watch?v=EEjbExRScYo'
+    }
+    ListElement {
+        date: "9 Jun 13 11:31 PM"
+        statusText: 'Intel\'s mobile #Tizen\'s UX, codenamed Obsidian. Would you like to have full #Qt support there too? http://www.tizenexperts.com/2013/06/early-intels-phone-user-interface-codenamed-obsidian/'
+    }
+}
+
diff --git a/examples/twitter/content/TwitterView.qml b/examples/twitter/content/TwitterView.qml
index de025fe..71f6e0f 100644
--- a/examples/twitter/content/TwitterView.qml
+++ b/examples/twitter/content/TwitterView.qml
@@ -37,62 +37,26 @@
 ****************************************************************************/
 
 import QtQuick 2.1
+import QtQuick.Controls.Tizen 1.0
 import "utils.js" as Utils
 
-Item {
-    property string userName: "QtForTizen"
-    Rectangle {
-        width: Utils.appWidth
-        height: Utils.appHeight
-        anchors.centerIn: parent
-        scale: Math.min(parent.width / width, parent.height / height)
-        color: "#f8f6ef"
-        Settings { id: settings }
+View {
+    readonly property string userName: "QtForTizen"
+    titleBar.text: qsTr("Tweets")
+    titleBar.subText: userName
 
-        Text {
-            id: header
-            anchors.top: parent.top
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.leftMargin: 30
-            anchors.rightMargin: 30
-            anchors.topMargin: 30
-            color: "#3b73b6"
-            text: qsTr("TWEETS")
-            font.family: settings.defaultFont
-            font.pixelSize: 36
-        }
-        Text {
-            id: header2
-            anchors.top: header.bottom
-            anchors.left: header.left
-            anchors.right: header.right
-            anchors.leftMargin: header.leftMargin
-            anchors.rightMargin: header.rightMargin
-            height: 14 + contentHeight
-            color: header.color
-            text: userName
-            font.family: settings.defaultFont
-            font.pixelSize: 24
-        }
-        ListView {
+    contents: ListView {
             id: listView
-            anchors.top: header2.bottom
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.bottom: parent.bottom
             clip: true
 
-            delegate: ListDelegate {
-            }
+            delegate: ListDelegate {}
 
-            model: TwitterModel {
-                id: xmlModel
+            //model: TwitterModel {
+            model: TwitterMockModel {
                 user: userName
             }
+            ScrollDecorator {
+                flickableItem: listView
+            }
         }
-        ScrollDecorator {
-            flickableItem: listView
-        }
-    }
 }
diff --git a/examples/twitter/content/private/NinePatchImageWithEffect.qml b/examples/twitter/content/View.qml
index f71a57a..b9f80e5 100644
--- a/examples/twitter/content/private/NinePatchImageWithEffect.qml
+++ b/examples/twitter/content/View.qml
@@ -1,6 +1,5 @@
 /****************************************************************************
 **
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
 ** Copyright (C) 2013 Jarosław Staniek <staniek@kde.org>
 ** Contact: http://www.qt-project.org/legal
 **
@@ -37,39 +36,33 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.1
+import QtQuick.Controls.Tizen 1.0
+import "utils.js" as Utils
 
 Item {
-    id:root
-    implicitWidth: base.implicitWidth
-    implicitHeight: base.implicitHeight
-    property alias source: base.source
-    property alias effectSource: effect.source
-    property color color
-    property int leftCut
-    property int rightCut
-    property int topCut
-    property int bottomCut
+    readonly property alias titleBar: __titleBar
+    property Component contents
+    Rectangle {
+        width: Utils.appWidth
+        height: Utils.appHeight
+        anchors.centerIn: parent
+        scale: Math.min(parent.width / width, parent.height / height)
+        color: "#f8f6ef"
 
-    BorderImage {
-        id: base
-        anchors.fill: parent
-        border {
-            left: root.leftCut
-            right: root.rightCut
-            top: root.topCut
-            bottom: root.bottomCut
+        TitleBar {
+            id: __titleBar
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
         }
-    }
-
-    BorderImage {
-        id: effect
-        anchors.fill: base
-        border {
-            left: root.leftCut
-            right: root.rightCut
-            top: root.topCut
-            bottom: root.bottomCut
+        Loader {
+             id: contentsLoader
+             sourceComponent: contents
+             anchors.top: titleBar.bottom
+             anchors.left: parent.left
+             anchors.right: parent.right
+             anchors.bottom: parent.bottom
         }
     }
 }
diff --git a/examples/twitter/content/private/ScrollSizer.qml b/src/controls/DefaultFont.qml
index bf4b055..104f797 100644
--- a/examples/twitter/content/private/ScrollSizer.qml
+++ b/src/controls/DefaultFont.qml
@@ -1,6 +1,5 @@
 /****************************************************************************
 **
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
 ** Copyright (C) 2013 Jarosław Staniek <staniek@kde.org>
 ** Contact: http://www.qt-project.org/legal
 **
@@ -37,38 +36,12 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.1
 
 Item {
-    id: sizer
+    id: root
+    property string font: loader.name //'TizenSans'
+    /*! \internal */
+    property Component __style: Qt.createComponent(Settings.style + "/DefaultsStyle.qml", root)
 
-    // relative (0..1) position of top and bottom
-    property real positionRatio
-    property real sizeRatio
-
-    // max position and min size
-    property real maxPosition
-    property real minSize
-
-    // size underflow
-    property real sizeUnderflow: (sizeRatio * maxPosition) < minSize
-                                 ? minSize - (sizeRatio * maxPosition) : 0
-
-    // raw start and end position considering minimum size
-    property real rawStartPos: positionRatio * (maxPosition - sizeUnderflow)
-    property real rawEndPos: (positionRatio + sizeRatio) * (maxPosition - sizeUnderflow) + sizeUnderflow
-
-    // overshoot amount at start and end
-    property real overshootStart: rawStartPos < 0 ? -rawStartPos : 0
-    property real overshootEnd: rawEndPos > maxPosition ? rawEndPos - maxPosition : 0
-
-    // overshoot adjusted start and end
-    property real adjStartPos: rawStartPos + overshootStart
-    property real adjEndPos: rawEndPos - overshootStart - overshootEnd
-
-    // final position and size of thumb
-    property int position: 0.5 + (adjStartPos + minSize > maxPosition
-                                  ? maxPosition - minSize : adjStartPos)
-    property int size: 0.5 + ((adjEndPos - position) < minSize
-                              ? minSize : (adjEndPos - position))
 }
diff --git a/src/controls/TitleBar.qml b/src/controls/TitleBar.qml
new file mode 100644
index 0000000..16f9148
--- /dev/null
+++ b/src/controls/TitleBar.qml
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2013 Jarosław Staniek <staniek@kde.org>
+ *
+ * This library 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 of the License, or (at your option) any later version.
+ *
+ * This library 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 library; see the file COPYING.LIB.  If not, write to
+ * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+ * Boston, MA 02110-1301, USA.
+ */
+
+import QtQuick 2.1
+import QtQuick.Controls 1.0
+import QtQuick.Controls.Private 1.0
+
+Control {
+    id: root
+    property string text
+    property string subText
+
+    /*! \internal */
+    style: Qt.createComponent(Settings.style + "/TitleBarStyle.qml", root)
+
+    Loader {
+        id: styleLoader
+        property Item __control: root
+        sourceComponent: style
+    }
+
+    Loader {
+        id: titleBarLoader
+        sourceComponent: styleLoader.item.titleBar
+    }
+}
diff --git a/src/controls/controls.pro b/src/controls/controls.pro
index 080e53e..4b9b26a 100644
--- a/src/controls/controls.pro
+++ b/src/controls/controls.pro
@@ -8,7 +8,9 @@ QML_FILES += \
     SplitView.qml\
     ScrollDecorator.qml\
     Popup.qml\
-    BusyIndicator.qml
+    BusyIndicator.qml \
+    ScrollDecorator.qml \
+    TitleBar.qml
 
 CONFIG += force_independent
 
diff --git a/src/controls/qmldir b/src/controls/qmldir
index 5ec06b6..23d9225 100644
--- a/src/controls/qmldir
+++ b/src/controls/qmldir
@@ -7,3 +7,4 @@ SplitView 1.0 SplitView.qml
 ScrollDecorator 1.0 ScrollDecorator.qml
 Popup 1.0 Popup.qml
 BusyIndicator 1.0 BusyIndicator.qml
+TitleBar 1.0 TitleBar.qml
diff --git a/src/styles/DefaultSettings.js b/src/styles/DefaultSettings.js
index f0491c7..b9714cb 100644
--- a/src/styles/DefaultSettings.js
+++ b/src/styles/DefaultSettings.js
@@ -648,6 +648,10 @@ var images = {
     img_TTS_popup_bg_9: imagesPath + "TTS_popup_bg.9.sci",
 }
 
+var fonts = {
+    defaultFamily: 'TizenSans',
+    defaultSource: 'TizenSansRegular.ttf'
+}
 
 
 var panel = {
@@ -1113,6 +1117,22 @@ var popup = {
     }
 }
 
+var titleBar = {
+    backgroundColor: colors.background,
+    text: {
+        color: colors.B042,
+        font: {
+            pixelSize: 36
+        }
+    },
+    subText: {
+        color: colors.B042,
+        font: {
+            pixelSize: 24
+        }
+    }
+}
+
 var busyIndicator = {
     source: images.img_00_list_process_01,
     duration: 1500
diff --git a/examples/twitter/content/Settings.qml b/src/styles/Settings.qml
index 0c62f98..0c62f98 100644
--- a/examples/twitter/content/Settings.qml
+++ b/src/styles/Settings.qml
diff --git a/src/styles/TitleBarStyle.qml b/src/styles/TitleBarStyle.qml
new file mode 100644
index 0000000..7744bb0
--- /dev/null
+++ b/src/styles/TitleBarStyle.qml
@@ -0,0 +1,68 @@
+/*
+ * Copyright (C) 2013 Jarosław Staniek <staniek@kde.org>
+ *
+ * This library 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 of the License, or (at your option) any later version.
+ *
+ * This library 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 library; see the file COPYING.LIB.  If not, write to
+ * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+ * Boston, MA 02110-1301, USA.
+ */
+
+import QtQuick 2.1
+import QtQuick.Controls 1.0
+import QtQuick.Controls.Private 1.0
+import QtQuick.Controls.Tizen 1.0
+import "DefaultSettings.js" as Theme
+
+Style {
+    id: style
+    property TitleBar control: __control
+
+    property Component titleBar: Rectangle {
+        color: "#f8f6ef"
+        width: control.width
+        Binding { target: control; property: "implicitWidth"; value: width }
+        height: header.height + header2.height + 30 + 30
+        Binding { target: control; property: "implicitHeight"; value: height }
+
+        FontLoader { source: Theme.fonts.defaultSource }
+        Text {
+            id: header
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.leftMargin: 30
+            anchors.rightMargin: 30
+            anchors.topMargin: 30
+            color: "#3b73b6"
+            font.family: Theme.fonts.defaultFamily
+            font.capitalization: Font.AllUppercase
+            text: control.text
+            font.pixelSize: 36
+            //Binding { target: control; property: "text"; value: header.text }
+        }
+        Text {
+            id: header2
+            anchors.top: header.bottom
+            anchors.left: header.left
+            anchors.right: header.right
+            anchors.leftMargin: header.leftMargin
+            anchors.rightMargin: header.rightMargin
+            height: contentHeight
+            color: header.color
+            font.family: header.font.family
+            text: control.subText
+            font.pixelSize: 24
+            //Binding { target: control; property: "subText"; value: header2.text }
+        }
+    }
+}
diff --git a/examples/twitter/content/TizenSansRegular.ttf b/src/styles/TizenSansRegular.ttf
index 356c266..356c266 100644
--- a/examples/twitter/content/TizenSansRegular.ttf
+++ b/src/styles/TizenSansRegular.ttf
diff --git a/src/styles/qmldir b/src/styles/qmldir
index 605d203..7a10cf7 100644
--- a/src/styles/qmldir
+++ b/src/styles/qmldir
@@ -14,4 +14,4 @@ ContextMenuStyle 1.0 ContextMenuStyle.qml
 PopupStyle 1.0 PopupStyle.qml
 BusyIndicatorStyle 1.0 BusyIndicatorStyle.qml
 Theme 1.0 DefaultSettings.js
-
+TitleBarStyle 1.0 TitleBarStyle.qml
diff --git a/src/styles/styles.pro b/src/styles/styles.pro
index 933368a..4575fc6 100644
--- a/src/styles/styles.pro
+++ b/src/styles/styles.pro
@@ -15,14 +15,16 @@ QML_FILES = \
     ScrollDecoratorStyle.qml\
     ContextMenuStyle.qml\
     PopupStyle.qml\
-    BusyIndicatorStyle.qml
+    BusyIndicatorStyle.qml \
+    TitleBarStyle.qml
 
 # Images
 QML_FILES += \
     images/720x1280/*.png \
     images/720x1280/*.sci \
     images/720x1280/white/*.png \
-    images/720x1280/white/*.sci
+    images/720x1280/white/*.sci \
+    TizenSansRegular.ttf
 
 CONFIG += force_independent