Merge pull request #9 from faenil/page

Add Page component and update ApplicationWindow and examples gallery

examples/touch/content/ButtonPage.qml

@@ -43,54 +43,10 @@ import QtQuick.Controls 1.0 //needed for the Stack attached property
 import QtQuick.Controls.Nemo 1.0
 import QtQuick.Controls.Styles.Nemo 1.0
 
-Rectangle {
+Page {
     id: root
-    width: parent.width
-    height: parent.height
 
-    color: "black"
-    ToolBar {
-        id: toolbar
-        anchors.top: parent.top
-        Rectangle {
-            id: backButton
-            width: opacity ? 60 : 0
-            anchors.left: parent.left
-            anchors.leftMargin: 20
-            opacity: (root.Stack.view && (root.Stack.view.depth > 1)) ? 1 : 0
-            anchors.verticalCenter: parent.verticalCenter
-            antialiasing: true
-            height: 60
-            radius: 4
-            color: backmouse.pressed ? "#222" : "transparent"
-            Behavior on opacity { NumberAnimation{} }
-            Image {
-                anchors.verticalCenter: parent.verticalCenter
-                source: "../images/navigation_previous_item.png"
-            }
-            MouseArea {
-                id: backmouse
-                anchors.fill: parent
-                anchors.margins: -10
-                onClicked: root.Stack.view.pop()
-            }
-        }
-
-        Text {
-            font.pixelSize: 42
-            Behavior on x { NumberAnimation { easing.type: Easing.OutCubic } }
-            x: backButton.x + backButton.width + 20
-            anchors.verticalCenter: parent.verticalCenter
-            color: "white"
-            text: "Buttons"
-        }
-    }
-
-    Item {
-        anchors.top: toolbar.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
+    tools: ToolBarLayoutExample { title: "Buttons" }
 
     Column {
         spacing: 40
@@ -117,5 +73,5 @@ Rectangle {
             onClicked: if (stackView) stackView.pop()
         }
     }
-    }
+
 }

examples/touch/content/LiveCoding.qml

@@ -22,60 +22,16 @@ import QtQuick.Controls 1.0 //needed for the Stack attached property
 import QtQuick.Controls.Nemo 1.0
 import QtQuick.Layouts 1.0
 
-Rectangle {
+Page {
     id: root
-    width: parent.width
-    height: parent.height
 
-    color: "black"
     property var oldItem
     property var newItem
 
-    ToolBar {
-        id: toolbar
-        anchors.top: parent.top
-        Rectangle {
-            id: backButton
-            width: opacity ? 60 : 0
-            anchors.left: parent.left
-            anchors.leftMargin: 20
-            opacity: (root.Stack.view && (root.Stack.view.depth > 1)) ? 1 : 0
-            anchors.verticalCenter: parent.verticalCenter
-            antialiasing: true
-            height: 60
-            radius: 4
-            color: backmouse.pressed ? "#222" : "transparent"
-
-            Behavior on opacity { NumberAnimation{} }
-
-            Image {
-                anchors.verticalCenter: parent.verticalCenter
-                source: "../images/navigation_previous_item.png"
-            }
-
-            MouseArea {
-                id: backmouse
-                anchors.fill: parent
-                anchors.margins: -10
-                onClicked: root.Stack.view.pop()
-            }
-        }
-
-        Text {
-            font.pixelSize: 42
-            Behavior on x { NumberAnimation { easing.type: Easing.OutCubic } }
-            x: backButton.x + backButton.width + 20
-            anchors.verticalCenter: parent.verticalCenter
-            color: "white"
-            text: "Live Coding Arena"
-        }
-    }
+    tools: ToolBarLayoutExample { title: "Live Coding Arena" }
 
     SplitView {
-        anchors.top: toolbar.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
+        anchors.fill: parent
 
         //If we don't wrap ColumnLayout in an Item, the split view doesn't work :/
         Item {

examples/touch/content/ProgressBarPage.qml

@@ -38,21 +38,14 @@
 **
 ****************************************************************************/
 
-
-
-
-
 import QtQuick 2.1
 import QtQuick.Controls 1.0 //needed for the Stack attached property
 import QtQuick.Controls.Nemo 1.0
 import QtQuick.Controls.Styles.Nemo 1.0
 
-Rectangle {
+Page {
     id: root
-    width: parent.width
-    height: parent.height
 
-    color: "black"
     property real progress: 0
     SequentialAnimation on progress {
         loops: Animation.Infinite
@@ -69,48 +62,7 @@ Rectangle {
         }
     }
 
-    ToolBar {
-        id: toolbar
-        anchors.top: parent.top
-        Rectangle {
-            id: backButton
-            width: opacity ? 60 : 0
-            anchors.left: parent.left
-            anchors.leftMargin: 20
-            opacity: (root.Stack.view && (root.Stack.view.depth > 1)) ? 1 : 0
-            anchors.verticalCenter: parent.verticalCenter
-            antialiasing: true
-            height: 60
-            radius: 4
-            color: backmouse.pressed ? "#222" : "transparent"
-            Behavior on opacity { NumberAnimation{} }
-            Image {
-                anchors.verticalCenter: parent.verticalCenter
-                source: "../images/navigation_previous_item.png"
-            }
-            MouseArea {
-                id: backmouse
-                anchors.fill: parent
-                anchors.margins: -10
-                onClicked: root.Stack.view.pop()
-            }
-        }
-
-        Text {
-            font.pixelSize: 42
-            Behavior on x { NumberAnimation { easing.type: Easing.OutCubic } }
-            x: backButton.x + backButton.width + 20
-            anchors.verticalCenter: parent.verticalCenter
-            color: "white"
-            text: "Progress Bars"
-        }
-    }
-
-    Item {
-        anchors.top: toolbar.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
+    tools: ToolBarLayoutExample { title: "Progress Bars" }
 
     Column {
         spacing: 40
@@ -135,7 +87,6 @@ Rectangle {
             width: 400
         }
     }
-    }
 
     Component {
         id: touchStyle

examples/touch/content/SliderPage.qml

@@ -38,63 +38,15 @@
 **
 ****************************************************************************/
 
-
-
-
-
 import QtQuick 2.1
 import QtQuick.Controls 1.0 //needed for the Stack attached property
 import QtQuick.Controls.Nemo 1.0
 import QtQuick.Controls.Styles.Nemo 1.0
 
-Rectangle {
+Page {
     id: root
-    width: parent.width
-    height: parent.height
 
-    color: "black"
-    ToolBar {
-        id: toolbar
-        anchors.top: parent.top
-        Rectangle {
-            id: backButton
-            width: opacity ? 60 : 0
-            anchors.left: parent.left
-            anchors.leftMargin: 20
-            opacity: (root.Stack.view && (root.Stack.view.depth > 1)) ? 1 : 0
-            anchors.verticalCenter: parent.verticalCenter
-            antialiasing: true
-            height: 60
-            radius: 4
-            color: backmouse.pressed ? "#222" : "transparent"
-            Behavior on opacity { NumberAnimation{} }
-            Image {
-                anchors.verticalCenter: parent.verticalCenter
-                source: "../images/navigation_previous_item.png"
-            }
-            MouseArea {
-                id: backmouse
-                anchors.fill: parent
-                anchors.margins: -10
-                onClicked: root.Stack.view.pop()
-            }
-        }
-
-        Text {
-            font.pixelSize: 42
-            Behavior on x { NumberAnimation { easing.type: Easing.OutCubic } }
-            x: backButton.x + backButton.width + 20
-            anchors.verticalCenter: parent.verticalCenter
-            color: "white"
-            text: "Sliders"
-        }
-    }
-
-    Item {
-        anchors.top: toolbar.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
+    tools: ToolBarLayoutExample { title: "Sliders" }
 
     Column {
         spacing: 12
@@ -116,7 +68,6 @@ Rectangle {
             value: 1.0
         }
     }
-    }
 
     Component {
         id: touchStyle

examples/touch/content/TabBarPage.qml

@@ -38,63 +38,19 @@
 **
 ****************************************************************************/
 
-
-
-
-
 import QtQuick 2.1
 import QtQuick.Controls 1.0 //needed for the Stack attached property
 import QtQuick.Controls.Nemo 1.0
 import QtQuick.Controls.Styles.Nemo 1.0
 
-Rectangle {
+Page {
     id: root
-    width: parent.width
-    height: parent.height
-
-    color: "black"
-    ToolBar {
-        id: toolbar
-        anchors.top: parent.top
-        Rectangle {
-            id: backButton
-            width: opacity ? 60 : 0
-            anchors.left: parent.left
-            anchors.leftMargin: 20
-            opacity: (root.Stack.view && (root.Stack.view.depth > 1)) ? 1 : 0
-            anchors.verticalCenter: parent.verticalCenter
-            antialiasing: true
-            height: 60
-            radius: 4
-            color: backmouse.pressed ? "#222" : "transparent"
-            Behavior on opacity { NumberAnimation{} }
-            Image {
-                anchors.verticalCenter: parent.verticalCenter
-                source: "../images/navigation_previous_item.png"
-            }
-            MouseArea {
-                id: backmouse
-                anchors.fill: parent
-                anchors.margins: -10
-                onClicked: root.Stack.view.pop()
-            }
-        }
 
-        Text {
-            font.pixelSize: 42
-            Behavior on x { NumberAnimation { easing.type: Easing.OutCubic } }
-            x: backButton.x + backButton.width + 20
-            anchors.verticalCenter: parent.verticalCenter
-            color: "white"
-            text: "Tab Bars"
-        }
-    }
+    tools: ToolBarLayoutExample { title: "Tab bars" }
 
     TabView {
-        anchors.top: toolbar.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
+        anchors.fill: parent
+
         style: touchStyle
         Tab {
             title: "Buttons"

examples/touch/content/TextInputPage.qml

@@ -38,21 +38,14 @@
 **
 ****************************************************************************/
 
-
-
-
-
 import QtQuick 2.1
 import QtQuick.Controls 1.0 //needed for the Stack attached property
 import QtQuick.Controls.Nemo 1.0
 import QtQuick.Controls.Styles.Nemo 1.0
 
-Rectangle {
+Page {
     id: root
-    width: parent.width
-    height: parent.height
 
-    color: "black"
     property real progress: 0
     SequentialAnimation on progress {
         loops: Animation.Infinite
@@ -69,48 +62,7 @@ Rectangle {
         }
     }
 
-    ToolBar {
-        id: toolbar
-        anchors.top: parent.top
-        Rectangle {
-            id: backButton
-            width: opacity ? 60 : 0
-            anchors.left: parent.left
-            anchors.leftMargin: 20
-            opacity: (root.Stack.view && (root.Stack.view.depth > 1)) ? 1 : 0
-            anchors.verticalCenter: parent.verticalCenter
-            antialiasing: true
-            height: 60
-            radius: 4
-            color: backmouse.pressed ? "#222" : "transparent"
-            Behavior on opacity { NumberAnimation{} }
-            Image {
-                anchors.verticalCenter: parent.verticalCenter
-                source: "../images/navigation_previous_item.png"
-            }
-            MouseArea {
-                id: backmouse
-                anchors.fill: parent
-                anchors.margins: -10
-                onClicked: root.Stack.view.pop()
-            }
-        }
-
-        Text {
-            font.pixelSize: 42
-            Behavior on x { NumberAnimation { easing.type: Easing.OutCubic}  }
-            x: backButton.x + backButton.width + 20
-            anchors.verticalCenter: parent.verticalCenter
-            color: "white"
-            text: "Text Input"
-        }
-    }
-
-    Item {
-        anchors.top: toolbar.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
+    tools: ToolBarLayoutExample { title: "Text input" }
 
     Column {
         spacing: 40
@@ -148,7 +100,7 @@ Rectangle {
             readOnly: true
         }
     }
-    }
+
 
     Component {
         id: touchStyle

examples/touch/content/ToolBarLayoutExample.qml

+import QtQuick 2.0
+import QtQuick.Controls.Nemo 1.0
+
+Item {
+    id: toolsLayoutItem
+
+    anchors.fill: parent
+
+    property string title: ""
+    property StackView pageStack: findStackView(toolsLayoutItem)
+
+    //XXX: TEMPORARY CODE, MIGHT CAUSE LAG WHEN PUSHING A PAGE ON THE STACK
+    function findStackView(startingItem) {
+        var myStack = startingItem
+        while (myStack) {
+            if (myStack.hasOwnProperty("currentItem") && myStack.hasOwnProperty("initialItem"))
+                    return myStack
+            myStack = myStack.parent
+        }
+        return null
+    }
+
+    Rectangle {
+        id: backButton
+        width: opacity ? 60 : 0
+        anchors.left: parent.left
+        anchors.leftMargin: 20
+        //check if Stack.view has already been initialized as well
+        opacity: (pageStack && (pageStack.depth > 1)) ? 1 : 0
+        anchors.verticalCenter: parent.verticalCenter
+        antialiasing: true
+        height: 60
+        radius: 4
+        color: backmouse.pressed ? "#222" : "transparent"
+        Behavior on opacity { NumberAnimation{} }
+        Image {
+            anchors.verticalCenter: parent.verticalCenter
+            source: "../images/navigation_previous_item.png"
+        }
+        MouseArea {
+            id: backmouse
+            anchors.fill: parent
+            anchors.margins: -10
+            onClicked: pageStack.pop()
+        }
+    }
+
+    Text {
+        font.pixelSize: 42
+        Behavior on x { NumberAnimation { easing.type: Easing.OutCubic } }
+        x: backButton.x + backButton.width + 20
+        anchors.verticalCenter: parent.verticalCenter
+        color: "white"
+        text: parent.title
+    }
+}

examples/touch/main.qml

@@ -90,51 +90,14 @@ ApplicationWindow {
     }
 
 
-    initialPage: Rectangle {
+    initialPage: Page {
         id: pageItem
-        width: parent.width
-        height: parent.height
 
-        color: "black"
-        ToolBar {
-            id: toolbar
-            anchors.top: parent.top
-            Rectangle {
-                id: backButton
-                width: opacity ? 60 : 0
-                anchors.left: parent.left
-                anchors.leftMargin: 20
-                opacity: pageItem.Stack.view.depth > 1 ? 1 : 0
-                anchors.verticalCenter: parent.verticalCenter
-                antialiasing: true
-                height: 60
-                radius: 4
-                color: backmouse.pressed ? "#222" : "transparent"
-                Behavior on opacity { NumberAnimation{} }
-                Image {
-                    anchors.verticalCenter: parent.verticalCenter
-                    source: "images/navigation_previous_item.png"
-                }
-                MouseArea {
-                    id: backmouse
-                    anchors.fill: parent
-                    anchors.margins: -10
-                    onClicked: pageItem.Stack.view.pop()
-                }
-            }
+        tools: ToolBarLayoutExample { title: "Touch gallery" }
 
-            Text {
-                font.pixelSize: 42
-                Behavior on x { NumberAnimation{ easing.type: Easing.OutCubic} }
-                x: backButton.x + backButton.width + 20
-                anchors.verticalCenter: parent.verticalCenter
-                color: "white"
-                text: "Widget Gallery"
-            }
-        }
         ListView {
             model: pageModel
-            anchors { top: toolbar.bottom; left: parent.left; right: parent.right; bottom: parent.bottom }
+            anchors.fill: parent
             clip: true
             delegate: AndroidDelegate {
                 text: title
@@ -142,8 +105,6 @@ ApplicationWindow {
             }
         }
     }
-
-
 }
 
 

examples/touch/resources.qrc

@@ -16,5 +16,6 @@
         <file>images/textinput.png</file>
         <file>images/toolbar.png</file>
         <file>content/LiveCoding.qml</file>
+        <file>content/ToolBarLayoutExample.qml</file>
     </qresource>
 </RCC>

examples/touch/touch.pro

@@ -17,7 +17,8 @@ OTHER_FILES += \
     content/SliderPage.qml \
     content/TabBarPage.qml \
     content/TextInputPage.qml \
-    content/LiveCoding.qml
+    content/LiveCoding.qml \
+    content/ToolBarLayoutExample.qml
 
 RESOURCES += \
     resources.qrc

src/controls/ApplicationWindow.qml

@@ -50,8 +50,24 @@ NemoWindow {
         orientationConstraintsChanged()
     }
 
-    function orientationConstraintsChanged() {
-        if (!isOrientationAllowed(contentArea.filteredOrientation)) {
+    Screen.onOrientationChanged: {
+        if (root.isOrientationAllowed(Screen.orientation)) {
+            contentArea.filteredOrientation = Screen.orientation
+        }
+    }
+
+    function orientationConstraintsChanged()
+    {
+        //if the current orientation is not allowed anymore, fallback to an allowed one
+        //stackInitialized check prevents setting an orientation before the stackview
+        //(but more importantly the initialItem of the stack) has been created
+        if (stackView.stackInitialized && !isOrientationAllowed(contentArea.filteredOrientation)) {
+            fallbackToAnAllowedOrientation()
+        }
+    }
+
+    function fallbackToAnAllowedOrientation()
+    {
         var orientations = [Qt.PortraitOrientation, Qt.LandscapeOrientation,
                             Qt.InvertedPortraitOrientation, Qt.InvertedLandscapeOrientation]
 
@@ -64,19 +80,19 @@ NemoWindow {
             }
         }
     }
-    }
 
     // TODO: We're assuming default fb orientation of the hw is portrait
     // Soon a compositor fix will be published that will make that consistent on all hw
     // i.e. Screen.width will be width of portrait orientation on all hardware!
     // (at the moment, Screen.width is the width of the screen in landscape mode in N9/N950, while on
     // other hardware it could be width of the screen in portrait mode)
-    property bool __transpose: (rotationToTrasposeToPortrait() % 180) != 0
+    property bool __transpose: (rotationToTransposeToPortrait() % 180) != 0
 
     // XXX: This is to account for HW screen rotation
     // Sooner or later we will get rid of this as the compositor will
     // do that for us
-    function rotationToTrasposeToPortrait() {
+    function rotationToTransposeToPortrait()
+    {
         switch (Screen.primaryOrientation) {
         case Qt.PortraitOrientation:
             return 0
@@ -89,8 +105,8 @@ NemoWindow {
         }
     }
 
-    function isOrientationAllowed(orientationToBeChecked) {
-
+    function isOrientationAllowed(orientationToBeChecked)
+    {
         var allowedOrientations = root.allowedOrientations
 
         //use Page's allowed orientations if available
@@ -98,13 +114,10 @@ NemoWindow {
             allowedOrientations = stackView.currentItem.allowedOrientations
         }
 
-        //this shouldn't happen, as orientation 0 is not part of Qt ENUM
-        if (!orientationToBeChecked) {
-            console.log("Hi! I'm a bug, report me to faenil (trying to set invalid orientation)")
-            return false
-        }
         //check if orientation is part of the allowed orientations mask
         //bit-by-bit AND
+        //NOTE: this also returns false if orientationToBeChecked == 0,
+        //so we don't need additional checks for that
         return (orientationToBeChecked & allowedOrientations)
     }
 
@@ -116,7 +129,7 @@ NemoWindow {
         anchors.centerIn: parent
         width: __transpose ? Screen.height : Screen.width
         height: __transpose ? Screen.width : Screen.height
-        rotation: rotationToTrasposeToPortrait()
+        rotation: rotationToTransposeToPortrait()
 
         //This is the rotating item
         Item {
@@ -131,33 +144,52 @@ NemoWindow {
             property alias defaultOrientationTransition: orientationState.defaultTransition
 
             // This is used for states switching
-            property int filteredOrientation: Qt.PortraitOrientation
+            property int filteredOrientation
 
             //this is the reliable value which changes during the orientation transition
-            //the default value is set to Qt.PortraitOrientation
-            property int uiOrientation: Qt.PortraitOrientation
+            property int uiOrientation
 
             property bool orientationTransitionRunning: false
 
-            Screen.onOrientationChanged: {
-                if (root.isOrientationAllowed(Screen.orientation)) filteredOrientation = Screen.orientation
-            }
-
             StackView {
                 id: stackView
                 width: parent.width
                 height: parent.height
 
-                //this has to be a function, property won't work inside onCurrentItemChanged, as currentItem in that slot will be outdated
-                //(i.e. not yet updated to the new value)
-                function _isCurrentItemNemoPage() { return currentItem && currentItem.hasOwnProperty("__isNemoPage") }
+                Component.onCompleted: stackInitialized = true
+                //IMPORTANT: this property makes it so that at app startup we wait for the initial page to be pushed
+                //before determining the initial ui orientation (see the states logic below)
+                //If we don't use this, the orientation will change first time based on NemoWindow's allowedOrientation,
+                //and the second time based on the allowedOrientations of the initialItem of the stack.
+                //Using this property avoids that, and make the UI directly start in the correct orientation
+                //TODO: find a cleaner way to do it (if there's any)
+                property bool stackInitialized: false
+                onStackInitializedChanged: if (stackInitialized) {
+                                               //set Screen.orientation as default, if allowed
+                                               if (root.isOrientationAllowed(Screen.orientation)) {
+                                                   contentArea.filteredOrientation = Screen.orientation
+                                               } else {
+                                                   //let the window handle it, it will fall back to an allowed orientation
+                                                   root.fallbackToAnAllowedOrientation()
+                                               }
+                                           }
+
+                //this has to be a function, property won't work inside onCurrentItemChanged, as the property binding hasn't been updated yet there
+                //(hence we'd be using the old currentItem)
+                function _isCurrentItemNemoPage()
+                {
+                    return currentItem && currentItem.hasOwnProperty("__isNemoPage")
+                }
+
+                //update orientation constraints when a Page is pushed/popped
+                onCurrentItemChanged: if (_isCurrentItemNemoPage() && currentItem.allowedOrientations)
+                                          root.orientationConstraintsChanged()
 
                 //This properties are accessible for free by the Page via Stack.view.<property>
                 readonly property int orientation: contentArea.uiOrientation
                 property alias allowedOrientations: root.allowedOrientations
                 property alias orientationTransitionRunning: contentArea.orientationTransitionRunning
 
-                //TODO: CHECK IF THE TARGET IS ACTUALLY CHANGING (i.e. function works like a binding)
                 Connections {
                     id: pageConn
                     target: stackView._isCurrentItemNemoPage() ? stackView.currentItem : null
@@ -173,11 +205,11 @@ NemoWindow {
                 states: [
                     State {
                         name: 'Unanimated'
-                        when: !stackView
+                        when: !stackView || !stackInitialized
                     },
                     State {
                         name: 'Portrait'
-                        when: contentArea.filteredOrientation === Qt.PortraitOrientation
+                        when: contentArea.filteredOrientation === Qt.PortraitOrientation// && stackInitialized
                         PropertyChanges {
                             target: contentArea
                             restoreEntryValues: false
@@ -189,7 +221,7 @@ NemoWindow {
                     },
                     State {
                         name: 'Landscape'
-                        when: contentArea.filteredOrientation === Qt.LandscapeOrientation
+                        when: contentArea.filteredOrientation === Qt.LandscapeOrientation //&& stackInitialized
                         PropertyChanges {
                             target: contentArea
                             restoreEntryValues: false
@@ -201,7 +233,7 @@ NemoWindow {
                     },
                     State {
                         name: 'PortraitInverted'
-                        when: contentArea.filteredOrientation === Qt.InvertedPortraitOrientation
+                        when: contentArea.filteredOrientation === Qt.InvertedPortraitOrientation //&& stackInitialized
                         PropertyChanges {
                             target: contentArea
                             restoreEntryValues: false
@@ -213,7 +245,7 @@ NemoWindow {
                     },
                     State {
                         name: 'LandscapeInverted'
-                        when: contentArea.filteredOrientation === Qt.InvertedLandscapeOrientation
+                        when: contentArea.filteredOrientation === Qt.InvertedLandscapeOrientation //&& stackInitialized
                         PropertyChanges {
                             target: contentArea
                             restoreEntryValues: false
@@ -265,9 +297,6 @@ NemoWindow {
                 }
             }
         }
-
-
     }
-
 }
 

src/controls/Page.qml

+/****************************************************************************************
+**
+** Copyright (C) 2013 Andrea Bernabei <and.bernabei@gmail.com>
+** All rights reserved.
+**
+** You may use this file under the terms of 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 the author 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 HOLDERS 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.
+**
+****************************************************************************************/
+
+import QtQuick 2.1
+import QtQuick.Controls 1.0 // Needed for things like Stack attached properties
+import QtQuick.Controls.Nemo 1.0
+import QtQuick.Controls.Styles.Nemo 1.0
+import QtQuick.Window 2.0
+
+NemoPage {
+    id: page
+
+    width: parent.width
+    height: parent.height
+
+    property alias color: background.color
+    property int status: pageStack ? Stack.status : Stack.Inactive
+    property alias tools: toolBar.data
+    property alias __dimmer: dimmer
+    readonly property StackView pageStack: Stack.view
+
+    //TODO: ADD TOOLBARLAYOUT COMPONENT SO THAT USER WILL USE tools: ToolbarLayout { .... }
+    //instead of tools: [ ... , ... ]
+
+    //Children of "page" will be automatically reparented to "content"
+    default  property alias __content: content.data
+
+    property int orientation
+    //This keeps orientation synced to that of Nemo's StackView
+    //If the page isn't pushed on Nemo's StackView, the orientation value will be unreliable
+    Binding on orientation {
+        when: pageStack && pageStack.hasOwnProperty("orientation")
+        value: if (pageStack) pageStack.orientation //"if (pageStack)" is just needed to silence a TypeError at page initalization
+    }
+
+    //TODO: alias these properties with those of the applicationWindow
+    //property alias orientationTransitions
+    //property alias defaultOrientationTransition
+    readonly property bool orientationTransitionRunning: pageStack ? pageStack.orientationTransitionRunning : false
+
+    readonly property bool isPortrait: (orientation === Qt.PortraitOrientation || orientation === Qt.InvertedPortraitOrientation)
+    readonly property bool isLandscape: (orientation === Qt.LandscapeOrientation || orientation === Qt.InvertedLandscapeOrientation)
+
+    property bool __isNemoPage
+
+    Rectangle {
+        id: background
+        anchors.fill: parent
+        color: Theme.page.background
+    }
+
+    ToolBar {
+        id: toolBar
+    }
+
+    Item {
+        id: content
+        anchors.bottom: parent.bottom
+        anchors.top: toolBar.bottom
+        anchors.right: parent.right
+        anchors.left: parent.left
+    }
+
+    Rectangle {
+        id: dimmer
+
+        height: Theme.page.dimmer.height
+
+        anchors.top: toolBar.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        gradient: Gradient {
+            GradientStop { position: Theme.page.dimmer.startPosition; color: Theme.page.dimmer.startColor }
+            GradientStop { position: Theme.page.dimmer.endPosition; color: Theme.page.dimmer.endColor }
+        }
+    }
+}

src/controls/controls.pro

@@ -8,7 +8,8 @@ THEME_IMPORT_PATH = QtQuick/Controls/Styles/Nemo/themes
 # Added/Reimplemented Controls
 QML_FILES += \
     Button.qml \
-    ApplicationWindow.qml
+    ApplicationWindow.qml \
+    Page.qml
 
 OTHER_FILES += qmldir \
     $$QML_FILES
@@ -16,12 +17,14 @@ OTHER_FILES += qmldir \
 HEADERS += \
     qquicknemocontrolsextensionplugin.h \
     hacks.h \
-    nemowindow.h
+    nemowindow.h \
+    nemopage.h
 
 SOURCES += \
     qquicknemocontrolsextensionplugin.cpp \
     hacks.cpp \
-    nemowindow.cpp
+    nemowindow.cpp \
+    nemopage.cpp
 
 target.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH
 

src/controls/hacks.cpp

@@ -24,3 +24,13 @@ Hacks::Hacks(QQmlEngine *engine, QObject *parent) :
 {
     m_engine = engine;
 }
+
+bool Hacks::isOrientationMaskValid(Qt::ScreenOrientations orientations) {
+    //README: This is needed because otherwise you could assign it
+    //things like (Qt.PortraitOrientation | 444) from QML,
+    //and it would still appear as a valid Qt::ScreenOrientations in c++
+    Qt::ScreenOrientations max = (Qt::PortraitOrientation | Qt::LandscapeOrientation
+            | Qt::InvertedPortraitOrientation | Qt::InvertedLandscapeOrientation);
+
+    return (orientations <= max && orientations != 0);
+}

src/controls/hacks.h

@@ -22,6 +22,7 @@
 
 #include <QObject>
 #include <QQmlEngine>
+#include <qnamespace.h>
 
 // NEMOHACKS
 // A UTILITY CLASS WHICH EXPOSES HACKS TO QML via NemoHacks identifier
@@ -32,6 +33,7 @@ class Hacks : public QObject
     Q_OBJECT
 public:
     explicit Hacks(QQmlEngine* engine, QObject *parent = 0);
+    static bool isOrientationMaskValid(Qt::ScreenOrientations orientations);
 
 signals:
     

src/controls/nemopage.cpp

+#include "nemopage.h"
+#include "hacks.h"
+
+NemoPage::NemoPage(QQuickItem *parent) :
+    QQuickItem(parent)
+{
+}
+
+Qt::ScreenOrientations NemoPage::allowedOrientations() const
+{
+    return m_allowedOrientations;
+}
+
+void NemoPage::setAllowedOrientations(Qt::ScreenOrientations allowed)
+{
+    //This way no invalid values can get assigned to allowedOrientations
+    if (m_allowedOrientations != allowed && Hacks::isOrientationMaskValid(allowed)) {
+        m_allowedOrientations = allowed;
+        emit allowedOrientationsChanged();
+    }
+}

src/controls/nemopage.h

+#ifndef NEMOPAGE_H
+#define NEMOPAGE_H
+
+#include <QQuickItem>
+
+class NemoPage : public QQuickItem
+{
+    Q_OBJECT
+    Q_PROPERTY(Qt::ScreenOrientations allowedOrientations READ allowedOrientations WRITE setAllowedOrientations NOTIFY allowedOrientationsChanged)
+
+public:
+    explicit NemoPage(QQuickItem *parent = 0);
+    
+    Qt::ScreenOrientations allowedOrientations() const;
+    void setAllowedOrientations(Qt::ScreenOrientations allowed);
+
+signals:
+    void allowedOrientationsChanged();
+
+public slots:
+
+private:
+    Qt::ScreenOrientations m_allowedOrientations;
+    
+};
+
+#endif // NEMOPAGE_H

src/controls/nemowindow.cpp

@@ -19,24 +19,22 @@
 
 #include "nemowindow.h"
 #include <QDebug>
+#include "hacks.h"
+
 NemoWindow::NemoWindow(QWindow *parent) :
     QQuickWindow(parent)
 {
 }
 
-Qt::ScreenOrientations NemoWindow::allowedOrientations() const {
+Qt::ScreenOrientations NemoWindow::allowedOrientations() const
+{
     return m_allowedOrientations;
 }
 
-void NemoWindow::setAllowedOrientations(Qt::ScreenOrientations allowed) {
-
+void NemoWindow::setAllowedOrientations(Qt::ScreenOrientations allowed)
+{
     //This way no invalid values can get assigned to allowedOrientations
-    //README: This is needed because otherwise you could assign it
-    //things like (Qt.PortraitOrientation | 444) from QML
-    Qt::ScreenOrientations max = (Qt::PortraitOrientation | Qt::LandscapeOrientation
-            | Qt::InvertedPortraitOrientation | Qt::InvertedLandscapeOrientation);
-
-    if (m_allowedOrientations != allowed && allowed <= max) {
+    if (m_allowedOrientations != allowed && Hacks::isOrientationMaskValid(allowed)) {
         m_allowedOrientations = allowed;
         emit allowedOrientationsChanged();
     }

src/controls/nemowindow.h

@@ -25,7 +25,6 @@
 class NemoWindow : public QQuickWindow
 {
     Q_OBJECT
-    Q_ENUMS(Orientation)
     Q_PROPERTY(Qt::ScreenOrientations allowedOrientations READ allowedOrientations WRITE setAllowedOrientations NOTIFY allowedOrientationsChanged)
 public:
     explicit NemoWindow(QWindow *parent = 0);

src/controls/qmldir

@@ -10,6 +10,7 @@ plugin nemocontrolsplugin
 
 Button 1.0 Button.qml
 ApplicationWindow 1.0 ApplicationWindow.qml
+Page 1.0 Page.qml
 
 # MIRRORED CONTROLS: 
 # These are the controls that we take directly from official QQC.

src/controls/qquicknemocontrolsextensionplugin.cpp

@@ -22,6 +22,7 @@
 #include <QtQml>
 #include "hacks.h"
 #include "nemowindow.h"
+#include "nemopage.h"
 
 QQuickNemoControlsExtensionPlugin::QQuickNemoControlsExtensionPlugin(QObject *parent) :
     QQmlExtensionPlugin(parent)
@@ -39,6 +40,7 @@ void QQuickNemoControlsExtensionPlugin::registerTypes(const char *uri)
     Q_ASSERT(uri == QLatin1String("QtQuick.Controls.Nemo"));
     qmlRegisterSingletonType<QObject>(uri, 1, 0, "NemoHacks", nemo_hacks_singletontype_provider);
     qmlRegisterType<NemoWindow>(uri, 1, 0, "NemoWindow");
+    qmlRegisterType<NemoPage>(uri, 1, 0, "NemoPage");
 }
 
 void QQuickNemoControlsExtensionPlugin::initializeEngine(QQmlEngine *engine, const char *uri)

src/styles/autogenerated/nemotheme.cpp

@@ -44,6 +44,7 @@ NemoTheme::NemoTheme(QObject *parent)
     , m_textField(new NemoThemeTextField(this))
     , m_toolBar(new NemoThemeToolBar(this))
     , m_window(new NemoThemeWindow(this))
+    , m_page(new NemoThemePage(this))
 {
     loadFromFile(GLACIER_THEME);
     int id = QFontDatabase::addApplicationFont("/usr/share/fonts/google-opensans/OpenSans-Regular.ttf");
@@ -111,6 +112,11 @@ NemoThemeWindow * NemoTheme::window() const
     return m_window;
 }
 
+NemoThemePage * NemoTheme::page() const
+{
+    return m_page;
+}
+
 QString NemoTheme::fontFamily() const
 {
     return m_fontFamily;
@@ -321,4 +327,20 @@ void NemoTheme::loadFromFile(const QString &fileName)
     // Setting properties for window
     QJsonObject stylesWindow = styles.value("window").toObject();
     m_window->setBackground(jsonToColor(jsonValue(stylesWindow, "background", "window"), defines));
+    // Setting properties for page
+    QJsonObject stylesPage = styles.value("page").toObject();
+    m_page->setBackground(jsonToColor(jsonValue(stylesPage, "background", "page"), defines));
+    // Setting properties for dimmer
+    QJsonObject stylesPageDimmer = stylesPage.value("dimmer").toObject();
+    m_page->dimmer()->setStartColor(jsonToColor(jsonValue(stylesPageDimmer, "startColor", "dimmer"), defines));
+    m_page->dimmer()->setEndColor(jsonToColor(jsonValue(stylesPageDimmer, "endColor", "dimmer"), defines));
+    if (stylesPageDimmer.contains("height")) {
+        m_page->dimmer()->setHeight(jsonToInt(stylesPage.value("dimmer"), defines));
+    }
+    if (stylesPageDimmer.contains("startPosition")) {
+        m_page->dimmer()->setStartPosition(jsonToDouble(stylesPage.value("dimmer"), defines));
+    }
+    if (stylesPageDimmer.contains("endPosition")) {
+        m_page->dimmer()->setEndPosition(jsonToDouble(stylesPage.value("dimmer"), defines));
+    }
 }

src/styles/autogenerated/nemotheme.h

@@ -30,6 +30,7 @@
 #include "nemothemetextfield.h"
 #include "nemothemetoolbar.h"
 #include "nemothemewindow.h"
+#include "nemothemepage.h"
 
 class NemoTheme: public QObject
 {
@@ -42,6 +43,7 @@ class NemoTheme: public QObject
     Q_PROPERTY(NemoThemeTextField * textField READ textField CONSTANT)
     Q_PROPERTY(NemoThemeToolBar * toolBar READ toolBar CONSTANT)
     Q_PROPERTY(NemoThemeWindow * window READ window CONSTANT)
+    Q_PROPERTY(NemoThemePage * page READ page CONSTANT)
     Q_PROPERTY(QString fontFamily READ fontFamily CONSTANT)
 public:
     explicit NemoTheme(QObject *parent = 0);
@@ -55,6 +57,7 @@ public:
     NemoThemeTextField * textField() const;
     NemoThemeToolBar * toolBar() const;
     NemoThemeWindow * window() const;
+    NemoThemePage * page() const;
     QString fontFamily() const;
 public Q_SLOTS:
     void loadFromFile(const QString &fileName);
@@ -70,6 +73,7 @@ private:
     NemoThemeTextField * m_textField;
     NemoThemeToolBar * m_toolBar;
     NemoThemeWindow * m_window;
+    NemoThemePage * m_page;
     QString m_fontFamily;
 };
 

src/styles/autogenerated/nemothemepage.cpp

+/*
+ * Copyright (C) 2013 Lucien Xu <sfietkonstantin@free.fr>
+ *
+ * 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.
+ */
+
+// This class is autogenerated using themehelper.py
+// Any modification done in this file will be overridden
+
+#include "nemothemepage.h"
+
+NemoThemePage::NemoThemePage(QObject *parent)
+    : QObject(parent)
+    , m_dimmer(new NemoThemePageDimmer(this))
+{
+}
+
+QColor NemoThemePage::background() const
+{
+    return m_background;
+}
+
+void NemoThemePage::setBackground(const QColor &background)
+{
+    if (m_background != background) {
+        m_background = background;
+        emit backgroundChanged();
+    }
+}
+
+NemoThemePageDimmer * NemoThemePage::dimmer() const
+{
+    return m_dimmer;
+}

src/styles/autogenerated/nemothemepage.h

+/*
+ * Copyright (C) 2013 Lucien Xu <sfietkonstantin@free.fr>
+ *
+ * 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.
+ */
+
+// This class is autogenerated using themehelper.py
+// Any modification done in this file will be overridden
+
+#ifndef NEMOTHEMEPAGE_H
+#define NEMOTHEMEPAGE_H
+
+#include <QtCore/QObject>
+#include <QtGui/QColor>
+#include "nemothemepagedimmer.h"
+
+class NemoThemePage: public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QColor background READ background NOTIFY backgroundChanged)
+    Q_PROPERTY(NemoThemePageDimmer * dimmer READ dimmer CONSTANT)
+public:
+    explicit NemoThemePage(QObject *parent = 0);
+    QColor background() const;
+    void setBackground(const QColor &background);
+    NemoThemePageDimmer * dimmer() const;
+Q_SIGNALS:
+    void backgroundChanged();
+private:
+    QColor m_background;
+    NemoThemePageDimmer * m_dimmer;
+};
+
+#endif //NEMOTHEMEPAGE_H

src/styles/autogenerated/nemothemepagedimmer.cpp

+/*
+ * Copyright (C) 2013 Lucien Xu <sfietkonstantin@free.fr>
+ *
+ * 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.
+ */
+
+// This class is autogenerated using themehelper.py
+// Any modification done in this file will be overridden
+
+#include "nemothemepagedimmer.h"
+
+NemoThemePageDimmer::NemoThemePageDimmer(QObject *parent)
+    : QObject(parent)
+    , m_height(15)
+    , m_startPosition(0)
+    , m_endPosition(1.0)
+{
+}
+
+QColor NemoThemePageDimmer::startColor() const
+{
+    return m_startColor;
+}
+
+void NemoThemePageDimmer::setStartColor(const QColor &startColor)
+{
+    if (m_startColor != startColor) {
+        m_startColor = startColor;
+        emit startColorChanged();
+    }
+}
+
+QColor NemoThemePageDimmer::endColor() const
+{
+    return m_endColor;
+}
+
+void NemoThemePageDimmer::setEndColor(const QColor &endColor)
+{
+    if (m_endColor != endColor) {
+        m_endColor = endColor;
+        emit endColorChanged();
+    }
+}
+
+int NemoThemePageDimmer::height() const
+{
+    return m_height;
+}
+
+void NemoThemePageDimmer::setHeight(int height)
+{
+    if (m_height != height) {
+        m_height = height;
+        emit heightChanged();
+    }
+}
+
+double NemoThemePageDimmer::startPosition() const
+{
+    return m_startPosition;
+}
+
+void NemoThemePageDimmer::setStartPosition(double startPosition)
+{
+    if (m_startPosition != startPosition) {
+        m_startPosition = startPosition;
+        emit startPositionChanged();
+    }
+}
+
+double NemoThemePageDimmer::endPosition() const
+{
+    return m_endPosition;
+}
+
+void NemoThemePageDimmer::setEndPosition(double endPosition)
+{
+    if (m_endPosition != endPosition) {
+        m_endPosition = endPosition;
+        emit endPositionChanged();
+    }
+}

src/styles/autogenerated/nemothemepagedimmer.h

+/*
+ * Copyright (C) 2013 Lucien Xu <sfietkonstantin@free.fr>
+ *
+ * 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.
+ */
+
+// This class is autogenerated using themehelper.py
+// Any modification done in this file will be overridden
+
+#ifndef NEMOTHEMEPAGEDIMMER_H
+#define NEMOTHEMEPAGEDIMMER_H
+
+#include <QtCore/QObject>
+#include <QtGui/QColor>
+
+class NemoThemePageDimmer: public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QColor startColor READ startColor NOTIFY startColorChanged)
+    Q_PROPERTY(QColor endColor READ endColor NOTIFY endColorChanged)
+    Q_PROPERTY(int height READ height NOTIFY heightChanged)
+    Q_PROPERTY(double startPosition READ startPosition NOTIFY startPositionChanged)
+    Q_PROPERTY(double endPosition READ endPosition NOTIFY endPositionChanged)
+public:
+    explicit NemoThemePageDimmer(QObject *parent = 0);
+    QColor startColor() const;
+    void setStartColor(const QColor &startColor);
+    QColor endColor() const;
+    void setEndColor(const QColor &endColor);
+    int height() const;
+    void setHeight(int height);
+    double startPosition() const;
+    void setStartPosition(double startPosition);
+    double endPosition() const;
+    void setEndPosition(double endPosition);
+Q_SIGNALS:
+    void startColorChanged();
+    void endColorChanged();
+    void heightChanged();
+    void startPositionChanged();
+    void endPositionChanged();
+private:
+    QColor m_startColor;
+    QColor m_endColor;
+    int m_height;
+    double m_startPosition;
+    double m_endPosition;
+};
+
+#endif //NEMOTHEMEPAGEDIMMER_H

src/styles/qquicknemostyleextensionplugin.cpp

@@ -47,6 +47,9 @@ void QQuickNemoStyleExtensionPlugin::registerTypes(const char *uri)
     qmlRegisterUncreatableType<NemoThemeTextField>(uri, 1, 0, "NemoThemeTextField", reason);
     qmlRegisterUncreatableType<NemoThemeToolBar>(uri, 1, 0, "NemoThemeToolBar", reason);
     qmlRegisterUncreatableType<NemoThemeWindow>(uri, 1, 0, "NemoThemeWindow", reason);
+    qmlRegisterUncreatableType<NemoThemePage>(uri, 1, 0, "NemoThemePage", reason);
+    qmlRegisterUncreatableType<NemoThemePageDimmer>(uri, 1, 0, "NemoThemePageDimmer", reason);
+
     qmlRegisterSingletonType<QObject>(uri, 1, 0, "Theme", nemo_theme_provider);
 }
 

src/styles/styles.pro

@@ -86,7 +86,9 @@ HEADERS += \
     autogenerated/nemothemegroove.h \
     autogenerated/nemothemetextfield.h \
     autogenerated/nemothemetoolbar.h \
-    autogenerated/nemothemewindow.h
+    autogenerated/nemothemewindow.h \
+    autogenerated/nemothemepage.h \
+    autogenerated/nemothemepagedimmer.h
 
 SOURCES += \
     qquicknemostyleextensionplugin.cpp \
@@ -98,7 +100,9 @@ SOURCES += \
     autogenerated/nemothemegroove.cpp \
     autogenerated/nemothemetextfield.cpp \
     autogenerated/nemothemetoolbar.cpp \
-    autogenerated/nemothemewindow.cpp
+    autogenerated/nemothemewindow.cpp \
+    autogenerated/nemothemepage.cpp \
+    autogenerated/nemothemepagedimmer.cpp
 
 INSTALLS += target images qmlfiles themes
 

src/styles/themes/glacier.json

@@ -43,6 +43,13 @@
         },
         "window": {
             "background": "#000000"
+        },
+        "page": {
+            "background": "#000000",
+            "dimmer": {
+                "startColor": "black",
+                "endColor": "transparent"
+            }
         }
     }
 }

src/styles/themes/ugly.json

@@ -40,6 +40,13 @@
         },
         "window": {
             "background": "#000000"
+        },
+        "page": {
+            "background": "#000000",
+            "dimmer": {
+                "startColor": "black",
+                "endColor": "transparent"
+            }
         }
     }
 }

tools/themehelper/components.json

@@ -62,6 +62,19 @@
                 }
             ]
         },
+        {
+            "name": "Page",
+            "properties": [
+                {
+                    "name": "background",
+                    "type": "QColor"
+                },
+                {
+                    "name": "dimmer",
+                    "object": "PageDimmer"
+                }
+            ]
+        },
         
         
         
@@ -128,6 +141,34 @@
                     "default": 25
                 }
             ]
+        },
+        {
+            "name": "PageDimmer",
+            "properties": [
+                {
+                    "name": "startColor",
+                    "type": "QColor"
+                },
+                {
+                    "name": "endColor",
+                    "type": "QColor"
+                },
+                {
+                    "name": "height",
+                    "type": "int",
+                    "default": 15
+                },
+                {
+                    "name": "startPosition",
+                    "type": "double",
+                    "default": 0
+                },
+                {
+                    "name": "endPosition",
+                    "type": "double",
+                    "default": 1.0
+                }
+            ]
         }
     ],
     "properties": [
@@ -154,6 +195,10 @@
         {
             "name": "window",
             "object": "Window"
+        },
+        {
+            "name": "page",
+            "object": "Page"
         }
     ],
     "font": "/usr/share/fonts/google-opensans/OpenSans-Regular.ttf"