Merge pull request #15897 from zfox23/SUI/emoteAppPrototype

Implement DEV-218 & DEV-219 and commit a starting point for the Emote app

interface/resources/qml/InteractiveWindow.qml

@@ -31,6 +31,8 @@ Windows.Window {
     signal selfDestruct();
 
     property var flags: 0;
+    property var additionalFlags: 0;
+    property var overrideFlags: 0;
 
     property var source;
     property var dynamicContent;
@@ -153,10 +155,11 @@ Windows.Window {
             Qt.WindowMaximizeButtonHint |
             Qt.WindowMinimizeButtonHint;
         // only use the always on top feature for non Windows OS
-        if (Qt.platform.os !== "windows" && (flags & Desktop.ALWAYS_ON_TOP)) {
+        if (Qt.platform.os !== "windows" && (root.additionalFlags & Desktop.ALWAYS_ON_TOP)) {
             nativeWindowFlags |= Qt.WindowStaysOnTopHint;
         }
-        nativeWindow.flags = nativeWindowFlags;
+        root.flags = root.overrideFlags || nativeWindowFlags;
+        nativeWindow.flags = root.flags;
 
         nativeWindow.x = interactiveWindowPosition.x;
         nativeWindow.y = interactiveWindowPosition.y;
@@ -225,10 +228,41 @@ Windows.Window {
     // Handle message traffic from our loaded QML to the script that launched us
     signal sendToScript(var message);
 
+    // Children of this InteractiveWindow Item are able to request a new width and height
+    // for the parent Item (this one) and its associated C++ InteractiveWindow using these methods.
+    function onRequestNewWidth(newWidth) {
+        interactiveWindowSize.width = newWidth;
+        updateInteractiveWindowSizeForMode();
+    }
+    function onRequestNewHeight(newWidth) {
+        interactiveWindowSize.width = newWidth;
+        updateInteractiveWindowSizeForMode();
+    }
+    
+    // These signals are used to forward key-related events from the QML to the C++.
+    signal keyPressEvent(int key, int modifiers);
+    signal keyReleaseEvent(int key, int modifiers);
+
     onDynamicContentChanged: {
         if (dynamicContent && dynamicContent.sendToScript) {
             dynamicContent.sendToScript.connect(sendToScript);
         }
+
+        if (dynamicContent && dynamicContent.requestNewWidth) {
+            dynamicContent.requestNewWidth.connect(onRequestNewWidth);
+        }
+
+        if (dynamicContent && dynamicContent.requestNewHeight) {
+            dynamicContent.requestNewHeight.connect(onRequestNewHeight);
+        }
+
+        if (dynamicContent && dynamicContent.keyPressEvent) {
+            dynamicContent.keyPressEvent.connect(keyPressEvent);
+        }
+
+        if (dynamicContent && dynamicContent.keyReleaseEvent) {
+            dynamicContent.keyReleaseEvent.connect(keyReleaseEvent);
+        }
     }
 
     onInteractiveWindowVisibleChanged: {
@@ -283,7 +317,7 @@ Windows.Window {
         // set invisible on close, to make it not re-appear unintended after switching PresentationMode
         interactiveWindowVisible = false;
 
-        if ((flags & Desktop.CLOSE_BUTTON_HIDES) !== Desktop.CLOSE_BUTTON_HIDES) {
+        if ((root.flags & Desktop.CLOSE_BUTTON_HIDES) !== Desktop.CLOSE_BUTTON_HIDES) {
             selfDestruct();
         }
     }

interface/resources/qml/hifi/simplifiedUI/emoteApp/bar/EmoteAppBar.qml

@@ -0,0 +1,101 @@
+//
+//  EmoteAppBar.qml
+//
+//  Created by Zach Fox on 2019-07-08
+//  Copyright 2019 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import "../../simplifiedConstants" as SimplifiedConstants
+import "../../simplifiedControls" as SimplifiedControls
+import stylesUit 1.0 as HifiStylesUit
+import TabletScriptingInterface 1.0
+
+Rectangle {
+    id: root
+    color: simplifiedUI.colors.white
+    anchors.fill: parent
+
+    property int originalWidth: 48
+    property int hoveredWidth: 480
+    property int requestedWidth
+
+    onRequestedWidthChanged: {
+        root.requestNewWidth(root.requestedWidth);
+    }
+
+    Behavior on requestedWidth {
+        enabled: true
+        SmoothedAnimation { duration: 220 }
+    }
+
+    SimplifiedConstants.SimplifiedConstants {
+        id: simplifiedUI
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: enabled
+        onEntered: {
+            Tablet.playSound(TabletEnums.ButtonHover);
+            root.requestedWidth = root.hoveredWidth;
+        }
+        onExited: {
+            Tablet.playSound(TabletEnums.ButtonClick);
+            root.requestedWidth = root.originalWidth;
+        }
+    }
+
+    Rectangle {
+        id: mainEmojiContainer
+        z: 2
+        color: simplifiedUI.colors.darkBackground
+        anchors.top: parent.top
+        anchors.left: parent.left
+        height: parent.height
+        width: root.originalWidth
+
+        HifiStylesUit.GraphikRegular {
+            text: "😊"
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenterOffset: -2
+            anchors.verticalCenterOffset: -2
+            horizontalAlignment: Text.AlignHCenter
+            size: 26
+            color: simplifiedUI.colors.text.almostWhite
+        }
+    }
+
+    Rectangle {
+        id: drawerContainer
+        z: 1
+        color: simplifiedUI.colors.white
+        anchors.top: parent.top
+        anchors.right: parent.right
+        height: parent.height
+        width: root.hoveredWidth
+
+        HifiStylesUit.GraphikRegular {
+            text: "Emotes go here."
+            anchors.fill: parent
+            horizontalAlignment: Text.AlignHCenter
+            size: 20
+            color: simplifiedUI.colors.text.black
+        }
+    }
+
+    function fromScript(message) {
+        switch (message.method) {
+            default:
+                console.log('EmoteAppBar.qml: Unrecognized message from JS');
+                break;
+        }
+    }
+    signal sendToScript(var message);
+    signal requestNewWidth(int newWidth);
+}

interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml

@@ -18,6 +18,7 @@ QtObject {
             readonly property color white: "#FFFFFF"
             readonly property color lightBlue: "#00B4EF"
             readonly property color lightBlueHover: "#3dcfff"
+            readonly property color black: "#000000"
         }
 
         readonly property QtObject controls: QtObject {

interface/src/ui/InteractiveWindow.cpp

@@ -32,7 +32,8 @@
 
 static auto CONTENT_WINDOW_QML = QUrl("InteractiveWindow.qml");
 
-static const char* const FLAGS_PROPERTY = "flags";
+static const char* const ADDITIONAL_FLAGS_PROPERTY = "additionalFlags";
+static const char* const OVERRIDE_FLAGS_PROPERTY = "overrideFlags";
 static const char* const SOURCE_PROPERTY = "source";
 static const char* const TITLE_PROPERTY = "title";
 static const char* const POSITION_PROPERTY = "position";
@@ -92,8 +93,12 @@ void InteractiveWindow::forwardKeyReleaseEvent(int key, int modifiers) {
  * @property {InteractiveWindow.PresentationWindowInfo} [presentationWindowInfo] - Controls how a <code>NATIVE</code> window is 
  *     displayed. If used, the window is docked to the specified edge of the Interface window, otherwise the window is 
  *     displayed as its own separate window.
- * @property {InteractiveWindow.Flags} [flags=0] - Window behavior flags, set at window creation. Possible flag values are 
+ * @property {InteractiveWindow.AdditionalFlags} [additionalFlags=0] - Window behavior flags in addition to "native window flags" (minimize/maximize/close),
- *     provided as {@link Desktop|Desktop.ALWAYS_ON_TOP} and {@link Desktop|Desktop.CLOSE_BUTTON_HIDES}.
+ *     set at window creation. Possible flag values are provided as {@link Desktop|Desktop.ALWAYS_ON_TOP} and {@link Desktop|Desktop.CLOSE_BUTTON_HIDES}.
+ *     Additional flag values can be found on Qt's website at https://doc.qt.io/qt-5/qt.html#WindowType-enum.
+ * @property {InteractiveWindow.OverrideFlags} [overrideFlags=0] - Window behavior flags instead of the default window flags.
+ *     Set at window creation. Possible flag values are provided as {@link Desktop|Desktop.ALWAYS_ON_TOP} and {@link Desktop|Desktop.CLOSE_BUTTON_HIDES}.
+ *     Additional flag values can be found on Qt's website at https://doc.qt.io/qt-5/qt.html#WindowType-enum.
  */
 InteractiveWindow::InteractiveWindow(const QString& sourceUrl, const QVariantMap& properties) {
     InteractiveWindowPresentationMode presentationMode = InteractiveWindowPresentationMode::Native;
@@ -179,8 +184,11 @@ InteractiveWindow::InteractiveWindow(const QString& sourceUrl, const QVariantMap
         offscreenUi->loadInNewContext(CONTENT_WINDOW_QML, [&](QQmlContext* context, QObject* object) {
             _qmlWindow = object;
             context->setContextProperty(EVENT_BRIDGE_PROPERTY, this);
-            if (properties.contains(FLAGS_PROPERTY)) {
+            if (properties.contains(ADDITIONAL_FLAGS_PROPERTY)) {
-                object->setProperty(FLAGS_PROPERTY, properties[FLAGS_PROPERTY].toUInt());
+                object->setProperty(ADDITIONAL_FLAGS_PROPERTY, properties[ADDITIONAL_FLAGS_PROPERTY].toUInt());
+            }
+            if (properties.contains(OVERRIDE_FLAGS_PROPERTY)) {
+                object->setProperty(OVERRIDE_FLAGS_PROPERTY, properties[OVERRIDE_FLAGS_PROPERTY].toUInt());
             }
             if (properties.contains(PRESENTATION_MODE_PROPERTY)) {
                 object->setProperty(PRESENTATION_MODE_PROPERTY, properties[PRESENTATION_MODE_PROPERTY].toInt());
@@ -201,6 +209,10 @@ InteractiveWindow::InteractiveWindow(const QString& sourceUrl, const QVariantMap
             }
 
             connect(object, SIGNAL(sendToScript(QVariant)), this, SLOT(qmlToScript(const QVariant&)), Qt::QueuedConnection);
+            QObject::connect(object, SIGNAL(keyPressEvent(int, int)), this, SLOT(forwardKeyPressEvent(int, int)),
+                             Qt::QueuedConnection);
+            QObject::connect(object, SIGNAL(keyReleaseEvent(int, int)), this, SLOT(forwardKeyReleaseEvent(int, int)),
+                             Qt::QueuedConnection);
             connect(object, SIGNAL(interactiveWindowPositionChanged()), this, SIGNAL(positionChanged()), Qt::QueuedConnection);
             connect(object, SIGNAL(interactiveWindowSizeChanged()), this, SIGNAL(sizeChanged()), Qt::QueuedConnection);
             connect(object, SIGNAL(interactiveWindowVisibleChanged()), this, SIGNAL(visibleChanged()), Qt::QueuedConnection);

scripts/developer/tests/interactiveWindowTest.js

@@ -19,7 +19,7 @@ function getPreferredTitle() {
 
 var virtualWindow = Desktop.createWindow(Script.resourcesPath() + 'qml/OverlayWindowTest.qml', {
     title: getPreferredTitle(),
-    flags: Desktop.ALWAYS_ON_TOP,
+    additionalFlags: Desktop.ALWAYS_ON_TOP,
     presentationMode: getPreferredPresentationMode(),
     size: {x: 500, y: 400}
 });

scripts/developer/utilities/render/engineProfiler.js

@@ -36,7 +36,7 @@
             var qml = Script.resolvePath(QMLAPP_URL);
             window = Desktop.createWindow(Script.resolvePath(QMLAPP_URL), {
                 title: 'Render Engine Profiler',
-                flags: Desktop.ALWAYS_ON_TOP,
+                additionalFlags: Desktop.ALWAYS_ON_TOP,
                 presentationMode: Desktop.PresentationMode.NATIVE,
                 size: {x: 500, y: 100}
             });

scripts/developer/utilities/render/lod.js

@@ -52,7 +52,7 @@
         var qml = Script.resolvePath(QMLAPP_URL);
         window = Desktop.createWindow(Script.resolvePath(QMLAPP_URL), {
             title: TABLET_BUTTON_NAME,
-            flags: Desktop.ALWAYS_ON_TOP,
+            additionalFlags: Desktop.ALWAYS_ON_TOP,
             presentationMode: Desktop.PresentationMode.NATIVE,
             size: {x: 400, y: 600}
         });

scripts/developer/utilities/workload/avatars.js

@@ -52,7 +52,7 @@
         var qml = Script.resolvePath(QMLAPP_URL);
         window = Desktop.createWindow(Script.resolvePath(QMLAPP_URL), {
             title: TABLET_BUTTON_NAME,
-            flags: Desktop.ALWAYS_ON_TOP,
+            additionalFlags: Desktop.ALWAYS_ON_TOP,
             presentationMode: Desktop.PresentationMode.NATIVE,
             size: {x: 400, y: 600}
         });

scripts/developer/utilities/workload/workload.js

@@ -52,7 +52,7 @@
         var qml = Script.resolvePath(QMLAPP_URL);
         window = Desktop.createWindow(Script.resolvePath(QMLAPP_URL), {
             title: 'Workload Inspector',
-            flags: Desktop.ALWAYS_ON_TOP,
+            additionalFlags: Desktop.ALWAYS_ON_TOP,
             presentationMode: Desktop.PresentationMode.NATIVE,
             size: {x: 400, y: 600}
         });

scripts/simplifiedUI/system/create/modules/createWindow.js

@@ -93,7 +93,7 @@ module.exports = (function() {
             var windowRect = getWindowRect(this.settingsKey, defaultRect);
             this.window = Desktop.createWindow(this.qmlPath, {
                 title: this.title,
-                flags: Desktop.ALWAYS_ON_TOP | Desktop.CLOSE_BUTTON_HIDES,
+                additionalFlags: Desktop.ALWAYS_ON_TOP | Desktop.CLOSE_BUTTON_HIDES,
                 presentationMode: Desktop.PresentationMode.NATIVE,
                 size: windowRect.size,
                 visible: true,

scripts/simplifiedUI/ui/simplifiedUI.js

@@ -15,6 +15,7 @@
 
 // START CONFIG OPTIONS
 var DOCKED_QML_SUPPORTED = true;
+var SHOW_PROTOTYPE_EMOTE_APP = false;
 var TOOLBAR_NAME = "com.highfidelity.interface.toolbar.system";
 var DEFAULT_SCRIPTS_PATH_PREFIX = ScriptDiscoveryService.defaultScriptsPath + "/";
 // END CONFIG OPTIONS
@@ -101,6 +102,12 @@ var AVATAR_APP_HEIGHT_PX = 615;
 var avatarAppWindow = false;
 var POPOUT_SAFE_MARGIN_X = 30;
 var POPOUT_SAFE_MARGIN_Y = 30;
+var AVATAR_APP_WINDOW_FLAGS = 0x00000001 | // Qt::Window
+    0x00001000 | // Qt::WindowTitleHint
+    0x00002000 | // Qt::WindowSystemMenuHint
+    0x08000000 | // Qt::WindowCloseButtonHint
+    0x00008000 | // Qt::WindowMaximizeButtonHint
+    0x00004000; // Qt::WindowMinimizeButtonHint
 function toggleAvatarApp() {
     if (avatarAppWindow) {
         avatarAppWindow.close();
@@ -121,7 +128,8 @@ function toggleAvatarApp() {
         position: {
             x: Math.max(Window.x + POPOUT_SAFE_MARGIN_X, Window.x + Window.innerWidth / 2 - AVATAR_APP_WIDTH_PX / 2),
             y: Math.max(Window.y + POPOUT_SAFE_MARGIN_Y, Window.y + Window.innerHeight / 2 - AVATAR_APP_HEIGHT_PX / 2)
-        }
+        },
+        overrideFlags: AVATAR_APP_WINDOW_FLAGS
     });
 
     avatarAppWindow.fromQml.connect(onMessageFromAvatarApp);
@@ -166,6 +174,12 @@ var SETTINGS_APP_WINDOW_TITLE = "Settings";
 var SETTINGS_APP_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE;
 var SETTINGS_APP_WIDTH_PX = 480;
 var SETTINGS_APP_HEIGHT_PX = 615;
+var SETTINGS_APP_WINDOW_FLAGS = 0x00000001 | // Qt::Window
+    0x00001000 | // Qt::WindowTitleHint
+    0x00002000 | // Qt::WindowSystemMenuHint
+    0x08000000 | // Qt::WindowCloseButtonHint
+    0x00008000 | // Qt::WindowMaximizeButtonHint
+    0x00004000; // Qt::WindowMinimizeButtonHint
 var settingsAppWindow = false;
 function toggleSettingsApp() {
     if (settingsAppWindow) {
@@ -187,13 +201,81 @@ function toggleSettingsApp() {
         position: {
             x: Math.max(Window.x + POPOUT_SAFE_MARGIN_X, Window.x + Window.innerWidth / 2 - SETTINGS_APP_WIDTH_PX / 2),
             y: Math.max(Window.y + POPOUT_SAFE_MARGIN_Y, Window.y + Window.innerHeight / 2 - SETTINGS_APP_HEIGHT_PX / 2)
-        }
+        },
+        overrideFlags: SETTINGS_APP_WINDOW_FLAGS
     });
 
     settingsAppWindow.fromQml.connect(onMessageFromSettingsApp);
     settingsAppWindow.closed.connect(onSettingsAppClosed);
 }
 
+function updateEmoteAppBarPosition() {
+    if (!emoteAppBarWindow) {
+        return;
+    }
+
+    emoteAppBarWindow.position = {
+        x: Window.x + EMOTE_APP_BAR_LEFT_MARGIN,
+        y: Window.y + Window.innerHeight - EMOTE_APP_BAR_BOTTOM_MARGIN
+    };
+}
+
+
+var EMOTE_APP_BAR_MESSAGE_SOURCE = "EmoteAppBar.qml";
+function onMessageFromEmoteAppBar(message) {
+    if (message.source !== EMOTE_APP_BAR_MESSAGE_SOURCE) {
+        return;
+    }
+
+    switch (message.method) {
+            
+        default:
+            console.log("Unrecognized message from " + EMOTE_APP_BAR_MESSAGE_SOURCE + ": " + JSON.stringify(message));
+            break;
+    }
+}
+
+
+function onEmoteAppBarClosed() {
+    if (emoteAppBarWindow) {
+        emoteAppBarWindow.fromQml.disconnect(onMessageFromEmoteAppBar);
+        emoteAppBarWindow.closed.disconnect(onEmoteAppClosed);
+    }
+    emoteAppBarWindow = false;
+}
+
+
+var EMOTE_APP_BAR_QML_PATH = Script.resourcesPath() + "qml/hifi/simplifiedUI/emoteApp/bar/EmoteAppBar.qml";
+var EMOTE_APP_BAR_WINDOW_TITLE = "Emote";
+var EMOTE_APP_BAR_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE;
+var EMOTE_APP_BAR_WIDTH_PX = 48;
+var EMOTE_APP_BAR_HEIGHT_PX = 48;
+var EMOTE_APP_BAR_LEFT_MARGIN = 48;
+var EMOTE_APP_BAR_BOTTOM_MARGIN = 48;
+var EMOTE_APP_BAR_WINDOW_FLAGS = 0x00000001 | // Qt::Window
+    0x00000800 | // Qt::FramelessWindowHint
+    0x40000000 | // Qt::NoDropShadowWindowHint
+    0x00200000; // Qt::WindowDoesNotAcceptFocus
+var emoteAppBarWindow = false;
+function showEmoteAppBar() {
+    emoteAppBarWindow = Desktop.createWindow(EMOTE_APP_BAR_QML_PATH, {
+        title: EMOTE_APP_BAR_WINDOW_TITLE,
+        presentationMode: EMOTE_APP_BAR_PRESENTATION_MODE,
+        size: {
+            x: EMOTE_APP_BAR_WIDTH_PX,
+            y: EMOTE_APP_BAR_HEIGHT_PX
+        },
+        position: {
+            x: Window.x + EMOTE_APP_BAR_LEFT_MARGIN,
+            y: Window.y + Window.innerHeight - EMOTE_APP_BAR_BOTTOM_MARGIN
+        },
+        overrideFlags: EMOTE_APP_BAR_WINDOW_FLAGS
+    });
+
+    emoteAppBarWindow.fromQml.connect(onMessageFromEmoteAppBar);
+    emoteAppBarWindow.closed.connect(onEmoteAppBarClosed);
+}
+
 
 function maybeDeleteOutputDeviceMutedOverlay() {
     if (outputDeviceMutedOverlay) {
@@ -455,6 +537,8 @@ function onGeometryChanged(rect) {
             "y": rect.y
         };
     }
+
+    updateEmoteAppBarPosition();
 }
 
 function onDisplayModeChanged(isHMDMode) {
@@ -547,6 +631,10 @@ function startup() {
     AvatarInputs.showAudioTools = false;
     oldShowBubbleTools = AvatarInputs.showBubbleTools;
     AvatarInputs.showBubbleTools = false;
+
+    if (SHOW_PROTOTYPE_EMOTE_APP) {
+        showEmoteAppBar();
+    }
 }
 
 
@@ -586,6 +674,10 @@ function shutdown() {
         settingsAppWindow.close();
     }
 
+    if (emoteAppBarWindow) {
+        emoteAppBarWindow.close();
+    }
+
     maybeDeleteInputDeviceMutedOverlay();
     maybeDeleteOutputDeviceMutedOverlay();
 

scripts/system/create/edit.js

@@ -848,7 +848,7 @@ var toolBar = (function () {
                     var DIALOG_WINDOW_SIZE = { x: 500, y: 300 };
                     dialogWindow = Desktop.createWindow(qmlPath, {
                         title: "New " + entityType + " Entity",
-                        flags: Desktop.ALWAYS_ON_TOP | Desktop.CLOSE_BUTTON_HIDES,
+                        additionalFlags: Desktop.ALWAYS_ON_TOP | Desktop.CLOSE_BUTTON_HIDES,
                         presentationMode: Desktop.PresentationMode.NATIVE,
                         size: DIALOG_WINDOW_SIZE,
                         visible: true

scripts/system/create/modules/createWindow.js

@@ -93,7 +93,7 @@ module.exports = (function() {
             var windowRect = getWindowRect(this.settingsKey, defaultRect);
             this.window = Desktop.createWindow(this.qmlPath, {
                 title: this.title,
-                flags: Desktop.ALWAYS_ON_TOP | Desktop.CLOSE_BUTTON_HIDES,
+                additionalFlags: Desktop.ALWAYS_ON_TOP | Desktop.CLOSE_BUTTON_HIDES,
                 presentationMode: Desktop.PresentationMode.NATIVE,
                 size: windowRect.size,
                 visible: true,