erabo/spiegel-keyman
1
0
Fork 0
mirror of https://github.com/keymanapp/keyman.git synced 2026-09-23 16:17:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

feat(web): multitap + longpress styling statically positioned, flick part may scroll

Browse source
This commit is contained in:
Joshua A. Horton 2023-10-23 10:12:19 +07:00
parent 55f004f4c6
commit efa4806912
2 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
web/src/engine/osk/src/keyboard-layout/gesturePreviewHost.ts
View file

@ -40,8 +40,11 @@ export class GesturePreviewHost {
base.style.pointerEvents='none';
// Should probably just be the base element at this point...
// Ah well, only figured this out after experimentation.
// We want this to be distinct from the base element so that we can scroll it;
// this matters greatly for doing flick things.
//
// Note: should probably put multitap style & longpress subkey bit one layer up;
// it looks REALLY odd when the multitap style scrolls.
const previewImgContainer = this.previewImgContainer = document.createElement('div');
this.previewImgContainer.id = 'kmw-preview-img-container';
@ -56,7 +59,7 @@ export class GesturePreviewHost {
this.mtStyling = DEMO_ALL || keySpec.multitap;
if(this.mtStyling) {
// Shifts the layout to provide a rough multitap visualization
this.previewImgContainer.className = 'kmw-multitap-preview'; // to indicate multitap presence.
base.classList.add('kmw-multitap-preview'); // to indicate multitap presence.
}
this.div.appendChild(this.previewImgContainer);
@ -131,14 +134,14 @@ export class GesturePreviewHost {
let xAdjustment = DEMO_ALL || keySpec.multitap ? 3 : 0;
skIcon.style.marginRight = `-${xAdjustment}px`;
previewImgContainer.appendChild(skIcon);
base.appendChild(skIcon);
}
}
// These may not exist like this longterm.
private clearMultitap() {
if(this.mtStyling) {
this.previewImgContainer.classList.add('multitap-clear');
this.div.classList.add('multitap-clear');
}
}

24
web/src/resources/osk/kmwosk.css
View file

@ -344,12 +344,14 @@ body div.kmw-key-shift-on span.kmw-key-text {font-family:SpecialOSK !important;f
#kmw-gesture-preview {
position: absolute;
height: 100%;
width: 100%;
display: block;
z-index: 1;
top: 0;
left: 0;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
/* Clip anything that 'scrolls' past the preview's boundaries.*/
overflow: hidden;
/* Hides the base key entirely; this prevents artifacting should positioning vary a bit. */
background-color: inherit;
}
@ -375,15 +377,15 @@ body div.kmw-key-shift-on span.kmw-key-text {font-family:SpecialOSK !important;f
#kmw-preview-img-container {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
transition: 0.5s linear all;
/* Facilitates scrolling animation to match a flick */
height: 100%;
width: 100%;
transition: 0.5s linear border;
}
#kmw-preview-img-container.kmw-multitap-preview {
#kmw-gesture-preview.kmw-multitap-preview {
position: absolute;
margin-top: 1px;
margin-left: 1px;
@ -393,7 +395,7 @@ body div.kmw-key-shift-on span.kmw-key-text {font-family:SpecialOSK !important;f
border-bottom: 2px darkgray dotted;
}
#kmw-preview-img-container.kmw-multitap-preview.multitap-clear {
#kmw-gesture-preview.kmw-multitap-preview.multitap-clear {
/* Because on some devices, 1px border may not equal 1px positioning!
* Use of full transparency removes the (visual) border but keeps
* altered positioning intact, avoiding any animation thereof.