From 48cfd8e29fec8618271b2abdef34034650c02737 Mon Sep 17 00:00:00 2001
From: cberthet <capucine.berthet@savoirfairelinux.com>
Date: Tue, 7 Nov 2023 15:11:27 -0500
Subject: [PATCH] Photobooth: new design
GitLab: #1417
Change-Id: Idf7f2ce5eb79ff378f41071e6c319faef2f27fc5
---
resources/icons/add_a_photo_black_24dp.svg | 6 +
.../icons/add_photo_alternate_black_24dp.svg | 4 +
.../remove_circle_outline_black_24dp.svg | 6 +
src/app/commoncomponents/PhotoboothPopup.qml | 62 ++++------
src/app/commoncomponents/PhotoboothView.qml | 7 +-
src/app/constant/JamiStrings.qml | 8 +-
src/app/constant/JamiTheme.qml | 2 +
.../components/CreateAccountPage.qml | 4 +-
.../components/CustomizeProfilePopup.qml | 113 ++++++++++++------
9 files changed, 129 insertions(+), 83 deletions(-)
create mode 100644 resources/icons/add_a_photo_black_24dp.svg
create mode 100644 resources/icons/add_photo_alternate_black_24dp.svg
create mode 100644 resources/icons/remove_circle_outline_black_24dp.svg
diff --git a/resources/icons/add_a_photo_black_24dp.svg b/resources/icons/add_a_photo_black_24dp.svg
new file mode 100644
index 000000000..a2f805356
--- /dev/null
+++ b/resources/icons/add_a_photo_black_24dp.svg
@@ -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>
diff --git a/resources/icons/add_photo_alternate_black_24dp.svg b/resources/icons/add_photo_alternate_black_24dp.svg
new file mode 100644
index 000000000..55ea1a637
--- /dev/null
+++ b/resources/icons/add_photo_alternate_black_24dp.svg
@@ -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>
diff --git a/resources/icons/remove_circle_outline_black_24dp.svg b/resources/icons/remove_circle_outline_black_24dp.svg
new file mode 100644
index 000000000..bf6f5c96f
--- /dev/null
+++ b/resources/icons/remove_circle_outline_black_24dp.svg
@@ -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>
diff --git a/src/app/commoncomponents/PhotoboothPopup.qml b/src/app/commoncomponents/PhotoboothPopup.qml
index a82abca3f..092e2f7fd 100644
--- a/src/app/commoncomponents/PhotoboothPopup.qml
+++ b/src/app/commoncomponents/PhotoboothPopup.qml
@@ -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
+ source: JamiResources.add_photo_alternate_black_24dp_svg
+ imageColor: hovered ? JamiTheme.textColor : JamiTheme.buttonTintedGreyHovered
toolTipText: JamiStrings.importFromFile
- imageColor: JamiTheme.buttonTintedBlue
- hoveredColor: JamiTheme.smartListHoveredColor
-
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()
diff --git a/src/app/commoncomponents/PhotoboothView.qml b/src/app/commoncomponents/PhotoboothView.qml
index 0680be16d..f6c49398e 100644
--- a/src/app/commoncomponents/PhotoboothView.qml
+++ b/src/app/commoncomponents/PhotoboothView.qml
@@ -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
diff --git a/src/app/constant/JamiStrings.qml b/src/app/constant/JamiStrings.qml
index f3c3dc6ba..399d90440 100644
--- a/src/app/constant/JamiStrings.qml
+++ b/src/app/constant/JamiStrings.qml
@@ -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")
diff --git a/src/app/constant/JamiTheme.qml b/src/app/constant/JamiTheme.qml
index 88920dda3..afe5dc029 100644
--- a/src/app/constant/JamiTheme.qml
+++ b/src/app/constant/JamiTheme.qml
@@ -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"
diff --git a/src/app/wizardview/components/CreateAccountPage.qml b/src/app/wizardview/components/CreateAccountPage.qml
index 21b9f6178..4c4147418 100644
--- a/src/app/wizardview/components/CreateAccountPage.qml
+++ b/src/app/wizardview/components/CreateAccountPage.qml
@@ -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")
}
diff --git a/src/app/wizardview/components/CustomizeProfilePopup.qml b/src/app/wizardview/components/CustomizeProfilePopup.qml
index c52c04400..2fa23c284 100644
--- a/src/app/wizardview/components/CustomizeProfilePopup.qml
+++ b/src/app/wizardview/components/CustomizeProfilePopup.qml
@@ -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"
- }
-
- PushButton {
- id: editImage
+ width: accountAvatar.width
+ height: accountAvatar.height
- width: 56
- height: 56
- Layout.margins: 10
- Layout.alignment: Qt.AlignLeft| Qt.AlignCenter
+ PhotoboothView {
+ id: accountAvatar
- source: JamiResources.person_outline_black_24dp_svg
- visible: !accountAvatar.visible
+ anchors.centerIn: parent
- preferredSize: 56
+ width: avatarSize
+ height: avatarSize
- normalColor: JamiTheme.customizePhotoColor
- imageColor: JamiTheme.whiteColor
- hoveredColor: JamiTheme.customizePhotoHoveredColor
+ newItem: true
+ imageId: root.imageId
+ avatarSize: 56
+ editButton.visible: false
+ visible: UtilsAdapter.tempCreationImage(imageId).length !== 0
- imageContainerWidth: 30
+ Component.onCompleted: {
+ root.onClosed.connect(function() {
+ if(!root.saved)
+ UtilsAdapter.setTempCreationImageFromString('', imageId);
+ });
+ }
+ }
- 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
- })
+ PushButton {
+ id: editImage
+
+ 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
+ }
+ })
+ }
}
}
--
GitLab