Unity

Merge lp:~unity-team/unity/unity.fix-901164 into lp:unity

  1. unity.fix-901164
  2. Merge into trunk
Proposed by Mirco Müller
Status: Merged
Approved by: Mirco Müller
Approved revision: no longer in the source branch.
Merged at revision: 2225
Proposed branch: lp:~unity-team/unity/unity.fix-901164
Merge into: lp:unity
Diff against target: 420 lines (+157/-98)
5 files modified
plugins/unityshell/src/LensView.cpp (+7/-0)
plugins/unityshell/src/ResultRendererHorizontalTile.cpp (+147/-95)
plugins/unityshell/src/ResultRendererHorizontalTile.h (+2/-0)
plugins/unityshell/src/ResultRendererTile.cpp (+0/-3)
plugins/unityshell/src/ResultRendererTile.h (+1/-0)
To merge this branch: bzr merge lp:~unity-team/unity/unity.fix-901164
Reviewer Review Type Date Requested Status
Andrea Cimitan (community) design Approve
Review via email: mp+100656@code.launchpad.net

Commit message

Implement new card view design

Description of the change

Update the horizontal tile renderer (aka "Card View") to comply with the visual specs from Design. This is what it looked like before...

  http://people.canonical.com/~mmueller/before-901164-1.png

... and this is with the fixes from this proposed branch...

  http://people.canonical.com/~mmueller/after-901164-2.png

To post a comment you must log in.
Revision history for this message
Andrea Cimitan (cimi) wrote :

Reference mockups? /me thinks it looks better before :D

Revision history for this message
Andrea Cimitan (cimi) wrote :

Reference mockups:
https://launchpadlibrarian.net/86840462/dash_cardview1.png
https://launchpadlibrarian.net/86840469/dash_cardview2.png

Issue in spacing/padding between items, color (why do they have a color?).

review: Needs Fixing (design)
Revision history for this message
Andrea Cimitan (cimi) wrote :

I can see different opacity used as external line applied to the icons, and a subtle shadow.

Revision history for this message
Andrea Cimitan (cimi) wrote :

(among the other changes)

Revision history for this message
Mirco Müller (macslow) wrote :

You're also not up-to-date as John, who used the same mockups thinking my branch was out of sync with Design. But all the values and visual specs I got are from Rosie and up-to-date.

Revision history for this message
Andrea Cimitan (cimi) wrote :

The mockup is by nature static, while our dash can change its colors and dimensions. We have to be smart and adjust according to our needs.

Refinements I suggested to designers which I got aproval:
1. color behind the cards, two solutions:
  a) pick up either average color and apply a color shade, with reduced alpha.
  b) pick up a tint of black with very slight alpha.
2. padding between cards, two solutions:
  a) apply even padding even on left and right edges of the first and last card, apply evenly.
  b) make cards flexible in width when the dash width is bigger, keeping small padding.

Revision history for this message
Andrea Cimitan (cimi) wrote :

I forgot to say that we will discuss that further with you in IRC.

Revision history for this message
Mirco Müller (macslow) wrote :

I wish those "needs" would be part of the spec in the first place. Until yesterday everything I did was on-spec.

Regarding 1.) I was informed by Rosie, after she checked back with Otto and after I did the merge-proposal, that the non-highlight tint is meant to be like the one on the nav-bar.

Regarding 2.) I also found updated specs (after the merge-proposal) asking for option 2 b).

Revision history for this message
Andrea Cimitan (cimi) wrote :

> I wish those "needs" would be part of the spec in the first place. Until
> yesterday everything I did was on-spec.
>
> Regarding 1.) I was informed by Rosie, after she checked back with Otto and
> after I did the merge-proposal, that the non-highlight tint is meant to be
> like the one on the nav-bar.
>
> Regarding 2.) I also found updated specs (after the merge-proposal) asking for
> option 2 b).

I apologize for the late info. Ideal would be that when the developer is facing issues or different behaviors / conditions with the mockup immediately informs the designer owner of the specs.

Revision history for this message
Mirco Müller (macslow) wrote :

bg-color tinting fix is in http://people.canonical.com/~mmueller/after-901164-3.png

The padding fix comes after this was approved and merged, so there's no conflict with the wide-icon fixes Gord needs to do... and which should be based on this branch being in trunk rather then current trunk.

Revision history for this message
Andrea Cimitan (cimi) wrote :

Approving.
Design is exploring usage of different colors, but this will come after as a separate branch

review: Approve (design)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'plugins/unityshell/src/LensView.cpp'
2--- plugins/unityshell/src/LensView.cpp 2012-04-04 15:45:50 +0000
3+++ plugins/unityshell/src/LensView.cpp 2012-04-05 10:13:19 +0000
4@@ -40,6 +40,9 @@
5 namespace
6 {
7 nux::logging::Logger logger("unity.dash.lensview");
8+
9+const int CARD_VIEW_GAP_VERT = 24; // pixels
10+const int CARD_VIEW_GAP_HORIZ = 25; // pixels
11 }
12
13 // This is so we can access some protected members in scrollview.
14@@ -286,7 +289,11 @@
15 ResultViewGrid* grid = new ResultViewGrid(NUX_TRACKER_LOCATION);
16 grid->expanded = false;
17 if (renderer_name == "tile-horizontal")
18+ {
19 grid->SetModelRenderer(new ResultRendererHorizontalTile(NUX_TRACKER_LOCATION));
20+ grid->horizontal_spacing = CARD_VIEW_GAP_HORIZ;
21+ grid->vertical_spacing = CARD_VIEW_GAP_VERT;
22+ }
23 else
24 grid->SetModelRenderer(new ResultRendererTile(NUX_TRACKER_LOCATION));
25
26
27=== modified file 'plugins/unityshell/src/ResultRendererHorizontalTile.cpp'
28--- plugins/unityshell/src/ResultRendererHorizontalTile.cpp 2012-03-21 17:46:38 +0000
29+++ plugins/unityshell/src/ResultRendererHorizontalTile.cpp 2012-04-05 10:13:19 +0000
30@@ -37,13 +37,34 @@
31 #include "IconTexture.h"
32 #include "TextureCache.h"
33
34-//~ namespace
35-//~ {
36+
37+namespace unity
38+{
39+namespace
40+{
41 //~ nux::logging::Logger logger("unity.dash.ResultRendererHorizontalTile");
42-//~ }
43+const int CARD_VIEW_PADDING = 4; // pixels
44+const int CARD_VIEW_ICON_SIZE = 64; // pixels
45+const int CARD_VIEW_ICON_TEXT_GAP = 10; // pixels
46+//const int CARD_VIEW_GAP_VERT = 24; // pixels
47+//const int CARD_VIEW_GAP_HORIZ = 25; // pixels
48+const int CARD_VIEW_WIDTH = 277; // pixels
49+const int CARD_VIEW_HEIGHT = 74; // pixels
50+const int CARD_VIEW_HIGHLIGHT_CORNER_RADIUS = 2; // pixels
51+//const char CARD_VIEW_ICON_OUTLINE_COLOR = "#000000";
52+//const float CARD_VIEW_ICON_OUTLINE_OPACITY = 1.0; //float
53+const int CARD_VIEW_ICON_OUTLINE_WIDTH = 1; // pixels
54+const int CARD_VIEW_TEXT_LINE_SPACING = 2; // points
55+//const char CARD_VIEW_TEXT_TITLE_COLOR = "#ffffff";
56+//const float CARD_VIEW_TEXT_TITLE_OPACITY = 1.0; // float
57+//const float CARD_VIEW_TEXT_TITLE_SIZE = 13.0; // points
58+//const char CARD_VIEW_TEXT_TITLE_WEIGHT = "bold";
59+//const char CARD_VIEW_TEXT_BODY_COLOR = "#ffffff";
60+//const float CARD_VIEW_TEXT_BODY_OPACITY = 1.0; // float
61+//const float CARD_VIEW_TEXT_BODY_SIZE = 13.0; // points
62+//const int CARD_VIEW_TEXT_BODY_WEIGHT = "regular";
63+}
64
65-namespace unity
66-{
67 namespace dash
68 {
69 NUX_IMPLEMENT_OBJECT_TYPE(ResultRendererHorizontalTile);
70@@ -51,17 +72,21 @@
71 ResultRendererHorizontalTile::ResultRendererHorizontalTile(NUX_FILE_LINE_DECL)
72 : ResultRendererTile(NUX_FILE_LINE_PARAM)
73 {
74- Style& style = Style::Instance();
75- width = style.GetTileWidth() * 2;
76- height = style.GetTileIconSize() + (padding * 2);
77+ width = CARD_VIEW_WIDTH;
78+ height = CARD_VIEW_HEIGHT;
79
80 // pre-load the highlight texture
81 // try and get a texture from the texture cache
82 TextureCache& cache = TextureCache::GetDefault();
83 prelight_cache_ = cache.FindTexture("ResultRendererHorizontalTile.PreLightTexture",
84- style.GetTileIconSize() + (highlight_padding * 2),
85- style.GetTileIconSize() + (highlight_padding * 2),
86+ CARD_VIEW_WIDTH,
87+ CARD_VIEW_HEIGHT,
88 sigc::mem_fun(this, &ResultRendererHorizontalTile::DrawHighlight));
89+ normal_cache_ = cache.FindTexture("ResultRendererHorizontalTile.NormalTexture",
90+ CARD_VIEW_WIDTH,
91+ CARD_VIEW_HEIGHT,
92+ sigc::mem_fun(this, &ResultRendererHorizontalTile::DrawNormal));
93+
94 }
95
96 ResultRendererHorizontalTile::~ResultRendererHorizontalTile()
97@@ -78,33 +103,49 @@
98 if (container == nullptr)
99 return;
100
101- Style& style = Style::Instance();
102-
103 // set up our texture mode
104 nux::TexCoordXForm texxform;
105
106 int icon_left_hand_side = geometry.x + padding;
107- int icon_top_side = geometry.y + ((geometry.height - style.GetTileIconSize()) / 2);
108-
109-
110- if (container->blurred_icon && state == ResultRendererState::RESULT_RENDERER_NORMAL)
111+ int icon_top_side = geometry.y + ((geometry.height - CARD_VIEW_ICON_SIZE) / 2);
112+
113+ // render overall tile background "rectangle"
114+ if (state == ResultRendererState::RESULT_RENDERER_NORMAL)
115 {
116- GfxContext.QRP_1Tex(icon_left_hand_side - 5 - x_offset,
117- icon_top_side - 5 - y_offset,
118- style.GetTileIconSize() + 10,
119- style.GetTileIconSize() + 10,
120- container->blurred_icon->GetDeviceTexture(),
121+ int x = icon_left_hand_side;
122+ int y = icon_top_side;
123+ int w = CARD_VIEW_WIDTH;
124+ int h = CARD_VIEW_HEIGHT;
125+
126+ unsigned int alpha = 0;
127+ unsigned int src = 0;
128+ unsigned int dest = 0;
129+ GfxContext.GetRenderStates().GetBlend(alpha, src, dest);
130+ GfxContext.GetRenderStates().SetBlend(true, GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
131+
132+ GfxContext.QRP_1Tex(x,
133+ y,
134+ w,
135+ h,
136+ normal_cache_->GetDeviceTexture(),
137 texxform,
138- nux::Color(0.15f, 0.15f, 0.15f, 0.15f));
139+ nux::Color(1.0f, 1.0f, 1.0f, 1.0f));
140+
141+ GfxContext.GetRenderStates().SetBlend(alpha, src, dest);
142 }
143
144 // render highlight if its needed
145 if (state != ResultRendererState::RESULT_RENDERER_NORMAL)
146 {
147- GfxContext.QRP_1Tex(icon_left_hand_side - highlight_padding,
148- icon_top_side - highlight_padding,
149- style.GetTileIconSize() + (highlight_padding * 2),
150- style.GetTileIconSize() + (highlight_padding * 2),
151+ int x = icon_left_hand_side;
152+ int y = icon_top_side;
153+ int w = CARD_VIEW_WIDTH;
154+ int h = CARD_VIEW_HEIGHT;
155+
156+ GfxContext.QRP_1Tex(x,
157+ y,
158+ w,
159+ h,
160 prelight_cache_->GetDeviceTexture(),
161 texxform,
162 nux::Color(1.0f, 1.0f, 1.0f, 1.0f));
163@@ -113,10 +154,20 @@
164 // draw the icon
165 if (container->icon)
166 {
167- GfxContext.QRP_1Tex(icon_left_hand_side,
168- icon_top_side,
169- style.GetTileIconSize(),
170- style.GetTileIconSize(),
171+ int x = icon_left_hand_side + CARD_VIEW_PADDING + CARD_VIEW_ICON_OUTLINE_WIDTH;
172+ int y = icon_top_side + CARD_VIEW_PADDING + CARD_VIEW_ICON_OUTLINE_WIDTH;
173+ int w = CARD_VIEW_ICON_SIZE;
174+ int h = CARD_VIEW_ICON_SIZE;
175+ gPainter.Paint2DQuadColor(GfxContext,
176+ x - CARD_VIEW_ICON_OUTLINE_WIDTH,
177+ y - CARD_VIEW_ICON_OUTLINE_WIDTH,
178+ w + 2 * CARD_VIEW_ICON_OUTLINE_WIDTH,
179+ h + 2 * CARD_VIEW_ICON_OUTLINE_WIDTH,
180+ nux::color::Black);
181+ GfxContext.QRP_1Tex(x,
182+ y,
183+ w,
184+ h,
185 container->icon->GetDeviceTexture(),
186 texxform,
187 nux::Color(1.0f, 1.0f, 1.0f, 1.0f));
188@@ -124,15 +175,19 @@
189
190 if (container->text)
191 {
192- GfxContext.QRP_1Tex(icon_left_hand_side + style.GetTileIconSize() + spacing,
193- icon_top_side,
194- container->text->GetWidth(),
195- container->text->GetHeight(),
196+ int x = icon_left_hand_side + CARD_VIEW_PADDING + 2 * CARD_VIEW_ICON_OUTLINE_WIDTH + CARD_VIEW_ICON_SIZE + CARD_VIEW_ICON_TEXT_GAP;
197+ int y = icon_top_side + CARD_VIEW_PADDING;
198+ int w = container->text->GetWidth();
199+ int h = container->text->GetHeight();
200+
201+ GfxContext.QRP_1Tex(x,
202+ y,
203+ w,
204+ h,
205 container->text->GetDeviceTexture(),
206 texxform,
207 nux::Color(1.0f, 1.0f, 1.0f, 1.0f));
208 }
209-
210 }
211
212 nux::BaseTexture* ResultRendererHorizontalTile::DrawHighlight(std::string const& texid,
213@@ -147,55 +202,46 @@
214 cairo_set_operator(cr, CAIRO_OPERATOR_CLEAR);
215 cairo_paint(cr);
216
217- int PADDING = 4;
218- int BLUR_SIZE = 5;
219-
220- int bg_width = width - PADDING - BLUR_SIZE;
221- int bg_height = height - PADDING - BLUR_SIZE;
222- int bg_x = BLUR_SIZE - 1;
223- int bg_y = BLUR_SIZE - 1;
224-
225- // draw the glow
226- cairo_set_operator(cr, CAIRO_OPERATOR_OVER);
227- cairo_set_line_width(cr, 1.0f);
228- cairo_set_source_rgba(cr, 1.0f, 1.0f, 1.0f, 0.75f);
229- cairo_graphics.DrawRoundedRectangle(cr,
230- 1.0f,
231- bg_x,
232- bg_y,
233- 5.0,
234- bg_width,
235- bg_height,
236- true);
237- cairo_fill(cr);
238-
239- cairo_graphics.BlurSurface(BLUR_SIZE - 2);
240-
241- cairo_set_operator(cr, CAIRO_OPERATOR_SOURCE);
242- cairo_graphics.DrawRoundedRectangle(cr,
243- 1.0,
244- bg_x,
245- bg_y,
246- 5.0,
247- bg_width,
248- bg_height,
249- true);
250- cairo_clip(cr);
251- cairo_set_operator(cr, CAIRO_OPERATOR_OVER);
252-
253- cairo_graphics.DrawRoundedRectangle(cr,
254- 1.0,
255- bg_x,
256- bg_y,
257- 5.0,
258- bg_width,
259- bg_height,
260- true);
261- cairo_set_source_rgba(cr, 240 / 255.0f, 240 / 255.0f, 240 / 255.0f, 1.0f);
262- cairo_fill_preserve(cr);
263-
264- cairo_set_source_rgba(cr, 1.0f, 1.0f, 1.0f, 1.0);
265- cairo_stroke(cr);
266+ // draw the highlight
267+ cairo_set_operator(cr, CAIRO_OPERATOR_OVER);
268+ cairo_set_source_rgba(cr, 1.0f, 1.0f, 1.0f, 0.2f);
269+ cairo_graphics.DrawRoundedRectangle(cr,
270+ 1.0f,
271+ 0.0f,
272+ 0.0f,
273+ CARD_VIEW_HIGHLIGHT_CORNER_RADIUS,
274+ width,
275+ height,
276+ false);
277+ cairo_fill(cr);
278+
279+ return texture_from_cairo_graphics(cairo_graphics);
280+}
281+
282+nux::BaseTexture* ResultRendererHorizontalTile::DrawNormal(std::string const& texid,
283+ int width, int height)
284+{
285+ nux::CairoGraphics cairo_graphics(CAIRO_FORMAT_ARGB32, width, height);
286+ cairo_t* cr = cairo_graphics.GetInternalContext();
287+
288+ cairo_scale(cr, 1.0f, 1.0f);
289+
290+ cairo_set_source_rgba(cr, 1.0, 1.0, 1.0, 0.0);
291+ cairo_set_operator(cr, CAIRO_OPERATOR_CLEAR);
292+ cairo_paint(cr);
293+
294+ // draw the normal bg
295+ cairo_set_operator(cr, CAIRO_OPERATOR_OVER);
296+ cairo_set_source_rgba(cr, 0.0f, 0.0f, 0.0f, 0.2f);
297+ cairo_graphics.DrawRoundedRectangle(cr,
298+ 1.0f,
299+ 0.0f,
300+ 0.0f,
301+ CARD_VIEW_HIGHLIGHT_CORNER_RADIUS,
302+ width,
303+ height,
304+ false);
305+ cairo_fill(cr);
306
307 return texture_from_cairo_graphics(cairo_graphics);
308 }
309@@ -205,16 +251,18 @@
310 std::stringstream final_text;
311 char *name = g_markup_escape_text(row.name().c_str() , -1);
312 char *comment = g_markup_escape_text(row.comment().c_str() , -1);
313- final_text << name << "\n<span size=\"small\">"
314- << comment << "</span>";
315+
316+ if(row.comment().empty())
317+ final_text << "<b>" << name << "</b>";
318+ else
319+ final_text << "<b>" << name << "</b>" << "\n" << comment;
320
321 g_free(name);
322 g_free(comment);
323
324- Style& style = Style::Instance();
325 nux::CairoGraphics _cairoGraphics(CAIRO_FORMAT_ARGB32,
326- width() - style.GetTileIconSize() + spacing - (padding * 2),
327- height() - (padding * 2));
328+ CARD_VIEW_WIDTH - CARD_VIEW_ICON_SIZE - 2 * CARD_VIEW_ICON_OUTLINE_WIDTH - 2 * CARD_VIEW_PADDING - CARD_VIEW_ICON_TEXT_GAP,
329+ CARD_VIEW_HEIGHT - 2 * CARD_VIEW_PADDING);
330
331 cairo_t* cr = _cairoGraphics.GetContext();
332
333@@ -222,23 +270,22 @@
334 PangoFontDescription* desc = NULL;
335 PangoContext* pango_context = NULL;
336 GdkScreen* screen = gdk_screen_get_default(); // not ref'ed
337- glib::String font;
338 int dpi = -1;
339
340- g_object_get(gtk_settings_get_default(), "gtk-font-name", &font, NULL);
341 g_object_get(gtk_settings_get_default(), "gtk-xft-dpi", &dpi, NULL);
342
343 cairo_set_font_options(cr, gdk_screen_get_font_options(screen));
344 layout = pango_cairo_create_layout(cr);
345- desc = pango_font_description_from_string(font.Value());
346+ desc = pango_font_description_from_string("Ubuntu 10");
347
348 pango_layout_set_font_description(layout, desc);
349 pango_layout_set_alignment(layout, PANGO_ALIGN_LEFT);
350
351 pango_layout_set_wrap(layout, PANGO_WRAP_WORD_CHAR);
352 pango_layout_set_ellipsize(layout, PANGO_ELLIPSIZE_END);
353- pango_layout_set_width(layout, (width() - style.GetTileIconSize() - spacing)* PANGO_SCALE);
354- pango_layout_set_height(layout, (height() - (padding * 2)) * PANGO_SCALE);
355+ pango_layout_set_spacing(layout, CARD_VIEW_TEXT_LINE_SPACING * PANGO_SCALE);
356+ pango_layout_set_width(layout, (CARD_VIEW_WIDTH - CARD_VIEW_ICON_SIZE - 2 * CARD_VIEW_ICON_OUTLINE_WIDTH - 2 * CARD_VIEW_PADDING - CARD_VIEW_ICON_TEXT_GAP) * PANGO_SCALE);
357+ pango_layout_set_height(layout, -4);
358
359 pango_layout_set_markup(layout, final_text.str().c_str(), -1);
360
361@@ -255,7 +302,12 @@
362 cairo_set_operator(cr, CAIRO_OPERATOR_OVER);
363 cairo_set_source_rgba(cr, 1.0f, 1.0f, 1.0f, 1.0f);
364
365- cairo_move_to(cr, 0.0f, 0.0f);
366+ double offset = 0.0;
367+ PangoRectangle logRect = {0, 0, 0, 0};
368+ pango_layout_get_extents(layout, NULL, &logRect);
369+ if (pango_layout_get_line_count(layout) < 4)
370+ offset = ((CARD_VIEW_HEIGHT - 2 * CARD_VIEW_PADDING) - (logRect.height / PANGO_SCALE)) / 2.0;
371+ cairo_move_to(cr, 0.0f, offset);
372 pango_cairo_show_layout(cr, layout);
373
374 // clean up
375
376=== modified file 'plugins/unityshell/src/ResultRendererHorizontalTile.h'
377--- plugins/unityshell/src/ResultRendererHorizontalTile.h 2011-09-13 17:05:30 +0000
378+++ plugins/unityshell/src/ResultRendererHorizontalTile.h 2012-04-05 10:13:19 +0000
379@@ -59,6 +59,8 @@
380 private:
381 nux::BaseTexture* DrawHighlight(std::string const& texid,
382 int width, int height);
383+ nux::BaseTexture* DrawNormal(std::string const& texid,
384+ int width, int height);
385 };
386
387 }
388
389=== modified file 'plugins/unityshell/src/ResultRendererTile.cpp'
390--- plugins/unityshell/src/ResultRendererTile.cpp 2012-03-21 17:46:38 +0000
391+++ plugins/unityshell/src/ResultRendererTile.cpp 2012-04-05 10:13:19 +0000
392@@ -53,7 +53,6 @@
393 nux::logging::Logger logger("unity.dash.results");
394
395 const int FONT_SIZE = 10;
396-
397 }
398
399 namespace dash
400@@ -153,8 +152,6 @@
401 container->text->GetDeviceTexture(),
402 texxform,
403 nux::Color(1.0f, 1.0f, 1.0f, 1.0f));
404-
405-
406 }
407 }
408
409
410=== modified file 'plugins/unityshell/src/ResultRendererTile.h'
411--- plugins/unityshell/src/ResultRendererTile.h 2011-09-15 13:51:08 +0000
412+++ plugins/unityshell/src/ResultRendererTile.h 2012-04-05 10:13:19 +0000
413@@ -87,6 +87,7 @@
414 virtual void LoadText(Result& row);
415 void LoadIcon(Result& row);
416 nux::ObjectPtr<nux::BaseTexture> prelight_cache_;
417+ nux::ObjectPtr<nux::BaseTexture> normal_cache_;
418
419 private:
420 //icon loading callbacks