Commits

Anonymous committed a6149d5

Show a 'waiting' icon until a 'watch' is activated (#245).

The Watch procedure may take some seconds and sometimes it is
confusing and user may click again and again. We're now showing
a 'loading' icon as an intermediate icon until the final stage
in order to prevent the user from multiple clicks.

The new 'spinner' animated GIF can be used in the future for
operations which take some time to finish (CSS class: ".waiting").

  • Participants
  • Parent commits fb1fa7c

Comments (0)

Files changed (5)

docs/releases/0.7.txt

 - Added buildout support
 - Added zebra style to the stats tables
 - Added option to filter out completed files in a statistics table.
+- Upon clicking 'Watch', user is now presented with a 'waiting' icon while
+  he waits for his watch to be activated through AJAX.
 
 
 Translations

transifex/projects/views.py

 @login_required
 def project_toggle_watch(request, project_slug):
     """Add/Remove watches on a project for a specific user."""
-
+    time.sleep(5)
     if request.method != 'POST':
         return json_error(_('Must use POST to activate'))
 

transifex/site_media/css/icons.css

 .i16.tick_circle { background-image: url('../images/icons/accept.png'); }
 .i16.tip { background-image: url('../images/icons/lightbulb.png'); }
 .i16.user { background-image: url('../images/icons/user.png'); }
+.i16.waiting { background-image: url('../images/icons/progress.gif'); }
 .i16.watch { background-image: url('../images/icons/eye.png'); }
 .i16.watch_add { background-image: url('../images/icons/email_add.png'); }
 .i16.watch_error { background-image: url('../images/icons/email_error.png'); }

transifex/site_media/images/icons/progress.gif

Added
New image

transifex/site_media/js/watch_toggle.js

     else
         obj = $('#watch-pofile-' + String(j.id))
 
-
     if (j.error)
     {
+        obj.attr('title', j.error);
         obj.addClass(j.style);
-        obj.attr('title', j.error);
+        obj.removeClass('waiting');
     }
     else
     {
-        obj.addClass(j.style);
         obj.attr('title', j.title);
         obj.click(click_function(obj, j.url));
+        obj.addClass(j.style);
+        obj.removeClass('waiting');
     };
 }
 
     obj.onclick = null;
     o = $(obj);
     o.unbind('click');
+    o.addClass('waiting'); /* will be removed in the callback */
     for (cls in watch_classes)
     {
         if (o.hasClass(watch_classes[cls]))
             o.removeClass(watch_classes[cls]);
         }
     }
-    
     $.post(url=url, callback=watch_handler, type='json');
 }