Skip to content

Q
qtquickcontrols-nemo
Commit b5a7e98c authored by Andrea Bernabei's avatar Andrea Bernabei
Browse files
Options

[examples] Update touch gallery, now makes use of Page

parent 1c6e7e91
Show whitespace changes
Inline Side-by-side
Showing with 179 additions and 434 deletions
examples/touch/content/ButtonPage.qml
View file @ b5a7e98c
...@@ -43,54 +43,10 @@ import QtQuick.Controls 1.0 //needed for the Stack attached property ...@@ -43,54 +43,10 @@ import QtQuick.Controls 1.0 //needed for the Stack attached property
import QtQuick.Controls.Nemo 1.0 import QtQuick.Controls.Nemo 1.0
import QtQuick.Controls.Styles.Nemo 1.0 import QtQuick.Controls.Styles.Nemo 1.0
Rectangle { Page {
id: root id: root
width: parent.width
height: parent.height
color: "black" tools: ToolBarLayoutExample { title: "Buttons" }
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
Column { Column {
spacing: 40 spacing: 40
...@@ -117,5 +73,5 @@ Rectangle { ...@@ -117,5 +73,5 @@ Rectangle {
onClicked: if (stackView) stackView.pop() onClicked: if (stackView) stackView.pop()
} }
} }
}
} }
examples/touch/content/LiveCoding.qml
View file @ b5a7e98c
...@@ -22,60 +22,16 @@ import QtQuick.Controls 1.0 //needed for the Stack attached property ...@@ -22,60 +22,16 @@ import QtQuick.Controls 1.0 //needed for the Stack attached property
import QtQuick.Controls.Nemo 1.0 import QtQuick.Controls.Nemo 1.0
import QtQuick.Layouts 1.0 import QtQuick.Layouts 1.0
Rectangle { Page {
id: root id: root
width: parent.width
height: parent.height
color: "black"
property var oldItem property var oldItem
property var newItem property var newItem
ToolBar { tools: ToolBarLayoutExample { title: "Live Coding Arena" }
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"
}
}
SplitView { SplitView {
anchors.top: toolbar.bottom anchors.fill: parent
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
//If we don't wrap ColumnLayout in an Item, the split view doesn't work :/ //If we don't wrap ColumnLayout in an Item, the split view doesn't work :/
Item { Item {
......
examples/touch/content/ProgressBarPage.qml
View file @ b5a7e98c
...@@ -38,21 +38,14 @@ ...@@ -38,21 +38,14 @@
** **
****************************************************************************/ ****************************************************************************/
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.0 //needed for the Stack attached property import QtQuick.Controls 1.0 //needed for the Stack attached property
import QtQuick.Controls.Nemo 1.0 import QtQuick.Controls.Nemo 1.0
import QtQuick.Controls.Styles.Nemo 1.0 import QtQuick.Controls.Styles.Nemo 1.0
Rectangle { Page {
id: root id: root
width: parent.width
height: parent.height
color: "black"
property real progress: 0 property real progress: 0
SequentialAnimation on progress { SequentialAnimation on progress {
loops: Animation.Infinite loops: Animation.Infinite
...@@ -69,48 +62,7 @@ Rectangle { ...@@ -69,48 +62,7 @@ Rectangle {
} }
} }
ToolBar { tools: ToolBarLayoutExample { title: "Progress Bars" }
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
Column { Column {
spacing: 40 spacing: 40
...@@ -135,7 +87,6 @@ Rectangle { ...@@ -135,7 +87,6 @@ Rectangle {
width: 400 width: 400
} }
} }
}
Component { Component {
id: touchStyle id: touchStyle
......
examples/touch/content/SliderPage.qml
View file @ b5a7e98c
...@@ -38,63 +38,15 @@ ...@@ -38,63 +38,15 @@
** **
****************************************************************************/ ****************************************************************************/
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.0 //needed for the Stack attached property import QtQuick.Controls 1.0 //needed for the Stack attached property
import QtQuick.Controls.Nemo 1.0 import QtQuick.Controls.Nemo 1.0
import QtQuick.Controls.Styles.Nemo 1.0 import QtQuick.Controls.Styles.Nemo 1.0
Rectangle { Page {
id: root id: root
width: parent.width
height: parent.height
color: "black" tools: ToolBarLayoutExample { title: "Sliders" }
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
Column { Column {
spacing: 12 spacing: 12
...@@ -116,7 +68,6 @@ Rectangle { ...@@ -116,7 +68,6 @@ Rectangle {
value: 1.0 value: 1.0
} }
} }
}
Component { Component {
id: touchStyle id: touchStyle
......
examples/touch/content/TabBarPage.qml
View file @ b5a7e98c
...@@ -38,63 +38,19 @@ ...@@ -38,63 +38,19 @@
** **
****************************************************************************/ ****************************************************************************/
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.0 //needed for the Stack attached property import QtQuick.Controls 1.0 //needed for the Stack attached property
import QtQuick.Controls.Nemo 1.0 import QtQuick.Controls.Nemo 1.0
import QtQuick.Controls.Styles.Nemo 1.0 import QtQuick.Controls.Styles.Nemo 1.0
Rectangle { Page {
id: root 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 { tools: ToolBarLayoutExample { title: "Tab bars" }
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"
}
}
TabView { TabView {
anchors.top: toolbar.bottom anchors.fill: parent
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
style: touchStyle style: touchStyle
Tab { Tab {
title: "Buttons" title: "Buttons"
......
examples/touch/content/TextInputPage.qml
View file @ b5a7e98c
...@@ -38,21 +38,14 @@ ...@@ -38,21 +38,14 @@
** **
****************************************************************************/ ****************************************************************************/
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.0 //needed for the Stack attached property import QtQuick.Controls 1.0 //needed for the Stack attached property
import QtQuick.Controls.Nemo 1.0 import QtQuick.Controls.Nemo 1.0
import QtQuick.Controls.Styles.Nemo 1.0 import QtQuick.Controls.Styles.Nemo 1.0
Rectangle { Page {
id: root id: root
width: parent.width
height: parent.height
color: "black"
property real progress: 0 property real progress: 0
SequentialAnimation on progress { SequentialAnimation on progress {
loops: Animation.Infinite loops: Animation.Infinite
...@@ -69,48 +62,7 @@ Rectangle { ...@@ -69,48 +62,7 @@ Rectangle {
} }
} }
ToolBar { tools: ToolBarLayoutExample { title: "Text input" }
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
Column { Column {
spacing: 40 spacing: 40
...@@ -148,7 +100,7 @@ Rectangle { ...@@ -148,7 +100,7 @@ Rectangle {
readOnly: true readOnly: true
} }
} }
}
Component { Component {
id: touchStyle id: touchStyle
......
examples/touch/content/ToolBarLayoutExample.qml 0 → 100644
View file @ b5a7e98c
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
View file @ b5a7e98c
...@@ -90,51 +90,14 @@ ApplicationWindow { ...@@ -90,51 +90,14 @@ ApplicationWindow {
} }
initialPage: Rectangle { initialPage: Page {
id: pageItem id: pageItem
width: parent.width
height: parent.height
color: "black" tools: ToolBarLayoutExample { title: "Touch gallery" }
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()
}
}
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 { ListView {
model: pageModel model: pageModel
anchors { top: toolbar.bottom; left: parent.left; right: parent.right; bottom: parent.bottom } anchors.fill: parent
clip: true clip: true
delegate: AndroidDelegate { delegate: AndroidDelegate {
text: title text: title
......
examples/touch/resources.qrc
View file @ b5a7e98c
...@@ -16,5 +16,6 @@ ...@@ -16,5 +16,6 @@
<file>images/textinput.png</file> <file>images/textinput.png</file>
<file>images/toolbar.png</file> <file>images/toolbar.png</file>
<file>content/LiveCoding.qml</file> <file>content/LiveCoding.qml</file>
<file>content/ToolBarLayoutExample.qml</file>
</qresource> </qresource>
</RCC> </RCC>
examples/touch/touch.pro
View file @ b5a7e98c
...@@ -17,7 +17,8 @@ OTHER_FILES += \ ...@@ -17,7 +17,8 @@ OTHER_FILES += \
content/SliderPage.qml \ content/SliderPage.qml \
content/TabBarPage.qml \ content/TabBarPage.qml \
content/TextInputPage.qml \ content/TextInputPage.qml \
content/LiveCoding.qml content/LiveCoding.qml \
content/ToolBarLayoutExample.qml
RESOURCES += \ RESOURCES += \
resources.qrc resources.qrc
......
src/controls/ApplicationWindow.qml
View file @ b5a7e98c
...@@ -61,7 +61,7 @@ NemoWindow { ...@@ -61,7 +61,7 @@ NemoWindow {
//if the current orientation is not allowed anymore, fallback to an allowed one //if the current orientation is not allowed anymore, fallback to an allowed one
//stackInitialized check prevents setting an orientation before the stackview //stackInitialized check prevents setting an orientation before the stackview
//(but more importantly the initialItem of the stack) has been created //(but more importantly the initialItem of the stack) has been created
if(stackView.stackInitialized && !isOrientationAllowed(contentArea.filteredOrientation)) { if (stackView.stackInitialized && !isOrientationAllowed(contentArea.filteredOrientation)) {
fallbackToAnAllowedOrientation() fallbackToAnAllowedOrientation()
} }
} }
...@@ -86,12 +86,12 @@ NemoWindow { ...@@ -86,12 +86,12 @@ NemoWindow {
// i.e. Screen.width will be width of portrait orientation on all hardware! // 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 // (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) // 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 // XXX: This is to account for HW screen rotation
// Sooner or later we will get rid of this as the compositor will // Sooner or later we will get rid of this as the compositor will
// do that for us // do that for us
function rotationToTrasposeToPortrait() function rotationToTransposeToPortrait()
{ {
switch (Screen.primaryOrientation) { switch (Screen.primaryOrientation) {
case Qt.PortraitOrientation: case Qt.PortraitOrientation:
...@@ -129,7 +129,7 @@ NemoWindow { ...@@ -129,7 +129,7 @@ NemoWindow {
anchors.centerIn: parent anchors.centerIn: parent
width: __transpose ? Screen.height : Screen.width width: __transpose ? Screen.height : Screen.width
height: __transpose ? Screen.width : Screen.height height: __transpose ? Screen.width : Screen.height
rotation: rotationToTrasposeToPortrait() rotation: rotationToTransposeToPortrait()
//This is the rotating item //This is the rotating item
Item { Item {
...@@ -147,8 +147,7 @@ NemoWindow { ...@@ -147,8 +147,7 @@ NemoWindow {
property int filteredOrientation property int filteredOrientation
//this is the reliable value which changes during the orientation transition //this is the reliable value which changes during the orientation transition
//the default value is set to Qt.PortraitOrientation property int uiOrientation
property int uiOrientation: Qt.PortraitOrientation
property bool orientationTransitionRunning: false property bool orientationTransitionRunning: false
...@@ -171,7 +170,7 @@ NemoWindow { ...@@ -171,7 +170,7 @@ NemoWindow {
contentArea.filteredOrientation = Screen.orientation contentArea.filteredOrientation = Screen.orientation
} else { } else {
//let the window handle it, it will fall back to an allowed orientation //let the window handle it, it will fall back to an allowed orientation
root.orientationConstraintsChanged() root.fallbackToAnAllowedOrientation()
} }
} }
......
src/controls/Page.qml
View file @ b5a7e98c
...@@ -47,16 +47,19 @@ NemoPage { ...@@ -47,16 +47,19 @@ NemoPage {
property alias __dimmer: dimmer property alias __dimmer: dimmer
readonly property StackView pageStack: Stack.view 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" //Children of "page" will be automatically reparented to "content"
default property alias __content: content.data default property alias __content: content.data
//TODO: move to c++ to do type/value checking property int orientation
//this is read by AppWindow and StackView to update orientation accordingly //This keeps orientation synced to that of Nemo's StackView
property int allowedOrientations //If the page isn't pushed on Nemo's StackView, the orientation value will be unreliable
Binding on orientation {
//TODO: Page pageStack is null when page is pushed, so this will default to Portrait when: pageStack && pageStack.hasOwnProperty("orientation")
// We may want to avoid this useless change of value on page creation (how?) value: if (pageStack) pageStack.orientation //"if (pageStack)" is just needed to silence a TypeError at page initalization
readonly property int orientation: pageStack ? pageStack.orientation : Qt.PortraitOrientation }
//TODO: alias these properties with those of the applicationWindow //TODO: alias these properties with those of the applicationWindow
//property alias orientationTransitions //property alias orientationTransitions
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment