Merge lp:~tpeeters/ubuntu-ui-toolkit/more-visual-updates into lp:ubuntu-ui-toolkit/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 :
review: Needs Fixing (continuous-integration)
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
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
=== modified file 'examples/ubuntu-ui-toolkit-gallery/Buttons.qml'
--- examples/ubuntu-ui-toolkit-gallery/Buttons.qml 2014-06-20 15:15:11 +0000
+++ examples/ubuntu-ui-toolkit-gallery/Buttons.qml 2014-07-30 19:29:37 +0000
@@ -49,7 +49,7 @@
49 Button {49 Button {
50 objectName: "button_color"50 objectName: "button_color"
51 text: i18n.tr("Call")51 text: i18n.tr("Call")
52 color: UbuntuColors.warmGrey52 color: UbuntuColors.green
53 }53 }
54 }54 }
5555
5656
=== modified file 'examples/ubuntu-ui-toolkit-gallery/Dialog.qml'
--- examples/ubuntu-ui-toolkit-gallery/Dialog.qml 2014-04-23 09:39:11 +0000
+++ examples/ubuntu-ui-toolkit-gallery/Dialog.qml 2014-07-30 19:29:37 +0000
@@ -15,7 +15,7 @@
15 */15 */
1616
17import QtQuick 2.017import QtQuick 2.0
18import Ubuntu.Components 0.118import Ubuntu.Components 1.1
19import Ubuntu.Components.Popups 0.119import Ubuntu.Components.Popups 0.1
2020
21Template {21Template {
@@ -41,16 +41,23 @@
41 id: dialogue41 id: dialogue
4242
43 title: "Sample Dialog"43 title: "Sample Dialog"
44 text: "Are you sure you want to delete this file?"44 text: "Descriptive text goes here"
4545
46 Button {46 Row {
47 text: "Cancel"47 id: row
48 gradient: UbuntuColors.greyGradient48 width: parent.width
49 onClicked: PopupUtils.close(dialogue)49 spacing: units.gu(1)
50 }50 Button {
51 Button {51 width: parent.width/2
52 text: "Delete"52 text: "Cancel"
53 onClicked: PopupUtils.close(dialogue)53 onClicked: PopupUtils.close(dialogue)
54 }
55 Button {
56 width: parent.width/2
57 text: "Confirm"
58 color: UbuntuColors.green
59 onClicked: PopupUtils.close(dialogue)
60 }
54 }61 }
55 }62 }
56 }63 }
5764
=== modified file 'modules/Ubuntu/Components/Colors/UbuntuColors.qml'
--- modules/Ubuntu/Components/Colors/UbuntuColors.qml 2014-07-02 11:35:33 +0000
+++ modules/Ubuntu/Components/Colors/UbuntuColors.qml 2014-07-30 19:29:37 +0000
@@ -95,7 +95,7 @@
95 secondary text.95 secondary text.
96 \since Ubuntu.Components 1.196 \since Ubuntu.Components 1.1
97 */97 */
98 readonly property color lightGrey: "#888888"98 readonly property color lightGrey: "#929292"
9999
100 /*!100 /*!
101 Dark grey. Recommended for text and action icons.101 Dark grey. Recommended for text and action icons.
@@ -108,19 +108,19 @@
108 buttons, errors and alerts.108 buttons, errors and alerts.
109 \since Ubuntu.Components 1.1109 \since Ubuntu.Components 1.1
110 */110 */
111 readonly property color red: "#fc4949"111 readonly property color red: "#f32c36"
112112
113 /*!113 /*!
114 Green. Recommended for positive action buttons.114 Green. Recommended for positive action buttons.
115 \since Ubuntu.Components 1.1115 \since Ubuntu.Components 1.1
116 */116 */
117 readonly property color green: "#3fb24f"117 readonly property color green: "#00a132"
118118
119 /*!119 /*!
120 Blue. Recommended for text selection and text cursor.120 Blue. Recommended for text selection and text cursor.
121 \since Ubuntu.Components 1.1121 \since Ubuntu.Components 1.1
122 */122 */
123 readonly property color blue: "#1ab6ef"123 readonly property color blue: "#12a3d8"
124124
125 /*!125 /*!
126 Purple. Recommended for proper nouns in126 Purple. Recommended for proper nouns in
127127
=== modified file 'modules/Ubuntu/Components/ListItems/Empty.qml'
--- modules/Ubuntu/Components/ListItems/Empty.qml 2014-07-15 13:05:55 +0000
+++ modules/Ubuntu/Components/ListItems/Empty.qml 2014-07-30 19:29:37 +0000
@@ -288,6 +288,23 @@
288 }288 }
289 }289 }
290290
291 Rectangle {
292 id: highlight
293
294 z: -1
295 visible: !priv.removed && emptyListItem.swipingState === ""
296 ? emptyListItem.selected
297 || (emptyListItem.highlightWhenPressed && emptyListItem.pressed)
298 : false
299 anchors {
300 left: parent.left
301 right: parent.right
302 top: parent.top
303 }
304 height: emptyListItem.height - bottomDividerLine.height
305 color: Qt.rgba(0, 0, 0, 0.05)
306 }
307
291 ThinDivider {308 ThinDivider {
292 id: bottomDividerLine309 id: bottomDividerLine
293 anchors.bottom: parent.bottom310 anchors.bottom: parent.bottom
294311
=== modified file 'modules/Ubuntu/Components/Popups/Dialog.qml'
--- modules/Ubuntu/Components/Popups/Dialog.qml 2014-04-23 08:50:20 +0000
+++ modules/Ubuntu/Components/Popups/Dialog.qml 2014-07-30 19:29:37 +0000
@@ -188,14 +188,14 @@
188 horizontalAlignment: Text.AlignHCenter188 horizontalAlignment: Text.AlignHCenter
189 text: dialog.title189 text: dialog.title
190 fontSize: "large"190 fontSize: "large"
191 color: Qt.rgba(1, 1, 1, 0.9)191 color: UbuntuColors.darkGrey
192 }192 }
193193
194 Label {194 Label {
195 horizontalAlignment: Text.AlignHCenter195 horizontalAlignment: Text.AlignHCenter
196 text: dialog.text196 text: dialog.text
197 fontSize: "medium"197 fontSize: "medium"
198 color: Qt.rgba(1, 1, 1, 0.6)198 color: UbuntuColors.darkGrey
199 wrapMode: Text.Wrap199 wrapMode: Text.Wrap
200 }200 }
201201
202202
=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/ButtonStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/ButtonStyle.qml 2014-07-09 10:56:01 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/ButtonStyle.qml 2014-07-30 19:29:37 +0000
@@ -25,7 +25,8 @@
25 property var button: styledItem25 property var button: styledItem
26 property real minimumWidth: units.gu(10)26 property real minimumWidth: units.gu(10)
27 property real horizontalPadding: units.gu(1)27 property real horizontalPadding: units.gu(1)
28 property color defaultColor: UbuntuColors.orange28 // FIXME: Add this color to the palette
29 property color defaultColor: "#b2b2b2"
29 property font defaultFont: Qt.font({family: "Ubuntu", pixelSize: FontUtils.sizeToPixels("medium")})30 property font defaultFont: Qt.font({family: "Ubuntu", pixelSize: FontUtils.sizeToPixels("medium")})
30 property Gradient defaultGradient31 property Gradient defaultGradient
31 property real buttonFaceOffset: 032 property real buttonFaceOffset: 0
@@ -123,6 +124,7 @@
123 image: backgroundSource124 image: backgroundSource
124125
125 color: stroke ? "" : (backgroundSource ? "#00000000" : (isGradient ? __colorHack(gradientProxy.topColor) : __colorHack(button.color)))126 color: stroke ? "" : (backgroundSource ? "#00000000" : (isGradient ? __colorHack(gradientProxy.topColor) : __colorHack(button.color)))
127 opacity: styledItem.enabled ? 1.0 : 0.6
126 gradientColor: stroke ? "" : (backgroundSource ? "#00000000" : (isGradient ? __colorHack(gradientProxy.bottomColor) : __colorHack(button.color)))128 gradientColor: stroke ? "" : (backgroundSource ? "#00000000" : (isGradient ? __colorHack(gradientProxy.bottomColor) : __colorHack(button.color)))
127 }129 }
128130
129131
=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml 2014-07-21 11:44:25 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml 2014-07-30 19:29:37 +0000
@@ -65,7 +65,8 @@
65 }65 }
66 PropertyChanges {66 PropertyChanges {
67 target: background67 target: background
68 color: Theme.palette.normal.foreground68 color: Qt.rgba(Theme.palette.normal.foreground.r, Theme.palette.normal.foreground.g,
69 Theme.palette.normal.foreground.b, 0.2)
69 }70 }
70 }71 }
71 ]72 ]
@@ -76,7 +77,7 @@
76 to: "unchecked"77 to: "unchecked"
77 ColorAnimation {78 ColorAnimation {
78 target: background79 target: background
79 duration: UbuntuAnimation.BriskDuration80 duration: UbuntuAnimation.FastDuration
80 easing: UbuntuAnimation.StandardEasingReverse81 easing: UbuntuAnimation.StandardEasingReverse
81 }82 }
82 SequentialAnimation {83 SequentialAnimation {
@@ -88,7 +89,7 @@
88 NumberAnimation {89 NumberAnimation {
89 target: tick90 target: tick
90 property: "anchors.verticalCenterOffset"91 property: "anchors.verticalCenterOffset"
91 duration: UbuntuAnimation.BriskDuration92 duration: UbuntuAnimation.FastDuration
92 easing: UbuntuAnimation.StandardEasingReverse93 easing: UbuntuAnimation.StandardEasingReverse
93 }94 }
94 PropertyAction {95 PropertyAction {
@@ -103,7 +104,7 @@
103 to: "checked"104 to: "checked"
104 ColorAnimation {105 ColorAnimation {
105 target: background106 target: background
106 duration: UbuntuAnimation.BriskDuration107 duration: UbuntuAnimation.FastDuration
107 easing: UbuntuAnimation.StandardEasing108 easing: UbuntuAnimation.StandardEasing
108 }109 }
109 SequentialAnimation {110 SequentialAnimation {
@@ -115,7 +116,7 @@
115 NumberAnimation {116 NumberAnimation {
116 target: tick117 target: tick
117 property: "anchors.verticalCenterOffset"118 property: "anchors.verticalCenterOffset"
118 duration: UbuntuAnimation.BriskDuration119 duration: UbuntuAnimation.FastDuration
119 easing: UbuntuAnimation.StandardEasing120 easing: UbuntuAnimation.StandardEasing
120 }121 }
121 PropertyAction {122 PropertyAction {
122123
=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/DialogForegroundStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/DialogForegroundStyle.qml 2014-04-23 08:50:20 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/DialogForegroundStyle.qml 2014-07-30 19:29:37 +0000
@@ -20,11 +20,9 @@
20Item {20Item {
21 id: dialogForegroundStyle21 id: dialogForegroundStyle
2222
23 visible: styledItem.dismissArea.width > units.gu(60)
24
25 UbuntuShape {23 UbuntuShape {
26 id: background24 id: background
27 anchors.fill: parent25 anchors.fill: parent
28 color: Qt.rgba(0, 0, 0, 0.7)26 color: "white"
29 }27 }
30}28}
3129
=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/OptionSelectorStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/OptionSelectorStyle.qml 2014-04-23 08:50:20 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/OptionSelectorStyle.qml 2014-07-30 19:29:37 +0000
@@ -31,5 +31,7 @@
31 width: styledItem.width31 width: styledItem.width
32 height: styledItem.height32 height: styledItem.height
33 radius: "medium"33 radius: "medium"
34
35 color: Qt.rgba(0, 0, 0, 0.05)
34 }36 }
35}37}
3638
=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/PageHeadButton.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/PageHeadButton.qml 2014-07-29 12:16:53 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/PageHeadButton.qml 2014-07-30 19:29:37 +0000
@@ -20,10 +20,10 @@
20AbstractButton {20AbstractButton {
21 id: button21 id: button
2222
23 property real iconWidth: units.gu(2)23 property real iconWidth: units.gu(2.5)
24 property real iconHeight: iconWidth24 property real iconHeight: iconWidth
2525
26 width: visible ? units.gu(4) : 026 width: visible ? units.gu(5) : 0
27 height: parent ? parent.height : undefined27 height: parent ? parent.height : undefined
2828
29 Image {29 Image {
3030
=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/Palette.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/Palette.qml 2014-07-21 11:44:25 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/Palette.qml 2014-07-30 19:29:37 +0000
@@ -39,7 +39,7 @@
39 background: "#B2E6E6E6"39 background: "#B2E6E6E6"
40 backgroundText: UbuntuColors.darkGrey40 backgroundText: UbuntuColors.darkGrey
41 selection: Qt.rgba(UbuntuColors.blue.r, UbuntuColors.blue.g, UbuntuColors.blue.b, 0.2)41 selection: Qt.rgba(UbuntuColors.blue.r, UbuntuColors.blue.g, UbuntuColors.blue.b, 0.2)
42 foreground: UbuntuColors.blue42 foreground: UbuntuColors.orange
43 foregroundText: UbuntuColors.darkGrey43 foregroundText: UbuntuColors.darkGrey
44 field: "#FFFFFF"44 field: "#FFFFFF"
45 fieldText: UbuntuColors.darkGrey45 fieldText: UbuntuColors.darkGrey
4646
=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/TextCursorStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/TextCursorStyle.qml 2014-07-18 07:19:36 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/TextCursorStyle.qml 2014-07-30 19:29:37 +0000
@@ -15,6 +15,7 @@
15 */15 */
1616
17import QtQuick 2.017import QtQuick 2.0
18import Ubuntu.Components 1.1
1819
19// FIXME : move the API into Ubuntu.Components.Style20// FIXME : move the API into Ubuntu.Components.Style
20Item {21Item {
@@ -48,7 +49,8 @@
48 id: delegate49 id: delegate
49 Rectangle {50 Rectangle {
50 width: units.dp(2)51 width: units.dp(2)
51 color: Theme.palette.selected.foreground52 // FIXME: Extend the palette and use palette values here
53 color: UbuntuColors.blue
52 visible: blinkTimer.timerShowCursor54 visible: blinkTimer.timerShowCursor
53 Timer {55 Timer {
54 id: blinkTimer56 id: blinkTimer
5557
=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/TextSelectionEndCursorStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/TextSelectionEndCursorStyle.qml 2014-07-02 12:19:28 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/TextSelectionEndCursorStyle.qml 2014-07-30 19:29:37 +0000
@@ -14,7 +14,8 @@
14 * along with this program. If not, see <http://www.gnu.org/licenses/>.14 * along with this program. If not, see <http://www.gnu.org/licenses/>.
15 */15 */
1616
17import QtQuick 2.017import QtQuick 2.2
18import Ubuntu.Components 1.1
1819
19// FIXME : move the API into Ubuntu.Components.Style20// FIXME : move the API into Ubuntu.Components.Style
20Item {21Item {
@@ -48,7 +49,8 @@
48 id: delegate49 id: delegate
49 Rectangle {50 Rectangle {
50 width: units.dp(1)51 width: units.dp(1)
51 color: Theme.palette.selected.foreground52 // FIXME: Add a new color to the palette
53 color: UbuntuColors.blue
52 }54 }
53 }55 }
5456
5557
=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/TextSelectionStartCursorStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/TextSelectionStartCursorStyle.qml 2014-07-02 12:19:28 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/TextSelectionStartCursorStyle.qml 2014-07-30 19:29:37 +0000
@@ -14,7 +14,8 @@
14 * along with this program. If not, see <http://www.gnu.org/licenses/>.14 * along with this program. If not, see <http://www.gnu.org/licenses/>.
15 */15 */
1616
17import QtQuick 2.017import QtQuick 2.2
18import Ubuntu.Components 1.1
1819
19// FIXME : move the API into Ubuntu.Components.Style20// FIXME : move the API into Ubuntu.Components.Style
20Item {21Item {
@@ -48,7 +49,8 @@
48 id: delegate49 id: delegate
49 Rectangle {50 Rectangle {
50 width: units.dp(1)51 width: units.dp(1)
51 color: Theme.palette.selected.foreground52 // FIXME: Add a new color to the palette
53 color: UbuntuColors.blue
52 }54 }
53 }55 }
5456
5557
=== modified file 'modules/Ubuntu/Components/Themes/SuruDark/Palette.qml'
--- modules/Ubuntu/Components/Themes/SuruDark/Palette.qml 2014-07-11 15:11:02 +0000
+++ modules/Ubuntu/Components/Themes/SuruDark/Palette.qml 2014-07-30 19:29:37 +0000
@@ -35,7 +35,7 @@
35 background: "#88D6D6D6" // FIXME: not from design35 background: "#88D6D6D6" // FIXME: not from design
36 backgroundText: "#F3F3E7"36 backgroundText: "#F3F3E7"
37 selection: Qt.rgba(UbuntuColors.blue.r, UbuntuColors.blue.g, UbuntuColors.blue.b, 0.2)37 selection: Qt.rgba(UbuntuColors.blue.r, UbuntuColors.blue.g, UbuntuColors.blue.b, 0.2)
38 foreground: UbuntuColors.blue38 foreground: UbuntuColors.orange
39 foregroundText: UbuntuColors.darkGrey39 foregroundText: UbuntuColors.darkGrey
40 field: "#FFFFFF"40 field: "#FFFFFF"
41 fieldText: "#888888"41 fieldText: "#888888"
4242
=== modified file 'tests/autopilot/ubuntuuitoolkit/tests/gallery/test_buttons.py'
--- tests/autopilot/ubuntuuitoolkit/tests/gallery/test_buttons.py 2014-07-10 09:02:37 +0000
+++ tests/autopilot/ubuntuuitoolkit/tests/gallery/test_buttons.py 2014-07-30 19:29:37 +0000
@@ -34,7 +34,7 @@
34 text="Call")),34 text="Call")),
35 ('button with color', dict(35 ('button with color', dict(
36 button_name="button_color", is_enabled=True,36 button_name="button_color", is_enabled=True,
37 color=[174, 167, 159, 255], icon=None, text="Call")),37 color=[0, 161, 50, 255], icon=None, text="Call")),
38 ('button with icon', dict(38 ('button with icon', dict(
39 button_name="button_iconsource", is_enabled=True, color=None,39 button_name="button_iconsource", is_enabled=True, color=None,
40 icon="call.png", text=None)),40 icon="call.png", text=None)),

Subscribers

People subscribed via source and target branches