erabo/spiegel-keyman
1
0
Fork 0
mirror of https://github.com/keymanapp/keyman.git synced 2026-10-06 14:07:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 11

Merge pull request #2629 from keymanapp/feat/web/2522-suggestion-restyle

Browse source 
feat(web): restyles prediction banner
This commit is contained in:
Joshua Horton 2020-02-14 08:47:04 +07:00 • committed by GitHub
commit ba976eb4e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 41 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
android/history.md
View file

@ -1,5 +1,9 @@
# Keyman for Android Version History
## 2020-02-14 13.0.6059 beta
* Change:
* Restyles the suggestion banner for predictions (#2629)
## 2020-02-13 13.0.6058 beta
* Change:
* Update rest of Android apps' dependency to `androidx.appcompat:appcompat:1.2.0-alpha02` to

3
ios/history.md
View file

@ -1,5 +1,8 @@
# Keyman for iPhone and iPad Version History
## 2020-02-14 13.0.70 beta
* Change: restyles suggestion banner to more closely match the iOS system default (#2629)
## 2020-02-12 13.0.68 beta
* Bug fix: fixed keyboard display logic when sharing with other apps (#2631)

4
web/history.md
View file

@ -1,5 +1,9 @@
# KeymanWeb Version History
## 2020-02-14 13.0.39 beta
* Bug fix: spurious console warnings generated for desktop-based keyboards used in touch mode (#2647)
* Change: Updated predictive-text banner styling (#2629)
## 2020-02-13 13.0.38 beta
* Bug fix: language menu not positioned correctly for touch-based devices (#2642)

15
web/source/osk/banner.ts
View file

@ -211,11 +211,10 @@ namespace com.keyman.osk {
}
// Ensures that a reasonable width % is set.
let usableWidth = 100 - SuggestionBanner.MARGIN * (SuggestionBanner.SUGGESTION_LIMIT + 1);
let usableWidth = 100 - SuggestionBanner.MARGIN * (SuggestionBanner.SUGGESTION_LIMIT - 1);
let widthpc = usableWidth / SuggestionBanner.SUGGESTION_LIMIT;
ds.width = widthpc + '%';
ds.marginLeft = SuggestionBanner.MARGIN + '%';
this.div['suggestion'] = this;
}
@ -374,6 +373,18 @@ namespace com.keyman.osk {
for (var i=0; i<SuggestionBanner.SUGGESTION_LIMIT; i++) {
let indexToInsert = rtl ? SuggestionBanner.SUGGESTION_LIMIT - i -1 : i;
this.getDiv().appendChild(this.options[indexToInsert].div);
if(i != SuggestionBanner.SUGGESTION_LIMIT) {
// Adds a 'separator' div element for UI purposes.
let separatorDiv = com.keyman.singleton.util._CreateElement('div');
separatorDiv.className = 'kmw-banner-separator';
let ds = separatorDiv.style;
ds.marginLeft = (SuggestionBanner.MARGIN / 2) + '%';
ds.marginRight = (SuggestionBanner.MARGIN / 2) + '%';
this.getDiv().appendChild(separatorDiv);
}
}
this.manager = new SuggestionManager(this.getDiv(), this.options);

33
web/source/resources/osk/kmwosk.css
View file

@ -84,12 +84,13 @@
}
.ios .kmw-banner-bar .kmw-suggest-option {
background-color: #fdfdfe;
display:inline-block;
text-align: center;
border-radius: 5px;
border-bottom: solid 1px #8a8d90;
vertical-align: top;
vertical-align: middle;
}
.ios .kmw-banner-bar .kmw-banner-separator {
border-left: solid 1px #b2b9c5;
}
.ios .kmw-suggestion-text {
@ -103,15 +104,18 @@
background-color: #cfd3d9;
}
.kmw-embedded .ios .kmw-banner-bar {
top: 10px;
}
/* Probably best to make this its own CSS that can be optionally included? */
@media (prefers-color-scheme: dark) {
.ios .kmw-banner-bar {
background-color: #0f1319;
}
.ios .kmw-banner-bar .kmw-suggest-option {
background-color: #3d3d3e;
border-bottom: solid 1px #8a8d90;
.ios .kmw-banner-bar .kmw-banner-separator {
border-left: solid 1px #8a8d90
}
.ios .kmw-suggestion-text {
@ -147,11 +151,9 @@
}
.phone.android .kmw-banner-bar .kmw-suggest-option {
background-color: #333;
display:inline-block;
text-align: center;
border-radius: 5px;
vertical-align: top;
vertical-align: middle;
}
.phone.android .kmw-suggestion-text {
@ -221,11 +223,9 @@
}
.tablet.android .kmw-banner-bar .kmw-suggest-option {
background-color: #b4b4b8;
display:inline-block;
text-align: center;
border-radius: 5px;
vertical-align: top;
vertical-align: middle;
}
.tablet.android .kmw-suggestion-text {
@ -272,8 +272,9 @@
.kmw-title-bar-actions{position: absolute; cursor: default; right:2px; top:0; width: 33px; height: 13px;}
.kmw-footer-caption{color:#fff;font:0.7em Arial;margin:0 0 0 4px;}
.kmw-banner-bar{height:100%; width:100%; margin:0; background-color:darkorange; display: inline-block;}
.kmw-banner-bar .kmw-suggest-option {background-color: orange; display:inline-block; text-align: center; height: 85%; border-radius: 5px;overflow-x:scroll}
.kmw-banner-bar{height:100%; width:100%; margin:0; background-color:darkorange; display: inline-block; white-space: nowrap;}
.kmw-banner-bar .kmw-banner-separator {border-left: solid 1px #8a8d90; width: 0px; vertical-align: middle; height: 45%; display: inline-block;}
.kmw-banner-bar .kmw-suggest-option {display:inline-block; text-align: center; height: 85%; overflow-x:hidden}
.kmw-suggestion-text{color:#fff; line-height: normal; position: relative; vertical-align: middle;}
.kmw-footer-resize{cursor:se-resize;position:absolute;right:2px;bottom:2px;width:16px;height:16px;overflow:hidden;