Commit e0b9dc21 authored by Marco Martin's avatar Marco Martin

a couple of prototypes for the homescreen

qml mockups usable with qmlscene, non functional
but to be used purely for discussion about workflow
parent 3e1ab5d2
import QtQuick 2.1
Rectangle {
id: cardRoot
color: "red"
width: parent.width
height: parent.height
y: Math.max(Math.min((height - root.cardMargins * (parent.children.length - step)), (root.scrollValue + height * step)),
root.cardMargins*step)
property int step: 0
property bool current: root.scrollValue + cardRoot.height * step == 0
Image {
anchors {
left: parent.left
right: parent.right
bottom: parent.top
}
opacity: (root.cardMargins/20)*0.4
source: "top-shadow.png"
}
}
import QtQuick 2.1
import org.kde.kquickcontrolsaddons 2.0
Rectangle {
id: root
width: 300
height: 500
property real scrollValue: 0
property real cardMargins: 20
property bool scrollingEnabled: true
Behavior on scrollValue {
id: scrollAnim
NumberAnimation {
duration: 150
}
}
Behavior on cardMargins {
PropertyAnimation {
duration: 500
}
}
Text {
anchors.centerIn: parent
text: "Settings stuff"
font.pointSize: 20
}
MouseEventListener {
anchors.fill: parent
property real oldY: 0
onPressed: {
scrollAnim.enabled = false;
oldY = mouse.y
}
onPositionChanged: {
if (!root.scrollingEnabled) {
return;
}
scrollValue += (mouse.y - oldY)
oldY = mouse.y
}
onReleased: {
scrollAnim.enabled = true;
scrollValue = Math.round(scrollValue / root.height) * root.height
}
Card {
step: 0
color: "red"
Text {
anchors.centerIn: parent
text: "13:37"
font.pointSize: 40
}
}
Card {
id: appCard
step: 1
color: "green"
property bool switching: true
onSwitchingChanged: {
if (switching) {
root.cardMargins = 20
} else {
root.cardMargins = 0
}
}
onCurrentChanged: {
if (!current) {
switching = true;
}
}
Item {
width: parent.width
height: parent.height
scale: !appCard.current || appCard.switching ? 0.4 : 1
y: appCard.switching ? -70 : 0
Behavior on scale {
PropertyAnimation {
duration: 150
}
}
Behavior on y {
PropertyAnimation {
duration: 150
}
}
Rectangle {
z: 2
anchors.top: parent.top
width: parent.width
height: parent.height
Text {
anchors.centerIn: parent
text: "APP"
font.pointSize: 40
}
MouseArea {
anchors.fill: parent
onClicked: appCard.switching = false
}
}
}
ListView {
orientation: ListView.Horizontal
spacing: 4
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
}
height: parent.height/2.5
model: 4
delegate: Rectangle {
height: parent.height
width: height / (root.height/root.width)
}
}
}
Card {
id: appsCard
step: 2
color: "blue"
GridView {
id: grid
clip: true
anchors.fill: parent
model: 50
onAtYBeginningChanged: {
root.scrollingEnabled = atYBeginning || !appsCard.current;
}
delegate: Item {
width: grid.cellWidth
height: grid.cellHeight
Rectangle {
anchors.centerIn: parent
width: 48
height: 48
}
}
}
}
}
}
\ No newline at end of file
import QtQuick 2.1
Rectangle {
id: cardRoot
color: "red"
width: root.width
height: root.height
y: Math.max(Math.min((height - root.cardMargins * (parent.children.length - step)), (-root.contentY + height * step)),
root.cardMargins*step)
property int step: 0
property bool current: -root.contentY + cardRoot.height * step == 0
Image {
anchors {
left: parent.left
right: parent.right
bottom: parent.top
}
opacity: (root.cardMargins/20)*0.4
source: "top-shadow.png"
}
}
import QtQuick 2.1
import org.kde.kquickcontrolsaddons 2.0
Flickable {
id: root
width: 300
height: 500
contentWidth: width
contentHeight: mainColumn.height
property real cardMargins: 20
onMovementEnded: {
if (contentY > root.height * 3) {
return;
}
slideAnim.enabled = true;
contentY = Math.round(contentY/root.height) * root.height
}
Behavior on contentY {
id: slideAnim
enabled: false
SequentialAnimation {
PropertyAnimation {
duration: 150
}
ScriptAction {
script: slideAnim.enabled = false;
}
}
}
Behavior on cardMargins {
PropertyAnimation {
duration: 500
}
}
Item {
id: mainColumn
width: root.width
height: root.height * cardHolder.children.length
Item {
id: cardHolder
y: root.contentY
width: root.width
height: root.height
Card {
step: 0
Text {
anchors.centerIn: parent
text: "Settings stuff"
font.pointSize: 20
}
}
Card {
step: 1
color: "blue"
Text {
anchors.centerIn: parent
text: "13:37"
font.pointSize: 40
}
}
Card {
step: 2
id: tasksCard
color: "green"
property bool switching: true
onCurrentChanged: {
if (!current) {
switching = true;
}
}
onSwitchingChanged: {
if (switching) {
root.cardMargins = 20;
} else {
root.cardMargins = 0;
}
}
Item {
scale: tasksCard.switching ? 0.333 : 1
anchors.fill: parent
ListView {
orientation: ListView.Horizontal
anchors {
fill: parent
leftMargin: -root.width
rightMargin: -root.width
}
model: 8
spacing: 4
delegate: Rectangle {
width: root.width
height: root.height
Text {
anchors.centerIn: parent
text: "App " + (modelData+1)
font.pointSize: 40
}
MouseArea {
anchors.fill: parent
onClicked: tasksCard.switching = false;
}
}
}
Behavior on scale {
PropertyAnimation {
duration: 150
}
}
}
}
Card {
step: 3
Flow {
id: appsFlow
anchors.horizontalCenter: parent.horizontalCenter
width: Math.floor(parent.width/64) * 64
Repeater {
model: 40
delegate: Item {
width: 64
height: 64
Rectangle {
width: 48
height: 48
anchors.centerIn: parent
}
}
}
}
}
}
}
}
\ No newline at end of file
import QtQuick 2.1
Rectangle {
id: cardRoot
color: "red"
width: root.width
height: root.height
property int step: 0
property bool current: root.contentY == y
}
import QtQuick 2.1
import org.kde.kquickcontrolsaddons 2.0
Flickable {
id: root
width: 300
height: 500
contentWidth: width
contentHeight: mainColumn.height
onMovementEnded: {
if (contentY > root.height * 3) {
return;
}
slideAnim.enabled = true;
var newCurrent = mainColumn.childAt(10, contentY+root.height/2);
contentY = newCurrent.y
}
Behavior on contentY {
id: slideAnim
enabled: false
SequentialAnimation {
PropertyAnimation {
duration: 150
}
ScriptAction {
script: slideAnim.enabled = false;
}
}
}
Column {
id: mainColumn
Card {
Text {
anchors.centerIn: parent
text: "Settings stuff"
font.pointSize: 20
}
}
Card {
color: "blue"
Text {
anchors.centerIn: parent
text: "13:37"
font.pointSize: 40
}
}
Card {
id: tasksCard
z: 9
color: "green"
height: root.height - 64
property bool switching: true
onCurrentChanged: {
if (!current) {
switching = true;
}
}
Item {
scale: tasksCard.switching ? 0.333 : 1
anchors.fill: parent
ListView {
orientation: ListView.Horizontal
anchors {
fill: parent
leftMargin: -root.width
rightMargin: -root.width
}
model: 8
spacing: 4
delegate: Rectangle {
width: root.width
height: root.height
Text {
anchors.centerIn: parent
text: "App " + (modelData+1)
font.pointSize: 40
}
MouseArea {
anchors.fill: parent
onClicked: tasksCard.switching = false;
}
}
}
Behavior on scale {
PropertyAnimation {
duration: 150
}
}
}
}
Card {
height: appsFlow.height
Flow {
id: appsFlow
anchors.horizontalCenter: parent.horizontalCenter
width: Math.floor(parent.width/64) * 64
Repeater {
model: 40
delegate: Item {
width: 64
height: 64
Rectangle {
width: 48
height: 48
anchors.centerIn: parent
}
}
}
}
}
}
}
\ No newline at end of file
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