Ubuntu One Control Panel

Merge lp:~nataliabidart/ubuntuone-control-panel/new-colors into lp:ubuntuone-control-panel

  1. new-colors
  2. Merge into trunk
Proposed by Natalia Bidart
Status: Merged
Approved by: Natalia Bidart
Approved revision: 303
Merged at revision: 296
Proposed branch: lp:~nataliabidart/ubuntuone-control-panel/new-colors
Merge into: lp:ubuntuone-control-panel
Diff against target: 366 lines (+87/-87)
4 files modified
data/qt/images.qrc (+1/-0)
data/qt/preferences.ui (+3/-0)
data/qt/side_widget.ui (+22/-1)
data/qt/ubuntuone.qss (+61/-86)
To merge this branch: bzr merge lp:~nataliabidart/ubuntuone-control-panel/new-colors
Reviewer Review Type Date Requested Status
Robert Grant (community) Approve
Roberto Alsina (community) Approve
Review via email: mp+98912@code.launchpad.net

Commit message

- Modified stylesheet to use the new colours from brand, and to also ease
  the reading of white text (LP: #956077).
- Fixed the gap tab outlines (LP: #822629).

Description of the change

Screenshot of new look at:

http://ubuntuone.com/5JFlOvCs29xQMjOzoEU9m9

To post a comment you must log in.
lp:~nataliabidart/ubuntuone-control-panel/new-colors updated
302. By Natalia Bidart

Clean up.

Revision history for this message
Roberto Alsina (ralsina) wrote :

+1 pretty

review: Approve
lp:~nataliabidart/ubuntuone-control-panel/new-colors updated
303. By Natalia Bidart

Also remove the right padding for the help_button to match 0 left padding when
focused.

Revision history for this message
Robert Grant (rtgrant) wrote :

+1 Nice

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== added file 'data/external_icon_dark_grey.png'
0Binary files data/external_icon_dark_grey.png 1970-01-01 00:00:00 +0000 and data/external_icon_dark_grey.png 2012-03-22 20:32:25 +0000 differ0Binary files data/external_icon_dark_grey.png 1970-01-01 00:00:00 +0000 and data/external_icon_dark_grey.png 2012-03-22 20:32:25 +0000 differ
=== modified file 'data/qt/images.qrc'
--- data/qt/images.qrc 2012-03-15 01:25:08 +0000
+++ data/qt/images.qrc 2012-03-22 20:32:25 +0000
@@ -2,6 +2,7 @@
2 <qresource prefix="/">2 <qresource prefix="/">
3 <file>../banner.png</file>3 <file>../banner.png</file>
4 <file>../computer.png</file>4 <file>../computer.png</file>
5 <file>../external_icon_dark_grey.png</file>
5 <file>../external_icon_orange.png</file>6 <file>../external_icon_orange.png</file>
6 <file>../external_icon_white.png</file>7 <file>../external_icon_white.png</file>
7 <file>../icon.png</file>8 <file>../icon.png</file>
89
=== modified file 'data/qt/preferences.ui'
--- data/qt/preferences.ui 2012-03-14 18:37:40 +0000
+++ data/qt/preferences.ui 2012-03-22 20:32:25 +0000
@@ -95,6 +95,9 @@
95 <property name="orientation">95 <property name="orientation">
96 <enum>Qt::Vertical</enum>96 <enum>Qt::Vertical</enum>
97 </property>97 </property>
98 <property name="sizeType">
99 <enum>QSizePolicy::Minimum</enum>
100 </property>
98 <property name="sizeHint" stdset="0">101 <property name="sizeHint" stdset="0">
99 <size>102 <size>
100 <width>40</width>103 <width>40</width>
101104
=== modified file 'data/qt/side_widget.ui'
--- data/qt/side_widget.ui 2012-03-14 15:11:19 +0000
+++ data/qt/side_widget.ui 2012-03-22 20:32:25 +0000
@@ -20,7 +20,16 @@
20 <property name="spacing">20 <property name="spacing">
21 <number>40</number>21 <number>40</number>
22 </property>22 </property>
23 <property name="margin">23 <property name="leftMargin">
24 <number>0</number>
25 </property>
26 <property name="topMargin">
27 <number>0</number>
28 </property>
29 <property name="rightMargin">
30 <number>10</number>
31 </property>
32 <property name="bottomMargin">
24 <number>0</number>33 <number>0</number>
25 </property>34 </property>
26 <item>35 <item>
@@ -83,6 +92,9 @@
83 <property name="text">92 <property name="text">
84 <string notr="true">Install</string>93 <string notr="true">Install</string>
85 </property>94 </property>
95 <property name="wordWrap">
96 <bool>true</bool>
97 </property>
86 </widget>98 </widget>
87 </item>99 </item>
88 </layout>100 </layout>
@@ -125,6 +137,9 @@
125 <property name="text">137 <property name="text">
126 <string notr="true">Sign In</string>138 <string notr="true">Sign In</string>
127 </property>139 </property>
140 <property name="wordWrap">
141 <bool>true</bool>
142 </property>
128 </widget>143 </widget>
129 </item>144 </item>
130 </layout>145 </layout>
@@ -164,6 +179,9 @@
164 <property name="text">179 <property name="text">
165 <string notr="true">Select sync folders</string>180 <string notr="true">Select sync folders</string>
166 </property>181 </property>
182 <property name="wordWrap">
183 <bool>true</bool>
184 </property>
167 </widget>185 </widget>
168 </item>186 </item>
169 </layout>187 </layout>
@@ -203,6 +221,9 @@
203 <property name="text">221 <property name="text">
204 <string notr="true">Sync, stream, share!</string>222 <string notr="true">Sync, stream, share!</string>
205 </property>223 </property>
224 <property name="wordWrap">
225 <bool>true</bool>
226 </property>
206 </widget>227 </widget>
207 </item>228 </item>
208 </layout>229 </layout>
209230
=== modified file 'data/qt/ubuntuone.qss'
--- data/qt/ubuntuone.qss 2012-03-21 18:17:34 +0000
+++ data/qt/ubuntuone.qss 2012-03-22 20:32:25 +0000
@@ -7,7 +7,7 @@
7*/7*/
88
9QMainWindow {9QMainWindow {
10 background-color: #aea79f;10 background-color: #adadad;
11}11}
1212
13QWidget {13QWidget {
@@ -16,6 +16,7 @@
1616
17QFrame {17QFrame {
18 border: none;18 border: none;
19 border-color: #333333;
19}20}
2021
21UbuntuOneWizard,22UbuntuOneWizard,
@@ -23,13 +24,12 @@
23 background: white;24 background: white;
24 border-radius: 5px;25 border-radius: 5px;
25 border-style: solid;26 border-style: solid;
26 border-color: #939389;
27 border-width: 1px;27 border-width: 1px;
28 min-height: 90px;28 min-height: 90px;
29}29}
3030
31QFrame#frame_greeting {31QFrame#frame_greeting {
32 margin 0px;32 margin: 0px;
33 padding-left: 15px;33 padding-left: 15px;
34 padding-top: 10px;34 padding-top: 10px;
35 padding-right: 10px;35 padding-right: 10px;
@@ -39,7 +39,6 @@
39QFrame#frame_status,39QFrame#frame_status,
40QFrame#frame_storage {40QFrame#frame_storage {
41 border-style: dotted;41 border-style: dotted;
42 border-color: #939389;
43 border-left-width: 1px;42 border-left-width: 1px;
44 padding: 10px;43 padding: 10px;
45 min-width: 40px;44 min-width: 40px;
@@ -47,24 +46,21 @@
4746
48QFrame#account_separator {47QFrame#account_separator {
49 border-style: dotted;48 border-style: dotted;
50 border-color: #939389;
51 border-bottom-width: 1px;49 border-bottom-width: 1px;
52}50}
5351
54QFrame#frm_box { /*The Loading Overlay frame.*/52QFrame#frm_box { /*The Loading Overlay frame.*/
55 background: #ffffff;53 background: white;
56 border-radius: 5px;54 border-radius: 5px;
57 border-style: solid;55 border-style: solid;
58 border-color: #939389;
59 border-width: 1px;56 border-width: 1px;
60 color: white;57 color: white;
61 min-height: 100px;58 min-height: 100px;
62}59}
6360
64SideWidget {61SideWidget { /* is a QFrame, so border color is already set */
65 background-color: white;62 background-color: white;
66 border-style: dotted;63 border-style: dotted;
67 border-color: #939389;
68 border-right-width: 1px;64 border-right-width: 1px;
69 color: white;65 color: white;
70 min-height: 100px;66 min-height: 100px;
@@ -100,7 +96,7 @@
10096
101QPushButton:enabled {97QPushButton:enabled {
102 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,98 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
103 stop: 0 #ffffff,stop: 1.0 #e6e6e6);99 stop: 0 white, stop: 1.0 #e6e6e6);
104 color: #333333;100 color: #333333;
105 border-color: #999999;101 border-color: #999999;
106}102}
@@ -111,7 +107,7 @@
111107
112QPushButton:enabled:hover {108QPushButton:enabled:hover {
113 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,109 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
114 stop: 0 #ffffff,stop: 1.0 #ededed);110 stop: 0 white, stop: 1.0 #ededed);
115}111}
116112
117QPushButton:enabled:pressed {113QPushButton:enabled:pressed {
@@ -169,10 +165,9 @@
169 background: transparent;165 background: transparent;
170 border: none;166 border: none;
171 text-decoration: underline;167 text-decoration: underline;
172 color: white;168 padding-left: 2px; /* 2px border buffer when focused */
173 padding-left: 10px;169 padding-right: 15px;
174 padding-right: 25px;170 background-image: url(:/external_icon_dark_grey.png);
175 background-image: url(:/external_icon_white.png);
176 background-repeat: no-repeat;171 background-repeat: no-repeat;
177 background-position: right;172 background-position: right;
178 background-origin: margin;173 background-origin: margin;
@@ -185,8 +180,8 @@
185 padding-bottom: 100%;180 padding-bottom: 100%;
186 /* end of hack */181 /* end of hack */
187 /* Compensate for border so text doesn't move */182 /* Compensate for border so text doesn't move */
188 padding-left: 8px;183 padding-left: 0px;
189 padding-right: 23px;184 padding-right: 13px;
190}185}
191186
192GoToWebButton#share_publish_button {187GoToWebButton#share_publish_button {
@@ -213,51 +208,65 @@
213 padding-right: 23px;208 padding-right: 23px;
214}209}
215210
211GoToWebButton#edit_profile_button,
212GoToWebButton#edit_services_button,
213GoToWebButton#get_more_space_button {
214 padding-left: 8px;
215 padding-right: 25px;
216 background-image: url(:/external_icon_white.png);
217 background-repeat: no-repeat;
218 background-position: right;
219 background-origin: margin;
220}
221
222QTabWidget {
223 border-bottom-left-radius: 5px;
224 border-bottom-right-radius: 5px;
225 border-style: solid;
226 padding: 10px;
227}
228
229QTabWidget::pane {
230 border-bottom-left-radius: 5px;
231 border-bottom-right-radius: 5px;
232 border-top-right-radius: 5px;
233 border-style: solid;
234 border-color: #333333;
235 border-width: 1px;
236 background: white;
237 position: absolute;
238 top: -2px;
239}
240
216QTabBar::tab {241QTabBar::tab {
217 height: 15px;242 background-color: #e3e0dd;
218 color: #333333;
219 background-color: #e4e0dd;
220 border-top-left-radius: 5px;243 border-top-left-radius: 5px;
221 border-top-right-radius: 5px;244 border-top-right-radius: 5px;
245 border-bottom-right-radius: 1px;
246 border-bottom-left-radius: 1px;
222 border-style: solid;247 border-style: solid;
223 padding: 12px;248 padding: 12px;
224 border-top-color: #939389;249 border-color: #898989;
225 border-right-color: #939389;250 border-left-color: #e3e0dd; /* same as background */
226 border-left-color: white;
227 border-bottom-color: #939389;
228 border-width: 1px;251 border-width: 1px;
252 margin-bottom: 1px; /* to be able to override the QTabWidget border */
253 border-bottom-color: #333333; /* same as background for QTabWidget */
254}
255
256QTabBar::tab:first {
257 border-left-color: #898989; /* same as border-color */
258 border-bottom-left-radius: 0px;
229}259}
230260
231QTabBar::tab:selected {261QTabBar::tab:selected {
232 background-color: white;262 background-color: white;
233 border-top-left-radius: 5px;263 border-color: #333333;
234 border-top-right-radius: 5px;264 border-bottom-color: white; /* same as background for selected */
235 border-style: solid;265 border-bottom-right-radius: 0px;
236 padding: 12px;266 border-bottom-left-radius: 0px;
237 border-top-color: #939389;267}
238 border-right-color: #939389;268
239 border-left-color: white;269QTabBar::tab:hover,
240 border-bottom-color: white;
241 border-width: 1px;
242}
243
244QTabBar::tab:first {
245 border-left-color: #939389;
246}
247
248QTabBar::tab:middle:!selected {
249 border-left-color: #e4e0dd;
250}
251
252QTabBar::tab:last:!selected {
253 border-left-color: #e4e0dd;
254}
255
256QTabBar::tab:hover {
257 background: #f6f6f6;
258 text-decoration: underline;
259}
260
261QTabBar::tab:focus {270QTabBar::tab:focus {
262 text-decoration: underline;271 text-decoration: underline;
263 /* hack to make the mild-orange focused box dissapear */272 /* hack to make the mild-orange focused box dissapear */
@@ -266,24 +275,6 @@
266 /* end of hack */275 /* end of hack */
267}276}
268277
269QTabWidget {
270 border-bottom-left-radius: 5px;
271 border-bottom-right-radius: 5px;
272 border-style: solid;
273 padding: 10px;
274}
275
276QTabWidget::pane {
277 border-bottom-left-radius: 5px;
278 border-bottom-right-radius: 5px;
279 border-top-right-radius: 5px;
280 border-style: solid;
281 border-color: #939389;
282 border-width: 1px;
283 background: white;
284 border-top: 2px solid white;
285}
286
287QGroupBox {278QGroupBox {
288 padding-top: 30px;279 padding-top: 30px;
289 border: none;280 border: none;
@@ -332,10 +323,6 @@
332 margin-top: -4px;323 margin-top: -4px;
333}324}
334325
335QLabel#follow_us_label {
336 color: white;
337}
338
339QLabel[OverQuota="true"],326QLabel[OverQuota="true"],
340QLabel#warning_label {327QLabel#warning_label {
341 color: #df2d1f;328 color: #df2d1f;
@@ -343,7 +330,6 @@
343330
344QAbstractItemView {331QAbstractItemView {
345 border-style: solid;332 border-style: solid;
346 border-color: #898989;
347 border-top-width: 1px;333 border-top-width: 1px;
348 border-bottom-width: 1px;334 border-bottom-width: 1px;
349 alternate-background-color: #f7f6f5;335 alternate-background-color: #f7f6f5;
@@ -363,17 +349,6 @@
363 padding-right: 0px;349 padding-right: 0px;
364}350}
365351
366GoToWebButton#edit_profile_button,
367GoToWebButton#edit_services_button,
368GoToWebButton#get_more_space_button {
369 padding-left: 8px;
370 padding-right: 25px;
371 background-image: url(:/external_icon_white.png);
372 background-repeat: no-repeat;
373 background-position: right;
374 background-origin: margin;
375}
376
377QSpinBox {352QSpinBox {
378 padding: 3px;353 padding: 3px;
379 background-color: white;354 background-color: white;

Subscribers

People subscribed via source and target branches