diff --git a/services/web/app/views/project/editor/pdf.jade b/services/web/app/views/project/editor/pdf.jade index 1f135d665f..f9d02e8557 100644 --- a/services/web/app/views/project/editor/pdf.jade +++ b/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,12 +155,15 @@ 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 ) - | !{translate("other_logs_and_files")} + | !{translate("other_logs_and_files")} span.caret ul.dropdown-menu.dropdown-menu-right li(ng-repeat="file in pdf.outputFiles") diff --git a/services/web/public/coffee/ide/pdf/controllers/PdfController.coffee b/services/web/public/coffee/ide/pdf/controllers/PdfController.coffee index 6ca950671f..415d2f6aad 100644 --- a/services/web/public/coffee/ide/pdf/controllers/PdfController.coffee +++ b/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" diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index 2d147c2f69..a4d2eeb214 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/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; + }