diff options
-rw-r--r-- | css/comments.css | 185 | ||||
-rw-r--r-- | js/app.js | 16 | ||||
-rw-r--r-- | templates/index-public.php | 4 | ||||
-rw-r--r-- | templates/index.php | 4 |
4 files changed, 209 insertions, 0 deletions
diff --git a/css/comments.css b/css/comments.css new file mode 100644 index 000000000..09771b4e9 --- /dev/null +++ b/css/comments.css @@ -0,0 +1,185 @@ +/* + * Copyright (c) 2016 + * + * This file is licensed under the Affero General Public License version 3 + * or later. + * + * See the COPYING-README file. + * + */ + +#commentsTabView .emptycontent { + margin-top: 0; +} + +#commentsTabView .newCommentForm { + position: relative; + margin-bottom: 20px; +} + +#commentsTabView .newCommentForm .message { + width: calc(100% - 81px); /* 36 (left margin) + 30 (right padding) + 15 (right padding of surrounding box) */ + margin-left: 36px; + padding-right: 30px; + display: block; +} + +#commentsTabView .newCommentForm .submit { + position: absolute; + bottom: 0px; + right: 8px; + width: 30px; + margin: 0; + padding: 7px 9px; + background-color: transparent; + border: none; + opacity: .3; +} +#commentsTabView .newCommentForm .submit:hover, +#commentsTabView .newCommentForm .submit:focus { + opacity: 1; +} + +#commentsTabView .newCommentForm .submitLoading { + background-position: left; +} + +#commentsTabView .newCommentForm .cancel { + margin-right: 6px; +} + +#commentsTabView .newCommentForm div.message { + resize: none; +} + +#commentsTabView .newCommentForm div.message:empty:before { + content: attr(data-placeholder); + color: grey; +} + +#commentsTabView .comment { + position: relative; + margin-bottom: 30px; +} + +#commentsTabView .comment .avatar, +.atwho-view-ul * .avatar{ + width: 32px; + height: 32px; + line-height: 32px; +} + +#commentsTabView .comment .message .avatar, +.atwho-view-ul * .avatar +{ + display: inline-block; +} + +#activityTabView li.comment.collapsed .activitymessage, +#commentsTabView .comment.collapsed .message { + white-space: pre-wrap; +} + +#activityTabView li.comment.collapsed .activitymessage, +#commentsTabView .comment.collapsed .message { + max-height: 70px; + overflow: hidden; +} + +#activityTabView li.comment .message-overlay, +#commentsTabView .comment .message-overlay { + display: none; +} + +#activityTabView li.comment.collapsed .message-overlay, +#commentsTabView .comment.collapsed .message-overlay { + display: block; + position: absolute; + z-index: 2; + height: 50px; + pointer-events: none; + left: 0; + right: 0; + bottom: 0; + background: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); + background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); + background: -o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); + background: -ms-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); + background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00FFFFFF', endColorstr='#FFFFFFFF'); + background-repeat: no-repeat; +} + +#commentsTabView .authorRow>div { + display: inline-block; + vertical-align: middle; +} + +#commentsTabView .authorRow>div.hidden { + display: none !important; +} + +#commentsTabView .comments li .message .avatar-name-wrapper, +.atwho-view-ul * .avatar-name-wrapper, +#commentsTabView .comment .authorRow { + position: relative; + cursor: pointer; +} + +.atwho-view-ul * .avatar-name-wrapper { + white-space: nowrap; +} + +#commentsTabView .comment .author, +#commentsTabView .comment .date { + opacity: .5; +} +#commentsTabView .comment .author { + margin-left: 5px; +} +#commentsTabView .comment .date { + position: absolute; + right: 0; + top: 5px; +} + +#commentsTabView .comments li .message { + padding-left: 40px; +} + +#commentsTabView .comment .action { + opacity: 0; + vertical-align: middle; + display: inline-block; +} + +#commentsTabView .comment:hover .action { + opacity: 0.3; +} + +#commentsTabView .comment .action:hover { + opacity: 1; +} + +#commentsTabView .comment .action.delete { + position: absolute; + right: 0; +} + +#commentsTabView .comment.disabled { + opacity: 0.3; +} + +#commentsTabView .comment.disabled .action { + visibility: hidden; +} + +#commentsTabView .message.error { + color: #e9322d; + border-color: #e9322d; + box-shadow: 0 0 6px #f8b9b7; +} + +.app-files .action-comment { + padding: 16px 14px; +} @@ -391,6 +391,9 @@ guestNameModel: this._localStorageModel }); this._sidebarView.setCallInfoView(callInfoView); + + this._messageCollection.setRoomToken(this.activeRoom.get('token')); + this._messageCollection.receiveMessages(); }, setPageTitle: function(title){ if (title) { @@ -472,6 +475,19 @@ this.disable(); }); + this._messageCollection = new OCA.SpreedMe.Models.ChatMessageCollection(null, {token: null}); + this._chatView = new OCA.SpreedMe.Views.ChatView({ + collection: this._messageCollection, + id: 'commentsTabView', + className: 'chat tab' + }); + + this._sidebarView.addTab('chat', { label: t('spreed', 'Chat') }, this._chatView); + + this._messageCollection.listenTo(roomChannel, 'leaveCurrentCall', function() { + this.stopReceivingMessages(); + }); + $(document).on('click', this.onDocumentClick); OC.Util.History.addOnPopStateHandler(_.bind(this._onPopState, this)); }, diff --git a/templates/index-public.php b/templates/index-public.php index 44dc370d3..199ccf59a 100644 --- a/templates/index-public.php +++ b/templates/index-public.php @@ -6,16 +6,20 @@ vendor_script('select2/select2'); vendor_style('select2/select2'); style('spreed', 'style'); +style('spreed', 'comments'); script( 'spreed', [ 'vendor/backbone/backbone-min', 'vendor/backbone.radio/build/backbone.radio.min', 'vendor/backbone.marionette/lib/backbone.marionette.min', + 'models/chatmessage', + 'models/chatmessagecollection', 'models/localstoragemodel', 'models/room', 'models/roomcollection', 'views/callinfoview', + 'views/chatview', 'views/editabletextlabel', 'views/roomlistview', 'views/sidebarview', diff --git a/templates/index.php b/templates/index.php index b392cd01c..5cb01ba69 100644 --- a/templates/index.php +++ b/templates/index.php @@ -6,17 +6,21 @@ vendor_script('select2/select2'); vendor_style('select2/select2'); style('spreed', 'style'); +style('spreed', 'comments'); script( 'spreed', [ 'vendor/backbone/backbone-min', 'vendor/backbone.radio/build/backbone.radio.min', 'vendor/backbone.marionette/lib/backbone.marionette.min', + 'models/chatmessage', + 'models/chatmessagecollection', 'models/room', 'models/roomcollection', 'models/participant', 'models/participantcollection', 'views/callinfoview', + 'views/chatview', 'views/editabletextlabel', 'views/participantlistview', 'views/participantview', |