Fix kmw-key-square positioning and adjust findNearestKey for over-key situations

This commit is contained in:
Marc Durdin 2019-06-19 08:41:02 +10:00
parent 2ca79c7682
commit 494cd52de4
4 changed files with 29 additions and 4 deletions

View file

@ -182,6 +182,12 @@ namespace com.keyman.osk {
break;
}
}
// Set the kmw-key-square position
ks=key.style;
ks.bottom=(bottom-pad/2)+'px';
ks.height=ks.minHeight=(rowHeight)+'px';
// Set the kmw-key position
ks=key.childNodes[j].style;
ks.bottom=rs.bottom;
ks.height=ks.minHeight=(rowHeight-pad)+'px';

View file

@ -445,6 +445,13 @@ namespace com.keyman.osk {
break;
}
}
// Set the kmw-key-square position
ks=key.style;
ks.bottom=(bottom-pad/2)+'px';
ks.height=ks.minHeight=(rowHeight)+'px';
// Set the kmw-key position
ks=key.childNodes[j].style;
ks.bottom=rs.bottom;
ks.height=ks.minHeight=(rowHeight-pad)+'px';

View file

@ -840,7 +840,7 @@ namespace com.keyman.osk {
let keyman = com.keyman.singleton;
// We need to compute the 'local', keyboard-based coordinates for the touch.
let kbdCoords = keyman.util.getAbsolute(this.kbdDiv);
let kbdCoords = keyman.util.getAbsolute(this.kbdDiv.firstChild as HTMLElement);
let offsetCoords = {x: touch.pageX - kbdCoords.x, y: touch.pageY - kbdCoords.y};
let layerGroup = this.kbdDiv.firstChild as HTMLDivElement; // Always has proper dimensions, unlike kbdDiv itself.
@ -1223,12 +1223,18 @@ namespace com.keyman.osk {
}
x1 = childNode.offsetLeft;
x2 = x1 + childNode.offsetWidth;
dx =x1 - x;
if(x >= x1 && x <= x2) {
// Within the key square
return <KeyElement> childNode.firstChild;
}
dx = x1 - x;
if(dx >= 0 && dx < dxMin) {
// To right of key
k0 = k; dxMin = dx;
}
dx = x - x2;
if(dx >= 0 && dx < dxMin) {
// To left of key
k0 = k; dxMin = dx;
}
}

View file

@ -43,6 +43,10 @@
transform: translateY(-50%);
}
.tablet .kmw-suggestion-text {
font-size: 0.75em;
}
.phone.windows .kmw-key-row{max-width:80%;}
.phone.windows .kmw-key {position:static;}
@ -74,6 +78,7 @@
text-align: center;
border-radius: 5px;
border-bottom: solid 1px #8a8d90;
vertical-align: top;
}
.ios .kmw-suggestion-text {
@ -113,7 +118,8 @@
background-color: #333;
display:inline-block;
text-align: center;
border-radius: 5px
border-radius: 5px;
vertical-align: top;
}
.phone.android .kmw-suggestion-text {
@ -130,7 +136,7 @@
.tablet .kmw-key-row {position:fixed;width:100%;height:20%;margin:0;padding:0;border:none;overflow:hidden;}
.tablet .kmw-key-square {position:fixed; display:inline-block; height:100%; max-height:100%; overflow:hidden; margin:0 0 0 0; z-index: 10000; padding:0 0 0 0; background-color:transparent;cursor:default; border:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.tablet .kmw-key-square-ex {display:inline-block;box-sizing:border-box;margin:0 0 0 5px;z-index:10001; padding:0; background-color:transparent; cursor:default;}
.tablet .kmw-key {display:block;position:fixed;margin:2px;border-radius:8px;text-align:center;box-sizing:border-box;overflow:visible;
.tablet .kmw-key {display:block;position:fixed;margin:0px;border-radius:8px;text-align:center;box-sizing:border-box;overflow:visible;
border:solid 2px #999999;
box-shadow: 0px -1px 1px 0px rgba(0,0,0,1) inset;
}