status-desktop/ui/app/AppLayouts/Chat/popups/RenameGroupPopup.qml

154 lines
4.5 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtQml.Models 2.14
import shared.controls 1.0
import shared.panels 1.0
import utils 1.0
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Popups 0.1
import StatusQ.Popups.Dialog 0.1
StatusDialog {
id: root
property string activeGroupImageData
property string activeGroupColor
property string activeGroupName
signal updateGroupChatDetails(string groupName, string groupColor, string groupImage)
anchors.centerIn: parent
title: qsTr("Edit group name and image")
width: 480
height: 610
QtObject {
id: d
readonly property int nameCharLimit: 24
}
onOpened: {
groupName.forceActiveFocus(Qt.MouseFocusReason)
groupName.text = root.activeGroupName.substring(0, d.nameCharLimit)
colorSelectionGrid.selectedColor = activeGroupColor
for (let i = 0; i < colorSelectionGrid.model.length; i++) {
if(colorSelectionGrid.model[i] === root.activeGroupColor.toUpperCase())
colorSelectionGrid.selectedColorIndex = i
}
imageEditor.dataImage = activeGroupImageData
}
ColumnLayout {
anchors.fill: parent
spacing: 20
StatusInput {
id: groupName
Layout.alignment: Qt.AlignHCenter
label: qsTr("Name the group")
charLimit: d.nameCharLimit
}
StatusBaseText {
id: imgText
text: qsTr("Group image")
leftPadding: groupName.leftPadding - root.padding
font.pixelSize: 15
}
EditCroppedImagePanel {
id: imageEditor
Layout.preferredWidth: 128
Layout.preferredHeight: Layout.preferredWidth / aspectRatio
Layout.alignment: Qt.AlignHCenter
imageFileDialogTitle: qsTr("Choose an image as logo")
title: qsTr("Edit group name and image")
acceptButtonText: qsTr("Use as an icon for this group chat")
backgroundComponent:
StatusLetterIdenticon {
id: letter
color: colorSelectionGrid.selectedColor
name: root.activeGroupName
height: 100
width: 100
letterSize: 64
StatusRoundButton {
id: addButton
icon.name: "add"
type: StatusRoundButton.Type.Secondary
transform: [
Translate {
x: -addButton.width/2 - 5
y: -addButton.height/2 + 5
},
Rotation { angle: -addRotationTransform.angle },
Rotation {
id: addRotationTransform
angle: 135
origin.x: letter.radius
},
Translate {
x: letter.width - 2 * letter.radius
y: letter.radius
}
]
onClicked: imageEditor.chooseImageToCrop()
}
}
}
StatusBaseText {
id: colorText
text: qsTr("Standard colours")
leftPadding: groupName.leftPadding - root.padding
font.pixelSize: 15
}
StatusColorSelectorGrid {
id: colorSelectionGrid
Layout.alignment: Qt.AlignHCenter
diameter: 40
selectorDiameter: 16
columns: 6
selectedColorIndex: -1
}
Item {
id: spacerItem
height: 10
}
}
footer: StatusDialogFooter {
rightButtons: ObjectModel {
StatusButton {
id: saveBtn
text: qsTr("Save changes")
enabled: groupName.text.trim().length > 0 &&
((groupName.text != root.activeGroupName) ||
(root.activeGroupColor != colorSelectionGrid.selectedColor) ||
(String(imageEditor.source).length > 0))
onClicked : {
updateGroupChatDetails(groupName.text, colorSelectionGrid.selectedColor,
Utils.getImageAndCropInfoJson(imageEditor.source, imageEditor.cropRect))
}
}
}
}
}