Ubuntu UI Toolkit

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

  1. 40-headerVisuals
  2. Merge into staging
Proposed by Tim Peeters on 2015-03-26
Status: Merged
Approved by: Tim Peeters on 2015-04-07
Approved revision: 1494
Merged at revision: 1466
Proposed branch: lp:~tpeeters/ubuntu-ui-toolkit/40-headerVisuals
Merge into: lp:ubuntu-ui-toolkit/staging
Prerequisite: lp:~tpeeters/ubuntu-ui-toolkit/35-tstHeaderActions
Diff against target: 201 lines (+53/-39)
4 files modified
modules/Ubuntu/Components/Styles/PageHeadStyle.qml (+3/-3)
modules/Ubuntu/Components/Themes/Ambiance/HeadDividerStyle.qml (+3/-0)
modules/Ubuntu/Components/Themes/Ambiance/PageHeadButton.qml (+1/-1)
modules/Ubuntu/Components/Themes/Ambiance/PageHeadStyle.qml (+46/-35)
To merge this branch: bzr merge lp:~tpeeters/ubuntu-ui-toolkit/40-headerVisuals
Reviewer Review Type Date Requested Status
PS Jenkins bot continuous-integration Approve on 2015-04-07
Zsombor Egri (community) 2015-03-26 Approve on 2015-04-02
Review via email: mp+254231@code.launchpad.net

Commit Message

New header visuals.

Description of the Change

New header visuals. Specs are here: https://docs.google.com/a/canonical.com/presentation/d/1wZ09SVZPwwJOccG4Rqu5JaHDuWw051oSKjf0uJHUyO8/edit#slide=id.g8d903971d_010

Style API for configuring the header will be added in a following MR.

An easy way to see the new header in action is:

tim@ubuntu:~/dev/ubuntu-ui-toolkit/m/40-headerVisuals/tests/unit_x11/tst_components$ ../../launcher/launcher tst_header_actions.qml

and:

headerVisuals/tests/unit_x11/tst_components$ ../../launcher/launcher tst_header_sections.qml

To post a comment you must log in.
PS Jenkins bot (ps-jenkins) wrote :

FAILED: Continuous integration, rev:1491
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1600/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/1986/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/327/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/330/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/327/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/1984/console

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

review: Needs Fixing (continuous-integration)
PS Jenkins bot (ps-jenkins) wrote :

FAILED: Continuous integration, rev:1492
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1605/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/2013
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/332
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/335
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/335/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/332
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-mako/1774
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2011
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2011/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/19240

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

review: Needs Fixing (continuous-integration)
PS Jenkins bot (ps-jenkins) wrote :

FAILED: Continuous integration, rev:1493
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1614/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/2059
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/341
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/344
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/344/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/341
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-mako/1812
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2057
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2057/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/19312

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

review: Needs Fixing (continuous-integration)
PS Jenkins bot (ps-jenkins) wrote :

FAILED: Continuous integration, rev:1494
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1625/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/2086
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/352
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/355
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/355/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/352
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-mako/1837
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2084
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/2084/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/19355

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

review: Needs Fixing (continuous-integration)
Zsombor Egri (zsombi) wrote :

Looks good now.

review: Approve
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
Tim Peeters (tpeeters) wrote :

ERROR: Publisher hudson.tasks.junit.JUnitResultArchiver aborted due to exception
/var/lib/jenkins/slaves/cloud-worker-07/workspace/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci does not exist.

Autolanding failed with a known CI issue. They are working on it.

Francis Ginther (fginther) wrote :
PS Jenkins bot (ps-jenkins) :
review: Approve (continuous-integration)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'modules/Ubuntu/Components/Styles/PageHeadStyle.qml'
2--- modules/Ubuntu/Components/Styles/PageHeadStyle.qml 2015-03-03 13:47:48 +0000
3+++ modules/Ubuntu/Components/Styles/PageHeadStyle.qml 2015-04-01 14:38:06 +0000
4@@ -1,5 +1,5 @@
5 /*
6- * Copyright 2014 Canonical Ltd.
7+ * Copyright 2014-2015 Canonical Ltd.
8 *
9 * This program is free software; you can redistribute it and/or modify
10 * it under the terms of the GNU Lesser General Public License as published by
11@@ -25,8 +25,8 @@
12 */
13 Item {
14 /*!
15- The height of the headercontents, which is the full height of
16- the header minus the separators shown at the bottom of it.
17+ The height of the header excluding the height of the bottom divider and
18+ the (optional) row that displays the sections.
19 */
20 property real contentHeight
21
22
23=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/HeadDividerStyle.qml'
24--- modules/Ubuntu/Components/Themes/Ambiance/HeadDividerStyle.qml 2015-03-03 12:53:42 +0000
25+++ modules/Ubuntu/Components/Themes/Ambiance/HeadDividerStyle.qml 2015-04-01 14:38:06 +0000
26@@ -15,6 +15,9 @@
27 */
28 import QtQuick 2.4
29
30+/*!
31+ This component is DEPRECATED and no longer used. The divider is now a simple line.
32+ */
33 Item {
34 id: dividerStyle
35
36
37=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/PageHeadButton.qml'
38--- modules/Ubuntu/Components/Themes/Ambiance/PageHeadButton.qml 2015-03-03 13:47:48 +0000
39+++ modules/Ubuntu/Components/Themes/Ambiance/PageHeadButton.qml 2015-04-01 14:38:06 +0000
40@@ -20,7 +20,7 @@
41 AbstractButton {
42 id: button
43
44- property real iconWidth: units.gu(2.5)
45+ property real iconWidth: units.gu(2)
46 property real iconHeight: iconWidth
47
48 width: visible ? units.gu(5) : 0
49
50=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/PageHeadStyle.qml'
51--- modules/Ubuntu/Components/Themes/Ambiance/PageHeadStyle.qml 2015-03-04 09:09:39 +0000
52+++ modules/Ubuntu/Components/Themes/Ambiance/PageHeadStyle.qml 2015-04-01 14:38:06 +0000
53@@ -22,9 +22,9 @@
54 Style.PageHeadStyle {
55 id: headerStyle
56 objectName: "PageHeadStyle" // used in unit tests
57- contentHeight: units.gu(7)
58+ contentHeight: units.gu(6)
59 fontWeight: Font.Light
60- fontSize: "x-large"
61+ fontSize: "large"
62 textLeftMargin: units.gu(2)
63 maximumNumberOfActions: 3
64
65@@ -68,7 +68,13 @@
66 */
67 property color sectionHighlightColor: Theme.palette.selected.background
68
69- implicitHeight: headerStyle.contentHeight + divider.height
70+ implicitHeight: headerStyle.contentHeight + divider.height + sectionsItem.height
71+
72+ /*!
73+ The height of the row displaying the sections, if sections are specified.
74+ */
75+ property real sectionsHeight: units.gu(4)
76+
77
78 // FIXME: Workaround to get sectionsRepeater.count in autopilot tests,
79 // see also FIXME in AppHeader where this property is used.
80@@ -83,50 +89,57 @@
81 // have a separator.
82 property alias __separator_visible: divider.visible
83
84- StyledItem {
85+ Rectangle {
86 id: divider
87 anchors {
88+ left: parent.left
89+ right: parent.right
90 bottom: parent.bottom
91+ }
92+ height: units.dp(1)
93+ color: styledItem.dividerColor
94+ }
95+
96+ Item {
97+ id: sectionsItem
98+ anchors {
99+ bottom: divider.top
100 left: parent.left
101 right: parent.right
102 }
103
104- height: sectionsRow.visible ? units.gu(3) : units.gu(2)
105-
106- // separatorSource and separatorBottomSource are needed for the deprecated
107- // HeadSeparatorImageStyle.
108- property url separatorSource: headerStyle.separatorSource
109- property url separatorBottomSource: headerStyle.separatorBottomSource
110-
111- // backgroundColor is used in the new HeadDividerStyle
112- property color backgroundColor: styledItem.dividerColor
113-
114- style: Theme.createStyleComponent("HeadDividerStyle.qml", divider)
115+ visible: sectionsItem.sections.model !== undefined
116+ height: visible ? headerStyle.sectionsHeight : 0
117
118 property PageHeadSections sections: styledItem.config.sections
119
120 Row {
121 id: sectionsRow
122- anchors.centerIn: parent
123+ anchors {
124+ top: parent.top
125+ bottom: parent.bottom
126+ horizontalCenter: parent.horizontalCenter
127+ }
128 width: childrenRect.width
129- height: parent.height
130- enabled: divider.sections.enabled
131- visible: divider.sections.model !== undefined
132+ enabled: sectionsItem.sections.enabled
133+ visible: sectionsItem.sections.model !== undefined
134 opacity: enabled ? 1.0 : 0.5
135
136 Repeater {
137 id: sectionsRepeater
138- model: divider.sections.model
139+ model: sectionsItem.sections.model
140 objectName: "page_head_sections_repeater"
141 AbstractButton {
142 id: sectionButton
143- anchors.verticalCenter: parent ? parent.verticalCenter : undefined
144+ anchors {
145+ top: parent.top
146+ bottom: parent.bottom
147+ }
148 objectName: "section_button_" + index
149 enabled: sectionsRow.enabled
150- width: label.width + units.gu(4)
151- height: sectionsRow.height + units.gu(2)
152- property bool selected: index === divider.sections.selectedIndex
153- onClicked: divider.sections.selectedIndex = index;
154+ width: label.width + units.gu(4) // FIXME: expose spacing as style property
155+ property bool selected: index === sectionsItem.sections.selectedIndex
156+ onClicked: sectionsItem.sections.selectedIndex = index;
157
158 Rectangle {
159 visible: parent.pressed
160@@ -134,7 +147,6 @@
161 verticalCenter: parent.verticalCenter
162 left: parent.left
163 right: parent.right
164- rightMargin: verticalDividerLine.width
165 }
166 height: sectionsRow.height
167 color: headerStyle.sectionHighlightColor
168@@ -144,25 +156,24 @@
169 id: label
170 text: modelData
171 fontSize: "small"
172- anchors.centerIn: sectionButton
173+ anchors.centerIn: parent
174 horizontalAlignment: Text.AlignHCenter
175 color: sectionButton.selected ?
176 headerStyle.selectedSectionColor :
177 headerStyle.sectionColor
178 }
179
180- // vertical divider line
181 Rectangle {
182- id: verticalDividerLine
183+ id: sectionLine
184 anchors {
185- verticalCenter: parent.verticalCenter
186+ bottom: parent.bottom
187+ left: parent.left
188 right: parent.right
189 }
190- height: units.dp(10)
191- width: units.dp(1)
192- visible: index < sectionsRepeater.model.length - 1
193- color: headerStyle.sectionColor
194- opacity: 0.2
195+ height: units.dp(2) // FIXME: Expose as style property
196+ color: sectionButton.selected ?
197+ headerStyle.selectedSectionColor :
198+ styledItem.dividerColor
199 }
200 }
201 }

Subscribers

People subscribed via source and target branches