Commit f616ffa1 authored by Fabian Riethmayer's avatar Fabian Riethmayer

Added video to breadcrumb navigation and new images for primary action buttons

Summary: Added a videos showing the use of breadcrumb navigation and  primary action buttons in plasma mobile

Reviewers: colomar, mart, bshah, ngraham

Reviewed By: ngraham

Subscribers: ngraham, mart

Tags: #kde_human_interface_guidelines

Differential Revision: https://phabricator.kde.org/D16296
parent f727bcf2
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 @@ certain page of your application or for the whole application, which is
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 </patterns/command/drawer>`.
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 with 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
......@@ -50,3 +59,9 @@ If your application is using :doc:`column-based navigation </patterns/navigation
column
- If there is a Primary action for the context of a specific column,
associated with the respective page
.. figure:: /img/Actionbutton3.png
:figclass: border
:alt: Primary Action Buttons on Desktop
Primary Action Buttons are placed in a :doc:`toolbar <toolbar>`
Tool bar
========
.. figure:: /img/Actionbutton3.png
:figclass: border
:alt: Primary Action Buttons on Desktop
Toolbar with the most important actions :doc:`toolbar <toolbar>`
Purpose
-------
......
......@@ -15,6 +15,14 @@ structures (e.g. home > documents > business). It provides information about
the current position within the hierarchy, and offers shortcut links to jump
to previous positions without using the Back button.
.. raw:: html
<video src="https://cdn.kde.org/hig/video/20181026-1/Breadcrumb1.webm"
loop="true" playsinline="true" width="320" controls="true"
onended="this.play()" class="border"></video>
Use of breadcrumb navigation in Plasma Mobile.
When to use
-----------
......
......@@ -18,6 +18,7 @@
*/
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
......@@ -26,13 +27,14 @@ Item {
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 @@ Item {
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 @@ Item {
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();
}
}
......@@ -30,6 +30,8 @@ Item {
property int toX
property int toY
property int dur: 300
property var sequence;
property int i: 0
Rectangle {
id: ind
......@@ -83,6 +85,21 @@ Item {
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,12 +119,14 @@ Item {
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();
});
}
......@@ -116,10 +135,9 @@ Item {
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);
......
......@@ -129,11 +129,16 @@ An.prototype.eq = function(n) {
/**
* 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 @@ An.prototype.click = function(obj) {
/**
* 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 @@ An.prototype.hover = function(opt) {
/**
* 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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment