status-desktop/ui/imports/shared/popups/RenameGroupPopup.qml

157 lines
4.7 KiB
QML
Raw Normal View History

2020-06-17 19:18:31 +00:00
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
objectName: "groupChatEdit_main"
2020-06-15 12:51:04 +00:00
property string activeGroupImageData
property string activeGroupColor
property string activeGroupName
signal updateGroupChatDetails(string groupName, string groupColor, string groupImage)
title: qsTr("Edit group name and image")
width: 480
height: 610
QtObject {
id: d
readonly property int nameCharLimit: 24
}
2020-06-15 12:51:04 +00:00
onOpened: {
2022-09-27 21:26:26 +00:00
groupName.input.edit.forceActiveFocus()
groupName.text = root.activeGroupName.substring(0, d.nameCharLimit)
2020-06-15 12:51:04 +00:00
colorSelectionGrid.selectedColor = activeGroupColor
2020-06-15 12:51:04 +00:00
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
input.edit.objectName: "groupChatEdit_name"
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
objectName: "groupChatEdit_image"
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
objectName: "groupChatEdit_color"
Layout.alignment: Qt.AlignHCenter
diameter: 40
selectorDiameter: 16
columns: 6
selectedColorIndex: -1
}
Item {
id: spacerItem
height: 10
}
}
footer: StatusDialogFooter {
rightButtons: ObjectModel {
StatusButton {
id: saveBtn
objectName: "groupChatEdit_save"
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))
}
}
}
}
2020-06-15 12:51:04 +00:00
}