@@ -14,16 +14,101 @@
1414 * along with this program. If not, see <http://www.gnu.org/licenses/>.
1515*/
1616
17−import QtQuick 2.0
18−import Ubuntu.Components 0.1
17+import QtQuick 2.2
18+import Ubuntu.Components 1.1
19+import Ubuntu.Components.Themes 0.1
1920import "../Components"
2021
21−Rectangle {
22+import Ubuntu.Components.Themes.Ambiance 1.1 as Ambiance
23+
24+Item {
2225 id: root
23− color: "black"
2426
25− property string name: ""
26− property url image: ""
27+ property color backgroundColor: d.undefinedColor
28+ property color headerColor: d.undefinedColor
29+ property color footerColor: d.undefinedColor
30+ property alias imageSource: overlaidImage.source
31+ property url icon
32+ property alias title: header.title
33+ property alias showHeader: header.visible
34+
35+ Ambiance.Palette {
36+ id: ambiancePalette
37+ }
38+
39+ QtObject {
40+ id: d
41+
42+ // As specified in qtmir, it will set the color value to this for fields left undefined
43+ // This is also the default value of a color property in QML.
44+ readonly property color undefinedColor: "#00000000"
45+
46+ readonly property color defaultBackgroundColor: header.visible ? ambiancePalette.normal.background : "black"
47+
48+ // Splash screen that shows the application icon and splashTitle
49+ readonly property bool showIcon: overlaidImage.status == Image.Null && !root.showHeader
50+ }
51+
52+ StyledItem {
53+ id: styledItem
54+ anchors.fill: parent
55+
56+ // mimic API of toolkit's MainView component required by MainViewStyle
57+ property color backgroundColor: Qt.colorEqual(root.backgroundColor, d.undefinedColor) ? d.defaultBackgroundColor
58+ : root.backgroundColor
59+ property color headerColor: Qt.colorEqual(root.headerColor, d.undefinedColor) ? styledItem.backgroundColor
60+ : root.headerColor
61+ property color footerColor: Qt.colorEqual(root.footerColor, d.undefinedColor) ? styledItem.backgroundColor
62+ : root.footerColor
63+
64+ // FIXME: fake a Theme object as to expose the Palette corresponding to the backgroundColor (see MainViewStyle.qml)
65+ property var theme: QtObject {
66+ property string name
67+ property Palette palette: Qt.createQmlObject("import QtQuick 2.2;\
68+ import Ubuntu.Components.Themes.%1 1.1;\
69+ Palette {}".arg(styledItem.theme.name),
70+ styledItem, "dynamicPalette");
71+ }
72+
73+ // FIXME: should instead use future toolkit API:
74+ // style: theme.createStyleComponent("MainViewStyle.qml", styledItem)
75+ style: Component { MainViewStyle {theme: styledItem.theme} }
76+ }
77+
78+ StyledItem {
79+ id: header
80+ anchors {
81+ left: parent.left
82+ right: parent.right
83+ }
84+ visible: false
85+
86+ // mimic API of toolkit's AppHeader component required by PageHeadStyle
87+ property Item pageStack
88+ property Item contents
89+ property string title
90+ property var tabsModel
91+ property var config: QtObject {
92+ property color foregroundColor: styledItem.theme.palette.selected.backgroundText
93+ property var sections: QtObject {}
94+ }
95+
96+ // FIXME: should instead use future toolkit API:
97+ // style: theme.createStyleComponent("PageHeadStyle.qml", header)
98+ style: Component { PageHeadStyle {theme: styledItem.theme} }
99+ }
100+
101+ Image {
102+ id: overlaidImage
103+ anchors.centerIn: parent
104+ anchors.verticalCenterOffset: header.visible ? header.height / 2 : 0
105+ sourceSize {
106+ width: root.width
107+ height: root.height
108+ }
109+ asynchronous: true
110+ cache: false
111+ }
27112
28113 UbuntuShape {
29114 id: iconShape
@@ -33,6 +118,8 @@ Rectangle {
33118 width: units.gu(8)
34119 height: units.gu(7.5)
35120
121+ visible: d.showIcon
122+
36123 radius: "medium"
37124 borderSource: "none"
38125
@@ -40,24 +127,31 @@ Rectangle {
40127 id: iconImage
41128 sourceSize.width: iconShape.width
42129 sourceSize.height: iconShape.height
43− source: root.image
130+ source: d.showIcon ? root.icon : ""
44131 fillMode: Image.PreserveAspectCrop
45132 }
46133 }
47134
48135 Label {
49− text: root.name
136+ text: root.title
50137 anchors.horizontalCenter: parent.horizontalCenter
51138 anchors.top: iconShape.bottom
52139 anchors.topMargin: units.gu(2)
53140 fontSize: "large"
141+
142+ color: styledItem.theme.palette.selected.backgroundText
143+ visible: d.showIcon
54144 }
55145
56− WaitingDots {
57− visible: parent.visible
58− anchors.horizontalCenter: parent.horizontalCenter
59− anchors.bottom: parent.bottom
60− anchors.bottomMargin: units.gu(12)
146+ ActivityIndicator {
147+ anchors.centerIn: header.visible ? parent : undefined
148+ anchors.verticalCenterOffset: header.visible ? header.height / 2 : 0
149+
150+ anchors.horizontalCenter: header.visible ? undefined : parent.horizontalCenter
151+ anchors.bottom: header.visible ? undefined : parent.bottom
152+ anchors.bottomMargin: header.visible ? 0 : units.gu(12)
153+
154+ running: true
61155 }
62156
63157 MouseArea {