diff --git a/media/css/seahub.css b/media/css/seahub.css index 09178e61ed..fde5f007be 100644 --- a/media/css/seahub.css +++ b/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; diff --git a/seahub/templates/base.html b/seahub/templates/base.html index bd39103a8d..4d0cf74960 100644 --- a/seahub/templates/base.html +++ b/seahub/templates/base.html @@ -57,19 +57,21 @@ {% avatar request.user 36 %} -
+
-
- {% avatar request.user 36 %} -
- {{ request.user.username|email2nickname }}
- {{ request.user.username}} +
+
+ {% avatar request.user 36 %} +
+ {{ request.user.username|email2nickname }}
+ {{ request.user.username}} +
+ +
+ {% trans "Settings" %} + {% trans "Log out" %}
- -
- {% trans "Settings" %} - {% trans "Log out" %}
{% if request.user.is_staff %}
diff --git a/seahub/templates/base_for_backbone.html b/seahub/templates/base_for_backbone.html index 5d341ad9d9..a2b8a27289 100644 --- a/seahub/templates/base_for_backbone.html +++ b/seahub/templates/base_for_backbone.html @@ -68,20 +68,6 @@ {% avatar request.user 36 %} -
-
-
- {% avatar request.user 36 %} -
- {{ request.user.username|email2nickname }}
- {{ request.user.username}} -
-
- -
- {% trans "Settings" %} - {% trans "Log out" %} -
{% if request.user.is_staff %}
{% block sys_admin %}{% endblock %} diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html index b300c0c43e..c43a58c814 100644 --- a/seahub/templates/js/templates.html +++ b/seahub/templates/js/templates.html @@ -1,4 +1,4 @@ -{% load i18n %} +{% load avatar_tags i18n %} + + diff --git a/static/scripts/app/router.js b/static/scripts/app/router.js index e25279621c..7c376ffde5 100644 --- a/static/scripts/app/router.js +++ b/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; diff --git a/static/scripts/app/views/account.js b/static/scripts/app/views/account.js new file mode 100644 index 0000000000..1df0922c28 --- /dev/null +++ b/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; +}); diff --git a/static/scripts/common.js b/static/scripts/common.js index 14bfe173a3..495396d99b 100644 --- a/static/scripts/common.js +++ b/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('

' + error + '

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