diff options
author | Jaroslaw Staniek <staniek@kde.org> | 2013-06-19 19:45:47 +0200 |
---|---|---|
committer | Tomasz Olszak <olszak.tomasz@gmail.com> | 2013-06-25 19:17:09 +0200 |
commit | cdeaad61ba25e3752022b66f4bac2b137d405560 (patch) | |
tree | 08328cb9152fddefdd2191583cb1b8ede31cff2c | |
parent | e089a8df8a1b6cba515f5dacf73b30ce510b41ae (diff) | |
download | qtquickcontrols-tizen-cdeaad61ba25e3752022b66f4bac2b137d405560.tar.gz qtquickcontrols-tizen-cdeaad61ba25e3752022b66f4bac2b137d405560.tar.bz2 qtquickcontrols-tizen-cdeaad61ba25e3752022b66f4bac2b137d405560.zip |
ToolBar added, view can be stylized
Change-Id: Iec62a0797c3ab0e40b20c80095b1a0099652111a
Reviewed-by: Tomasz Olszak <olszak.tomasz@gmail.com>
-rw-r--r-- | examples/twitter/content/TwitterView.qml | 25 | ||||
-rw-r--r-- | examples/twitter/main.qml | 12 | ||||
-rw-r--r-- | src/controls/ToolBar.qml | 41 | ||||
-rw-r--r-- | src/controls/View.qml | 114 | ||||
-rw-r--r-- | src/controls/controls.pro | 4 | ||||
-rw-r--r-- | src/controls/qmldir | 2 | ||||
-rw-r--r-- | src/styles/DefaultSettings.js | 26 | ||||
-rw-r--r-- | src/styles/Settings.qml | 47 | ||||
-rw-r--r-- | src/styles/TitleBarStyle.qml | 7 | ||||
-rw-r--r-- | src/styles/ToolBarButton.qml | 37 | ||||
-rw-r--r-- | src/styles/ToolBarStyle.qml | 53 | ||||
-rw-r--r-- | src/styles/ViewStyle.qml | 53 | ||||
-rw-r--r-- | src/styles/qmldir | 3 | ||||
-rw-r--r-- | src/styles/styles.pro | 5 |
14 files changed, 265 insertions, 164 deletions
diff --git a/examples/twitter/content/TwitterView.qml b/examples/twitter/content/TwitterView.qml index 71f6e0f..fda2740 100644 --- a/examples/twitter/content/TwitterView.qml +++ b/examples/twitter/content/TwitterView.qml @@ -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 } + } } diff --git a/examples/twitter/main.qml b/examples/twitter/main.qml index 62d9d82..33208f3 100644 --- a/examples/twitter/main.qml +++ b/examples/twitter/main.qml @@ -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 index 0000000..76be5e5 --- /dev/null +++ b/src/controls/ToolBar.qml @@ -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 + } +} diff --git a/src/controls/View.qml b/src/controls/View.qml index b9f80e5..8581527 100644 --- a/src/controls/View.qml +++ b/src/controls/View.qml @@ -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(); } } } diff --git a/src/controls/controls.pro b/src/controls/controls.pro index 4b9b26a..32e976e 100644 --- a/src/controls/controls.pro +++ b/src/controls/controls.pro @@ -10,7 +10,9 @@ QML_FILES += \ Popup.qml\ BusyIndicator.qml \ ScrollDecorator.qml \ - TitleBar.qml + TitleBar.qml \ + ToolBar.qml \ + View.qml CONFIG += force_independent diff --git a/src/controls/qmldir b/src/controls/qmldir index 23d9225..715a7f2 100644 --- a/src/controls/qmldir +++ b/src/controls/qmldir @@ -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 diff --git a/src/styles/DefaultSettings.js b/src/styles/DefaultSettings.js index b9714cb..1f77bb4 100644 --- a/src/styles/DefaultSettings.js +++ b/src/styles/DefaultSettings.js @@ -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 index 0c62f98..0000000 --- a/src/styles/Settings.qml +++ /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" - } -} diff --git a/src/styles/TitleBarStyle.qml b/src/styles/TitleBarStyle.qml index 7744bb0..285c5c1 100644 --- a/src/styles/TitleBarStyle.qml +++ b/src/styles/TitleBarStyle.qml @@ -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 index 0000000..913e2df --- /dev/null +++ b/src/styles/ToolBarButton.qml @@ -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 index 0000000..6a278ec --- /dev/null +++ b/src/styles/ToolBarStyle.qml @@ -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(); } + } + } +} diff --git a/src/styles/ViewStyle.qml b/src/styles/ViewStyle.qml index dda73ff..ab28667 100644 --- a/src/styles/ViewStyle.qml +++ b/src/styles/ViewStyle.qml @@ -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 + } } diff --git a/src/styles/qmldir b/src/styles/qmldir index 7a10cf7..5ef3f4a 100644 --- a/src/styles/qmldir +++ b/src/styles/qmldir @@ -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 diff --git a/src/styles/styles.pro b/src/styles/styles.pro index 4575fc6..a376828 100644 --- a/src/styles/styles.pro +++ b/src/styles/styles.pro @@ -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 += \ |