status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/StatusQ

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

16887
ui/app/AppLayouts/Chat/helpers/emojiList.js
View File

File diff suppressed because it is too large Load Diff

202
ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml
View File

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

2
ui/imports/shared/status/StatusEmojiPopup.qml
View File

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