mirror of
https://invent.kde.org/marcoa/shift-shell.git
synced 2026-04-29 15:03:09 +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