Commit 820ef309 authored by Sébastien Blin's avatar Sébastien Blin
Browse files

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
parent b3bcbd6e
<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>
......@@ -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
......
......@@ -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
}
}
......@@ -76,7 +76,7 @@ TextField {
fill: parent
topMargin: 0
rightMargin: 0
bottomMargin: 3
bottomMargin: 1
leftMargin: 0
}
color: backgroundColor
......
......@@ -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 ||
......
......@@ -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")
......
......@@ -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
......
......@@ -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 {
......
......@@ -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"