From 1b22d3ae19ca52da14e907bb8923cfd6ea395908 Mon Sep 17 00:00:00 2001
From: jahorton <jahorton@sil.org>
Date: Tue, 11 Feb 2020 15:14:20 +0700
Subject: [PATCH 1/3] feat(web): restyles prediction banner

---
 web/source/osk/banner.ts            | 15 +++++++++++++--
 web/source/resources/osk/kmwosk.css | 29 +++++++++++++----------------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/web/source/osk/banner.ts b/web/source/osk/banner.ts
index 835e665a5f..97b6fa87f8 100644
--- a/web/source/osk/banner.ts
+++ b/web/source/osk/banner.ts
@@ -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);
diff --git a/web/source/resources/osk/kmwosk.css b/web/source/resources/osk/kmwosk.css
index bc36d94fa0..e3e5bace39 100644
--- a/web/source/resources/osk/kmwosk.css
+++ b/web/source/resources/osk/kmwosk.css
@@ -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 {
@@ -108,10 +109,9 @@
   .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 +147,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 +219,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 +268,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;

From 9374ff92febe59490f638c3057d1195639de47af Mon Sep 17 00:00:00 2001
From: jahorton <jahorton@sil.org>
Date: Thu, 13 Feb 2020 10:35:43 +0700
Subject: [PATCH 2/3] change(web): embedded iOS banner spacing

---
 web/source/resources/osk/kmwosk.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/source/resources/osk/kmwosk.css b/web/source/resources/osk/kmwosk.css
index e3e5bace39..407df68dc8 100644
--- a/web/source/resources/osk/kmwosk.css
+++ b/web/source/resources/osk/kmwosk.css
@@ -104,6 +104,10 @@
   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 {

From 954a6aaabde34813673e7754baf5439d84c3b085 Mon Sep 17 00:00:00 2001
From: jahorton <jahorton@sil.org>
Date: Fri, 14 Feb 2020 08:16:50 +0700
Subject: [PATCH 3/3] chore(web): history.md - also for android, ios

---
 android/history.md | 4 ++++
 ios/history.md     | 3 +++
 web/history.md     | 4 ++++
 3 files changed, 11 insertions(+)

diff --git a/android/history.md b/android/history.md
index 56e2d724a9..9293dee678 100644
--- a/android/history.md
+++ b/android/history.md
@@ -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
diff --git a/ios/history.md b/ios/history.md
index 8e6d920d84..9388e471d3 100644
--- a/ios/history.md
+++ b/ios/history.md
@@ -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)
 
diff --git a/web/history.md b/web/history.md
index 2db5a554e1..0629219aeb 100644
--- a/web/history.md
+++ b/web/history.md
@@ -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)