diff --git a/linphone-desktop/assets/images/home_account_assistant.svg b/linphone-desktop/assets/images/home_account_assistant.svg new file mode 100644 index 000000000..881a16806 --- /dev/null +++ b/linphone-desktop/assets/images/home_account_assistant.svg @@ -0,0 +1,34 @@ + + + + home_account_assistant + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/linphone-desktop/assets/images/home_invite_friends.svg b/linphone-desktop/assets/images/home_invite_friends.svg new file mode 100644 index 000000000..1cd651136 --- /dev/null +++ b/linphone-desktop/assets/images/home_invite_friends.svg @@ -0,0 +1,39 @@ + + + + home_invite_friends + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/linphone-desktop/assets/images/home_use_linphone.svg b/linphone-desktop/assets/images/home_use_linphone.svg new file mode 100644 index 000000000..459d83acb --- /dev/null +++ b/linphone-desktop/assets/images/home_use_linphone.svg @@ -0,0 +1,34 @@ + + + + home_use_linphone + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/linphone-desktop/assets/languages/en.ts b/linphone-desktop/assets/languages/en.ts index eeeeb3bc9..988be2252 100644 --- a/linphone-desktop/assets/languages/en.ts +++ b/linphone-desktop/assets/languages/en.ts @@ -345,23 +345,59 @@ Server url not configured. Home invitContactQuestion - Are your friends already know Linphone? + Are your friends already know Linphone? invitContact - INVIT YOUR FRIENDS + INVIT YOUR FRIENDS addContactQuestion - Quickly add your contacts in your notebook. + Quickly add your contacts in your notebook. addContact - ADD CONTACTS + ADD CONTACTS displayTooltip - Display tooltips to discover Linphone Desktop + Display tooltips to discover Linphone Desktop + + + howToDescription + Need help on how to use Linphone? + + + howToTitle + HOW TO USE LINPHONE + + + inviteDescription + Invite your friends on Linphone. + + + inviteTitle + INVITE YOUR FRIENDS + + + accountAssistantDescription + Create or manage your Linphone account. + + + accountAssistantTitle + ACCOUNT ASSISTANT + + + assistantButton + ASSISTANT + + + showTooltips + Show tooltips + + + inviteButton + INVITE diff --git a/linphone-desktop/assets/languages/fr.ts b/linphone-desktop/assets/languages/fr.ts index 825277264..ab1557963 100644 --- a/linphone-desktop/assets/languages/fr.ts +++ b/linphone-desktop/assets/languages/fr.ts @@ -333,23 +333,59 @@ Url du serveur non configurée. Home invitContactQuestion - Vos amis connaissent-ils déjà Linphone ? + Vos amis connaissent-ils déjà Linphone ? invitContact - INVITER VOS AMIS + INVITER VOS AMIS addContactQuestion - Ajouter vos contacts dans votre carnet d'adresses. + Ajouter vos contacts dans votre carnet d'adresses. addContact - AJOUTER CONTACTS + AJOUTER CONTACTS displayTooltip - Afficher les tooltips pour découvrir Linphone Desktop + Afficher les tooltips pour découvrir Linphone Desktop + + + howToDescription + + + + howToTitle + + + + inviteDescription + + + + inviteTitle + + + + accountAssistantDescription + + + + accountAssistantTitle + + + + assistantButton + + + + showTooltips + + + + inviteButton + diff --git a/linphone-desktop/resources.qrc b/linphone-desktop/resources.qrc index ea83a7bbc..e2d77cabf 100644 --- a/linphone-desktop/resources.qrc +++ b/linphone-desktop/resources.qrc @@ -94,8 +94,11 @@ assets/images/history_normal.svg assets/images/history_pressed.svg assets/images/history.svg + assets/images/home_account_assistant.svg + assets/images/home_invite_friends.svg assets/images/home_normal.svg assets/images/home_selected.svg + assets/images/home_use_linphone.svg assets/images/incoming_call.svg assets/images/led_green.svg assets/images/led_orange.svg @@ -253,6 +256,7 @@ ui/modules/Linphone/Account/AccountStatus.qml ui/modules/Linphone/Calls/CallControls.qml ui/modules/Linphone/Calls/Calls.qml + ui/modules/Linphone/CardBlock.qml ui/modules/Linphone/Chat/Chat.qml ui/modules/Linphone/Chat/Event.qml ui/modules/Linphone/Chat/FileMessage.qml @@ -274,6 +278,7 @@ ui/modules/Linphone/Styles/Account/AccountStatusStyle.qml ui/modules/Linphone/Styles/Calls/CallControlsStyle.qml ui/modules/Linphone/Styles/Calls/CallsStyle.qml + ui/modules/Linphone/Styles/CardBlockStyle.qml ui/modules/Linphone/Styles/ChatStyle.qml ui/modules/Linphone/Styles/Contact/AvatarStyle.qml ui/modules/Linphone/Styles/Contact/ContactDescriptionStyle.qml @@ -319,6 +324,7 @@ ui/views/App/Styles/Main/ContactEditStyle.qml ui/views/App/Styles/Main/ContactsStyle.qml ui/views/App/Styles/Main/ConversationStyle.qml + ui/views/App/Styles/Main/HomeStyle.qml ui/views/App/Styles/Main/MainWindowMenuBarStyle.qml ui/views/App/Styles/Main/MainWindowStyle.qml ui/views/App/Styles/qmldir diff --git a/linphone-desktop/ui/modules/Common/View/ScrollableListView.qml b/linphone-desktop/ui/modules/Common/View/ScrollableListView.qml index 22a2e75cb..c9d018808 100644 --- a/linphone-desktop/ui/modules/Common/View/ScrollableListView.qml +++ b/linphone-desktop/ui/modules/Common/View/ScrollableListView.qml @@ -8,14 +8,22 @@ import Common 1.0 ListView { id: listView + ScrollBar.horizontal: ForceScrollBar { + id: hScrollBar + + onPressedChanged: pressed ? listView.movementStarted() : listView.movementEnded() + } + ScrollBar.vertical: ForceScrollBar { - id: scrollBar + id: vScrollBar onPressedChanged: pressed ? listView.movementStarted() : listView.movementEnded() } boundsBehavior: Flickable.StopAtBounds clip: true - contentWidth: width - scrollBar.width + contentWidth: vScrollBar.visible ? width - vScrollBar.width : width + contentHeight: hScrollBar.visible ? height - hScrollBar.height : height + spacing: 0 } diff --git a/linphone-desktop/ui/modules/Linphone/CardBlock.qml b/linphone-desktop/ui/modules/Linphone/CardBlock.qml new file mode 100644 index 000000000..3b2a0d78e --- /dev/null +++ b/linphone-desktop/ui/modules/Linphone/CardBlock.qml @@ -0,0 +1,70 @@ +import QtQuick 2.7 + +import Common 1.0 +import Linphone.Styles 1.0 + +// ============================================================================= + +Column { + default property alias _content: content.data + property alias icon: icon.icon + property alias title: title.text + property alias description: description.text + + // --------------------------------------------------------------------------- + + spacing: CardBlockStyle.spacing + width: CardBlockStyle.width + + Icon { + id: icon + + iconSize: CardBlockStyle.icon.size + height: CardBlockStyle.icon.size + CardBlockStyle.icon.bottomMargin + width: parent.width + } + + Column { + width: parent.width + spacing: CardBlockStyle.title.bottomMargin + + Text { + id: title + + color: CardBlockStyle.title.color + elide: Text.ElideRight + horizontalAlignment: Text.AlignHCenter + wrapMode: Text.WordWrap + + font { + bold: true + pointSize: CardBlockStyle.title.fontSize + } + + height: CardBlockStyle.title.height + width: parent.width + } + + Text { + id: description + + color: CardBlockStyle.description.color + elide: Text.ElideRight + font.pointSize: CardBlockStyle.description.fontSize + horizontalAlignment: Text.AlignHCenter + wrapMode: Text.WordWrap + + height: CardBlockStyle.description.height + width: parent.width + } + } + + // --------------------------------------------------------------------------- + + Item { + id: content + + height: CardBlockStyle.content.height + width: parent.width + } +} diff --git a/linphone-desktop/ui/modules/Linphone/Styles/CardBlockStyle.qml b/linphone-desktop/ui/modules/Linphone/Styles/CardBlockStyle.qml new file mode 100644 index 000000000..87f6618dd --- /dev/null +++ b/linphone-desktop/ui/modules/Linphone/Styles/CardBlockStyle.qml @@ -0,0 +1,33 @@ +pragma Singleton +import QtQuick 2.7 + +import Common 1.0 + +// ============================================================================= + +QtObject { + property int spacing: 30 + property int width: 200 + + property QtObject content: QtObject { + property int height: 40 + } + + property QtObject description: QtObject { + property color color: Colors.w + property int fontSize: 9 + property int height: 40 + } + + property QtObject icon: QtObject { + property int bottomMargin: 20 + property int size: 148 + } + + property QtObject title: QtObject { + property color color: Colors.j + property int bottomMargin: 10 + property int fontSize: 9 + property int height: 20 + } +} diff --git a/linphone-desktop/ui/modules/Linphone/Styles/qmldir b/linphone-desktop/ui/modules/Linphone/Styles/qmldir index 4f24185e9..73c39f440 100644 --- a/linphone-desktop/ui/modules/Linphone/Styles/qmldir +++ b/linphone-desktop/ui/modules/Linphone/Styles/qmldir @@ -6,6 +6,8 @@ module Linphone.Style singleton AccountStatusStyle 1.0 Account/AccountStatusStyle.qml +singleton CardBlockStyle 1.0 CardBlockStyle.qml + singleton ChatStyle 1.0 ChatStyle.qml singleton CallsStyle 1.0 Calls/CallsStyle.qml diff --git a/linphone-desktop/ui/modules/Linphone/qmldir b/linphone-desktop/ui/modules/Linphone/qmldir index d89a4ba52..6f09c81f8 100644 --- a/linphone-desktop/ui/modules/Linphone/qmldir +++ b/linphone-desktop/ui/modules/Linphone/qmldir @@ -9,6 +9,9 @@ module Linphone # Account AccountStatus 1.0 Account/AccountStatus.qml +# CardBlock +CardBlock 1.0 CardBlock.qml + # Calls Calls 1.0 Calls/Calls.qml diff --git a/linphone-desktop/ui/scripts/LinphoneUtils/linphone-utils.js b/linphone-desktop/ui/scripts/LinphoneUtils/linphone-utils.js index 2952727fd..de2bf980f 100644 --- a/linphone-desktop/ui/scripts/LinphoneUtils/linphone-utils.js +++ b/linphone-desktop/ui/scripts/LinphoneUtils/linphone-utils.js @@ -9,6 +9,6 @@ // Returns the username of a contact object or URI string. function getContactUsername (contact) { return Utils.isString(contact) - ? contact.substring(4, contact.indexOf('@')) // 4 = length("sip:") + ? contact.substring(4, contact.indexOf('@')) // 4 = length('sip:') : contact.vcard.username } diff --git a/linphone-desktop/ui/views/App/Main/Home.qml b/linphone-desktop/ui/views/App/Main/Home.qml index 56563d465..3661a91df 100644 --- a/linphone-desktop/ui/views/App/Main/Home.qml +++ b/linphone-desktop/ui/views/App/Main/Home.qml @@ -1,62 +1,80 @@ import QtQuick 2.7 -import QtQuick.Layouts 1.3 import Common 1.0 import Linphone 1.0 +import Linphone.Styles 1.0 + +import App.Styles 1.0 // ============================================================================= -ColumnLayout { - spacing: 0 +Rectangle { + color: HomeStyle.color - ColumnLayout { - Layout.alignment: Qt.AlignTop - Layout.fillHeight: true - Layout.fillWidth: true - Layout.leftMargin: 50 - Layout.topMargin: 50 - spacing: 30 + ScrollableListView { + anchors.horizontalCenter: parent.horizontalCenter + orientation: ListView.Horizontal + spacing: HomeStyle.spacing - // Invit friends. - Column { - spacing: 8 + height: parent.height + width: { + var width = CardBlockStyle.width * count + (count - 1) * spacing + return parent.width < width ? parent.width : width + } - Text { - color: '#5A585B' - font.bold: true - font.pointSize: 11 - text: qsTr('invitContactQuestion') + model: ListModel { + ListElement { + $component: 'checkBox' + $componentText: qsTr('showTooltips') + $description: qsTr('howToDescription') + $icon: 'home_use_linphone' + $title: qsTr('howToTitle') } - TextButtonB { - text: qsTr('invitContact') + ListElement { + $component: 'button' + $componentText: qsTr('inviteButton') + $description: qsTr('inviteDescription') + $icon: 'home_invite_friends' + $title: qsTr('inviteTitle') + } + + ListElement { + $component: 'button' + $componentText: qsTr('assistantButton') + $description: qsTr('accountAssistantDescription') + $icon: 'home_account_assistant' + $title: qsTr('accountAssistantTitle') } } - // Add contacts. - Column { - spacing: 8 + delegate: CardBlock { + anchors.verticalCenter: parent.verticalCenter - Text { - color: '#5A585B' - font.bold: true - font.pointSize: 11 - text: qsTr('addContactQuestion') - } + description: $description + icon: $icon + title: $title - TextButtonB { - text: qsTr('addContact') + Loader { + Component { + id: button + + TextButtonB { + text: $componentText + } + } + + Component { + id: checkBox + + CheckBoxText { + text: $componentText + } + } + + anchors.horizontalCenter: parent.horizontalCenter + sourceComponent: $component === 'button' ? button : checkBox } } } - - // Tooltip checkbox area. - CheckBoxText { - Layout.alignment: Qt.AlignBottom - Layout.fillWidth: true - Layout.leftMargin: 50 - Layout.preferredHeight: 70 - - text: qsTr('displayTooltip') - } } diff --git a/linphone-desktop/ui/views/App/Styles/Main/HomeStyle.qml b/linphone-desktop/ui/views/App/Styles/Main/HomeStyle.qml new file mode 100644 index 000000000..fcdba26ea --- /dev/null +++ b/linphone-desktop/ui/views/App/Styles/Main/HomeStyle.qml @@ -0,0 +1,11 @@ +pragma Singleton +import QtQuick 2.7 + +import Common 1.0 + +// ============================================================================= + +QtObject { + property color color: Colors.k + property int spacing: 20 +} diff --git a/linphone-desktop/ui/views/App/Styles/qmldir b/linphone-desktop/ui/views/App/Styles/qmldir index e8c599ec4..a4c178390 100644 --- a/linphone-desktop/ui/views/App/Styles/qmldir +++ b/linphone-desktop/ui/views/App/Styles/qmldir @@ -10,6 +10,7 @@ singleton CallsWindowStyle 1.0 Calls/CallsWindowStyle.qml singleton ContactEditStyle 1.0 Main/ContactEditStyle.qml singleton ContactsStyle 1.0 Main/ContactsStyle.qml singleton ConversationStyle 1.0 Main/ConversationStyle.qml +singleton HomeStyle 1.0 Main/HomeStyle.qml singleton MainWindowMenuBarStyle 1.0 Main/MainWindowMenuBarStyle.qml singleton MainWindowStyle 1.0 Main/MainWindowStyle.qml