mirror of
https://gitlab.linphone.org/BC/public/linphone-desktop.git
synced 2026-01-23 14:48:15 +00:00
feat(manageAccounts): use reusable components (DialogDescription/DialogPlus)
This commit is contained in:
Ronan Abhamon
parent
fd30f4d668
commit
ef33401342
7 changed files with 211 additions and 161 deletions
|
|
@ -21,6 +21,7 @@ TRANSLATIONS = \
|
|||
lupdate_only{
|
||||
# Each component folder must be added explicitly.
|
||||
SOURCES = \
|
||||
ui/components/dialog/*.qml \
|
||||
ui/components/form/*.qml \
|
||||
ui/views/*.qml
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
<file>languages/fr.qm</file>
|
||||
|
||||
<!-- UI. -->
|
||||
<file>ui/components/dialog/DialogDescription.qml</file>
|
||||
<file>ui/components/dialog/DialogPlus.qml</file>
|
||||
<file>ui/components/form/Collapse.qml</file>
|
||||
<file>ui/components/form/DialogButton.qml</file>
|
||||
<file>ui/components/form/DialogComboBox.qml</file>
|
||||
|
|
|
|||
18
tests/ui/components/dialog/DialogDescription.qml
Normal file
18
tests/ui/components/dialog/DialogDescription.qml
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import QtQuick 2.7
|
||||
|
||||
Item {
|
||||
property alias text: description.text
|
||||
property alias fontSize: description.font.pointSize
|
||||
|
||||
height: 90
|
||||
|
||||
Text {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 50
|
||||
anchors.rightMargin: 50
|
||||
font.pointSize: 12
|
||||
id: description
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
}
|
||||
57
tests/ui/components/dialog/DialogPlus.qml
Normal file
57
tests/ui/components/dialog/DialogPlus.qml
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import QtQuick 2.7
|
||||
import QtQuick.Controls 2.0
|
||||
import QtQuick.Layouts 1.3
|
||||
import QtQuick.Window 2.2
|
||||
|
||||
import 'qrc:/ui/components/dialog'
|
||||
import 'qrc:/ui/components/form'
|
||||
|
||||
Window {
|
||||
default property alias contents: content.data
|
||||
|
||||
// Optionnal description text.
|
||||
property alias descriptionText: description.text
|
||||
|
||||
// Required buttons.
|
||||
property alias buttons: buttons.data
|
||||
|
||||
id: window
|
||||
modality: Qt.WindowModal
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
|
||||
// Description.
|
||||
DialogDescription {
|
||||
Layout.alignment : Qt.AlignTop
|
||||
Layout.fillWidth: true
|
||||
id: description
|
||||
}
|
||||
|
||||
// Content.
|
||||
Item {
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
id: content
|
||||
}
|
||||
|
||||
// Buttons.
|
||||
Item {
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
|
||||
Row {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 50
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
height: 30
|
||||
id: buttons
|
||||
spacing: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,6 @@ Button {
|
|||
background: Rectangle {
|
||||
color: button.down ? '#FE5E00' : '#434343'
|
||||
implicitWidth: 120
|
||||
implicitHeight: 30
|
||||
radius: 4
|
||||
}
|
||||
contentItem: Text {
|
||||
|
|
|
|||
|
|
@ -29,9 +29,16 @@ ApplicationWindow {
|
|||
// User actions.
|
||||
ToolBarButton {
|
||||
onClicked: {
|
||||
var component = Qt.createComponent("qrc:/ui/views/manage_accounts.qml");
|
||||
var win = component.createObject(mainWindow);
|
||||
win.show();
|
||||
var component = Qt.createComponent('qrc:/ui/views/manage_accounts.qml');
|
||||
if (component.status !== Component.Ready) {
|
||||
console.debug('Window not ready.')
|
||||
if(component.status === Component.Error) {
|
||||
console.debug('Error:' + component.errorString())
|
||||
}
|
||||
} else {
|
||||
var win = component.createObject(mainWindow);
|
||||
win.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,193 +3,159 @@ import QtQuick.Controls 2.0
|
|||
import QtQuick.Layouts 1.3
|
||||
import QtQuick.Window 2.2
|
||||
|
||||
import 'qrc:/ui/components/dialog'
|
||||
import 'qrc:/ui/components/form'
|
||||
|
||||
Window {
|
||||
DialogPlus {
|
||||
descriptionText: qsTr('manageAccountsDescription')
|
||||
id: window
|
||||
minimumHeight: 328
|
||||
minimumWidth: 480
|
||||
modality: Qt.WindowModal
|
||||
title: qsTr('manageAccountsTitle')
|
||||
|
||||
ColumnLayout {
|
||||
buttons: DialogButton {
|
||||
text: qsTr('validate')
|
||||
}
|
||||
|
||||
// Accounts list.
|
||||
Item {
|
||||
id: listViewContainer
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
|
||||
// Window description.
|
||||
Item {
|
||||
Layout.alignment : Qt.AlignTop
|
||||
Layout.fillWidth: true
|
||||
height: 90
|
||||
ListView {
|
||||
anchors.fill: parent
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
clip: true
|
||||
highlightRangeMode: ListView.ApplyRange
|
||||
id: accountsList
|
||||
spacing: 0
|
||||
|
||||
Text {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 50
|
||||
anchors.rightMargin: 50
|
||||
font.pointSize: 12
|
||||
text: qsTr('manageAccountsDescription')
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
}
|
||||
|
||||
// Accounts list.
|
||||
Item {
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
id: listViewContainer
|
||||
|
||||
ListView {
|
||||
anchors.fill: parent
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
clip: true
|
||||
highlightRangeMode: ListView.ApplyRange
|
||||
id: accountsList
|
||||
spacing: 0
|
||||
horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOn
|
||||
// TODO: Remove, use C++ model instead.
|
||||
model: ListModel {
|
||||
ListElement {
|
||||
presence: 'connected'
|
||||
sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
|
||||
isDefault: false
|
||||
}
|
||||
ListElement {
|
||||
presence: 'connected'
|
||||
sipAddress: 'toto.lala.sip.linphone.org'
|
||||
isDefault: false
|
||||
}
|
||||
ListElement {
|
||||
presence: 'disconnected'
|
||||
sipAddress: 'machin.truc.sip.linphone.org'
|
||||
isDefault: true
|
||||
}
|
||||
ListElement {
|
||||
presence: 'absent'
|
||||
sipAddress: 'hey.listen.sip.linphone.org'
|
||||
isDefault: false
|
||||
}
|
||||
ListElement {
|
||||
presence: 'do_not_disturb'
|
||||
sipAddress: 'valentin.cognito.sip.linphone.org'
|
||||
isDefault: false
|
||||
}
|
||||
ListElement {
|
||||
presence: 'do_not_disturb'
|
||||
sipAddress: 'charles.henri.sip.linphone.org'
|
||||
isDefault: false
|
||||
}
|
||||
ListElement {
|
||||
presence: 'disconnected'
|
||||
sipAddress: 'yesyes.nono.sip.linphone.org'
|
||||
isDefault: false
|
||||
}
|
||||
ListElement {
|
||||
presence: 'connected'
|
||||
sipAddress: 'nsa.sip.linphone.org'
|
||||
isDefault: false
|
||||
}
|
||||
// TODO: Remove, use C++ model instead.
|
||||
model: ListModel {
|
||||
ListElement {
|
||||
presence: 'connected'
|
||||
sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
|
||||
isDefault: false
|
||||
}
|
||||
delegate: Item {
|
||||
height: 34
|
||||
width: parent.width
|
||||
ListElement {
|
||||
presence: 'connected'
|
||||
sipAddress: 'toto.lala.sip.linphone.org'
|
||||
isDefault: false
|
||||
}
|
||||
ListElement {
|
||||
presence: 'disconnected'
|
||||
sipAddress: 'machin.truc.sip.linphone.org'
|
||||
isDefault: true
|
||||
}
|
||||
ListElement {
|
||||
presence: 'absent'
|
||||
sipAddress: 'hey.listen.sip.linphone.org'
|
||||
isDefault: false
|
||||
}
|
||||
ListElement {
|
||||
presence: 'do_not_disturb'
|
||||
sipAddress: 'valentin.cognito.sip.linphone.org'
|
||||
isDefault: false
|
||||
}
|
||||
ListElement {
|
||||
presence: 'do_not_disturb'
|
||||
sipAddress: 'charles.henri.sip.linphone.org'
|
||||
isDefault: false
|
||||
}
|
||||
ListElement {
|
||||
presence: 'disconnected'
|
||||
sipAddress: 'yesyes.nono.sip.linphone.org'
|
||||
isDefault: false
|
||||
}
|
||||
ListElement {
|
||||
presence: 'connected'
|
||||
sipAddress: 'nsa.sip.linphone.org'
|
||||
isDefault: false
|
||||
}
|
||||
}
|
||||
delegate: Item {
|
||||
height: 34
|
||||
width: parent.width
|
||||
|
||||
Rectangle {
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: isDefault ? '#EAEAEA' : 'transparent'
|
||||
id: accountLine
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
color: isDefault ? '#EAEAEA' : 'transparent'
|
||||
id: accountLine
|
||||
spacing: 15
|
||||
anchors.leftMargin: 15
|
||||
anchors.rightMargin: 15
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
spacing: 15
|
||||
anchors.leftMargin: 15
|
||||
anchors.rightMargin: 15
|
||||
// Default account.
|
||||
Item {
|
||||
Layout.fillHeight: parent.height
|
||||
Layout.preferredWidth: 20
|
||||
|
||||
// Default account.
|
||||
Item {
|
||||
Layout.fillHeight: parent.height
|
||||
Layout.preferredWidth: 20
|
||||
Image {
|
||||
anchors.fill: parent
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: isDefault ? 'qrc:/imgs/valid.svg' : ''
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
// Sip account.
|
||||
Item {
|
||||
Layout.fillHeight: parent.height
|
||||
Layout.fillWidth: true
|
||||
|
||||
Text {
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
color: '#59575A'
|
||||
text: sipAddress;
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: isDefault ? 'qrc:/imgs/valid.svg' : ''
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sip account.
|
||||
Item {
|
||||
Layout.fillHeight: parent.height
|
||||
Layout.fillWidth: true
|
||||
// Presence.
|
||||
Item {
|
||||
Layout.fillHeight: parent.height
|
||||
Layout.preferredWidth: 20
|
||||
|
||||
Text {
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
color: '#59575A'
|
||||
text: sipAddress;
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
}
|
||||
Image {
|
||||
anchors.fill: parent
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: 'qrc:/imgs/led_' + presence + '.svg'
|
||||
}
|
||||
}
|
||||
|
||||
// Presence.
|
||||
Item {
|
||||
Layout.fillHeight: parent.height
|
||||
Layout.preferredWidth: 20
|
||||
// Update presence.
|
||||
Item {
|
||||
Layout.fillHeight: parent.height
|
||||
Layout.preferredWidth: 160
|
||||
|
||||
Image {
|
||||
anchors.fill: parent
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: 'qrc:/imgs/led_' + presence + '.svg'
|
||||
}
|
||||
}
|
||||
|
||||
// Update presence.
|
||||
Item {
|
||||
Layout.fillHeight: parent.height
|
||||
Layout.preferredWidth: 160
|
||||
|
||||
DialogComboBox {
|
||||
anchors.fill: parent
|
||||
model: ListModel {
|
||||
ListElement { key: qsTr('onlinePresence'); value: 1 }
|
||||
ListElement { key: qsTr('busyPresence'); value: 2 }
|
||||
ListElement { key: qsTr('beRightBackPresence'); value: 3 }
|
||||
ListElement { key: qsTr('awayPresence'); value: 4 }
|
||||
ListElement { key: qsTr('onThePhonePresence'); value: 5 }
|
||||
ListElement { key: qsTr('outToLunchPresence'); value: 6 }
|
||||
ListElement { key: qsTr('doNotDisturbPresence'); value: 7 }
|
||||
ListElement { key: qsTr('movedPresence'); value: 8 }
|
||||
ListElement { key: qsTr('usingAnotherMessagingServicePresence'); value: 9 }
|
||||
ListElement { key: qsTr('offlinePresence'); value: 10 }
|
||||
}
|
||||
textRole: 'key'
|
||||
DialogComboBox {
|
||||
anchors.fill: parent
|
||||
model: ListModel {
|
||||
ListElement { key: qsTr('onlinePresence'); value: 1 }
|
||||
ListElement { key: qsTr('busyPresence'); value: 2 }
|
||||
ListElement { key: qsTr('beRightBackPresence'); value: 3 }
|
||||
ListElement { key: qsTr('awayPresence'); value: 4 }
|
||||
ListElement { key: qsTr('onThePhonePresence'); value: 5 }
|
||||
ListElement { key: qsTr('outToLunchPresence'); value: 6 }
|
||||
ListElement { key: qsTr('doNotDisturbPresence'); value: 7 }
|
||||
ListElement { key: qsTr('movedPresence'); value: 8 }
|
||||
ListElement { key: qsTr('usingAnotherMessagingServicePresence'); value: 9 }
|
||||
ListElement { key: qsTr('offlinePresence'); value: 10 }
|
||||
}
|
||||
textRole: 'key'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Validate
|
||||
Rectangle {
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.fillWidth: true
|
||||
height: 100
|
||||
|
||||
DialogButton {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 30
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 54
|
||||
text: qsTr('validate')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue