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

mainview: improve UI theme

Browse source 
- SmartList menu
- SideView/CallView separator width
- AccountComboBox
- UserProfile
- WelcomeView
- Rescale RecordBox

Change-Id: I5bb75bddcd49c5ff8b48ee9568942df015292e14
Gitlab: #574
This commit is contained in:
ababi 2020-07-30 13:38:57 +02:00 • committed by Sébastien Blin
parent 1b2590708e
commit df651a2486
20 changed files with 632 additions and 555 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
images/icons/drafts-24px.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M21.99 8c0-.72-.37-1.35-.94-1.7L12 1 2.95 6.3C2.38 6.65 2 7.28 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2l-.01-10zM12 13L3.74 7.84 12 3l8.26 4.84L12 13z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 286 B

1
images/icons/person-24px.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 247 B

1
images/icons/person_add-24px.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 279 B

5
ressources.qrc
View file

@ -39,7 +39,7 @@
<file>images/icons/ic_clear_24px.svg</file>
<file>images/icons/ic_close_white_24dp.png</file>
<file>images/icons/ic_content_copy.svg</file>
<file>images/icons/ic_delete_black_18dp_2x.png</file>
<file>images/icons/ic_delete_black_18dp_2x.png</file>
<file>images/icons/ic_done_white_24dp.png</file>
<file>images/icons/ic_exit_full_screen_black.png</file>
<file>images/icons/ic_folder_black_18dp_2x.png</file>
@ -107,5 +107,8 @@
<file>images/icons/ic_close_black_24dp.png</file>
<file>images/icons/extension_24dp.svg</file>
<file>images/icons/settings_backup_restore-black-18dp.svg</file>
<file>images/icons/person-24px.svg</file>
<file>images/icons/drafts-24px.svg</file>
<file>images/icons/person_add-24px.svg</file>
</qresource>
</RCC>

22
src/commoncomponents/GeneralMenuItem.qml
View file

@ -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
}

8
src/constant/JamiTheme.qml
View file

@ -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)

39
src/mainview/MainView.qml
View file

@ -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()
}
}

122
src/mainview/components/AccountComboBox.qml
View file

@ -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
}

26
src/mainview/components/AccountComboBoxPopup.qml
View file

@ -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
}

18
src/mainview/components/ContactSearchBar.qml
View file

@ -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
}

36
src/mainview/components/ConversationSmartListContextMenu.qml
View file

@ -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

15
src/mainview/components/ConversationSmartListUserImage.qml
View file

@ -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

170
src/mainview/components/ConversationSmartListViewItemDelegate.qml
View file

@ -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 () {

4
src/mainview/components/MessageWebView.qml
View file

@ -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

32
src/mainview/components/MessageWebViewHeader.qml
View file

@ -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"

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

@ -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 {
}
}
}

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

@ -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
}
}
}

151
src/mainview/components/SidePanelTabBar.qml
View file

@ -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
}
}
}

93
src/mainview/components/UserProfile.qml
View file

@ -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 {

91
src/mainview/components/WelcomePage.qml
View file

@ -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()
}
}
}