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(EditCroppedImagePanel): update position following changes in StatusQ 

Also fixed suported images
This commit is contained in:
Stefan 2022-05-23 21:53:31 +03:00 committed by Stefan Dunca
parent 1bb19ba1de
commit 4b399d15e3
2 changed files with 42 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

@ -52,10 +52,9 @@ CTestTestfile.cmake
_deps _deps
.cache/ .cache/
# QtCreator shadow builds # QtCreator shadow builds (StatusQ/demo)
build-*/ build-*/
# CMake default build directory
# CMake builds
build/ build/
# https://github.com/github/gitignore/blob/master/C%2B%2B.gitignore # https://github.com/github/gitignore/blob/master/C%2B%2B.gitignore

62
ui/imports/shared/panels/EditCroppedImagePanel.qml
View File

@ -20,7 +20,7 @@ Item {
property alias source: bannerPreview.source property alias source: bannerPreview.source
property alias cropRect: bannerPreview.cropRect property alias cropRect: bannerPreview.cropRect
/*required*/ property alias aspectRatio: bannerPreview.aspectRatio /*required*/ property alias aspectRatio: bannerCropper.aspectRatio
property bool roundedImage: true property bool roundedImage: true
@ -58,6 +58,7 @@ Item {
readonly property string dataImageState: "dataImage" readonly property string dataImageState: "dataImage"
readonly property string noImageState: "noImage" readonly property string noImageState: "noImage"
readonly property string imageSelectedState: "imageSelected" readonly property string imageSelectedState: "imageSelected"
readonly property int buttonsInsideOffset: 5
} }
ColumnLayout { ColumnLayout {
@ -72,8 +73,6 @@ Item {
visible: !bannerEditor.visible visible: !bannerEditor.visible
StatusRoundedImage { StatusRoundedImage {
id: profilePic
anchors.fill: parent anchors.fill: parent
visible: root.state === d.dataImageState visible: root.state === d.dataImageState
@ -82,22 +81,18 @@ Item {
showLoadingIndicator: true showLoadingIndicator: true
border.width: 1 border.width: 1
border.color: Style.current.border border.color: Style.current.border
radius: root.roundedImage ? width/2 : bannerPreview.radius
} }
StatusImageCropPanel StatusImageCrop {
{
id: bannerPreview id: bannerPreview
anchors.fill: parent anchors.fill: parent
visible: root.state === d.imageSelectedState visible: root.state === d.imageSelectedState
windowStyle: bannerCropper.windowStyle
interactive: false
wallColor: Theme.palette.statusAppLayout.backgroundColor wallColor: Theme.palette.statusAppLayout.backgroundColor
wallTransparency: 1 wallTransparency: 1
margins: 0 clip:true
windowStyle: roundedImage ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
} }
StatusRoundButton { StatusRoundButton {
@ -105,14 +100,23 @@ Item {
icon.name: "edit" icon.name: "edit"
// bottom-right corner readonly property real rotationRadius: roundedImage ? parent.width/2 : bannerEditor.radius
x: root.userSelectedImage transform: [
? bannerPreview.cropWindow.x + bannerPreview.cropWindow.width - (roundedImage ? editButton.width : editButton.width/2 + bannerPreview.radius) Translate {
: parent.width - editButton.width x: -editButton.width/2 - d.buttonsInsideOffset
y: (root.userSelectedImage y: -editButton.height/2 - d.buttonsInsideOffset
? bannerPreview.cropWindow.y + bannerPreview.cropWindow.height - (roundedImage ? editButton.height + Style.current.smallPadding : editButton.height/2) },
: parent.width - editButton.height) - Style.current.smallPadding Rotation { angle: -editRotationTransform.angle },
Rotation {
id: editRotationTransform
angle: 225
origin.x: editButton.rotationRadius
},
Translate {
x: root.roundedImage ? 0 : editButton.parent.width - 2 * editButton.rotationRadius
y: (root.roundedImage ? 0 : editButton.parent.height - 2 * editButton.rotationRadius) + editButton.rotationRadius
}
]
type: StatusRoundButton.Type.Secondary type: StatusRoundButton.Type.Secondary
onClicked: bannerCropperModal.chooseImageToCrop() onClicked: bannerCropperModal.chooseImageToCrop()
@ -135,9 +139,23 @@ Item {
icon.name: "add" icon.name: "add"
// top-right corner readonly property real rotationRadius: root.roundedImage ? parent.width/2 : bannerEditor.radius
x: parent.width - (roundedImage ? editButton.width : editButton.width/2 + bannerEditor.radius) transform: [
y: roundedImage ? addButton.height/2 : -addButton.height/2 + bannerEditor.radius Translate {
x: -addButton.width/2 - d.buttonsInsideOffset
y: -addButton.height/2 + d.buttonsInsideOffset
},
Rotation { angle: -addRotationTransform.angle },
Rotation {
id: addRotationTransform
angle: 135
origin.x: addButton.rotationRadius
},
Translate {
x: root.roundedImage ? 0 : addButton.parent.width - 2 * addButton.rotationRadius
y: addButton.rotationRadius
}
]
type: StatusRoundButton.Type.Secondary type: StatusRoundButton.Type.Secondary