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

[Tim Peeters]

Add header subtitle.

Add subtitle support to the PageHeader.

[lp:~tpeeters/ubuntu-ui-toolkit/subtitle]

1922. By Tim Peeters on 2016-03-30

clean

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

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

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

review: Approve (continuous-integration)

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

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

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

review: Approve (continuous-integration)

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

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

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

review: Approve (continuous-integration)

[lp:~tpeeters/ubuntu-ui-toolkit/subtitle]

1923. By Tim Peeters on 2016-03-30

clean

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

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

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

review: Approve (continuous-integration)

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

PASSED: Continuous integration, rev:1921
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci/214/
Executed test runs:
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/580
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/592
        deb: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/592/artifact/artifacts/*zip*/artifacts.zip
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/360
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/335
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/2185/console
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/2175
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/2176
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/2174
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/2184

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

review: Approve (continuous-integration)

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

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

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

review: Approve (continuous-integration)

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

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

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

review: Approve (continuous-integration)

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

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

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

review: Approve (continuous-integration)

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

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

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

review: Approve (continuous-integration)

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

PASSED: Continuous integration, rev:1923
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci/217/
Executed test runs:
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/583
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/595
        deb: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/595/artifact/artifacts/*zip*/artifacts.zip
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/363
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/338
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/2193/console
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/2190
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/2191
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/2189
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/2192

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

review: Approve (continuous-integration)

[Zsombor Egri (zsombi)]

Check the ones inline.

review: Needs Fixing

[Tim Peeters (tpeeters)]

Replied inline.

[lp:~tpeeters/ubuntu-ui-toolkit/subtitle]

1924. By Tim Peeters on 2016-04-04

rename subtitle and extension to hasSubtitle and hasExtension

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

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

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

review: Approve (continuous-integration)

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

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

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

review: Approve (continuous-integration)

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

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

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

review: Approve (continuous-integration)

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

PASSED: Continuous integration, rev:1924
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci/233/
Executed test runs:
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/604
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/384
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/359
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/2285/console
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/2283
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/2282
    SUCCESS: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/2284

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

review: Approve (continuous-integration)

[Zsombor Egri (zsombi)]

Good to go.

review: Approve

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

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

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

review: Approve (continuous-integration)

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

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

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

review: Approve (continuous-integration)

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

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

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

review: Approve (continuous-integration)

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

review: Approve (continuous-integration)

=== modified file 'components.api'
--- components.api	2016-04-04 14:58:06 +0000
+++ components.api	2016-04-04 16:08:42 +0000
@@ -826,6 +826,7 @@
     readonly property ActionBar leadingActionBar
     property list<Action> navigationActions
     readonly property Sections sections
+    property string subtitle
     property string title
     readonly property ActionBar trailingActionBar
 Ubuntu.Components.Styles.PageHeaderStyle 1.3: Item
@@ -835,6 +836,8 @@
     property color disabledForegroundColor
     property color dividerColor
     property color foregroundColor
+    property color subtitleColor
+    property Component subtitleComponent
     property Component titleComponent
 Ubuntu.Components.PageStack 1.0 0.1: PageTreeNode
     property Item currentPage

=== modified file 'src/Ubuntu/Components/1.3/PageHeader.qml'
--- src/Ubuntu/Components/1.3/PageHeader.qml	2016-02-02 13:49:50 +0000
+++ src/Ubuntu/Components/1.3/PageHeader.qml	2016-04-04 16:08:42 +0000
@@ -54,9 +54,14 @@
     property string title
 
     /*!
-      The contents item to display in the header. By default the contents
-      is undefined, and setting it will disable showing of the title in
-      the header.
+      Displayed under the title.
+      Hidden when the \l contents Item is set.
+     */
+    property string subtitle
+
+    /*!
+      The contents item to display in the header. By default the contents is
+      undefined, and setting it will disable showing of the title and subtitle.
 
       Example:
       \qml
@@ -79,6 +84,7 @@
 
     Component.onCompleted: contentsHolder.updateContents()
     onContentsChanged: contentsHolder.updateContents()
+    onSubtitleChanged: contentsHolder.updateContents()
 
     Item {
         id: contentsHolder
@@ -94,6 +100,11 @@
             id: titleLoader
             anchors.fill: parent
         }
+        Loader {
+            id: subtitleLoader
+            anchors.fill: parent
+        }
+
         property Item previousContents: null
         property Item previousContentsParent: null
 
@@ -110,6 +121,11 @@
                 previousContents = null;
                 previousContentsParent = null;
                 titleLoader.sourceComponent = __styleInstance.titleComponent;
+                if (!subtitle) {
+                    subtitleLoader.sourceComponent = null;
+                } else {
+                    subtitleLoader.sourceComponent = __styleInstance.subtitleComponent;
+                }
             }
         }
 

=== modified file 'src/Ubuntu/Components/Styles/1.3/PageHeaderStyle.qml'
--- src/Ubuntu/Components/Styles/1.3/PageHeaderStyle.qml	2016-03-30 15:09:56 +0000
+++ src/Ubuntu/Components/Styles/1.3/PageHeaderStyle.qml	2016-04-04 16:08:42 +0000
@@ -35,6 +35,11 @@
     property color disabledForegroundColor
 
     /*!
+      The color of the (optional) subtitle.
+     */
+    property color subtitleColor
+
+    /*!
       The color of the background of the header.
      */
     property color backgroundColor
@@ -56,6 +61,11 @@
     property Component titleComponent
 
     /*!
+      The default component to display the subtitle.
+     */
+    property Component subtitleComponent
+
+    /*!
       The height of the header excluding the divider and extension.
      */
     property real contentHeight

=== modified file 'src/Ubuntu/Components/Themes/Ambiance/1.3/PageHeaderStyle.qml'
--- src/Ubuntu/Components/Themes/Ambiance/1.3/PageHeaderStyle.qml	2016-03-30 15:09:56 +0000
+++ src/Ubuntu/Components/Themes/Ambiance/1.3/PageHeaderStyle.qml	2016-04-04 16:08:42 +0000
@@ -23,26 +23,70 @@
 
     foregroundColor: theme.palette.normal.backgroundText
     disabledForegroundColor: theme.palette.disabled.backgroundText
+    subtitleColor: theme.palette.normal.backgroundTertiaryText
     backgroundColor: theme.palette.normal.background
     dividerColor: theme.palette.normal.base
+
+    // Font weight for the title and subtitle
     property int fontWeight: Font.Light
+
+    // Text size for title
     property int textSize: Label.Large
 
-    // reduced content height on a phone in landscape mode
-    contentHeight: Screen.height > units.gu(50) ? units.gu(6) : units.gu(5)
+    // Text size for subtitle
+    property int subTextSize: internal.landscape ? Label.Small : Label.Medium
+
+    contentHeight: internal.titleAreaHeight + internal.titleBottomSpacing
     implicitHeight: contentHeight + divider.height + internal.extensionHeight
 
+    Component.onCompleted: internal.updateHeights()
     Object {
         id: internal
-        property real extensionHeight: styledItem.extension ?
-                                         styledItem.extension.height
+        property real extensionHeight: styledItem.extension
+                                       ? styledItem.extension.height
                                        : styledItem.sections.height
+
+        property bool landscape: Screen.height <= units.gu(50)
+        property bool hasSubtitle: styledItem.subtitle && !styledItem.contents
+        property bool hasExtension: styledItem.extension
+
+        // The height of the area in which the title and icons are vertically centered
+        property real titleAreaHeight
+        // Add to the content height for additional space under the title
+        property real titleBottomSpacing
+
+        onLandscapeChanged: updateHeights()
+        onHasSubtitleChanged: updateHeights()
+        onHasExtensionChanged: updateHeights()
+
+        function updateHeights() {
+            if (landscape) {
+                if (hasSubtitle) {
+                    // with subtitle, and with or without extension
+                    titleAreaHeight = units.gu(4);
+                    titleBottomSpacing = units.gu(2);
+                } else if (hasExtension) {
+                    titleAreaHeight = units.gu(4);
+                    titleBottomSpacing = units.gu(1);
+                } else {
+                    titleAreaHeight = units.gu(5)
+                    titleBottomSpacing = 0;
+                }
+            } else { // portrait
+                titleAreaHeight = units.gu(6);
+                if (hasSubtitle) {
+                    titleBottomSpacing = units.gu(1);
+                } else {
+                    titleBottomSpacing = 0;
+                }
+            }
+        }
     }
 
     defaultActionDelegate: AbstractButton {
         style: IconButtonStyle { }
         objectName: action.objectName + "_button"
-        height: parent ? parent.height : undefined
+        height: internal.titleAreaHeight
         action: modelData
         StyleHints {
             foregroundColor: enabled ? pageHeaderStyle.foregroundColor
@@ -50,24 +94,47 @@
         }
     }
 
-    titleComponent: Item {
-        // The wrapping inside the extra Item is needed to
-        //  be able to position the Label vertically. Without it,
-        //  the Loader resizes the Label to span the full height.
-        Label {
-            id: titleLabel
-            objectName: "header_title_label"
-            text: styledItem.title
-
-            anchors {
-                left: parent.left
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            color: pageHeaderStyle.foregroundColor
-            font.weight: pageHeaderStyle.fontWeight
-            textSize: pageHeaderStyle.textSize
-            elide: Text.ElideRight
+    titleComponent: Component {
+        Item {
+            // The wrapping inside the extra Item is needed to
+            //  be able to position the Label vertically. Without it,
+            //  the Loader resizes the Label to span the full height.
+            Label {
+                id: titleLabel
+                objectName: "header_title_label"
+                text: styledItem.title
+
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    verticalCenter: parent.verticalCenter
+                    verticalCenterOffset: -internal.titleBottomSpacing/2
+                }
+                color: pageHeaderStyle.foregroundColor
+                font.weight: pageHeaderStyle.fontWeight
+                textSize: pageHeaderStyle.textSize
+                elide: Text.ElideRight
+            }
+        }
+    }
+
+    subtitleComponent: Component {
+        Item {
+            // Item fills the contents height
+            Label {
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    baseline: parent.bottom
+                    baselineOffset: -units.gu(1)
+                }
+                objectName: "header_subtitle_label"
+                text: styledItem.subtitle
+                color: pageHeaderStyle.subtitleColor
+                visible: text != ""
+                textSize: pageHeaderStyle.subTextSize
+                font.weight: pageHeaderStyle.fontWeight
+            }
         }
     }
 

=== modified file 'tests/unit_x11/tst_components/tst_pageheader.qml'
--- tests/unit_x11/tst_components/tst_pageheader.qml	2016-03-30 15:09:56 +0000
+++ tests/unit_x11/tst_components/tst_pageheader.qml	2016-04-04 16:08:42 +0000
@@ -131,6 +131,7 @@
             z:1
 
             title: "Default title"
+            subtitle: subtitleSwitch.checked ? "This is amaaaaaazing" : ""
             contents: contentsSwitch.checked ? alternativeContents : null
             sections.actions: sectionsSwitch.checked ? root.sectionActions : []
             trailingActionBar.actions: trailingActionsSwitch.checked ?
@@ -232,7 +233,15 @@
                     checked: false
                 }
                 Label {
-                    text: "Resize with window"
+                    text: "resize with window"
+                }
+
+                Switch {
+                    id: subtitleSwitch
+                    checked: false
+                }
+                Label {
+                    text: "subtitle"
                 }
             }