From 07f884df70e5449f4c35ef3af5a05c1e2effce3a Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Mon, 3 Sep 2018 09:42:37 +0100
Subject: [PATCH] Fix spell-checker menu going offscreen.

---
 .../coffee/ide/editor/components/spellMenu.coffee   |  3 ++-
 .../coffee/ide/editor/directives/aceEditor.coffee   |  1 +
 .../aceEditor/spell-check/SpellCheckAdapter.coffee  |  6 ++++++
 .../aceEditor/spell-check/SpellCheckManager.coffee  |  2 ++
 services/web/public/stylesheets/app/editor.less     | 13 +++++++++++++
 5 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/services/web/public/coffee/ide/editor/components/spellMenu.coffee b/services/web/public/coffee/ide/editor/components/spellMenu.coffee
index ff3462e03e..12923ed5f2 100644
--- a/services/web/public/coffee/ide/editor/components/spellMenu.coffee
+++ b/services/web/public/coffee/ide/editor/components/spellMenu.coffee
@@ -4,6 +4,7 @@ define ["base"], (App) ->
       open: "<"
       top: "<"
       left: "<"
+      layoutFromBottom: "<"
       highlight: "<"
       replaceWord: "&"
       learnWord: "&"
@@ -13,7 +14,7 @@ define ["base"], (App) ->
     class="dropdown context-menu spell-check-menu"
     ng-show="$ctrl.open"
     ng-style="{top: $ctrl.top, left: $ctrl.left}"
-    ng-class="{open: $ctrl.open}"
+    ng-class="{open: $ctrl.open, 'spell-check-menu-from-bottom': $ctrl.layoutFromBottom}"
   >
     <ul class="dropdown-menu">
       <li ng-repeat="suggestion in $ctrl.highlight.suggestions | limitTo:8">
diff --git a/services/web/public/coffee/ide/editor/directives/aceEditor.coffee b/services/web/public/coffee/ide/editor/directives/aceEditor.coffee
index e910e290a2..e3ab0b29be 100644
--- a/services/web/public/coffee/ide/editor/directives/aceEditor.coffee
+++ b/services/web/public/coffee/ide/editor/directives/aceEditor.coffee
@@ -544,6 +544,7 @@ define [
 						open="spellMenu.open"
 						top="spellMenu.top"
 						left="spellMenu.left"
+						layout-from-bottom="spellMenu.layoutFromBottom"
 						highlight="spellMenu.highlight"
 						replace-word="replaceWord(highlight, suggestion)"
 						learn-word="learnWord(highlight)"
diff --git a/services/web/public/coffee/ide/editor/directives/aceEditor/spell-check/SpellCheckAdapter.coffee b/services/web/public/coffee/ide/editor/directives/aceEditor/spell-check/SpellCheckAdapter.coffee
index 2afc2cf0ff..aa39c53638 100644
--- a/services/web/public/coffee/ide/editor/directives/aceEditor/spell-check/SpellCheckAdapter.coffee
+++ b/services/web/public/coffee/ide/editor/directives/aceEditor/spell-check/SpellCheckAdapter.coffee
@@ -30,6 +30,12 @@ define [
 				end: position
 			})
 
+		isContextMenuEventOnBottomHalf: (e) ->
+			clientY = e.domEvent.clientY
+			editorBoundingRect = e.target.container.getBoundingClientRect()
+			relativeYPos = (clientY - editorBoundingRect.top) / editorBoundingRect.height
+			return relativeYPos > 0.5
+
 		selectHighlightedWord: (highlight) ->
 			row = highlight.range.start.row
 			startColumn = highlight.range.start.column
diff --git a/services/web/public/coffee/ide/editor/directives/aceEditor/spell-check/SpellCheckManager.coffee b/services/web/public/coffee/ide/editor/directives/aceEditor/spell-check/SpellCheckManager.coffee
index cbe4fdbd64..6e769de238 100644
--- a/services/web/public/coffee/ide/editor/directives/aceEditor/spell-check/SpellCheckManager.coffee
+++ b/services/web/public/coffee/ide/editor/directives/aceEditor/spell-check/SpellCheckManager.coffee
@@ -55,6 +55,7 @@ define [], () ->
 		openContextMenu: (e) ->
 			coords = @adapter.getCoordsFromContextMenuEvent(e)
 			highlight = @adapter.getHighlightFromCoords(coords)
+			shouldPositionFromBottom = @adapter.isContextMenuEventOnBottomHalf(e)
 			if highlight
 				@adapter.preventContextMenuEventDefault(e)
 				@adapter.selectHighlightedWord(highlight)
@@ -63,6 +64,7 @@ define [], () ->
 						open: true
 						top: coords.y + 'px'
 						left: coords.x + 'px'
+						layoutFromBottom: shouldPositionFromBottom
 						highlight: highlight
 					}
 				return false
diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index a98e31f9fa..d50877e317 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -649,3 +649,16 @@ CodeMirror
 	height: auto;
 	border-bottom: 1px solid @modal-header-border-color;
 }
+
+.spell-check-menu {
+	> .dropdown-menu > li > a {
+		padding: 2px 15px;
+	}
+}
+
+.spell-check-menu-from-bottom {
+	> .dropdown-menu {
+		top: auto;
+		bottom: 100%;
+	}
+}