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

[Tim Peeters]

Introduce IconButtonStyle.

Introduce IconButtonStyle.

This is an intermediate MR. In a following MR the PageHeadStyle will use the ActionBar (and to be added SectionsBar) component, and the (internal) PageHeadButton will be removed from the Ambience Theme.

ActionBar will have a delegate property which by default will be an AbstractButton using IconButtonStyle.

See also the API discussion for Button on https://docs.google.com/document/d/1MN-Uk15mLi0vbkmekhwzwrWCxIfh06fm9z2WmwwMll0/edit#

[lp:~tpeeters/ubuntu-ui-toolkit/90-IconButton]

1519. By Tim Peeters on 2015-05-22

new default icon size in IconButtonStyle

1520. By Tim Peeters on 2015-05-22

clean

1521. By Tim Peeters on 2015-05-22

clean

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1518
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1786/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/2924
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/514
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/516
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/516/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/513
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-mako/2505
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2922
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2922/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/20710

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1786/rebuild

review: Needs Fixing (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1521
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1788/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/2926
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/516
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/518
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/518/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/515
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-mako/2507
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2924
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2924/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/20711

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1788/rebuild

review: Needs Fixing (continuous-integration)

[Christian Dywan (kalikiana)]

89 + // prevent trying to render the icon with an invalid source
90 + // when the button is invisible by setting width and height to 0
91 + width: visible ? iconButtonStyle.iconWidth : 0
92 + height: visible ? iconButtonStyle.iconHeight : 0
93 + source: styledItem.iconSource

Of these two instances in the code none of them is without an icon. Where will this be used? Why can't this be solved in the Icon component? Or am I just confused over what this is supposed to be doing?

review: Needs Information

[lp:~tpeeters/ubuntu-ui-toolkit/90-IconButton]

1522. By Tim Peeters on 2015-05-26

no need to check visibility in Icon

[Tim Peeters (tpeeters)]

Right. There was a similar workaround in PageHeadButton; that's where I got this from. But after some investigation I think that workaround may be there for an issue with the header popping a page from the stack where the Image already gets destroyed before the Icon that shows it. Not an issue here.

[Christian Dywan (kalikiana)]

Cool. Thanks!

review: Approve

[PS Jenkins bot (ps-jenkins)]

review: Approve (continuous-integration)

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/1.3/ActionBarStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.3/ActionBarStyle.qml	2015-05-14 21:36:26 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.3/ActionBarStyle.qml	2015-05-26 10:54:29 +0000
@@ -58,19 +58,21 @@
         Repeater {
             objectName: "actions_repeater"
             model: numberOfSlots.used
-            PageHeadButton {
+            AbstractButton {
+                style: IconButtonStyle { }
                 id: actionButton
                 objectName: action.objectName + "_action_button"
+                height: actionsContainer.height
                 action: actionsContainer.visibleActions[index]
-                iconWidth: units.gu(2)
             }
         }
 
-        PageHeadButton {
+        AbstractButton {
+            style: IconButtonStyle { }
             id: actionsOverflowButton
             objectName: "actions_overflow_button"
+            height: actionsContainer.height
             visible: numberOfSlots.requested > numberOfSlots.available
-            iconWidth: units.gu(2)
 
             // Ensure resetting of X when this button is not visible to avoid
             // miscalculation of actionsContainer.width. Fixes bug #1408481.

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/1.3/IconButtonStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.3/IconButtonStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.3/IconButtonStyle.qml	2015-05-26 10:54:29 +0000
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2015 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
+
+Item {
+    id: iconButtonStyle
+
+    implicitWidth: units.gu(5)
+    implicitHeight: units.gu(5)
+
+    /*!
+      The color of the icons.
+     */
+    property color foregroundColor: "#808080"
+
+    /*!
+      The background color of the button.
+     */
+    property color backgroundColor: styledItem.pressed ?
+                                        theme.palette.selected.background :
+                                        "transparent"
+
+    property real iconWidth: units.gu(2)
+    property real iconHeight: iconWidth
+
+    /*!
+      Show a text label under the icon.
+     */
+    property bool showLabel: false
+
+    Rectangle {
+        id: background
+        color: iconButtonStyle.backgroundColor
+        anchors.fill: parent
+    }
+
+    Icon {
+        id: icon
+        anchors.centerIn: parent
+        width: iconButtonStyle.iconWidth
+        height: iconButtonStyle.iconHeight
+        source: styledItem.iconSource
+        color: iconButtonStyle.foregroundColor
+        opacity: styledItem.enabled ? 1.0 : 0.3
+    }
+
+    Component {
+        id: labelComponent
+        Label {
+            objectName: styledItem.objectName + "_label"
+            color: iconButtonStyle.foregroundColor
+            opacity: styledItem.enabled ? 1.0 : 0.3
+            text: styledItem.text
+            fontSize: "xx-small"
+        }
+    }
+    Loader {
+        anchors {
+            top: icon.bottom
+            topMargin: units.gu(0.5)
+            horizontalCenter: parent.horizontalCenter
+        }
+        sourceComponent: iconButtonStyle.showLabel ? labelComponent : null
+    }
+}

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/1.3/PageHeadButton.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.3/PageHeadButton.qml	2015-05-12 15:05:28 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.3/PageHeadButton.qml	2015-05-26 10:54:29 +0000
@@ -17,6 +17,7 @@
 import QtQuick 2.4
 import Ubuntu.Components 1.3
 
+// TODO: Remove this component when PageHeadStyle uses ActionBar
 AbstractButton {
     id: button
 

=== modified file 'tests/unit_x11/tst_components/tst_actionbar.qml'
--- tests/unit_x11/tst_components/tst_actionbar.qml	2015-05-14 21:41:16 +0000
+++ tests/unit_x11/tst_components/tst_actionbar.qml	2015-05-26 10:54:29 +0000
@@ -30,7 +30,7 @@
         },
         Action {
             iconName: "appointment"
-            text: "Appointment"
+            text: "Date"
         },
         Action {
             iconName: "attachment"

=== modified file 'tests/unit_x11/tst_components/tst_header_presets.qml'
--- tests/unit_x11/tst_components/tst_header_presets.qml	2015-03-03 13:20:06 +0000
+++ tests/unit_x11/tst_components/tst_header_presets.qml	2015-05-26 10:54:29 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2014 Canonical Ltd.
+ * Copyright 2015 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
@@ -35,6 +35,13 @@
                     objectName: "selectAction"
                     text: "Select all"
                     iconName: "select"
+                    onTriggered: {
+                        if (page.head.preset === "") {
+                            page.head.preset = "select";
+                        } else {
+                            page.head.preset = "";
+                        }
+                    }
                 }
             ]
         }