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
Hide whitespace changes
Inline Side-by-side
Showing with 180 additions and 435 deletions
examples/touch/content/ButtonPage.qml
View file @ b5a7e98c
......@@ -43,79 +43,35 @@ 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"
}
}
tools: ToolBarLayoutExample { title: "Buttons" }
Item {
anchors.top: toolbar.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
Column {
spacing: 40
anchors.centerIn: parent
Column {
spacing: 40
anchors.centerIn: parent
Button {
property bool isGlacier: Theme.name == "Glacier"
anchors.margins: 20
text: isGlacier ? "Set Ugly Theme" : "Set Nice Theme"
onClicked: isGlacier ? Theme.loadFromFile("ugly.json")
: Theme.loadFromFile("glacier.json")
}
Button {
property bool isGlacier: Theme.name == "Glacier"
anchors.margins: 20
text: isGlacier ? "Set Ugly Theme" : "Set Nice Theme"
onClicked: isGlacier ? Theme.loadFromFile("ugly.json")
: Theme.loadFromFile("glacier.json")
}
Button {
anchors.margins: 20
enabled: false
text: "Disabled"
}
Button {
anchors.margins: 20
enabled: false
text: "Disabled"
}
Button {
anchors.margins: 20
primary: true
text: "Go back"
onClicked: if (stackView) stackView.pop()
}
Button {
anchors.margins: 20
primary: true
text: "Go back"
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
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
View file @ b5a7e98c
......@@ -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,71 +62,29 @@ 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
anchors.centerIn: parent
Column {
spacing: 40
anchors.centerIn: parent
ProgressBar {
anchors.margins: 20
width: 400
value: progress
}
ProgressBar {
anchors.margins: 20
width: 400
value: progress
}
ProgressBar {
anchors.margins: 20
width: 400
value: 1 - progress
}
ProgressBar {
anchors.margins: 20
width: 400
value: 1 - progress
}
ProgressBar {
anchors.margins: 20
style: touchStyle
value: 1
width: 400
}
ProgressBar {
anchors.margins: 20
style: touchStyle
value: 1
width: 400
}
}
......
examples/touch/content/SliderPage.qml
View file @ b5a7e98c
......@@ -38,83 +38,34 @@
**
****************************************************************************/
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"
}
}
tools: ToolBarLayoutExample { title: "Sliders" }
Item {
anchors.top: toolbar.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
Column {
spacing: 12
anchors.centerIn: parent
Column {
spacing: 12
anchors.centerIn: parent
Slider {
anchors.margins: 20
//style: touchStyle
value: 0
}
Slider {
anchors.margins: 20
//style: touchStyle
value: 0.5
}
Slider {
anchors.margins: 20
style: touchStyle
value: 1.0
}
Slider {
anchors.margins: 20
//style: touchStyle
value: 0
}
Slider {
anchors.margins: 20
//style: touchStyle
value: 0.5
}
Slider {
anchors.margins: 20
style: touchStyle
value: 1.0
}
}
......
examples/touch/content/TabBarPage.qml
View file @ b5a7e98c
......@@ -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
View file @ b5a7e98c
......@@ -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,87 +62,46 @@ 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
anchors.centerIn: parent
Column {
spacing: 40
anchors.centerIn: parent
TextField {
anchors.margins: 20
text: "Text input"
//style: touchStyle
}
TextField {
anchors.margins: 20
text: "Text input"
//style: touchStyle
}
TextField {
anchors.margins: 20
text: "Readonly Text input"
//style: touchStyle
readOnly: true
}
TextField {
anchors.margins: 20
text: "Readonly Text input"
//style: touchStyle
readOnly: true
}
TextField {
anchors.margins: 20
text: "Disabled textfield"
enabled: false
}
TextField {
anchors.margins: 20
text: "Disabled textfield"
enabled: false
}
TextField {
anchors.margins: 20
text: "Text input"
style: touchStyle
}
TextField {
anchors.margins: 20
text: "Text input"
style: touchStyle
}
TextField {
anchors.margins: 20
text: "Readonly Text input"
style: touchStyle
readOnly: true
}
TextField {
anchors.margins: 20
text: "Readonly Text input"
style: touchStyle
readOnly: true
}
}
Component {
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 {
}
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
......
examples/touch/resources.qrc
View file @ b5a7e98c
......@@ -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
View file @ b5a7e98c
......@@ -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
View file @ b5a7e98c
......@@ -61,7 +61,7 @@ NemoWindow {
//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)) {
if (stackView.stackInitialized && !isOrientationAllowed(contentArea.filteredOrientation)) {
fallbackToAnAllowedOrientation()
}
}
......@@ -86,12 +86,12 @@ NemoWindow {
// 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:
......@@ -129,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 {
......@@ -147,8 +147,7 @@ NemoWindow {
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
......@@ -171,7 +170,7 @@ NemoWindow {
contentArea.filteredOrientation = Screen.orientation
} else {
//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 {
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
//TODO: move to c++ to do type/value checking
//this is read by AppWindow and StackView to update orientation accordingly
property int allowedOrientations
//TODO: Page pageStack is null when page is pushed, so this will default to Portrait
// We may want to avoid this useless change of value on page creation (how?)
readonly property int orientation: pageStack ? pageStack.orientation : Qt.PortraitOrientation
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
......
tools/themehelper/components.json
View file @ b5a7e98c
......@@ -69,7 +69,7 @@
"name": "background",
"type": "QColor"
},
{
{
"name": "dimmer",
"object": "PageDimmer"
}
......
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