Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: adjust positioning of auto complete vertical 

On iPad portrait autocomplete would render off screen
This commit is contained in:
Sam 2018-07-18 16:41:20 +10:00
parent 487ef9773f
commit a24b9981c6
1 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/assets/javascripts/discourse/lib/autocomplete.js.es6
View File

@ -253,6 +253,9 @@ export default function(options) {
return $(links[selectedOption]).addClass("selected"); return $(links[selectedOption]).addClass("selected");
} }
// a sane spot below cursor
const BELOW = -32;
function renderAutocomplete() { function renderAutocomplete() {
if (div) { if (div) {
div.hide().remove(); div.hide().remove();
@ -278,7 +281,7 @@ export default function(options) {
left: 0, left: 0,
top: 0 top: 0
}; };
vOffset = -32; vOffset = BELOW;
hOffset = 0; hOffset = 0;
} else { } else {
pos = me.caretPosition({ pos = me.caretPosition({
@ -289,6 +292,7 @@ export default function(options) {
hOffset = 27; hOffset = 27;
if (options.treatAsTextarea) vOffset = -32; if (options.treatAsTextarea) vOffset = -32;
} }
div.css({ div.css({
left: "-1000px" left: "-1000px"
}); });
@ -302,18 +306,18 @@ export default function(options) {
if (!isInput && !options.treatAsTextarea) { if (!isInput && !options.treatAsTextarea) {
vOffset = div.height(); vOffset = div.height();
if ( const spaceOutside =
window.innerHeight - window.innerHeight -
me.outerHeight() - me.outerHeight() -
$("header.d-header").innerHeight() < $("header.d-header").innerHeight();
vOffset
) { if (spaceOutside < vOffset && vOffset > pos.top) {
vOffset = -23; vOffset = BELOW;
} }
if (Discourse.Site.currentProp("mobileView")) { if (Discourse.Site.currentProp("mobileView")) {
if (me.height() / 2 >= pos.top) { if (me.height() / 2 >= pos.top) {
vOffset = -23; vOffset = BELOW;
} }
if (me.width() / 2 <= pos.left) { if (me.width() / 2 <= pos.left) {
hOffset = -div.width(); hOffset = -div.width();
@ -322,12 +326,19 @@ export default function(options) {
} }
var mePos = me.position(); var mePos = me.position();
var borderTop = parseInt(me.css("border-top-width"), 10) || 0; var borderTop = parseInt(me.css("border-top-width"), 10) || 0;
let left = mePos.left + pos.left + hOffset; let left = mePos.left + pos.left + hOffset;
if (left < 0) { if (left < 0) {
left = 0; left = 0;
} }
const offsetTop = me.offset().top;
if (mePos.top + pos.top + borderTop - vOffset + offsetTop < 30) {
vOffset = BELOW;
}
div.css({ div.css({
position: "absolute", position: "absolute",
top: mePos.top + pos.top - vOffset + borderTop + "px", top: mePos.top + pos.top - vOffset + borderTop + "px",