Rewrite group disccussions/member/settings with popover view

seahub/templates/js/templates.html

@@ -1000,7 +1000,7 @@
     </div>
 </script>
 
-<script type="text/template" id="group-settings-tmpl">
+<script type="text/template" id="group-settings-content-tmpl">
 <% if (is_owner) { %>
     <ul class="group-setting-list">
         <li class="group-setting-item" data-op="rename">{% trans "Rename" %}</li>

seahub/templates/libraries.html

@@ -112,30 +112,6 @@
         <p class="error error-tip hide"></p>
     </div>
 
-    <div id="group-members" class="popover hide">
-        <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-        <div class="popover-hd ovhd">
-            <span class="popover-close close sf2-icon-x1 op-icon fright" title="{% trans "Close" %}"></span>
-            <h3 class="popover-title">{% trans "Members" %}</h3>
-        </div>
-        <div class="popover-con">
-            <span class="loading-icon loading-tip"></span>
-            <ul id="group-member-list" class="hide"></ul>
-            <p class="error hide"></p>
-        </div>
-    </div>
-
-    <div id="group-settings" class="popover hide">
-        <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-        <div class="popover-hd ovhd">
-            <span class="popover-close close sf2-icon-x1 op-icon fright" title="{% trans "Close" %}"></span>
-            <h3 class="popover-title">{% trans "Settings" %}</h3>
-        </div>
-        <div class="popover-con">
-            <div id="group-setting-con" class="hide"></div>
-        </div>
-    </div>
-
     <div id="group-discussions" class="popover hide">
         <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
         <div class="popover-hd ovhd">
@@ -161,6 +137,53 @@
     </div>
 </script>
 
+<script type="text/template" id="group-settings-tmpl">
+    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
+    <div class="popover-hd ovhd">
+        <span class="popover-close close sf2-icon-x1 op-icon fright" title="{% trans "Close" %}"></span>
+        <h3 class="popover-title">{% trans "Settings" %}</h3>
+    </div>
+    <div class="popover-con">
+    </div>
+</script>
+
+<script type="text/template" id="group-members-tmpl">
+    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
+    <div class="popover-hd ovhd">
+        <span class="popover-close close sf2-icon-x1 op-icon fright" title="{% trans "Close" %}"></span>
+        <h3 class="popover-title">{% trans "Members" %}</h3>
+    </div>
+    <div class="popover-con">
+        <span class="loading-icon loading-tip"></span>
+        <ul id="group-member-list" class="hide"></ul>
+        <p class="error hide"></p>
+    </div>
+</script>
+
+<script type="text/template" id="group-discussions-tmpl">
+    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
+    <div class="popover-hd ovhd">
+        <span class="popover-close close sf2-icon-x1 op-icon fright" title="{% trans "Close" %}"></span>
+        <h3 class="popover-title">{% trans "Discussions" %}</h3>
+    </div>
+    <div class="popover-con">
+        <span class="loading-icon loading-tip"></span>
+        <p class="load-more-discussion hide js-load-more">{% trans "More..." %}</p>
+        <ul id="group-discussion-list" class="hide"></ul>
+        <p class="no-discussion-tip hide">{% trans "No discussion in this group yet." %}</p>
+        <p class="error hide"></p>
+    </div>
+    <div class="popover-footer">
+        <form action="" method="post" class="msg-form">
+            <img src="{% avatar_url request.user 64 %}" alt="" width="32" class="avatar-circle fleft" />
+            <div class="msg-body">
+                <textarea name="message" placeholder="{% trans "Add a discussion..." %}" class="msg-input"></textarea>
+                <button type="submit" class="submit">{% trans "Submit" %}</button>
+            </div>
+        </form>
+    </div>
+</script>
+
 <script type="text/template" id="starred-file-tmpl">
     <h3 class="hd">{% trans "Starred" %}</h3>
     <table class="hide">
@@ -263,6 +286,7 @@ app["pageOptions"] = {
 };
 app.ui = {
     currentDropdown: null,
+    currentPopover: null,
     currentHighlightedItem: null,
     freezeItemHightlight: false
 };

static/scripts/app/router.js

@@ -28,7 +28,6 @@ define([
             'groups/': 'showGroups',
             'group/:group_id/': 'showGroup',
             'group/:group_id/lib/:repo_id(/*path)': 'showGroupRepoDir',
-            'group/:group_id/members/': 'showGroupMembers',
             'group/:group_id/discussions/': 'showGroupDiscussions',
             'org/': 'showOrgRepos',
             'org/lib/:repo_id(/*path)': 'showOrgRepoDir',
@@ -170,11 +169,6 @@ define([
             }
         },
 
-        showGroupMembers: function(group_id) {
-            this.showGroup(group_id);
-            this.groupView.showMembers();
-        },
-
         showGroupDiscussions: function(group_id) {
             this.showGroup(group_id, {showDiscussions: true});
         },

static/scripts/app/views/group-discussions.js

@@ -4,47 +4,30 @@ define([
     'backbone',
     'common',
     'app/collections/group-discussions',
-    'app/views/group-discussion'
+    'app/views/group-discussion',
-], function($, _, Backbone, Common, GroupDiscussions, ItemView) {
+    'app/views/widgets/popover'
+], function($, _, Backbone, Common, GroupDiscussions, ItemView, PopoverView) {
     'use strict';
 
-    var View = Backbone.View.extend({
+    var View = PopoverView.extend({
-        el: '#group-discussions',
+        id: 'group-discussions',
+        className: 'popover',
+
+        template:  _.template($('#group-discussions-tmpl').html()),
 
         initialize: function(options) {
+            PopoverView.prototype.initialize.call(this);
+
             this.groupView = options.groupView;
 
             this.collection = new GroupDiscussions();
             this.listenTo(this.collection, 'add', this.addOne);
             this.listenTo(this.collection, 'reset', this.reset);
 
-            this.$loadingTip = this.$('.loading-tip');
+            this.render();
-            this.$listContainer = this.$('#group-discussion-list');
-            this.$emptyTip = this.$('.no-discussion-tip');
-            this.$error = this.$('.error');
-            this.$loadMore = this.$('.js-load-more');
-
-            var _this = this;
-            $(window).resize(function() {
-                _this.setConMaxHeight();
-            });
-
-            $(document).click(function(e) {
-                var target = e.target || event.srcElement;
-                var $popup = _this.$el,
-                    $popup_switch = $('#group-discussions-icon');
-
-                if ($('#group-discussions:visible').length &&
-                    !$popup.is(target) &&
-                    !$popup.find('*').is(target) &&
-                    !$popup_switch.is(target)) {
-                    _this.hide();
-                }
-            });
         },
 
         events: {
-            'click .close': 'hide',
             'click .js-load-more': 'loadMore',
             'submit form': 'formSubmit'
         },
@@ -85,6 +68,16 @@ define([
         },
 
         render: function() {
+            this.$el.html(this.template());
+
+            this.$loadingTip = this.$('.loading-tip');
+            this.$listContainer = this.$('#group-discussion-list');
+            this.$emptyTip = this.$('.no-discussion-tip');
+            this.$error = this.$('.error');
+            this.$loadMore = this.$('.js-load-more');
+        },
+
+        showContent: function() {
             this.$listContainer.hide();
             this.$loadingTip.show();
 
@@ -99,7 +92,7 @@ define([
                 this.is_group_admin = true;
             }
 
-            this.collection.setGroupId(this.group_id);
+            this.collection.setGroupId(this.groupView.group.id);
             this.collection.fetch({
                 cache: false,
                 reset: true,
@@ -121,6 +114,9 @@ define([
                     _this.$error.html(err_msg).show();
                 }
             });
+
+            $("#group").append(this.$el);
+            app.router.navigate('group/' + this.groupView.group.id + '/discussions/');
         },
 
         // set max-height for '.popover-con'
@@ -134,17 +130,9 @@ define([
             });
         },
 
-        show: function(options) {
-            this.group_id = options.group_id;
-            this.$el.show();
-            this.setConMaxHeight();
-            this.render();
-            app.router.navigate('group/' + this.group_id + '/discussions/');
-        },
-
         hide: function() {
-            this.$el.hide();
+            PopoverView.prototype.hide.call(this);
-            app.router.navigate('group/' + this.group_id + '/');
+            app.router.navigate('group/' + this.groupView.group.id + '/');
         },
 
         replyTo: function(to_user) {

static/scripts/app/views/group-members.js

@@ -4,45 +4,28 @@ define([
     'backbone',
     'common',
     'app/collections/group-members',
-    'app/views/group-member'
+    'app/views/group-member',
-], function($, _, Backbone, Common, GroupMembers, ItemView) {
+    'app/views/widgets/popover'
+], function($, _, Backbone, Common, GroupMembers, ItemView, PopoverView) {
     'use strict';
 
-    var View = Backbone.View.extend({
+    var View = PopoverView.extend({
-        el: '#group-members',
+        id: 'group-members',
+        className: 'popover',
+
+        template:  _.template($('#group-members-tmpl').html()),
 
         initialize: function(options) {
+            PopoverView.prototype.initialize.call(this);
+            this.groupView = options.groupView;
             this.collection = new GroupMembers();
             this.listenTo(this.collection, 'add', this.addOne);
             this.listenTo(this.collection, 'reset', this.reset);
-
+            this.render();
-            this.$loadingTip = this.$('.loading-tip');
-            this.$listContainer = $('#group-member-list');
-            this.$error = this.$('.error');
-
-            var _this = this;
-            $(window).resize(function() {
-                if (!$('#group-members:visible').length) {
-                    return;
-                }
-                _this.setConMaxHeight();
-            });
-            $(document).click(function(e) {
-                var target = e.target || event.srcElement;
-                var $popup = _this.$el,
-                    $popup_switch = $('#group-members-icon');
-
-                if ($('#group-members:visible').length &&
-                    !$popup.is(target) &&
-                    !$popup.find('*').is(target) &&
-                    !$popup_switch.is(target)) {
-                    _this.hide();
-                }
-            });
         },
 
         events: {
-            'click .close': 'hide'
+
         },
 
         addOne: function(item, collection, options) {
@@ -61,11 +44,18 @@ define([
         },
 
         render: function() {
+            this.$el.html(this.template());
+            this.$loadingTip = this.$('.loading-tip');
+            this.$listContainer = this.$('#group-member-list');
+            this.$error = this.$('.error');
+        },
+
+        showContent: function() {
             this.$listContainer.hide();
             this.$loadingTip.show();
 
             var _this = this;
-            this.collection.setGroupId(this.group_id);
+            this.collection.setGroupId(this.groupView.group.id);
             this.collection.fetch({
                 cache: false,
                 reset: true,
@@ -87,24 +77,7 @@ define([
                     _this.$error.html(err_msg).show();
                 }
             });
-        },
+            $("#group").append(this.$el);
-
-        // set max-height for '.popover-con'
-        setConMaxHeight: function() {
-            this.$('.popover-con').css({'max-height': $(window).height() - this.$el.offset().top - this.$('.popover-hd').outerHeight(true) - 2}); // 2: top, bottom border width of $el
-        },
-
-        show: function(options) {
-            this.group_id = options.group_id;
-            this.$el.show();
-            this.setConMaxHeight();
-            this.render();
-            app.router.navigate('group/' + this.group_id + '/members/');
-        },
-
-        hide: function() {
-            this.$el.hide();
-            app.router.navigate('group/' + this.group_id + '/');
         }
 
     });

static/scripts/app/views/group-settings.js

@@ -3,87 +3,57 @@ define([
     'underscore',
     'backbone',
     'common',
-    'app/views/group-manage-members'
+    'app/views/group-manage-members',
-], function($, _, Backbone, Common, ManageMembersView) {
+    'app/views/widgets/popover'
+], function($, _, Backbone, Common, ManageMembersView, PopoverView) {
     'use strict';
 
-    var View = Backbone.View.extend({
+    var View = PopoverView.extend({
-        el: '#group-settings',
+        id: 'group-settings',
+        className: 'popover',
 
         template:  _.template($('#group-settings-tmpl').html()),
+        contentTemplate: _.template($('#group-settings-content-tmpl').html()),
         renameTemplate: _.template($('#group-rename-form-tmpl').html()),
         transferTemplate: _.template($('#group-transfer-form-tmpl').html()),
         importMembersTemplate: _.template($('#group-import-members-form-tmpl').html()),
 
         initialize: function(options) {
+            PopoverView.prototype.initialize.call(this);
+
             this.groupView = options.groupView;
-
+            this.render();
-            // group basic info
-            this.group = {};
-
-            this.$listContainer = $('#group-setting-con');
-
-            var _this = this;
-            $(window).resize(function() {
-                if (!$('#group-settings:visible').length) {
-                    return;
-                }
-                _this.setConMaxHeight();
-            });
-            $(document).click(function(e) {
-                var target = e.target || event.srcElement;
-                var $popup = _this.$el,
-                    $popup_switch = $('#group-settings-icon');
-
-                if ($('#group-settings:visible').length &&
-                    !$popup.is(target) &&
-                    !$popup.find('*').is(target) &&
-                    !$popup_switch.is(target)) {
-                    _this.hide();
-                }
-            });
         },
 
         events: {
-            'click .close': 'hide',
             'mouseenter .group-setting-item': 'highlightItem',
             'mouseleave .group-setting-item': 'rmHighlightItem',
             'click .group-setting-item': 'manageGroup'
         },
 
         render: function() {
-            this.$listContainer.hide();
+            this.$el.html(this.template());
+        },
+
+        showContent: function() {
+            this.$listContainer = this.$('.popover-con');
 
             // the user's role in this group
             this.is_owner = false;
             this.is_admin = false;
 
-            if (app.pageOptions.username == this.group.owner) {
+            if (app.pageOptions.username == this.groupView.group.owner) {
                 this.is_owner = true;
-            } else if ($.inArray(app.pageOptions.username, this.group.admins) != -1) {
+            } else if ($.inArray(app.pageOptions.username, this.groupView.group.admins) != -1) {
                 this.is_admin = true;
             }
-            this.$listContainer.html(this.template({
+            this.$listContainer.html(this.contentTemplate({
                 'is_owner': this.is_owner,
                 'is_admin': this.is_admin,
-                'wiki_enabled': this.group.wiki_enabled
+                'wiki_enabled': this.groupView.group.wiki_enabled
-            })).show();
+            }));
-        },
 
-        // set max-height for '.popover-con'
+            $("#group").append(this.$el);
-        setConMaxHeight: function() {
-            this.$('.popover-con').css({'max-height': $(window).height() - this.$el.offset().top - this.$('.popover-hd').outerHeight(true) - 2}); // 2: top, bottom border width of $el
-        },
-
-        show: function(options) {
-            this.group = options.group;
-            this.$el.show();
-            this.render();
-            this.setConMaxHeight();
-        },
-
-        hide: function() {
-            this.$el.hide();
         },
 
         highlightItem: function(e) {
@@ -121,6 +91,7 @@ define([
                     this.leave();
                     break;
             }
+            this.hide();
         },
 
         rename: function() {
@@ -140,7 +111,7 @@ define([
                 $.ajax({
                     url: Common.getUrl({
                         'name': 'group',
-                        'group_id': _this.group.id
+                        'group_id': _this.groupView.group.id
                     }),
                     type: 'put',
                     dataType: 'json',
@@ -197,7 +168,7 @@ define([
                 $.ajax({
                     url: Common.getUrl({
                         'name': 'group',
-                        'group_id': _this.group.id
+                        'group_id': _this.groupView.group.id
                     }),
                     type: 'put',
                     dataType: 'json',
@@ -237,7 +208,7 @@ define([
             $.ajax({
                 url: Common.getUrl({
                     'name': 'group',
-                    'group_id': _this.group.id
+                    'group_id': _this.groupView.group.id
                 }),
                 type: 'put',
                 dataType: 'json',
@@ -285,7 +256,7 @@ define([
                 $.ajax({
                     url: Common.getUrl({
                         'name': 'group_import_members',
-                        'group_id': _this.group.id
+                        'group_id': _this.groupView.group.id
                     }),
                     type: 'post',
                     dataType: 'json',
@@ -337,7 +308,7 @@ define([
                 $.ajax({
                     url: Common.getUrl({
                         'name': 'group',
-                        'group_id': _this.group.id
+                        'group_id': _this.groupView.group.id
                     }),
                     type: 'delete',
                     dataType: 'json',
@@ -371,7 +342,7 @@ define([
                 $.ajax({
                     url: Common.getUrl({
                         'name': 'group_member',
-                        'group_id': _this.group.id,
+                        'group_id': _this.groupView.group.id,
                         'email': encodeURIComponent(app.pageOptions.username),
                     }),
                     type: 'delete',

static/scripts/app/views/group.js

@@ -37,13 +37,9 @@ define([
             this.listenTo(this.repos, 'add', this.addOne);
             this.listenTo(this.repos, 'reset', this.reset);
 
-            this.membersView = new GroupMembersView();
+            this.settingsView = new GroupSettingsView({ groupView: this });
-            this.settingsView = new GroupSettingsView({
+            this.membersView = new GroupMembersView({ groupView: this });
-                groupView: this
+            this.discussionsView = new GroupDiscussionsView({ groupView: this });
-            });
-            this.discussionsView = new GroupDiscussionsView({
-                groupView: this
-            });
             this.render();
         },
 
@@ -114,7 +110,6 @@ define([
             this.group_id = group_id;
             this.$emptyTip.hide();
             this.renderGroupTop(options);
-            this.$tabs.show();
             this.$table.hide();
             var $loadingTip = this.$loadingTip;
             $loadingTip.show();
@@ -210,49 +205,24 @@ define([
             repos.comparator = null;
         },
 
-        showSettings: function() {
-            this.settingsView.show({
-                'group': this.group
-            });
-        },
-
         toggleSettingsPanel: function() {
-            var panel_id = this.settingsView.el.id;
+            return this.settingsView.toggle();
-            if ($('#' + panel_id + ':visible').length) { // the panel is shown
-                this.settingsView.hide();
-            } else {
-                this.showSettings();
-            }
         },
 
         showGroupWiki: function() {
             location.href = '/group/' + this.group.id + '/wiki/';
         },
 
-        showMembers: function() {
-            this.membersView.show({'group_id': this.group_id});
-        },
-
         toggleMembersPanel: function() {
-            var panel_id = this.membersView.el.id;
+            return this.membersView.toggle();
-            if ($('#' + panel_id + ':visible').length) { // the panel is shown
-                this.membersView.hide();
-            } else {
-                this.showMembers();
-            }
         },
 
         showDiscussions: function() {
-            this.discussionsView.show({'group_id': this.group_id});
+            return this.discussionsView.show();
         },
 
         toggleDiscussionsPanel: function() {
-            var panel_id = this.discussionsView.el.id;
+            return this.discussionsView.toggle();
-            if ($('#' + panel_id + ':visible').length) { // the panel is shown
-                this.discussionsView.hide();
-            } else {
-                this.showDiscussions();
-            }
         }
 
     });

static/scripts/app/views/widgets/popover.js

@@ -0,0 +1,84 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+], function($, _, Backbone, Common) {
+    'use strict';
+
+    /*
+     * Popover View.
+    */
+
+    // There can be only one visible popover view
+    $(document).click(function(e) {
+        var view = app.ui.currentPopover;
+        var target = e.target || event.srcElement;
+
+        if (!view) {
+            return true;
+        }
+
+        if (!view.$el.is(target)
+            && !view.$el.find('*').is(target))
+        {
+            view.hide();
+        }
+        return true;
+    });
+
+    $(window).resize(function() {
+        var view = app.ui.currentPopover;
+        if (!view) {
+            return true;
+        }
+
+        view.setConMaxHeight();
+    });
+
+    var PopoverView = Backbone.View.extend({
+
+        defaultOptions: {
+            'left': '0px'
+        },
+
+        initialize: function(options) {
+            this.$el.on('click', '.close', _.bind(this.hide, this));
+            this.options = {};
+            _.extend(this.options, this.defaultOptions, options);
+        },
+
+        // set max-height for '.popover-con'
+        setConMaxHeight: function() {
+            this.$('.popover-con').css({'max-height': $(window).height() - this.$el.offset().top - this.$('.popover-hd').outerHeight(true) - 2}); // 2: top, bottom border width of $el
+        },
+
+        hide: function() {
+            app.ui.currentPopover = null;
+            this.$el.detach();
+        },
+
+        show: function() {
+            app.ui.currentPopover = this;
+            this.showContent();
+            this.setConMaxHeight();
+        },
+
+        toggle: function() {
+            if (app.ui.currentPopover) {
+                if (app.ui.currentPopover != this) {
+                    app.ui.currentPopover.hide();
+                    this.show();
+                } else {
+                    this.hide();
+                }
+            } else {
+                this.show();
+            }
+            return false;
+        }
+
+    });
+
+    return PopoverView;
+});