lilith/jami-client-qt
1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-09-10 12:03:18 +02:00
Code Activity

smartlist: update design for swarm

Browse source 
+ Clear search bar on highlighted
+ Add title in the smartlist on creation
+ Remove last interaction on swarm creation
+ RecordBox update design and avoid white buttons on white videos
+ Ellipsize title in Middle to keep +X

Change-Id: Ib19831e2291e3fc94eacd6cd65012eebcb310faa
This commit is contained in:
Sébastien Blin 2022-04-15 16:00:03 -04:00
parent b3bcbd6eab
commit 820ef3092c
14 changed files with 427 additions and 339 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
resources/icons/re_record_24dp.svg
View file

@ -1 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" fill="white"/></svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<path d="M20.2,6.5c-1.4-2.2-3.6-3.7-6-4.2C9,1.1,3.9,4.2,2.7,9.3c0,0,0,0,0,0l0,0.1c-0.6,2.4-0.1,4.9,1.2,6.9c1.2,1.9,3,3.3,5.1,4
l-0.4,0.3c-0.1,0-0.1,0.1-0.2,0.1C8,20.9,8,21.4,8.2,21.7C8.3,21.9,8.5,22,8.7,22c0,0,0.1,0,0.1,0c0.2,0,0.3-0.1,0.4-0.1l2-1.2
c0.2-0.1,0.3-0.3,0.3-0.5s0-0.4-0.1-0.6l-1.3-2c-0.2-0.3-0.6-0.4-1-0.2c-0.4,0.2-0.5,0.7-0.3,1l0.2,0.4c-1.7-0.6-3.1-1.7-4.1-3.3
c-1.1-1.7-1.4-3.8-1-5.9c0,0,0,0,0,0l0-0.1c1-4.2,5.3-6.8,9.7-5.9c2.1,0.5,3.9,1.8,5.1,3.6c1.1,1.7,1.4,3.8,1,5.9
c-0.6,2.7-2.8,4.9-5.6,5.8c-0.4,0.1-0.6,0.5-0.5,0.9c0.1,0.4,0.5,0.6,0.9,0.5c3.3-1,5.9-3.7,6.7-6.9l0-0.1
C21.9,11,21.5,8.5,20.2,6.5z"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 252 B

After

Width:  |  Height:  |  Size: 976 B

19
src/commoncomponents/EditableLineEdit.qml
View file

@ -23,6 +23,7 @@ import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import net.jami.Constants 1.1
import net.jami.Adapters 1.1
Item {
id: root
@ -37,6 +38,8 @@ Item {
property alias placeholderText: lineEdit.placeholderText
property alias placeholderTextColor: lineEdit.placeholderTextColor
property alias backgroundColor: lineEdit.backgroundColor
property var editIconColor: UtilsAdapter.luma(root.color) ? JamiTheme.editLineColor : "white"
property var cancelIconColor: UtilsAdapter.luma(root.color) ? JamiTheme.buttonTintedBlue : "white"
property bool editable: false
property bool hovered: false
@ -75,7 +78,7 @@ Item {
layer {
enabled: true
effect: ColorOverlay {
color: root.color
color: root.editIconColor
}
}
@ -95,10 +98,11 @@ Item {
readOnly: !editable
underlined: true
borderColor: root.color
borderColor: root.editIconColor
fieldLayoutHeight: 24
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: root.preferredFieldWidth - btnEdit.width - editImg.width - btnEdit.width
Layout.preferredWidth: root.preferredFieldWidth - editImg.width - btnCancel.width
Layout.fillHeight: true
wrapMode: Text.NoWrap
@ -119,13 +123,14 @@ Item {
}
PushButton {
id: btnEdit
id: btnCancel
Layout.alignment: Qt.AlignVCenter
enabled: editable
preferredSize: lineEdit.height * 2 / 3
opacity: editable ? 0.8 : 0
imageColor: root.color
imageColor: root.cancelIconColor
normalColor: "transparent"
hoveredColor: JamiTheme.hoveredButtonColor
@ -151,7 +156,7 @@ Item {
radius: JamiTheme.primaryRadius
visible: root.editable || root.hovered
color: root.color
color: root.editIconColor
Rectangle {
visible: parent.visible
@ -159,7 +164,7 @@ Item {
fill: parent
topMargin: 0
rightMargin: 0
bottomMargin: 3
bottomMargin: 1
leftMargin: 0
}
color: root.backgroundColor

9
src/commoncomponents/MaterialButton.qml
View file

@ -200,4 +200,13 @@ AbstractButton {
keyEvent.accepted = true
}
}
MouseArea {
anchors.fill: parent
// We don't want to eat clicks on the Text.
acceptedButtons: Qt.NoButton
cursorShape: root.hovered ? Qt.PointingHandCursor : Qt.ArrowCursor
}
}

2
src/commoncomponents/MaterialLineEdit.qml
View file

@ -76,7 +76,7 @@ TextField {
fill: parent
topMargin: 0
rightMargin: 0
bottomMargin: 3
bottomMargin: 1
leftMargin: 0
}
color: backgroundColor

37
src/commoncomponents/PhotoboothView.qml
View file

@ -34,7 +34,7 @@ Item {
property bool newConversation: false
property real avatarSize
property real buttonSize: avatarSize
property bool inverted: false
property bool darkTheme: false
signal focusOnPreviousItem
signal focusOnNextItem
@ -196,7 +196,7 @@ Item {
anchors.centerIn: parent
Layout.preferredHeight: childrenRect.height
spacing: 12
spacing: 10
function backToAvatar() {
imageLayer.visible = true
@ -209,17 +209,18 @@ Item {
objectName: "takePhotoButton"
Layout.alignment: Qt.AlignHCenter
Layout.leftMargin: cancelButton.width
height: buttonSize
width: buttonSize
radius: height / 2
border.width: 2
border.color: JamiTheme.textColor
border.color: darkTheme ? "white" : JamiTheme.buttonTintedBlue
normalColor: "transparent"
imageColor: JamiTheme.textColor
imageColor: darkTheme ? "white" : JamiTheme.buttonTintedBlue
toolTipText: JamiStrings.takePhoto
source: JamiResources.baseline_camera_alt_24dp_svg
hoveredColor: Qt.rgba(255, 255, 255, 0.2)
hoveredColor: darkTheme ? Qt.rgba(255, 255, 255, 0.2) : JamiTheme.buttonTintedBlueInternalHover
Keys.onPressed: function (keyEvent) {
if (keyEvent.key === Qt.Key_Enter ||
@ -240,15 +241,14 @@ Item {
KeyNavigation.down: KeyNavigation.tab
onClicked: {
recordBox.parent = takePhotoButton
recordBox.parent = buttonsRowLayout
recordBox.x = Qt.binding(function() {
var buttonCenterX = takePhotoButton.x + takePhotoButton.width / 2
var buttonCenterX = buttonsRowLayout.width / 2
return buttonCenterX - recordBox.width / 2
})
recordBox.y = Qt.binding(function() {
var buttonY = takePhotoButton.y
return inverted? buttonY + takePhotoButton.height : buttonY - recordBox.height
return - recordBox.height / 2
})
startBooth()
}
@ -268,12 +268,12 @@ Item {
width: buttonSize
radius: height / 2
border.width: 2
border.color: JamiTheme.textColor
border.color: darkTheme ? "white" : JamiTheme.buttonTintedBlue
normalColor: "transparent"
source: JamiResources.round_folder_24dp_svg
toolTipText: JamiStrings.importFromFile
imageColor: JamiTheme.textColor
hoveredColor: Qt.rgba(255, 255, 255, 0.2)
imageColor: darkTheme ? "white" : JamiTheme.buttonTintedBlue
hoveredColor: darkTheme ? Qt.rgba(255, 255, 255, 0.2) : JamiTheme.buttonTintedBlueInternalHover
Keys.onPressed: function (keyEvent) {
if (keyEvent.key === Qt.Key_Enter ||
@ -309,12 +309,12 @@ Item {
width: buttonSize
radius: height / 2
border.width: 2
border.color: JamiTheme.textColor
border.color: darkTheme ? "white" : JamiTheme.buttonTintedBlue
normalColor: "transparent"
source: JamiResources.ic_hangup_participant_24dp_svg
toolTipText: JamiStrings.clearAvatar
imageColor: JamiTheme.textColor
hoveredColor: Qt.rgba(255, 255, 255, 0.2)
imageColor: darkTheme ? "white" : JamiTheme.buttonTintedBlue
hoveredColor: darkTheme ? Qt.rgba(255, 255, 255, 0.2) : JamiTheme.buttonTintedBlueInternalHover
visible: {
if (!newConversation && LRCInstance.currentAccountAvatarSet)
@ -353,13 +353,14 @@ Item {
id: cancelButton
preferredSize: 18
width: 18
height: 18
radius: height / 2
normalColor: "transparent"
source: JamiResources.round_close_24dp_svg
toolTipText: JamiStrings.cancel
imageColor: JamiTheme.textColor
hoveredColor: Qt.rgba(255, 255, 255, 0.2)
Layout.leftMargin: -8
imageColor: darkTheme ? "white" : JamiTheme.buttonTintedBlue
hoveredColor: darkTheme ? Qt.rgba(255, 255, 255, 0.2) : JamiTheme.buttonTintedBlueInternalHover
Keys.onPressed: function (keyEvent) {
if (keyEvent.key === Qt.Key_Enter ||

5
src/constant/JamiStrings.qml
View file

@ -37,6 +37,7 @@ Item {
property string incomingVideoCallFrom: qsTr("Incoming video call from {}")
property string contactSearchConversation: qsTr("Find a user or search for a conversation")
property string startASwarm: qsTr("Start a swarm")
property string createASwarm: qsTr("Create a swarm")
property string contactSearchInvitations: qsTr("Search your invitations")
property string invitations: qsTr("Invitations")
property string description: qsTr("Jami is free software for universal communication which respects the freedoms and the privacy of its users.")
@ -621,8 +622,8 @@ Item {
property string members: qsTr("%1 Members")
property string member: qsTr("Member")
property string documents: qsTr("Documents")
property string editTitle: qsTr("Edit title")
property string editDescription: qsTr("Edit description")
property string groupName: qsTr("Group's name")
property string addADescription: qsTr("Add a description")
property string ignoreTheSwarm: qsTr("Ignore the swarm")
property string ignoreTheSwarmTooltip: qsTr("Ignore all notifications from this conversation")

12
src/constant/JamiTheme.qml
View file

@ -79,9 +79,11 @@ Item {
property color invertedHoveredButtonColor: Qt.rgba(0, 0, 0, 0.6)
property color invertedNormalButtonColor: Qt.rgba(0, 0, 0, 0.75)
property color buttonTintedBlue: "#00aaff"
property color buttonTintedBlueHovered: "#0e81c5"
property color buttonTintedBluePressed: "#273261"
property color editLineColor: "#03b9e9"
property color buttonTintedBlue: "#005699"
property color buttonTintedBlueHovered: "#0071c9"
property color buttonTintedBlueInternalHover: Qt.rgba(0, 86, 153, 0.2)
property color buttonTintedBluePressed: "#0071c9"
property color buttonTintedGrey: darkTheme ? "#555" : "#999"
property color buttonTintedGreyHovered: "#777"
property color buttonTintedGreyPressed: "#777"
@ -167,7 +169,7 @@ Item {
property color fileInTimestampColor: darkTheme ? "#999" : "#555"
property color chatviewBgColor: darkTheme ? bgDarkMode_ : whiteColor
property color bgInvitationRectColor: darkTheme ? "#222222" : whiteColor
property color placeholderTextColor: darkTheme ? "#7a7a7a" : "#767676"
property color placeholderTextColor: darkTheme ? "#7a7a7a" : Qt.rgba(0, 0, 0, 0.2)
property color placeholderTextColorWhite: "#cccccc"
property color inviteHoverColor: darkTheme ? blackColor : whiteColor
property color chatviewButtonColor: darkTheme ? whiteColor : blackColor
@ -271,7 +273,7 @@ Item {
property real preferredFieldHeight: 32
property real preferredMarginSize: 16
property real settingsMarginSize: 8
property real swarmDetailsPageTopMargin: 64
property real swarmDetailsPageTopMargin: 32
property real preferredDialogWidth: 400
property real preferredDialogHeight: 300
property real minimumPreviewWidth: 120

57
src/mainview/components/NewSwarmPage.qml
View file

@ -67,22 +67,22 @@ Rectangle {
delegate: Rectangle {
id: delegate
radius: (delegate.height + 12) / 2
width: childrenRect.width + 12
height: childrenRect.height + 12
width: label.width + 36
height: label.height + 12
RowLayout {
anchors.centerIn: parent
Label {
id: label
text: UtilsAdapter.getBestNameForUri(CurrentAccount.id, modelData.uri)
color: JamiTheme.textColor
Layout.leftMargin: 8
}
PushButton {
id: removeUserBtn
Layout.leftMargin: 8
preferredSize: 24
source: JamiResources.round_close_24dp_svg
@ -110,6 +110,7 @@ Rectangle {
id: currentAccountAvatar
Layout.alignment: Qt.AlignCenter
darkTheme: UtilsAdapter.luma(root.color)
newConversation: true
imageId: root.visible ? "temp" : ""
@ -127,10 +128,27 @@ Rectangle {
horizontalAlignment: editable ? Text.AlignLeft : Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
placeholderText: JamiStrings.editTitle
tooltipText: JamiStrings.editTitle
placeholderText: JamiStrings.groupName
tooltipText: JamiStrings.groupName
backgroundColor: root.color
color: "white"
color: UtilsAdapter.luma(backgroundColor) ?
JamiTheme.chatviewTextColorLight :
JamiTheme.chatviewTextColorDark
placeholderTextColor: {
if (editable) {
if (UtilsAdapter.luma(root.color)) {
return JamiTheme.placeholderTextColorWhite
} else {
return JamiTheme.placeholderTextColor
}
} else {
if (UtilsAdapter.luma(root.color)) {
return JamiTheme.chatviewTextColorLight
} else {
return JamiTheme.chatviewTextColorDark
}
}
}
}
EditableLineEdit {
@ -138,15 +156,32 @@ Rectangle {
Layout.alignment: Qt.AlignCenter
Layout.topMargin: JamiTheme.preferredMarginSize
font.pointSize: JamiTheme.titleFontSize
font.pointSize: JamiTheme.menuFontSize
horizontalAlignment: editable ? Text.AlignLeft : Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
placeholderText: JamiStrings.editDescription
tooltipText: JamiStrings.editDescription
placeholderText: JamiStrings.addADescription
tooltipText: JamiStrings.addADescription
backgroundColor: root.color
color: "white"
color: UtilsAdapter.luma(backgroundColor) ?
JamiTheme.chatviewTextColorLight :
JamiTheme.chatviewTextColorDark
placeholderTextColor: {
if (editable) {
if (UtilsAdapter.luma(root.color)) {
return JamiTheme.placeholderTextColorWhite
} else {
return JamiTheme.placeholderTextColor
}
} else {
if (UtilsAdapter.luma(root.color)) {
return JamiTheme.chatviewTextColorLight
} else {
return JamiTheme.chatviewTextColorDark
}
}
}
}
MaterialButton {

506
src/mainview/components/RecordBox.qml
View file

@ -18,6 +18,7 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import net.jami.Models 1.1
@ -40,6 +41,7 @@ Popup {
property int state: RecordBox.States.INIT
property bool isVideo: false
property bool isPhoto: false
property bool showVideo: (root.isVideo && VideoDevices.listSize !== 0)
property int preferredWidth: 320
property int preferredHeight: 240
property int btnSize: 40
@ -54,30 +56,14 @@ Popup {
function openRecorder(vid) {
isVideo = vid
scaleHeight()
updateState(RecordBox.States.INIT)
if (isVideo) {
previewWidget.startWithId(VideoDevices.getDefaultDevice())
localVideo.startWithId(VideoDevices.getDefaultDevice())
}
open()
}
function scaleHeight() {
height = preferredHeight
if (isVideo) {
var resolution = VideoDevices.defaultRes
var resVec = resolution.split("x")
var aspectRatio = resVec[1] / resVec[0]
if (aspectRatio) {
height = preferredWidth * aspectRatio
} else {
console.error("Could not scale recording video preview")
}
}
}
function closeRecorder() {
if (isVideo) {
VideoDevices.stopDevice(previewWidget.deviceId)
@ -143,8 +129,6 @@ Popup {
time.text = min + ":" + sec
}
width: 320
height: 240
modal: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
@ -160,278 +144,31 @@ Popup {
}
}
background: Rectangle {
anchors.fill: parent
visible: !root.isVideo
background: Item {} // Computed by id: box, to do the layer on LocalVideo
width: preferredWidth
height: isVideo? previewWidget.height + 80 : preferredHeight
Rectangle {
id: box
radius: 5
border.color: JamiTheme.tabbarBorderColor
color: JamiTheme.backgroundColor
}
Item {
anchors.fill: parent
anchors.margins: 0
Rectangle {
id: rectBox
anchors.fill: parent
visible: (isVideo && VideoDevices.listSize !== 0)
color: JamiTheme.blackColor
radius: 5
Item {
// Else it will be resized by the layer effect
id: photoMask
visible: false
anchors.fill: rectBox
Rectangle {
anchors.centerIn: parent
height: parent.height
width: parent.height
radius: height / 2
}
}
Image {
id: screenshotImg
visible: parent.visible && root.isPhoto && btnSend.visible
anchors.fill: parent
layer.enabled: true
layer.effect: OpacityMask {
maskSource: rectBox
}
Rectangle {
anchors.fill: parent
color: "black"
opacity: 0.6
layer.enabled: true
layer.effect: OpacityMask {
anchors.centerIn: parent
maskSource: photoMask
invert: true
}
}
source: root.photo === "" ? "" : "data:image/png;base64," + root.photo
}
LocalVideo {
id: previewWidget
visible: parent.visible && !screenshotImg.visible
anchors.fill: rectBox
anchors.margins: 1
rendererId: VideoDevices.getDefaultDevice()
layer.enabled: true
layer.effect: OpacityMask {
maskSource: rectBox
}
Rectangle {
anchors.fill: parent
color: "black"
opacity: 0.6
visible: root.isPhoto
layer.enabled: true
layer.effect: OpacityMask {
anchors.centerIn: parent
maskSource: photoMask
invert: true
}
}
}
}
Label {
anchors.centerIn: parent
width: root.width
visible: (isVideo && VideoDevices.listSize === 0)
onVisibleChanged: {
if (visible) {
closeRecorder()
}
}
text: JamiStrings.previewUnavailable
font.pointSize: JamiTheme.settingsFontSize
font.kerning: true
color: JamiTheme.primaryForegroundColor
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
Timer {
id: timer
interval: 1000
running: false
repeat: true
onTriggered: updateTimer()
}
Text {
id: time
anchors.centerIn: recordButton
anchors.horizontalCenterOffset: (isVideo ? 100 : 0)
anchors.verticalCenterOffset: (isVideo ? 0 : -100)
visible: !root.isPhoto
text: "00:00"
color: (isVideo ? JamiTheme.whiteColor : JamiTheme.textColor)
font.pointSize: (isVideo ? 12 : 20)
}
PushButton {
id: recordButton
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
preferredSize: btnSize
normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
hoveredColor: Qt.rgba(255, 255, 255, 0.2)
source: JamiResources.fiber_manual_record_24dp_svg
imageColor: JamiTheme.recordIconColor
onClicked: {
updateState(RecordBox.States.RECORDING)
if (!root.isPhoto)
startRecording()
}
}
PushButton {
id: screenshotBtn
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
preferredSize: btnSize
normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
hoveredColor: Qt.rgba(255, 255, 255, 0.2)
border.width: 1
border.color: imageColor
source: JamiResources.fiber_manual_record_24dp_svg
imageColor: JamiTheme.whiteColor
onClicked: {
root.photo = videoProvider.captureVideoFrame(previewWidget.videoSink)
updateState(RecordBox.States.REC_SUCCESS)
}
}
PushButton {
id: btnStop
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
preferredSize: btnSize
normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
hoveredColor: Qt.rgba(255, 255, 255, 0.2)
source: JamiResources.stop_24dp_red_svg
imageColor: isVideo ? JamiTheme.whiteColor : JamiTheme.textColor
border.width: 1
border.color: imageColor
onClicked: {
if (!root.isPhoto)
stopRecording()
updateState(RecordBox.States.REC_SUCCESS)
}
}
PushButton {
id: btnRestart
anchors.horizontalCenter: parent.horizontalCenter
anchors.horizontalCenterOffset: -25
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
preferredSize: btnSize
normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
source: JamiResources.re_record_24dp_svg
hoveredColor: Qt.rgba(255, 255, 255, 0.2)
imageColor: isVideo ? JamiTheme.whiteColor : JamiTheme.textColor
border.width: 1
border.color: imageColor
onClicked: {
if (!root.isPhoto)
stopRecording()
updateState(RecordBox.States.INIT)
}
}
PushButton {
id: btnSend
anchors.horizontalCenter: parent.horizontalCenter
anchors.horizontalCenterOffset: 25
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
preferredSize: btnSize
normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
source: JamiResources.check_black_24dp_svg
imageColor: isVideo ? JamiTheme.whiteColor : JamiTheme.textColor
border.width: 1
border.color: imageColor
onClicked: {
if (!root.isPhoto) {
stopRecording()
sendRecord()
} else if (root.photo !== "") {
root.validatePhoto(root.photo)
}
closeRecorder()
updateState(RecordBox.States.INIT)
}
}
color: JamiTheme.backgroundColor
PushButton {
id: cancelBtn
z: 1
normalColor: "transparent"
hoveredColor: Qt.rgba(255, 255, 255, 0.2)
imageColor: JamiTheme.primaryForegroundColor
imageColor: isVideo ? JamiTheme.whiteColor : JamiTheme.textColor
preferredSize: 12
source: JamiResources.round_close_24dp_svg
toolTipText: JamiStrings.back
anchors.right: parent.right
anchors.top: parent.top
anchors.right: box.right
anchors.top: box.top
anchors.margins: 8
onClicked: {
@ -439,5 +176,220 @@ Popup {
updateState(RecordBox.States.INIT)
}
}
Item {
// Else it will be resized by the layer effect
id: photoMask
visible: false
anchors.fill: parent
Rectangle {
anchors.centerIn: parent
height: parent.height
width: parent.height
radius: height / 2
}
}
Rectangle {
id: rectBox
visible: false
anchors.fill: parent
radius: 5
}
ColumnLayout {
id: recordItem
anchors.fill: parent
spacing: 0
Layout.alignment: Qt.AlignTop
// Video
Image {
id: screenshotImg
visible: root.showVideo && root.isPhoto && btnSend.visible
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
sourceSize.width: parent.width
sourceSize.height: width * localVideo.invAspectRatio
source: root.photo === "" ? "" : "data:image/png;base64," + root.photo
}
// video Preview
Rectangle {
id: previewWidget
visible: root.showVideo && !screenshotImg.visible
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
height: localVideo.width * localVideo.invAspectRatio
width: parent.width
color: JamiTheme.primaryForegroundColor
LocalVideo {
id: localVideo
anchors.fill: parent
layer.enabled: true
layer.effect: OpacityMask {
maskSource: rectBox
}
Rectangle {
anchors.fill: parent
color: "black"
opacity: 0.6
visible: root.isPhoto
layer.enabled: true
layer.effect: OpacityMask {
anchors.centerIn: parent
maskSource: photoMask
invert: true
}
}
}
}
RowLayout {
id: controls
Layout.alignment: Qt.AlignCenter
Layout.fillWidth: true
spacing: 24
Layout.bottomMargin: isVideo ? 8 : 0
PushButton {
id: recordButton
Layout.alignment: Qt.AlignCenter
preferredSize: btnSize
normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
hoveredColor: Qt.rgba(255, 255, 255, 0.2)
source: JamiResources.fiber_manual_record_24dp_svg
imageColor: JamiTheme.recordIconColor
onClicked: {
updateState(RecordBox.States.RECORDING)
if (!root.isPhoto)
startRecording()
}
}
PushButton {
id: screenshotBtn
Layout.alignment: Qt.AlignCenter
preferredSize: btnSize
normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
hoveredColor: Qt.rgba(255, 255, 255, 0.2)
border.width: 1
border.color: imageColor
source: JamiResources.fiber_manual_record_24dp_svg
imageColor: UtilsAdapter.luma(JamiTheme.backgroundColor) ? "white" : JamiTheme.buttonTintedBlue
onClicked: {
root.photo = videoProvider.captureVideoFrame(localVideo.videoSink)
updateState(RecordBox.States.REC_SUCCESS)
}
}
PushButton {
id: btnStop
Layout.alignment: Qt.AlignCenter
preferredSize: btnSize
normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
hoveredColor: Qt.rgba(255, 255, 255, 0.2)
source: JamiResources.stop_24dp_red_svg
imageColor: UtilsAdapter.luma(JamiTheme.backgroundColor) ? "white" : JamiTheme.buttonTintedBlue
border.width: 1
border.color: imageColor
onClicked: {
if (!root.isPhoto)
stopRecording()
updateState(RecordBox.States.REC_SUCCESS)
}
}
PushButton {
id: btnRestart
Layout.alignment: Qt.AlignCenter
preferredSize: btnSize
normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
source: JamiResources.re_record_24dp_svg
hoveredColor: Qt.rgba(255, 255, 255, 0.2)
imageColor: UtilsAdapter.luma(JamiTheme.backgroundColor) ? "white" : JamiTheme.buttonTintedBlue
border.width: 1
border.color: imageColor
onClicked: {
if (!root.isPhoto)
stopRecording()
updateState(RecordBox.States.INIT)
}
}
PushButton {
id: btnSend
Layout.alignment: Qt.AlignCenter
preferredSize: btnSize
normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
source: JamiResources.check_black_24dp_svg
imageColor: UtilsAdapter.luma(JamiTheme.backgroundColor) ? "white" : JamiTheme.buttonTintedBlue
border.width: 1
border.color: imageColor
onClicked: {
if (!root.isPhoto) {
stopRecording()
sendRecord()
} else if (root.photo !== "") {
root.validatePhoto(root.photo)
}
closeRecorder()
updateState(RecordBox.States.INIT)
}
}
Timer {
id: timer
interval: 1000
running: false
repeat: true
onTriggered: updateTimer()
}
Text {
id: time
Layout.alignment: Qt.AlignCenter
visible: !root.isPhoto
text: "00:00"
color: JamiTheme.textColor
font.pointSize: (isVideo ? 12 : 20)
}
}
}
}
}

51
src/mainview/components/SidePanel.qml
View file

@ -131,7 +131,9 @@ Rectangle {
}
RowLayout {
id: startBar
id: titleBar
visible: swarmMemberSearchList.visible
height: 40
anchors.top: root.top
@ -141,6 +143,50 @@ Rectangle {
anchors.right: root.right
anchors.rightMargin: 15
Label {
id: title
height: parent.height
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
color: JamiTheme.textColor
font.bold: true
font.pointSize: JamiTheme.contactEventPointSize
text: JamiStrings.createASwarm
}
PushButton {
radius: JamiTheme.primaryRadius
imageColor: JamiTheme.textColor
imagePadding: 8
normalColor: JamiTheme.secondaryBackgroundColor
preferredSize: titleBar.height
visible: UtilsAdapter.getAppValue(Settings.EnableExperimentalSwarm)
source: JamiResources.round_close_24dp_svg
toolTipText: JamiStrings.cancel
onClicked: createSwarmClicked()
}
}
RowLayout {
id: startBar
height: 40
anchors.top: titleBar.visible ? titleBar.bottom : root.top
anchors.topMargin: 10
anchors.left: root.left
anchors.leftMargin: 15
anchors.right: root.right
anchors.rightMargin: 15
ContactSearchBar {
id: contactSearchBar
@ -176,7 +222,7 @@ Rectangle {
preferredSize: startBar.height
visible: UtilsAdapter.getAppValue(Settings.EnableExperimentalSwarm)
visible: UtilsAdapter.getAppValue(Settings.EnableExperimentalSwarm) && !swarmMemberSearchList.visible
source: smartListLayout.visible ? JamiResources.create_swarm_svg : JamiResources.round_close_24dp_svg
toolTipText: smartListLayout.visible ? JamiStrings.startASwarm : JamiStrings.cancel
@ -365,6 +411,7 @@ Rectangle {
} else {
root.highlighted = Array.from(root.highlighted).filter(r => r !== UID)
}
root.clearContactSearchBar()
}
}
currentIndex: model.currentFilteredRow

3
src/mainview/components/SmartListItemDelegate.qml
View file

@ -108,7 +108,7 @@ ItemDelegate {
Layout.fillWidth: true
Layout.preferredHeight: 20
Layout.alignment: Qt.AlignVCenter
elide: Text.ElideRight
elide: Text.ElideMiddle
text: Title === undefined ? "" : Title
font.pointSize: JamiTheme.smartlistItemFontSize
font.weight: UnreadMessagesCount ? Font.Bold : Font.Normal
@ -117,6 +117,7 @@ ItemDelegate {
RowLayout {
visible: ContactType !== Profile.Type.TEMPORARY
&& LastInteractionDate !== undefined
&& interactive
Layout.fillWidth: true
Layout.preferredHeight: 20
Layout.alignment: Qt.AlignTop

51
src/mainview/components/SwarmDetailsPanel.qml
View file

@ -41,15 +41,14 @@ Rectangle {
ColumnLayout {
id: header
Layout.topMargin: JamiTheme.swarmDetailsPageTopMargin
Layout.fillWidth: true
spacing: 0
spacing: JamiTheme.preferredMarginSize
PhotoboothView {
id: currentAccountAvatar
inverted: true
darkTheme: UtilsAdapter.luma(root.color)
Layout.topMargin: JamiTheme.swarmDetailsPageTopMargin
Layout.bottomMargin: JamiTheme.preferredMarginSize
Layout.alignment: Qt.AlignHCenter
newConversation: true
@ -61,7 +60,6 @@ Rectangle {
id: titleLine
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: JamiTheme.preferredMarginSize
font.pointSize: JamiTheme.titleFontSize
@ -69,9 +67,23 @@ Rectangle {
verticalAlignment: Text.AlignVCenter
text: CurrentConversation.title
placeholderText: JamiStrings.editTitle
placeholderTextColor: UtilsAdapter.luma(root.color) ? JamiTheme.placeholderTextColorWhite : JamiTheme.placeholderTextColor
tooltipText: JamiStrings.editTitle
placeholderText: JamiStrings.groupName
placeholderTextColor: {
if (editable) {
if (UtilsAdapter.luma(root.color)) {
return JamiTheme.placeholderTextColorWhite
} else {
return JamiTheme.placeholderTextColor
}
} else {
if (UtilsAdapter.luma(root.color)) {
return JamiTheme.chatviewTextColorLight
} else {
return JamiTheme.chatviewTextColorDark
}
}
}
tooltipText: JamiStrings.groupName
backgroundColor: root.color
color: UtilsAdapter.luma(backgroundColor) ?
JamiTheme.chatviewTextColorLight :
@ -86,8 +98,6 @@ Rectangle {
id: descriptionLine
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: JamiTheme.preferredMarginSize
Layout.bottomMargin: JamiTheme.preferredMarginSize
font.pointSize: JamiTheme.menuFontSize
@ -95,9 +105,23 @@ Rectangle {
verticalAlignment: Text.AlignVCenter
text: CurrentConversation.description
placeholderText: JamiStrings.editDescription
placeholderTextColor: UtilsAdapter.luma(root.color) ? JamiTheme.placeholderTextColorWhite : JamiTheme.placeholderTextColor
tooltipText: JamiStrings.editDescription
placeholderText: JamiStrings.addADescription
placeholderTextColor: {
if (editable) {
if (UtilsAdapter.luma(root.color)) {
return JamiTheme.placeholderTextColorWhite
} else {
return JamiTheme.placeholderTextColor
}
} else {
if (UtilsAdapter.luma(root.color)) {
return JamiTheme.chatviewTextColorLight
} else {
return JamiTheme.chatviewTextColorDark
}
}
}
tooltipText: JamiStrings.addADescription
backgroundColor: root.color
color: UtilsAdapter.luma(backgroundColor) ?
JamiTheme.chatviewTextColorLight :
@ -113,7 +137,6 @@ Rectangle {
currentIndex: 1
Layout.topMargin: JamiTheme.preferredMarginSize
Layout.preferredWidth: root.width
Layout.preferredHeight: membersTabButton.height

1
src/settingsview/components/AccountProfile.qml
View file

@ -57,6 +57,7 @@ ColumnLayout {
PhotoboothView {
id: currentAccountAvatar
darkTheme: UtilsAdapter.luma(JamiTheme.primaryBackgroundColor)
Layout.alignment: Qt.AlignCenter

1
src/wizardview/components/ProfilePage.qml
View file

@ -101,6 +101,7 @@ Rectangle {
objectName: "setAvatarWidget"
Layout.alignment: Qt.AlignCenter
darkTheme: UtilsAdapter.luma(JamiTheme.primaryBackgroundColor)
enabled: !saveProfileBtn.spinnerTriggered
imageId: createdAccountId