Ubuntu UI Toolkit

Merge lp:~tpeeters/ubuntu-ui-toolkit/more-visual-updates into lp:ubuntu-ui-toolkit/staging

  1. more-visual-updates
  2. Merge into staging
Proposed by Tim Peeters
Status: Merged
Approved by: Tim Peeters
Approved revision: 1178
Merged at revision: 1171
Proposed branch: lp:~tpeeters/ubuntu-ui-toolkit/more-visual-updates
Merge into: lp:ubuntu-ui-toolkit/staging
Diff against target: 370 lines (+69/-36)
16 files modified
examples/ubuntu-ui-toolkit-gallery/Buttons.qml (+1/-1)
examples/ubuntu-ui-toolkit-gallery/Dialog.qml (+17/-10)
modules/Ubuntu/Components/Colors/UbuntuColors.qml (+4/-4)
modules/Ubuntu/Components/ListItems/Empty.qml (+17/-0)
modules/Ubuntu/Components/Popups/Dialog.qml (+2/-2)
modules/Ubuntu/Components/Themes/Ambiance/ButtonStyle.qml (+3/-1)
modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml (+6/-5)
modules/Ubuntu/Components/Themes/Ambiance/DialogForegroundStyle.qml (+1/-3)
modules/Ubuntu/Components/Themes/Ambiance/OptionSelectorStyle.qml (+2/-0)
modules/Ubuntu/Components/Themes/Ambiance/PageHeadButton.qml (+2/-2)
modules/Ubuntu/Components/Themes/Ambiance/Palette.qml (+1/-1)
modules/Ubuntu/Components/Themes/Ambiance/TextCursorStyle.qml (+3/-1)
modules/Ubuntu/Components/Themes/Ambiance/TextSelectionEndCursorStyle.qml (+4/-2)
modules/Ubuntu/Components/Themes/Ambiance/TextSelectionStartCursorStyle.qml (+4/-2)
modules/Ubuntu/Components/Themes/SuruDark/Palette.qml (+1/-1)
tests/autopilot/ubuntuuitoolkit/tests/gallery/test_buttons.py (+1/-1)
To merge this branch: bzr merge lp:~tpeeters/ubuntu-ui-toolkit/more-visual-updates
Reviewer Review Type Date Requested Status
PS Jenkins bot continuous-integration Approve
Cris Dywan Approve
Review via email: mp+228848@code.launchpad.net

Commit message

Visual updates: colors, icon sizes, semi-transparent buttons

Description of the change

Visual updates for several components:
- White dialog
- Re-enable listitem highlight when pressed or selected
- Update UbuntuColors
- Update icon sizes in header
- Fix slider color
- Update button colors in gallery
- Make disabled buttons semi-transparent
- Update checkbox colors and animation speed

To post a comment you must log in.
Revision history for this message
Cris Dywan (kalikiana) wrote :

150 + property color defaultColor: "#b2b2b2"

Can we use palette nor theme color here? Button color should be the most essential use case of theming.

107 + visible: !priv.removed && emptyListItem.swipingState === "" ? emptyListItem.selected || (emptyListItem.highlightWhenPressed && emptyListItem.pressed) : false

Please indent this line so that the ? is on its own line as well as the : to make it easier to read (and less ridiculously long).

review: Needs Fixing
Revision history for this message
Cris Dywan (kalikiana) :
review: Approve
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :

FAILED: Continuous integration, rev:1172
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/685/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/2723
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-utopic/2168/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/517/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/517
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/517/artifact/work/output/*zip*/output.zip
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/517/console
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/2828
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/3966
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/3966/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/10683
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-amd64/2427/console

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

review: Needs Fixing (continuous-integration)
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :

FAILED: Autolanding.
More details in the following jenkins job:
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-autolanding/293/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/2752/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-utopic/2193/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-autolanding/237/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-autolanding/237/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-autolanding/237/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/3995/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-amd64/2452/console

review: Needs Fixing (continuous-integration)
Revision history for this message
Cris Dywan (kalikiana) wrote :

Damn I should've caught that one. Obviously right move.

review: Approve
Revision history for this message
Tim Peeters (tpeeters) wrote :

re-happroving because of staging sync.

Revision history for this message
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 'examples/ubuntu-ui-toolkit-gallery/Buttons.qml'
2--- examples/ubuntu-ui-toolkit-gallery/Buttons.qml 2014-06-20 15:15:11 +0000
3+++ examples/ubuntu-ui-toolkit-gallery/Buttons.qml 2014-07-30 19:29:37 +0000
4@@ -49,7 +49,7 @@
5 Button {
6 objectName: "button_color"
7 text: i18n.tr("Call")
8- color: UbuntuColors.warmGrey
9+ color: UbuntuColors.green
10 }
11 }
12
13
14=== modified file 'examples/ubuntu-ui-toolkit-gallery/Dialog.qml'
15--- examples/ubuntu-ui-toolkit-gallery/Dialog.qml 2014-04-23 09:39:11 +0000
16+++ examples/ubuntu-ui-toolkit-gallery/Dialog.qml 2014-07-30 19:29:37 +0000
17@@ -15,7 +15,7 @@
18 */
19
20 import QtQuick 2.0
21-import Ubuntu.Components 0.1
22+import Ubuntu.Components 1.1
23 import Ubuntu.Components.Popups 0.1
24
25 Template {
26@@ -41,16 +41,23 @@
27 id: dialogue
28
29 title: "Sample Dialog"
30- text: "Are you sure you want to delete this file?"
31+ text: "Descriptive text goes here"
32
33- Button {
34- text: "Cancel"
35- gradient: UbuntuColors.greyGradient
36- onClicked: PopupUtils.close(dialogue)
37- }
38- Button {
39- text: "Delete"
40- onClicked: PopupUtils.close(dialogue)
41+ Row {
42+ id: row
43+ width: parent.width
44+ spacing: units.gu(1)
45+ Button {
46+ width: parent.width/2
47+ text: "Cancel"
48+ onClicked: PopupUtils.close(dialogue)
49+ }
50+ Button {
51+ width: parent.width/2
52+ text: "Confirm"
53+ color: UbuntuColors.green
54+ onClicked: PopupUtils.close(dialogue)
55+ }
56 }
57 }
58 }
59
60=== modified file 'modules/Ubuntu/Components/Colors/UbuntuColors.qml'
61--- modules/Ubuntu/Components/Colors/UbuntuColors.qml 2014-07-02 11:35:33 +0000
62+++ modules/Ubuntu/Components/Colors/UbuntuColors.qml 2014-07-30 19:29:37 +0000
63@@ -95,7 +95,7 @@
64 secondary text.
65 \since Ubuntu.Components 1.1
66 */
67- readonly property color lightGrey: "#888888"
68+ readonly property color lightGrey: "#929292"
69
70 /*!
71 Dark grey. Recommended for text and action icons.
72@@ -108,19 +108,19 @@
73 buttons, errors and alerts.
74 \since Ubuntu.Components 1.1
75 */
76- readonly property color red: "#fc4949"
77+ readonly property color red: "#f32c36"
78
79 /*!
80 Green. Recommended for positive action buttons.
81 \since Ubuntu.Components 1.1
82 */
83- readonly property color green: "#3fb24f"
84+ readonly property color green: "#00a132"
85
86 /*!
87 Blue. Recommended for text selection and text cursor.
88 \since Ubuntu.Components 1.1
89 */
90- readonly property color blue: "#1ab6ef"
91+ readonly property color blue: "#12a3d8"
92
93 /*!
94 Purple. Recommended for proper nouns in
95
96=== modified file 'modules/Ubuntu/Components/ListItems/Empty.qml'
97--- modules/Ubuntu/Components/ListItems/Empty.qml 2014-07-15 13:05:55 +0000
98+++ modules/Ubuntu/Components/ListItems/Empty.qml 2014-07-30 19:29:37 +0000
99@@ -288,6 +288,23 @@
100 }
101 }
102
103+ Rectangle {
104+ id: highlight
105+
106+ z: -1
107+ visible: !priv.removed && emptyListItem.swipingState === ""
108+ ? emptyListItem.selected
109+ || (emptyListItem.highlightWhenPressed && emptyListItem.pressed)
110+ : false
111+ anchors {
112+ left: parent.left
113+ right: parent.right
114+ top: parent.top
115+ }
116+ height: emptyListItem.height - bottomDividerLine.height
117+ color: Qt.rgba(0, 0, 0, 0.05)
118+ }
119+
120 ThinDivider {
121 id: bottomDividerLine
122 anchors.bottom: parent.bottom
123
124=== modified file 'modules/Ubuntu/Components/Popups/Dialog.qml'
125--- modules/Ubuntu/Components/Popups/Dialog.qml 2014-04-23 08:50:20 +0000
126+++ modules/Ubuntu/Components/Popups/Dialog.qml 2014-07-30 19:29:37 +0000
127@@ -188,14 +188,14 @@
128 horizontalAlignment: Text.AlignHCenter
129 text: dialog.title
130 fontSize: "large"
131- color: Qt.rgba(1, 1, 1, 0.9)
132+ color: UbuntuColors.darkGrey
133 }
134
135 Label {
136 horizontalAlignment: Text.AlignHCenter
137 text: dialog.text
138 fontSize: "medium"
139- color: Qt.rgba(1, 1, 1, 0.6)
140+ color: UbuntuColors.darkGrey
141 wrapMode: Text.Wrap
142 }
143
144
145=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/ButtonStyle.qml'
146--- modules/Ubuntu/Components/Themes/Ambiance/ButtonStyle.qml 2014-07-09 10:56:01 +0000
147+++ modules/Ubuntu/Components/Themes/Ambiance/ButtonStyle.qml 2014-07-30 19:29:37 +0000
148@@ -25,7 +25,8 @@
149 property var button: styledItem
150 property real minimumWidth: units.gu(10)
151 property real horizontalPadding: units.gu(1)
152- property color defaultColor: UbuntuColors.orange
153+ // FIXME: Add this color to the palette
154+ property color defaultColor: "#b2b2b2"
155 property font defaultFont: Qt.font({family: "Ubuntu", pixelSize: FontUtils.sizeToPixels("medium")})
156 property Gradient defaultGradient
157 property real buttonFaceOffset: 0
158@@ -123,6 +124,7 @@
159 image: backgroundSource
160
161 color: stroke ? "" : (backgroundSource ? "#00000000" : (isGradient ? __colorHack(gradientProxy.topColor) : __colorHack(button.color)))
162+ opacity: styledItem.enabled ? 1.0 : 0.6
163 gradientColor: stroke ? "" : (backgroundSource ? "#00000000" : (isGradient ? __colorHack(gradientProxy.bottomColor) : __colorHack(button.color)))
164 }
165
166
167=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml'
168--- modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml 2014-07-21 11:44:25 +0000
169+++ modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml 2014-07-30 19:29:37 +0000
170@@ -65,7 +65,8 @@
171 }
172 PropertyChanges {
173 target: background
174- color: Theme.palette.normal.foreground
175+ color: Qt.rgba(Theme.palette.normal.foreground.r, Theme.palette.normal.foreground.g,
176+ Theme.palette.normal.foreground.b, 0.2)
177 }
178 }
179 ]
180@@ -76,7 +77,7 @@
181 to: "unchecked"
182 ColorAnimation {
183 target: background
184- duration: UbuntuAnimation.BriskDuration
185+ duration: UbuntuAnimation.FastDuration
186 easing: UbuntuAnimation.StandardEasingReverse
187 }
188 SequentialAnimation {
189@@ -88,7 +89,7 @@
190 NumberAnimation {
191 target: tick
192 property: "anchors.verticalCenterOffset"
193- duration: UbuntuAnimation.BriskDuration
194+ duration: UbuntuAnimation.FastDuration
195 easing: UbuntuAnimation.StandardEasingReverse
196 }
197 PropertyAction {
198@@ -103,7 +104,7 @@
199 to: "checked"
200 ColorAnimation {
201 target: background
202- duration: UbuntuAnimation.BriskDuration
203+ duration: UbuntuAnimation.FastDuration
204 easing: UbuntuAnimation.StandardEasing
205 }
206 SequentialAnimation {
207@@ -115,7 +116,7 @@
208 NumberAnimation {
209 target: tick
210 property: "anchors.verticalCenterOffset"
211- duration: UbuntuAnimation.BriskDuration
212+ duration: UbuntuAnimation.FastDuration
213 easing: UbuntuAnimation.StandardEasing
214 }
215 PropertyAction {
216
217=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/DialogForegroundStyle.qml'
218--- modules/Ubuntu/Components/Themes/Ambiance/DialogForegroundStyle.qml 2014-04-23 08:50:20 +0000
219+++ modules/Ubuntu/Components/Themes/Ambiance/DialogForegroundStyle.qml 2014-07-30 19:29:37 +0000
220@@ -20,11 +20,9 @@
221 Item {
222 id: dialogForegroundStyle
223
224- visible: styledItem.dismissArea.width > units.gu(60)
225-
226 UbuntuShape {
227 id: background
228 anchors.fill: parent
229- color: Qt.rgba(0, 0, 0, 0.7)
230+ color: "white"
231 }
232 }
233
234=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/OptionSelectorStyle.qml'
235--- modules/Ubuntu/Components/Themes/Ambiance/OptionSelectorStyle.qml 2014-04-23 08:50:20 +0000
236+++ modules/Ubuntu/Components/Themes/Ambiance/OptionSelectorStyle.qml 2014-07-30 19:29:37 +0000
237@@ -31,5 +31,7 @@
238 width: styledItem.width
239 height: styledItem.height
240 radius: "medium"
241+
242+ color: Qt.rgba(0, 0, 0, 0.05)
243 }
244 }
245
246=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/PageHeadButton.qml'
247--- modules/Ubuntu/Components/Themes/Ambiance/PageHeadButton.qml 2014-07-29 12:16:53 +0000
248+++ modules/Ubuntu/Components/Themes/Ambiance/PageHeadButton.qml 2014-07-30 19:29:37 +0000
249@@ -20,10 +20,10 @@
250 AbstractButton {
251 id: button
252
253- property real iconWidth: units.gu(2)
254+ property real iconWidth: units.gu(2.5)
255 property real iconHeight: iconWidth
256
257- width: visible ? units.gu(4) : 0
258+ width: visible ? units.gu(5) : 0
259 height: parent ? parent.height : undefined
260
261 Image {
262
263=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/Palette.qml'
264--- modules/Ubuntu/Components/Themes/Ambiance/Palette.qml 2014-07-21 11:44:25 +0000
265+++ modules/Ubuntu/Components/Themes/Ambiance/Palette.qml 2014-07-30 19:29:37 +0000
266@@ -39,7 +39,7 @@
267 background: "#B2E6E6E6"
268 backgroundText: UbuntuColors.darkGrey
269 selection: Qt.rgba(UbuntuColors.blue.r, UbuntuColors.blue.g, UbuntuColors.blue.b, 0.2)
270- foreground: UbuntuColors.blue
271+ foreground: UbuntuColors.orange
272 foregroundText: UbuntuColors.darkGrey
273 field: "#FFFFFF"
274 fieldText: UbuntuColors.darkGrey
275
276=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/TextCursorStyle.qml'
277--- modules/Ubuntu/Components/Themes/Ambiance/TextCursorStyle.qml 2014-07-18 07:19:36 +0000
278+++ modules/Ubuntu/Components/Themes/Ambiance/TextCursorStyle.qml 2014-07-30 19:29:37 +0000
279@@ -15,6 +15,7 @@
280 */
281
282 import QtQuick 2.0
283+import Ubuntu.Components 1.1
284
285 // FIXME : move the API into Ubuntu.Components.Style
286 Item {
287@@ -48,7 +49,8 @@
288 id: delegate
289 Rectangle {
290 width: units.dp(2)
291- color: Theme.palette.selected.foreground
292+ // FIXME: Extend the palette and use palette values here
293+ color: UbuntuColors.blue
294 visible: blinkTimer.timerShowCursor
295 Timer {
296 id: blinkTimer
297
298=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/TextSelectionEndCursorStyle.qml'
299--- modules/Ubuntu/Components/Themes/Ambiance/TextSelectionEndCursorStyle.qml 2014-07-02 12:19:28 +0000
300+++ modules/Ubuntu/Components/Themes/Ambiance/TextSelectionEndCursorStyle.qml 2014-07-30 19:29:37 +0000
301@@ -14,7 +14,8 @@
302 * along with this program. If not, see <http://www.gnu.org/licenses/>.
303 */
304
305-import QtQuick 2.0
306+import QtQuick 2.2
307+import Ubuntu.Components 1.1
308
309 // FIXME : move the API into Ubuntu.Components.Style
310 Item {
311@@ -48,7 +49,8 @@
312 id: delegate
313 Rectangle {
314 width: units.dp(1)
315- color: Theme.palette.selected.foreground
316+ // FIXME: Add a new color to the palette
317+ color: UbuntuColors.blue
318 }
319 }
320
321
322=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/TextSelectionStartCursorStyle.qml'
323--- modules/Ubuntu/Components/Themes/Ambiance/TextSelectionStartCursorStyle.qml 2014-07-02 12:19:28 +0000
324+++ modules/Ubuntu/Components/Themes/Ambiance/TextSelectionStartCursorStyle.qml 2014-07-30 19:29:37 +0000
325@@ -14,7 +14,8 @@
326 * along with this program. If not, see <http://www.gnu.org/licenses/>.
327 */
328
329-import QtQuick 2.0
330+import QtQuick 2.2
331+import Ubuntu.Components 1.1
332
333 // FIXME : move the API into Ubuntu.Components.Style
334 Item {
335@@ -48,7 +49,8 @@
336 id: delegate
337 Rectangle {
338 width: units.dp(1)
339- color: Theme.palette.selected.foreground
340+ // FIXME: Add a new color to the palette
341+ color: UbuntuColors.blue
342 }
343 }
344
345
346=== modified file 'modules/Ubuntu/Components/Themes/SuruDark/Palette.qml'
347--- modules/Ubuntu/Components/Themes/SuruDark/Palette.qml 2014-07-11 15:11:02 +0000
348+++ modules/Ubuntu/Components/Themes/SuruDark/Palette.qml 2014-07-30 19:29:37 +0000
349@@ -35,7 +35,7 @@
350 background: "#88D6D6D6" // FIXME: not from design
351 backgroundText: "#F3F3E7"
352 selection: Qt.rgba(UbuntuColors.blue.r, UbuntuColors.blue.g, UbuntuColors.blue.b, 0.2)
353- foreground: UbuntuColors.blue
354+ foreground: UbuntuColors.orange
355 foregroundText: UbuntuColors.darkGrey
356 field: "#FFFFFF"
357 fieldText: "#888888"
358
359=== modified file 'tests/autopilot/ubuntuuitoolkit/tests/gallery/test_buttons.py'
360--- tests/autopilot/ubuntuuitoolkit/tests/gallery/test_buttons.py 2014-07-10 09:02:37 +0000
361+++ tests/autopilot/ubuntuuitoolkit/tests/gallery/test_buttons.py 2014-07-30 19:29:37 +0000
362@@ -34,7 +34,7 @@
363 text="Call")),
364 ('button with color', dict(
365 button_name="button_color", is_enabled=True,
366- color=[174, 167, 159, 255], icon=None, text="Call")),
367+ color=[0, 161, 50, 255], icon=None, text="Call")),
368 ('button with icon', dict(
369 button_name="button_iconsource", is_enabled=True, color=None,
370 icon="call.png", text=None)),

Subscribers

People subscribed via source and target branches