fix(CreateChannelPopup): fixed emoji popup position

Also
* updated popup to derive from StatusDialog
* removed emojilists.js duplicated file

Closes #6729
Closes #6730
This commit is contained in:
Alexandra Betouni 2022-08-01 17:17:28 +03:00 committed by Alexandra Betouni
parent 6216a9536d
commit 714434e61b
4 changed files with 99 additions and 16994 deletions

@ -1 +1 @@
Subproject commit 9738890d9de4aaf9bc1bdcc3fb5435d1bdeb1e3d
Subproject commit 3ac0187923f07f1a2df40cf0a1360125ed80430d

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,8 @@
import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Dialogs 1.3
import QtQml.Models 2.14
import utils 1.0
import shared.panels 1.0
@ -11,9 +13,12 @@ import StatusQ.Controls 0.1
import StatusQ.Controls.Validators 0.1
import StatusQ.Components 0.1
import StatusQ.Popups 0.1
import StatusQ.Popups.Dialog 0.1
StatusModal {
id: popup
StatusDialog {
id: root
width: 480
height: 509
property bool isEdit: false
property string chatId: ""
@ -30,65 +35,59 @@ StatusModal {
readonly property int maxChannelNameLength: 24
readonly property int maxChannelDescLength: 140
signal createCommunityChannel(string chName, string chDescription, string chEmoji,
string chColor, string chCategoryId)
signal editCommunityChannel(string chName, string chDescription, string chEmoji, string chColor,
string chCategoryId)
signal createCommunityChannel(string chName, string chDescription, string chEmoji, string chColor, string chCategoryId)
signal editCommunityChannel(string chName, string chDescription, string chEmoji, string chColor, string chCategoryId)
header.title: qsTr("New channel")
title: qsTr("New channel")
onOpened: {
contentItem.channelName.input.text = ""
contentItem.channelName.input.icon.emoji = ""
contentItem.channelName.input.edit.forceActiveFocus(Qt.MouseFocusReason)
nameInput.text = ""
nameInput.input.icon.emoji = ""
nameInput.input.edit.forceActiveFocus(Qt.MouseFocusReason)
if (isEdit) {
header.title = qsTr("Edit #%1").arg(popup.channelName);
contentItem.channelName.input.text = popup.channelName
contentItem.channelDescription.input.text = popup.channelDescription
if (popup.channelEmoji) {
contentItem.channelName.input.icon.emoji = popup.channelEmoji
root.title = qsTr("Edit #%1").arg(root.channelName);
nameInput.text = root.channelName
descriptionTextArea.text = root.channelDescription
if (root.channelEmoji) {
nameInput.input.icon.emoji = root.channelEmoji
}
scrollView.channelColorDialog.color = popup.channelColor
colorDialog.color = root.channelColor
} else {
contentItem.channelName.input.icon.isLetterIdenticon = true;
nameInput.input.icon.isLetterIdenticon = true;
}
}
onClosed: destroy()
Connections {
enabled: popup.opened && popup.emojiPopupOpened
enabled: root.opened && root.emojiPopupOpened
target: emojiPopup
onEmojiSelected: function (emojiText, atCursor) {
contentItem.channelName.input.icon.isLetterIdenticon = false;
scrollView.channelName.input.icon.emoji = emojiText
nameInput.input.icon.isLetterIdenticon = false;
nameInput.input.icon.emoji = emojiText
}
onClosed: {
popup.emojiPopupOpened = false
root.emojiPopupOpened = false
}
}
function isFormValid() {
return (scrollView.channelName.valid &&
scrollView.channelDescription.valid) &&
Utils.validateAndReturnError(scrollView.channelColorDialog.color.toString().toUpperCase(),
return (nameInput.valid &&
descriptionTextArea.valid) &&
Utils.validateAndReturnError(colorDialog.color.toString().toUpperCase(),
communityColorValidator) === ""
}
contentItem: StatusScrollView {
StatusScrollView {
id: scrollView
property ScrollBar vScrollBar: ScrollBar.vertical
property alias channelName: nameInput
property alias channelDescription: descriptionTextArea
property alias channelColorDialog: colorDialog
width: root.width
height: Math.min(content.height, 432)
width: popup.width
leftPadding: 0
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
function scrollBackUp() {
@ -97,40 +96,36 @@ StatusModal {
Column {
id: content
width: popup.width
topPadding: 16
width: parent.width
StatusInput {
id: nameInput
input.edit.objectName: "createOrEditCommunityChannelNameInput"
anchors.left: parent.left
anchors.leftMargin: 16
label: qsTr("Channel name")
charLimit: popup.maxChannelNameLength
placeholderText: qsTr("Name the channel")
charLimit: root.maxChannelNameLength
placeholderText: qsTr("# Name the channel")
input.onTextChanged: {
input.text = Utils.convertSpacesToDashesAndUpperToLowerCase(input.text);
input.cursorPosition = input.text.length
if (popup.channelEmoji === "") {
if (root.channelEmoji === "") {
input.letterIconName = text;
}
}
input.icon.color: colorDialog.color.toString()
input.leftPadding: 16
rightPadding: 6
input.rightComponent: StatusRoundButton {
implicitWidth: 20
implicitHeight: 20
icon.width: implicitWidth
icon.height: implicitHeight
implicitWidth: 32
implicitHeight: 32
icon.width: 20
icon.height: 20
icon.name: "smiley"
onClicked: {
popup.emojiPopupOpened = true;
popup.emojiPopup.open();
popup.emojiPopup.emojiSize = StatusQUtils.Emoji.size.verySmall;
popup.emojiPopup.x = popup.width - 2*Style.current.xlPadding;
popup.emojiPopup.y = popup.y + nameInput.height + 2*Style.current.xlPadding;
root.emojiPopupOpened = true;
root.emojiPopup.open();
root.emojiPopup.emojiSize = StatusQUtils.Emoji.size.verySmall;
root.emojiPopup.x = root.x + (root.width - root.emojiPopup.width - Style.current.padding);
root.emojiPopup.y = root.y + root.header.height + root.topPadding + nameInput.height + Style.current.smallPadding;
}
}
validationMode: StatusInput.ValidationMode.Always
@ -152,8 +147,6 @@ StatusModal {
text: qsTr("Channel colour")
font.pixelSize: 15
color: Theme.palette.directColor1
anchors.left: parent.left
anchors.leftMargin: 16
}
Item {
@ -165,7 +158,7 @@ StatusModal {
Item {
anchors.horizontalCenter: parent.horizontalCenter
height: colorSelectorButton.height + 16
width: parent.width - 32
width: parent.width
StatusPickerButton {
id: colorSelectorButton
@ -191,8 +184,8 @@ StatusModal {
StatusColorDialog {
id: colorDialog
anchors.centerIn: parent
property bool colorSelected: popup.isEdit && popup.channelColor
color: popup.isEdit && popup.channelColor ? popup.channelColor :
property bool colorSelected: root.isEdit && root.channelColor
color: root.isEdit && root.channelColor ? root.channelColor :
Theme.palette.primaryColor1
onAccepted: colorSelected = true
}
@ -210,10 +203,7 @@ StatusModal {
StatusInput {
id: descriptionTextArea
input.edit.objectName: "createOrEditCommunityChannelDescriptionInput"
anchors.left: parent.left
anchors.leftMargin: 16
input.verticalAlignment: TextEdit.AlignTop
label: qsTr("Description")
charLimit: 140
@ -285,7 +275,8 @@ StatusModal {
}
}
rightButtons: [
footer: StatusDialogFooter {
rightButtons: ObjectModel {
StatusButton {
objectName: "createOrEditCommunityChannelBtn"
enabled: isFormValid()
@ -298,21 +289,21 @@ StatusModal {
return
}
let error = "";
let emoji = StatusQUtils.Emoji.deparseFromParse(popup.contentItem.channelName.input.icon.emoji)
let emoji = StatusQUtils.Emoji.deparseFromParse(nameInput.input.icon.emoji)
if (!isEdit) {
//popup.contentItem.communityColor.color.toString().toUpperCase()
popup.createCommunityChannel(Utils.filterXSS(popup.contentItem.channelName.input.text),
Utils.filterXSS(popup.contentItem.channelDescription.input.text),
//scrollView.communityColor.color.toString().toUpperCase()
root.createCommunityChannel(Utils.filterXSS(nameInput.input.text),
Utils.filterXSS(descriptionTextArea.text),
emoji,
popup.contentItem.channelColorDialog.color.toString().toUpperCase(),
popup.categoryId)
colorDialog.color.toString().toUpperCase(),
root.categoryId)
} else {
popup.editCommunityChannel(Utils.filterXSS(popup.contentItem.channelName.input.text),
Utils.filterXSS(popup.contentItem.channelDescription.input.text),
root.editCommunityChannel(Utils.filterXSS(nameInput.input.text),
Utils.filterXSS(descriptionTextArea.text),
emoji,
popup.contentItem.channelColorDialog.color.toString().toUpperCase(),
popup.categoryId)
colorDialog.color.toString().toUpperCase(),
root.categoryId)
}
if (error) {
@ -322,10 +313,11 @@ StatusModal {
}
// TODO Open the community once we have designs for it
popup.close()
root.close()
}
}
}
}
]
MessageDialog {
id: creatingError

View File

@ -88,7 +88,7 @@ Popup {
var categoryNames = {"recent": 0}
var newCategories = [[]]
EmojiJSON.emoji_json.forEach(function (emoji) {
StatusQUtils.Emoji.emojiJSON.emoji_json.forEach(function (emoji) {
if (!categoryNames[emoji.category] && categoryNames[emoji.category] !== 0) {
categoryNames[emoji.category] = newCategories.length
newCategories.push([])