Merge pull request #16035 from MiladNazeri/emojiAppAdd

Using my superpowers to get this in the build.

interface/resources/qml/hifi/simplifiedUI/avatarApp/components/DisplayNameHeader.qml

@@ -91,6 +91,7 @@ Item {
 
             SimplifiedControls.TextField {
                 id: myDisplayNameText
+                rightGlyph: simplifiedUI.glyphs.pencil
                 text: MyAvatar.displayName
                 maximumLength: 256
                 clip: true

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

@@ -1,101 +0,0 @@
-//
-//  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/settingsApp/SettingsApp.qml

@@ -148,6 +148,7 @@ Rectangle {
         }
     }
 
+
     Item {
         id: tabViewContainers
         anchors.top: tabContainer.bottom
@@ -155,7 +156,6 @@ Rectangle {
         anchors.right: parent.right
         anchors.bottom: parent.bottom
 
-
         GeneralSettings.General {
             id: generalTabViewContainer
             visible: activeTabView === "generalTabView"
@@ -163,8 +163,10 @@ Rectangle {
             onSendNameTagInfo: {
                 sendToScript(message);
             }
+            onSendEmoteVisible: {
+                sendToScript(message);
+            }
         }
-        
 
         AudioSettings.Audio {
             id: audioTabViewContainer

interface/resources/qml/hifi/simplifiedUI/settingsApp/general/General.qml

@@ -112,6 +112,49 @@ Flickable {
             }
         }
 
+        ColumnLayout {
+            id: emoteContainer
+            Layout.preferredWidth: parent.width
+            spacing: 0
+
+            HifiStylesUit.GraphikSemiBold {
+                    id: emoteTitle
+                    text: "Emote UI"
+                    Layout.maximumWidth: parent.width
+                    height: paintedHeight
+                    size: 22
+                    color: simplifiedUI.colors.text.white
+                }
+
+            ColumnLayout {
+                id: emoteSwitchGroup
+                Layout.preferredWidth: parent.width
+                Layout.topMargin: simplifiedUI.margins.settings.settingsGroupTopMargin
+
+                SimplifiedControls.Switch {
+                    id: emoteSwitch
+                    Layout.preferredHeight: 18
+                    Layout.preferredWidth: parent.width
+                    labelTextOn: "Show Emote UI"
+                    checked: Settings.getValue("simplifiedUI/emoteIndicatorVisible", true)
+                    onClicked: {
+                        var currentSetting = Settings.getValue("simplifiedUI/emoteIndicatorVisible", true);
+                        Settings.setValue("simplifiedUI/emoteIndicatorVisible", !currentSetting);
+                    }                    
+
+                    Connections {
+                        target: Settings
+
+                        onValueChanged: {
+                            if (setting === "simplifiedUI/emoteIndicatorVisible") {
+                                emoteSwitch.checked = value;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
         ColumnLayout {
             id: performanceContainer
             Layout.preferredWidth: parent.width
@@ -197,7 +240,7 @@ Flickable {
                     }
                 }
                 
-              Connections {
+                Connections {
                     target: Camera
 
                     onModeUpdated: {
@@ -207,7 +250,7 @@ Flickable {
                             thirdPerson.checked = true
                         }
                     }
-              }
+                }
             }
         }
 
@@ -248,4 +291,5 @@ Flickable {
     }
 
     signal sendNameTagInfo(var message);
+    signal sendEmoteVisible(var message);
 }

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

@@ -230,7 +230,7 @@ QtObject {
                 readonly property int textSize: 14
             }
             readonly property QtObject textField: QtObject {
-                readonly property int editPencilPadding: 6
+                readonly property int rightGlyphPadding: 6
             }
             readonly property QtObject scrollBar: QtObject {
                 readonly property int backgroundWidth: 9

interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/qmldir

@@ -0,0 +1,2 @@
+module hifi.simplifiedUI.simplifiedConstants
+SimplifiedConstants 1.0 SimplifiedConstants.qml

interface/resources/qml/hifi/simplifiedUI/simplifiedControls/ProgressCircle.qml

@@ -0,0 +1,97 @@
+// From http://www.bytebau.com/progress-circle-with-qml-and-javascript/
+// ByteBau (Jörn Buchholz) @bytebau.com
+
+import QtQuick 2.0
+import QtQml 2.2
+
+Item {
+    id: root
+
+    width: size
+    height: size
+
+    property int size: 200               // The size of the circle in pixel
+    property real arcBegin: 0            // start arc angle in degree
+    property real arcEnd: 360            // end arc angle in degree
+    property real arcOffset: 0           // rotation
+    property bool isPie: false           // paint a pie instead of an arc
+    property bool showBackground: false  // a full circle as a background of the arc
+    property real lineWidth: 20          // width of the line
+    property string colorCircle: "#CC3333"
+    property string colorBackground: "#779933"
+
+    property alias beginAnimation: animationArcBegin.enabled
+    property alias endAnimation: animationArcEnd.enabled
+
+    property int animationDuration: 200
+
+    onArcBeginChanged: canvas.requestPaint()
+    onArcEndChanged: canvas.requestPaint()
+
+    Behavior on arcBegin {
+       id: animationArcBegin
+       enabled: true
+       NumberAnimation {
+           duration: root.animationDuration
+           easing.type: Easing.InOutCubic
+       }
+    }
+
+    Behavior on arcEnd {
+       id: animationArcEnd
+       enabled: true
+       NumberAnimation {
+           duration: root.animationDuration
+           easing.type: Easing.OutQuad
+       }
+    }
+
+    Canvas {
+        id: canvas
+        anchors.fill: parent
+        rotation: -90 + parent.arcOffset
+
+        onPaint: {
+            var ctx = getContext("2d")
+            var x = width / 2
+            var y = height / 2
+            var start = Math.PI * (parent.arcBegin / 180)
+            var end = Math.PI * (parent.arcEnd / 180)
+            ctx.reset()
+
+            if (root.isPie) {
+                if (root.showBackground) {
+                    ctx.beginPath()
+                    ctx.fillStyle = root.colorBackground
+                    ctx.moveTo(x, y)
+                    ctx.arc(x, y, width / 2, 0, Math.PI * 2, false)
+                    ctx.lineTo(x, y)
+                    ctx.fill()
+                }
+                ctx.beginPath()
+                ctx.fillStyle = root.colorCircle
+                ctx.moveTo(x, y)
+                // Using `width` instead of `width/2` as the argument here ensures
+                // that the ProgressCircle mask will cover the entirety of non-circular emoji.
+                ctx.arc(x, y, width, start, end, false)
+                ctx.lineTo(x, y)
+                ctx.fill()
+            } else {
+                if (root.showBackground) {
+                    ctx.beginPath();
+                    ctx.arc(x, y, (width / 2) - parent.lineWidth / 2, 0, Math.PI * 2, false)
+                    ctx.lineWidth = root.lineWidth
+                    ctx.strokeStyle = root.colorBackground
+                    ctx.stroke()
+                }
+                ctx.beginPath();
+                ctx.arc(x, y, (width / 2) - parent.lineWidth / 2, start, end, false)
+                ctx.lineWidth = root.lineWidth
+                ctx.strokeStyle = root.colorCircle
+                ctx.stroke()
+            }
+
+            ctx.scale(0.1, 0.2);
+        }
+    }
+}

interface/resources/qml/hifi/simplifiedUI/simplifiedControls/TextField.qml

@@ -21,6 +21,8 @@ TextField {
         id: simplifiedUI
     }
 
+    property string rightGlyph: ""
+
     color: simplifiedUI.colors.text.white
     font.family: "Graphik Medium"
     font.pixelSize: 22
@@ -31,7 +33,7 @@ TextField {
     autoScroll: false
     hoverEnabled: true
     leftPadding: 0
-    rightPadding: editPencil.implicitWidth + simplifiedUI.sizes.controls.textField.editPencilPadding
+    rightPadding: root.rightGlyph === "" ? 0 : rightGlyphItem.implicitWidth + simplifiedUI.sizes.controls.textField.rightGlyphPadding
 
     onFocusChanged: {
         if (focus) {
@@ -59,8 +61,9 @@ TextField {
         }
 
         HifiStylesUit.HiFiGlyphs {
-            id: editPencil
-            text: simplifiedUI.glyphs.pencil
+            id: rightGlyphItem
+            text: root.rightGlyph
+            visible: rightGlyphItem.text !== ""
             // Text Size
             size: root.font.pixelSize * 1.5
             // Anchors

interface/resources/qml/hifi/simplifiedUI/simplifiedControls/qmldir

@@ -0,0 +1,10 @@
+module hifi.simplifiedUI.simplifiedControls
+Button 1.0 Button.qml
+CheckBox 1.0 CheckBox.qml
+InputPeak 1.0 InputPeak.qml
+ProgressCircle 1.0 ProgressCircle.qml
+RadioButton 1.0 RadioButton.qml
+Slider 1.0 Slider.qml
+Switch 1.0 Switch.qml
+TextField 1.0 TextField.qml
+VerticalScrollBar 1.0 VerticalScrollBar.qml

interface/src/scripting/SettingsScriptingInterface.cpp

@@ -35,8 +35,12 @@ QVariant SettingsScriptingInterface::getValue(const QString& setting, const QVar
 }
 
 void SettingsScriptingInterface::setValue(const QString& setting, const QVariant& value) {
+    if (getValue(setting) == value) {
+        return;
+    }
     // Make a deep-copy of the string.
     // Dangling pointers can occur with QStrings that are implicitly shared from a QScriptEngine.
     QString deepCopy = QString::fromUtf16(setting.utf16());
     Setting::Handle<QVariant>(deepCopy).set(value);
+    emit valueChanged(setting, value);
 }

interface/src/scripting/SettingsScriptingInterface.h

@@ -64,6 +64,9 @@ public slots:
      * print("Value: " + (typeof value) + " " + JSON.stringify(value));  // object {"x":0,"y":10,"z":0}
      */
     void setValue(const QString& setting, const QVariant& value);
+
+signals:
+    void valueChanged(const QString& setting, const QVariant& value);
 };
 
 #endif // hifi_SettingsScriptingInterface_h

interface/src/scripting/WindowScriptingInterface.cpp

@@ -56,6 +56,7 @@ WindowScriptingInterface::WindowScriptingInterface() {
     });
 
     connect(qApp->getWindow(), &MainWindow::windowGeometryChanged, this, &WindowScriptingInterface::onWindowGeometryChanged);
+    connect(qApp->getWindow(), &MainWindow::windowMinimizedChanged, this, &WindowScriptingInterface::minimizedChanged);
     connect(qApp, &Application::interstitialModeChanged, [this] (bool interstitialMode) {
         emit interstitialModeChanged(interstitialMode);
     });

interface/src/scripting/WindowScriptingInterface.h

@@ -814,6 +814,17 @@ signals:
      */
     void geometryChanged(QRect geometry);
 
+
+    /**jsdoc
+     * Triggered when "minimized" state of the Interface window changes.
+     * @function Window.minimizedChanged
+     * @param {bool} isMinimized - true if the Interface window is now minimized; false otherwise.
+     * @returns {Signal}
+     *
+     * Window.minimizedChanged.connect(onWindowMinimizedChanged);
+     */
+    void minimizedChanged(bool isMinimized);
+
 private:
     QString getPreviousBrowseLocation() const;
     void setPreviousBrowseLocation(const QString& location);

interface/src/ui/InteractiveWindow.cpp

@@ -109,6 +109,10 @@ void InteractiveWindow::forwardKeyReleaseEvent(int key, int modifiers) {
     QCoreApplication::postEvent(QCoreApplication::instance(), event);
 }
 
+void InteractiveWindow::emitMainWindowResizeEvent() {
+    emit qApp->getWindow()->windowGeometryChanged(qApp->getWindow()->geometry());
+}
+
 /**jsdoc
  * A set of properties used when creating an <code>InteractiveWindow</code>.
  * @typedef {object} InteractiveWindow.Properties
@@ -215,10 +219,11 @@ InteractiveWindow::InteractiveWindow(const QString& sourceUrl, const QVariantMap
                                  Qt::QueuedConnection);
                 QObject::connect(rootItem, SIGNAL(keyReleaseEvent(int, int)), this, SLOT(forwardKeyReleaseEvent(int, int)),
                                  Qt::QueuedConnection);
-                emit mainWindow->windowGeometryChanged(qApp->getWindow()->geometry());
             }
         });
 
+        QObject::connect(_dockWidget.get(), SIGNAL(onResizeEvent()), this, SLOT(emitMainWindowResizeEvent()));
+
         _dockWidget->setSource(QUrl(sourceUrl));
         mainWindow->addDockWidget(dockArea, _dockWidget.get());
     } else {
@@ -296,7 +301,9 @@ void InteractiveWindow::sendToQml(const QVariant& message) {
             QMetaObject::invokeMethod(rootItem, "fromScript", Qt::QueuedConnection, Q_ARG(QVariant, message));
         }
     } else {
-        QMetaObject::invokeMethod(_qmlWindowProxy->getQmlWindow(), "fromScript", Qt::QueuedConnection, Q_ARG(QVariant, message));
+        if (_qmlWindowProxy) {
+            QMetaObject::invokeMethod(_qmlWindowProxy->getQmlWindow(), "fromScript", Qt::QueuedConnection, Q_ARG(QVariant, message));
+        }
     }
 }
 

interface/src/ui/InteractiveWindow.h

@@ -319,6 +319,7 @@ protected slots:
 
     void forwardKeyPressEvent(int key, int modifiers);
     void forwardKeyReleaseEvent(int key, int modifiers);
+    void emitMainWindowResizeEvent();
 
 private:
     std::shared_ptr<QmlWindowProxy> _qmlWindowProxy;

libraries/ui/src/DockWidget.cpp

@@ -47,3 +47,10 @@ QQuickItem* DockWidget::getRootItem() const {
 std::shared_ptr<QQuickView> DockWidget::getQuickView() const {
     return _quickView;
 }
+
+void DockWidget::resizeEvent(QResizeEvent* event) {
+    // This signal is currently handled in `InteractiveWindow.cpp`. There, it's used to
+    // emit a `windowGeometryChanged()` signal, which is handled by scripts
+    // that need to know when to change the position of their overlay UI elements.
+    emit onResizeEvent();
+}

libraries/ui/src/DockWidget.h

@@ -19,6 +19,7 @@
 class QQuickView;
 class QQuickItem;
 class DockWidget : public QDockWidget {
+Q_OBJECT
 public:
     DockWidget(const QString& title, QWidget* parent = nullptr);
     ~DockWidget() = default;
@@ -26,6 +27,13 @@ public:
     void setSource(const QUrl& url);
     QQuickItem* getRootItem() const;
     std::shared_ptr<QQuickView> getQuickView() const;
+
+signals:
+    void onResizeEvent();
+
+protected:
+    void resizeEvent(QResizeEvent* event) override;
+
 private:
     std::shared_ptr<QQuickView> _quickView;
 };