Merge pull request #267 from sharelatex/pr-log-dropdown

"Other logs & files" dropdown / dropup

services/web/app/views/project/editor/pdf.jade

@@ -145,7 +145,7 @@ div.full-size.pdf(ng-controller="PdfController")
 				p.entry-content(ng-show="entry.content") {{ entry.content.trim() }}
 
 		p
-			.pull-right
+			.files-dropdown-container
 				a.btn.btn-default.btn-sm(
 					href,
 					tooltip="#{translate('clear_cached_files')}",
@@ -155,7 +155,10 @@ div.full-size.pdf(ng-controller="PdfController")
 				)
 					i.fa.fa-trash-o
 				|  
-				div.dropdown(style="display: inline-block;", dropdown)
+				div.files-dropdown(
+					ng-class="shouldDropUp ? 'dropup' : 'dropdown'"
+					dropdown
+				)
 					a.btn.btn-default.btn-sm(
 						href
 						dropdown-toggle

services/web/public/coffee/ide/pdf/controllers/PdfController.coffee

@@ -15,6 +15,22 @@ define [
 		$scope.shouldShowLogs = false
 		$scope.wikiEnabled = window.wikiEnabled;
 
+		# view logic to check whether the files dropdown should "drop up" or "drop down"
+		$scope.shouldDropUp = false
+
+		logsContainerEl	= document.querySelector ".pdf-logs"
+		filesDropdownEl	= logsContainerEl?.querySelector ".files-dropdown"
+
+		# get the top coordinate of the files dropdown as a ratio (to the logs container height)
+		# logs container supports scrollable content, so it's possible that ratio > 1.
+		getFilesDropdownTopCoordAsRatio = () ->
+			 filesDropdownEl?.getBoundingClientRect().top / logsContainerEl?.getBoundingClientRect().height
+
+		$scope.$watch "shouldShowLogs", (shouldShow) ->
+			if shouldShow
+				$scope.$applyAsync () -> 
+					$scope.shouldDropUp = getFilesDropdownTopCoordAsRatio() > 0.65
+
 		# log hints tracking
 		$scope.trackLogHintsLearnMore = () ->
 			event_tracking.sendCountly "logs-hints-learn-more"

services/web/public/stylesheets/app/editor/pdf.less

@@ -122,7 +122,7 @@
 			font-weight: 700;
 
 			.fa {
-				display: none;
+				opacity: 0;
 			}
 		}
 		.entry-message {
@@ -138,7 +138,7 @@
 		&:hover .line-no {
 			color: inherit;
 			.fa {
-				display: inline-block;
+				opacity: 1;
 			}
 		}
 
@@ -284,3 +284,12 @@
 		margin-top: 20px;
 	}
 }
+
+.files-dropdown-container {
+	.pull-right();
+	position: relative;
+}
+
+	.files-dropdown {
+		display: inline-block;
+	}