Merge lp:~tpeeters/ubuntu-ui-toolkit/toolbarScroll into lp:ubuntu-ui-toolkit/staging

[Tim Peeters]

Toolbar visual refresh to scroll the icons instead of using an overflow panel.

Toolbar visual refresh to scroll the icons instead of using an overflow panel.

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

FAILED: Continuous integration, rev:2048
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/1279/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6979/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/1279/rebuild

review: Needs Fixing (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

FAILED: Continuous integration, rev:2048
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-yakkety/93/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6980/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-yakkety/93/rebuild

review: Needs Fixing (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

FAILED: Continuous integration, rev:2048
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1529/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6981/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1529/rebuild

review: Needs Fixing (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

FAILED: Continuous integration, rev:2048
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/1313/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6982/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/1313/rebuild

review: Needs Fixing (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

FAILED: Continuous integration, rev:2048
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/1522/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6983/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/1522/rebuild

review: Needs Fixing (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

FAILED: Continuous integration, rev:2048
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci/817/
Executed test runs:
    FAILURE: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/1522/console
    FAILURE: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1529/console
    FAILURE: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/1313/console
    FAILURE: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/1279/console
    FAILURE: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-yakkety/93/console
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6984/console
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6983
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6981
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6982
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6979
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6980

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci/817/rebuild

review: Needs Fixing (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

FAILED: Continuous integration, rev:2050
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/1280/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6985/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/1280/rebuild

review: Needs Fixing (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

FAILED: Continuous integration, rev:2050
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/1314/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6986/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/1314/rebuild

review: Needs Fixing (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

FAILED: Continuous integration, rev:2050
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-yakkety/94/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6987/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-yakkety/94/rebuild

review: Needs Fixing (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

FAILED: Continuous integration, rev:2050
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1530/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6988/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1530/rebuild

review: Needs Fixing (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

FAILED: Continuous integration, rev:2050
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/1523/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6989/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/1523/rebuild

review: Needs Fixing (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

FAILED: Continuous integration, rev:2050
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci/818/
Executed test runs:
    FAILURE: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/1523/console
    FAILURE: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1530/console
    FAILURE: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/1314/console
    FAILURE: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/1280/console
    FAILURE: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-yakkety/94/console
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6990/console
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6989
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6988
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6986
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6985
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6987

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci/818/rebuild

review: Needs Fixing (continuous-integration)

[Zsombor Egri (zsombi)]

You have two new properties, forgot to update components.api?

Quite straight forward otherwise, no complains for the visuals :) But the red background on the gallery page is crap, the focus ring is not visible on it. I'd choose a different color for it, so when focused I won't look on where the hell the focus ring disappeared.

review: Needs Fixing

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

PASSED: Continuous integration, rev:2052
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/1282/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6996/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/1282/rebuild

review: Approve (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

PASSED: Continuous integration, rev:2052
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/1316/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6997/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/1316/rebuild

review: Approve (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

PASSED: Continuous integration, rev:2052
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-yakkety/96/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6998/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-yakkety/96/rebuild

review: Approve (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

PASSED: Continuous integration, rev:2052
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1532/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6999/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1532/rebuild

review: Approve (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

PASSED: Continuous integration, rev:2052
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/1525/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7000/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/1525/rebuild

review: Approve (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

PASSED: Continuous integration, rev:2052
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci/819/
Executed test runs:
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/1525
        deb: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/1525/artifact/artifacts/*zip*/artifacts.zip
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1532
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/1316
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/1282
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-yakkety/96
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7001/console
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7000
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6999
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6997
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6996
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/6998

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci/819/rebuild

review: Approve (continuous-integration)

[Tim Peeters (tpeeters)]

Comments from design (Femma and Jamie)

- The blue background indicates a selection (for "normal" list items). For the toolbar, we are not selecting an option, so it should not have the blue background.
- The disabled icon should also show the orange outline.

review: Needs Fixing

[Tim Peeters (tpeeters)]

Made the updates requested by design.

review: Abstain

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

PASSED: Continuous integration, rev:2056
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/1367/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7463/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/1367/rebuild

review: Approve (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

PASSED: Continuous integration, rev:2056
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/1402/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7464/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/1402/rebuild

review: Approve (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

PASSED: Continuous integration, rev:2056
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1617/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7465/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1617/rebuild

review: Approve (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

PASSED: Continuous integration, rev:2056
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-yakkety/181/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7466/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-yakkety/181/rebuild

review: Approve (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

PASSED: Continuous integration, rev:2056
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci/870/
Executed test runs:
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1617
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/1402
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/1367
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-yakkety/181
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7467/console
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7465
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7464
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7463
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7466

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci/870/rebuild

review: Approve (continuous-integration)

[Zsombor Egri (zsombi)]

Ok, I'm fine with it.

review: Approve

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

PASSED: Continuous integration, rev:2056
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/1369/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7472/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/1369/rebuild

review: Approve (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

PASSED: Continuous integration, rev:2056
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/1404/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7473/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/1404/rebuild

review: Approve (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

PASSED: Continuous integration, rev:2056
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-yakkety/183/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7474/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-yakkety/183/rebuild

review: Approve (continuous-integration)

[ubuntu-sdk-build-bot (ubuntu-sdk-build-bot)]

PASSED: Continuous integration, rev:2056
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1619/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/7475/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1619/rebuild

review: Approve (continuous-integration)

=== modified file 'components.api'
--- components.api	2016-09-17 05:48:25 +0000
+++ components.api	2017-01-20 11:43:20 +0000
@@ -1619,6 +1619,8 @@
     property bool opened
     property Item pageStack
 Ubuntu.Components.Styles.ToolbarStyle 1.3: Item
+    property color backgroundColor
+    readonly property ActionItemProperties buttons
     property Component defaultDelegate
 Ubuntu.Components.Type: Enum
     Bool

=== added file 'examples/ubuntu-ui-toolkit-gallery/Toolbars.qml'
--- examples/ubuntu-ui-toolkit-gallery/Toolbars.qml	1970-01-01 00:00:00 +0000
+++ examples/ubuntu-ui-toolkit-gallery/Toolbars.qml	2017-01-20 11:43:20 +0000
@@ -0,0 +1,253 @@
+/*
+ * Copyright 2016 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+
+Template {
+    objectName: "toolbarTemplate"
+    id: toolbarTemplate
+
+    property list<Action> actionList:  [
+        Action {
+            iconName: "alarm-clock"
+            text: "Tick tock"
+        },
+        Action {
+            iconName: "appointment"
+            text: "Date"
+        },
+        Action {
+            iconName: "attachment"
+            text: "Attach"
+        },
+        Action {
+            iconName: "contact"
+            text: "Contact"
+        },
+        Action {
+            iconName: "like"
+            text: "Like"
+        },
+        Action {
+            iconName: "lock"
+            text: "Lock"
+        }
+    ]
+
+    property list<Action> longActionList:  [
+        Action {
+            iconName: "alarm-clock"
+            text: "Tick tock"
+            onTriggered: print("tock")
+        },
+        Action {
+            iconName: "appointment"
+            text: "Date"
+            onTriggered: print("date")
+        },
+        Action {
+            iconName: "attachment"
+            text: "Attach"
+            onTriggered: print("attach")
+        },
+        Action {
+            iconName: "contact"
+            text: "Contact"
+            onTriggered: print("contact")
+        },
+        Action {
+            iconName: "like"
+            text: "Like"
+            onTriggered: print("+1")
+        },
+        Action {
+            iconName: "lock"
+            text: "Lock"
+            onTriggered: print("lock")
+        },
+        Action {
+            iconName: "camcorder"
+            text: "Camera"
+            onTriggered: print("cam")
+        },
+        Action {
+            iconName: "location"
+            text: "Location"
+            onTriggered: print("loc")
+            enabled: false
+        },
+        Action {
+            iconName: "message"
+            text: "Message"
+            onTriggered: print("msg")
+        },
+        Action {
+            iconName: "livetv"
+            text: "Television"
+            onTriggered: print("tv")
+        },
+        Action {
+            iconName: "lock-broken"
+            text: "Unlock"
+            onTriggered: print("unlock")
+        },
+        Action {
+            iconName: "compose"
+            text: "Edit"
+            onTriggered: print("edit")
+        },
+        Action {
+            iconName: "contact-new"
+            text: "Add user"
+            onTriggered: print("useradd")
+        },
+        Action {
+            iconName: "crop"
+            text: "Crop"
+            onTriggered: print("crop")
+        },
+        Action {
+            iconName: "edit-cut"
+            text: "Cut"
+            onTriggered: print("cut")
+        },
+        Action {
+            iconName: "image-quality"
+            text: "Image quality"
+            onTriggered: print("image quality")
+        },
+        Action {
+            iconName: "import"
+            text: "Import"
+            onTriggered: print("import")
+        },
+        Action {
+            iconName: "history"
+            text: "History"
+            onTriggered: print("history")
+        },
+        Action {
+            iconName: "media-eject"
+            text: "Eject"
+            onTriggered: print("eject")
+        }
+    ]
+
+    property list<Action> deleteActionList: [
+        Action {
+            iconName: "delete"
+            text: "Delete"
+            onTriggered: print("delete")
+        }
+    ]
+
+    header: PageHeader {
+        id: h
+        title: toolbarTemplate.title
+        property bool longList: false
+        extension: Toolbar {
+            id: headerToolbar
+            anchors {
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
+            leadingActionBar.actions: deleteActionList
+            trailingActionBar.actions: h.longList ? longActionList : actionList
+        }
+        trailingActionBar.actions: [
+            Action {
+                iconName: h.longList ? "remove" : "add"
+                text: h.longList ? "less" : "more"
+                onTriggered: {
+                    h.longList = !h.longList;
+                }
+            }
+        ]
+    }
+
+    TemplateSection {
+        title: "Toolbar"
+        className: "Toolbar"
+
+        TemplateRow {
+            width: parent.width
+            title: i18n.tr("Enabled")
+            Toolbar {
+                width: parent.width
+                trailingActionBar.actions: actionList
+                leadingActionBar.actions: deleteActionList
+            }
+        }
+        TemplateRow {
+            title: i18n.tr("Disabled")
+            Toolbar {
+                width: parent.width
+                trailingActionBar.actions: actionList
+                leadingActionBar.actions: deleteActionList
+                enabled: false
+            }
+        }
+    }
+
+    TemplateSection {
+        title: "Scrollable toolbar"
+        className: "Toolbar"
+
+        TemplateRow {
+            title: i18n.tr("Enabled")
+            Toolbar {
+                width: parent.width
+                trailingActionBar.actions: longActionList
+                leadingActionBar.actions: deleteActionList
+            }
+        }
+        TemplateRow {
+            title: i18n.tr("Disabled")
+            Toolbar {
+                width: parent.width
+                trailingActionBar.actions: longActionList
+                leadingActionBar.actions: deleteActionList
+                enabled: false
+            }
+        }
+    }
+
+    TemplateSection {
+        title: "Colored"
+        className: "ActionBarStyle"
+
+        TemplateRow {
+            title: "Green"
+            Toolbar {
+                width: parent.width
+                trailingActionBar.actions: longActionList
+                leadingActionBar.actions: deleteActionList
+                StyleHints {
+                    ignoreUnknownProperties: false
+                    backgroundColor: UbuntuColors.green
+                    buttons {
+                        foregroundColor: "white"
+                        disabledForegroundColor: UbuntuColors.silk
+                        pressedBackgroundColor: UbuntuColors.ash
+                        disabledBackgroundColor: UbuntuColors.slate
+                    }
+                }
+            }
+        }
+    }
+}

=== modified file 'examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml'
--- examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml	2016-01-20 20:15:42 +0000
+++ examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml	2017-01-20 11:43:20 +0000
@@ -143,6 +143,12 @@
         source: "Toggles.qml"
     }
     ListElement {
+        objectName: "toolbarsElement"
+        label: "Toolbar"
+        source: "Toolbars.qml"
+    }
+
+    ListElement {
         objectName: "ubuntuListViewElement"
         label: "Ubuntu ListView"
         source: "UbuntuListViews.qml"

=== modified file 'src/imports/Components/1.3/Toolbar.qml'
--- src/imports/Components/1.3/Toolbar.qml	2016-05-25 12:48:10 +0000
+++ src/imports/Components/1.3/Toolbar.qml	2017-01-20 11:43:20 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2015 Canonical Ltd.
+ * Copyright 2016 Canonical Ltd.
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU Lesser General Public License as published by
@@ -127,6 +127,17 @@
                 print("WARNING: Toolbar with more than one leading actions is not supported.");
             }
         }
+        StyleHints {
+            backgroundColor: "transparent" // background is drawn by the toolbarStyle
+            buttons {
+                foregroundColor: toolbar.__styleInstance.buttons.foregroundColor
+                pressedForegroundColor: toolbar.__styleInstance.buttons.pressedForegroundColor
+                disabledForegroundColor: toolbar.__styleInstance.buttons.disabledForegroundColor
+                backgroundColor: toolbar.__styleInstance.buttons.backgroundColor
+                pressedBackgroundColor: toolbar.__styleInstance.buttons.pressedBackgroundColor
+                disabledBackgroundColor: toolbar.__styleInstance.buttons.disabledBackgroundColor
+            }
+        }
     }
 
     /*!
@@ -150,19 +161,29 @@
     readonly property alias trailingActionBar: trailing
     ActionBar {
         id: trailing
+        styleName: "ScrollingActionBarStyle"
         anchors {
+            left: leading.right
             right: parent.right
             top: parent.top
             bottom: parent.bottom
+            leftMargin: units.gu(1)
             rightMargin: units.gu(1)
         }
-        numberOfSlots: 8
         delegate: toolbar.__styleInstance.defaultDelegate
-        Component.onCompleted: {
-            if (actions && actions.length > 8) {
-                print("WARNING: Toolbar with more than one leading actions is not supported.");
+        StyleHints {
+            backgroundColor: "transparent" // background is drawn by the toolbarStyle
+            buttons {
+                foregroundColor: toolbar.__styleInstance.buttons.foregroundColor
+                pressedForegroundColor: toolbar.__styleInstance.buttons.pressedForegroundColor
+                disabledForegroundColor: toolbar.__styleInstance.buttons.disabledForegroundColor
+                backgroundColor: toolbar.__styleInstance.buttons.backgroundColor
+                pressedBackgroundColor: toolbar.__styleInstance.buttons.pressedBackgroundColor
+                disabledBackgroundColor: toolbar.__styleInstance.buttons.disabledBackgroundColor
+            }
+            scrollButtons {
+                backgroundColor: toolbar.__styleInstance.backgroundColor // must be opaque to hide the icon buttons
             }
         }
-
     }
 }

=== modified file 'src/imports/Components/1.3/UbuntuListView.qml'
--- src/imports/Components/1.3/UbuntuListView.qml	2016-09-22 17:39:59 +0000
+++ src/imports/Components/1.3/UbuntuListView.qml	2017-01-20 11:43:20 +0000
@@ -199,10 +199,10 @@
         color: root.activeFocus
                ? theme.palette.focused.background
                : theme.palette.selected.background
-        width: root.currentItem.width
-        height: root.currentItem.height
+        width: root.currentItem ? root.currentItem.width : 0
+        height: root.currentItem ? root.currentItem.height : 0
         // FIXME: use opacity yet, until we fix the palette's disabled.background color
-        opacity: root.currentItem.enabled ? 1.0 : 0.5
+        opacity: root.currentItem && root.currentItem.enabled ? 1.0 : 0.5
     }
     highlightMoveDuration: 50
 }

=== modified file 'src/imports/Components/Styles/1.3/ToolbarStyle.qml'
--- src/imports/Components/Styles/1.3/ToolbarStyle.qml	2015-12-02 13:02:44 +0000
+++ src/imports/Components/Styles/1.3/ToolbarStyle.qml	2017-01-20 11:43:20 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2015 Canonical Ltd.
+ * Copyright 2016 Canonical Ltd.
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU Lesser General Public License as published by
@@ -25,6 +25,16 @@
   */
 Item {
     /*!
+      The color of the background of the action bar.
+     */
+    property color backgroundColor
+
+    /*!
+      Configuration of the colors of the action buttons in the action bar.
+     */
+    readonly property ActionItemProperties buttons: ActionItemProperties { }
+
+    /*!
       The default action delegate if the styled item does
       not provide a different delegate.
      */

=== modified file 'src/imports/Components/Themes/Ambiance/1.3/ScrollingActionBarStyle.qml'
--- src/imports/Components/Themes/Ambiance/1.3/ScrollingActionBarStyle.qml	2016-10-03 14:07:38 +0000
+++ src/imports/Components/Themes/Ambiance/1.3/ScrollingActionBarStyle.qml	2017-01-20 11:43:20 +0000
@@ -113,7 +113,11 @@
             model: listViewContainer.visibleActions
 
             highlight: Rectangle {
-                color: theme.palette.focused.background
+                color: "transparent"
+                border {
+                    color: theme.palette.selected.focus
+                    width: 2
+                }
                 visible: actionsListView.activeFocus
                 width: actionsListView.currentItem.width
                 height: actionsListView.currentItem.height

=== modified file 'src/imports/Components/Themes/Ambiance/1.3/ToolbarStyle.qml'
--- src/imports/Components/Themes/Ambiance/1.3/ToolbarStyle.qml	2016-09-19 07:24:45 +0000
+++ src/imports/Components/Themes/Ambiance/1.3/ToolbarStyle.qml	2017-01-20 11:43:20 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2015 Canonical Ltd.
+ * Copyright 2016 Canonical Ltd.
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU Lesser General Public License as published by
@@ -24,16 +24,49 @@
     // reduce toolbar height on phone in landscape orientation:
     implicitHeight: Screen.height > units.gu(50) ? units.gu(4) : units.gu(3)
 
+    backgroundColor: theme.palette.normal.background
+    buttons {
+        foregroundColor: theme.palette.normal.backgroundText
+        pressedForegroundColor: buttons.foregroundColor
+        disabledForegroundColor: theme.palette.disabled.backgroundText
+        backgroundColor: "transparent" // background is already colored
+        pressedBackgroundColor: theme.palette.highlighted.background
+        disabledBackgroundColor: buttons.backgroundColor
+    }
+
     /*!
       The default action delegate if the styled item does
       not provide a delegate.
      */
-    defaultDelegate: AbstractButton {
-        style: IconButtonStyle { }
-        objectName: action.objectName + "_button"
-        height: parent ? parent.height : undefined
+    defaultDelegate: ListItem {
         width: units.gu(4)
-        action: modelData
-        activeFocusOnTab: true
+        height: toolbarStyle.height
+        enabled: modelData.enabled
+        objectName: modelData.objectName + "_button"
+        onClicked: button.trigger()
+        AbstractButton {
+            id: button
+            anchors.fill: parent
+            style: IconButtonStyle {
+                foregroundColor: button.pressed ?
+                                     toolbarStyle.buttons.pressedForegroundColor :
+                                     button.enabled ?
+                                         toolbarStyle.buttons.foregroundColor :
+                                         toolbarStyle.buttons.disabledForegroundColor
+                backgroundColor: button.pressed ?
+                                     toolbarStyle.buttons.pressedBackgroundColor :
+                                     button.enabled ?
+                                         toolbarStyle.buttons.backgroundColor :
+                                         toolbarStyle.buttons.disabledBackgroundColor
+            }
+            action: modelData
+            activeFocusOnTab: false
+        }
+        divider.visible: false
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: toolbarStyle.backgroundColor
     }
 }