lilith/jami-client-qt
1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-04-21 21:52:03 +02:00
Code Activity

Photobooth: new design

Browse source 
GitLab: #1417
Change-Id: Idf7f2ce5eb79ff378f41071e6c319faef2f27fc5
This commit is contained in:
cberthet 2023-11-07 15:11:27 -05:00 • committed by Sébastien Blin
parent 3344fbaf9d
commit 48cfd8e29f
9 changed files with 129 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
resources/icons/add_a_photo_black_24dp.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="add_a_photo_black_24dp" opacity="1">
<path id="Path_248" data-name="Path 248" d="M0,0H24V24H0Z" fill="none"/>
<path id="Path_249" data-name="Path 249" d="M21,6H17.83L16,4H10V6h5.12l1.83,2H21V20H5V11H3v9a2.006,2.006,0,0,0,2,2H21a2.006,2.006,0,0,0,2-2V8A2.006,2.006,0,0,0,21,6ZM8,14a5,5,0,1,0,5-5A5,5,0,0,0,8,14Zm5-3a3,3,0,1,1-3,3A3.009,3.009,0,0,1,13,11ZM5,6H8V4H5V1H3V4H0V6H3V9H5Z" fill="black"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 512 B

4
resources/icons/add_photo_alternate_black_24dp.svg Normal file
View file

@ -0,0 +1,4 @@
<svg id="add_photo_alternate_black_24dp" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path id="Path_250" data-name="Path 250" d="M0,0H24V24H0Z" fill="none"/>
<path id="Path_251" data-name="Path 251" d="M18,20H4V6h9V4H4A2.006,2.006,0,0,0,2,6V20a2.006,2.006,0,0,0,2,2H18a2.006,2.006,0,0,0,2-2V11H18Zm-7.79-3.17L8.25,14.47,5.5,18h11l-3.54-4.71ZM20,4V1H18V4H15c.01.01,0,2,0,2h3V8.99c.01.01,2,0,2,0V6h3V4Z" fill="#fff"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 462 B

6
resources/icons/remove_circle_outline_black_24dp.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="remove_circle_outline_black_24dp" opacity="1">
<path id="Path_252" data-name="Path 252" d="M0,0H24V24H0Z" fill="none"/>
<path id="Path_253" data-name="Path 253" d="M7,11v2H17V11Zm5-9A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8.011,8.011,0,0,1,12,20Z" fill="black"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 394 B

64
src/app/commoncomponents/PhotoboothPopup.qml
View file

@ -34,13 +34,14 @@ BaseModalDialog {
property string imageId
property bool newItem
property real buttonSize: JamiTheme.smartListAvatarSize
property real buttonSize: 36
property real imageSize: 25
signal focusOnPreviousItem
signal focusOnNextItem
signal imageValidated
signal imageRemoved
function startBooth() {
recordBox.openRecorder(true)
@ -58,9 +59,7 @@ BaseModalDialog {
importButton.forceActiveFocus()
}
width: JamiTheme.preferredDialogWidth
title: JamiStrings.chooseAvatarPicture
title: JamiStrings.selectImage
RecordBox {
id: recordBox
@ -77,18 +76,16 @@ BaseModalDialog {
UtilsAdapter.setTempCreationImageFromString(photo, imageId);
imageValidated();
}
root.close()
}
}
popupContent: RowLayout {
id: buttonsRowLayout
spacing: 10
spacing: 18
PushButton {
JamiPushButton {
id: takePhotoButton
objectName: "takePhotoButton"
@ -97,15 +94,11 @@ BaseModalDialog {
height: buttonSize
width: buttonSize
imageContainerWidth: imageSize
imageContainerHeight: imageSize
radius: height / 2
border.color: JamiTheme.buttonTintedBlue
normalColor: "transparent"
imageColor: JamiTheme.buttonTintedBlue
imageColor: hovered ? JamiTheme.textColor : JamiTheme.buttonTintedGreyHovered
toolTipText: JamiStrings.takePhoto
source: JamiResources.baseline_camera_alt_24dp_svg
hoveredColor: JamiTheme.smartListHoveredColor
source: JamiResources.add_a_photo_black_24dp_svg
Keys.onPressed: function (keyEvent) {
if (keyEvent.key === Qt.Key_Enter ||
@ -139,7 +132,7 @@ BaseModalDialog {
}
}
PushButton {
JamiPushButton {
id: importButton
objectName: "photoboothViewImportButton"
@ -149,16 +142,11 @@ BaseModalDialog {
height: buttonSize
width: buttonSize
imageContainerWidth: imageSize
imageContainerHeight: imageSize
radius: height / 2
border.color: JamiTheme.buttonTintedBlue
normalColor: "transparent"
source: JamiResources.round_folder_24dp_svg
toolTipText: JamiStrings.importFromFile
imageColor: JamiTheme.buttonTintedBlue
hoveredColor: JamiTheme.smartListHoveredColor
normalColor: "transparent"
source: JamiResources.add_photo_alternate_black_24dp_svg
imageColor: hovered ? JamiTheme.textColor : JamiTheme.buttonTintedGreyHovered
toolTipText: JamiStrings.importFromFile
Keys.onPressed: function (keyEvent) {
if (keyEvent.key === Qt.Key_Enter ||
@ -180,7 +168,7 @@ BaseModalDialog {
appWindow,
"commoncomponents/JamiFileDialog.qml",
{
title: JamiStrings.chooseAvatarImage,
title: JamiStrings.selectAvatarImage,
fileMode: JamiFileDialog.OpenFile,
folder: StandardPaths.writableLocation(
StandardPaths.PicturesLocation),
@ -192,14 +180,15 @@ BaseModalDialog {
if (!root.newItem) {
AccountAdapter.setCurrentAccountAvatarFile(filePath)
} else {
UtilsAdapter.setTempCreationImageFromFile(filePath, root.imageId)
UtilsAdapter.setTempCreationImageFromFile(filePath, root.imageId);
imageValidated();
}
root.close()
})
}
}
PushButton {
JamiPushButton {
id: clearButton
objectName: "photoboothViewClearButton"
@ -208,16 +197,11 @@ BaseModalDialog {
height: buttonSize
width: buttonSize
imageContainerWidth: imageSize
imageContainerHeight: imageSize
radius: height / 2
border.color: JamiTheme.buttonTintedBlue
normalColor: "transparent"
source: JamiResources.ic_hangup_participant_24dp_svg
toolTipText: JamiStrings.clearAvatar
imageColor: JamiTheme.buttonTintedBlue
hoveredColor: JamiTheme.smartListHoveredColor
normalColor: "transparent"
source: JamiResources.remove_circle_outline_black_24dp_svg
toolTipText: JamiStrings.removeImage
imageColor: hovered ? JamiTheme.textColor : JamiTheme.buttonTintedGreyHovered
visible: {
if (!newItem && LRCInstance.currentAccountAvatarSet)
@ -245,8 +229,10 @@ BaseModalDialog {
onClicked: {
if (!root.newItem)
AccountAdapter.setCurrentAccountAvatarBase64()
else
UtilsAdapter.setTempCreationImageFromString("", imageId)
else {
UtilsAdapter.setTempCreationImageFromString("", imageId);
imageRemoved();
}
visible = false
stopBooth()
root.close()

7
src/app/commoncomponents/PhotoboothView.qml
View file

@ -59,7 +59,7 @@ Item {
showPresenceIndicator: false
}
PushButton {
JamiPushButton {
id: editImage
width: doubleEditAvatar ? avatar.width / 2 : avatar.width / 4
@ -73,9 +73,10 @@ Item {
preferredSize: doubleEditAvatar ? avatar.width / 3 : avatar.width / 6
normalColor: JamiTheme.secondaryBackgroundColor
imageColor: JamiTheme.buttonTintedBlue
hoveredColor: JamiTheme.hoveredButtonColorWizard
border.color: JamiTheme.buttonTintedBlue
border.color: JamiTheme.editButtonBorderColor
border.width: 2
imageColor: hovered ? JamiTheme.textColor : JamiTheme.buttonTintedGreyHovered
enabled: avatar.visible && !root.readOnly
visible: enabled

8
src/app/constant/JamiStrings.qml
View file

@ -610,12 +610,12 @@ Item {
property string exportAccount: qsTr("Export")
// PhotoBoothView
property string chooseAvatarImage: qsTr("Choose a picture as your avatar")
property string chooseAvatarPicture: qsTr("Choose a picture")
property string selectAvatarImage: qsTr("Select image as avatar")
property string selectImage: qsTr("Select image")
property string importFromFile: qsTr("Import avatar from image file")
property string clearAvatar: qsTr("Clear avatar image")
property string removeImage: qsTr("Remove image")
property string takePhoto: qsTr("Take photo")
property string imageFiles: qsTr("Image Files (*.png *.jpg *.jpeg *.JPG *.JPEG *.PNG)")
property string imageFiles: qsTr("Image Files (*.jpeg *.jpg *.png *.JPEG* .JPG *.PNG)")
// Plugins
property string autoUpdate: qsTr("Auto update")

2
src/app/constant/JamiTheme.qml
View file

@ -145,6 +145,8 @@ Item {
property color backgroundRectangleColor: darkTheme ? "#333333" : "#F0EFEF"
property color deleteRedButton: "#CC0022"
property color editButtonBorderColor: darkTheme ? "#333333" : "#F0EFEF"
// Jami switch
property color switchBackgroundCheckedColor: "#8dbaea"
property color switchBackgroundColor: darkTheme ? "#626262" : "#E5EEF5"

4
src/app/wizardview/components/CreateAccountPage.qml
View file

@ -309,6 +309,7 @@ Rectangle {
}
if (usernameEdit.nameRegistrationState === UsernameTextEdit.NameRegistrationState.BLANK)
popup.visible = true;
UtilsAdapter.setTempCreationImageFromString("", "temp");
}
}
@ -333,7 +334,7 @@ Rectangle {
Layout.topMargin: 2 * JamiTheme.wizardViewBlocMarginSize
preferredWidth: customizeButton.width
text: JamiStrings.encrypt
text: JamiStrings.setPassword
toolTipText: JamiStrings.encryptWithPassword
KeyNavigation.tab: customizeButton
@ -456,4 +457,5 @@ Rectangle {
KeyNavigation.up: backButton
KeyNavigation.down: KeyNavigation.tab
}
Component.onDestruction: UtilsAdapter.setTempCreationImageFromString("", "temp")
}

111
src/app/wizardview/components/CustomizeProfilePopup.qml
View file

@ -31,10 +31,15 @@ BaseModalDialog {
property string alias: ""
property bool saved: false
property string imageId: "temp"
button1.text: JamiStrings.optionSave
button1.enabled: false
button1.enabled: UtilsAdapter.tempCreationImage(imageId) !== ''
button1.onClicked: {
accepted(alias);
saved = true;
close();
}
@ -58,52 +63,86 @@ BaseModalDialog {
anchors.centerIn: parent
width: parent.width
PhotoboothView {
id: accountAvatar
width: avatarSize
height: avatarSize
Rectangle {
Layout.alignment: Qt.AlignLeft | Qt.AlignCenter
Layout.margins: 10
newItem: true
imageId: "temp"
avatarSize: 56
editButton.visible: false
visible: false
color: "transparent"
}
width: accountAvatar.width
height: accountAvatar.height
PushButton {
id: editImage
PhotoboothView {
id: accountAvatar
width: 56
height: 56
Layout.margins: 10
Layout.alignment: Qt.AlignLeft| Qt.AlignCenter
anchors.centerIn: parent
source: JamiResources.person_outline_black_24dp_svg
visible: !accountAvatar.visible
width: avatarSize
height: avatarSize
preferredSize: 56
newItem: true
imageId: root.imageId
avatarSize: 56
editButton.visible: false
visible: UtilsAdapter.tempCreationImage(imageId).length !== 0
normalColor: JamiTheme.customizePhotoColor
imageColor: JamiTheme.whiteColor
hoveredColor: JamiTheme.customizePhotoHoveredColor
Component.onCompleted: {
root.onClosed.connect(function() {
if(!root.saved)
UtilsAdapter.setTempCreationImageFromString('', imageId);
});
}
}
imageContainerWidth: 30
PushButton {
id: editImage
onClicked: {
var dlg = viewCoordinator.presentDialog(parent, "commoncomponents/PhotoboothPopup.qml", {
"parent": editImage,
"imageId": accountAvatar.imageId,
"newItem": true
})
dlg.onImageValidated.connect(function() {
accountAvatar.visible = true
root.button1.enabled = true
})
anchors.centerIn: parent
width: 56
height: 56
anchors.fill: parent
source: JamiResources.person_outline_black_24dp_svg
background.opacity: {
if (accountAvatar.visible) {
if(hovered)
return 0.3
else
return 0
}
else
return 1
}
preferredSize: 56
normalColor: JamiTheme.customizePhotoColor
imageColor: accountAvatar.visible ? JamiTheme.customizeRectangleColor : JamiTheme.whiteColor
hoveredColor: JamiTheme.customizePhotoHoveredColor
imageContainerWidth: 30
onClicked: {
var dlg = viewCoordinator.presentDialog(parent, "commoncomponents/PhotoboothPopup.qml", {
"parent": editImage,
"imageId": root.imageId,
"newItem": true
})
dlg.onImageValidated.connect(function() {
if (UtilsAdapter.tempCreationImage(root.imageId).length !== 0) {
accountAvatar.visible = true
root.button1.enabled = true
}
})
dlg.onImageRemoved.connect(function() {
if (UtilsAdapter.tempCreationImage(root.imageId).length !== 0) {
accountAvatar.visible = true
root.button1.enabled = true
}
})
}
}
}