Rewrite account info popup and clean css

static/scripts/app/router.js

@@ -13,11 +13,12 @@ define([
     'app/views/starred-file',
     'app/views/devices',
     'app/views/activities',
-    'app/views/notifications'
+    'app/views/notifications',
+    'app/views/account'
 ], function($, Backbone, Common, SideNavView, MyReposView,
     SharedReposView, GroupsView, GroupView,
     OrgView, DirView, StarredFileView, DevicesView, ActivitiesView,
-    NotificationsView) {
+    NotificationsView, AccountView) {
     "use strict";
 
     var Router = Backbone.Router.extend({
@@ -46,7 +47,7 @@ define([
 
             Common.prepareApiCsrf();
             Common.initLocale();
-            Common.initAccountPopup();
+            //Common.initAccountPopup();
             //Common.initNoticePopup();
 
             this.sideNavView = new SideNavView();
@@ -64,6 +65,7 @@ define([
             this.activitiesView = new ActivitiesView();
 
             app.ui.notificationsView = this.notificationsView = new NotificationsView();
+            app.ui.accountView = this.accountView = new AccountView();
 
             this.currentView = this.myReposView;
 

static/scripts/app/views/account.js

@@ -0,0 +1,71 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'app/views/widgets/popover'
+], function($, _, Backbone, Common, PopoverView) {
+    'use strict';
+
+    var View = PopoverView.extend({
+        id: 'user-info-popup',
+        className: 'popover account-popup',
+
+        template:  _.template($('#user-info-popup-tmpl').html()),
+
+        initialize: function(options) {
+            PopoverView.prototype.initialize.call(this);
+
+            this.render();
+            this.$loadingTip = this.$('.loading-tip');
+            this.$error = this.$('.error');
+            this.$space = this.$('#space-traffic');
+            this.$account = $('#account');
+
+            var _this = this;
+            $('#my-info').click(function() {
+                _this.toggle();
+                return false;
+            });
+        },
+
+        render: function() {
+            this.$el.html(this.template());
+            return this;
+        },
+
+        showContent: function() {
+            var _this = this;
+
+            this.$error.hide();
+            this.$loadingTip.show();
+            this.$space.addClass('hide');
+
+            $.ajax({
+                url: this.$space.data('url'),
+                dataType: 'json',
+                cache: false,
+                success: function(data) {
+                    _this.$loadingTip.hide();
+                    _this.$space.html(data['html']).removeClass('hide');
+                },
+                error: function (xhr, textStatus, errorThrown) {
+                    _this.$loadingTip.hide();
+                    var err_msg;
+                    if (xhr.responseText) {
+                        err_msg = $.parseJSON(xhr.responseText).error;
+                    } else {
+                        err_msg = gettext('Please check the network.');
+                    }
+                    _this.$error.html(err_msg).show();
+                }
+            });
+
+            this.$account.append(this.$el);
+            return false;
+        }
+
+    });
+
+    return View;
+});

static/scripts/common.js

@@ -487,55 +487,6 @@ define([
             }
         },
 
-        closePopup: function(e, popup, popup_switch) {
-            var target = e.target || event.srcElement;
-            if (!popup.hasClass('hide') && !popup.is(target) && !popup.find('*').is(target) && !popup_switch.is(target) && !popup_switch.find('*').is(target) ) {
-                popup.addClass('hide');
-            }
-        },
-
-        initAccountPopup: function() {
-            // TODO: need improving
-            $('#my-info').click(function() {
-                var popup = $('#user-info-popup');
-                popup.toggleClass('hide');
-                if (!popup.hasClass('hide')) {
-                    var loading_tip = $('.loading-tip', popup),
-                    space_traffic = $('#space-traffic');
-                    loading_tip.show();
-                    space_traffic.addClass('hide');
-                    $('.error', popup).addClass('hide');
-                    $.ajax({
-                        url: space_traffic.data('url'),
-                        dataType: 'json',
-                        cache: false,
-                        success: function(data) {
-                            loading_tip.hide();
-                            space_traffic.html(data['html']).removeClass('hide');
-                        },
-                        error: function (xhr, textStatus, errorThrown) {
-                            if (xhr.responseText) {
-                                var error = $.parseJSON(xhr.responseText).error;
-                                loading_tip.hide();
-                                if ($('.error', popup).length == 0) {
-                                    loading_tip.after('<p class="error alc">' + error + '</p>');
-                                } else {
-                                    $('.error', popup).removeClass('hide');
-                                }
-                            }
-                        }
-                    });
-                }
-
-                return false;
-            });
-
-            var _this = this;
-            $(document).click(function(e) {
-                _this.closePopup(e, $('#user-info-popup'), $('#my-info'));
-            });
-        },
-
         closeTopNoticeBar: function () {
             if (!app.pageOptions.cur_note) {
                 return false;