Ubuntu UI Toolkit

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

  1. check
  2. Merge into staging
Proposed by Tim Peeters
Status: Merged
Approved by: Cris Dywan
Approved revision: 1337
Merged at revision: 1322
Proposed branch: lp:~tpeeters/ubuntu-ui-toolkit/check
Merge into: lp:ubuntu-ui-toolkit/staging
Diff against target: 256 lines (+123/-91)
2 files modified
modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml (+122/-90)
modules/Ubuntu/Components/Themes/Ambiance/qmldir (+1/-1)
To merge this branch: bzr merge lp:~tpeeters/ubuntu-ui-toolkit/check
Reviewer Review Type Date Requested Status
Cris Dywan Approve
PS Jenkins bot continuous-integration Approve
Jouni Helminen (community) Approve
Review via email: mp+241096@code.launchpad.net

Commit message

Update the CheckBox style:
- Expose color and padding properties
- Make icon themable, use theme icon by default
- Update default size

To post a comment you must log in.
Revision history for this message
Tim Peeters (tpeeters) wrote :

old checkbox: https://www.dropbox.com/s/08gol5qwm1yngwt/Screenshot%202014-11-07%2016.37.14.png?dl=0
new checkbox:https://www.dropbox.com/s/qqr1ylqyz92ar7v/Screenshot%202014-11-07%2016.37.42.png?dl=0

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

visuals in the screenshots approved by Giorgio and Jouni.

Revision history for this message
Jouni Helminen (jounihelminen) wrote :

looking good

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

FAILED: Autolanding.
Unapproved changes made after approval.
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-autolanding/668/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-autolanding/612
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-autolanding/612
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-autolanding/612/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-autolanding/612

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

PASSED: Continuous integration, rev:1337
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1213/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/6515
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/1046
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/1045
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/1045/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/1045
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/6092
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/7767
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/7767/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/15574

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

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

Very nice rework!

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml'
2--- modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml 2014-07-24 16:16:10 +0000
3+++ modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml 2014-11-07 15:45:36 +0000
4@@ -21,110 +21,142 @@
5 id: checkBoxStyle
6
7 /*!
8+ The padding between the background shape and the outside border of the checkbox.
9+ */
10+ property real backgroundPadding: units.gu(0.33)
11+
12+ /*!
13+ The background color when the checkbox is not checked.
14+ */
15+ property color uncheckedBackgroundColor: Qt.rgba(Theme.palette.normal.foreground.r,
16+ Theme.palette.normal.foreground.g,
17+ Theme.palette.normal.foreground.b, 0.2)
18+
19+ /*!
20+ The background color when the checkbox is checked.
21+ */
22+ property color checkedBackgroundColor: UbuntuColors.green
23+
24+ /*!
25 The image to show inside the checkbox when it is checked.
26 */
27- property url tickSource: "artwork/tick.png"
28+ property url iconSource: "image://theme/tick"
29+
30+ /*!
31+ The color of the icon.
32+ */
33+ property color iconColor: Theme.palette.normal.foregroundText
34+
35+ /*!
36+ The padding between the icon and the border of the thumb.
37+ */
38+ property real iconPadding: backgroundPadding
39
40 opacity: enabled ? 1.0 : 0.5
41
42- implicitWidth: units.gu(4.25)
43- implicitHeight: units.gu(4)
44+ implicitWidth: units.gu(3)
45+ implicitHeight: units.gu(3)
46
47 UbuntuShape {
48 id: background
49- anchors.fill: parent
50- anchors.margins: units.gu(0.5)
51- }
52-
53- Image {
54- id: tick
55- anchors.centerIn: parent
56- smooth: true
57- source: tickSource
58- visible: styledItem.checked || transitionToChecked.running || transitionToUnchecked.running
59- }
60-
61- state: styledItem.checked ? "checked" : "unchecked"
62- states: [
63- State {
64- name: "checked"
65- PropertyChanges {
66- target: tick
67- anchors.verticalCenterOffset: 0
68- }
69- PropertyChanges {
70- target: background
71- color: UbuntuColors.green
72- }
73- },
74- State {
75- name: "unchecked"
76- PropertyChanges {
77- target: tick
78- anchors.verticalCenterOffset: checkBoxStyle.height
79- }
80- PropertyChanges {
81- target: background
82- color: Qt.rgba(Theme.palette.normal.foreground.r, Theme.palette.normal.foreground.g,
83- Theme.palette.normal.foreground.b, 0.2)
84- }
85- }
86- ]
87-
88- transitions: [
89- Transition {
90- id: transitionToUnchecked
91- to: "unchecked"
92- ColorAnimation {
93- target: background
94- duration: UbuntuAnimation.FastDuration
95- easing: UbuntuAnimation.StandardEasingReverse
96- }
97- SequentialAnimation {
98- PropertyAction {
99- target: checkBoxStyle
100- property: "clip"
101- value: true
102- }
103- NumberAnimation {
104- target: tick
105- property: "anchors.verticalCenterOffset"
106+ anchors {
107+ fill: parent
108+ margins: checkBoxStyle.backgroundPadding
109+ }
110+ property real iconSize: Math.min(width, height) - 2*checkBoxStyle.iconPadding
111+
112+ Icon {
113+ color: checkBoxStyle.iconColor
114+ width: background.iconSize
115+ height: background.iconSize
116+ id: tick
117+ anchors.centerIn: parent
118+ smooth: true
119+ source: checkBoxStyle.iconSource
120+ visible: styledItem.checked || transitionToChecked.running || transitionToUnchecked.running
121+ }
122+
123+ state: styledItem.checked ? "checked" : "unchecked"
124+ states: [
125+ State {
126+ name: "checked"
127+ PropertyChanges {
128+ target: tick
129+ anchors.verticalCenterOffset: 0
130+ }
131+ PropertyChanges {
132+ target: background
133+ color: checkBoxStyle.checkedBackgroundColor
134+ }
135+ },
136+ State {
137+ name: "unchecked"
138+ PropertyChanges {
139+ target: tick
140+ anchors.verticalCenterOffset: checkBoxStyle.height
141+ }
142+ PropertyChanges {
143+ target: background
144+ color: checkBoxStyle.uncheckedBackgroundColor
145+ }
146+ }
147+ ]
148+
149+ transitions: [
150+ Transition {
151+ id: transitionToUnchecked
152+ to: "unchecked"
153+ ColorAnimation {
154+ target: background
155 duration: UbuntuAnimation.FastDuration
156 easing: UbuntuAnimation.StandardEasingReverse
157 }
158- PropertyAction {
159- target: checkBoxStyle
160- property: "clip"
161- value: false
162- }
163- }
164- },
165- Transition {
166- id: transitionToChecked
167- to: "checked"
168- ColorAnimation {
169- target: background
170- duration: UbuntuAnimation.FastDuration
171- easing: UbuntuAnimation.StandardEasing
172- }
173- SequentialAnimation {
174- PropertyAction {
175- target: checkBoxStyle
176- property: "clip"
177- value: true
178- }
179- NumberAnimation {
180- target: tick
181- property: "anchors.verticalCenterOffset"
182+ SequentialAnimation {
183+ PropertyAction {
184+ target: checkBoxStyle
185+ property: "clip"
186+ value: true
187+ }
188+ NumberAnimation {
189+ target: tick
190+ property: "anchors.verticalCenterOffset"
191+ duration: UbuntuAnimation.FastDuration
192+ easing: UbuntuAnimation.StandardEasingReverse
193+ }
194+ PropertyAction {
195+ target: checkBoxStyle
196+ property: "clip"
197+ value: false
198+ }
199+ }
200+ },
201+ Transition {
202+ id: transitionToChecked
203+ to: "checked"
204+ ColorAnimation {
205+ target: background
206 duration: UbuntuAnimation.FastDuration
207 easing: UbuntuAnimation.StandardEasing
208 }
209- PropertyAction {
210- target: checkBoxStyle
211- property: "clip"
212- value: false
213+ SequentialAnimation {
214+ PropertyAction {
215+ target: checkBoxStyle
216+ property: "clip"
217+ value: true
218+ }
219+ NumberAnimation {
220+ target: tick
221+ property: "anchors.verticalCenterOffset"
222+ duration: UbuntuAnimation.FastDuration
223+ easing: UbuntuAnimation.StandardEasing
224+ }
225+ PropertyAction {
226+ target: checkBoxStyle
227+ property: "clip"
228+ value: false
229+ }
230 }
231 }
232- }
233- ]
234+ ]
235+ }
236 }
237
238=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/qmldir'
239--- modules/Ubuntu/Components/Themes/Ambiance/qmldir 2014-11-06 15:59:59 +0000
240+++ modules/Ubuntu/Components/Themes/Ambiance/qmldir 2014-11-07 15:45:36 +0000
241@@ -1,7 +1,6 @@
242 module Ubuntu.Components.Themes.Ambiance
243 internal ActivityIndicatorStyle ActivityIndicatorStyle.qml
244 internal ButtonStyle ButtonStyle.qml
245-internal CheckBoxStyle CheckBoxStyle.qml
246 internal DialogForegroundStyle DialogForegroundStyle.qml
247 internal HeaderStyle HeaderStyle.qml
248 internal PageHeadButton PageHeadButton.qml
249@@ -47,6 +46,7 @@
250 PageHeadStyle 1.1 PageHeadStyle.qml
251 Palette 1.1 Palette.qml
252 SwitchStyle 1.1 SwitchStyle.qml
253+CheckBoxStyle 1.1 CheckBoxStyle.qml
254
255 internal TextSelectionStartCursorStyle TextSelectionStartCursorStyle.qml
256 internal TextSelectionEndCursorStyle TextSelectionEndCursorStyle.qml

Subscribers

People subscribed via source and target branches