ToolBar added, view can be stylized
authorJaroslaw Staniek <staniek@kde.org>
Wed, 19 Jun 2013 17:45:47 +0000 (19:45 +0200)
committerTomasz Olszak <olszak.tomasz@gmail.com>
Tue, 25 Jun 2013 17:17:09 +0000 (19:17 +0200)
Change-Id: Iec62a0797c3ab0e40b20c80095b1a0099652111a
Reviewed-by: Tomasz Olszak <olszak.tomasz@gmail.com>
14 files changed:
examples/twitter/content/TwitterView.qml
examples/twitter/main.qml
src/controls/ToolBar.qml [new file with mode: 0644]
src/controls/View.qml
src/controls/controls.pro
src/controls/qmldir
src/styles/DefaultSettings.js
src/styles/Settings.qml [deleted file]
src/styles/TitleBarStyle.qml
src/styles/ToolBarButton.qml [new file with mode: 0644]
src/styles/ToolBarStyle.qml [new file with mode: 0644]
src/styles/ViewStyle.qml
src/styles/qmldir
src/styles/styles.pro

index 71f6e0f..fda2740 100644 (file)
@@ -44,19 +44,18 @@ View {
     readonly property string userName: "QtForTizen"
     titleBar.text: qsTr("Tweets")
     titleBar.subText: userName
+    ListView {
+        id: listView
+        clip: true
+        anchors.fill: parent
+        delegate: ListDelegate {}
 
-    contents: ListView {
-            id: listView
-            clip: true
-
-            delegate: ListDelegate {}
-
-            //model: TwitterModel {
-            model: TwitterMockModel {
-                user: userName
-            }
-            ScrollDecorator {
-                flickableItem: listView
-            }
+        //model: TwitterModel {
+        model: TwitterMockModel {
+            user: userName
+        }
+        ScrollDecorator {
+            flickableItem: listView
         }
+    }
 }
index 62d9d82..33208f3 100644 (file)
@@ -46,10 +46,14 @@ ApplicationWindow {
     width: Utils.appWidth * Utils.appScale
     height: Utils.appHeight * Utils.appScale
 
-    StackView {
-        id: pageStack
+    Item {
         anchors.fill: parent
-
-        initialItem: TwitterView {}
+        StackView {
+            anchors.centerIn: parent // used to get autoscale
+            scale: Math.min(parent.width / width, parent.height / height)
+            width: Utils.appWidth
+            height: Utils.appHeight
+            initialItem: TwitterView {}
+        }
     }
 }
diff --git a/src/controls/ToolBar.qml b/src/controls/ToolBar.qml
new file mode 100644 (file)
index 0000000..76be5e5
--- /dev/null
@@ -0,0 +1,41 @@
+/*
+ * 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 Item view
+
+    /*! \internal */
+    style: Qt.createComponent(Settings.style + "/ToolBarStyle.qml", root)
+
+    Loader {
+        id: styleLoader
+        property Item __control: root
+        sourceComponent: style
+    }
+
+    Loader {
+        id: toolBarLoader
+        sourceComponent: styleLoader.item.toolBar
+    }
+}
index b9f80e5..8581527 100644 (file)
@@ -1,68 +1,58 @@
-/****************************************************************************
-**
-** 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$
-**
-****************************************************************************/
-
+/*
+ * 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 "utils.js" as Utils
 
-Item {
-    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"
+Control {
+    id: root
+    readonly property alias titleBar: prvTitleBar
+    readonly property alias toolBar: prvToolBar
+    property alias backAction: prvBackAction
+
+    // all View's children go to content
+    default property alias data: content.data
+
+    property alias __content: content
+
+    /*! \internal */
+    style: Qt.createComponent(Settings.style + "/ViewStyle.qml", root)
+
+    Loader {
+        id: styleLoader
+        property alias __titleBar: prvTitleBar
+        property alias __toolBar: prvToolBar
+        property Item __control: root
+        property Action __backAction: prvBackAction
+        sourceComponent: style
+    }
+    Loader {
+        id: viewLoader
+        sourceComponent: styleLoader.item && styleLoader.item.view
+    }
 
-        TitleBar {
-            id: __titleBar
-            anchors.top: parent.top
-            anchors.left: parent.left
-            anchors.right: parent.right
-        }
-        Loader {
-             id: contentsLoader
-             sourceComponent: contents
-             anchors.top: titleBar.bottom
-             anchors.left: parent.left
-             anchors.right: parent.right
-             anchors.bottom: parent.bottom
-        }
+    TitleBar { id: prvTitleBar }
+    Item { id: content }
+    ToolBar { id: prvToolBar; view: root }
+    Action {
+        id: prvBackAction
+        onTriggered: { console.debug("Quit!"); Qt.quit(); }
     }
 }
index 4b9b26a..32e976e 100644 (file)
@@ -10,7 +10,9 @@ QML_FILES += \
     Popup.qml\
     BusyIndicator.qml \
     ScrollDecorator.qml \
-    TitleBar.qml
+    TitleBar.qml \
+    ToolBar.qml \
+    View.qml
 
 CONFIG += force_independent
 
index 23d9225..715a7f2 100644 (file)
@@ -8,3 +8,5 @@ ScrollDecorator 1.0 ScrollDecorator.qml
 Popup 1.0 Popup.qml
 BusyIndicator 1.0 BusyIndicator.qml
 TitleBar 1.0 TitleBar.qml
+ToolBar 1.0 ToolBar.qml
+View 1.0 View.qml
index b9714cb..1f77bb4 100644 (file)
@@ -777,6 +777,30 @@ var button= {
     font:{pixelSize:36, minimumPixelSize: 28}
 }
 
+var toolBar = {
+    backgroundColor: colors.background,
+    iconColor: {
+        normal: colors.F032L1,
+        disabled: colors.F032L1,
+        pressed: colors.F011L12
+    },
+    back: {
+        source: images.img_00_icon_Back,
+        effectSource: {
+            normal: images.img_00_icon_Back_ef
+            //disabled:images.img_00_circle_bg_ef_dim
+        }
+    },
+    more: {
+        source: images.img_00_icon_more,
+        effectSource: {
+            normal: images.img_00_icon_more_ef
+            //disabled:images.img_00_circle_bg_ef_dim
+        }
+
+    }
+}
+
 var checkBox = {
 
      indicator: {
@@ -886,7 +910,7 @@ var checkBox = {
         iconColor: {
             normal: colors.F032L1,
             disabled: colors.F032L1,
-            pressed: colors.F032L1P
+            pressed: colors.B041
             //highlighted: colors.F032L1P,
         }
     }
diff --git a/src/styles/Settings.qml b/src/styles/Settings.qml
deleted file mode 100644 (file)
index 0c62f98..0000000
+++ /dev/null
@@ -1,47 +0,0 @@
-/****************************************************************************
-**
-** 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
-
-Item {
-    property string defaultFont: 'TizenSans'
-    FontLoader {
-        id: loader
-        source: "TizenSansRegular.ttf"
-    }
-}
index 7744bb0..285c5c1 100644 (file)
@@ -28,8 +28,8 @@ Style {
     property TitleBar control: __control
 
     property Component titleBar: Rectangle {
-        color: "#f8f6ef"
-        width: control.width
+        color: Theme.titleBar.backgroundColor
+        width: 720
         Binding { target: control; property: "implicitWidth"; value: width }
         height: header.height + header2.height + 30 + 30
         Binding { target: control; property: "implicitHeight"; value: height }
@@ -43,12 +43,12 @@ Style {
             anchors.leftMargin: 30
             anchors.rightMargin: 30
             anchors.topMargin: 30
+            height: contentHeight
             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
@@ -62,7 +62,6 @@ Style {
             font.family: header.font.family
             text: control.subText
             font.pixelSize: 24
-            //Binding { target: control; property: "subText"; value: header2.text }
         }
     }
 }
diff --git a/src/styles/ToolBarButton.qml b/src/styles/ToolBarButton.qml
new file mode 100644 (file)
index 0000000..913e2df
--- /dev/null
@@ -0,0 +1,37 @@
+/*
+ * 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.Tizen 1.0
+import "DefaultSettings.js" as Theme
+
+TizenBorderImage {
+    id: root
+    signal clicked
+
+    backgroundColor: mouseArea.pressed ? Theme.toolBar.iconColor.pressed : Theme.toolBar.iconColor.normal
+    anchors.bottom: parent.bottom
+    anchors.bottomMargin: 15
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: root.clicked()
+    }
+}
diff --git a/src/styles/ToolBarStyle.qml b/src/styles/ToolBarStyle.qml
new file mode 100644 (file)
index 0000000..6a278ec
--- /dev/null
@@ -0,0 +1,53 @@
+/*
+ * 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 ToolBar control: __control
+
+    property Component toolBar: Rectangle {
+        color: Theme.toolBar.backgroundColor
+        width: 720
+        Binding { target: control; property: "implicitWidth"; value: width }
+        height: 98
+        Binding { target: control; property: "implicitHeight"; value: height }
+
+        ToolBarButton {
+            id: moreButton
+            source: Theme.toolBar.more.source
+            effectSource: Theme.toolBar.more.effectSource.normal
+            anchors.left: parent.left
+            anchors.leftMargin: 26
+        }
+        ToolBarButton {
+            id: backButton
+            source: Theme.toolBar.back.source
+            effectSource: Theme.toolBar.back.effectSource.normal
+            anchors.right: parent.right
+            anchors.rightMargin: 26
+            onClicked: { /*console.log("back clicked");*/ view.backAction.trigger(); }
+        }
+    }
+}
index dda73ff..ab28667 100644 (file)
@@ -27,39 +27,30 @@ import "DefaultSettings.js" as Theme
 Style {
     id: style
     property View control: __control
-    //readonly property alias titleBar: __titleBar
 
-    property Component view: //Item {
-        Rectangle {
-            width: 720 // TODO Utils.appWidth
-            //width: control.width
-            Binding { target: control; property: "implicitWidth"; value: width }
-            height: 1280 // TODO Utils.appHeight
-            //height: header.height + header2.height + 30 + 30
-            Binding { target: control; property: "implicitHeight"; value: height }
-            property Component contents: control.view
-            Binding { target: control; property: "contents"; value: contents }
+    property Component view: Rectangle {
+        y: __titleBar.height
+        Binding { target: __titleBar; property: "anchors.top"; value: control.top }
+        Binding { target: __titleBar; property: "anchors.left"; value: control.left }
+        Binding { target: __titleBar; property: "anchors.right"; value: control.right }
 
-            //anchors.centerIn: parent
-            //scale: Math.min(parent.width / width, parent.height / height)
-            color: "#f8f6ef"
+        Binding { target: control.__content; property: "anchors.top"; value: __titleBar.bottom }
+        Binding { target: control.__content; property: "anchors.bottom"; value: __toolBar.top }
+        Binding { target: control.__content; property: "anchors.left"; value: control.left }
+        Binding { target: control.__content; property: "anchors.right"; value: control.right }
 
-            TitleBar {
-                id: __titleBar
-                anchors.top: parent.top
-                anchors.left: parent.left
-                anchors.right: parent.right
-            }
-            Binding { target: control; property: "titleBar"; value: __titleBar }
+        Binding { target: __toolBar; property: "anchors.bottom"; value: control.bottom }
+        Binding { target: __toolBar; property: "anchors.left"; value: control.left }
+        Binding { target: __toolBar; property: "anchors.right"; value: control.right }
 
-/*            Loader {
-                 id: contentsLoader
-                 sourceComponent: contents
-                 anchors.top: titleBar.bottom
-                 anchors.left: parent.left
-                 anchors.right: parent.right
-                 anchors.bottom: parent.bottom
-            }*/
-        }
-   // }
+        width: 720 // TODO Utils.appWidth
+        implicitWidth: width
+        implicitHeight: height
+
+        Binding { target: control; property: "implicitWidth"; value: width }
+        height: 1280 - __titleBar.height - __toolBar.height // TODO Utils.appHeight
+
+        Binding { target: control; property: "implicitHeight"; value: height }
+        color: Theme.colors.background
+    }
 }
index 7a10cf7..5ef3f4a 100644 (file)
@@ -15,3 +15,6 @@ PopupStyle 1.0 PopupStyle.qml
 BusyIndicatorStyle 1.0 BusyIndicatorStyle.qml
 Theme 1.0 DefaultSettings.js
 TitleBarStyle 1.0 TitleBarStyle.qml
+ToolBarStyle 1.0 ToolBarStyle.qml
+ToolBarButton 1.0 ToolBarButton.qml
+ViewStyle 1.0 ViewStyle.qml
index 4575fc6..a376828 100644 (file)
@@ -16,7 +16,10 @@ QML_FILES = \
     ContextMenuStyle.qml\
     PopupStyle.qml\
     BusyIndicatorStyle.qml \
-    TitleBarStyle.qml
+    TitleBarStyle.qml \
+    ViewStyle.qml \
+    ToolBarStyle.qml \
+    ToolBarButton.qml
 
 # Images
 QML_FILES += \