diff --git a/images/icons/drafts-24px.svg b/images/icons/drafts-24px.svg
new file mode 100644
index 00000000..dd7c3bb9
--- /dev/null
+++ b/images/icons/drafts-24px.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/icons/person-24px.svg b/images/icons/person-24px.svg
new file mode 100644
index 00000000..1babbb80
--- /dev/null
+++ b/images/icons/person-24px.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/icons/person_add-24px.svg b/images/icons/person_add-24px.svg
new file mode 100644
index 00000000..40736bbc
--- /dev/null
+++ b/images/icons/person_add-24px.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/ressources.qrc b/ressources.qrc
index 1093bde9..a0e1547f 100644
--- a/ressources.qrc
+++ b/ressources.qrc
@@ -39,7 +39,7 @@
images/icons/ic_clear_24px.svg
images/icons/ic_close_white_24dp.png
images/icons/ic_content_copy.svg
- images/icons/ic_delete_black_18dp_2x.png
+ images/icons/ic_delete_black_18dp_2x.png
images/icons/ic_done_white_24dp.png
images/icons/ic_exit_full_screen_black.png
images/icons/ic_folder_black_18dp_2x.png
@@ -107,5 +107,8 @@
images/icons/ic_close_black_24dp.png
images/icons/extension_24dp.svg
images/icons/settings_backup_restore-black-18dp.svg
+ images/icons/person-24px.svg
+ images/icons/drafts-24px.svg
+ images/icons/person_add-24px.svg
diff --git a/src/commoncomponents/GeneralMenuItem.qml b/src/commoncomponents/GeneralMenuItem.qml
index 677c4b0e..a457f8d8 100644
--- a/src/commoncomponents/GeneralMenuItem.qml
+++ b/src/commoncomponents/GeneralMenuItem.qml
@@ -19,9 +19,9 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.0
import net.jami.Models 1.0
-
/*
* General menu item.
* Can control top, bottom, left, right border width.
@@ -33,8 +33,8 @@ MenuItem {
property string itemName: ""
property string iconSource: ""
- property int preferredWidth: 150
- property int preferredHeight: 30
+ property int preferredWidth: 220
+ property int preferredHeight: 48
property int topBorderWidth: 0
property int bottomBorderWidth: 0
property int leftBorderWidth: 0
@@ -46,27 +46,27 @@ MenuItem {
id: menuItemContentRect
anchors.fill: parent
-
Image {
id: contextMenuItemImage
anchors.left: menuItemContentRect.left
- anchors.leftMargin: 5
+ anchors.leftMargin: (visible ? 24 : 0)
anchors.verticalCenter: menuItemContentRect.verticalCenter
- width: 25
- height: 25
+ width: (visible ? 24 : 0)
+ height: (visible ? 24 : 0)
visible: false
fillMode: Image.PreserveAspectFit
mipmap: true
+ opacity: 0.7
}
Text {
id: contextMenuItemText
anchors.left: contextMenuItemImage.right
- anchors.leftMargin: 5
+ anchors.leftMargin: 20
anchors.verticalCenter: menuItemContentRect.verticalCenter
width: textMetrics.boundingRect.width
height: 30
@@ -74,13 +74,13 @@ MenuItem {
TextMetrics {
id: textMetrics
font: contextMenuItemText.font
- elide: Text.ElideMiddle
- elideWidth: contextMenuItemImage.visible ? (preferredWidth - contextMenuItemImage.width - 5) : preferredWidth
+ elide: Text.ElideRight
+ elideWidth: contextMenuItemImage.visible ? (preferredWidth - contextMenuItemImage.width - 58) : preferredWidth - 24
text: itemName
}
text: textMetrics.elidedText
- font.pointSize: JamiTheme.textFontSize - 3
+ font.pointSize: JamiTheme.textFontSize
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml
index 983ae0de..fdc376db 100644
--- a/src/constant/JamiTheme.qml
+++ b/src/constant/JamiTheme.qml
@@ -39,6 +39,8 @@ Item {
property string transparentColor: "transparent"
property string presenceGreen: "#4cd964"
property string notificationRed: "#ff3b30"
+ property string backgroundColor: lightGrey_
+ property string backgroundDarkColor: lightGreyTab_
property string screenSelectionBorderGreen: "green"
@@ -73,13 +75,15 @@ Item {
property int splitViewHandlePreferedWidth: 4
property int textFontSize: 9
+ property int titleFontSize: 16
+ property int menuFontSize: 12
/*
* Place holder text.
*/
property string contactSearchBarPlaceHolderConversationText: qsTr("Find or start a conversation")
- property string contactSearchBarPlaceHolderInivitionText: qsTr("Search your received invitations")
+ property string contactSearchBarPlaceHolderInivitionText: qsTr("Search your invitations")
// Jami theme colors
function rgb256(r, g, b) {
@@ -87,8 +91,10 @@ Item {
}
property color blue_: "#109ede"
+ property color blueLogo_: rgb256(0, 7, 71)
property color lightBlue_: "#c1ebf0"
property color lightGrey_: rgb256(242, 242, 242)
+ property color lightGreyTab_: rgb256(220, 220, 220)
property color imGrey_: "#dedee0"
property color imBlue_: "#cfebf5"
property color lightBlack_: rgb256(63, 63, 63)
diff --git a/src/mainview/MainView.qml b/src/mainview/MainView.qml
index 6bf2ff5d..20ac1770 100644
--- a/src/mainview/MainView.qml
+++ b/src/mainview/MainView.qml
@@ -43,6 +43,11 @@ Window {
property int welcomePageGroupPreferedWidth: 250
property int aboutPopUpPreferedWidth: 250
+ property int savedSidePanelViewMinWidth: 0
+ property int savedSidePanelViewMaxWidth: 0
+ property int savedWelcomeViewMinWidth: 0
+ property int savedWelcomeViewMaxWidth: 0
+ property bool hiddenView: false
/*
* To calculate tab bar bottom border hidden rect left margin.
@@ -184,18 +189,21 @@ Window {
handle: Rectangle {
implicitWidth: JamiTheme.splitViewHandlePreferedWidth
implicitHeight: splitView.height
- color: SplitHandle.pressed ? JamiTheme.pressColor : (SplitHandle.hovered ? JamiTheme.hoverColor : JamiTheme.tabbarBorderColor)
+ color:"transparent"
+ Rectangle {
+ implicitWidth: 1
+ implicitHeight: splitView.height
+ color: SplitHandle.pressed ? JamiTheme.pressColor : (SplitHandle.hovered ? JamiTheme.hoverColor : JamiTheme.tabbarBorderColor)
+ }
}
StackView {
id: sidePanelViewStack
- property int maximumWidth: sidePanelViewStackPreferedWidth + 100
-
initialItem: mainViewWindowSidePanel
+ SplitView.maximumWidth: splitView.width - sidePanelViewStackPreferedWidth
SplitView.minimumWidth: sidePanelViewStackPreferedWidth
- SplitView.maximumWidth: maximumWidth
SplitView.fillHeight: true
clip: true
@@ -206,7 +214,8 @@ Window {
initialItem: welcomePage
- SplitView.maximumWidth: splitView.width - sidePanelViewStack.width
+ SplitView.maximumWidth: hiddenView ? splitView.width : splitView.width - sidePanelViewStackPreferedWidth
+ SplitView.minimumWidth: sidePanelViewStackPreferedWidth
SplitView.fillHeight: true
clip: true
@@ -408,6 +417,18 @@ Window {
}
Component.onCompleted: {
+ sidePanelViewStack.SplitView.maximumWidth = Qt.binding(function() {
+ return (hiddenView ? splitView.width : splitView.width - sidePanelViewStackPreferedWidth)
+ })
+
+ recordBox.x = Qt.binding(function() {
+ var i = (welcomeViewStack.width > 1000 ? Math.round((welcomeViewStack.width-1000)*0.5) : 0)
+ return sidePanelViewStack.width + recordBox.x_offset + i
+ })
+
+ recordBox.y = Qt.binding(function() {
+ return sidePanelViewStack.height + recordBox.y_offset
+ })
/*
@@ -427,7 +448,7 @@ Window {
+ welcomePageGroupPreferedWidth - 5
&& welcomeViewStack.visible) {
welcomeViewStack.visible = false
-
+ hiddenView = true
/*
* The find callback function is called for each item in the stack.
@@ -436,17 +457,17 @@ Window {
function (item, index) {
return index > 0
})
+
if (inWelcomeViewStack) {
recursionStackViewItemMove(welcomeViewStack, sidePanelViewStack)
}
- sidePanelViewStack.maximumWidth = splitView.width
-
mainViewWindow.update()
} else if (mainViewWindow.width >= sidePanelViewStackPreferedWidth
+ welcomePageGroupPreferedWidth + 5
&& !welcomeViewStack.visible) {
welcomeViewStack.visible = true
+ hiddenView = false
var inSidePanelViewStack = sidePanelViewStack.find(
function (item, index) {
@@ -456,8 +477,6 @@ Window {
recursionStackViewItemMove(sidePanelViewStack, welcomeViewStack)
}
- sidePanelViewStack.maximumWidth = sidePanelViewStackPreferedWidth + 100
-
mainViewWindow.update()
}
}
diff --git a/src/mainview/components/AccountComboBox.qml b/src/mainview/components/AccountComboBox.qml
index 23225f78..31750685 100644
--- a/src/mainview/components/AccountComboBox.qml
+++ b/src/mainview/components/AccountComboBox.qml
@@ -64,11 +64,11 @@ ComboBox {
id: userImageRoot
anchors.left: accountComboBox.left
- anchors.leftMargin: 5
+ anchors.leftMargin: 16
anchors.verticalCenter: accountComboBox.verticalCenter
- width: accountComboBox.height - 10
- height: accountComboBox.height - 10
+ width: 30
+ height: 30
fillMode: Image.PreserveAspectFit
@@ -90,12 +90,12 @@ ComboBox {
id: presenseRect
anchors.right: userImageRoot.right
- anchors.rightMargin: 1
+ anchors.rightMargin: -2
anchors.bottom: userImageRoot.bottom
- anchors.bottomMargin: 2
+ anchors.bottomMargin: -2
- width: 14
- height: 14
+ width: 12
+ height: 12
/*
@@ -123,7 +123,7 @@ ComboBox {
}
radius: 30
- color: "white"
+ color: JamiTheme.backgroundColor
}
}
@@ -131,33 +131,45 @@ ComboBox {
id: textUserAliasRoot
anchors.left: userImageRoot.right
- anchors.leftMargin: 10
+ anchors.leftMargin: 16
anchors.top: rootItemBackground.top
- anchors.topMargin: 5
+ anchors.topMargin: 16
text: textMetricsUserAliasRoot.elidedText
font.pointSize: JamiTheme.textFontSize
}
+ Image {
+ anchors.left: textUserAliasRoot.right
+ anchors.verticalCenter: textUserAliasRoot.verticalCenter
+
+ width: 24
+ height: 24
+
+ fillMode: Image.PreserveAspectFit
+ mipmap: true
+ source: "qrc:/images/icons/round-arrow_drop_down-24px.svg"
+ }
+
+
Text {
id: textUsernameRoot
anchors.left: userImageRoot.right
- anchors.leftMargin: 10
+ anchors.leftMargin: 16
anchors.top: textUserAliasRoot.bottom
- anchors.topMargin: 5
text: textMetricsUsernameRoot.elidedText
font.pointSize: JamiTheme.textFontSize
- color: JamiTheme.faddedFontColor
+ color: JamiTheme.faddedLastInteractionFontColor
}
TextMetrics {
id: textMetricsUserAliasRoot
font: textUserAliasRoot.font
- elide: Text.ElideMiddle
- elideWidth: accountComboBox.width - userImageRoot.width - settingsButton.width - 25
+ elide: Text.ElideRight
+ elideWidth: accountComboBox.width - userImageRoot.width - settingsButton.width - qrCodeGenerateButton.width - 55
/*
@@ -177,8 +189,8 @@ ComboBox {
id: textMetricsUsernameRoot
font: textUsernameRoot.font
- elide: Text.ElideMiddle
- elideWidth: accountComboBox.width - userImageRoot.width - settingsButton.width - 25
+ elide: Text.ElideRight
+ elideWidth: accountComboBox.width - userImageRoot.width - settingsButton.width - qrCodeGenerateButton.width - 55
/*
@@ -194,6 +206,28 @@ ComboBox {
}
}
+
+
+ HoverableButton {
+ id: qrCodeGenerateButton
+
+ anchors.right: settingsButton.left
+ anchors.rightMargin: 10
+ anchors.verticalCenter: accountComboBox.verticalCenter
+
+ buttonImageHeight: height - 8
+ buttonImageWidth: width - 8
+ radius: height / 2
+ width: 24
+ height: 24
+
+ source: "qrc:/images/qrcode.png"
+ backgroundColor: "white"
+ onClicked: {
+ qrDialog.open()
+ }
+ }
+
HoverableButton {
id: settingsButton
@@ -203,11 +237,12 @@ ComboBox {
buttonImageHeight: height - 8
buttonImageWidth: width - 8
- source: "qrc:/images/icons/round-settings-24px.svg"
radius: height / 2
width: 25
height: 25
+ source: "qrc:/images/icons/round-settings-24px.svg"
+ backgroundColor: "white"
onClicked: {
settingBtnClicked()
}
@@ -218,8 +253,7 @@ ComboBox {
implicitWidth: accountComboBox.width
implicitHeight: accountComboBox.height
-
- border.width: 0
+ color: JamiTheme.backgroundColor
}
MouseArea {
@@ -231,14 +265,21 @@ ComboBox {
propagateComposedEvents: true
onPressed: {
- if (isMouseOnSettingsButton(mouse)) {
+ if (isMouseOnButton(mouse, qrCodeGenerateButton)) {
+ qrCodeGenerateButton.backgroundColor = JamiTheme.pressColor
+ qrCodeGenerateButton.clicked()
+ }if (isMouseOnButton(mouse, settingsButton)) {
settingsButton.backgroundColor = JamiTheme.pressColor
settingsButton.clicked()
- } else
+ } else {
rootItemBackground.color = JamiTheme.pressColor
+ }
}
+
onReleased: {
- if (isMouseOnSettingsButton(mouse)) {
+ if (isMouseOnButton(mouse, qrCodeGenerateButton)) {
+ qrCodeGenerateButton.backgroundColor = JamiTheme.releaseColor
+ } else if (isMouseOnButton(mouse, settingsButton)) {
settingsButton.backgroundColor = JamiTheme.releaseColor
} else {
rootItemBackground.color = JamiTheme.releaseColor
@@ -253,31 +294,28 @@ ComboBox {
rootItemBackground.color = JamiTheme.hoverColor
}
onExited: {
- rootItemBackground.color = "white"
+ rootItemBackground.color = JamiTheme.backgroundColor
}
onMouseXChanged: {
-
-
/*
- * Manually making settings button hover.
+ * Manually making button hover.
*/
- if (isMouseOnSettingsButton(mouse)) {
- settingsButton.backgroundColor = JamiTheme.hoverColor
- rootItemBackground.color = "white"
- } else {
- settingsButton.backgroundColor = "white"
- rootItemBackground.color = JamiTheme.hoverColor
- }
+ qrCodeGenerateButton.backgroundColor = (isMouseOnButton(mouse, qrCodeGenerateButton)) ?
+ JamiTheme.hoverColor : "white"
+
+ settingsButton.backgroundColor = (isMouseOnButton(mouse, settingsButton)) ?
+ JamiTheme.hoverColor : "white"
}
- function isMouseOnSettingsButton(mouse) {
+
+ function isMouseOnButton(mouse, button) {
var mousePos = mapToItem(comboBoxRootMouseArea, mouse.x, mouse.y)
- var settingsButtonPos = mapToItem(comboBoxRootMouseArea,
- settingsButton.x,
- settingsButton.y)
- if ((mousePos.x >= settingsButtonPos.x
- && mousePos.x <= settingsButtonPos.x + settingsButton.width)
- && (mousePos.y >= settingsButtonPos.y
- && mousePos.y <= settingsButtonPos.y + settingsButton.height))
+ var qrButtonPos = mapToItem(comboBoxRootMouseArea,
+ button.x,
+ button.y)
+ if ((mousePos.x >= qrButtonPos.x
+ && mousePos.x <= qrButtonPos.x + button.width)
+ && (mousePos.y >= qrButtonPos.y
+ && mousePos.y <= qrButtonPos.y + button.height))
return true
return false
}
diff --git a/src/mainview/components/AccountComboBoxPopup.qml b/src/mainview/components/AccountComboBoxPopup.qml
index 42a17fbc..0d0c2844 100644
--- a/src/mainview/components/AccountComboBoxPopup.qml
+++ b/src/mainview/components/AccountComboBoxPopup.qml
@@ -62,7 +62,7 @@ Popup {
id: userImage
anchors.left: parent.left
- anchors.leftMargin: 5
+ anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter
width: 30
@@ -85,7 +85,7 @@ Popup {
anchors.left: userImage.right
anchors.leftMargin: 10
anchors.top: itemCoboBackground.top
- anchors.topMargin: 5
+ anchors.topMargin: 15
text: textMetricsUserAliasPopup.elidedText
font.pointSize: JamiTheme.textFontSize
@@ -97,33 +97,31 @@ Popup {
anchors.left: userImage.right
anchors.leftMargin: 10
anchors.top: textUserAliasPopup.bottom
- anchors.topMargin: 5
text: textMetricsUsernamePopup.elidedText
font.pointSize: JamiTheme.textFontSize
- color: JamiTheme.faddedFontColor
+ color: JamiTheme.faddedLastInteractionFontColor
}
TextMetrics {
id: textMetricsUserAliasPopup
- elide: Text.ElideMiddle
+ elide: Text.ElideRight
elideWidth: accountComboBox.width - userImage.width - settingsButton.width - 30
text: Alias
}
TextMetrics {
id: textMetricsUsernamePopup
- elide: Text.ElideMiddle
+ elide: Text.ElideRight
elideWidth: accountComboBox.width - userImage.width - settingsButton.width - 30
text: Username
}
background: Rectangle {
id: itemCoboBackground
-
+ color: JamiTheme.backgroundColor
implicitWidth: accountComboBox.width
implicitHeight: accountComboBox.height
- border.width: 0
}
MouseArea {
@@ -142,7 +140,7 @@ Popup {
itemCoboBackground.color = JamiTheme.hoverColor
}
onExited: {
- itemCoboBackground.color = "white"
+ itemCoboBackground.color = JamiTheme.backgroundColor
}
}
}
@@ -154,8 +152,8 @@ Popup {
implicitHeight: accountComboBox.height
text: qsTr("Add Account") + "+"
- backgroundColor: "white"
- onExitColor: "white"
+ backgroundColor: JamiTheme.backgroundColor
+ onExitColor: JamiTheme.backgroundColor
onClicked: {
comboBoxPopup.close()
@@ -167,12 +165,12 @@ Popup {
}
background: Rectangle {
id: accountComboBoxPopup
-
+ color: JamiTheme.backgroundColor
CustomBorder {
commonBorder: false
- lBorderwidth: 0
+ lBorderwidth: 1
rBorderwidth: 1
- tBorderwidth: 0
+ tBorderwidth: 1
bBorderwidth: 1
borderColor: JamiTheme.tabbarBorderColor
}
diff --git a/src/mainview/components/ContactSearchBar.qml b/src/mainview/components/ContactSearchBar.qml
index 896b48c7..3a1f52f7 100644
--- a/src/mainview/components/ContactSearchBar.qml
+++ b/src/mainview/components/ContactSearchBar.qml
@@ -19,6 +19,7 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.12
import net.jami.Models 1.0
Rectangle {
@@ -44,9 +45,8 @@ Rectangle {
fakeFocus.forceActiveFocus()
}
- border.color: JamiTheme.pressColor
- radius: 10
- color: contactSearchBar.activeFocus ? "white" : JamiTheme.contactSearchBarPlaceHolderGreyBackground
+ radius: height/2
+ color: "white"
FocusScope {
id: fakeFocus
@@ -57,7 +57,7 @@ Rectangle {
anchors.verticalCenter: contactSearchBarRect.verticalCenter
anchors.left: contactSearchBarRect.left
- anchors.leftMargin: 5
+ anchors.leftMargin: 8
width: 20
height: 20
@@ -67,6 +67,12 @@ Rectangle {
source: "qrc:/images/icons/ic_baseline-search-24px.svg"
}
+ ColorOverlay {
+ anchors.fill: searchIconImage
+ source: searchIconImage
+ color: JamiTheme.contactSearchBarPlaceHolderTextFontColor
+ }
+
TextField {
id: contactSearchBar
@@ -85,10 +91,10 @@ Rectangle {
anchors.verticalCenter: contactSearchBar.verticalCenter
anchors.left: contactSearchBar.left
- anchors.leftMargin: 5
+ anchors.leftMargin: 10
text: qsTr("Find or start a conversation")
- font.pointSize: JamiTheme.textFontSize - 1
+ font.pointSize: JamiTheme.textFontSize
color: JamiTheme.contactSearchBarPlaceHolderTextFontColor
visible: !contactSearchBar.text && !contactSearchBar.activeFocus
}
diff --git a/src/mainview/components/ConversationSmartListContextMenu.qml b/src/mainview/components/ConversationSmartListContextMenu.qml
index aece4b46..26c5406f 100644
--- a/src/mainview/components/ConversationSmartListContextMenu.qml
+++ b/src/mainview/components/ConversationSmartListContextMenu.qml
@@ -18,19 +18,34 @@
*/
import QtQuick 2.14
import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.12
import net.jami.Models 1.0
import "../../commoncomponents"
Menu {
id: contextMenu
-
property string responsibleAccountId: ""
property string responsibleConvUid: ""
property int generalMenuSeparatorCount: 0
- property int commonBorderWidth: 2
+ property int commonBorderWidth: 1
+ font.pointSize: JamiTheme.menuFontSize
+ function openMenu(){
+ visible = true
+ visible = false
+ visible = true
+ }
+
+ GeneralMenuSeparator {
+ preferredWidth: startVideoCallItem.preferredWidth
+ preferredHeight: 8
+ separatorColor: "transparent"
+ Component.onCompleted: {
+ generalMenuSeparatorCount++
+ }
+ }
/*
* All GeneralMenuItems should remain the same width / height.
@@ -39,7 +54,7 @@ Menu {
id: startVideoCallItem
itemName: qsTr("Start video call")
- topBorderWidth: commonBorderWidth
+ iconSource: "qrc:/images/icons/ic_video_call_24px.svg"
leftBorderWidth: commonBorderWidth
rightBorderWidth: commonBorderWidth
@@ -55,6 +70,7 @@ Menu {
id: startAudioCallItem
itemName: qsTr("Start audio call")
+ iconSource: "qrc:/images/icons/ic_phone_24px.svg"
leftBorderWidth: commonBorderWidth
rightBorderWidth: commonBorderWidth
@@ -70,6 +86,7 @@ Menu {
id: clearConversationItem
itemName: qsTr("Clear conversation")
+ iconSource: "qrc:/images/icons/ic_clear_24px.svg"
leftBorderWidth: commonBorderWidth
rightBorderWidth: commonBorderWidth
@@ -84,6 +101,7 @@ Menu {
id: removeContactItem
itemName: qsTr("Remove contact")
+ iconSource: "qrc:/images/icons/round-remove_circle-24px.svg"
leftBorderWidth: commonBorderWidth
rightBorderWidth: commonBorderWidth
@@ -107,6 +125,7 @@ Menu {
id: blockContactItem
itemName: qsTr("Block contact")
+ iconSource: "qrc:/images/icons/ic_block_24px.svg"
leftBorderWidth: commonBorderWidth
rightBorderWidth: commonBorderWidth
@@ -130,7 +149,7 @@ Menu {
id: profileItem
itemName: qsTr("Profile")
- bottomBorderWidth: commonBorderWidth
+ iconSource: "qrc:/images/icons/person-24px.svg"
leftBorderWidth: commonBorderWidth
rightBorderWidth: commonBorderWidth
@@ -140,6 +159,15 @@ Menu {
}
}
+ GeneralMenuSeparator {
+ preferredWidth: startVideoCallItem.preferredWidth
+ preferredHeight: 8
+ separatorColor: "transparent"
+ Component.onCompleted: {
+ generalMenuSeparatorCount++
+ }
+ }
+
background: Rectangle {
implicitWidth: startVideoCallItem.preferredWidth
implicitHeight: startVideoCallItem.preferredHeight
diff --git a/src/mainview/components/ConversationSmartListUserImage.qml b/src/mainview/components/ConversationSmartListUserImage.qml
index 6419ec4e..6f3600b2 100644
--- a/src/mainview/components/ConversationSmartListUserImage.qml
+++ b/src/mainview/components/ConversationSmartListUserImage.qml
@@ -24,8 +24,8 @@ import net.jami.Models 1.0
Image {
id: userImage
- width: 50
- height: 50
+ width: 40
+ height: 40
fillMode: Image.PreserveAspectFit
source: "data:image/png;base64," + Picture
@@ -35,9 +35,9 @@ Image {
id: presenseRect
anchors.right: userImage.right
- anchors.rightMargin: 1
+ anchors.rightMargin: -2
anchors.bottom: userImage.bottom
- anchors.bottomMargin: 2
+ anchors.bottomMargin: -2
width: 14
height: 14
@@ -57,16 +57,16 @@ Image {
}
radius: 30
- color: "white"
+ color: JamiTheme.backgroundColor
}
Rectangle {
id: unreadMessageCountRect
anchors.right: userImage.right
- anchors.rightMargin: 1
+ anchors.rightMargin: -2
anchors.top: userImage.top
- anchors.topMargin: 2
+ anchors.topMargin: -2
width: 14
height: 14
@@ -80,6 +80,7 @@ Image {
text: UnreadMessagesCount > 9 ? "···" : UnreadMessagesCount
color: "white"
+ font.pointSize: JamiTheme.textFontSize
}
radius: 30
diff --git a/src/mainview/components/ConversationSmartListViewItemDelegate.qml b/src/mainview/components/ConversationSmartListViewItemDelegate.qml
index 7a766f06..8ce018ee 100644
--- a/src/mainview/components/ConversationSmartListViewItemDelegate.qml
+++ b/src/mainview/components/ConversationSmartListViewItemDelegate.qml
@@ -25,7 +25,9 @@ import "../../commoncomponents"
ItemDelegate {
id: smartListItemDelegate
+ height: 72
+ property int lastInteractionPreferredWidth: 80
Connections {
target: conversationSmartListView
@@ -48,7 +50,7 @@ ItemDelegate {
|| conversationSmartListView.currentIndex !== index) {
itemSmartListBackground.color = Qt.binding(function () {
return InCall ? Qt.lighter(JamiTheme.selectionBlue,
- 1.8) : "white"
+ 1.8) : JamiTheme.backgroundColor
})
} else {
itemSmartListBackground.color = Qt.binding(function () {
@@ -73,134 +75,82 @@ ItemDelegate {
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
- anchors.leftMargin: 10
+ anchors.leftMargin: 16
}
- Rectangle {
- id: conversationSmartListUserInfoRect
+ RowLayout {
+ id: rowUsernameAndLastInteractionDate
anchors.left: conversationSmartListUserImage.right
- anchors.leftMargin: 10
+ anchors.leftMargin: 16
anchors.top: parent.top
+ anchors.topMargin: 16
+ anchors.right: parent.right
+ anchors.rightMargin: 10
- width: LastInteractionDate ? (parent.width - conversationSmartListUserImage.width - 20)
- / 2 : parent.width - conversationSmartListUserImage.width - 20
- height: parent.height
+ Text {
+ id: conversationSmartListUserName
+ Layout.alignment: Qt.AlignLeft
- color: "transparent"
+ TextMetrics {
+ id: textMetricsConversationSmartListUserName
+ font: conversationSmartListUserName.font
+ elide: Text.ElideRight
+ elideWidth: LastInteractionDate ? (smartListItemDelegate.width - lastInteractionPreferredWidth - conversationSmartListUserImage.width-32) :
+ smartListItemDelegate.width - lastInteractionPreferredWidth
+ text: DisplayName
+ }
+ text: textMetricsConversationSmartListUserName.elidedText
+ font.pointSize: JamiTheme.menuFontSize
+ }
- ColumnLayout {
- id: conversationSmartListUserInfoColumnLayout
-
- anchors.fill: parent
-
- Text {
- id: conversationSmartListUserName
-
- Layout.alignment: Qt.AlignLeft
-
- TextMetrics {
- id: textMetricsConversationSmartListUserName
- font: conversationSmartListUserName.font
- elide: Text.ElideMiddle
- elideWidth: conversationSmartListUserInfoRect.width
- text: DisplayName
- }
-
- text: textMetricsConversationSmartListUserName.elidedText
- font.pointSize: JamiTheme.textFontSize
+ Text {
+ id: conversationSmartListUserLastInteractionDate
+ Layout.alignment: Qt.AlignRight
+ TextMetrics {
+ id: textMetricsConversationSmartListUserLastInteractionDate
+ font: conversationSmartListUserLastInteractionDate.font
+ elide: Text.ElideRight
+ elideWidth: lastInteractionPreferredWidth
+ text: LastInteractionDate
}
- Text {
- id: conversationSmartListUserId
-
- Layout.alignment: Qt.AlignLeft
-
- fontSizeMode: Text.Fit
- color: JamiTheme.faddedFontColor
-
- TextMetrics {
- id: textMetricsConversationSmartListUserId
- font: conversationSmartListUserId.font
- elide: Text.ElideMiddle
- elideWidth: conversationSmartListUserInfoRect.width
- text: DisplayID == DisplayName ? "" : DisplayID
- }
-
- text: textMetricsConversationSmartListUserId.elidedText
- font.pointSize: JamiTheme.textFontSize
- }
+ text: textMetricsConversationSmartListUserLastInteractionDate.elidedText
+ font.pointSize: JamiTheme.textFontSize
+ color: JamiTheme.faddedLastInteractionFontColor
}
}
- Rectangle {
- id: conversationSmartListUserLastInteractionRect
- anchors.left: conversationSmartListUserInfoRect.right
- anchors.top: parent.top
+ Text {
+ id: conversationSmartListUserLastInteractionMessage
+ anchors.left: conversationSmartListUserImage.right
+ anchors.leftMargin: 16
+ anchors.bottom: rowUsernameAndLastInteractionDate.bottom
+ anchors.bottomMargin: -20
- width: (parent.width - conversationSmartListUserImage.width - 20) / 2 - 10
- height: parent.height
-
- color: "transparent"
-
- ColumnLayout {
- id: conversationSmartListUserLastInteractionColumnLayout
-
- anchors.fill: parent
-
- Text {
- id: conversationSmartListUserLastInteractionDate
-
- Layout.alignment: Qt.AlignRight
-
- TextMetrics {
- id: textMetricsConversationSmartListUserLastInteractionDate
- font: conversationSmartListUserLastInteractionDate.font
- elideWidth: conversationSmartListUserLastInteractionRect.width
- elide: Text.ElideRight
- text: LastInteractionDate
- }
-
- text: textMetricsConversationSmartListUserLastInteractionDate.elidedText
- font.pointSize: JamiTheme.textFontSize
- color: JamiTheme.faddedFontColor
- }
-
- Text {
- id: conversationSmartListUserLastInteractionMessage
-
- Layout.alignment: Qt.AlignRight
-
- fontSizeMode: Text.Fit
-
- TextMetrics {
- id: textMetricsConversationSmartListUserLastInteractionMessage
- font: conversationSmartListUserLastInteractionMessage.font
- elideWidth: conversationSmartListUserLastInteractionRect.width
- elide: Text.ElideRight
- text: InCall ? CallStateStr : (Draft ? Draft : LastInteraction)
- }
-
- font.family: "Segoe UI Emoji"
- font.hintingPreference: Font.PreferNoHinting
- text: textMetricsConversationSmartListUserLastInteractionMessage.elidedText
- font.pointSize: JamiTheme.textFontSize
- color: Draft ? JamiTheme.draftRed : JamiTheme.faddedLastInteractionFontColor
- }
+ TextMetrics {
+ id: textMetricsConversationSmartListUserLastInteractionMessage
+ font: conversationSmartListUserLastInteractionMessage.font
+ elide: Text.ElideRight
+ elideWidth: LastInteractionDate ? (smartListItemDelegate.width - lastInteractionPreferredWidth - conversationSmartListUserImage.width-32) :
+ smartListItemDelegate.width - lastInteractionPreferredWidth
+ text: InCall ? CallStateStr : (Draft ? Draft : LastInteraction)
}
+
+ font.hintingPreference: Font.PreferNoHinting
+ text: textMetricsConversationSmartListUserLastInteractionMessage.elidedText
+ font.pointSize: JamiTheme.textFontSize
+ color: Draft ? JamiTheme.draftRed : JamiTheme.faddedLastInteractionFontColor
}
+
+
background: Rectangle {
id: itemSmartListBackground
-
- color: InCall ? Qt.lighter(JamiTheme.selectionBlue, 1.8) : "white"
-
+ color: InCall ? Qt.lighter(JamiTheme.selectionBlue, 1.8) : JamiTheme.backgroundColor
implicitWidth: conversationSmartListView.width
- implicitHeight: Math.max(
- conversationSmartListUserName.height
- + textMetricsConversationSmartListUserId.height + 10,
- conversationSmartListUserImage.height + 10)
+ implicitHeight: parent.height
border.width: 0
}
@@ -244,7 +194,7 @@ ItemDelegate {
userProfile.registeredNameText = DisplayID
userProfile.idText = URI
userProfile.contactPicBase64 = Picture
- smartListContextMenu.open()
+ smartListContextMenu.openMenu()
} else if (mouse.button === Qt.LeftButton) {
conversationSmartListView.currentIndex = index
conversationSmartListView.needToSelectItems(index)
@@ -262,7 +212,7 @@ ItemDelegate {
|| conversationSmartListView.currentIndex === -1) {
itemSmartListBackground.color = Qt.binding(function () {
return InCall ? Qt.lighter(JamiTheme.selectionBlue,
- 1.8) : "white"
+ 1.8) : JamiTheme.backgroundColor
})
} else {
itemSmartListBackground.color = Qt.binding(function () {
diff --git a/src/mainview/components/MessageWebView.qml b/src/mainview/components/MessageWebView.qml
index 2045edf8..1cb9242e 100644
--- a/src/mainview/components/MessageWebView.qml
+++ b/src/mainview/components/MessageWebView.qml
@@ -29,7 +29,7 @@ import "../../commoncomponents"
Rectangle {
id: messageWebViewRect
- property int messageWebViewHeaderPreferredHeight: 60
+ property int messageWebViewHeaderPreferredHeight: 64
property string headerUserAliasLabelText: ""
property string headerUserUserNameLabelText: ""
@@ -58,8 +58,6 @@ Rectangle {
messageWebViewHeader.resetBackToWelcomeViewButtonSource(reset)
}
- anchors.fill: parent
-
JamiFileDialog {
id: jamiFileDialog
diff --git a/src/mainview/components/MessageWebViewHeader.qml b/src/mainview/components/MessageWebViewHeader.qml
index 596c672a..4f2445fd 100644
--- a/src/mainview/components/MessageWebViewHeader.qml
+++ b/src/mainview/components/MessageWebViewHeader.qml
@@ -54,7 +54,7 @@ Rectangle {
id: backToWelcomeViewButton
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
- Layout.leftMargin: 10
+ Layout.leftMargin: 16
Layout.preferredWidth: buttonPreferredSize
Layout.preferredHeight: buttonPreferredSize
@@ -83,22 +83,24 @@ Rectangle {
Layout.preferredWidth: messagingHeaderRect.width
- backToWelcomeViewButton.width - buttonGroup.width - 45
Layout.preferredHeight: messagingHeaderRect.height
- Layout.leftMargin: 10
+ Layout.leftMargin: 16
color: "transparent"
ColumnLayout {
id: userNameOrIdColumnLayout
+ Layout.alignment: Qt.AlignVCenter
+ anchors.fill: parent
Label {
id: userAliasLabel
- Layout.alignment: Qt.AlignVCenter
+ Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Layout.preferredWidth: userNameOrIdRect.width
Layout.preferredHeight: textMetricsuserAliasLabel.boundingRect.height
- Layout.topMargin: userNameOrIdRect.height / 2 - userAliasLabel.height - 4
+ Layout.topMargin: userUserNameLabel.text == "" ? 0 : 10
- font.pointSize: JamiTheme.textFontSize - 1
+ font.pointSize: JamiTheme.menuFontSize
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
@@ -117,17 +119,17 @@ Rectangle {
Label {
id: userUserNameLabel
-
- Layout.alignment: Qt.AlignVCenter
+ visible: (text != "")
+ Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Layout.preferredWidth: userNameOrIdRect.width
Layout.preferredHeight: textMetricsuserUserNameLabel.boundingRect.height
+ Layout.bottomMargin: 10
- font.pointSize: JamiTheme.textFontSize - 2
- color: JamiTheme.faddedFontColor
+ font.pointSize: JamiTheme.textFontSize
+ color: JamiTheme.faddedLastInteractionFontColor
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
-
text: textMetricsuserUserNameLabel.elidedText
}
@@ -148,7 +150,7 @@ Rectangle {
Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
Layout.preferredWidth: buttonPreferredSize * 3 + 18
Layout.preferredHeight: buttonPreferredSize
- Layout.rightMargin: 20
+ Layout.rightMargin: 16
color: "transparent"
@@ -156,6 +158,7 @@ Rectangle {
id: startAAudioCallButton
anchors.right: startAVideoCallButton.left
+ anchors.rightMargin: 16
anchors.verticalCenter: buttonGroup.verticalCenter
height: buttonPreferredSize
@@ -175,8 +178,8 @@ Rectangle {
HoverableButton {
id: startAVideoCallButton
- anchors.right: sendContactRequestButton.left
- anchors.leftMargin: 5
+ anchors.right: sendContactRequestButton.visible ? sendContactRequestButton.left : buttonGroup.right
+ anchors.rightMargin: 16
anchors.verticalCenter: buttonGroup.verticalCenter
height: buttonPreferredSize
@@ -196,7 +199,6 @@ Rectangle {
HoverableButton {
id: sendContactRequestButton
- anchors.leftMargin: 5
anchors.right: buttonGroup.right
anchors.rightMargin: 8
anchors.verticalCenter: buttonGroup.verticalCenter
@@ -206,7 +208,7 @@ Rectangle {
visible: sendContactRequestButtonVisible
radius: 30
- source: "qrc:/images/icons/ic_person_add_black_24dp_2x.png"
+ source: "qrc:/images/icons/person_add-24px.svg"
backgroundColor: "white"
onExitColor: "white"
diff --git a/src/mainview/components/RecordBox.qml b/src/mainview/components/RecordBox.qml
index b6bc0f99..274e28de 100644
--- a/src/mainview/components/RecordBox.qml
+++ b/src/mainview/components/RecordBox.qml
@@ -21,8 +21,10 @@ import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.3
-import QtGraphicalEffects 1.0
import net.jami.Models 1.0
+import QtGraphicalEffects 1.15
+import QtQuick.Shapes 1.15
+
import "../../commoncomponents"
@@ -34,7 +36,7 @@ Rectangle {
REC_SUCCESS
}
- id:recBox
+ id: recBox
color: "#FFFFFF"
width: 320
height: 240
@@ -47,25 +49,48 @@ Rectangle {
property int state: RecordBox.States.INIT
property bool isVideo: false
property bool previewAvailable: false
+ property int preferredWidth: 320
+ property int preferredHeight: 240
+ property int btnSize: 40
- property int h_offset: -65
- property int v_offset: -65
+ property int offset: 3
+ property int curveRadius: 6
+ property int x_offset: 0
+ property int y_offset: 0
function openRecorder(set_x, set_y, vid) {
+
focus = true
visible = true
- x = set_x+(width/2)+h_offset
- y = set_y-(height/2)+v_offset
+ isVideo = vid
+
+ x_offset = (isVideo ? -34 : -80)
+ scaleHeight()
+ y_offset = -64-height
updateState(RecordBox.States.INIT)
- isVideo = vid
if (isVideo){
ClientWrapper.accountAdaptor.startPreviewing(false)
previewAvailable = true
}
}
+ function scaleHeight(){
+ height = preferredHeight
+ if (isVideo) {
+ var device = ClientWrapper.avmodel.getDefaultDevice()
+ var settings = ClientWrapper.settingsAdaptor.get_Video_Settings_Size(device)
+ var res = settings.split("x")
+ var aspectRatio = res[1]/res[0]
+ if (aspectRatio) {
+ height = preferredWidth*aspectRatio
+ } else {
+ console.error("Could not scale recording video preview")
+ }
+ }
+ }
+
onActiveFocusChanged: {
if (visible) {
closeRecorder()
@@ -73,7 +98,7 @@ Rectangle {
}
onVisibleChanged: {
- if(!visible) {
+ if (!visible) {
closeRecorder()
}
}
@@ -140,6 +165,57 @@ Rectangle {
target: ClientWrapper.renderManager
}
+ Shape {
+ id: backgroundShape
+ width: recBox.width
+ height: recBox.height
+ anchors.centerIn: parent
+ x: -offset
+ y: -offset
+ ShapePath {
+ fillColor: "white"
+
+ strokeWidth: 1
+ strokeColor: JamiTheme.tabbarBorderColor
+
+ startX: -offset+curveRadius; startY: -offset
+ joinStyle: ShapePath.RoundJoin
+
+ PathLine { x: width+offset-curveRadius; y: -offset }
+
+ PathArc {
+ x: width+offset; y: -offset+curveRadius
+ radiusX: curveRadius; radiusY: curveRadius
+ }
+
+ PathLine { x: width+offset; y: height+offset-curveRadius }
+
+ PathArc {
+ x: width+offset-curveRadius; y: height+offset
+ radiusX: curveRadius; radiusY: curveRadius
+ }
+
+ PathLine { x: width/2+10; y: height+offset }
+ PathLine { x: width/2; y: height+offset+10 }
+ PathLine { x: width/2-10; y: height+offset }
+
+
+ PathLine { x: -offset+curveRadius; y: height+offset }
+
+ PathArc {
+ x: -offset; y: height+offset-curveRadius
+ radiusX: curveRadius; radiusY: curveRadius
+ }
+
+ PathLine { x: -offset; y: -offset+curveRadius }
+
+ PathArc {
+ x: -offset+curveRadius; y: -offset
+ radiusX: curveRadius; radiusY: curveRadius
+ }
+ }
+ }
+
Rectangle {
id: rectBox
visible: (isVideo && previewAvailable)
@@ -184,31 +260,26 @@ Rectangle {
text: "00:00"
color: (isVideo ? "white" : "black")
font.pointSize: (isVideo ? 12 : 20)
- anchors.horizontalCenter: parent.horizontalCenter
- anchors.horizontalCenterOffset: (isVideo ? 100 : 0)
- anchors.verticalCenter: parent.verticalCenter
- anchors.verticalCenterOffset: (isVideo ? 100 : 0)
- }
+ anchors.centerIn: recordButton
+ anchors.horizontalCenterOffset: (isVideo ? 100 : 0)
+ anchors.verticalCenterOffset: (isVideo ? 0 : -100)
+ }
HoverableRadiusButton {
id: recordButton
- Layout.maximumWidth: 30
- Layout.preferredWidth: 30
- Layout.minimumWidth: 30
- Layout.maximumHeight: 30
- Layout.preferredHeight: 30
- Layout.minimumHeight: 30
+ width: btnSize
+ height: btnSize
+
+ anchors.horizontalCenter: recBox.horizontalCenter
+ anchors.bottom: recBox.bottom
+ anchors.bottomMargin: 5
buttonImageHeight: height
buttonImageWidth: height
backgroundColor: isVideo? "#000000cc" : "white"
- anchors.horizontalCenter: parent.horizontalCenter
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 5
-
radius: height / 2
icon.source: "qrc:/images/icons/av_icons/fiber_manual_record-24px.svg"
@@ -223,22 +294,18 @@ Rectangle {
HoverableRadiusButton {
id: btnStop
- Layout.maximumWidth: 30
- Layout.preferredWidth: 30
- Layout.minimumWidth: 30
- Layout.maximumHeight: 30
- Layout.preferredHeight: 30
- Layout.minimumHeight: 30
+ width: btnSize
+ height: btnSize
+
+ anchors.horizontalCenter: recBox.horizontalCenter
+ anchors.bottom: recBox.bottom
+ anchors.bottomMargin: 5
buttonImageHeight: height
buttonImageWidth: height
backgroundColor: isVideo? "#000000cc" : "white"
- anchors.horizontalCenter: parent.horizontalCenter
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 5
-
radius: height / 2
icon.source: "qrc:/images/icons/av_icons/stop-24px-red.svg"
@@ -253,24 +320,19 @@ Rectangle {
HoverableRadiusButton {
id: btnRestart
- Layout.maximumWidth: 30
- Layout.preferredWidth: 30
- Layout.minimumWidth: 30
- Layout.maximumHeight: 30
- Layout.preferredHeight: 30
- Layout.minimumHeight: 30
+ width: btnSize
+ height: btnSize
+
+ anchors.horizontalCenter: recBox.horizontalCenter
+ anchors.horizontalCenterOffset: -25
+ anchors.bottom: recBox.bottom
+ anchors.bottomMargin: 5
buttonImageHeight: height
buttonImageWidth: height
backgroundColor: isVideo? "#000000cc" : "white"
- anchors.horizontalCenter: parent.horizontalCenter
- anchors.right: btnRestart.left
- anchors.rightMargin: 5
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 5
-
radius: height / 2
icon.source: "qrc:/images/icons/av_icons/re-record-24px.svg"
@@ -285,23 +347,19 @@ Rectangle {
HoverableRadiusButton {
id: btnSend
- Layout.maximumWidth: 30
- Layout.preferredWidth: 30
- Layout.minimumWidth: 30
- Layout.maximumHeight: 30
- Layout.preferredHeight: 30
- Layout.minimumHeight: 30
+ width: btnSize
+ height: btnSize
+
+ anchors.horizontalCenter: recBox.horizontalCenter
+ anchors.horizontalCenterOffset: 25
+ anchors.bottom: parent.bottom
+ anchors.bottomMargin: 5
buttonImageHeight: height
buttonImageWidth: height
backgroundColor: isVideo? "#000000cc" : "white"
- anchors.left: btnRestart.right
- anchors.leftMargin: 5
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 5
-
radius: height / 2
icon.source: "qrc:/images/icons/av_icons/send-24px.svg"
@@ -316,3 +374,4 @@ Rectangle {
}
}
}
+
diff --git a/src/mainview/components/SidePanel.qml b/src/mainview/components/SidePanel.qml
index 1a81d1ca..1dc18346 100644
--- a/src/mainview/components/SidePanel.qml
+++ b/src/mainview/components/SidePanel.qml
@@ -25,6 +25,7 @@ import "../../commoncomponents"
Rectangle {
id: sidePanelRect
+ color: JamiTheme.backgroundColor
property bool tabBarVisible: true
property int pendingRequestCount: 0
@@ -120,15 +121,14 @@ Rectangle {
/*
* Intended -> since strange behavior will happen without this for stackview.
*/
- anchors.fill: parent
+ anchors.top: parent.top
AccountComboBox {
id: accountComboBox
anchors.top: sidePanelRect.top
-
width: sidePanelRect.width
- height: 60
+ height: 64
currentIndex: 0
@@ -156,7 +156,8 @@ Rectangle {
onAccountChanged: {
ClientWrapper.accountAdaptor.accountChanged(index)
- accountChangedUIReset()
+ refreshAccountComboBox(0)
+ sidePanelRect.accountComboBoxNeedToShowWelcomePage(0)
}
onNeedToUpdateSmartList: {
@@ -178,134 +179,78 @@ Rectangle {
}
}
+ /*
+ * Search bar container to embed search label
+ */
+ ContactSearchBar {
+ id: contactSearchBar
+ width: sidePanelRect.width - 26
+ height: 35
+ anchors.top: accountComboBox.bottom
+ anchors.topMargin: 10
+ anchors.left: sidePanelRect.left
+ anchors.leftMargin: 16
+
+ onContactSearchBarTextChanged: {
+ ClientWrapper.utilsAdaptor.setConversationFilter(text)
+ }
+ }
+
SidePanelTabBar {
id: sidePanelTabBar
-
- anchors.top: accountComboBox.bottom
- anchors.topMargin: 20
- anchors.left: sidePanelRect.left
- anchors.leftMargin: tabBarLeftMargin
-
+ anchors.top: contactSearchBar.bottom
+ anchors.topMargin: 10
width: sidePanelRect.width
- height: Math.max(sidePanelTabBar.converstationTabHeight,
- sidePanelTabBar.invitationTabHeight)
+ height: tabBarVisible ? 64 : 0
}
- Rectangle {
- id: sidePanelColumnRect
- anchors.top: sidePanelTabBar.bottom
- anchors.topMargin: -12
+ ConversationSmartListView {
+ id: conversationSmartListView
- width: sidePanelRect.width
- height: sidePanelRect.height - accountComboBox.height - sidePanelTabBar.height
+ anchors.top: tabBarVisible ? sidePanelTabBar.bottom : contactSearchBar.bottom
+ anchors.topMargin: tabBarVisible ? 0 : 10
+ width: parent.width
+ height: tabBarVisible ? sidePanelRect.height - sidePanelTabBar.height - contactSearchBar.height - accountComboBox.height - 20 :
+ sidePanelRect.height - contactSearchBar.height - accountComboBox.height - 20
- border.color: JamiTheme.tabbarBorderColor
- radius: 10
+ Connections {
+ target: ConversationsAdapter
- Rectangle {
- id: hideTopBoarderRect
-
- anchors.top: sidePanelColumnRect.top
- anchors.left: sidePanelColumnRect.left
- anchors.leftMargin: tabBarLeftMargin + 5
-
- width: sidePanelTabBar.converstationTabWidth + sidePanelTabBar.invitationTabWidth - 9
- height: 1
-
- visible: tabBarVisible
-
- color: "white"
- }
-
- ColumnLayout {
- id: columnLayoutView
-
- anchors.centerIn: sidePanelColumnRect
-
- width: sidePanelColumnRect.width
- height: sidePanelColumnRect.height - 20
-
-
- /*
- * Search bar container to embed search label
- */
- ContactSearchBar {
- id: contactSearchBar
-
- Layout.alignment: Qt.AlignCenter
- Layout.topMargin: 10
- Layout.rightMargin: 5
- Layout.leftMargin: 5
- Layout.preferredWidth: parent.width - 10
- Layout.preferredHeight: 35
-
- onContactSearchBarTextChanged: {
- ClientWrapper.utilsAdaptor.setConversationFilter(text)
- }
+ function onShowChatView(accountId, convUid) {
+ conversationSmartListView.needToShowChatView(accountId,
+ convUid)
}
- ConversationSmartListView {
- id: conversationSmartListView
-
- Layout.alignment: Qt.AlignCenter
- Layout.preferredWidth: parent.width
- Layout.preferredHeight: parent.height - contactSearchBar.height - 30
-
- Connections {
- target: ConversationsAdapter
-
- function onShowChatView(accountId, convUid) {
- conversationSmartListView.needToShowChatView(accountId,
- convUid)
- }
-
- function onShowConversationTabs(visible) {
- tabBarVisible = visible
- updatePendingRequestCount()
- updateTotalUnreadMessagesCount()
- }
- }
-
- onNeedToSelectItems: {
- ConversationsAdapter.selectConversation(index)
- }
-
- onNeedToBackToWelcomePage: {
- sidePanelRect.conversationSmartListViewNeedToShowWelcomePage()
- }
-
- onNeedToAccessMessageWebView: {
- sidePanelRect.conversationSmartListNeedToAccessMessageWebView(
- currentUserDisplayName, currentUserAlias,
- currentUID, callStackViewShouldShow,
- isAudioOnly, callStateStr)
- }
-
- onNeedToGrabFocus: {
- contactSearchBar.clearFocus()
- }
-
- Component.onCompleted: {
- ConversationsAdapter.setQmlObject(this)
- conversationSmartListView.currentIndex = -1
- }
+ function onShowConversationTabs(visible) {
+ tabBarVisible = visible
+ updatePendingRequestCount()
+ updateTotalUnreadMessagesCount()
}
}
- }
- onTabBarVisibleChanged: {
- if (!tabBarVisible) {
- sidePanelTabBar.height = 0
- sidePanelTabBar.anchors.topMargin = 12
- sidePanelColumnRect.border.width = 0
- } else {
- sidePanelTabBar.height = Qt.binding(function () {
- return Math.max(sidePanelTabBar.converstationTabHeight,
- sidePanelTabBar.invitationTabHeight)
- })
- sidePanelTabBar.anchors.topMargin = 20
- sidePanelColumnRect.border.width = 1
+ onNeedToSelectItems: {
+ ConversationsAdapter.selectConversation(index)
+ }
+
+ onNeedToBackToWelcomePage: {
+ sidePanelRect.conversationSmartListViewNeedToShowWelcomePage()
+ }
+
+ onNeedToAccessMessageWebView: {
+ sidePanelRect.conversationSmartListNeedToAccessMessageWebView(
+ currentUserDisplayName, currentUserAlias,
+ currentUID, callStackViewShouldShow,
+ isAudioOnly, callStateStr)
+ }
+
+ onNeedToGrabFocus: {
+ contactSearchBar.clearFocus()
+ }
+
+ Component.onCompleted: {
+ ConversationsAdapter.setQmlObject(this)
+ conversationSmartListView.currentIndex = -1
}
}
}
diff --git a/src/mainview/components/SidePanelTabBar.qml b/src/mainview/components/SidePanelTabBar.qml
index d8197e1f..0d27f7ee 100644
--- a/src/mainview/components/SidePanelTabBar.qml
+++ b/src/mainview/components/SidePanelTabBar.qml
@@ -19,7 +19,9 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.12
import net.jami.Models 1.0
+import "../../commoncomponents"
TabBar {
id: tabBar
@@ -30,29 +32,26 @@ TabBar {
property alias invitationTabWidth: pageTwo.width
property alias converstationTabHeight: pageOne.height
property alias invitationTabHeight: pageTwo.height
+ property real opacityDegree: 0.5
visible: tabBarVisible
currentIndex: 0
TabButton {
+
id: pageOne
-
- width: tabBar.width / 2 - tabButtonShrinkSize
- height: textConvElement.height + 10
-
down: true
Rectangle {
id: totalUnreadMessagesCountRect
- anchors.right: pageOne.right
- anchors.rightMargin: 5
- anchors.bottom: pageOne.bottom
- anchors.bottomMargin: pageOne.height - totalUnreadMessagesCountRect.height / 2
+ anchors.centerIn: buttonRectOne
+ anchors.verticalCenterOffset : -20
+ anchors.horizontalCenterOffset : 15
- width: 14
- height: 14
+ width: 16
+ height: 16
visible: totalUnreadMessagesCount > 0
@@ -63,38 +62,71 @@ TabBar {
text: totalUnreadMessagesCount > 9 ? "···" : totalUnreadMessagesCount
color: "white"
+ font.pointSize: JamiTheme.textFontSize
}
-
radius: 30
color: JamiTheme.notificationRed
+
}
background: Rectangle {
- id: buttonRectOne
- radius: 10
- width: pageOne.width + 2
- color: pageOne.down ? "white" : JamiTheme.releaseColor
- border.color: JamiTheme.tabbarBorderColor
+ id: buttonRectOne
+ width: tabBar.width / 2 + 1
+ height: tabBar.height
+ color: JamiTheme.backgroundColor
+
+ Image {
+ id: imgRectOne
+ anchors.horizontalCenter: buttonRectOne.horizontalCenter
+ anchors.top: buttonRectOne.top
+ anchors.topMargin: 12
+
+ width: 24
+ height: 24
+
+ fillMode: Image.PreserveAspectFit
+ mipmap: true
+ source: "qrc:/images/icons/baseline-people-24px.svg"
+ //opacity: enabled ? 0.8 : 0.3
+ opacity: pageOne.down == true ? 1.0 : opacityDegree
+ }
+
+ ColorOverlay {
+ anchors.fill: imgRectOne
+ source: imgRectOne
+ color: JamiTheme.blueLogo_
+ opacity: pageOne.down == true ? 1.0 : opacityDegree
+ }
Text {
id: textConvElement
- anchors.centerIn: buttonRectOne
+ anchors.horizontalCenter: buttonRectOne.horizontalCenter
+ anchors.bottom: buttonRectOne.bottom
+ anchors.bottomMargin: 12
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
- text: qsTr("Converstation")
+ text: qsTr("CONVERSATIONS")
font.pointSize: JamiTheme.textFontSize
- opacity: enabled ? 1.0 : 0.3
+ opacity: pageOne.down == true ? 1.0 : opacityDegree
+ color: JamiTheme.blueLogo_
+ }
+
+ Rectangle {
+ id: markerTabOne
+ width: buttonRectOne.width
+ anchors.bottom: buttonRectOne.bottom
+ height: 2
+ color: pageOne.down == true ? JamiTheme.blueLogo_ : "transparent"
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onPressed: {
- buttonRectOne.color = JamiTheme.pressColor
ConversationsAdapter.setConversationFilter("")
contactSearchBar.setPlaceholderString(
JamiTheme.contactSearchBarPlaceHolderConversationText)
@@ -104,36 +136,31 @@ TabBar {
forceReselectConversationSmartListCurrentIndex()
}
onReleased: {
- buttonRectOne.color = JamiTheme.releaseColor
+ buttonRectOne.color = JamiTheme.backgroundColor
}
onEntered: {
buttonRectOne.color = JamiTheme.hoverColor
}
onExited: {
- buttonRectOne.color = Qt.binding(function () {
- return pageOne.down ? "white" : JamiTheme.releaseColor
- })
+ buttonRectOne.color = JamiTheme.backgroundColor
}
}
}
}
TabButton {
- id: pageTwo
- width: tabBar.width / 2 - tabButtonShrinkSize
- height: textInvElement.height + 10
+ id: pageTwo
Rectangle {
id: pendingRequestCountRect
- anchors.right: pageTwo.right
- anchors.rightMargin: 5
- anchors.bottom: pageTwo.bottom
- anchors.bottomMargin: pageTwo.height - pendingRequestCountRect.height / 2
+ anchors.centerIn: buttonRectTwo
+ anchors.verticalCenterOffset : -20
+ anchors.horizontalCenterOffset : 15
- width: 14
- height: 14
+ width: 16
+ height: 16
visible: pendingRequestCount > 0
@@ -143,9 +170,9 @@ TabBar {
anchors.centerIn: pendingRequestCountRect
text: pendingRequestCount > 9 ? "···" : pendingRequestCount
- color: "white"
+ color: JamiTheme.backgroundColor
+ font.pointSize: JamiTheme.textFontSize
}
-
radius: 30
color: JamiTheme.notificationRed
}
@@ -153,29 +180,63 @@ TabBar {
background: Rectangle {
id: buttonRectTwo
- radius: 10
- color: pageTwo.down ? "white" : JamiTheme.releaseColor
- border.color: JamiTheme.tabbarBorderColor
+ width: tabBar.width / 2
+ height: tabBar.height
+ color: JamiTheme.backgroundColor
+
+ Image {
+ id: imgRectTwo
+ anchors.horizontalCenter: buttonRectTwo.horizontalCenter
+ anchors.top: buttonRectTwo.top
+ anchors.topMargin: 10
+
+ width: 24
+ height: 24
+
+ fillMode: Image.PreserveAspectFit
+ mipmap: true
+ source: "qrc:/images/icons/drafts-24px.svg"
+ //opacity: enabled ? 0.8 : 0.3
+ opacity: pageTwo.down == true ? 1.0 : opacityDegree
+ }
+
+ ColorOverlay {
+ anchors.fill: imgRectTwo
+ source: imgRectTwo
+ color: JamiTheme.blueLogo_
+ opacity: pageTwo.down == true ? 1.0 : opacityDegree
+ }
Text {
id: textInvElement
- anchors.centerIn: buttonRectTwo
+ anchors.horizontalCenter: buttonRectTwo.horizontalCenter
+ anchors.bottom: buttonRectTwo.bottom
+ anchors.bottomMargin: 12
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pointSize: JamiTheme.textFontSize
- text: qsTr("Invitation")
- opacity: enabled ? 1.0 : 0.3
+ text: qsTr("INVITATIONS")
+ //opacity: enabled ? 1.0 : 0.3
+ opacity: pageTwo.down == true ? 1.0 : opacityDegree
+ color: JamiTheme.blueLogo_
+ }
+
+ Rectangle {
+ id: markerTabTwo
+ width: buttonRectTwo.width
+ anchors.bottom: buttonRectTwo.bottom
+ height: 2
+ color: pageTwo.down == true ? JamiTheme.blueLogo_ : "transparent"
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onPressed: {
- buttonRectTwo.color = JamiTheme.pressColor
ConversationsAdapter.setConversationFilter("PENDING")
contactSearchBar.setPlaceholderString(
JamiTheme.contactSearchBarPlaceHolderInivitionText)
@@ -183,15 +244,13 @@ TabBar {
pageOne.down = false
}
onReleased: {
- buttonRectTwo.color = JamiTheme.releaseColor
+ buttonRectTwo.color = JamiTheme.backgroundColor
}
onEntered: {
buttonRectTwo.color = JamiTheme.hoverColor
}
onExited: {
- buttonRectTwo.color = Qt.binding(function () {
- return pageTwo.down ? "white" : JamiTheme.releaseColor
- })
+ buttonRectTwo.color = JamiTheme.backgroundColor
}
}
}
diff --git a/src/mainview/components/UserProfile.qml b/src/mainview/components/UserProfile.qml
index 072d9a6e..fe034e78 100644
--- a/src/mainview/components/UserProfile.qml
+++ b/src/mainview/components/UserProfile.qml
@@ -32,14 +32,14 @@ Dialog {
property string registeredNameText: ""
property string idText: ""
+ property int preferredImgSize: 80
modal: true
-
/*
* Content height + margin.
*/
- contentHeight: userProfileDialogUpperPartColumnLayout.implicitHeight + 30
-
+ contentHeight: userProfileDialogLayout.implicitHeight + 60
+ contentWidth: userProfileDialogLayout.implicitWidth + 60
/*
* Fake focus to make sure that text edit lose focus on close.
@@ -48,46 +48,67 @@ Dialog {
id: fakeFocusTextEdit
}
- ColumnLayout {
- id: userProfileDialogUpperPartColumnLayout
+ contentItem: GridLayout {
- anchors.centerIn: parent
-
- spacing: 15
+ id: userProfileDialogLayout
+ columns: 2
+ rowSpacing: 10
+ columnSpacing: 10
Image {
id: contactImage
- Layout.alignment: Qt.AlignCenter
+ Layout.alignment: Qt.AlignRight
+ Layout.preferredWidth: 130
- width: 150
- height: 150
+ sourceSize.width: preferredImgSize
+ sourceSize.height: preferredImgSize
fillMode: Image.PreserveAspectFit
mipmap: true
}
-
/*
* Visible when user alias is not empty or equals to id.
*/
Text {
id: contactAlias
- Layout.alignment: Qt.AlignCenter
+ Layout.alignment: Qt.AlignLeft
- font.pointSize: JamiTheme.textFontSize
+ font.pointSize: JamiTheme.titleFontSize
text: textMetricsContactAliasText.elidedText
visible: aliasText ? (aliasText === idText ? false : true) : false
+
TextMetrics {
id: textMetricsContactAliasText
font: contactAlias.font
text: aliasText
- elideWidth: userProfileDialog.width - 30
+ elideWidth: userProfileDialog.width-160
elide: Qt.ElideMiddle
}
}
+ Item {
+ Layout.columnSpan: 2
+ height: 20
+ }
+
+ Text {
+ Layout.alignment: Qt.AlignRight
+ font.pointSize: JamiTheme.menuFontSize
+ text: qsTr("Informations")
+ }
+
+ Item { Layout.fillWidth: true }
+
+ Text {
+ Layout.alignment: Qt.AlignRight
+ font.pointSize: JamiTheme.textFontSize
+ text: qsTr("Username")
+ visible: registeredNameText ? (registeredNameText === aliasText ? false : true) : false
+ color: JamiTheme.faddedFontColor
+ }
/*
* Visible when user name is not empty or equals to alias.
@@ -95,57 +116,67 @@ Dialog {
Text {
id: contactDisplayName
- Layout.alignment: Qt.AlignCenter
+ Layout.alignment: Qt.AlignLeft
- font.pointSize: JamiTheme.textFontSize - 1
+ font.pointSize: JamiTheme.textFontSize
text: textMetricsContactDisplayNameText.elidedText
visible: registeredNameText ? (registeredNameText === aliasText ? false : true) : false
- color: JamiTheme.faddedFontColor
TextMetrics {
id: textMetricsContactDisplayNameText
font: contactDisplayName.font
text: registeredNameText
- elideWidth: userProfileDialog.width - 30
+ elideWidth: userProfileDialog.width-160
elide: Qt.ElideMiddle
}
}
+ Text {
+ Layout.alignment: Qt.AlignRight
+ font.pointSize: JamiTheme.textFontSize
+ text: qsTr("ID")
+ color: JamiTheme.faddedFontColor
+ }
+
TextEdit {
id: contactId
- Layout.alignment: Qt.AlignCenter
-
- horizontalAlignment: Text.AlignHCenter
- verticalAlignment: Text.AlignVCenter
+ Layout.alignment: Qt.AlignLeft
selectByMouse: true
readOnly: true
- font.pointSize: JamiTheme.textFontSize - 1
+ font.pointSize: JamiTheme.textFontSize
text: textMetricsContactIdText.elidedText
TextMetrics {
id: textMetricsContactIdText
font: contactId.font
text: idText
- elideWidth: userProfileDialog.width - 30
+ elideWidth: userProfileDialog.width-160
elide: Qt.ElideMiddle
}
}
+ Text {
+ Layout.alignment: Qt.AlignRight
+ font.pointSize: JamiTheme.textFontSize
+ text: qsTr("QR Code")
+ color: JamiTheme.faddedFontColor
+ }
+
Image {
id: contactQrImage
- Layout.alignment: Qt.AlignBottom | Qt.AlignCenter
-
- width: 150
- height: 150
+ Layout.alignment: Qt.AlignBottom | Qt.AlignLeft
fillMode: Image.PreserveAspectFit
- sourceSize.width: 150
- sourceSize.height: 150
+ sourceSize.width: preferredImgSize
+ sourceSize.height: preferredImgSize
mipmap: true
}
+
+ Item { height: 20 }
+
}
background: Rectangle {
diff --git a/src/mainview/components/WelcomePage.qml b/src/mainview/components/WelcomePage.qml
index a6250d00..85aea30f 100644
--- a/src/mainview/components/WelcomePage.qml
+++ b/src/mainview/components/WelcomePage.qml
@@ -29,8 +29,6 @@ Rectangle {
property int currentAccountIndex: 0
property int buttonPreferredSize: 30
- anchors.fill: parent
-
Rectangle {
id: welcomeRectComponentsGroup
@@ -81,7 +79,7 @@ Rectangle {
Layout.preferredHeight: 50
wrapMode: Text.WordWrap
- font.pointSize: JamiTheme.textFontSize - 1
+ font.pointSize: JamiTheme.textFontSize
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
@@ -117,7 +115,7 @@ Rectangle {
Layout.preferredWidth: welcomeRectComponentsGroup.width
Layout.preferredHeight: 30
- font.pointSize: JamiTheme.textFontSize
+ font.pointSize: JamiTheme.textFontSize + 1
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
@@ -136,90 +134,23 @@ Rectangle {
}
}
- RowLayout {
- id: jamiRegisteredNameRowLayout
+ HoverableButton {
+ id: copyRegisterednameButton
Layout.alignment: Qt.AlignCenter
- Layout.preferredWidth: buttonPreferredSize * 2 + 20
- Layout.preferredHeight: 30
+ Layout.preferredWidth: buttonPreferredSize
+ Layout.preferredHeight: buttonPreferredSize
- HoverableButton {
- id: copyRegisterednameButton
+ radius: 30
+ source: "qrc:/images/icons/ic_content_copy.svg"
- Layout.alignment: Qt.AlignCenter
- Layout.preferredWidth: buttonPreferredSize
- Layout.preferredHeight: buttonPreferredSize
-
- radius: 30
- source: "qrc:/images/icons/ic_content_copy.svg"
-
- onClicked: {
- ClientWrapper.utilsAdaptor.setText(
- textMetricsjamiRegisteredNameText.text)
- }
- }
-
- HoverableButton {
- id: qrCodeGenerateButton
-
- Layout.alignment: Qt.AlignCenter
- Layout.preferredWidth: buttonPreferredSize
- Layout.preferredHeight: buttonPreferredSize
-
- radius: 30
- source: "qrc:/images/qrcode.png"
-
- onClicked: {
- qrDialog.open()
- }
+ onClicked: {
+ ClientWrapper.utilsAdaptor.setText(
+ textMetricsjamiRegisteredNameText.text)
}
}
}
}
-
- Image {
- id: sipImage
-
- Layout.alignment: Qt.AlignCenter
- Layout.preferredWidth: 200
- Layout.preferredHeight: 200
-
-
- /*
- * Check if account type is ring.
- */
- visible: accountListModel.data(accountListModel.index(
- currentAccountIndex, 0),
- 260) === 1 ? false : true
- fillMode: Image.PreserveAspectFit
-
-
- /*
- * Requested size.
- */
- sourceSize.width: 200
- sourceSize.height: 200
- mipmap: true
- }
- }
-
- HoverableButton {
- id: aboutButton
-
- anchors.horizontalCenter: welcomeRectComponentsGroup.horizontalCenter
- anchors.bottom: welcomeRectComponentsGroup.bottom
- anchors.bottomMargin: 5
-
- width: 80
- height: buttonPreferredSize
-
- text: qsTr("About")
- fontPointSize: JamiTheme.textFontSize
- radius: 10
-
- onClicked: {
- aboutPopUpDialog.open()
- }
}
}