From e0b9dc214204c98e23e693a34cd1e0a67516913c Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Thu, 19 Feb 2015 17:24:49 +0100 Subject: [PATCH] a couple of prototypes for the homescreen qml mockups usable with qmlscene, non functional but to be used purely for discussion about workflow --- prototypes/cards/Card.qml | 23 +++++ prototypes/cards/bottom-shadow.png | Bin 0 -> 287 bytes prototypes/cards/main.qml | 148 ++++++++++++++++++++++++++++ prototypes/cards/top-shadow.png | Bin 0 -> 284 bytes prototypes/cards2/Card.qml | 23 +++++ prototypes/cards2/main.qml | 136 +++++++++++++++++++++++++ prototypes/cards2/top-shadow.png | Bin 0 -> 284 bytes prototypes/singlescrolling/Card.qml | 13 +++ prototypes/singlescrolling/main.qml | 115 +++++++++++++++++++++ 9 files changed, 458 insertions(+) create mode 100644 prototypes/cards/Card.qml create mode 100644 prototypes/cards/bottom-shadow.png create mode 100644 prototypes/cards/main.qml create mode 100644 prototypes/cards/top-shadow.png create mode 100644 prototypes/cards2/Card.qml create mode 100644 prototypes/cards2/main.qml create mode 100644 prototypes/cards2/top-shadow.png create mode 100644 prototypes/singlescrolling/Card.qml create mode 100644 prototypes/singlescrolling/main.qml 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 0000000000000000000000000000000000000000..911d1b965819c8460a11ceb79d10f52c1c76513f GIT binary patch literal 287 zcmeAS@N?(olHy`uVBq!ia0vp^mOyOA!3HF2{R{(u6kC$Fy9>jA5L~c#`DCC7XMsm# zF#`j)FbFd;%$g$s6l5>)^mS#w&m_#vtoCT>v?)L#+02lL66gHf+|;}hAeVu`xhOTU zBsE2$JhLQ2!QIn0AVn{g9Vp)H>EalYaqsP|n}Q7nJj{WtFZM_EJv1pz+5GB3Z=H;_ z?n&8-X)2~npM*Ib_bDl!a93fe>}*l+pD6G|QK;#TyF;Fm>$m2Z+)HXeB+KSvwY#tP z%S9i@T_+YP#Oei4kgL(~=-(is^6&hCIZJ>VKhAV^69|b~VVIp00i_>zopr0Aa>o2mk;8 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..5e5123c7a02b7e8bcc4dc00e7586074f5635a8d0 GIT binary patch literal 284 zcmeAS@N?(olHy`uVBq!ia0vp^mOyOA!3HF2{R{(u6kC$Fy9>jA5L~c#`DCC7XMsm# zF#`j)FbFd;%$g$s6l5>)^mS#w&m_#vEEpwWJR2w^n;8;O;+&tGo0?Yw-bBU;cK}uoD?|v0U@fCp&cR4xfwY{03ctX~Q#Ztj}0(%O_rxqT^IG~8M z5zEgo2fImAmZ+$5a;}uTu%O!CNw3M|gqNd~-f{)qnxF~OHfWysVb3h@tj4nWqO|mN PkRv@^{an^LB{Ts5j6+vX literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..5e5123c7a02b7e8bcc4dc00e7586074f5635a8d0 GIT binary patch literal 284 zcmeAS@N?(olHy`uVBq!ia0vp^mOyOA!3HF2{R{(u6kC$Fy9>jA5L~c#`DCC7XMsm# zF#`j)FbFd;%$g$s6l5>)^mS#w&m_#vEEpwWJR2w^n;8;O;+&tGo0?Yw-bBU;cK}uoD?|v0U@fCp&cR4xfwY{03ctX~Q#Ztj}0(%O_rxqT^IG~8M z5zEgo2fImAmZ+$5a;}uTu%O!CNw3M|gqNd~-f{)qnxF~OHfWysVb3h@tj4nWqO|mN PkRv@^{an^LB{Ts5j6+vX literal 0 HcmV?d00001 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