mirror of
https://invent.kde.org/marcoa/shift-shell.git
synced 2026-08-02 09:48:50 +00:00
a couple of prototypes for the homescreen
qml mockups usable with qmlscene, non functional but to be used purely for discussion about workflow
This commit is contained in:
Marco Martin
parent
3e1ab5d267
commit
e0b9dc2142
9 changed files with 458 additions and 0 deletions
23
prototypes/cards/Card.qml
Normal file
23
prototypes/cards/Card.qml
Normal file
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
prototypes/cards/bottom-shadow.png
Normal file
BIN
prototypes/cards/bottom-shadow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 287 B |
148
prototypes/cards/main.qml
Normal file
148
prototypes/cards/main.qml
Normal file
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
prototypes/cards/top-shadow.png
Normal file
BIN
prototypes/cards/top-shadow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 B |
23
prototypes/cards2/Card.qml
Normal file
23
prototypes/cards2/Card.qml
Normal file
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
136
prototypes/cards2/main.qml
Normal file
136
prototypes/cards2/main.qml
Normal file
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
prototypes/cards2/top-shadow.png
Normal file
BIN
prototypes/cards2/top-shadow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 B |
13
prototypes/singlescrolling/Card.qml
Normal file
13
prototypes/singlescrolling/Card.qml
Normal file
|
|
@ -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
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
115
prototypes/singlescrolling/main.qml
Normal file
115
prototypes/singlescrolling/main.qml
Normal file
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue