haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-05 00:43:53 +00:00
Code Issues Releases Wiki Activity

Rewrite group disccussions/member/settings with popover view

Browse Source
This commit is contained in:
Daniel Pan
2016-04-01 15:22:28 +08:00
parent 45a7ba13e7
commit 900b06e349
8 changed files with 217 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
seahub/templates/js/templates.html
View File

@@ -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>

72
seahub/templates/libraries.html
View File

@@ -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
};

6
static/scripts/app/router.js
View File

@@ -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});
},

66
static/scripts/app/views/group-discussions.js
View File

@@ -4,47 +4,30 @@ define([
'backbone',
'common',
'app/collections/group-discussions',
'app/views/group-discussion'
], function($, _, Backbone, Common, GroupDiscussions, ItemView) {
'app/views/group-discussion',
'app/views/widgets/popover'
], function($, _, Backbone, Common, GroupDiscussions, ItemView, PopoverView) {
'use strict';
var View = Backbone.View.extend({
el: '#group-discussions',
var View = PopoverView.extend({
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.$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();
}
});
this.render();
},
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();
app.router.navigate('group/' + this.group_id + '/');
PopoverView.prototype.hide.call(this);
app.router.navigate('group/' + this.groupView.group.id + '/');
},
replyTo: function(to_user) {

69
static/scripts/app/views/group-members.js
View File

@@ -4,45 +4,28 @@ define([
'backbone',
'common',
'app/collections/group-members',
'app/views/group-member'
], function($, _, Backbone, Common, GroupMembers, ItemView) {
'app/views/group-member',
'app/views/widgets/popover'
], function($, _, Backbone, Common, GroupMembers, ItemView, PopoverView) {
'use strict';
var View = Backbone.View.extend({
el: '#group-members',
var View = PopoverView.extend({
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.$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();
}
});
this.render();
},
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();
}
});
},
// 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 + '/');
$("#group").append(this.$el);
}
});

85
static/scripts/app/views/group-settings.js
View File

@@ -3,87 +3,57 @@ define([
'underscore',
'backbone',
'common',
'app/views/group-manage-members'
], function($, _, Backbone, Common, ManageMembersView) {
'app/views/group-manage-members',
'app/views/widgets/popover'
], function($, _, Backbone, Common, ManageMembersView, PopoverView) {
'use strict';
var View = Backbone.View.extend({
el: '#group-settings',
var View = PopoverView.extend({
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;
// 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();
}
});
this.render();
},
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
})).show();
},
'wiki_enabled': this.groupView.group.wiki_enabled
}));
// 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 = options.group;
this.$el.show();
this.render();
this.setConMaxHeight();
},
hide: function() {
this.$el.hide();
$("#group").append(this.$el);
},
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',

44
static/scripts/app/views/group.js
View File

@@ -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.discussionsView = new GroupDiscussionsView({
groupView: this
});
this.settingsView = new GroupSettingsView({ groupView: this });
this.membersView = new GroupMembersView({ 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;
if ($('#' + panel_id + ':visible').length) { // the panel is shown
this.settingsView.hide();
} else {
this.showSettings();
}
return this.settingsView.toggle();
},
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;
if ($('#' + panel_id + ':visible').length) { // the panel is shown
this.membersView.hide();
} else {
this.showMembers();
}
return this.membersView.toggle();
},
showDiscussions: function() {
this.discussionsView.show({'group_id': this.group_id});
return this.discussionsView.show();
},
toggleDiscussionsPanel: function() {
var panel_id = this.discussionsView.el.id;
if ($('#' + panel_id + ':visible').length) { // the panel is shown
this.discussionsView.hide();
} else {
this.showDiscussions();
}
return this.discussionsView.toggle();
}
});

84
static/scripts/app/views/widgets/popover.js Normal file
View File

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