Merge lp:~bpierre/ubuntu-ui-toolkit/combobutton-standalone into lp:ubuntu-ui-toolkit/staging

[Pierre Bertet]

ComboButton: not based on Button anymore + style update

Remove the ButtonStyle dependency from the ComboButton in preparation for the new Button style.

[Zsombor Egri (zsombi)]

I wouldn't mind if the colors would be fixed here, so the palette would be used here as well.

review: Needs Fixing

[Pierre Bertet (bpierre)]

The component is now using the palette.

Consequently, we had to make a few visual changes, and the following properties are now disabled to prevent any issue:

- color
- gradient
- strokeColor
- dropdownColor

[Timo Jyrinki (timo-jyrinki)]

review: Approve (trigger ci, not real review)

[Timo Jyrinki (timo-jyrinki)]

maybe not enough to trigger, hmm. top-approve by SDK team member will definitely trigger CI, so if you're happy you can just try merging.

[Zsombor Egri (zsombi)]

API file is not up to date, so staging sync must be performed. Please be careful with the deprecation and property removals especially - you can break apps!

LAF is good, and in addition you could fix the gallery page resizing, when the ComboButtons are cut if the page width is too narrow. See the Sliders how it is done in case you face issues.

Not bad otherwise :)

review: Needs Fixing

[Pierre Bertet (bpierre)]

> API file is not up to date, so staging sync must be performed.

It should be fine now.

> Please be careful with the deprecation and property removals especially - you can break apps!

Yes, I only disabled their effects to not break the new style, the actual properties are still there with a warning.

> and in addition you could fix the gallery page resizing

Done.

Thanks for your feedback!

review: Needs Resubmitting

[Zsombor Egri (zsombi)]

Good to land! Thanks Pierre, excellent job!

review: Approve

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

FAILED: Autolanding.
No commit message was specified in the merge proposal. Hit 'Add commit message' on the merge proposal web page or follow the link below. You can approve the merge proposal yourself to rerun.
https://code.launchpad.net/~bpierre/ubuntu-ui-toolkit/combobutton-standalone/+merge/280703/+edit-commit-message

review: Needs Fixing (continuous-integration)

[Pierre Bertet (bpierre)]

review: Approve

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

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

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

review: Approve (continuous-integration)

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

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

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

review: Approve (continuous-integration)

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

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

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

review: Approve (continuous-integration)

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

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

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

review: Approve (continuous-integration)

=== modified file 'components.api'
--- components.api	2016-02-11 09:49:55 +0000
+++ components.api	2016-02-12 10:57:08 +0000
@@ -277,13 +277,18 @@
     property color dropdownColor
     property bool expanded
     property double expandedHeight
-Ubuntu.Components.ComboButton 1.3: Button
+Ubuntu.Components.ComboButton 1.3: AbstractButton
     property double collapsedHeight
+    property color color
     default property list<QtObject> comboList
     readonly property double comboListHeight
     property color dropdownColor
     property bool expanded
     property double expandedHeight
+    property QFont font
+    property Gradient gradient
+    property string iconPosition
+    property color strokeColor
 Ubuntu.Components.Styles.ComboButtonStyle 1.1: Item
     property Item comboListHolder
     property double comboListMargin

=== modified file 'examples/ubuntu-ui-toolkit-gallery/Buttons.qml'
--- examples/ubuntu-ui-toolkit-gallery/Buttons.qml	2015-12-21 20:17:16 +0000
+++ examples/ubuntu-ui-toolkit-gallery/Buttons.qml	2016-02-12 10:57:08 +0000
@@ -24,7 +24,7 @@
     TemplateSection {
         className: "Button"
 
-        TemplateRow {
+        TemplateFlow {
             title: i18n.tr("Standard")
 
             Button {
@@ -33,7 +33,7 @@
             }
         }
 
-        TemplateRow {
+        TemplateFlow {
             title: i18n.tr("Stroke")
 
             Button {
@@ -43,7 +43,7 @@
             }
         }
 
-        TemplateRow {
+        TemplateFlow {
             title: i18n.tr("Color")
 
             Button {
@@ -59,7 +59,7 @@
             }
         }
 
-        TemplateRow {
+        TemplateFlow {
             title: i18n.tr("Icon")
 
             Button {
@@ -68,7 +68,7 @@
             }
         }
 
-        TemplateRow {
+        TemplateFlow {
             title: i18n.tr("Icon+Text")
 
             Button {
@@ -87,7 +87,7 @@
             }
         }
 
-        TemplateRow {
+        TemplateFlow {
             title: i18n.tr("Disabled")
 
             Button {
@@ -101,12 +101,13 @@
     TemplateSection {
         className: "ComboButton"
 
-        TemplateRow {
+        TemplateFlow {
             title: i18n.tr("Collapsed")
 
             ComboButton {
                 text: "Press me"
                 objectName: "combobutton_collapsed"
+                width: parent.width < units.gu(30)? parent.width : units.gu(30)
                 comboList:  UbuntuListView {
                     model: 10
                     delegate: Standard {
@@ -116,11 +117,12 @@
             }
         }
 
-        TemplateRow {
+        TemplateFlow {
             title: i18n.tr("Icon")
 
             ComboButton {
                 iconSource: "call.png"
+                width: parent.width < units.gu(30)? parent.width : units.gu(30)
                 comboList:  UbuntuListView {
                     model: 10
                     delegate: Standard {
@@ -130,12 +132,13 @@
             }
         }
 
-        TemplateRow {
+        TemplateFlow {
             title: i18n.tr("Icon+Text")
 
             ComboButton {
                 text: "Answer"
                 iconSource: "call.png"
+                width: parent.width < units.gu(30)? parent.width : units.gu(30)
                 comboList:  UbuntuListView {
                     model: 10
                     delegate: Standard {
@@ -144,13 +147,14 @@
                 }
             }
         }
-        TemplateRow {
+        TemplateFlow {
             title: i18n.tr("Expanded")
 
             ComboButton {
                 text: "Press me"
                 objectName: "combobutton_expanded"
                 expanded: true
+                width: parent.width < units.gu(30)? parent.width : units.gu(30)
                 comboList:  UbuntuListView {
                     model: 10
                     delegate: Standard {

=== modified file 'examples/ubuntu-ui-toolkit-gallery/[e-mail]'
Binary files examples/ubuntu-ui-toolkit-gallery/[e-mail]	2013-06-29 22:36:27 +0000 and examples/ubuntu-ui-toolkit-gallery/[e-mail]	2016-02-12 10:57:08 +0000 differ
=== modified file 'src/Ubuntu/Components/1.3/ComboButton.qml'
--- src/Ubuntu/Components/1.3/ComboButton.qml	2015-08-20 06:56:44 +0000
+++ src/Ubuntu/Components/1.3/ComboButton.qml	2016-02-12 10:57:08 +0000
@@ -161,10 +161,68 @@
     \section2 Styling
     The style of the component is defined in \l ComboButtonStyle.
   */
-Button {
+AbstractButton {
     id: combo
 
     /*!
+      \deprecated
+      If set to a color, the button has a stroke border instead of a filled
+      shape.
+    */
+    property color strokeColor
+    onStrokeColorChanged: console.warn(
+        "WARNING: ComboButton.strokeColor is deprecated."
+    )
+
+    /*!
+      \deprecated
+      The background color of the button.
+    */
+    property color color
+    onColorChanged: console.warn("WARNING: ComboButton.color is deprecated.")
+
+    /*!
+      \deprecated
+      The gradient used to fill the background of the button.
+      Standard Ubuntu gradients are defined in \l UbuntuColors.
+      If both a gradient and a color are specified, the gradient will be used.
+    */
+    property Gradient gradient
+    onGradientChanged: console.warn(
+        "WARNING: ComboButton.gradient is deprecated."
+    )
+
+    /*!
+      \deprecated
+      The property specifies the color of the dropdown button and the combo
+      list for both collapsed and expanded states. You can use \l expanded to
+      define different colors for expanded or collapsed states.
+      */
+    property color dropdownColor
+    onDropdownColorChanged: console.warn(
+        "WARNING: ComboButton.dropdownColor is deprecated."
+    )
+
+    /*!
+      The font used for the button's text.
+    */
+    property font font: __styleInstance.defaultFont
+
+    /*!
+      The position of the icon relative to the text. Options
+      are "left" and "right". The default value is "left".
+
+      If only text or only an icon is defined, this
+      property is ignored and the text or icon is
+      centered horizontally and vertically in the button.
+
+      Currently this is a string value. We are waiting for
+      support for enums:
+      https://bugreports.qt-project.org/browse/QTBUG-14861
+    */
+    property string iconPosition: "left"
+
+    /*!
       Specifies whether the combo list is expanded or not. The default falue is
       false.
       */
@@ -239,15 +297,6 @@
       */
     default property alias comboList: comboListHolder.data
 
-    /* ----------------- Color and font configurations ----------------- */
-    /*!
-      The property specifies the color of the dropdown button and the combo list
-      for both collapsed and expanded states. You can use \l expanded to define
-      different colors for expanded or collapsed states.
-      */
-    property color dropdownColor: __styleInstance ? __styleInstance.defaultDropdownColor : color
-
-
     styleName: "ComboButtonStyle"
 
     Component.onCompleted: {
@@ -258,7 +307,7 @@
         __mouseArea.anchors.left = Qt.binding(function() {return combo.left;});
         __mouseArea.anchors.top = Qt.binding(function() {return combo.top;});
         __mouseArea.anchors.right = Qt.binding(function() {return combo.right;});
-        __mouseArea.anchors.rightMargin = Qt.binding(function() {return combo.__styleInstance.dropDownWidth + combo.__styleInstance.dropDownSeparatorWidth;});
+        __mouseArea.anchors.rightMargin = Qt.binding(function() {return combo.__styleInstance.dropDownWidth;});
         __mouseArea.height = Qt.binding(function() {return collapsedHeight;});
         // for autopilot, set the main button name
         __mouseArea.objectName = "combobutton_mainbutton";

=== modified file 'src/Ubuntu/Components/Themes/Ambiance/1.3/ComboButtonStyle.qml'
--- src/Ubuntu/Components/Themes/Ambiance/1.3/ComboButtonStyle.qml	2015-12-09 14:25:50 +0000
+++ src/Ubuntu/Components/Themes/Ambiance/1.3/ComboButtonStyle.qml	2016-02-12 10:57:08 +0000
@@ -23,20 +23,16 @@
 
     // configurations
     dropDownWidth: units.gu(5)
-    dropDownSeparatorWidth: units.dp(2)
     comboListMargin: units.gu(0.8)
     comboListHolder: comboListContent
     comboListPanel: panelItem
     defaultColor: mainButton.defaultColor
     defaultGradient: mainButton.defaultGradient
-    defaultDropdownColor: combo.expanded ? Qt.rgba(0, 0, 0, 0.05) : defaultColor
+    defaultDropdownColor: mainButton.defaultColor
     defaultFont: mainButton.defaultFont
 
-
-    width: combo.width
-    height: combo.collapsedHeight
-
-    property ComboButton combo: styledItem
+    width: styledItem.width
+    height: styledItem.collapsedHeight
 
     implicitWidth: mainButton.implicitWidth
     implicitHeight: mainButton.implicitHeight
@@ -44,25 +40,159 @@
     LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft
     LayoutMirroring.childrenInherit: true
 
-    ButtonStyle {
+    Item {
         id: mainButton
+
+        property real minimumWidth: units.gu(36)
+        property real horizontalPadding: units.gu(4)
+        property color defaultColor: theme.palette.normal.foreground
+        property font defaultFont: Qt.font({family: "Ubuntu", pixelSize: FontUtils.sizeToPixels("medium")})
+        property Gradient defaultGradient: null
+        property real buttonFaceOffset: -dropDownWidth/2
+        property bool stroke: false
+
+        /*!
+          The property overrides the button's default background with an item. This
+          item can be used by derived styles to reuse the ButtonStyle and override
+          the default coloured background with an image or any other drawing.
+          The default value is null.
+        */
+        property Item backgroundSource: comboFace
+
         anchors {
             left: parent.left
             top: parent.top
             right: parent.right
         }
-        height: combo.collapsedHeight
-        // overrides
-        backgroundSource: comboFace
-        buttonFaceOffset: -dropDownWidth/2 - dropDownSeparatorWidth
-        horizontalPadding: units.gu(4) - dropDownSeparatorWidth
-        minimumWidth: units.gu(36)
-
-        // FIXME: use hardcoded color while we get the theme palette updated
-        defaultColor: "#b2b2b2"
-        defaultGradient: null
-
-        // button face
+        width: styledItem.width
+        height: styledItem.collapsedHeight
+        implicitWidth: Math.max(
+            minimumWidth, foreground.implicitWidth + 2 * mainButton.horizontalPadding
+        )
+        implicitHeight: units.gu(4)
+
+        LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft
+        LayoutMirroring.childrenInherit: true
+
+        UbuntuShape {
+            id: background
+            anchors.fill: parent
+            borderSource: "radius_idle.sci"  // Deprecated, use a dedicated shape.
+            visible: mainButton.stroke ? false : ((backgroundColor.a != 0.0) || mainButton.backgroundSource)
+            source: mainButton.backgroundSource
+
+            backgroundColor: defaultColor
+            backgroundMode: UbuntuShape.SolidColor
+            opacity: styledItem.enabled ? 1.0 : 0.6
+        }
+
+        Item {
+            id: foreground
+
+            property string iconPosition: styledItem.iconPosition
+            property real iconSize: units.gu(2)
+            property real spacing: mainButton.horizontalPadding
+            property bool hasIcon: styledItem.iconSource != ""
+            property bool hasText: styledItem.text != ""
+
+            anchors {
+                centerIn: parent
+                horizontalCenterOffset: mainButton.buttonFaceOffset
+            }
+            transformOrigin: Item.Top
+            width: parent.width - 2*mainButton.horizontalPadding
+            implicitHeight: Math.max(foregroundIcon.height, foregroundLabel.height)
+            scale: styledItem.pressed ? 0.98 : 1.0
+            Behavior on scale {
+                NumberAnimation {
+                    duration: UbuntuAnimation.SnapDuration
+                    easing.type: Easing.Linear
+                }
+            }
+            state: foreground.hasIcon && hasText ? iconPosition : "center"
+
+            Icon {
+                id: foregroundIcon
+                visible: foreground.hasIcon
+                anchors.verticalCenter: parent.verticalCenter
+                width: foreground.iconSize
+                height: foreground.iconSize
+                color: foregroundLabel.color
+                source: styledItem.iconSource
+            }
+
+            Label {
+                id: foregroundLabel
+                anchors.verticalCenter: parent.verticalCenter
+                elide: Text.ElideRight
+                color: theme.palette.normal.foregroundText
+                font: styledItem.font
+                text: styledItem.text
+            }
+
+            states: [
+                State {
+                    name: "left"
+                    AnchorChanges {
+                        target: foregroundIcon
+                        anchors.left: foreground.left
+                    }
+                    AnchorChanges {
+                        target: foregroundLabel
+                        anchors.left: foregroundIcon.right
+                    }
+                    PropertyChanges {
+                        target: foregroundLabel
+                        anchors.leftMargin: spacing
+                        width: foreground.width - foregroundIcon.width - spacing
+                    }
+                    PropertyChanges {
+                        target: foreground
+                        implicitWidth: foregroundIcon.implicitWidth + spacing + foregroundLabel.implicitWidth
+                    }
+                },
+                State {
+                    name: "right"
+                    AnchorChanges {
+                        target: foregroundIcon
+                        anchors.right: foreground.right
+                    }
+                    AnchorChanges {
+                        target: foregroundLabel
+                        anchors.right: foregroundIcon.left
+                    }
+                    PropertyChanges {
+                        target: foregroundLabel
+                        anchors.rightMargin: spacing
+                        width: foreground.width - foregroundIcon.width - spacing
+                    }
+                    PropertyChanges {
+                        target: foreground
+                        implicitWidth: foregroundIcon.implicitWidth + spacing + foregroundLabel.implicitWidth
+                    }
+                },
+                State {
+                    name: "center"
+                    AnchorChanges {
+                        target: foregroundIcon
+                        anchors.horizontalCenter: foreground.horizontalCenter
+                    }
+                    AnchorChanges {
+                        target: foregroundLabel
+                        anchors.horizontalCenter: foreground.horizontalCenter
+                    }
+                    PropertyChanges {
+                        target: foregroundLabel
+                        width: Math.min(foregroundLabel.implicitWidth, foreground.width)
+                    }
+                    PropertyChanges {
+                        target: foreground
+                        implicitWidth: foreground.hasText ? foregroundLabel.implicitWidth : foregroundIcon.implicitWidth
+                    }
+                }
+            ]
+        }
+
         ShaderEffectSource {
             id: comboFace
             sourceItem: content
@@ -79,23 +209,13 @@
             width: mainButton.width
             height: mainButton.height
 
+            // button background
             Rectangle {
                 anchors {
                     fill: parent
-                    rightMargin: comboStyle.dropDownSeparatorWidth + comboStyle.dropDownWidth
-                }
-                color: combo.color
-                gradient: mainButton.isGradient ? combo.gradient : null
-            }
-
-            // distancer
-            Item {
-                anchors {
-                    right: dropDownButton.right
-                    top: parent.top
-                    bottom: parent.bottom
-                }
-                width: comboStyle.dropDownSeparatorWidth
+                    rightMargin: comboStyle.dropDownWidth
+                }
+                color: defaultColor
             }
 
             Rectangle {
@@ -107,11 +227,13 @@
                     bottom: parent.bottom
                 }
                 width: comboStyle.dropDownWidth
-                color: mainButton.__colorHack(combo.dropdownColor)
-                Image {
-                    source: Qt.resolvedUrl("../artwork/chevron.png")
+                color: defaultDropdownColor
+                Icon {
                     anchors.centerIn: parent
-                    rotation: combo.expanded ? -90 : 90
+                    height: parent.height / 2
+                    width: height
+                    name: styledItem.expanded? "up" : "down"
+                    color: foregroundLabel.color
                 }
             }
         }
@@ -125,7 +247,7 @@
             top: mainButton.bottom
             right: parent.right
         }
-        opacity: combo.expanded && (combo.comboList.length > 0)? 1.0 : 0.0
+        opacity: styledItem.expanded && (styledItem.comboList.length > 0)? 1.0 : 0.0
 
         ShaderEffectSource {
             id: listContent
@@ -144,42 +266,18 @@
                 topMargin: comboListMargin
             }
             clip: true
-            color: mainButton.__colorHack(combo.dropdownColor)
+            color: defaultDropdownColor
         }
 
-        BorderImage {
-            id: shadow
-            anchors {
-                fill: parent
-                leftMargin: -units.gu(0.5)
-                topMargin: comboListMargin - units.gu(0.5)
-                rightMargin: -units.gu(0.5)
-                bottomMargin: -units.gu(0.5)
-            }
-            source: Qt.resolvedUrl("../artwork/bubble_shadow.sci")
-        }
         UbuntuShape {
             id: shape
             anchors {
                 fill: parent
                 topMargin: comboListMargin
             }
-            visible: true
             source: listContent
         }
 
-        Image {
-            source: Qt.resolvedUrl("../artwork/bubble_arrow.png")
-            rotation: 180
-            anchors {
-                bottom: shape.top
-                bottomMargin: -1
-                right: parent.right
-                rightMargin: dropDownWidth / 2 - units.gu(0.5)
-            }
-
-        }
-
         Behavior on height {
             NumberAnimation {
                 duration: UbuntuAnimation.FastDuration