libubuntuone

Merge lp:~sil/libubuntuone/classy-error-pages into lp:libubuntuone

  1. classy-error-pages
  2. Merge into trunk
Proposed by Stuart Langridge
Status: Merged
Approved by: Joshua Blount
Approved revision: 58
Merged at revision: not available
Proposed branch: lp:~sil/libubuntuone/classy-error-pages
Merge into: lp:libubuntuone
Diff against target: 654 lines (+544/-13)
7 files modified
data/Makefile.am (+23/-4)
data/connecting.html (+34/-0)
data/in_development.html (+34/-0)
data/load_error.html (+41/-0)
data/reset.css (+49/-0)
data/screen.css (+336/-0)
libubuntuone/u1-music-store.c (+27/-9)
To merge this branch: bzr merge lp:~sil/libubuntuone/classy-error-pages
Reviewer Review Type Date Requested Status
Joshua Blount (community) Approve
Martin Albisetti (community) Approve
Review via email: mp+21840@code.launchpad.net

Commit message

Use nice-looking error and connection pages.
Use the nice connection page for the initial connection while we're waiting for the actual music store.
Fix issues with https://code.edge.launchpad.net/~jblount/libubuntuone/classy-error-pages/+merge/21513.

Description of the change

Use nice-looking error and connection pages.
Use the nice connection page for the initial connection while we're waiting for the actual music store.
Fix issues with https://code.edge.launchpad.net/~jblount/libubuntuone/classy-error-pages/+merge/21513.

To post a comment you must log in.
Revision history for this message
Martin Albisetti (beuno) wrote :

152 + reload_url = location.search.substr(1);

Why are you clipping off a character from the reload URL?

Other than that, everything looks good!

review: Approve
Revision history for this message
Joshua Blount (jblount) wrote :

*slow golf clap*

review: Approve
Revision history for this message
Stuart Langridge (sil) wrote :

beuno: location.search includes the initial ? character.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'data/Makefile.am'
2--- data/Makefile.am 2010-02-17 12:57:19 +0000
3+++ data/Makefile.am 2010-03-22 10:16:17 +0000
4@@ -1,7 +1,26 @@
5 jsdir = $(U1_JAVASCRIPT_DIR)
6-js_DATA = \
7+nobase_js_DATA = \
8 u1-library-override.js \
9 u1-preview.js \
10- u1-songs-clickable.js
11-
12-EXTRA_DIST = $(js_DATA)
13+ u1-songs-clickable.js \
14+ load_error.html \
15+ connecting.html \
16+ in_development.html \
17+ screen.css \
18+ reset.css \
19+ img/button-left.png \
20+ img/button-right.png \
21+ img/content_top.png \
22+ img/downloads_background.png \
23+ img/footer_clouds.png \
24+ img/green_check.png \
25+ img/header_background.png \
26+ img/logo.png \
27+ img/menu.png \
28+ img/orange_x.png \
29+ img/search.png \
30+ img/superfluous-bubbles.png
31+
32+EXTRA_DIST = $(nobase_js_DATA)
33+
34+
35
36=== added file 'data/connecting.html'
37--- data/connecting.html 1970-01-01 00:00:00 +0000
38+++ data/connecting.html 2010-03-22 10:16:17 +0000
39@@ -0,0 +1,34 @@
40+<!doctype html>
41+<html>
42+<head>
43+<title>Connecting</title>
44+<link rel="stylesheet" href="reset.css" type="text/css" media="all">
45+<link rel="stylesheet" href="screen.css" type="text/css" media="all">
46+
47+</head>
48+<body class="downloads">
49+<div id="header">
50+
51+<div class="wrap">
52+<h1 id="logo">Ubuntu One Music Store</h1>
53+
54+</div><!-- close .wrap -->
55+</div><!-- close #header -->
56+
57+<div class="superfluous">
58+<div id="content">
59+<div class="access">
60+ <h1>Connecting</h1>
61+<h2>Connecting you to the Ubuntu One Music Store...</h2>
62+</div>
63+</div>
64+
65+</div>
66+</div>
67+<div id="footer">
68+<div class="wrap">
69+</div>
70+</div>
71+</body>
72+</html>
73+
74
75=== added directory 'data/img'
76=== added file 'data/img/button-left.png'
77Binary files data/img/button-left.png 1970-01-01 00:00:00 +0000 and data/img/button-left.png 2010-03-22 10:16:17 +0000 differ
78=== added file 'data/img/button-right.png'
79Binary files data/img/button-right.png 1970-01-01 00:00:00 +0000 and data/img/button-right.png 2010-03-22 10:16:17 +0000 differ
80=== added file 'data/img/content_top.png'
81Binary files data/img/content_top.png 1970-01-01 00:00:00 +0000 and data/img/content_top.png 2010-03-22 10:16:17 +0000 differ
82=== added file 'data/img/downloads_background.png'
83Binary files data/img/downloads_background.png 1970-01-01 00:00:00 +0000 and data/img/downloads_background.png 2010-03-22 10:16:17 +0000 differ
84=== added file 'data/img/footer_clouds.png'
85Binary files data/img/footer_clouds.png 1970-01-01 00:00:00 +0000 and data/img/footer_clouds.png 2010-03-22 10:16:17 +0000 differ
86=== added file 'data/img/green_check.png'
87Binary files data/img/green_check.png 1970-01-01 00:00:00 +0000 and data/img/green_check.png 2010-03-22 10:16:17 +0000 differ
88=== added file 'data/img/header_background.png'
89Binary files data/img/header_background.png 1970-01-01 00:00:00 +0000 and data/img/header_background.png 2010-03-22 10:16:17 +0000 differ
90=== added file 'data/img/logo.png'
91Binary files data/img/logo.png 1970-01-01 00:00:00 +0000 and data/img/logo.png 2010-03-22 10:16:17 +0000 differ
92=== added file 'data/img/menu.png'
93Binary files data/img/menu.png 1970-01-01 00:00:00 +0000 and data/img/menu.png 2010-03-22 10:16:17 +0000 differ
94=== added file 'data/img/orange_x.png'
95Binary files data/img/orange_x.png 1970-01-01 00:00:00 +0000 and data/img/orange_x.png 2010-03-22 10:16:17 +0000 differ
96=== added file 'data/img/search.png'
97Binary files data/img/search.png 1970-01-01 00:00:00 +0000 and data/img/search.png 2010-03-22 10:16:17 +0000 differ
98=== added file 'data/img/superfluous-bubbles.png'
99Binary files data/img/superfluous-bubbles.png 1970-01-01 00:00:00 +0000 and data/img/superfluous-bubbles.png 2010-03-22 10:16:17 +0000 differ
100=== added file 'data/in_development.html'
101--- data/in_development.html 1970-01-01 00:00:00 +0000
102+++ data/in_development.html 2010-03-22 10:16:17 +0000
103@@ -0,0 +1,34 @@
104+<!doctype html>
105+<html>
106+<head>
107+<title>In development</title>
108+<link rel="stylesheet" href="reset.css" type="text/css" media="all">
109+<link rel="stylesheet" href="screen.css" type="text/css" media="all">
110+
111+</head>
112+<body class="downloads">
113+<div id="header">
114+
115+<div class="wrap">
116+<h1 id="logo">Ubuntu One Music Store</h1>
117+
118+</div><!-- close .wrap -->
119+</div><!-- close #header -->
120+
121+<div class="superfluous">
122+<div id="content">
123+<div class="access">
124+ <h1>In development</h1>
125+<h2>The music store is under development, please be patient</h2>
126+</div>
127+</div>
128+
129+</div>
130+</div>
131+<div id="footer">
132+<div class="wrap">
133+</div>
134+</div>
135+</body>
136+</html>
137+
138
139=== added file 'data/load_error.html'
140--- data/load_error.html 1970-01-01 00:00:00 +0000
141+++ data/load_error.html 2010-03-22 10:16:17 +0000
142@@ -0,0 +1,41 @@
143+<!doctype html>
144+<html>
145+<head>
146+<title>Loading error</title>
147+<link rel="stylesheet" href="reset.css" type="text/css" media="all">
148+<link rel="stylesheet" href="screen.css" type="text/css" media="all">
149+
150+<script>
151+function reload() {
152+ reload_url = location.search.substr(1);
153+ location.href = reload_url;
154+ return false;
155+}
156+</script>
157+</head>
158+<body class="downloads">
159+<div id="header">
160+
161+<div class="wrap">
162+<h1 id="logo">Ubuntu One Music Store</h1>
163+
164+</div><!-- close .wrap -->
165+</div><!-- close #header -->
166+
167+<div class="superfluous">
168+<div id="content">
169+<div class="access">
170+ <h1>Internet connection is required to access the music store</h1>
171+<h2>Please connect and reload.</h2>
172+<p><button onclick="reload()"><span>Reload</span></button></p>
173+</div>
174+</div>
175+
176+</div>
177+</div>
178+<div id="footer">
179+<div class="wrap">
180+</div>
181+</div>
182+</body>
183+</html>
184
185=== added file 'data/reset.css'
186--- data/reset.css 1970-01-01 00:00:00 +0000
187+++ data/reset.css 2010-03-22 10:16:17 +0000
188@@ -0,0 +1,49 @@
189+pan, applet, object, iframe,
190+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
191+a, abbr, acronym, address, big, cite, code,
192+del, dfn, em, font, img, ins, kbd, q, s, samp,
193+small, strike, strong, sub, sup, tt, var,
194+dl, dt, dd, ol, ul, li,
195+fieldset, form, label, legend,
196+table, caption, tbody, tfoot, thead, tr, th, td {
197+ margin: 0;
198+ padding: 0;
199+ border: 0;
200+ outline: 0;
201+ font-weight: inherit;
202+ font-style: inherit;
203+ font-size: 100%;
204+ font-family: inherit;
205+ vertical-align: baseline;
206+}
207+/* remember to define focus styles! */
208+:focus {
209+ outline: 0;
210+}
211+body {
212+ line-height: 1;
213+ color: black;
214+ background: white;
215+}
216+ol, ul {
217+ list-style: none;
218+}
219+/* tables still need 'cellspacing="0"' in the markup */
220+table {
221+ border-collapse: separate;
222+ border-spacing: 0;
223+}
224+caption, th, td {
225+ text-align: left;
226+ font-weight: normal;
227+}
228+blockquote:before, blockquote:after,
229+q:before, q:after {
230+ content: "";
231+}
232+blockquote, q {
233+ quotes: "" "";
234+}
235+
236+strong {font-weight: bold;}
237+em {font-style: italic;}
238
239=== added file 'data/screen.css'
240--- data/screen.css 1970-01-01 00:00:00 +0000
241+++ data/screen.css 2010-03-22 10:16:17 +0000
242@@ -0,0 +1,336 @@
243+/* copied from original html */
244+
245+#downloads {
246+ padding: 0;
247+ margin: 0;
248+}
249+#downloads li {
250+ overflow: hidden; /* enclose floats */
251+ zoom: 1; /* hasLayout in IE */
252+ border-bottom: 1px dotted black;
253+ list-style: none;
254+ padding: 0;
255+ margin: 0;
256+}
257+
258+li .metadata {
259+ float: left;
260+ width: 450px;
261+}
262+
263+.progress .progress-bar {
264+ float: right;
265+ width: 154px;
266+ height: 13px;
267+ background: url(img/progress-bar-background.png) no-repeat left;
268+}
269+
270+.progress .progress-bar .gradient {
271+ height: 13px;
272+ background: url(img/gradient.png) no-repeat left;
273+ -webkit-transition: width 2s linear;
274+ /* 2s should be the same as the Rhythmbox update interval */
275+}
276+.progress .progress-string {
277+ float: right;
278+ clear: right;
279+}
280+
281+.progress .progress-complete {
282+ background: url(img/musicstore-complete-tick.png) no-repeat right;
283+ padding-right: 28px;
284+ -webkit-transition: opacity 0.5s linear;
285+ height: 20px;
286+ padding-top: 10px;
287+ display: inline-block;
288+}
289+
290+/* originating with this file */
291+
292+body {
293+ font-family: "bitstream vera sans", "dejavu sans", verdana, sans-serif;
294+ margin: 0 auto;
295+ font-size: 11px;
296+ line-height: 14px;
297+}
298+
299+.wrap {
300+ margin: 0 auto;
301+ width: 730px;
302+}
303+
304+#header {
305+ background: url(img/header_background.png) repeat-x;
306+ height: 86px;
307+ min-width: 550px;
308+ margin-bottom: 0;
309+ margin-top: -50px;
310+ }
311+
312+#header ul {padding: 0; margin: 0;}
313+#header ul li {display: inline; margin: 0; padding: 0;}
314+
315+#header ul#home_nav {float: left;}
316+
317+ul#home_nav li a {
318+ display: block;
319+ float: left;
320+ text-indent: -9999px;
321+ width: 26px;
322+ height: 41px;
323+}
324+
325+ul#home_nav li.back a {
326+ background: url(img/menu.png) no-repeat;
327+ background-position: 0 0;
328+}
329+
330+ul#home_nav li.back a:hover {
331+ background: url(img/menu.png) no-repeat;
332+ background-position: 0 -41px;
333+
334+}
335+
336+ul#home_nav li.home a {
337+ width: 42px;
338+ background: url(img/menu.png) no-repeat;
339+ background-position: -26px 0;
340+}
341+
342+ul#home_nav li.home a:hover {
343+ width: 42px;
344+ background: url(img/menu.png) no-repeat;
345+ background-position: -26px -41px;
346+}
347+
348+#header ul#nav {
349+ float: right;
350+ background: url(img/menu.png) no-repeat;
351+ background-position: top right;
352+ padding-right: 38px;
353+}
354+
355+#nav li a {
356+ float: left;
357+ display: block;
358+ text-indent: -9999px;
359+ height: 41px;
360+}
361+
362+#nav li.new a {
363+ width: 57px;
364+ background: #000 url(img/menu.png) no-repeat;
365+ background-position: -320px 0;
366+}
367+
368+#nav li.new a:hover {
369+ background: #000 url(img/menu.png) no-repeat;
370+ background-position: -320px -41px;;
371+}
372+
373+#nav li.just_added a {
374+ width: 90px;
375+ background: url(img/menu.png) no-repeat;
376+ background-position: -377px 0;
377+}
378+
379+#nav li.just_added a:hover {
380+ background: url(img/menu.png) no-repeat;
381+ background-position: -377px -41px;
382+}
383+
384+#nav li.browse a {
385+ width: 69px;
386+ background: url(img/menu.png) no-repeat;
387+ background-position: -467px 0;
388+}
389+
390+#nav li.browse a:hover {
391+ background: url(img/menu.png) no-repeat;
392+ background-position: -467px -41px;
393+}
394+
395+#nav li.downloads a {
396+ width: 109px;
397+ background: url(img/menu.png) no-repeat;
398+ background-position: -536px 0;
399+}
400+
401+body.downloads #nav li.downloads a:hover, #nav li.downloads a:hover {
402+ background: url(img/menu.png) no-repeat;
403+ background-position: -536px -41px;
404+}
405+
406+body.downloads #nav li.downloads a {
407+ background: url(img/menu.png) no-repeat;
408+ background-position: -536px -82px;
409+}
410+
411+#nav li.basket a {
412+ width: 65px;
413+ background: url(img/menu.png) no-repeat;
414+ background-position: -645px 0;
415+}
416+
417+#nav li.basket a:hover {
418+ background: url(img/menu.png) no-repeat;
419+ background-position: -645px -41px;
420+}
421+
422+#nav li.help a {
423+ width: 52px;
424+ background: url(img/menu.png) no-repeat;
425+ background-position: -710px 0;
426+ }
427+
428+#nav li.help a:hover {
429+ background: url(img/menu.png) no-repeat;
430+ background-position: -710px -41px;
431+ }
432+
433+.navish {overflow: auto;}
434+
435+h1#logo {
436+ margin-top: 60px;
437+ display: block;
438+ text-indent: -9999px;
439+ background: url(img/logo.png) no-repeat;
440+ width: 190px;
441+ height: 15px;
442+ float: left;
443+}
444+
445+#header form {
446+ float: right;
447+ margin-top: 10px;
448+}
449+
450+#content {
451+ margin: 0 auto;
452+ width: 760px;
453+ background: url(img/content_top.png) no-repeat;
454+ min-height: 300px;
455+ text-align: left;
456+ padding-top: 25px;
457+}
458+
459+.access {
460+ margin: 0 auto;
461+ width: 500px;
462+ margin-top: 130px;
463+ }
464+
465+#content .access h1 {
466+ font-weight: bold;
467+ margin: 0;
468+ font-size: 15px;
469+ margin-bottom: 10px;
470+ }
471+
472+#content .access h2 {
473+ font-weight: normal;
474+ font-size: 13px;
475+ margin: 0;
476+ margin-bottom: 20px;
477+ }
478+
479+#content h2 {
480+ font-size: 20px;
481+ font-weight: normal;
482+ margin: 0;
483+ padding: 0;
484+ text-align: left;
485+ margin-bottom: 25px;
486+ margin-left: 15px;
487+}
488+
489+.progress {
490+ text-align: right;
491+ float: right;
492+ width: 280px;
493+}
494+
495+ul.downloading {
496+ color: #8f8f8f;
497+ border-top: 1px dotted #999999;
498+ border-bottom: 1px dotted #999999;
499+ margin-left: 15px;
500+}
501+
502+ul.downloading li {
503+ border-bottom: 1px dotted #d6d6d6;
504+ padding-top: 20px;
505+ padding-bottom: 20px;
506+ overflow: auto;
507+}
508+
509+ul.downloading li.last {
510+ border-bottom: none;
511+}
512+
513+
514+.superfluous {
515+ background: url(img/downloads_background.png) repeat-x 50% 100%;
516+ padding-bottom: 100px;
517+}
518+
519+
520+#footer {
521+ background: url(img/superfluous-bubbles.png) no-repeat 380px 0%;
522+ margin: 0 auto;
523+ margin-top: -75px;
524+ width: 750px;
525+ padding-top: 100px;
526+}
527+
528+button#music-search {
529+ background: url(img/search.png) no-repeat;
530+ text-indent: -9999px;
531+ width: 77px;
532+ height: 22px;
533+ border: 0;
534+}
535+
536+
537+.progress p, .progress .progress-string {padding-right: 3px;}
538+
539+p.copyright {color: #8f8f8f; margin-bottom: 8px;}
540+
541+#pagination {
542+ overflow: hidden; /* enclose floats */
543+ zoom: 1;
544+}
545+#pagination #count {
546+ float: left;
547+}
548+#pagination #pages {
549+ float: right;
550+}
551+#pagination #pages a {
552+ text-decoration: none;
553+ margin: 4px;
554+ color: #8f8f8f;
555+}
556+#pagination #pages a.current {
557+ color: #f58027;
558+}
559+
560+button {
561+ background: url(img/button-left.png) no-repeat left;
562+ border: 0;
563+ padding: 0;
564+ padding-left: 7px;
565+ display: inline-block;
566+ text-align: center;
567+ }
568+
569+
570+button span {
571+ background: url(img/button-right.png) no-repeat right;
572+ display: block;
573+ white-space: nowrap;
574+ color: white;
575+ font-size: 12px;
576+ padding: 4px 24px 3px 15px;
577+ margin-left: 1px;
578+ }
579
580=== added file 'data/staticstyle.css'
581=== modified file 'libubuntuone/u1-music-store.c'
582--- libubuntuone/u1-music-store.c 2010-03-12 16:12:36 +0000
583+++ libubuntuone/u1-music-store.c 2010-03-22 10:16:17 +0000
584@@ -37,10 +37,10 @@
585 #define U1_NOT_LOGGED_IN_STORE_URL "/music/store-no-token"
586 #define U1_NOT_REGISTERED_URL "https://one.ubuntu.com/music/notregistered?returnUrl="
587
588+#define U1_DEFAULT_ERROR_PAGE "load_error.html"
589+#define U1_IN_DEVELOPMENT_PAGE "in_development.html"
590+#define U1_CONNECTING_PAGE "connecting.html"
591 #define U1_INITIAL_PAGE "<html><body>Loading Ubuntu One music store</body></html>"
592-#define U1_DEFAULT_ERROR_PAGE "<html><body>Could not load Music Store</body></html>"
593-#define U1_IN_DEVELOPMENT_PAGE "<html><body>The music store is under development, please be patient</body></html>"
594-#define U1_CONNECTING_PAGE "<html><body>Connecting to Ubuntu One. Please wait...</body></html>"
595
596 struct _U1MusicStorePrivate {
597 DBusGConnection *bus;
598@@ -151,6 +151,26 @@
599 object_class->finalize = u1_music_store_finalize;
600 }
601
602+
603+static void
604+load_internal_html_page (WebKitWebView *web_view, const gchar *file_name, gchar *reload_url)
605+{
606+ gchar *calculated_file_path, *calculated_file_url, *calculated_file_url_noreload;
607+ calculated_file_path = g_build_path ("/", U1_JAVASCRIPT_DIR, file_name, NULL);
608+ if (reload_url == NULL) {
609+ calculated_file_url = g_filename_to_uri (calculated_file_path, NULL, NULL);
610+ } else {
611+ calculated_file_url_noreload = g_filename_to_uri (calculated_file_path, NULL, NULL);
612+ calculated_file_url = g_strdup_printf ("%s?%s",
613+ calculated_file_url_noreload,
614+ reload_url);
615+ g_free (calculated_file_url_noreload);
616+ }
617+ webkit_web_view_open (web_view, calculated_file_url);
618+ g_free (calculated_file_url);
619+ g_free (calculated_file_path);
620+}
621+
622 static void
623 parse_oauth_string (const gchar *string, gchar **oauth_token, gchar **oauth_token_secret)
624 {
625@@ -319,7 +339,7 @@
626 gboolean success;
627 GError *error = NULL;
628
629- webkit_web_view_load_string (web_view, U1_CONNECTING_PAGE, "text/html", "utf-8", "file:///");
630+ load_internal_html_page(web_view, U1_CONNECTING_PAGE, NULL);
631
632 proxy = dbus_g_proxy_new_for_name (music_store->priv->bus, "com.ubuntuone.Authentication",
633 "/", "com.ubuntuone.Authentication");
634@@ -648,8 +668,7 @@
635 load_error_cb (WebKitWebView *web_view, WebKitWebFrame *frame, const gchar *uri, GError *error, gpointer user_data)
636 {
637 U1MusicStore *music_store = U1_MUSIC_STORE (user_data);
638-
639- webkit_web_view_load_string (web_view, U1_DEFAULT_ERROR_PAGE, "text/html", "utf-8", "file:///");
640+ load_internal_html_page(web_view, U1_DEFAULT_ERROR_PAGE, uri);
641
642 return TRUE;
643 }
644@@ -794,9 +813,8 @@
645 g_object_set (G_OBJECT (webkit_web_view_get_settings (WEBKIT_WEB_VIEW (music_store->priv->initial_web_viewer))),
646 "enable-default-context-menu", g_getenv ("U1SHOWCONTEXTMENU") != NULL,
647 NULL);
648- webkit_web_view_load_string (WEBKIT_WEB_VIEW (music_store->priv->initial_web_viewer),
649- U1_INITIAL_PAGE,
650- "text/html", "utf-8", "file:///");
651+ load_internal_html_page (WEBKIT_WEB_VIEW (music_store->priv->initial_web_viewer),
652+ U1_CONNECTING_PAGE, NULL);
653 gtk_widget_show (music_store->priv->initial_web_viewer);
654 gtk_container_add (GTK_CONTAINER (music_store->priv->scroll), music_store->priv->initial_web_viewer);
655

Subscribers

People subscribed via source and target branches