Closes #2178; Admin View Logs should auto-scroll to end

i18n/en.i18n.json

@@ -380,6 +380,7 @@
   "Name_optional" : "Name (optional)",
   "New_Application" : "New Application",
   "New_integration" : "New integration",
+  "New_logs" : "New logs",
   "New_messages" : "New messages",
   "New_password" : "New password",
   "No_channel_with_name_%s_was_found" : "No channel with name <strong>\"%s\"</strong> was found!",
@@ -460,9 +461,9 @@
   "Push_gcm_api_key" : "GCM API Key",
   "Push_gcm_project_number" : "GCM Project Number",
   "Push_production" : "Production",
-  "Push_test_push" : "Test",
   "Push_show_message" : "Show message in notification",
   "Push_show_username_room" : "Show channel/group/username in notification",
+  "Push_test_push" : "Test",
   "Quick_Search" : "Quick Search",
   "quote" : "quote",
   "Recents" : "Recents",

packages/rocketchat-logger/client/viewLogs.coffee

@@ -14,3 +14,4 @@ FlowRouter.route '/admin/view-logs',
 			center: 'pageSettingsContainer'
 			pageTitle: t('View_Logs')
 			pageTemplate: 'viewLogs'
+			noScroll: true

packages/rocketchat-logger/client/views/viewLogs.coffee

 Template.viewLogs.onCreated ->
 	@subscribe 'stdout'
+	@atBottom = true
+
 
 Template.viewLogs.helpers
 	hasPermission: ->
@@ -15,3 +17,82 @@ Template.viewLogs.helpers
 
 	formatTS: (date) ->
 		return moment(date).format('YMMDD-HH:mm:ss.SSS(ZZ)')
+
+
+Template.viewLogs.events
+	'click .new-logs': (e) ->
+		Template.instance().atBottom = true
+		Template.instance().sendToBottomIfNecessary()
+
+
+Template.viewLogs.onRendered ->
+	wrapper = this.find('.terminal')
+	wrapperUl = this.find('.terminal')
+	newLogs = this.find('.new-logs')
+
+	template = this
+
+	template.isAtBottom = ->
+		if wrapper.scrollTop >= wrapper.scrollHeight - wrapper.clientHeight
+			newLogs.className = "new-logs not"
+			return true
+		return false
+
+	template.sendToBottom = ->
+		wrapper.scrollTop = wrapper.scrollHeight - wrapper.clientHeight
+		newLogs.className = "new-logs not"
+
+	template.checkIfScrollIsAtBottom = ->
+		template.atBottom = template.isAtBottom()
+		readMessage.enable()
+		readMessage.read()
+
+	template.sendToBottomIfNecessary = ->
+		if template.atBottom is true and template.isAtBottom() isnt true
+			template.sendToBottom()
+		else if template.atBottom is false
+			newLogs.className = "new-logs"
+
+	template.sendToBottomIfNecessaryDebounced = _.debounce template.sendToBottomIfNecessary, 10
+
+	template.sendToBottomIfNecessary()
+
+	if not window.MutationObserver?
+		wrapperUl.addEventListener 'DOMSubtreeModified', ->
+			template.sendToBottomIfNecessaryDebounced()
+	else
+		observer = new MutationObserver (mutations) ->
+			mutations.forEach (mutation) ->
+				template.sendToBottomIfNecessaryDebounced()
+
+		observer.observe wrapperUl,
+			childList: true
+
+	template.onWindowResize = ->
+		Meteor.defer ->
+			template.sendToBottomIfNecessaryDebounced()
+
+	window.addEventListener 'resize', template.onWindowResize
+
+	wrapper.addEventListener 'mousewheel', ->
+		template.atBottom = false
+		Meteor.defer ->
+			template.checkIfScrollIsAtBottom()
+
+	wrapper.addEventListener 'wheel', ->
+		template.atBottom = false
+		Meteor.defer ->
+			template.checkIfScrollIsAtBottom()
+
+	wrapper.addEventListener 'touchstart', ->
+		template.atBottom = false
+
+	wrapper.addEventListener 'touchend', ->
+		Meteor.defer ->
+			template.checkIfScrollIsAtBottom()
+		Meteor.setTimeout ->
+			template.checkIfScrollIsAtBottom()
+		, 1000
+		Meteor.setTimeout ->
+			template.checkIfScrollIsAtBottom()
+		, 2000

packages/rocketchat-logger/client/views/viewLogs.html

@@ -8,6 +8,10 @@
 				</div>
 			{{/each}}
 		</div>
+		<div class="new-logs not">
+			<i class="icon-down-big"></i>
+			<span>{{_ "New_logs"}}</span>
+		</div>
 	{{else}}
 		{{_ "Not_authorized"}}
 	{{/if}}

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

@@ -27,6 +27,10 @@
 	user-select: text;
 }
 
+.no-scroll {
+	overflow: hidden !important;
+}
+
 .page-settings, .page-settings * {
 	-webkit-user-select: text;
 	-moz-user-select: text;
@@ -4445,6 +4449,7 @@ a.github-fork {
 	-moz-user-select: text;
 	-ms-user-select: text;
 	user-select: text;
+	margin-bottom: 0px !important;
 
 	* {
 		-webkit-user-select: text;
@@ -4462,6 +4467,28 @@ a.github-fork {
 	}
 }
 
+.new-logs {
+	margin: 0 -65px;
+	position: absolute;
+	border-radius: 20px;
+	width: 130px;
+	height: 30px;
+	text-align: center;
+	line-height: 30px;
+	font-size: 0.8em;
+	cursor: pointer;
+	bottom: 8px;
+	left: 50%;
+	background: #FFF;
+	color: #428bca;
+
+	.transition(transform 0.3s ease-out);
+	.transform(translateY(0));
+	&.not {
+		.transform(translateY(150%));
+	}
+}
+
 .powered-by {
 	margin-top: 1em;
 }

packages/rocketchat-ui/views/app/pageSettingsContainer.html

@@ -6,7 +6,7 @@
 				<span class="page-title">{{pageTitle}}</span>
 			</h2>
 		</head>
-		<div class="content">
+		<div class="content {{#if noScroll}}no-scroll{{/if}}">
 			{{> Template.dynamic template=pageTemplate}}
 		</div>
 	</section>