4684 Add collapse button on the virtual keyboard

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

@@ -5,6 +5,8 @@ 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?
@@ -105,14 +107,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 {
@@ -112,8 +113,6 @@ Rectangle {
     }
 
     Rectangle {
-        y: 0
-        x: 0
         height: showMirrorText ? mirrorTextHeight : 0
         width: keyboardWidth
         color: "#252525"
@@ -122,13 +121,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
+            horizontalAlignment: Text.AlignLeft
-            color: "#FFFFFF";
+            color: "#00B4EF";
-            anchors.fill: parent
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            anchors.right: lowerKeyboard.left
+            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 +144,107 @@ 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
+                anchors.fill: parent
+            }
         }
 
-        MouseArea { // ... and we need this mouse area to prevent mirrorText from getting mouse events to ensure it will never get focus
+        Item {
-            anchors.fill: parent
+            id: lowerKeyboard
+            anchors.right: parent.right
+            anchors.rightMargin: keyboardRect.width - (key_Backspace.x + key_Backspace.width + key_Backspace.contentPadding)
+            width: key_Backspace.width * 2
+            height: parent.height
+
+            Rectangle {
+                id: roundedRect
+                color: "#121212"
+                radius: 6
+                border.color: "#00000000"
+                anchors.fill: parent
+                anchors.margins: 4
+
+                MouseArea {
+                    id: mouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+
+                    onClicked: {
+                        webEntity.lowerKeyboard();
+                    }
+
+                    onEntered: {
+                        roundedRect.state = "mouseOver";
+                    }
+
+                    onExited: {
+                        roundedRect.state = "";
+                    }
+
+                    onPressed: {
+                        roundedRect.state = "mouseClicked";
+                    }
+
+                    onReleased: {
+                        if (containsMouse) {
+                            roundedRect.state = "mouseOver";
+                        } else {
+                            roundedRect.state = "";
+                        }
+                    }
+                }
+
+                states: [
+                    State {
+                        name: "mouseOver"
+                        PropertyChanges {
+                            target: roundedRect
+                            color: "#121212"
+                            border.width: 2
+                            border.color: "#00b4ef"
+                        }
+                    },
+                    State {
+                        name: "mouseClicked"
+                        PropertyChanges {
+                            target: roundedRect
+                            border.width: 2
+                            border.color: "#00b4ef"
+                        }
+                        PropertyChanges {
+                            target: colorOverlay
+                            color: '#00B4EF'
+                        }
+                    },
+                    State {
+                        name: "mouseDepressed"
+                        PropertyChanges {
+                            target: roundedRect
+                            color: "#0578b1"
+                            border.width: 0
+                        }
+                    }
+                ]
+
+                Image {
+                    id: buttonImage
+                    anchors.centerIn: parent
+                    source: "../../images/lowerKeyboard.png" // "file:///D:/AI/hifi-elderorb-vs2/interface/resources/images/lowerKeyboard.png";
+                }
+
+                ColorOverlay {
+                    id: colorOverlay
+                    anchors.fill: buttonImage
+                    source: buttonImage
+                    color: 'white'
+                }
+            }
         }
     }
 
     Rectangle {
         id: keyboardRect
-        x: 0
         y: showMirrorText ? mirrorTextHeight : 0
         width: keyboardWidth
         height: raisedHeight
@@ -180,7 +275,7 @@ Rectangle {
                 Key { width: 43; glyph: "i"; }
                 Key { width: 43; glyph: "o"; }
                 Key { width: 43; glyph: "p"; }
-                Key { width: 43; glyph: "←"; }
+                Key { width: 43; glyph: "←"; id: key_Backspace }
             }
 
             Row {

libraries/ui/src/ui/OffscreenQmlSurface.cpp

@@ -1082,7 +1082,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

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