From 3766ca8660b7aab594159e3449f926fd052f6d2d Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Wed, 21 Aug 2019 11:05:55 -0700 Subject: [PATCH] Add help/attributions popup to emoji popup window --- .../emojiApp/ui/qml/SimplifiedEmoji.qml | 167 +++++++++++++++++- 1 file changed, 164 insertions(+), 3 deletions(-) diff --git a/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml b/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml index 6d79245a5f..3f4d151a81 100644 --- a/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml +++ b/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml @@ -77,6 +77,139 @@ Rectangle { root.currentCode = filteredModel.get(0).code.utf; } + Rectangle { + id: popupContainer + z: 999 + visible: false + color: Qt.rgba(0, 0, 0, 0.8) + anchors.fill: parent + + MouseArea { + hoverEnabled: false + anchors.fill: parent + onClicked: { + popupContainer.visible = false; + } + } + + MouseArea { + hoverEnabled: false + anchors.fill: popupContentContainer + propagateComposedEvents: false + } + + Rectangle { + id: popupContentContainer + color: simplifiedUI.colors.darkBackground + anchors.centerIn: parent + width: 300 + height: 500 + + Item { + id: closeButtonContainer + anchors.top: parent.top + anchors.right: parent.right + width: 50 + height: width + + HifiStylesUit.GraphikSemiBold { + text: "X" + anchors.fill: parent + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + color: simplifiedUI.colors.text.darkGrey + opacity: closeButtonMouseArea.containsMouse ? 1.0 : 0.8 + size: 22 + } + + MouseArea { + id: closeButtonMouseArea + hoverEnabled: true + anchors.fill: parent + onClicked: { + popupContainer.visible = false; + } + } + } + + HifiStylesUit.GraphikSemiBold { + id: popupHeader1 + text: "Emoji Reactions" + anchors.top: parent.top + anchors.topMargin: 10 + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.right: parent.right + anchors.rightMargin: 16 + width: paintedWidth + height: 24 + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignTop + color: simplifiedUI.colors.text.white + size: 22 + } + + HifiStylesUit.GraphikRegular { + id: popupText1 + text: "Click an emoji and it will appear above your head!\nUse Emoji Reactions to express yourself without saying a word.\n\n" + + "Try using the search bar to search for an emoji directly. You can use your arrow keys to navigate the results." + anchors.top: popupHeader1.bottom + anchors.topMargin: 16 + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.right: parent.right + anchors.rightMargin: 16 + height: paintedHeight + wrapMode: Text.Wrap + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignTop + color: simplifiedUI.colors.text.white + size: 18 + } + + HifiStylesUit.GraphikSemiBold { + id: popupHeader2 + text: "Attributions" + anchors.top: popupText1.bottom + anchors.topMargin: 16 + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.right: parent.right + anchors.rightMargin: 16 + height: 24 + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignTop + color: simplifiedUI.colors.text.white + size: 22 + } + + HifiStylesUit.GraphikRegular { + id: popupText2 + textFormat: Text.RichText + text: "" + + "Emoji Reaction images are Twemojis " + + "and are © 2019 Twitter, Inc and other contributors.\n" + + "Graphics are licensed under CC-BY 4.0." + anchors.top: popupHeader2.bottom + anchors.topMargin: 16 + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.right: parent.right + anchors.rightMargin: 16 + height: paintedHeight + wrapMode: Text.Wrap + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignTop + color: simplifiedUI.colors.text.white + size: 18 + + onLinkActivated: { + Qt.openUrlExternally(link); + } + } + } + } + Rectangle { id: emojiIndicatorContainer anchors.top: parent.top @@ -149,7 +282,7 @@ Rectangle { anchors.top: emojiIndicatorContainer.bottom anchors.left: parent.left anchors.right: parent.right - anchors.bottom: emojiSearchContainer.top + anchors.bottom: bottomContainer.top clip: true color: simplifiedUI.colors.darkBackground @@ -224,7 +357,7 @@ Rectangle { Item { - id: emojiSearchContainer + id: bottomContainer anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom @@ -236,9 +369,10 @@ Rectangle { maximumLength: 100 clip: true selectByMouse: true + autoScroll: true anchors.left: parent.left anchors.leftMargin: 16 - anchors.right: parent.right + anchors.right: helpGlyphContainer.left anchors.rightMargin: 16 anchors.verticalCenter: parent.verticalCenter onTextChanged: { @@ -273,6 +407,33 @@ Rectangle { root.filterEmoji(emojiSearchTextField.text); } } + + Item { + id: helpGlyphContainer + anchors.right: parent.right + anchors.rightMargin: 8 + width: height + height: parent.height + + HifiStylesUit.GraphikRegular { + text: "?" + anchors.fill: parent + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + color: simplifiedUI.colors.text.darkGrey + opacity: attributionMouseArea.containsMouse ? 1.0 : 0.8 + size: 22 + } + + MouseArea { + id: attributionMouseArea + hoverEnabled: enabled + anchors.fill: parent + onClicked: { + popupContainer.visible = true; + } + } + } } function filterEmoji(filterText) {