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 discussion as side panel

Browse Source
This commit is contained in:
Daniel Pan
2016-05-05 13:32:39 +08:00
parent 34e5709c16
commit 376422c935
5 changed files with 89 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
media/css/seahub.css
View File

@@ -800,6 +800,34 @@ textarea:-moz-placeholder {/* for FF */
.checkbox-label {
display:block;
}
/**** right side panel ****/
.right-side-panel {
background:#f8f8f8;
width:400px;
position:fixed;
right:-400px;
top:0;
bottom:0;
z-index:1;
overflow-x:hidden;
border-left:1px solid #c9c9c9;
box-shadow:0 0 4px #ccc;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.right-side-panel-hd {
padding:10px;
border-bottom: 1px solid #c9c9c9;
}
.right-side-panel-footer {
position:absolute;
bottom:0;
}
.right-side-panel-con {
overflow-y: auto;
background: #fff;
}
/**** messages ****/
.messages {
position:fixed;
@@ -1288,7 +1316,7 @@ button.sf-dropdown-toggle:focus {
}
/**** discussions/comments ****/
.msg {
padding:10px;
padding:5px 10px;
}
.msg-body {
margin-left:44px;
@@ -1313,8 +1341,9 @@ button.sf-dropdown-toggle:focus {
border-top: 1px solid #c9c9c9;
}
.msg-input {
width:362px;
width:336px;
padding:3px 5px;
height:60px;
}
.msg-form .submit {
color:#fff;
@@ -1330,6 +1359,7 @@ button.sf-dropdown-toggle:focus {
}
.load-more-discussion {
color:#eb8205;
margin-top:1rem;
cursor:pointer;
text-align:center;
}
@@ -3329,7 +3359,7 @@ img.thumbnail {
#group {
position:relative;
}
#group-members, #group-settings, #group-discussions {
#group-members, #group-settings {
position:absolute;
top:90px;
right:0;
@@ -3346,14 +3376,8 @@ img.thumbnail {
#add-group-members-form .submit {
margin:0 0 0 5px;
}
#group-discussions {
width:440px;
}
#group-discussions .outer-caret {
right:30px;
}
#group-discussions .sf-popover-con {
padding:0 0;
.group-discussions-con .msg:first-child {
margin-top:0.5rem;
}
/****** grid view *****/
/* view mode */

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

@@ -606,7 +606,7 @@
</script>
<script type="text/template" id="side-nav-tmpl">
<a href="#" class="sf2-icon-x2 fright hidden-md-up js-close-side-nav" title="{% trans "Close" %}" aria-label="{% trans "Close" %}"></a>
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
<h3 class="hd">{% trans "Files" %}</h3>
<ul class="side-tabnav-tabs">
{% if user.permissions.can_add_repo %}

12
seahub/templates/libraries.html
View File

@@ -137,19 +137,18 @@
</script>
<script type="text/template" id="group-discussions-tmpl">
<div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
<div class="sf-popover-hd ovhd">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fright"></a>
<div class="right-side-panel-hd group-discussions-hd ovhd">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fleft"></a>
<h3 class="sf-popover-title">{% trans "Discussions" %}</h3>
</div>
<div class="sf-popover-con">
<div class="right-side-panel-con group-discussions-con">
<div class="loading-icon loading-tip"></div>
<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="sf-popover-footer">
<div class="right-side-panel-footer group-discussions-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">
@@ -264,7 +263,8 @@ app.ui = {
currentDropdown: null,
currentPopover: null,
currentHighlightedItem: null,
freezeItemHightlight: false
freezeItemHightlight: false,
groupDiscussions: null
};
</script>
{% if debug %}

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

@@ -78,6 +78,9 @@ define([
this.currentView.hide();
this.currentView = newView;
}
if (app.ui.groupDiscussions) {
app.ui.groupDiscussions.hide();
}
},
showRepos: function() {

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

@@ -4,20 +4,17 @@ define([
'backbone',
'common',
'app/collections/group-discussions',
'app/views/group-discussion',
'app/views/widgets/popover'
], function($, _, Backbone, Common, GroupDiscussions, ItemView, PopoverView) {
'app/views/group-discussion'
], function($, _, Backbone, Common, GroupDiscussions, ItemView) {
'use strict';
var View = PopoverView.extend({
var View = Backbone.View.extend({
id: 'group-discussions',
className: 'sf-popover',
className: 'right-side-panel',
template: _.template($('#group-discussions-tmpl').html()),
initialize: function(options) {
PopoverView.prototype.initialize.call(this);
this.groupView = options.groupView;
this.collection = new GroupDiscussions();
@@ -25,9 +22,25 @@ define([
this.listenTo(this.collection, 'reset', this.reset);
this.render();
$("#main").append(this.$el);
app.ui.groupDiscussions = this;
var _this = this;
$(document).keydown(function(e) {
// ESCAPE key pressed
if (e.keyCode == 27) {
_this.hide();
}
});
$(window).resize(function() {
_this.setConMaxHeight();
});
},
events: {
'click .js-close': 'close',
'click .js-load-more': 'loadMore',
'submit form': 'formSubmit'
},
@@ -115,28 +128,41 @@ define([
}
});
$("#group").append(this.$el);
this.$(".msg-input").focus();
app.router.navigate('group/' + this.groupView.group.id + '/discussions/');
},
// set max-height for '.sf-popover-con'
setConMaxHeight: function() {
this.$('.sf-popover-con').css({
'max-height': $(window).height() - this.$el.offset().top
- this.$('.sf-popover-hd').outerHeight(true)
- this.$('.sf-popover-footer').outerHeight(true)
- 2 // 2: top, bottom border width of $el,
- 10 // 10: leave some margin at the bottom
this.$('.group-discussions-con').css({
'height': $(window).height() - this.$el.offset().top
- this.$('.group-discussions-hd').outerHeight(true)
- this.$('.group-discussions-footer').outerHeight(true)
});
},
hide: function() {
PopoverView.prototype.hide.call(this);
$(".right-side-panel").css({'right': '-400px'});
},
close: function() {
app.router.navigate('group/' + this.groupView.group.id + '/');
this.hide();
return false;
},
toggle: function() {
this.show();
return false;
},
show: function() {
this.showContent();
$(".right-side-panel").css({'right': '0px'});
this.setConMaxHeight();
},
replyTo: function(to_user) {
var str = "@" + to_user + " ";
var $input = this.$('[name="message"]').val(str);
@@ -164,7 +190,7 @@ define([
sumHeight += $(this).outerHeight(true);
});
// scroll
_this.$('.sf-popover-con').scrollTop(sumHeight - 50); // 50: keep at least 50px gap from the top
_this.$('.group-discussions-con').scrollTop(sumHeight - 50); // 50: keep at least 50px gap from the top
},
error: function(collection, response, opts) {
var err_msg;
@@ -227,9 +253,9 @@ define([
return false;
},
// scroll '.sf-popover-con' to the bottom
// scroll to the bottom
scrollConToBottom: function() {
var $el = this.$('.sf-popover-con');
var $el = this.$('.group-discussions-con');
$el.scrollTop($el[0].scrollHeight - $el[0].clientHeight);
}