Merge lp:~mhr3/unity/updated-emblem-rendering into lp:unity

Proposed by Michal Hruby
Status: Merged
Approved by: Michal Hruby
Approved revision: no longer in the source branch.
Merged at revision: 2769
Proposed branch: lp:~mhr3/unity/updated-emblem-rendering
Merge into: lp:unity
Diff against target: 238 lines (+61/-47)
2 files modified
plugins/unityshell/resources/emblem_apps.svg (+10/-10)
unity-shared/IconLoader.cpp (+51/-37)
To merge this branch: bzr merge lp:~mhr3/unity/updated-emblem-rendering
Reviewer Review Type Date Requested Status
Xi Zhu (community) design Approve
Nick Dedekind (community) Approve
Review via email: mp+126889@code.launchpad.net

Commit message

Update rendering of the price ribbon when emblem is displayed

Description of the change

Position of the curve on the price ribbon is relative to the width of the ribbon, but according to design this shouldn't be the case as it scales the curve in ways we don't want.

Small visual change, no new tests.

To post a comment you must log in.
Revision history for this message
Michal Hruby (mhr3) wrote :

Here's what the ribbons look like with this branch - http://ubuntuone.com/7RHKeah69gaWopteUtMQeD (isn't exact - the movie and music emblems will be shifted 1px to the left)

Revision history for this message
Nick Dedekind (nick-dedekind) wrote :

Tested and LGTM.

review: Approve
Revision history for this message
Xi Zhu (xi.zhu) :
review: Approve (design)
Revision history for this message
Unity Merger (unity-merger) wrote :

The Jenkins job https://jenkins.qa.ubuntu.com/job/automerge-unity/1402/console reported an error when processing this lp:~mhr3/unity/updated-emblem-rendering branch.
Not merging it.

Revision history for this message
Unity Merger (unity-merger) wrote :

The Jenkins job https://jenkins.qa.ubuntu.com/job/automerge-unity/1406/console reported an error when processing this lp:~mhr3/unity/updated-emblem-rendering branch.
Not merging it.

Revision history for this message
Unity Merger (unity-merger) wrote :

The Jenkins job https://jenkins.qa.ubuntu.com/job/automerge-unity/1411/console reported an error when processing this lp:~mhr3/unity/updated-emblem-rendering branch.
Not merging it.

Revision history for this message
Unity Merger (unity-merger) wrote :

The Jenkins job https://jenkins.qa.ubuntu.com/job/automerge-unity/1415/console reported an error when processing this lp:~mhr3/unity/updated-emblem-rendering branch.
Not merging it.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'plugins/unityshell/resources/emblem_apps.svg'
2--- plugins/unityshell/resources/emblem_apps.svg 2012-09-26 13:08:00 +0000
3+++ plugins/unityshell/resources/emblem_apps.svg 2012-09-28 08:34:24 +0000
4@@ -37,20 +37,20 @@
5 id="namedview21"
6 showgrid="false"
7 inkscape:zoom="16.857143"
8- inkscape:cx="7.0207627"
9- inkscape:cy="7"
10+ inkscape:cx="7.0207628"
11+ inkscape:cy="7.0000001"
12 inkscape:window-x="65"
13 inkscape:window-y="24"
14 inkscape:window-maximized="0"
15 inkscape:current-layer="Layer_1" />
16 <path
17- d="m 8,5 v 8.000556 C 8,13.5508 7.531,14 6.982,14 H 5.998 C 5.448,14 5,13.5508 5,13.000556 V 5 h 3 z"
18+ d="m 9,5 v 8.000556 C 9,13.5508 8.531,14 7.982,14 H 6.998 C 6.448,14 6,13.5508 6,13.000556 V 5 h 3 z"
19 id="path3"
20 inkscape:connector-curvature="0"
21 style="fill:#dc4a26" />
22 <g
23 id="g5"
24- transform="matrix(1,0,0,1.0003848,-0.5,0.49480569)">
25+ transform="matrix(1,0,0,1.0003848,0.5,0.49480569)">
26 <path
27 d="m 4.5,4.504 h -2 v -1 h 2 V 1.505 c 0,-0.55 -0.45,-1 -1,-1 H 1.501 c -0.55,0 -1,0.45 -1,1 L 0.5,12.501 c 0,0.55 0.45,0.999 1,0.999 h 1.999 c 0.55,0 1,-0.449 1,-0.999 V 10.5 L 2.5,10.502 v -1 L 4.499,9.5 V 7.503 H 2.5 v -1 h 2"
28 id="path7"
29@@ -58,32 +58,32 @@
30 style="fill:#dc4a26" />
31 </g>
32 <path
33- d="m 4,7.003 v -1 l 0,0 v 1 l 0,0 z"
34+ d="m 5,7.003 v -1 l 0,0 v 1 l 0,0 z"
35 id="path9"
36 inkscape:connector-curvature="0"
37 style="fill:#dc4a26" />
38 <path
39- d="m 4,10.002 v -1 h 0 l 0,1 0,0 z"
40+ d="m 5,10.002 v -1 h 0 l 0,1 0,0 z"
41 id="path11"
42 inkscape:connector-curvature="0"
43 style="fill:#dc4a26" />
44 <path
45- d="m 4,12.999 0,0 0,0 0,0 0,0 z"
46+ d="m 5,12.999 0,0 0,0 0,0 0,0 z"
47 id="path13"
48 inkscape:connector-curvature="0"
49 style="fill:#dc4a26" />
50 <path
51- d="m 11.366,1 v 1.234223 c 0.236,0.1107508 0.434,0.3063108 0.434,0.5397855 0,0.3532053 -0.358,0.6385632 -0.8,0.6385632 -0.442,0 -0.8,-0.2853579 -0.8,-0.6385632 0,-0.2334747 0.198,-0.4290347 0.433,-0.5397855 V 1 C 10.16,1.4629583 9,2.8089299 9,3.4035919 9,4.2856074 10.116,5 11,5 11.884,5 13,4.2856074 13,3.4035919 13,2.8089299 11.84,1.4629583 11.366,1 z"
52+ d="m 12.366,1 v 1.234223 c 0.236,0.1107508 0.434,0.3063108 0.434,0.5397855 0,0.3532053 -0.358,0.6385632 -0.8,0.6385632 -0.442,0 -0.8,-0.2853579 -0.8,-0.6385632 0,-0.2334747 0.198,-0.4290347 0.433,-0.5397855 V 1 C 11.16,1.4629583 10,2.8089299 10,3.4035919 10,4.2856074 11.116,5 12,5 12.884,5 14,4.2856074 14,3.4035919 14,2.8089299 12.84,1.4629583 12.366,1 z"
53 id="path15"
54 inkscape:connector-curvature="0"
55 style="fill:#dc4a26" />
56 <path
57- d="M 5,4 6.5465155,1 8,4 H 5 z"
58+ d="M 6,4 7.5465155,1 9,4 H 6 z"
59 id="path17"
60 inkscape:connector-curvature="0"
61 style="fill:#dc4a26" />
62 <path
63- d="m 13,6 v 7.000625 C 13,13.550832 12.55,14 12,14 H 10 C 9.45,14 9,13.550832 9,13.000625 V 6 h 4 z"
64+ d="m 14,6 v 7.000625 C 14,13.550832 13.55,14 13,14 h -2 c -0.55,0 -1,-0.449168 -1,-0.999375 V 6 h 4 z"
65 id="path19"
66 inkscape:connector-curvature="0"
67 style="fill:#dc4a26" />
68
69=== modified file 'unity-shared/IconLoader.cpp'
70--- unity-shared/IconLoader.cpp 2012-09-26 13:17:16 +0000
71+++ unity-shared/IconLoader.cpp 2012-09-28 08:34:24 +0000
72@@ -302,6 +302,7 @@
73 {
74 const int SHADOW_BOTTOM_PADDING = 2;
75 const int SHADOW_SIDE_PADDING = 1;
76+ const int EMBLEM_PADDING = 2;
77 int icon_w = gdk_pixbuf_get_width(result);
78 int icon_h = gdk_pixbuf_get_height(result);
79
80@@ -335,9 +336,16 @@
81 pango_layout_set_font_description(layout, desc.get());
82 pango_layout_set_alignment(layout, PANGO_ALIGN_CENTER);
83
84- // magic constant for the text width based on the white curve
85- double max_text_width = has_emblem ?
86- pixbuf_width * 0.72 : pixbuf_width;
87+ double belt_w = static_cast<double>(pixbuf_width - SHADOW_SIDE_PADDING * 2);
88+ double belt_h = static_cast<double>(pixbuf_height - SHADOW_BOTTOM_PADDING);
89+
90+ double max_text_width = belt_w;
91+ if (has_emblem)
92+ {
93+ const double CURVE_MID_X = 0.4 * (belt_h / 20.0 * 24.0);
94+ const int category_pb_w = gdk_pixbuf_get_width(category_pixbuf);
95+ max_text_width = belt_w - CURVE_MID_X - category_pb_w - EMBLEM_PADDING;
96+ }
97
98 pango_layout_set_wrap(layout, PANGO_WRAP_WORD_CHAR);
99 pango_layout_set_ellipsize(layout, PANGO_ELLIPSIZE_END);
100@@ -352,7 +360,7 @@
101 dpi == -1 ? 96.0f : dpi/(float) PANGO_SCALE);
102 pango_layout_context_changed(layout);
103
104- // find proper font size (can we do this before the rotation?)
105+ // find proper font size
106 int text_width, text_height;
107 pango_layout_get_pixel_size(layout, &text_width, nullptr);
108 while (text_width > max_text_width && font_size > MIN_FONT_SIZE)
109@@ -374,23 +382,23 @@
110 const double ORANGE_G = 0.28235;
111 const double ORANGE_B = 0.07843;
112
113- double belt_w = static_cast<double>(pixbuf_width - SHADOW_SIDE_PADDING * 2);
114- double belt_h = static_cast<double>(pixbuf_height - SHADOW_BOTTOM_PADDING);
115-
116 // translate to make space for the shadow
117 cairo_save(cr.get());
118 cairo_translate(cr.get(), 1.0, 1.0);
119
120 cairo_set_source_rgba(cr.get(), ORANGE_R, ORANGE_G, ORANGE_B, 1.0);
121
122+ // base ribbon
123 cairo_rectangle(cr.get(), 0.0, 0.0, belt_w, belt_h);
124 cairo_fill_preserve(cr.get());
125
126+ // hightlight on left edge
127 std::shared_ptr<cairo_pattern_t> pattern(
128 cairo_pattern_create_linear(0.0, 0.0, belt_w, 0.0),
129 cairo_pattern_destroy);
130 cairo_pattern_add_color_stop_rgba(pattern.get(), 0.0, 1.0, 1.0, 1.0, 0.235294);
131 cairo_pattern_add_color_stop_rgba(pattern.get(), 0.02, 1.0, 1.0, 1.0, 0.0);
132+ // and on right one
133 if (!has_emblem)
134 {
135 cairo_pattern_add_color_stop_rgba(pattern.get(), 0.98, 1.0, 1.0, 1.0, 0.0);
136@@ -403,27 +411,38 @@
137
138 if (has_emblem)
139 {
140- // paint the curve
141- const double CURVE_START_XPOS = 0.631163; // 0.651163
142- const double CURVE_CP1_XPOS = CURVE_START_XPOS + 0.068023;
143- const double CURVE_CP2_XPOS = CURVE_START_XPOS + 0.07;
144- const double CURVE_CP3_XPOS = CURVE_START_XPOS + 0.102965;
145- const double CURVE_CP4_XPOS = CURVE_START_XPOS + 0.161511;
146- const double CURVE_CP5_XPOS = CURVE_START_XPOS + 0.197093;
147- const double CURVE_END_XPOS = CURVE_START_XPOS + 0.265779;
148-
149- const double CURVE_START_X = CURVE_START_XPOS * belt_w;
150+ // size of the emblem
151+ const int category_pb_w = gdk_pixbuf_get_width(category_pixbuf);
152+ const int category_pb_h = gdk_pixbuf_get_height(category_pixbuf);
153+
154+ // control and end points for the two bezier curves
155+ const double CURVE_X_MULT = belt_h / 20.0 * 24.0;
156+ const double CURVE_CP1_X = 0.25 * CURVE_X_MULT;
157+ const double CURVE_CP2_X = 0.2521 * CURVE_X_MULT;
158+ const double CURVE_CP3_X = 0.36875 * CURVE_X_MULT;
159+ const double CURVE_CP4_X = 0.57875 * CURVE_X_MULT;
160+ const double CURVE_CP5_X = 0.705417 * CURVE_X_MULT;
161+ const double CURVE_CP6_X = 0.723333 * CURVE_X_MULT;
162+ const double CURVE_CP7_X = 0.952375 * CURVE_X_MULT;
163+
164+ const double CURVE_Y1 = 0.9825;
165+ const double CURVE_Y2 = 0.72725;
166+ const double CURVE_Y3 = 0.27275;
167+
168+ const double CURVE_START_X = belt_w - category_pb_w - CURVE_CP5_X - EMBLEM_PADDING;
169+ //const double CURVE_END_X = CURVE_START_X + CURVE_X_MULT;
170
171 cairo_set_source_rgba(cr.get(), 1.0, 1.0, 1.0, 1.0);
172
173- cairo_move_to(cr.get(), CURVE_START_XPOS * belt_w, belt_h);
174- cairo_curve_to(cr.get(), CURVE_CP1_XPOS * belt_w, belt_h,
175- CURVE_CP2_XPOS * belt_w, 0.9825 * belt_h,
176- CURVE_CP3_XPOS * belt_w, 0.72725 * belt_h);
177- cairo_line_to(cr.get(), CURVE_CP4_XPOS * belt_w, 0.27275 * belt_h);
178- cairo_curve_to(cr.get(), CURVE_CP5_XPOS * belt_w, 0.0,
179- CURVE_CP5_XPOS * belt_w, 0.0,
180- CURVE_END_XPOS * belt_w, 0.0);
181+ // paint the curved area
182+ cairo_move_to(cr.get(), CURVE_START_X, belt_h);
183+ cairo_curve_to(cr.get(), CURVE_START_X + CURVE_CP1_X, belt_h,
184+ CURVE_START_X + CURVE_CP2_X, CURVE_Y1 * belt_h,
185+ CURVE_START_X + CURVE_CP3_X, CURVE_Y2 * belt_h);
186+ cairo_line_to(cr.get(), CURVE_START_X + CURVE_CP4_X, CURVE_Y3 * belt_h);
187+ cairo_curve_to(cr.get(), CURVE_START_X + CURVE_CP5_X, 0.0,
188+ CURVE_START_X + CURVE_CP6_X, 0.0,
189+ CURVE_START_X + CURVE_CP7_X, 0.0);
190 cairo_line_to(cr.get(), belt_w, 0.0);
191 cairo_line_to(cr.get(), belt_w, belt_h);
192 cairo_close_path(cr.get());
193@@ -440,16 +459,13 @@
194 cairo_fill(cr.get());
195
196 // paint the emblem
197- int category_pb_w = gdk_pixbuf_get_width(category_pixbuf);
198- int category_pb_h = gdk_pixbuf_get_height(category_pixbuf);
199- double category_pb_x =
200- belt_w - category_pb_w > CURVE_CP4_XPOS * belt_w ?
201- CURVE_CP4_XPOS * belt_w + ((1 - CURVE_CP4_XPOS) * belt_w - category_pb_w) / 2 : CURVE_CP4_XPOS * belt_w;
202+ double category_pb_x = belt_w - category_pb_w - EMBLEM_PADDING - 1;
203 gdk_cairo_set_source_pixbuf(cr.get(), category_pixbuf,
204 category_pb_x, (belt_h - category_pb_h) / 2);
205 cairo_paint(cr.get());
206 }
207
208+ // paint the text
209 cairo_set_source_rgba(cr.get(), 1.0, 1.0, 1.0, 1.0);
210 cairo_move_to(cr.get(), 0.0, belt_h / 2);
211 pango_layout_get_pixel_size(layout, nullptr, &text_height);
212@@ -463,7 +479,7 @@
213
214 pattern.reset(cairo_pattern_create_linear(0.0, belt_h, 0.0, belt_h + SHADOW_BOTTOM_PADDING),
215 cairo_pattern_destroy);
216- cairo_pattern_add_color_stop_rgba(pattern.get(), 0.0, 0.0, 0.0, 0.0, 0.2);
217+ cairo_pattern_add_color_stop_rgba(pattern.get(), 0.0, 0.0, 0.0, 0.0, 0.235294);
218 cairo_pattern_add_color_stop_rgba(pattern.get(), 1.0, 0.0, 0.0, 0.0, 0.0);
219
220 cairo_set_source(cr.get(), pattern.get());
221@@ -472,13 +488,11 @@
222 cairo_fill(cr.get());
223
224 cairo_set_source_rgba(cr.get(), 0.0, 0.0, 0.0, 0.1);
225- cairo_move_to(cr.get(), 0.0, 1.0);
226- cairo_line_to(cr.get(), 0.0, belt_h);
227- cairo_stroke(cr.get());
228+ cairo_rectangle(cr.get(), 0.0, 1.0, 1.0, belt_h);
229+ cairo_fill(cr.get());
230
231- cairo_move_to(cr.get(), belt_w, 1.0);
232- cairo_line_to(cr.get(), belt_w, belt_h);
233- cairo_stroke(cr.get());
234+ cairo_rectangle(cr.get(), belt_w, 1.0, 1.0, belt_h);
235+ cairo_fill(cr.get());
236
237 // FIXME: going from image_surface to pixbuf, and then to texture :(
238 glib::Object<GdkPixbuf> detail_pb(