From 820ef3092c65076900f2acb08204a712816f8ad5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Blin?=
<sebastien.blin@savoirfairelinux.com>
Date: Fri, 15 Apr 2022 16:00:03 -0400
Subject: [PATCH] smartlist: update design for swarm
+ 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
---
resources/icons/re_record_24dp.svg | 12 +-
src/commoncomponents/EditableLineEdit.qml | 19 +-
src/commoncomponents/MaterialButton.qml | 9 +
src/commoncomponents/MaterialLineEdit.qml | 2 +-
src/commoncomponents/PhotoboothView.qml | 37 +-
src/constant/JamiStrings.qml | 5 +-
src/constant/JamiTheme.qml | 12 +-
src/mainview/components/NewSwarmPage.qml | 57 ++-
src/mainview/components/RecordBox.qml | 410 ++++++++----------
src/mainview/components/SidePanel.qml | 51 ++-
.../components/SmartListItemDelegate.qml | 3 +-
src/mainview/components/SwarmDetailsPanel.qml | 51 ++-
.../components/AccountProfile.qml | 1 +
src/wizardview/components/ProfilePage.qml | 1 +
14 files changed, 379 insertions(+), 291 deletions(-)
diff --git a/resources/icons/re_record_24dp.svg b/resources/icons/re_record_24dp.svg
index db13333aa..09b45837a 100644
--- a/resources/icons/re_record_24dp.svg
+++ b/resources/icons/re_record_24dp.svg
@@ -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>
\ No newline at end of file
+<?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>
diff --git a/src/commoncomponents/EditableLineEdit.qml b/src/commoncomponents/EditableLineEdit.qml
index 0c91bca81..ff262cfb9 100644
--- a/src/commoncomponents/EditableLineEdit.qml
+++ b/src/commoncomponents/EditableLineEdit.qml
@@ -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
diff --git a/src/commoncomponents/MaterialButton.qml b/src/commoncomponents/MaterialButton.qml
index 07cb479b6..bab8be118 100644
--- a/src/commoncomponents/MaterialButton.qml
+++ b/src/commoncomponents/MaterialButton.qml
@@ -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
+ }
+
}
diff --git a/src/commoncomponents/MaterialLineEdit.qml b/src/commoncomponents/MaterialLineEdit.qml
index ae7685eb5..9e0a405b3 100644
--- a/src/commoncomponents/MaterialLineEdit.qml
+++ b/src/commoncomponents/MaterialLineEdit.qml
@@ -76,7 +76,7 @@ TextField {
fill: parent
topMargin: 0
rightMargin: 0
- bottomMargin: 3
+ bottomMargin: 1
leftMargin: 0
}
color: backgroundColor
diff --git a/src/commoncomponents/PhotoboothView.qml b/src/commoncomponents/PhotoboothView.qml
index 57dea273a..97b98d4bb 100644
--- a/src/commoncomponents/PhotoboothView.qml
+++ b/src/commoncomponents/PhotoboothView.qml
@@ -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 ||
diff --git a/src/constant/JamiStrings.qml b/src/constant/JamiStrings.qml
index 1753fe694..c1d563f70 100644
--- a/src/constant/JamiStrings.qml
+++ b/src/constant/JamiStrings.qml
@@ -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")
diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml
index 9402e74f6..8c21b923e 100644
--- a/src/constant/JamiTheme.qml
+++ b/src/constant/JamiTheme.qml
@@ -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
diff --git a/src/mainview/components/NewSwarmPage.qml b/src/mainview/components/NewSwarmPage.qml
index ab44ae884..9df7b2fb8 100644
--- a/src/mainview/components/NewSwarmPage.qml
+++ b/src/mainview/components/NewSwarmPage.qml
@@ -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 {
diff --git a/src/mainview/components/RecordBox.qml b/src/mainview/components/RecordBox.qml
index 83957535a..229e9ee75 100644
--- a/src/mainview/components/RecordBox.qml
+++ b/src/mainview/components/RecordBox.qml
@@ -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,283 +144,251 @@ 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
+ anchors.fill: parent
color: JamiTheme.backgroundColor
- }
- Item {
- anchors.fill: parent
- anchors.margins: 0
+ PushButton {
+ id: cancelBtn
+ z: 1
- Rectangle {
- id: rectBox
+ normalColor: "transparent"
+ hoveredColor: Qt.rgba(255, 255, 255, 0.2)
+ imageColor: isVideo ? JamiTheme.whiteColor : JamiTheme.textColor
+
+ preferredSize: 12
+
+ source: JamiResources.round_close_24dp_svg
+ toolTipText: JamiStrings.back
+
+ anchors.right: box.right
+ anchors.top: box.top
+ anchors.margins: 8
+
+ onClicked: {
+ closeRecorder()
+ 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
+ }
+ }
- visible: (isVideo && VideoDevices.listSize !== 0)
- color: JamiTheme.blackColor
+ Rectangle {
+ id: rectBox
+ visible: false
+ anchors.fill: parent
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
- }
- }
+ ColumnLayout {
+ id: recordItem
+ anchors.fill: parent
+ spacing: 0
+ Layout.alignment: Qt.AlignTop
+ // Video
Image {
id: screenshotImg
- visible: parent.visible && root.isPhoto && btnSend.visible
+ visible: root.showVideo && root.isPhoto && btnSend.visible
+ Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
- anchors.fill: parent
-
- layer.enabled: true
- layer.effect: OpacityMask {
- maskSource: rectBox
- }
+ sourceSize.width: parent.width
+ sourceSize.height: width * localVideo.invAspectRatio
- 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 {
+ // video Preview
+ Rectangle {
id: previewWidget
+ visible: root.showVideo && !screenshotImg.visible
- visible: parent.visible && !screenshotImg.visible
-
- anchors.fill: rectBox
- anchors.margins: 1
+ Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+ height: localVideo.width * localVideo.invAspectRatio
+ width: parent.width
- rendererId: VideoDevices.getDefaultDevice()
+ color: JamiTheme.primaryForegroundColor
- layer.enabled: true
- layer.effect: OpacityMask {
- maskSource: rectBox
- }
-
- Rectangle {
+ LocalVideo {
+ id: localVideo
anchors.fill: parent
- color: "black"
- opacity: 0.6
- visible: root.isPhoto
layer.enabled: true
layer.effect: OpacityMask {
- anchors.centerIn: parent
- maskSource: photoMask
- invert: true
+ maskSource: rectBox
}
- }
- }
- }
-
- Label {
- anchors.centerIn: parent
-
- width: root.width
-
- visible: (isVideo && VideoDevices.listSize === 0)
- onVisibleChanged: {
- if (visible) {
- closeRecorder()
+ 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
+ }
+ }
}
}
- text: JamiStrings.previewUnavailable
- font.pointSize: JamiTheme.settingsFontSize
- font.kerning: true
- color: JamiTheme.primaryForegroundColor
- horizontalAlignment: Text.AlignHCenter
- verticalAlignment: Text.AlignVCenter
- }
+ RowLayout {
+ id: controls
+ Layout.alignment: Qt.AlignCenter
+ Layout.fillWidth: true
+ spacing: 24
+ Layout.bottomMargin: isVideo ? 8 : 0
- Timer {
- id: timer
+ PushButton {
+ id: recordButton
- interval: 1000
- running: false
- repeat: true
+ Layout.alignment: Qt.AlignCenter
- onTriggered: updateTimer()
- }
+ preferredSize: btnSize
- Text {
- id: time
+ normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
+ hoveredColor: Qt.rgba(255, 255, 255, 0.2)
- anchors.centerIn: recordButton
- anchors.horizontalCenterOffset: (isVideo ? 100 : 0)
- anchors.verticalCenterOffset: (isVideo ? 0 : -100)
+ source: JamiResources.fiber_manual_record_24dp_svg
+ imageColor: JamiTheme.recordIconColor
- 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()
+ }
+ }
- onClicked: {
- updateState(RecordBox.States.RECORDING)
- if (!root.isPhoto)
- startRecording()
- }
- }
+ PushButton {
+ id: screenshotBtn
- PushButton {
- id: screenshotBtn
+ Layout.alignment: Qt.AlignCenter
- anchors.horizontalCenter: parent.horizontalCenter
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 5
+ preferredSize: btnSize
- preferredSize: btnSize
+ normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
+ hoveredColor: Qt.rgba(255, 255, 255, 0.2)
+ border.width: 1
+ border.color: imageColor
- 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
- source: JamiResources.fiber_manual_record_24dp_svg
- imageColor: JamiTheme.whiteColor
+ onClicked: {
+ root.photo = videoProvider.captureVideoFrame(localVideo.videoSink)
+ updateState(RecordBox.States.REC_SUCCESS)
+ }
+ }
- onClicked: {
- root.photo = videoProvider.captureVideoFrame(previewWidget.videoSink)
- updateState(RecordBox.States.REC_SUCCESS)
- }
- }
+ PushButton {
+ id: btnStop
- PushButton {
- id: btnStop
+ Layout.alignment: Qt.AlignCenter
- anchors.horizontalCenter: parent.horizontalCenter
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 5
+ preferredSize: btnSize
- preferredSize: btnSize
+ normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
+ hoveredColor: Qt.rgba(255, 255, 255, 0.2)
- 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
- 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)
+ }
+ }
- onClicked: {
- if (!root.isPhoto)
- stopRecording()
- updateState(RecordBox.States.REC_SUCCESS)
- }
- }
+ PushButton {
+ id: btnRestart
- PushButton {
- id: btnRestart
+ Layout.alignment: Qt.AlignCenter
- anchors.horizontalCenter: parent.horizontalCenter
- anchors.horizontalCenterOffset: -25
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 5
+ preferredSize: btnSize
- preferredSize: btnSize
+ normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
- 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
- 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)
+ }
+ }
- onClicked: {
- if (!root.isPhoto)
- stopRecording()
- updateState(RecordBox.States.INIT)
- }
- }
+ PushButton {
+ id: btnSend
- PushButton {
- id: btnSend
+ Layout.alignment: Qt.AlignCenter
- anchors.horizontalCenter: parent.horizontalCenter
- anchors.horizontalCenterOffset: 25
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 5
+ preferredSize: btnSize
- preferredSize: btnSize
+ normalColor: isVideo ? "transparent" : JamiTheme.backgroundColor
- 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
- 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)
+ onClicked: {
+ if (!root.isPhoto) {
+ stopRecording()
+ sendRecord()
+ } else if (root.photo !== "") {
+ root.validatePhoto(root.photo)
+ }
+ closeRecorder()
+ updateState(RecordBox.States.INIT)
+ }
}
- closeRecorder()
- updateState(RecordBox.States.INIT)
- }
- }
- PushButton {
- id: cancelBtn
+ Timer {
+ id: timer
- normalColor: "transparent"
- hoveredColor: Qt.rgba(255, 255, 255, 0.2)
- imageColor: JamiTheme.primaryForegroundColor
+ interval: 1000
+ running: false
+ repeat: true
- preferredSize: 12
+ onTriggered: updateTimer()
+ }
- source: JamiResources.round_close_24dp_svg
- toolTipText: JamiStrings.back
+ Text {
+ id: time
- anchors.right: parent.right
- anchors.top: parent.top
- anchors.margins: 8
+ Layout.alignment: Qt.AlignCenter
- onClicked: {
- closeRecorder()
- updateState(RecordBox.States.INIT)
+ visible: !root.isPhoto
+ text: "00:00"
+ color: JamiTheme.textColor
+ font.pointSize: (isVideo ? 12 : 20)
+ }
}
}
}
diff --git a/src/mainview/components/SidePanel.qml b/src/mainview/components/SidePanel.qml
index 7b211d652..1f66b4ad7 100644
--- a/src/mainview/components/SidePanel.qml
+++ b/src/mainview/components/SidePanel.qml
@@ -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
diff --git a/src/mainview/components/SmartListItemDelegate.qml b/src/mainview/components/SmartListItemDelegate.qml
index ffe511137..580f15c22 100644
--- a/src/mainview/components/SmartListItemDelegate.qml
+++ b/src/mainview/components/SmartListItemDelegate.qml
@@ -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
diff --git a/src/mainview/components/SwarmDetailsPanel.qml b/src/mainview/components/SwarmDetailsPanel.qml
index cc0ecc3ab..7ed3fbd6a 100644
--- a/src/mainview/components/SwarmDetailsPanel.qml
+++ b/src/mainview/components/SwarmDetailsPanel.qml
@@ -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
diff --git a/src/settingsview/components/AccountProfile.qml b/src/settingsview/components/AccountProfile.qml
index fa6ffe765..bde7b45a8 100644
--- a/src/settingsview/components/AccountProfile.qml
+++ b/src/settingsview/components/AccountProfile.qml
@@ -57,6 +57,7 @@ ColumnLayout {
PhotoboothView {
id: currentAccountAvatar
+ darkTheme: UtilsAdapter.luma(JamiTheme.primaryBackgroundColor)
Layout.alignment: Qt.AlignCenter
diff --git a/src/wizardview/components/ProfilePage.qml b/src/wizardview/components/ProfilePage.qml
index a1c131408..66c27f292 100644
--- a/src/wizardview/components/ProfilePage.qml
+++ b/src/wizardview/components/ProfilePage.qml
@@ -101,6 +101,7 @@ Rectangle {
objectName: "setAvatarWidget"
Layout.alignment: Qt.AlignCenter
+ darkTheme: UtilsAdapter.luma(JamiTheme.primaryBackgroundColor)
enabled: !saveProfileBtn.spinnerTriggered
imageId: createdAccountId
--
GitLab