Rewrite account info popup and clean css

media/css/seahub.css

@@ -1509,12 +1509,38 @@ button.dropdown-toggle:focus {
     cursor: pointer;
     color: #d6d6d6;
 }
-#user-info-popup .avatar {
+.account-popup .avatar {
     float:left;
 }
-#user-info-popup .txt {
+.account-popup .txt {
     margin-left:45px;
 }
+.account-popup {
+    text-align:left;
+    right:0;
+    top:48px;
+    font-size:13px;
+}
+.account-popup .outer-caret {
+    top:-10px;
+    left:200px;
+}
+.account-popup > .item:last-child {
+    border-bottom:none;
+}
+.account-popup .item {
+    display:block;
+    padding:8px 18px;
+    border-bottom:1px solid #ddd;
+}
+.account-popup a.item {
+    color:#333;
+    font-weight:normal;
+}
+.account-popup a.item:hover {
+    background:#fafafa;
+    text-decoration:none;
+}
 #account .manage {
     position:absolute;
     left:60px;
@@ -1543,72 +1569,7 @@ button.dropdown-toggle:focus {
     background:#eee;
     text-decoration:none;
 }
-#send-msg-popup,
-.top-info-popup {
-    background:#fff;
-    border:1px solid #ddd;
-    box-shadow:0 0 5px #ccc;
-    position:absolute;
-    right:0;
-    z-index:100;/* for pages with jquery tabs*/
-}
-#send-msg-popup {
-    width:430px;
-    padding:18px;
-    top:38px;
-    right:10px;
-}
-.top-info-popup {
-    width:200px;
-    text-align:left;
-    top:48px;
-    font-size:13px;
-    border-radius:4px;
-}
-#user-info-popup {
-    width:220px;
-}
-#notice-popup .outer-caret {
-    left:143px;
-}
-#user-info-popup .outer-caret {
-    top:-10px;
-    left:181px;
-}
-.top-info-popup .item {
-    display:block;
-    padding:8px 18px;
-    border-top:1px solid #ddd;
-}
-.top-info-popup a.item {
-    color:#333;
-    font-weight:normal;
-}
-.top-info-popup a.item:hover {
-    background:#fafafa;
-    text-decoration:none;
-}
-#msg-file-share {
-    margin-top:8px;
-    position:relative;
-}
-#msg-file-share-btn {
-    color:#999;
-    background:#fff;
-    border-radius:0;
-}
-#msg-file-share .icon-remove {
-    position:absolute;
-    right:20px;
-    top:0;
-    cursor:pointer;
-    font-size:1.2em;
-    color:#888;
-}
-#msg-file-tree {
-    padding:4px 0;
-    border:1px solid #ddd;
-}
+
 .select2-container .avatar,
 .select2-results .select2-result-label .avatar {
     vertical-align:middle;

seahub/templates/base.html

@@ -57,19 +57,21 @@
                     <a id="my-info" href="#" class="no-deco" aria-label="{% trans "View profile and more" %}">
                         {% avatar request.user 36 %} <span class="icon-caret-down vam"></span>
                     </a>
-                    <div id="user-info-popup" class="top-info-popup hide">
+                    <div id="user-info-popup" class="account-popup popover hide">
                         <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-                        <div class="item ovhd">
-                            {% avatar request.user 36 %}
-                            <div class="txt">
-                                {{ request.user.username|email2nickname }} <br />
-                                {{ request.user.username}}
+                        <div class="popover-con">
+                            <div class="item ovhd">
+                                {% avatar request.user 36 %}
+                                <div class="txt">
+                                    {{ request.user.username|email2nickname }} <br />
+                                    {{ request.user.username}}
+                                </div>
                             </div>
+                            <span class="loading-icon loading-tip"></span>
+                            <div id="space-traffic" class="hide" data-url="{% url 'space_and_traffic' %}"></div>
+                            <a class="item" href="{{ SITE_ROOT }}profile/">{% trans "Settings" %}</a>
+                            <a href="{{ SITE_ROOT }}accounts/logout/" class="item" id="logout">{% trans "Log out" %}</a>
                         </div>
-                        <span class="loading-icon loading-tip"></span>
-                        <div id="space-traffic" class="hide" data-url="{% url 'space_and_traffic' %}"></div>
-                        <a class="item" href="{{ SITE_ROOT }}profile/">{% trans "Settings" %}</a>
-                        <a href="{{ SITE_ROOT }}accounts/logout/" class="item" id="logout">{% trans "Log out" %}</a>
                     </div>
                     {% if request.user.is_staff %}
                     <div class="manage">

seahub/templates/base_for_backbone.html

@@ -68,20 +68,6 @@
                     <a id="my-info" href="#" class="no-deco" aria-label="{% trans "View profile and more" %}">
                         {% avatar request.user 36 %} <span class="icon-caret-down vam"></span>
                     </a>
-                    <div id="user-info-popup" class="top-info-popup hide">
-                        <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-                        <div class="item ovhd">
-                            {% avatar request.user 36 %}
-                            <div class="txt">
-                                {{ request.user.username|email2nickname }} <br />
-                                {{ request.user.username}}
-                            </div>
-                        </div>
-                        <span class="loading-icon loading-tip"></span>
-                        <div id="space-traffic" class="hide" data-url="{% url 'space_and_traffic' %}"></div>
-                        <a class="item" href="{{ SITE_ROOT }}profile/">{% trans "Settings" %}</a>
-                        <a href="{{ SITE_ROOT }}accounts/logout/" class="item" id="logout">{% trans "Log out" %}</a>
-                    </div>
                     {% if request.user.is_staff %}
                     <div class="manage">
                         {% block sys_admin %}<a href="{% url 'sys_useradmin' %}" title="{% trans "System Admin" %}" class="a"><img src="{{ MEDIA_URL }}img/admin_in.png" alt="" /></a>{% endblock %}

seahub/templates/js/templates.html

@@ -1,4 +1,4 @@
-{% load i18n %}
+{% load avatar_tags i18n %}
 <script type="text/template" id="create-repo-tmpl">
     <form id="repo-create-form" action="" method="post">{% csrf_token %}
         <h3>{% trans "New Library"%}</h3>
@@ -1431,3 +1431,21 @@
         <p class="error alc hide"></p>
     </div>
 </script>
+
+<script type="text/template" id="user-info-popup-tmpl">
+    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
+    <div class="popover-con">
+        <div class="item ovhd">
+            {% avatar request.user 36 %}
+            <div class="txt">
+                <%- app.pageOptions.name %><br />
+                <%- app.pageOptions.username %>
+            </div>
+        </div>
+        <div class="loading-icon loading-tip"></div>
+        <p class="error alc hide"></p>
+        <div id="space-traffic" class="hide" data-url="{% url 'space_and_traffic' %}"></div>
+        <a class="item" href="{{ SITE_ROOT }}profile/">{% trans "Settings" %}</a>
+        <a href="{{ SITE_ROOT }}accounts/logout/" class="item" id="logout">{% trans "Log out" %}</a>
+    </div>
+</script>

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;