Rewrite group discussion as side panel

media/css/seahub.css

@@ -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 {
+.group-discussions-con .msg:first-child {
-    width:440px;
+    margin-top:0.5rem;
-}
-#group-discussions .outer-caret {
-    right:30px;
-}
-#group-discussions .sf-popover-con {
-    padding:0 0;
 }
 /****** grid view *****/
 /* view mode */

seahub/templates/js/templates.html

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

seahub/templates/libraries.html

@@ -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="right-side-panel-hd group-discussions-hd ovhd">
-    <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 fleft"></a>
-        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fright"></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 %}

static/scripts/app/router.js

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

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

@@ -4,20 +4,17 @@ define([
     'backbone',
     'common',
     'app/collections/group-discussions',
-    'app/views/group-discussion',
+    'app/views/group-discussion'
-    'app/views/widgets/popover'
+], function($, _, Backbone, Common, GroupDiscussions, ItemView) {
-], function($, _, Backbone, Common, GroupDiscussions, ItemView, PopoverView) {
     '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({
+            this.$('.group-discussions-con').css({
-                'max-height': $(window).height() - this.$el.offset().top
+                'height': $(window).height() - this.$el.offset().top
-                    - this.$('.sf-popover-hd').outerHeight(true)
+                    - this.$('.group-discussions-hd').outerHeight(true)
-                    - this.$('.sf-popover-footer').outerHeight(true)
+                    - this.$('.group-discussions-footer').outerHeight(true)
-                    - 2 // 2: top, bottom border width of $el,
-                    - 10 // 10: leave some margin at the bottom
             });
         },
 
         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);
         }