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;
+});