Update group discussion

media/css/seahub.css

@@ -11,6 +11,8 @@
  * Helper
  * common class .......... common class
  *
+ * Widget
+ *
  * (TODO: complete this TOC)
  *
  */
@@ -1222,6 +1224,52 @@ textarea:-moz-placeholder {/* for FF */
     text-decoration:none;
     color:#fff;
 }
+/**** discussions/comments ****/
+.msg {
+    padding:10px 0;
+}
+.msg-avatar {
+    float:left;
+    margin-left:10px;
+}
+.msg-body {
+    margin-left:54px;
+}
+.msg-header {
+}
+.msg-username {
+}
+.msg-content p:first-child {
+    margin-top:0px;
+}
+.msg-time {
+    font-size:11px;
+    color:#999;
+    margin-left:5px;
+}
+.msg-form {
+    background:#f2f2f2;
+    position:relative;
+    padding-top:10px;
+    border-top: 1px solid #c9c9c9;
+}
+.msg-input {
+    width:350px;
+    padding:3px 5px;
+}
+.msg-form .submit {
+    color:#fff;
+    background:#4abb49;
+    border:1px solid #5cb25b;
+    margin:0px 0 8px;
+}
+.msg-form .submit:hover {
+    background:#55ab22;
+}
+.no-discussion-tip {
+    text-align:center;
+    margin:10px 0;
+}
 /********** container ***********/
 #main, #footer {
     width:950px;
@@ -2271,250 +2319,8 @@ textarea:-moz-placeholder {/* for FF */
 .member .name {
     vertical-align:middle;
 }
-
 /* notification admin */
 .cur-note { color: red; font-size: 75%; }
-
-/* group message and replies */
-.msg-panel {
-    width:640px;
-    margin-top:10px;
-}
-.msg-form .avatar,
-.msg .avatar {
-    border-radius:1000px;
-}
-#personal-msg-panel {
-    margin-top:22px;
-}
-.msg-num {
-    font-size:12px;
-    color:#333;
-}
-.msg-form {
-    padding:10px;
-    background:#f2f2f2;
-    border-radius:3px;
-    margin:0 0 22px 64px;
-    position:relative;
-}
-#send-msg-form {
-    padding:0;
-    background:transparent;
-    margin:0;
-}
-.msg-form .avatar {
-    position:absolute;
-    left:-64px;
-    top:-1px;
-}
-#send-msg-form .avatar {
-    border-radius:3px;
-    position:static;
-}
-.msg-form .ops {
-    text-align:right;
-    margin-top:6px;
-}
-.msg-form .add-file {
-    margin:9px 10px 0 3px;
-}
-#selected-files .item {
-    text-align:left;
-    padding:2px 3px;
-}
-#selected-files .rm {
-    margin-right:3px;
-}
-#selected-files .rm,
-.msg-form .add-file {
-    cursor:pointer;
-    opacity:0.8;
-}
-#selected-files .rm:hover,
-.msg-form .add-file:hover {
-    opacity:1;
-}
-.msg-input {
-    width:544px;
-    padding:3px 5px;
-    height:25px;
-    vertical-align:top;
-}
-.personal-msg-panel .msg-input {
-    width:480px;
-}
-.say {
-    position:absolute;
-    width:10px;
-    height:21px;
-    background:transparent url('../img/say.png') no-repeat scroll left top;
-    left:-10px;
-    top:20px;
-}
-.msg {
-    word-wrap: break-word;
-    padding:1px 0; /* to fix 'top border missing' when only 1 discussion & no scrollbar in chrome */
-    margin:15px 0 20px;
-}
-.msg .txt {
-    margin-left:64px;
-}
-.personal-msg-panel .msg-form,
-.personal-msg-panel .msg .txt {
-    margin-right:64px;
-}
-.msg a {
-    font-weight: normal;
-}
-.msg-main {
-    position:relative;
-    padding:16px;
-    background:#fff;
-    border:1px solid #ccc;
-    border-top-left-radius:3px;
-    border-top-right-radius:3px;
-}
-.personal-msg-panel .msg-main {
-    border-radius:3px;
-}
-.msg-main .say {
-    background-image:url('../img/say_white.png');
-}
-.msg-received .say {
-    background-image:url('../img/say_white_reverse.png');
-    left:auto;
-    right:-10px;
-}
-.msg-attachment {
-    padding-top:10px;
-    border-top:1px solid #e9e9e9;
-    margin-top:12px;
-}
-.msg-attachment .img-cont {
-    display:block;
-    text-align:center;
-    line-height:0;
-    background:#fcfcfc;
-    padding:5px 0;
-}
-.msg-attachment .img {
-    width:auto;
-    height:auto;
-    max-width:100%;
-    max-height:300px;
-}
-.msg-hd .author {
-    font-weight:bold;
-}
-.msg .time {
-    font-size:11px;
-    color:#999;
-    margin-left:5px;
-}
-.msg .op {
-    font-size:11px;
-    color:#999;
-    cursor:pointer;
-    margin-left:5px;
-}
-.msg-hd .group,
-.discussion-to-grp .time {
-    color: #808080;
-}
-.msg-hd .group {
-    margin-left:30px;
-}
-.msg-con {
-    margin-bottom:0;
-}
-.msg-op {
-    color:#444;
-    padding:10px 16px;
-    background:#f8f8f8;
-    border:1px solid #d5d5d5;
-    border-top:0;
-    border-bottom-left-radius:3px;
-    border-bottom-right-radius:3px;
-}
-.replies-op {
-    font-weight:bold;
-    cursor:pointer;
-    margin-bottom:10px;
-    position:relative;
-}
-.unfold-replies,
-.fold-replies {
-    padding-right:14px;
-    background:transparent scroll no-repeat right center;
-}
-.unfold-replies {
-    background-image:url('../img/unfold.png');
-}
-.fold-replies {
-    background-image:url('../img/fold.png');
-}
-.unfold-replies-nobg {
-    background-image:none;
-}
-.replies-loading-icon {
-    position:absolute;
-    top:0;
-    width:12px;
-    height:12px;
-    display:none;
-}
-.msg .at {
-    color:#808;
-}
-.reply {
-    line-height:1.2;
-    margin-bottom:15px;
-}
-.reply .txt {
-    margin-left:38px;
-}
-.reply-con {
-    font-size:12px;
-    line-height:1.3;
-    margin:4px 0 0;
-}
-.reply-input {
-    width:530px;
-    padding:5px;
-    height:20px;
-    vertical-align:top;
-}
-.msg-form .submit,
-.msg-form .cancel,
-.reply-submit,
-.reply-cancel {
-    padding:5px 15px;
-    background:#fff;
-    margin-top:6px;
-}
-.msg-form .submit {
-    color:#fff;
-    background:#4abb49;
-    border:1px solid #5cb25b;
-}
-.msg-form .submit:hover {
-    background:#55ab22;
-}
-.msg-form .cancel {
-    margin-left:6px;
-}
-#msg-upward {
-    position:fixed;
-    font-weight:normal;
-}
-#msg-upward:hover {
-    text-decoration:none;
-}
-#msgs-more {
-    width:576px;
-    margin-left:64px;
-}
 /*file upload*/
 .files-add {
     position: relative;
@@ -3606,6 +3412,9 @@ img.thumbnail {
 #group-discussions .outer-caret {
     right:30px;
 }
+#group-discussions .popover-con {
+    padding:0 0;
+}
 /****** grid view *****/
 /* view mode */
 .switch-mode {

seahub/templates/js/templates.html

@@ -982,13 +982,13 @@
 </script>
 
 <script type="text/template" id="group-discussion-tmpl">
-    <img src="<%= avatar_url %>" alt="" width="32" class="avatar-circle fleft" />
+    <img src="<%= avatar_url %>" alt="" width="32" class="msg-avatar avatar-circle" />
-    <div class="txt">
+    <div class="msg-body">
-        <div>
+        <div class="msg-header">
-            <span class="txt-item ellipsis" title="<%- user_name %>"><%- user_name %></span>
+            <a class="msg-username ellipsis" href="<%= user_profile_url %>"><%- user_name %></a>
-            <span class="txt-item ellipsis" title="<%- created_at %>"><%- created_at %></span>
+            <span class="msg-time" title="<%- time %>"><%- time_from_now %></span>
         </div>
-        <div class="txt-item" title=""><%= content_marked %></div>
+        <div class="msg-content" title=""><%= content_marked %></div>
     </div>
 </script>
 

seahub/templates/libraries.html

@@ -160,11 +160,14 @@
         <div class="popover-con">
             <span class="loading-icon loading-tip"></span>
             <ul id="group-discussion-list" class="hide"></ul>
+            <div class="no-discussion-tip" style="display:none;">
+                <p>{% blocktrans %}No discussion in this group yet.{% endblocktrans %}</p>
+            </div>
             <div>
-                <form id="group-message-form" action="" method="post" class="">{% csrf_token %}
+                <form id="group-message-form" action="" method="post" class="msg-form">{% csrf_token %}
-                    <img src="{% avatar_url request.user 64 %}" alt="" width="32" class="avatar-circle fleft" />
+                    <img src="{% avatar_url request.user 64 %}" alt="" width="32" class="msg-avatar avatar-circle" />
-                    <div class="txt">
+                    <div class="msg-body">
-                        <textarea name="message" id="message" placeholder="{% trans "Add a discussion..." %}" class=""></textarea>
+                        <textarea name="message" id="add-discussion" placeholder="{% trans "Add a discussion..." %}" class="msg-input"></textarea>
                         <div class="ops">
                             <button type="submit" class="submit">{% trans "Submit" %}</button>
                         </div>

static/scripts/app/views/device.js

@@ -42,16 +42,9 @@ define([
                 data['synced_repos_length'] = 0;
             }
 
-            // convert to human readable time
+            var last_accessed = Moment(data['last_accessed']);
-            var now = new Date(),
-                last_accessed = Moment(data['last_accessed']);
-
             data['time'] = last_accessed.format('LLLL');
-            if (last_accessed - now > 0) {
+            data['time_from_now'] = Common.getRelativeTimeStr(last_accessed);
-                data['time_from_now'] = gettext("Just now");
-            } else {
-                data['time_from_now'] = last_accessed.fromNow();
-            }
 
             this.$el.html(this.template(data));
 

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

@@ -3,13 +3,14 @@ define([
     'underscore',
     'backbone',
     'common',
-    'marked'
+    'marked',
-], function($, _, Backbone, Common, Marked) {
+    'moment'
+], function($, _, Backbone, Common, Marked, Moment) {
     'use strict';
 
     var View = Backbone.View.extend({
         tagName: 'li',
-        className: 'user-item cspt ovhd',
+        className: 'msg cspt ovhd',
 
         template: _.template($('#group-discussion-tmpl').html()),
 
@@ -23,9 +24,17 @@ define([
 
         render: function() {
             var obj = this.model.attributes;
-            Common.getMomentWithLocale(obj['created_at']);
+            var m = Moment(obj['created_at']);
+
+            var user_profile_url = Common.getUrl({
+                'name': 'user_profile',
+                'username': encodeURIComponent(obj.user_email)
+            });
             _.extend(obj, {
-                'content_marked': Marked(obj.content, { breaks: true })
+                'content_marked': Marked(obj.content, { breaks: true }),
+                'time': m.format('LLLL'),
+                'time_from_now': Common.getRelativeTimeStr(m),
+                'user_profile_url': user_profile_url
             });
             this.$el.html(this.template(obj));
             return this;

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

@@ -18,6 +18,7 @@ define([
 
             this.$loadingTip = this.$('.loading-tip');
             this.$listContainer = this.$('#group-discussion-list');
+            this.$emptyTip = this.$('.no-discussion-tip');
             this.$error = this.$('.error');
 
             var _this = this;
@@ -59,9 +60,15 @@ define([
             this.$error.hide();
             this.$loadingTip.hide();
             this.$listContainer.empty();
-            this.collection.each(this.addOne, this);
+            if (this.collection.length) {
-            this.$listContainer.removeClass('hide');
+                this.$emptyTip.hide();
-            this.$listContainer.show();
+                this.collection.each(this.addOne, this);
+                this.$listContainer.removeClass('hide');
+                this.$listContainer.show();
+            } else {
+                this.$emptyTip.show();
+                this.$listContainer.hide();
+            }
         },
 
         render: function() {
@@ -124,6 +131,9 @@ define([
                 prepend: true,
                 success: function() {
                     _this.$('[name="message"]').val('');
+                    if (_this.collection.length == 1) {
+                        _this.collection.reset(_this.collection.models);
+                    }
                 },
                 error: function(collection, response, options) {
                     var err_msg;

static/scripts/common.js

@@ -478,6 +478,15 @@ define([
             Moment.locale(language_code);
         },
 
+        getRelativeTimeStr: function(m) {
+            var now = new Date();
+            if (m - now > 0) {
+                return gettext("Just now");
+            } else {
+                return m.fromNow();
+            }
+        },
+
         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) ) {