diff --git a/source/components/navigation/actionbutton.rst b/source/components/navigation/actionbutton.rst --- a/source/components/navigation/actionbutton.rst +++ b/source/components/navigation/actionbutton.rst @@ -1,8 +1,11 @@ Primary Action Button ===================== -.. image:: /img/Action_Buttons.png +.. figure:: /img/Actionbutton1.png + :figclass: border :alt: Primary Action Button + + Primary action, create a new address book entry. When to use @@ -13,8 +16,14 @@ executed frequently. Typical primary actions are "Create New", "Edit,", "Save" or "Send". -The Primary Action Button also serves as an additional handle to open -the :doc:`drawers `. +Aditionally you can opt to define two secondary primary actions that are +placed left and right to the main primary button. + +.. figure:: /img/Actionbutton2.png + :figclass: border + :alt: Primary Action Button wit two secondary buttons + + Call, message and write an email as primary actions. If there is no primary action, you may opt to use the Primary Action Button as a shortcut to navigate back to the application's main page diff --git a/source/patterns/navigation/breadcrumb.rst b/source/patterns/navigation/breadcrumb.rst --- a/source/patterns/navigation/breadcrumb.rst +++ b/source/patterns/navigation/breadcrumb.rst @@ -15,6 +15,14 @@ the current position within the hierarchy, and offers shortcut links to jump to previous positions without using the Back button. +.. raw:: html + + + +Use of breadcrumb navigation in Plasma Mobile. + When to use ----------- diff --git a/source/qml/lib/Mouse.qml b/source/qml/lib/Mouse.qml --- a/source/qml/lib/Mouse.qml +++ b/source/qml/lib/Mouse.qml @@ -18,21 +18,23 @@ */ import QtQuick 2.2 +import QtTest 1.2 import org.kde.kirigami 2.4 as Kirigami // Drawing a brace between to obejcts to show the distance between them Item { id: canvas anchors.fill: parent; property int px property int py + z: 2 Rectangle { id: ind x: cursor.x - width / 2 y: cursor.y - width / 2 + 5 - z: 1 - width: Kirigami.Units.iconSizes.small + z: 2 + width: Kirigami.Units.iconSizes.medium height: width color: "#9911d116" radius: width / 2 @@ -45,38 +47,38 @@ onStopped: { ind.visible = false; - if (qmlControler) { - qmlControler.click(px, py); - } - else { - console.error("Can't find qmlControler."); - } - + event.mouseClick(canvas.parent, px, py, Qt.LeftButton, Qt.NoModifier, 0) } } } + TestEvent { + id: event + } + + Image { id: cursor source: "../../img/left_ptr.png" visible: false - width: Kirigami.Units.iconSizes.smallMedium - height: Kirigami.Units.iconSizes.smallMedium - z: 2 + width: Kirigami.Units.iconSizes.medium + height: Kirigami.Units.iconSizes.medium + z: 3 - NumberAnimation on x { - id: xAnim - duration: 1000 - running: false - } - NumberAnimation on y { - id: yAnim + ParallelAnimation { running: false - duration: 1000 - onStopped: { - ind.visible = true; - indAnim.to = Kirigami.Units.iconSizes.smallMedium; - indAnim.start(); + id: cursorAnimation + NumberAnimation { + id: cursorAnimationX + target: cursor + property: "x" + duration: 1000 + } + NumberAnimation { + id: cursorAnimationY + target: cursor + property: "y" + duration: 1000 } } } @@ -88,21 +90,28 @@ cursor.y = py + 60; cursor.visible = true; - xAnim.to = px; - xAnim.start(); - yAnim.to = py; - yAnim.start(); + cursorAnimation.onStopped.connect(function() { + ind.visible = true; + indAnim.to = Kirigami.Units.iconSizes.smallMedium; + indAnim.start(); + }); + + cursorAnimationX.to = px; + cursorAnimationY.to = py; + cursorAnimation.start(); } function hover() { - cursor.x = px; - cursor.y = py; + cursor.x = px - 60; + cursor.y = py + 60; cursor.visible = true; - if (qmlControler) { - qmlControler.hover(px, py); - } - else { - console.error("Can't find qmlControler."); - } + + cursorAnimation.onStopped.connect(function() { + event.mouseMove(canvas.parent, px, py, 0, Qt.NoButton); + }); + + cursorAnimationX.to = px; + cursorAnimationY.to = py; + cursorAnimation.start(); } } diff --git a/source/qml/lib/Touch.qml b/source/qml/lib/Touch.qml --- a/source/qml/lib/Touch.qml +++ b/source/qml/lib/Touch.qml @@ -30,6 +30,8 @@ property int toX property int toY property int dur: 300 + property var sequence; + property int i: 0 Rectangle { id: ind @@ -83,6 +85,21 @@ onTriggered: { ind.visible = false; cursor.visible = false; + swipeTimer.stop(); + } + } + + Timer { + id: swipeTimer + interval: 30 + repeat: true + running: false + onTriggered: { + i++; + var stepX = (toX - fromX) / timer.interval * swipeTimer.interval + var stepY = (toY - fromY) / timer.interval * swipeTimer.interval + sequence.move(1, canvas, fromX + i * stepX, toY + i * stepY); + sequence.commit(); } } @@ -102,24 +119,25 @@ indAnim.to = Math.abs(fromX - toX); indAnim.start(); - timer.triggered.connect(function() { - var sequence = event.touchEvent(canvas); - sequence.press(1, canvas, fromX, fromY); - sequence.commit(); + sequence = event.touchEvent(canvas); + sequence.press(1, canvas, fromX, fromY); + sequence.commit(); + i = 0; + swipeTimer.start(); - sequence.move(1, canvas, toX, toY); + timer.triggered.connect(function() { + sequence.release(1, canvas, toX, toY); sequence.commit(); }); } function touch() { cursor.x = toX; cursor.y = toY; cursor.visible = true; - console.log(toX + " " + toY); timer.start() timer.triggered.connect(function() { - var sequence = event.touchEvent(canvas); + sequence = event.touchEvent(canvas); sequence.press(1, canvas, toX, toY); sequence.commit(); sequence.release(1, canvas, toX, toY); diff --git a/source/qml/lib/annotate.js b/source/qml/lib/annotate.js --- a/source/qml/lib/annotate.js +++ b/source/qml/lib/annotate.js @@ -129,11 +129,16 @@ /** * Simulate a mouse click on the nodes */ -An.prototype.click = function(obj) { +An.prototype.click = function(opt) { + var options = getOpts({ + x: 0, + y: 0 + }, opt); + for (var n = 0; n < this.nodes.length; n++) { var node = this.nodes[n]; - var x = node.mapToItem(null, 0, 0).x + Math.floor(node.width / 2); - var y = node.mapToItem(null, 0, 0).y + Math.floor(node.height / 2); + var x = node.mapToItem(null, 0, 0).x + Math.floor(node.width / 2) + options.x; + var y = node.mapToItem(null, 0, 0).y + Math.floor(node.height / 2) + options.y; var m = mouse.createObject(root, {px: x, py: y}); m.click(); } @@ -143,11 +148,16 @@ /** * Simulate a touch the nodes */ -An.prototype.touch = function(obj) { +An.prototype.touch = function(opt) { + var options = getOpts({ + x: 0, + y: 0 + }, opt); + for (var n = 0; n < this.nodes.length; n++) { var node = this.nodes[n]; - var x = node.mapToItem(null, 0, 0).x + Math.floor(node.width / 2); - var y = node.mapToItem(null, 0, 0).y + Math.floor(node.height / 2); + var x = node.mapToItem(null, 0, 0).x + Math.floor(node.width / 2) + options.x; + var y = node.mapToItem(null, 0, 0).y + Math.floor(node.height / 2) + options.y; var m = touch.createObject(root, {toX: x, toY: y}); m.touch(); } @@ -176,12 +186,19 @@ /** * Simulate a touch */ -An.prototype.swipe = function(obj) { +An.prototype.swipe = function(opt) { + var options = getOpts({ + fromX: 0, + fromY: 0, + toX: 0, + toY: 0 + }, opt); + for (var n = 0; n < this.nodes.length; n++) { var node = this.nodes[n]; - var x = node.mapToItem(null, 0, 0).x + Math.floor(node.width / 2) + obj.fromX; - var y = node.mapToItem(null, 0, 0).y + Math.floor(node.height / 2) - Kirigami.Units.iconSizes.smallMedium / 2 + obj.fromY; - var t = touch.createObject(root, {fromX: x, fromY: y, toX: x + obj.toX, toY: y + obj.toY}); + var x = node.mapToItem(null, 0, 0).x + Math.floor(node.width / 2) + options.fromX; + var y = node.mapToItem(null, 0, 0).y + Math.floor(node.height / 2) - Kirigami.Units.iconSizes.smallMedium / 2 + options.fromY; + var t = touch.createObject(root, {fromX: x, fromY: y, toX: x + options.toX, toY: y + options.toY}); t.swipe(); } return this;