Merge pull request #11794 from ElderOrb/FB4684_3

4684 Add collapse button on the virtual keyboard

interface/resources/qml/controls-uit/Key.qml

@@ -5,10 +5,16 @@ Item {
     id: keyItem
     width: 45
     height: 50
+
+    property int contentPadding: 4
     property string glyph: "a"
     property bool toggle: false   // does this button have the toggle behaivor?
     property bool toggled: false  // is this button currently toggled?
     property alias mouseArea: mouseArea1
+    property alias fontFamily: letter.font.family;
+    property alias fontPixelSize: letter.font.pixelSize
+    property alias verticalAlignment: letter.verticalAlignment
+    property alias letterAnchors: letter.anchors
 
     function resetToggledMode(mode) {
         toggled = mode;
@@ -105,14 +111,8 @@ Item {
         color: "#121212"
         radius: 2
         border.color: "#00000000"
-        anchors.right: parent.right
+        anchors.fill: parent
-        anchors.rightMargin: 4
+        anchors.margins: contentPadding
-        anchors.left: parent.left
-        anchors.leftMargin: 4
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 4
-        anchors.top: parent.top
-        anchors.topMargin: 4
     }
 
     Text {

interface/resources/qml/controls-uit/Keyboard.qml

@@ -8,7 +8,8 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
-import QtQuick 2.0
+import QtQuick 2.7
+import QtGraphicalEffects 1.0
 import "."
 
 Rectangle {
@@ -55,6 +56,8 @@ Rectangle {
             return ">";
         } else if (str === "/") {
             return "?";
+        } else if (str === "-") {
+            return "_";
         } else {
             return str.toUpperCase(str);
         }
@@ -67,6 +70,8 @@ Rectangle {
             return ".";
         } else if (str === "?") {
             return "/";
+        } else if (str === "_") {
+            return "-";
         } else {
             return str.toLowerCase(str);
         }
@@ -85,7 +90,7 @@ Rectangle {
 
     onShiftModeChanged: {
         forEachKey(function (key) {
-            if (/[a-z]/i.test(key.glyph)) {
+            if (/[a-z-_]/i.test(key.glyph)) {
                 if (shiftMode) {
                     key.glyph = keyboardBase.toUpper(key.glyph);
                 } else {
@@ -112,8 +117,6 @@ Rectangle {
     }
 
     Rectangle {
-        y: 0
-        x: 0
         height: showMirrorText ? mirrorTextHeight : 0
         width: keyboardWidth
         color: "#252525"
@@ -122,13 +125,18 @@ Rectangle {
         TextInput {
             id: mirrorText
             visible: showMirrorText
-            FontLoader { id: ralewaySemiBold; source: "../../fonts/Raleway-SemiBold.ttf"; }
+            FontLoader { id: font; source: "../../fonts/FiraSans-Regular.ttf"; }
-            font.family: ralewaySemiBold.name
+            font.family: font.name
-            font.pointSize: 13.5
+            font.pixelSize: 20
             verticalAlignment: Text.AlignVCenter
             horizontalAlignment: Text.AlignHCenter
-            color: "#FFFFFF";
+            color: "#00B4EF";
-            anchors.fill: parent
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+
             wrapMode: Text.WordWrap
             readOnly: false // we need this to allow control to accept QKeyEvent
             selectByMouse: false
@@ -140,16 +148,15 @@ Rectangle {
                     event.accepted = true;
                 }
             }
-        }
 
-        MouseArea { // ... and we need this mouse area to prevent mirrorText from getting mouse events to ensure it will never get focus
+            MouseArea { // ... and we need this mouse area to prevent mirrorText from getting mouse events to ensure it will never get focus
-            anchors.fill: parent
+                anchors.fill: parent
+            }
         }
     }
 
     Rectangle {
         id: keyboardRect
-        x: 0
         y: showMirrorText ? mirrorTextHeight : 0
         width: keyboardWidth
         height: raisedHeight
@@ -158,6 +165,8 @@ Rectangle {
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 0
 
+        FontLoader { id: hiFiGlyphs; source: pathToFonts + "fonts/hifi-glyphs.ttf"; }
+
         Column {
             id: columnAlpha
             width: keyboardWidth
@@ -221,7 +230,7 @@ Rectangle {
                 Key { width: 43; glyph: "b"; }
                 Key { width: 43; glyph: "n"; }
                 Key { width: 43; glyph: "m"; }
-                Key { width: 43; glyph: "_"; }
+                Key { width: 43; glyph: "-"; }
                 Key { width: 43; glyph: "/"; }
                 Key { width: 43; glyph: "?"; }
             }
@@ -240,8 +249,13 @@ Rectangle {
                 Key { width: 231; glyph: " "; }
                 Key { width: 43; glyph: ","; }
                 Key { width: 43; glyph: "."; }
-                Key { width: 43; glyph: "\u276C"; }
+                Key {
-                Key { width: 43; glyph: "\u276D"; }
+                    fontFamily: hiFiGlyphs.name;
+                    fontPixelSize: 48;
+                    letterAnchors.topMargin: -4;
+                    verticalAlignment: Text.AlignVCenter;
+                    width: 86; glyph: "\ue02b";
+                }
             }
         }
 
@@ -328,8 +342,13 @@ Rectangle {
                 Key { width: 231; glyph: " "; }
                 Key { width: 43; glyph: ","; }
                 Key { width: 43; glyph: "."; }
-                Key { width: 43; glyph: "\u276C"; }
+                Key {
-                Key { width: 43; glyph: "\u276D"; }
+                    fontFamily: hiFiGlyphs.name;
+                    fontPixelSize: 48;
+                    letterAnchors.topMargin: -4;
+                    verticalAlignment: Text.AlignVCenter;
+                    width: 86; glyph: "\ue02b";
+                }
             }
         }
     }

interface/resources/qml/controls/FlickableWebViewCore.qml

@@ -27,6 +27,12 @@ Item {
         id: hifi
     }
 
+    function unfocus() {
+        webViewCore.runJavaScript("if (document.activeElement) document.activeElement.blur();", function(result) {
+            console.log('unfocus completed: ', result);
+        });
+    }
+
     function onLoadingChanged(loadRequest) {
         if (WebEngineView.LoadStartedStatus === loadRequest.status) {
 

interface/resources/qml/controls/TabletWebScreen.qml

@@ -10,6 +10,11 @@ Item {
     property alias urlTag: webroot.urlTag
     property bool keyboardEnabled: true  // FIXME - Keyboard HMD only: Default to false
     property bool keyboardRaised: false
+    onKeyboardRaisedChanged: {
+        if(!keyboardRaised) {
+            webroot.unfocus();
+        }
+    }
     property bool punctuationMode: false
 
     // FIXME - Keyboard HMD only: Make Interface either set keyboardRaised property directly in OffscreenQmlSurface

interface/resources/qml/controls/TabletWebView.qml

@@ -15,6 +15,11 @@ Item {
     property string scriptURL
     property bool keyboardEnabled: false
     property bool keyboardRaised: false
+    onKeyboardRaisedChanged: {
+        if(!keyboardRaised) {
+            webroot.unfocus();
+        }
+    }
     property bool punctuationMode: false
     property bool passwordField: false
     property bool isDesktop: false

interface/resources/qml/controls/WebView.qml

@@ -12,6 +12,11 @@ Item {
     property alias urlTag: webroot.urlTag
     property bool keyboardEnabled: true  // FIXME - Keyboard HMD only: Default to false
     property bool keyboardRaised: false
+    onKeyboardRaisedChanged: {
+        if(!keyboardRaised) {
+            webroot.unfocus();
+        }
+    }
     property bool punctuationMode: false
     property bool passwordField: false
     property alias flickable: webroot.interactive

interface/resources/qml/hifi/dialogs/TabletRunningScripts.qml

@@ -32,6 +32,8 @@ Rectangle {
 
     color: hifi.colors.baseGray
 
+    property bool keyboardEnabled: HMD.active
+    property bool keyboardRaised: false
 
     LetterboxMessage {
         id: letterBoxMessage
@@ -380,7 +382,7 @@ Rectangle {
                     Component.onCompleted: scriptsModel.filterRegExp = new RegExp("^.*$", "i")
                     onActiveFocusChanged: {
                         // raise the keyboard
-                        keyboard.raised = activeFocus;
+                        root.keyboardRaised = activeFocus;
 
                         // scroll to the bottom of the content area.
                         if (activeFocus) {
@@ -481,7 +483,7 @@ Rectangle {
 
     HifiControls.Keyboard {
         id: keyboard
-        raised: false
+        raised: parent.keyboardEnabled && parent.keyboardRaised
         numeric: false
         anchors {
             bottom: parent.bottom

interface/resources/qml/hifi/tablet/TabletAddressDialog.qml

@@ -366,7 +366,7 @@ StackView {
 
         HifiControls.Keyboard {
             id: keyboard
-            raised: parent.keyboardEnabled
+            raised: parent.keyboardEnabled && parent.keyboardRaised
             numeric: parent.punctuationMode
             anchors {
                 bottom: parent.bottom

libraries/ui/src/ui/OffscreenQmlSurface.cpp

@@ -1038,6 +1038,7 @@ static const uint8_t BACKSPACE_SYMBOL[] = { 0xE2, 0x86, 0x90, 0x00 };
 static const uint8_t LEFT_ARROW[] = { 0xE2, 0x9D, 0xAC, 0x00 };
 static const uint8_t RIGHT_ARROW[] = { 0xE2, 0x9D, 0xAD, 0x00 };
 static const uint8_t RETURN_SYMBOL[] = { 0xE2, 0x8F, 0x8E, 0x00 };
+static const uint8_t COLLAPSE_KEYBOARD[] = { 0xEE, 0x80, 0xAB, 0x00 };
 static const char PUNCTUATION_STRING[] = "123";
 static const char ALPHABET_STRING[] = "abc";
 
@@ -1061,6 +1062,9 @@ void OffscreenQmlSurface::synthesizeKeyPress(QString key, QObject* targetOverrid
         if (equals(utf8Key, SHIFT_ARROW) || equals(utf8Key, NUMERIC_SHIFT_ARROW) ||
             equals(utf8Key, (uint8_t*)PUNCTUATION_STRING) || equals(utf8Key, (uint8_t*)ALPHABET_STRING)) {
             return;  // ignore
+        } else if (equals(utf8Key, COLLAPSE_KEYBOARD)) {
+            lowerKeyboard();
+            return;
         } else if (equals(utf8Key, BACKSPACE_SYMBOL)) {
             scanCode = Qt::Key_Backspace;
             keyString = "\x08";
@@ -1082,7 +1086,19 @@ void OffscreenQmlSurface::synthesizeKeyPress(QString key, QObject* targetOverrid
     }
 }
 
+void OffscreenQmlSurface::lowerKeyboard() {
+
+    QSignalBlocker blocker(_quickWindow);
+
+    if (_currentFocusItem) {
+        _currentFocusItem->setFocus(false);
+        setKeyboardRaised(_currentFocusItem, false);
+    }
+}
+
 void OffscreenQmlSurface::setKeyboardRaised(QObject* object, bool raised, bool numeric, bool passwordField) {
+    qCDebug(uiLogging) << "setKeyboardRaised: " << object << ", raised: " << raised << ", numeric: " << numeric << ", password: " << passwordField;
+
 #if Q_OS_ANDROID
     return;
 #endif
@@ -1117,6 +1133,10 @@ void OffscreenQmlSurface::setKeyboardRaised(QObject* object, bool raised, bool n
                     item->setProperty("passwordField", QVariant(passwordField));
                 }
 
+                if (raised) {
+                    item->setProperty("keyboardRaised", QVariant(!raised));
+                }
+
                 item->setProperty("keyboardRaised", QVariant(raised));
                 return;
             }

libraries/ui/src/ui/OffscreenQmlSurface.h

@@ -84,6 +84,7 @@ public:
 
     void setKeyboardRaised(QObject* object, bool raised, bool numeric = false, bool passwordField = false);
     Q_INVOKABLE void synthesizeKeyPress(QString key, QObject* targetOverride = nullptr);
+    Q_INVOKABLE void lowerKeyboard();
 
     using TextureAndFence = std::pair<uint32_t, void*>;
     // Checks to see if a new texture is available.  If one is, the function returns true and