Update ICS design in chat.

New algorithm to compute needed width on dynamic texts. Fix binding loops on scrolls. Fix texts display in reply preview.
2026-01-17 11:28:07 +00:00 · 2022-06-30 19:14:14 +02:00 · 2022-06-30 19:14:14 +02:00 · bdcef22069
commit bdcef22069
parent 235b5bda7c
26 changed files with 194 additions and 229 deletions
--- a/linphone-app/assets/languages/da.ts
+++ b/linphone-app/assets/languages/da.ts
@ -524,11 +524,6 @@ Server url ikke konfigureret.</translation>
        <extracomment>&apos;Description&apos; : Title for the conference description.</extracomment>
        <translation type="unfinished"></translation>
    </message>
-    <message>
-        <source>icsconferenceAddressTitle</source>
-        <extracomment>&apos;Conference address&apos; : Title for the conference address.</extracomment>
-        <translation type="unfinished"></translation>
-    </message>
    <message>
        <source>icsJoinButton</source>
        <extracomment>&apos;Join&apos; : Action button to join the conference.</extracomment>
--- a/linphone-app/assets/languages/de.ts
+++ b/linphone-app/assets/languages/de.ts
@ -524,11 +524,6 @@ Server URL ist nicht konfiguriert.</translation>
        <extracomment>&apos;Description&apos; : Title for the conference description.</extracomment>
        <translation type="unfinished"></translation>
    </message>
-    <message>
-        <source>icsconferenceAddressTitle</source>
-        <extracomment>&apos;Conference address&apos; : Title for the conference address.</extracomment>
-        <translation type="unfinished"></translation>
-    </message>
    <message>
        <source>icsJoinButton</source>
        <extracomment>&apos;Join&apos; : Action button to join the conference.</extracomment>
--- a/linphone-app/assets/languages/en.ts
+++ b/linphone-app/assets/languages/en.ts
@ -524,11 +524,6 @@ Server URL not configured.</translation>
        <extracomment>&apos;Description&apos; : Title for the conference description.</extracomment>
        <translation>Description</translation>
    </message>
-    <message>
-        <source>icsconferenceAddressTitle</source>
-        <extracomment>&apos;Conference address&apos; : Title for the conference address.</extracomment>
-        <translation>Conference address</translation>
-    </message>
    <message>
        <source>icsJoinButton</source>
        <extracomment>&apos;Join&apos; : Action button to join the conference.</extracomment>
--- a/linphone-app/assets/languages/es.ts
+++ b/linphone-app/assets/languages/es.ts
@ -524,11 +524,6 @@ URL del servidor no configurada.</translation>
        <extracomment>&apos;Description&apos; : Title for the conference description.</extracomment>
        <translation type="unfinished"></translation>
    </message>
-    <message>
-        <source>icsconferenceAddressTitle</source>
-        <extracomment>&apos;Conference address&apos; : Title for the conference address.</extracomment>
-        <translation type="unfinished"></translation>
-    </message>
    <message>
        <source>icsJoinButton</source>
        <extracomment>&apos;Join&apos; : Action button to join the conference.</extracomment>
--- a/linphone-app/assets/languages/fr_FR.ts
+++ b/linphone-app/assets/languages/fr_FR.ts
@ -524,11 +524,6 @@ URL du serveur non configurée.</translation>
        <extracomment>&apos;Description&apos; : Title for the conference description.</extracomment>
        <translation type="unfinished"></translation>
    </message>
-    <message>
-        <source>icsconferenceAddressTitle</source>
-        <extracomment>&apos;Conference address&apos; : Title for the conference address.</extracomment>
-        <translation type="unfinished"></translation>
-    </message>
    <message>
        <source>icsJoinButton</source>
        <extracomment>&apos;Join&apos; : Action button to join the conference.</extracomment>
--- a/linphone-app/assets/languages/hu.ts
+++ b/linphone-app/assets/languages/hu.ts
@ -523,11 +523,6 @@ A kiszolgáló URL-je nincs konfigurálva.</translation>
        <extracomment>&apos;Description&apos; : Title for the conference description.</extracomment>
        <translation type="unfinished"></translation>
    </message>
-    <message>
-        <source>icsconferenceAddressTitle</source>
-        <extracomment>&apos;Conference address&apos; : Title for the conference address.</extracomment>
-        <translation type="unfinished"></translation>
-    </message>
    <message>
        <source>icsJoinButton</source>
        <extracomment>&apos;Join&apos; : Action button to join the conference.</extracomment>
--- a/linphone-app/assets/languages/it.ts
+++ b/linphone-app/assets/languages/it.ts
@ -524,11 +524,6 @@ URL del server non configurato.</translation>
        <extracomment>&apos;Description&apos; : Title for the conference description.</extracomment>
        <translation type="unfinished">Descrizione</translation>
    </message>
-    <message>
-        <source>icsconferenceAddressTitle</source>
-        <extracomment>&apos;Conference address&apos; : Title for the conference address.</extracomment>
-        <translation type="unfinished">Indirizzo conferenza</translation>
-    </message>
    <message>
        <source>icsJoinButton</source>
        <extracomment>&apos;Join&apos; : Action button to join the conference.</extracomment>
--- a/linphone-app/assets/languages/ja.ts
+++ b/linphone-app/assets/languages/ja.ts
@ -523,11 +523,6 @@
        <extracomment>&apos;Description&apos; : Title for the conference description.</extracomment>
        <translation type="unfinished"></translation>
    </message>
-    <message>
-        <source>icsconferenceAddressTitle</source>
-        <extracomment>&apos;Conference address&apos; : Title for the conference address.</extracomment>
-        <translation type="unfinished"></translation>
-    </message>
    <message>
        <source>icsJoinButton</source>
        <extracomment>&apos;Join&apos; : Action button to join the conference.</extracomment>
--- a/linphone-app/assets/languages/lt.ts
+++ b/linphone-app/assets/languages/lt.ts
@ -525,11 +525,6 @@ Nesukonfigūruotas serverio url.</translation>
        <extracomment>&apos;Description&apos; : Title for the conference description.</extracomment>
        <translation type="unfinished"></translation>
    </message>
-    <message>
-        <source>icsconferenceAddressTitle</source>
-        <extracomment>&apos;Conference address&apos; : Title for the conference address.</extracomment>
-        <translation type="unfinished"></translation>
-    </message>
    <message>
        <source>icsJoinButton</source>
        <extracomment>&apos;Join&apos; : Action button to join the conference.</extracomment>
--- a/linphone-app/assets/languages/pt_BR.ts
+++ b/linphone-app/assets/languages/pt_BR.ts
@ -524,11 +524,6 @@ URL do servidor não configurado.</translation>
        <extracomment>&apos;Description&apos; : Title for the conference description.</extracomment>
        <translation type="unfinished"></translation>
    </message>
-    <message>
-        <source>icsconferenceAddressTitle</source>
-        <extracomment>&apos;Conference address&apos; : Title for the conference address.</extracomment>
-        <translation type="unfinished"></translation>
-    </message>
    <message>
        <source>icsJoinButton</source>
        <extracomment>&apos;Join&apos; : Action button to join the conference.</extracomment>
--- a/linphone-app/assets/languages/ru.ts
+++ b/linphone-app/assets/languages/ru.ts
@ -525,11 +525,6 @@
        <extracomment>&apos;Description&apos; : Title for the conference description.</extracomment>
        <translation type="unfinished">Описание</translation>
    </message>
-    <message>
-        <source>icsconferenceAddressTitle</source>
-        <extracomment>&apos;Conference address&apos; : Title for the conference address.</extracomment>
-        <translation type="unfinished">Адрес конференции</translation>
-    </message>
    <message>
        <source>icsJoinButton</source>
        <extracomment>&apos;Join&apos; : Action button to join the conference.</extracomment>
--- a/linphone-app/assets/languages/sv.ts
+++ b/linphone-app/assets/languages/sv.ts
@ -524,11 +524,6 @@ Serverwebbadressen är inte konfigurerad.</translation>
        <extracomment>&apos;Description&apos; : Title for the conference description.</extracomment>
        <translation type="unfinished"></translation>
    </message>
-    <message>
-        <source>icsconferenceAddressTitle</source>
-        <extracomment>&apos;Conference address&apos; : Title for the conference address.</extracomment>
-        <translation type="unfinished"></translation>
-    </message>
    <message>
        <source>icsJoinButton</source>
        <extracomment>&apos;Join&apos; : Action button to join the conference.</extracomment>
--- a/linphone-app/assets/languages/tr.ts
+++ b/linphone-app/assets/languages/tr.ts
@ -523,11 +523,6 @@ Sunucu url&apos;si yapılandırılmadı.</translation>
        <extracomment>&apos;Description&apos; : Title for the conference description.</extracomment>
        <translation type="unfinished"></translation>
    </message>
-    <message>
-        <source>icsconferenceAddressTitle</source>
-        <extracomment>&apos;Conference address&apos; : Title for the conference address.</extracomment>
-        <translation type="unfinished"></translation>
-    </message>
    <message>
        <source>icsJoinButton</source>
        <extracomment>&apos;Join&apos; : Action button to join the conference.</extracomment>
--- a/linphone-app/assets/languages/uk.ts
+++ b/linphone-app/assets/languages/uk.ts
@ -525,11 +525,6 @@
        <extracomment>&apos;Description&apos; : Title for the conference description.</extracomment>
        <translation type="unfinished"></translation>
    </message>
-    <message>
-        <source>icsconferenceAddressTitle</source>
-        <extracomment>&apos;Conference address&apos; : Title for the conference address.</extracomment>
-        <translation type="unfinished"></translation>
-    </message>
    <message>
        <source>icsJoinButton</source>
        <extracomment>&apos;Join&apos; : Action button to join the conference.</extracomment>
--- a/linphone-app/assets/languages/zh_CN.ts
+++ b/linphone-app/assets/languages/zh_CN.ts
@ -523,11 +523,6 @@
        <extracomment>&apos;Description&apos; : Title for the conference description.</extracomment>
        <translation type="unfinished"></translation>
    </message>
-    <message>
-        <source>icsconferenceAddressTitle</source>
-        <extracomment>&apos;Conference address&apos; : Title for the conference address.</extracomment>
-        <translation type="unfinished"></translation>
-    </message>
    <message>
        <source>icsJoinButton</source>
        <extracomment>&apos;Join&apos; : Action button to join the conference.</extracomment>
--- a/linphone-app/resources.qrc
+++ b/linphone-app/resources.qrc
@ -291,6 +291,7 @@
 		<file>ui/modules/Common/Styles/qmldir</file>
 		<file>ui/modules/Common/Styles/Tooltip/TooltipStyle.qml</file>
 		<file>ui/modules/Common/Styles/Window/WindowStyle.qml</file>
+		<file>ui/modules/Common/Text/Text.qml</file>
 		<file>ui/modules/Common/Tooltip/TooltipArea.qml</file>
 		<file>ui/modules/Common/Tooltip/Tooltip.qml</file>
 		<file>ui/modules/Common/View/ScrollableListView.qml</file>
--- a/linphone-app/src/components/other/colors/ColorListModel.hpp
+++ b/linphone-app/src/components/other/colors/ColorListModel.hpp
@ -216,9 +216,9 @@ class ColorListModel : public ProxyListModel {
 		ADD_COLOR("me_p_b_bg", "transparent", "[M] Menu pressed button : background")
 		ADD_COLOR_WITH_LINK("me_u_b_bg", "", "[M] Menu updating button : background", "me_p_b_bg")
 		
-		ADD_COLOR("me_n_b_fg", "#96A5B1", "[M] Menu normal button : foreground")
+		ADD_COLOR("me_n_b_fg", "#4B5964", "[M] Menu normal button : foreground")
 		ADD_COLOR("me_d_b_fg", "#8096A5B1", "[M] Menu disabled button : foreground")
-		ADD_COLOR("me_h_b_fg", "#4B5964", "[M] Menu hovered button : foreground")
+		ADD_COLOR("me_h_b_fg", "#96A5B1", "[M] Menu hovered button : foreground")
 		ADD_COLOR("me_p_b_fg", "#FF5E00", "[M] Menu pressed button : foreground")
 		ADD_COLOR_WITH_LINK("me_u_b_fg", "", "[M] Menu updating button : background", "me_p_b_fg")
 // Inverse
--- a/linphone-app/ui/modules/Common/Form/Fields/TextAreaField.qml
+++ b/linphone-app/ui/modules/Common/Form/Fields/TextAreaField.qml
@ -17,6 +17,7 @@ Rectangle {
 	property alias readOnly: textArea.readOnly
 	property int padding: TextAreaFieldStyle.text.padding
 	property alias implicitHeight: flickable.contentHeight
+	property int fitWidth: 0
 	
 	height: TextAreaFieldStyle.background.height
 	width: TextAreaFieldStyle.background.width
@ -30,7 +31,22 @@ Rectangle {
 		   : TextAreaFieldStyle.background.color.normal
 	
 	radius: TextAreaFieldStyle.background.radius
-	
+// Fit Width computation
+	onTextChanged:{
+		var lines = text.split('\n')
+		var totalWidth = 0
+		for(var index in lines){
+			metrics.text = lines[index]
+			if( totalWidth < metrics.width)
+				totalWidth = metrics.width
+		 }
+		 fitWidth = totalWidth
+	}
+	TextMetrics{
+		id: metrics
+		font: mainItem.font
+	}
+//-----------------------------------
 	Flickable {
 		id: flickable
 		anchors.fill: parent
@ -39,9 +55,11 @@ Rectangle {
 		
 		ScrollBar.vertical: ForceScrollBar {
 			id: scrollBar
-			policy: flickable.contentHeight > flickable.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
+			//policy: flickable.contentHeight > height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff	// Do not use because of binding loop issues
+			contentSizeTarget: flickable.contentHeight
+			sizeTarget: flickable.height
+			Component.onCompleted: updatePolicy()
 		}
-		
 		TextArea.flickable: TextArea {
 			id: textArea
 			
--- a/linphone-app/ui/modules/Common/Misc/ForceScrollBar.qml
+++ b/linphone-app/ui/modules/Common/Misc/ForceScrollBar.qml
@ -8,23 +8,42 @@ import Common.Styles 1.0
 // =============================================================================

 ScrollBar {
-  id: scrollBar
-
-  background: Rectangle {
-    anchors.fill: parent
-    color: ForceScrollBarStyle.background.color
-	radius: ForceScrollBarStyle.background.radius
-  }
-  contentItem: Rectangle {
-    color: scrollBar.pressed
-      ? ForceScrollBarStyle.color.pressed
-      : (scrollBar.hovered
-         ? ForceScrollBarStyle.color.hovered
-         : ForceScrollBarStyle.color.normal
-        )
-    implicitHeight: ForceScrollBarStyle.contentItem.implicitHeight
-    implicitWidth: ForceScrollBarStyle.contentItem.implicitWidth
-    radius: ForceScrollBarStyle.contentItem.radius
-  }
-  hoverEnabled: true
+	id: scrollBar
+	property int contentSizeTarget
+	property int sizeTarget
+	
+	onContentSizeTargetChanged: delayUpdatePolicy.restart()
+	onSizeTargetChanged:  delayUpdatePolicy.restart()
+	
+	policy: ScrollBar.AlwaysOff
+	function updatePolicy(){
+		policy = contentSizeTarget > sizeTarget ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
+	}
+	function delayPolicy(){
+		delayUpdatePolicy.restart()
+	}
+	Component.onCompleted: updatePolicy()
+	Timer{// Delay to avoid binding loops
+		id:delayUpdatePolicy
+		interval:10
+		onTriggered: scrollBar.updatePolicy()
+	}
+	
+	background: Rectangle {
+		anchors.fill: parent
+		color: ForceScrollBarStyle.background.color
+		radius: ForceScrollBarStyle.background.radius
+	}
+	contentItem: Rectangle {
+		color: scrollBar.pressed
+			   ? ForceScrollBarStyle.color.pressed
+			   : (scrollBar.hovered
+				  ? ForceScrollBarStyle.color.hovered
+				  : ForceScrollBarStyle.color.normal
+				  )
+		implicitHeight: ForceScrollBarStyle.contentItem.implicitHeight
+		implicitWidth: ForceScrollBarStyle.contentItem.implicitWidth
+		radius: ForceScrollBarStyle.contentItem.radius
+	}
+	hoverEnabled: true
 }
--- a/linphone-app/ui/modules/Common/Text/Text.qml
+++ b/linphone-app/ui/modules/Common/Text/Text.qml
@ -0,0 +1,30 @@
+import QtQuick 2.7 as QtQuick
+import QtQuick.Controls 2.2
+
+import Common.Styles 1.0
+
+
+QtQuick.Text {
+	id: mainItem
+	property bool computeFitWidth: false	// Avoid doing computations if not needed
+	property int fitWidth: 0
+	
+	// Fit Width computation
+	onTextChanged:{
+		if(computeFitWidth) {
+			var lines = text.split('\n')
+			var totalWidth = 0
+			for(var index in lines){
+				metrics.text = lines[index]
+				if( totalWidth < metrics.width)
+					totalWidth = metrics.width
+			 }
+			 fitWidth = totalWidth
+		}
+	}
+	QtQuick.TextMetrics{
+		id: metrics
+		font: mainItem.font
+	}
+//-----------------------------------
+}
--- a/linphone-app/ui/modules/Common/View/ScrollableListView.qml
+++ b/linphone-app/ui/modules/Common/View/ScrollableListView.qml
@ -39,33 +39,15 @@ ListView {
 	ScrollBar.vertical: ForceScrollBar {
 		id: vScrollBar
 		onPressedChanged: pressed ? view.movementStarted() : view.movementEnded()
-		// ScrollBar.AsNeeded doesn't work. Do it ourself.
-		policy: ScrollBar.AlwaysOff
-		function updatePolicy(){
-			policy = (view.orientation == Qt.Vertical && view.contentHeight > view.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff)
-		}
-		Timer{// Delay to avoid binding loops
-			id:delayUpdateVPolicy
-			interval:10
-			onTriggered: vScrollBar.updatePolicy()
-		}
-		Component.onCompleted: if(!hideScrollBars) updatePolicy()
+		contentSizeTarget: view.contentHeight
+		sizeTarget: view.height
 	}
 	ScrollBar.horizontal: ForceScrollBar {
 		id: hScrollBar
 		
 		onPressedChanged: pressed ? view.movementStarted() : view.movementEnded()
-		// ScrollBar.AsNeeded doesn't work. Do it ourself.
-		policy: ScrollBar.AlwaysOff
-		function updatePolicy() {
-			policy = (view.orientation == Qt.Horizontal && view.contentWidth > view.width? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff)
-		}
-		Timer{// Delay to avoid binding loops
-			id:delayUpdateHPolicy
-			interval:10
-			onTriggered: hScrollBar.updatePolicy()
-		}
-		Component.onCompleted: if(!hideScrollBars) updatePolicy()
+		contentSizeTarget: view.contentWidth
+		sizeTarget: view.width
 	}
 	// ---------------------------------------------------------------------------
 	boundsMovement: Flickable.StopAtBounds
@ -77,15 +59,7 @@ ListView {
 	synchronousDrag: true
 	onContentHeightChanged: {
 		cacheBuffer= (view.contentHeight > 0 ? view.contentHeight : 0)
-		if(!hideScrollBars)
-			delayUpdateVPolicy.restart()
 	}
-	onHeightChanged: {
-		if(!hideScrollBars)
-			delayUpdateVPolicy.restart()
-	}
-	onContentWidthChanged: if(!hideScrollBars) delayUpdateHPolicy.restart()
-	onWidthChanged: if(!hideScrollBars) delayUpdateHPolicy.restart()
 	cacheBuffer: height > 0 ? height : 0
 	// ---------------------------------------------------------------------------
 	
--- a/linphone-app/ui/modules/Common/qmldir
+++ b/linphone-app/ui/modules/Common/qmldir
@ -93,6 +93,8 @@ DesktopPopup            1.0 Popup/DesktopPopup.qml
 Popup                   1.0 Popup/Popup.qml
 PopupShadow             1.0 Popup/PopupShadow.qml

+Text                    1.0 Text/Text.qml
+
 TooltipArea             1.0 Tooltip/TooltipArea.qml

 ToolTip             	1.0 Tooltip/Tooltip.qml
--- a/linphone-app/ui/modules/Linphone/Chat/ChatCalendarMessage.qml
+++ b/linphone-app/ui/modules/Linphone/Chat/ChatCalendarMessage.qml
@ -135,7 +135,7 @@ Loader{
 				id: participantsRow
 				Layout.fillWidth: true
 				Layout.fillHeight: true
-				Layout.minimumHeight: mainItem.isExpanded ? expandedParticipantsList.minimumHeight : ChatCalendarMessageStyle.lineHeight
+				Layout.minimumHeight: 4 + (mainItem.isExpanded ? expandedParticipantsList.minimumHeight : ChatCalendarMessageStyle.lineHeight)
 				Layout.alignment: Qt.AlignTop
 				Layout.leftMargin: 5
 				Layout.rightMargin: 10
@ -148,7 +148,8 @@ Loader{
 					Layout.alignment: Qt.AlignTop
 					clip: false
 					Icon{
-						anchors.centerIn: parent	
+						anchors.top: parent.top
+						anchors.horizontalCenter: parent.horizontalCenter
 						icon: ChatCalendarMessageStyle.participants.icon
 						iconSize: ChatCalendarMessageStyle.participants.iconSize
 						overwriteColor: ChatCalendarMessageStyle.participants.color
@ -159,6 +160,7 @@ Loader{
 					id: participantsList
 					Layout.fillWidth: true
 					Layout.preferredHeight: ChatCalendarMessageStyle.lineHeight
+					Layout.topMargin: 4
 					Layout.alignment: Qt.AlignTop
 					visible: !mainItem.isExpanded
 					color: ChatCalendarMessageStyle.participants.color
@ -170,6 +172,7 @@ Loader{
 					id: expandedParticipantsList
 					property int minimumHeight: Math.min( count * ChatCalendarMessageStyle.lineHeight, layout.height/(descriptionTitle.visible?3:2))
 					Layout.fillWidth: true
+					Layout.topMargin: 4
 					Layout.minimumHeight: minimumHeight
 					Layout.alignment: Qt.AlignTop
 					spacing: 0
--- a/linphone-app/ui/modules/Linphone/Chat/ChatConferenceInvitationMessage.qml
+++ b/linphone-app/ui/modules/Linphone/Chat/ChatConferenceInvitationMessage.qml
@ -26,8 +26,8 @@ Loader{
 	property ContentModel contentModel
 	property ConferenceInfoModel conferenceInfoModel: contentModel ? contentModel.conferenceInfoModel : null
 	property int maxWidth : parent.width
-	property int fitHeight: active && item ? item.fitHeight + ChatCalendarMessageStyle.topMargin+ChatCalendarMessageStyle.bottomMargin + (isExpanded? 200 : 0): 0
-	property int fitWidth: active && item ? item.fitWidth  + ChatCalendarMessageStyle.widthMargin*2 : 0
+	property int fitHeight: active && item ? item.fitHeight + (isExpanded? 200 : 0): 0
+	property int fitWidth: active && item ? Math.min(maxWidth, item.fitWidth  + ChatCalendarMessageStyle.widthMargin*2) : 0
 	property bool containsMouse: false
 	property int gotoButtonMode: -1	//-1: hide, 0:goto, 1:MoreInfo
 	property bool isExpanded : false
@ -60,25 +60,26 @@ Loader{
 		
 		ColumnLayout{
 			id: layout
-			property int fitHeight: Layout.minimumHeight + (description.visible?description.implicitHeight + 5: 0)
-			property int fitWidth: (editButton.visible?editButton.width:0) + copyButton.width + joinButton.width + linkTitle.implicitWidth
+			property int fitHeight: Layout.minimumHeight + (description.visible?description.implicitHeight + 5: 5)
+			property int fitWidth: Math.max(shareButton.width + joinButton.width, description.fitWidth)
 			anchors.fill: parent
 			spacing: 0
 			Text{
 				Layout.fillWidth: true
-				Layout.topMargin: 10
-				Layout.leftMargin: 10
+				Layout.topMargin: 5
+				Layout.leftMargin: 5
 				Layout.alignment: Qt.AlignRight
 				elide: Text.ElideRight
-				color: ChatCalendarMessageStyle.subject.color
-				font.pointSize: ChatCalendarMessageStyle.subject.pointSize
+				color: ChatCalendarMessageStyle.type.color
+				font.pointSize: ChatCalendarMessageStyle.type.pointSize
+				font.weight: Font.Bold
 				//: 'Meeting invite' : ICS title that is an invitation.
-				text: qsTr('icsMeetingInvite') +': ' + UtilsCpp.getDisplayName(mainItem.conferenceInfoModel.organizer)
+				text: qsTr('icsMeetingInvite') +': '// + UtilsCpp.getDisplayName(mainItem.conferenceInfoModel.organizer)
 			}
 			Text{
 				id: title
 				Layout.fillWidth: true
-				Layout.leftMargin: 10
+				Layout.leftMargin: 5
 				Layout.alignment: Qt.AlignRight
 				elide: Text.ElideRight
 				color: ChatCalendarMessageStyle.subject.color
@ -112,59 +113,59 @@ Loader{
 					text:  qsTr('icsParticipants', '', participantCount).arg(participantCount)
 				}
 			}
-			
-			RowLayout {
-				id: dateRow
+			ColumnLayout{
 				Layout.fillWidth: true
-				Layout.preferredHeight: ChatCalendarMessageStyle.calendar.iconSize
 				Layout.leftMargin: 5
 				Layout.rightMargin: 15
-				
-				spacing: ChatCalendarMessageStyle.calendar.spacing
-				
-				Icon{
-					icon: ChatCalendarMessageStyle.calendar.icon
-					iconSize: ChatCalendarMessageStyle.calendar.iconSize
-					overwriteColor: ChatCalendarMessageStyle.calendar.color
-				}
-				
-				Text {
-					id: conferenceDate
+				spacing: 0
+				RowLayout {
+					id: dateRow
 					Layout.fillWidth: true
-					Layout.minimumWidth: implicitWidth
-					verticalAlignment: Qt.AlignVCenter
-					color: ChatCalendarMessageStyle.schedule.color
-					elide: Text.ElideRight
-					font.pointSize: ChatCalendarMessageStyle.calendar.pointSize
-					text: Qt.formatDate(mainItem.conferenceInfoModel.dateTimeUtc, 'yyyy/MM/dd')
+					Layout.preferredHeight: conferenceDate.implicitHeight
+					spacing: ChatCalendarMessageStyle.calendar.spacing
+					
+					Icon{
+						icon: ChatCalendarMessageStyle.calendar.icon
+						iconSize: ChatCalendarMessageStyle.calendar.iconSize-2
+						overwriteColor: ChatCalendarMessageStyle.calendar.color
+					}
+					
+					Text {
+						id: conferenceDate
+						Layout.fillWidth: true
+						Layout.minimumWidth: implicitWidth
+						verticalAlignment: Qt.AlignVCenter
+						color: ChatCalendarMessageStyle.schedule.color
+						elide: Text.ElideRight
+						font.pointSize: Units.dp * 8
+						text: Qt.formatDate(mainItem.conferenceInfoModel.dateTimeUtc, 'yyyy/MM/dd')
+					}
 				}
-			}
-			RowLayout {
-				id: conferenceTimeRow
-				Layout.fillWidth: true
-				Layout.preferredHeight: ChatCalendarMessageStyle.schedule.iconSize
-				Layout.leftMargin: 5
-				Layout.rightMargin: 15
-				
-				spacing: ChatCalendarMessageStyle.schedule.spacing
-				
-				Icon{
-					icon: ChatCalendarMessageStyle.schedule.icon
-					iconSize: ChatCalendarMessageStyle.schedule.iconSize
-					overwriteColor: ChatCalendarMessageStyle.schedule.color
-				}
-				
-				Text {
-					id: conferenceTime
+				RowLayout {
+					id: conferenceTimeRow
 					Layout.fillWidth: true
-					Layout.minimumWidth: implicitWidth
-					verticalAlignment: Qt.AlignVCenter
-					color: ChatCalendarMessageStyle.schedule.color
-					elide: Text.ElideRight
-					font.pointSize: ChatCalendarMessageStyle.schedule.pointSize
-					text: Qt.formatDateTime(mainItem.conferenceInfoModel.dateTimeUtc, 'hh:mm')
-						  + (mainItem.conferenceInfoModel.duration > 0 ? ' ('+Utils.formatDuration(mainItem.conferenceInfoModel.duration * 60) + ')'
-																	   : '')
+					Layout.preferredHeight: conferenceTime.implicitHeight
+					
+					spacing: ChatCalendarMessageStyle.schedule.spacing
+					
+					Icon{
+						icon: ChatCalendarMessageStyle.schedule.icon
+						iconSize: ChatCalendarMessageStyle.schedule.iconSize-2
+						overwriteColor: ChatCalendarMessageStyle.schedule.color
+					}
+					
+					Text {
+						id: conferenceTime
+						Layout.fillWidth: true
+						Layout.minimumWidth: implicitWidth
+						verticalAlignment: Qt.AlignVCenter
+						color: ChatCalendarMessageStyle.schedule.color
+						elide: Text.ElideRight
+						font.pointSize: Units.dp * 8
+						text: Qt.formatDateTime(mainItem.conferenceInfoModel.dateTimeUtc, 'hh:mm')
+							  + (mainItem.conferenceInfoModel.duration > 0 ? ' ('+Utils.formatDuration(mainItem.conferenceInfoModel.duration * 60) + ')'
+																		   : '')
+					}
 				}
 			}
 			ColumnLayout{
@ -205,7 +206,7 @@ Loader{
 			Text{
 				id: descriptionTitle
 				Layout.fillWidth: true
-				Layout.leftMargin: 10
+				Layout.leftMargin: 5
 				Layout.topMargin: 5
 				color: ChatCalendarMessageStyle.subject.color
 				font.pointSize: ChatCalendarMessageStyle.subject.pointSize
@ -218,7 +219,7 @@ Loader{
 				id: description
 				Layout.fillWidth: true
 				Layout.fillHeight: true
-				Layout.leftMargin: 10
+				Layout.leftMargin: 5
 				padding: 0
 				color: 'transparent'
 				readOnly: true
@ -233,39 +234,25 @@ Loader{
 				Layout.fillHeight: true
 				Layout.fillWidth: true
 			}
-			Text{
-				id: linkTitle
-				Layout.fillWidth: true
-				Layout.leftMargin: 10
-				color: ChatCalendarMessageStyle.subject.color
-				font.pointSize: ChatCalendarMessageStyle.subject.pointSize
-				font.weight: Font.Bold
-				
-				//: 'Conference address' : Title for the conference address.
-				text: qsTr('icsconferenceAddressTitle')
-			}
 			RowLayout{
 				Layout.fillWidth: true
 				Layout.fillHeight: true
-				Layout.leftMargin: 10
-				Layout.rightMargin: 10
+				Layout.topMargin: ChatCalendarMessageStyle.bottomMargin
+				Layout.leftMargin: 5
+				Layout.rightMargin: 5
 				spacing: 10
-				TextField{
-					id: uriField
-					readOnly: true
+				Item{
+					Layout.fillHeight: true
 					Layout.fillWidth: true
-					textFieldStyle: TextFieldStyle.flatInverse
-					text: mainItem.conferenceInfoModel.uri
-					
 				}
 				ActionButton{
-					id: copyButton
-					iconSize: uriField.height
+					id: shareButton
+					iconSize: joinButton.height/2
 					isCustom: true
-					colorSet: ChatCalendarMessageStyle.copyLinkButton
+					colorSet: ChatCalendarMessageStyle.shareButton
 					backgroundRadius: width/2
 					onClicked: {
-						Clipboard.text = uriField.text
+						Clipboard.text = mainItem.conferenceInfoModel.uri
 						mainItem.conferenceUriCopied()
 					}
 				}
@ -275,18 +262,6 @@ Loader{
 					text: qsTr('icsJoinButton').toUpperCase()
 					onClicked: CallsListModel.prepareConferenceCall(mainItem.conferenceInfoModel)
 				}
-				ActionButton{
-					id: editButton
-					isCustom: true
-					colorSet: ChatCalendarMessageStyle.editButton
-					backgroundRadius: width/2
-					visible: UtilsCpp.isMe(mainItem.conferenceInfoModel.organizer)
-					onClicked: {
-						window.detachVirtualWindow()
-						window.attachVirtualWindow(Utils.buildAppDialogUri('NewConference')
-												   ,{conferenceInfoModel: mainItem.conferenceInfoModel})
-					}
-				}
 			}
 		}
 	}
--- a/linphone-app/ui/modules/Linphone/Chat/ChatReplyPreview.qml
+++ b/linphone-app/ui/modules/Linphone/Chat/ChatReplyPreview.qml
@ -76,7 +76,7 @@ Rectangle{
 			contentHeight: messageContentsList.height
 			contentWidth: width - ScrollBar.vertical.width
 			flickableDirection: Flickable.VerticalFlick 
-			
+			clip: true
 			Layout.fillHeight: true
 			Layout.fillWidth: true
 			ListView {
@ -87,7 +87,7 @@ Rectangle{
 					chatMessageModel: replyPreviewBlock.chatRoomModel && replyPreviewBlock.chatRoomModel.reply
 				}
 				height: contentHeight
-				
+				clip: true
 				delegate: ChatContent{
 					contentModel: $modelData
 					Rectangle{
--- a/linphone-app/ui/modules/Linphone/Styles/Chat/ChatCalendarMessageStyle.qml
+++ b/linphone-app/ui/modules/Linphone/Styles/Chat/ChatCalendarMessageStyle.qml
@ -53,6 +53,11 @@ QtObject {
 		property int iconSize: 30
 		property color color: ColorsList.add(sectionName+'_schedule', 'j').color
 	}
+	property QtObject type: QtObject {
+		property int spacing: 5
+		property int pointSize: Units.dp * 10
+		property color color: ColorsList.add(sectionName+'_subject', 'j').color
+	}
 	property QtObject subject: QtObject {
 		property int spacing: 5
 		property int pointSize: Units.dp * 11
@ -67,7 +72,7 @@ QtObject {
 		property int spacing: 5
 		property int pointSize: Units.dp * 9
 		property string icon : 'calendar_participants_custom'
-		property int iconSize: 30
+		property int iconSize: 25
 		property color color: ColorsList.add(sectionName+'_participants', 'j').color
 	}
 	
@ -85,7 +90,7 @@ QtObject {
 		property color foregroundUpdatingColor : ColorsList.addImageColor(sectionName+'_'+name+'_f_c', icon, 's_p_b_fg').color
 	}
 	property QtObject infoButton: QtObject{
-		property int iconSize: 30
+		property int iconSize: 25
 		property string name : 'info'
 		property string icon : 'menu_info_custom'
 		property color backgroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_b_n', icon, 'me_n_b_bg').color
@ -114,6 +119,19 @@ QtObject {
 		property color foregroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_f_h', icon, 's_h_b_fg').color
 		property color foregroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_f_p', icon, 's_p_b_fg').color
 	}
+	property QtObject shareButton: QtObject{
+		property int iconSize: 40
+		property string name : 'share'
+		property string icon : 'settings_network_custom'
+		property color backgroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_b_n', icon, 'me_n_b_bg').color
+		property color backgroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_b_h', icon, 'me_h_b_bg').color
+		property color backgroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_b_p', icon, 'me_p_b_bg').color
+		property color foregroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_f_n', icon, 'me_n_b_fg').color
+		property color foregroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_f_h', icon, 'me_h_b_fg').color
+		property color foregroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_f_p', icon, 'me_p_b_fg').color
+	}
+	
+	
 	property QtObject editButton: QtObject{
 		property int iconSize: 40
 		property string name : 'edit'