Added infinite scroll to files list

packages/rocketchat-theme/assets/stylesheets/base.less

@@ -4298,6 +4298,19 @@ a.github-fork {
 	}
 }
 
+.uploaded-files-list {
+	.load-more {
+		text-transform: lowercase;
+		text-align: center;
+		line-height: 40px;
+		font-style: italic;
+
+		.load-more-loading {
+			color: #aaa;
+		}
+	}
+}
+
 .messages-box {
 	.message-cog-container {
 		.message-action {

packages/rocketchat-ui-flextab/flex-tab/tabs/uploadedFilesList.coffee

@@ -1,32 +1,46 @@
 roomFiles = new Mongo.Collection 'room_files'
 
 Template.uploadedFilesList.helpers
-  files: ->
-    return roomFiles.find({ rid: this.rid }).fetch()
+	files: ->
+		return roomFiles.find({ rid: @rid }).fetch()
 
-  hasFiles: ->
-    return roomFiles.find({ rid: this.rid }).count() > 0
+	hasFiles: ->
+		return roomFiles.find({ rid: @rid }).count() > 0
 
-  getFileIcon: (type) ->
-    if type.match(/^image\/.+$/)
-      return 'icon-picture'
+	hasMore: ->
+		return Template.instance().hasMore.get()
 
-    return 'icon-docs'
+	getFileIcon: (type) ->
+		if type.match(/^image\/.+$/)
+			return 'icon-picture'
 
-  customClassForFileType: ->
-    if this.type.match(/^image\/.+$/)
-      return 'room-files-swipebox'
+		return 'icon-docs'
 
-  escapedName: ->
-    return s.escapeHTML @name
+	customClassForFileType: ->
+		if @type.match(/^image\/.+$/)
+			return 'room-files-swipebox'
+
+	escapedName: ->
+		return s.escapeHTML @name
 
 Template.uploadedFilesList.events
-  'click .room-file-item': (e, t) ->
-    if $(e.currentTarget).siblings('.icon-picture').length
-      e.preventDefault()
+	'click .room-file-item': (e, t) ->
+		if $(e.currentTarget).siblings('.icon-picture').length
+			e.preventDefault()
+
+	'scroll .content': _.throttle (e, t) ->
+		if e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight
+			t.limit.set(t.limit.get() + 50)
+	, 200
 
 Template.uploadedFilesList.onCreated ->
-  this.subscribe 'roomFiles', Template.currentData().rid
+	rid = Template.currentData().rid
+	@hasMore = new ReactiveVar true
+	@limit = new ReactiveVar 50
+	@autorun =>
+		@subscribe 'roomFiles', rid, @limit.get(), =>
+			if roomFiles.find({ rid: rid }).fetch().length < @limit.get()
+				@hasMore.set false
 
 Template.uploadedFilesList.onRendered ->
-  $('.room-files-swipebox').swipebox()
+	$('.room-files-swipebox').swipebox()

packages/rocketchat-ui-flextab/flex-tab/tabs/uploadedFilesList.html

@@ -1,27 +1,33 @@
 <template name="uploadedFilesList">
-  <div class="content">
-    <div class="list-view uploaded-files-list">
-      <div class="status">
-        <h2>{{_ "Room_uploaded_file_list"}}</h2>
-      </div>
-      {{#if Template.subscriptionsReady}}
-        {{#if hasFiles }}
-          <ul class='list clearfix lines'>
-            {{#each files}}
-              <li>
-                <a title="{{escapedName}}" href="{{url}}" target="_blank" class="room-file-item {{customClassForFileType}}">
-                  <i class="{{getFileIcon type}}"></i>
-                  <p>{{name}}</p>
-                </a>
-              </li>
-            {{/each}}
-          </ul>
-        {{else}}
-          <h2>{{_ "Room_uploaded_file_list_empty"}}</h2>
-        {{/if}}
-      {{else}}
-        <span>{{_ "Loading..."}}</span>
-      {{/if}}
-    </div>
-  </div>
+	<div class="content">
+		<div class="list-view uploaded-files-list">
+			<div class="status">
+				<h2>{{_ "Room_uploaded_file_list"}}</h2>
+			</div>
+			<ul class="list clearfix lines">
+				{{#each files}}
+					<li>
+						<a title="{{escapedName}}" href="{{url}}" target="_blank" class="room-file-item {{customClassForFileType}}">
+							<i class="{{getFileIcon type}}"></i>
+							<p>{{name}}</p>
+						</a>
+					</li>
+				{{/each}}
+				{{#if hasMore}}
+					<li class="load-more">
+						{{#if Template.subscriptionsReady}}
+							<a href="">{{_ "Has_more"}}...</a>
+						{{else}}
+							<div class="load-more-loading">{{_ "Loading..."}}</div>
+						{{/if}}
+					</li>
+				{{/if}}
+			</ul>
+			{{#if Template.subscriptionsReady}}
+				{{#unless hasFiles}}
+					<h2>{{_ "Room_uploaded_file_list_empty"}}</h2>
+				{{/unless}}
+			{{/if}}
+		</div>
+	</div>
 </template>

server/publications/roomFiles.coffee

@@ -1,32 +1,35 @@
-Meteor.publish 'roomFiles', (rid) ->
-  unless this.userId
-    return this.ready()
+Meteor.publish 'roomFiles', (rid, limit = 50) ->
+	unless this.userId
+		return this.ready()
 
-  pub = this
+	pub = this
 
-  fileQuery =
-    rid: rid
-    complete: true
-    uploading: false
+	fileQuery =
+		rid: rid
+		complete: true
+		uploading: false
 
-  fileOptions =
-    fields:
-      _id: 1
-      rid: 1
-      name: 1
-      type: 1
-      url: 1
+	fileOptions =
+		limit: limit
+		sort:
+			uploadedAt: -1
+		fields:
+			_id: 1
+			rid: 1
+			name: 1
+			type: 1
+			url: 1
 
-  cursorFileListHandle = fileCollection.find(fileQuery, fileOptions).observeChanges
-    added: (_id, record) ->
-      pub.added('room_files', _id, record)
+	cursorFileListHandle = fileCollection.find(fileQuery, fileOptions).observeChanges
+		added: (_id, record) ->
+			pub.added('room_files', _id, record)
 
-    changed: (_id, record) ->
-      pub.changed('room_files', _id, record)
+		changed: (_id, record) ->
+			pub.changed('room_files', _id, record)
 
-    removed: (_id, record) ->
-      pub.removed('room_files', _id, record)
+		removed: (_id, record) ->
+			pub.removed('room_files', _id, record)
 
-  this.ready()
-  this.onStop ->
-    cursorFileListHandle.stop()
+	this.ready()
+	this.onStop ->
+		cursorFileListHandle.stop()