data/linux.x86.linphone
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ui fixes : Radiobutton check, MeetingPage layouts, call/contacts amrgins and scrollbars

Browse source
This commit is contained in:
Julien Wadel 2024-04-04 17:13:57 +02:00
parent fd57221713
commit 7e9714d6c5
9 changed files with 247 additions and 194 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Linphone/view/App/CallsWindow.qml
View file

@ -20,7 +20,7 @@ Window {
property ConferenceGui conference: call && call.core.conference || null
onConferenceChanged: console.log ("CONFERENCE CHANGED", conference)
property var conferenceLayout: call && call.core.conferenceVideoLayout || undefined
property int conferenceLayout: call && call.core.conferenceVideoLayout || 0
property bool callTerminatedByUser: false

19
Linphone/view/App/Layout/MainLayout.qml
View file

@ -109,24 +109,27 @@ Item {
RowLayout {
anchors.fill: parent
// spacing: 30
anchors.topMargin: 18 * DefaultStyle.dp
spacing: 0
anchors.topMargin: 25 * DefaultStyle.dp
VerticalTabBar {
id: tabbar
Layout.fillHeight: true
Layout.preferredWidth: 82 * DefaultStyle.dp
model: [
{icon: AppIcons.phone, selectedIcon: AppIcons.phoneSelected, label: qsTr("Appels")},
{icon: AppIcons.adressBook, selectedIcon: AppIcons.adressBookSelected, label: qsTr("Contacts")},
{icon: AppIcons.chatTeardropText, selectedIcon: AppIcons.chatTeardropTextSelected, label: qsTr("Conversations")},
{icon: AppIcons.usersThree, selectedIcon: AppIcons.usersThreeSelected, label: qsTr("Réunions")}
]
}
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
spacing:0
RowLayout {
id: topRow
Layout.leftMargin: 25 * DefaultStyle.dp
Layout.preferredHeight: 50 * DefaultStyle.dp
Layout.leftMargin: 45 * DefaultStyle.dp
Layout.rightMargin: 41 * DefaultStyle.dp
spacing: 25 * DefaultStyle.dp
SearchBar {
@ -356,11 +359,11 @@ Item {
}
}
StackLayout {
// width: parent.width
// height: parent.height
id: mainStackLayout
currentIndex: tabbar.currentIndex
Layout.fillWidth: true
Layout.fillHeight: true
Layout.topMargin: 24 * DefaultStyle.dp
CallPage {
id: callPage
}

102
Linphone/view/Item/Meeting/MeetingList.qml
View file

@ -12,15 +12,13 @@ ListView {
clip: true
property string searchBarText
property bool hoverEnabled: true
currentIndex: -1
property var delegateButtons
property ConferenceInfoGui selectedConference: model.getAt(currentIndex) || null
spacing: 8 * DefaultStyle.dp
currentIndex: -1
onCountChanged: selectedConference = model.getAt(currentIndex) || null
onCurrentIndexChanged: selectedConference = model.getAt(currentIndex) || null
@ -38,8 +36,10 @@ ListView {
section {
criteria: ViewSection.FullString
delegate: Text {
topPadding: 24 * DefaultStyle.dp
bottomPadding: 16 * DefaultStyle.dp
text: section
height: 29 * DefaultStyle.dp
height: 29 * DefaultStyle.dp + topPadding + bottomPadding
font {
pixelSize: 20 * DefaultStyle.dp
weight: 800 * DefaultStyle.dp
@ -51,24 +51,41 @@ ListView {
delegate: Item {
id: itemDelegate
height: 80 * DefaultStyle.dp
height: 63 * DefaultStyle.dp + topOffset
width: mainItem.width
property var previousItem : mainItem.model.count > 0 && index > 0 ? mainItem.model.getAt(index-1) : null
property var previousDateTime: previousItem ? previousItem.core.dateTimeUtc : null
property var dateTime: $modelData.core.dateTime
property string day : UtilsCpp.toDateDayNameString(dateTime)
property string dateString: UtilsCpp.toDateString(dateTime)
property string previousDateString: previousItem ? UtilsCpp.toDateString(previousItem.core.dateTimeUtc) : ''
property bool isFirst : ListView.previousSection !== ListView.section
property int topOffset: (dateDay.visible && !isFirst? 8 * DefaultStyle.dp : 0)
property var endDateTime: $modelData.core.endDateTime
RowLayout{
anchors.fill: parent
anchors.topMargin:parent.topOffset
spacing: 0
Item{
Layout.preferredWidth: 32 * DefaultStyle.dp
visible: !dateDay.visible
}
ColumnLayout {
id: dateDay
width: 32 * DefaultStyle.dp
height: 51 * DefaultStyle.dp
visible: !previousDateTime || previousDateTime != dateTime
anchors.verticalCenter: parent.verticalCenter
Text {
verticalAlignment: Text.AlignVCenter
Layout.fillWidth: false
Layout.preferredWidth: 32 * DefaultStyle.dp
Layout.minimumWidth: 32 * DefaultStyle.dp
height: 51 * DefaultStyle.dp
visible: !previousDateString || previousDateString != dateString
spacing: 0
//anchors.leftMargin: 45 * DefaultStyle.dp
Text {
//Layout.preferredWidth: 32 * DefaultStyle.dp
Layout.preferredHeight: 19 * DefaultStyle.dp
Layout.fillWidth: true
// opacity: (!previousItem || !previousDateTime.startsWith(displayName[0])) ? 1 : 0
text: UtilsCpp.toDateDayNameString(dateTime)
text: day
color: DefaultStyle.main2_500main
font {
pixelSize: 14 * DefaultStyle.dp
@ -78,33 +95,40 @@ ListView {
}
Rectangle {
id: dayNum
Layout.preferredWidth: 32 * DefaultStyle.dp
Layout.preferredHeight: 32 * DefaultStyle.dp
radius: 50 * DefaultStyle.dp
//Layout.preferredWidth: Math.max(32 * DefaultStyle.dp, dayNumText.width+17*DefaultStyle.dp)
Layout.fillWidth: true
Layout.preferredHeight: width
Layout.alignment: Qt.AlignCenter
radius: height/2
property var isCurrentDay: UtilsCpp.isCurrentDay(dateTime)
color: isCurrentDay ? DefaultStyle.main1_500_main : "transparent"
color: !isCurrentDay ? DefaultStyle.main1_500_main : "transparent"
Component.onCompleted: if(isCurrentDay) mainItem.currentIndex = index
Text {
id: dayNumText
anchors.centerIn: parent
verticalAlignment: Text.AlignVCenter
text: UtilsCpp.toDateDayString(dateTime)
color: dayNum.isCurrentDay ? DefaultStyle.grey_0 : DefaultStyle.main2_500main
color: !dayNum.isCurrentDay ? DefaultStyle.grey_0 : DefaultStyle.main2_500main
wrapMode: Text.NoWrap
font {
pixelSize: 20 * DefaultStyle.dp
weight: 800 * DefaultStyle.dp
}
}
}
Item{Layout.fillHeight:true;Layout.fillWidth: true}
}
Item {
Layout.preferredWidth: 265 * DefaultStyle.dp
Layout.preferredHeight: 63 * DefaultStyle.dp
Layout.leftMargin: 23 * DefaultStyle.dp
Rectangle {
id: conferenceInfoDelegate
anchors.left: dateDay.visible ? dateDay.right : parent.left
anchors.leftMargin: 10 * DefaultStyle.dp
anchors.rightMargin: 5 * DefaultStyle.dp
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.fill: parent
anchors.rightMargin: 5 // margin to avoid clipping shadows at right
radius: 10 * DefaultStyle.dp
// width: 265 * DefaultStyle.dp
height: 63 * DefaultStyle.dp
color: mainItem.currentIndex === index ? DefaultStyle.main2_200 : DefaultStyle.grey_0
ColumnLayout {
anchors.fill: parent
@ -136,19 +160,33 @@ ListView {
}
}
}
MultiEffect {
source: conferenceInfoDelegate
anchors.fill: conferenceInfoDelegate
shadowEnabled: true
shadowBlur: 0.8
shadowBlur: 0.7
shadowOpacity: 0.2
}
MouseArea {
id: confArea
hoverEnabled: mainItem.hoverEnabled
anchors.fill: dateDay.visible ? conferenceInfoDelegate : parent
anchors.fill: parent
visible: dateDay.visible
cursorShape: Qt.PointingHandCursor
onClicked: {
mainItem.currentIndex = index
mainItem.conferenceSelected($modelData)
}
}
}
}
MouseArea {
id: confArea
hoverEnabled: mainItem.hoverEnabled
visible: !dateDay.visible
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
mainItem.currentIndex = index

2
Linphone/view/Layout/Call/CallLayout.qml
View file

@ -16,7 +16,7 @@ Item {
property CallGui call
property bool callTerminatedByUser: false
readonly property var callState: call && call.core.state || undefined
property var conferenceLayout: call && call.core.conferenceVideoLayout || undefined
property int conferenceLayout: call && call.core.conferenceVideoLayout || 0
onConferenceLayoutChanged:console.log("CallLayout change : " +conferenceLayout)
onCallStateChanged: if (callState === LinphoneEnums.CallState.End) {
callTerminatedText.visible = true

3
Linphone/view/Layout/Call/GridLayout.qml
View file

@ -34,10 +34,7 @@ Mosaic {
Sticker {
id: cameraView
visible: mainItem.callState != LinphoneEnums.CallState.End && mainItem.callState != LinphoneEnums.CallState.Released
&& modelData.core.address != activeSpeakerSticker.address
anchors.fill: parent
//height: visible ? 180 * DefaultStyle.dp : 0
//width: 300 * DefaultStyle.dp
qmlName: 'G_'+index
participantDevice: avatarCell.currentDevice

7
Linphone/view/Page/Main/AbstractMainPage.qml
View file

@ -135,14 +135,14 @@ Item {
RowLayout {
anchors.fill: parent
anchors.topMargin: 10 * DefaultStyle.dp
//anchors.topMargin: 10 * DefaultStyle.dp
spacing: 0
ColumnLayout {
id: leftPanel
Layout.preferredWidth: 403 * DefaultStyle.dp
Layout.minimumWidth: 403 * DefaultStyle.dp
Layout.preferredWidth: 404 * DefaultStyle.dp
Layout.fillHeight: true
Layout.fillWidth:false
spacing:0
}
Rectangle {
Layout.fillHeight: true
@ -155,6 +155,7 @@ Item {
color: mainItem.rightPanelColor
Layout.fillWidth: true
Layout.fillHeight: true
StackLayout {
currentIndex: mainItem.showDefaultItem ? 0 : 1
anchors.fill: parent

31
Linphone/view/Page/Main/CallPage.qml
View file

@ -50,9 +50,8 @@ AbstractMainPage {
clip: true
initialItem: historyListItem
anchors.fill: parent
property int sideMargin: 25 * DefaultStyle.dp
// anchors.leftMargin: 25
// anchors.rightMargin: 25
property int leftMargin: 45 * DefaultStyle.dp
property int rightMargin: 39 * DefaultStyle.dp
}
Component {
id: historyListItem
@ -63,8 +62,8 @@ AbstractMainPage {
RowLayout {
spacing: 16 * DefaultStyle.dp
Layout.fillWidth: true
Layout.leftMargin: listStackView.sideMargin
Layout.rightMargin: listStackView.sideMargin
Layout.leftMargin: listStackView.leftMargin
Layout.rightMargin: listStackView.rightMargin
Text {
text: qsTr("Appels")
color: DefaultStyle.main2_700
@ -130,18 +129,19 @@ AbstractMainPage {
SearchBar {
id: searchBar
Layout.fillWidth: true
Layout.leftMargin: listStackView.sideMargin
Layout.rightMargin: listStackView.sideMargin
Layout.leftMargin: listStackView.leftMargin
Layout.rightMargin: listStackView.rightMargin
placeholderText: qsTr("Rechercher un appel")
}
RowLayout {
Layout.topMargin: 30 * DefaultStyle.dp
spacing: 0
Control.Control {
id: listLayout
Layout.fillWidth: true
Layout.fillHeight: true
Layout.leftMargin: listStackView.sideMargin
Layout.rightMargin: listStackView.sideMargin
Layout.leftMargin: listStackView.leftMargin
Layout.rightMargin: listStackView.rightMargin - (scrollbar.visible? scrollbar.width : 0)
background: Rectangle {
anchors.fill: parent
@ -317,8 +317,13 @@ AbstractMainPage {
Control.ScrollBar {
id: scrollbar
active: true
policy: Control.ScrollBar.AsNeeded
policy: Control.ScrollBar.AlwaysOn //Control.ScrollBar.AsNeeded
Layout.fillHeight: true
Rectangle{// TODO: change colors of scrollbar!
anchors.fill: parent
color: 'red'
opacity:0.2
}
}
}
}
@ -329,8 +334,8 @@ AbstractMainPage {
ColumnLayout {
spacing: 30 * DefaultStyle.dp
RowLayout {
Layout.leftMargin: listStackView.sideMargin
Layout.rightMargin: listStackView.sideMargin
Layout.leftMargin: listStackView.leftMargin
Layout.rightMargin: listStackView.rightMargin
Button {
background: Item {
}
@ -357,8 +362,6 @@ AbstractMainPage {
CallContactsLists {
Layout.fillWidth: true
Layout.fillHeight: true
// Layout.leftMargin: listStackView.sideMargin
// Layout.rightMargin: listStackView.sideMargin
groupCallVisible: true
searchBarColor: DefaultStyle.grey_100
property var callObj

53
Linphone/view/Page/Main/ContactPage.qml
View file

@ -61,13 +61,14 @@ AbstractMainPage {
id: leftPanel
Layout.fillWidth: true
Layout.fillHeight: true
property int sideMargin: 25 * DefaultStyle.dp
property int leftMargin: 45 * DefaultStyle.dp
property int rightMargin: 39 * DefaultStyle.dp
spacing: 30 * DefaultStyle.dp
RowLayout {
Layout.fillWidth: true
Layout.leftMargin: leftPanel.sideMargin
Layout.rightMargin: leftPanel.sideMargin
Layout.leftMargin: leftPanel.leftMargin
Layout.rightMargin: leftPanel.rightMargin
Text {
text: qsTr("Contacts")
@ -93,38 +94,24 @@ AbstractMainPage {
}
ColumnLayout {
Layout.leftMargin: leftPanel.sideMargin
Layout.leftMargin: leftPanel.leftMargin
enabled: mainItem.leftPanelEnabled
SearchBar {
id: searchBar
Layout.rightMargin: leftPanel.sideMargin
Layout.rightMargin: leftPanel.rightMargin
Layout.fillWidth: true
placeholderText: qsTr("Rechercher un contact")
}
Item {
id: contactsArea
Layout.fillWidth: true
Layout.fillHeight: true
Control.ScrollBar {
id: contactsScrollbar
active: true
interactive: true
policy: Control.ScrollBar.AsNeeded
// Layout.fillWidth: true
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
// Layout.alignment: Qt.AlignRight
// x: mainItem.x + mainItem.width - width
// anchors.left: control.right
}
Control.ScrollView {
id: listLayout
anchors.fill: parent
Layout.leftMargin: leftPanel.sideMargin
Layout.rightMargin: leftPanel.sideMargin
Layout.topMargin: 25 * DefaultStyle.dp
rightPadding: leftPanel.sideMargin
contentWidth: width - leftPanel.sideMargin
anchors.rightMargin: leftPanel.rightMargin
anchors.topMargin: 25 * DefaultStyle.dp
contentWidth: width
contentHeight: content.height
clip: true
Control.ScrollBar.vertical: contactsScrollbar
@ -212,10 +199,11 @@ AbstractMainPage {
}
ContactsList{
id: contactList
hoverEnabled: mainItem.leftPanelEnabled
contactMenuVisible: true
Layout.fillWidth: true
Layout.preferredHeight: contentHeight
interactive: false
hoverEnabled: mainItem.leftPanelEnabled
contactMenuVisible: true
searchBarText: searchBar.text
model: allFriends
onSelectedContactChanged: {
@ -232,6 +220,21 @@ AbstractMainPage {
}
}
}
Control.ScrollBar {
id: contactsScrollbar
// Parent is changed from Scrollview. Do not use it.
x: contactsArea.width - width
height: listLayout.availableHeight
active: true
interactive: true
policy: Control.ScrollBar.AlwaysOn //Control.ScrollBar.AsNeeded
Rectangle{// TODO: change colors of scrollbar!
anchors.fill: parent
color: 'red'
opacity:0.2
}
}
}
}
}

66
Linphone/view/Page/Main/MeetingPage.qml
View file

@ -91,43 +91,37 @@ AbstractMainPage {
]
}
leftPanelContent: RowLayout {
id: leftPanel
Layout.fillWidth: true
leftPanelContent: Item {
Layout.fillHeight: true
property int sideMargin: 20 * DefaultStyle.dp
Layout.fillWidth: true
RowLayout {
id: leftPanel
anchors.fill: parent
spacing: 0
ColumnLayout {
// Layout.topMargin: 30 * DefaultStyle.dp
// Layout.leftMargin: leftPanel.sideMargin
enabled: mainItem.leftPanelEnabled
spacing: 30 * DefaultStyle.dp
Layout.leftMargin: leftPanel.sideMargin
Layout.rightMargin: leftPanel.sideMargin
Layout.leftMargin: 45 * DefaultStyle.dp
Layout.rightMargin: 39 * DefaultStyle.dp
spacing: 0
RowLayout {
visible: leftPanelStackView.currentItem.objectName == "listLayout"
Layout.fillWidth: true
// Layout.rightMargin: leftPanel.sideMargin
spacing: 0
Text {
Layout.fillWidth: true
text: qsTr("Réunions")
color: DefaultStyle.main2_700
font.pixelSize: 29 * DefaultStyle.dp
font.weight: 800 * DefaultStyle.dp
}
Item {
Layout.fillWidth: true
}
Button {
background: Item {
}
icon.source: AppIcons.plusCircle
Layout.preferredWidth: 30 * DefaultStyle.dp
Layout.preferredHeight: 30 * DefaultStyle.dp
icon.width: 24 * DefaultStyle.dp
icon.height: 24 * DefaultStyle.dp
Layout.preferredWidth: 28 * DefaultStyle.dp
Layout.preferredHeight: 28 * DefaultStyle.dp
icon.width: 28 * DefaultStyle.dp
icon.height: 28 * DefaultStyle.dp
onClicked: {
mainItem.setUpConference()
}
@ -145,14 +139,25 @@ AbstractMainPage {
}
}
}
}
Rectangle{// TODO: change colors of scrollbar!
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
width: 10
color: 'red'
opacity:0.2
}
Control.ScrollBar {
id: meetingsScrollbar
visible: leftPanelStackView.currentItem.objectName == "listLayout"
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
width: 10
//visible: leftPanelStackView.currentItem.objectName == "listLayout"
active: true
interactive: true
policy: Control.ScrollBar.AsNeeded
Layout.fillHeight: true
policy: Control.ScrollBar.AlwaysOn //Control.ScrollBar.AsNeeded
}
}
@ -172,7 +177,7 @@ AbstractMainPage {
id: listLayout
ColumnLayout {
property string objectName: "listLayout"
spacing: 19 * DefaultStyle.dp
spacing: 0
Control.StackView.onDeactivated: {
mainItem.selectedConference = null
// mainItem.righPanelStackView.clear()
@ -181,6 +186,7 @@ AbstractMainPage {
SearchBar {
id: searchBar
Layout.fillWidth: true
//Layout.topMargin: 18 * DefaultStyle.dp
placeholderText: qsTr("Rechercher une réunion")
}
@ -196,13 +202,15 @@ AbstractMainPage {
}
RowLayout {
// Remove 24 from first section padding because we cannot know that it is the first section. 24 is the margins between sections.
Layout.topMargin: 38 * DefaultStyle.dp - 24 * DefaultStyle.dp
spacing: 0
MeetingList {
id: conferenceList
visible: count != 0
hoverEnabled: mainItem.leftPanelEnabled
Layout.fillWidth: true
Layout.fillHeight: true
Layout.topMargin: 20 * DefaultStyle.dp
visible: count != 0
hoverEnabled: mainItem.leftPanelEnabled
searchBarText: searchBar.text
onSelectedConferenceChanged: {
mainItem.selectedConference = selectedConference