diff --git a/prototypes/cards/Card.qml b/prototypes/cards/Card.qml new file mode 100644 index 00000000..84d435bd --- /dev/null +++ b/prototypes/cards/Card.qml @@ -0,0 +1,23 @@ + +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" + } +} diff --git a/prototypes/cards/bottom-shadow.png b/prototypes/cards/bottom-shadow.png new file mode 100644 index 00000000..911d1b96 Binary files /dev/null and b/prototypes/cards/bottom-shadow.png differ diff --git a/prototypes/cards/main.qml b/prototypes/cards/main.qml new file mode 100644 index 00000000..7457c49b --- /dev/null +++ b/prototypes/cards/main.qml @@ -0,0 +1,148 @@ + +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 diff --git a/prototypes/cards/top-shadow.png b/prototypes/cards/top-shadow.png new file mode 100644 index 00000000..5e5123c7 Binary files /dev/null and b/prototypes/cards/top-shadow.png differ diff --git a/prototypes/cards2/Card.qml b/prototypes/cards2/Card.qml new file mode 100644 index 00000000..659a06ec --- /dev/null +++ b/prototypes/cards2/Card.qml @@ -0,0 +1,23 @@ + +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" + } +} diff --git a/prototypes/cards2/main.qml b/prototypes/cards2/main.qml new file mode 100644 index 00000000..6727b390 --- /dev/null +++ b/prototypes/cards2/main.qml @@ -0,0 +1,136 @@ + +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 diff --git a/prototypes/cards2/top-shadow.png b/prototypes/cards2/top-shadow.png new file mode 100644 index 00000000..5e5123c7 Binary files /dev/null and b/prototypes/cards2/top-shadow.png differ diff --git a/prototypes/singlescrolling/Card.qml b/prototypes/singlescrolling/Card.qml new file mode 100644 index 00000000..1eac4dce --- /dev/null +++ b/prototypes/singlescrolling/Card.qml @@ -0,0 +1,13 @@ + +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 + + +} diff --git a/prototypes/singlescrolling/main.qml b/prototypes/singlescrolling/main.qml new file mode 100644 index 00000000..d5717a2f --- /dev/null +++ b/prototypes/singlescrolling/main.qml @@ -0,0 +1,115 @@ + +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