Skip to content

L
linphone-desktop
Commit 22449228 authored by Ronan Abhamon's avatar Ronan Abhamon
Browse files
Options

feat(MainWindow/Conversation): use the final style

parent 623a8bad
Hide whitespace changes
Inline Side-by-side
Showing with 206 additions and 90 deletions
tests/assets/images/contact_edit_hovered.svg 0 → 100644
View file @ 22449228
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="19px" viewBox="0 0 22 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>contact_edit_over</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="contact_edit_over" stroke="#4B5964">
<path d="M8.54029156,2.5 C10.850165,2.5 12.7226588,4.39098325 12.7226588,6.72356259 C12.7226588,7.83995271 12.2940348,8.85494372 11.5935908,9.61033703 C11.4952898,9.71653609 11.5340928,9.69793625 11.4252454,9.79333541 L11.5997595,9.91213435 C17.938579,12.6985097 16.3132304,17.3824682 16.3132304,17.3824682 C12.2309551,18.6900566 8.54685822,18.4888584 8.54685822,18.4888584 L8.45333302,18.4888584 C8.45333302,18.4886584 4.7688382,18.6900566 0.686761802,17.3824682 C0.686761802,17.3824682 -0.938586743,12.6985097 5.40043177,9.91213435 L5.57494581,9.79333541 C5.4660984,9.69793625 5.50490141,9.71653609 5.40660046,9.61033703 C4.70635541,8.85494372 4.27753243,7.83995271 4.27753243,6.72356259 C4.27753243,4.39098325 6.15002629,2.5 8.45989968,2.5 L8.54029156,2.5 L8.54029156,2.5 Z" stroke-linejoin="round"></path>
<path d="M15.75,3.5 L21.5833333,3.5"></path>
<path d="M15.75,6.5 L21.5833333,6.5"></path>
<path d="M15.75,0.5 L21.5833333,0.5"></path>
</g>
</g>
</svg>
\ No newline at end of file
tests/assets/images/contact_edit_normal.svg 0 → 100644
View file @ 22449228
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="19px" viewBox="0 0 22 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>contact_edit_default</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="contact_edit_default">
<path d="M8.54029156,2.5 C10.850165,2.5 12.7226588,4.39098325 12.7226588,6.72356259 C12.7226588,7.83995271 12.2940348,8.85494372 11.5935908,9.61033703 C11.4952898,9.71653609 11.5340928,9.69793625 11.4252454,9.79333541 L11.5997595,9.91213435 C17.938579,12.6985097 16.3132304,17.3824682 16.3132304,17.3824682 C12.2309551,18.6900566 8.54685822,18.4888584 8.54685822,18.4888584 L8.45333302,18.4888584 C8.45333302,18.4886584 4.7688382,18.6900566 0.686761802,17.3824682 C0.686761802,17.3824682 -0.938586743,12.6985097 5.40043177,9.91213435 L5.57494581,9.79333541 C5.4660984,9.69793625 5.50490141,9.71653609 5.40660046,9.61033703 C4.70635541,8.85494372 4.27753243,7.83995271 4.27753243,6.72356259 C4.27753243,4.39098325 6.15002629,2.5 8.45989968,2.5 L8.54029156,2.5 L8.54029156,2.5 Z" stroke="#96A5B1" stroke-linejoin="round"></path>
<path d="M15.75,3.5 L21.5833333,3.5" stroke="#96A6B1"></path>
<path d="M15.75,6.5 L21.5833333,6.5" stroke="#96A6B1"></path>
<path d="M15.75,0.5 L21.5833333,0.5" stroke="#96A6B1"></path>
</g>
</g>
</svg>
\ No newline at end of file
tests/assets/images/contact_edit_pressed.svg 0 → 100644
View file @ 22449228
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="19px" viewBox="0 0 22 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>contact_edit_clic</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="contact_edit_clic" stroke="#FF5E00">
<path d="M8.54029156,2.5 C10.850165,2.5 12.7226588,4.39098325 12.7226588,6.72356259 C12.7226588,7.83995271 12.2940348,8.85494372 11.5935908,9.61033703 C11.4952898,9.71653609 11.5340928,9.69793625 11.4252454,9.79333541 L11.5997595,9.91213435 C17.938579,12.6985097 16.3132304,17.3824682 16.3132304,17.3824682 C12.2309551,18.6900566 8.54685822,18.4888584 8.54685822,18.4888584 L8.45333302,18.4888584 C8.45333302,18.4886584 4.7688382,18.6900566 0.686761802,17.3824682 C0.686761802,17.3824682 -0.938586743,12.6985097 5.40043177,9.91213435 L5.57494581,9.79333541 C5.4660984,9.69793625 5.50490141,9.71653609 5.40660046,9.61033703 C4.70635541,8.85494372 4.27753243,7.83995271 4.27753243,6.72356259 C4.27753243,4.39098325 6.15002629,2.5 8.45989968,2.5 L8.54029156,2.5 L8.54029156,2.5 Z" stroke-linejoin="round"></path>
<path d="M15.75,3.5 L21.5833333,3.5"></path>
<path d="M15.75,6.5 L21.5833333,6.5"></path>
<path d="M15.75,0.5 L21.5833333,0.5"></path>
</g>
</g>
</svg>
\ No newline at end of file
tests/resources.qrc
View file @ 22449228
......@@ -12,6 +12,9 @@
<file>assets/images/chevron_red.svg</file>
<file>assets/images/chevron_white.svg</file>
<file>assets/images/collapse.svg</file>
<file>assets/images/contact_edit_hovered.svg</file>
<file>assets/images/contact_edit_normal.svg</file>
<file>assets/images/contact_edit_pressed.svg</file>
<file>assets/images/contact_normal.svg</file>
<file>assets/images/contact_selected.svg</file>
<file>assets/images/delete_hovered.svg</file>
......@@ -143,6 +146,7 @@
<file>ui/views/App/NewCall.qml</file>
<file>ui/views/App/qmldir</file>
<file>ui/views/App/Styles/MainWindow/ContactsStyle.qml</file>
<file>ui/views/App/Styles/MainWindow/ConversationStyle.qml</file>
<file>ui/views/App/Styles/MainWindow/MainWindowStyle.qml</file>
<file>ui/views/App/Styles/qmldir</file>
</qresource>
......
tests/ui/modules/Common/Borders.qml
View file @ 22449228
......@@ -6,7 +6,7 @@ import QtQuick 2.7
// rectangle side.
// ===================================================================
Item {
Rectangle {
property var borderColor
property var borderWidth
......@@ -22,6 +22,8 @@ Item {
default property alias _content: content.data
color: 'transparent'
Rectangle {
id: bottomBorder
......
tests/ui/modules/Common/Colors.qml
View file @ 22449228
......@@ -9,6 +9,7 @@ QtObject {
property color o: '#232323' // TextButtonA Hovered.
property color q: '#E6E6E6'
property color d: '#5A585B'
// -----------------------------------------------------------------
// OK.
......@@ -16,7 +17,6 @@ QtObject {
property color b: '#5E5E5F'
property color c: '#CBCBCB'
property color d: '#5A585B'
property color e: '#F3F3F3'
property color f: '#E8E8E8'
property color g: '#6B7A86'
......
tests/ui/modules/Linphone/Styles/Contact/ContactDescriptionStyle.qml
View file @ 22449228
......@@ -12,7 +12,7 @@ QtObject {
}
property QtObject username: QtObject {
property color color: Colors.d
property color color: Colors.j
property int fontSize: 11
}
}
tests/ui/modules/Linphone/Styles/TimelineStyle.qml
View file @ 22449228
......@@ -33,7 +33,7 @@ QtObject {
property QtObject legend: QtObject {
property color backgroundColor: Colors.u
property color color: Colors.k
property int fontSize: 12
property int fontSize: 11
property int height: 30
property int iconSize: 10
property int leftMargin: 17
......
tests/ui/modules/Linphone/Timeline.qml
View file @ 22449228
......@@ -11,7 +11,7 @@ ColumnLayout {
property alias model: view.model
signal clicked (var contact)
signal contactSelected (var contact)
// -----------------------------------------------------------------
......@@ -92,7 +92,7 @@ ColumnLayout {
onClicked: {
view.currentIndex = index
timeline.clicked($contact)
timeline.contactSelected($contact)
}
}
}
......
tests/ui/scripts/Utils/utils.js
View file @ 22449228
......@@ -106,6 +106,19 @@ function clearTimeout (timer) {
// -------------------------------------------------------------------
// Connect a signal to a function only for one call.
function connectOnce (signal, cb) {
var func = function () {
signal.disconnect(func)
cb.apply(this, arguments)
}
signal.connect(func)
return func
}
// -------------------------------------------------------------------
// Basic assert function.
function assert (condition, message) {
if (!condition) {
......
tests/ui/views/App/MainWindow/Contacts.qml
View file @ 22449228
......@@ -29,6 +29,7 @@ ColumnLayout {
Utils.openConfirmDialog(window, {
descriptionText: qsTr('removeContactDescription'),
exitHandler: function (status) {
// TODO
console.log('remove contact', status)
},
title: qsTr('removeContactTitle')
......
tests/ui/views/App/MainWindow/Conversation.qml
View file @ 22449228
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import Common 1.0
import Linphone 1.0
import App.Styles 1.0
// ===================================================================
ColumnLayout {
property var contact
spacing: 0
// -----------------------------------------------------------------
// Contact bar.
// -----------------------------------------------------------------
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 102
color: '#D1D1D1'
Layout.preferredHeight: ConversationStyle.bar.height
color: ConversationStyle.bar.backgroundColor
RowLayout {
anchors.left: parent.left
anchors.leftMargin: 40
anchors.right: parent.right
anchors.rightMargin: 40
anchors.verticalCenter: parent.verticalCenter
height: 80
spacing: 50
width: parent.width
anchors {
fill: parent
leftMargin: ConversationStyle.bar.leftMargin
rightMargin: ConversationStyle.bar.rightMargin
}
spacing: ConversationStyle.bar.spacing
Avatar {
Layout.fillHeight: true
Layout.preferredWidth: 80
presenceLevel: Presence.Green // TODO: Use C++.
username: 'Cameron Andrews' // TODO: Use C++.
Layout.preferredHeight: ConversationStyle.bar.avatarSize
Layout.preferredWidth: ConversationStyle.bar.avatarSize
presenceLevel: contact.presenceLevel
username: contact.username
}
Column {
ContactDescription {
Layout.fillHeight: true
Layout.fillWidth: true
sipAddress: contact.sipAddresses[0]
sipAddressColor: ConversationStyle.bar.description.sipAddressColor
username: contact.username
usernameColor: ConversationStyle.bar.description.usernameColor
}
// Contact description.
ContactDescription {
height: parent.height * 0.60
sipAddress: 'cam.andrews@sip.linphone.org' // TODO: Use C++.
username: 'Cameron Andrews' // TODO: Use C++.
width: parent.width
}
// Contact actions.
Row {
height: parent.height * 0.40
width: parent.width
Row {
Layout.fillHeight: true
spacing: ConversationStyle.bar.actions.spacing
ActionBar {
iconSize: 32
width: parent.width / 2
ActionBar {
anchors.verticalCenter: parent.verticalCenter
iconSize: ConversationStyle.bar.actions.call.iconSize
ActionButton {
icon: 'cam'
onClicked: console.log('clicked!!!')
}
ActionButton {
icon: 'video_call'
onClicked: CallsWindow.show()
}
ActionButton {
icon: 'call'
onClicked: console.log('clicked!!!')
}
ActionButton {
icon: 'call'
onClicked: CallsWindow.show()
}
}
ActionBar {
iconSize: 32
layoutDirection: Qt.RightToLeft
width: parent.width / 2
ActionBar {
anchors.verticalCenter: parent.verticalCenter
ActionButton {
icon: 'delete'
onClicked: console.log('clicked!!!')
}
ActionButton {
icon: 'contact_edit'
iconSize: ConversationStyle.bar.actions.edit.contactIconSize
ActionButton {
icon: 'contact'
onClicked: window.setView('Contact')
}
onClicked: console.log('clicked!!!') // TODO.
}
ActionButton {
icon: 'delete'
iconSize: ConversationStyle.bar.actions.edit.deleteIconSize
onClicked: window.setView('Contact') // TODO.
}
}
}
}
}
// Messages/Calls filter.
Rectangle {
// -----------------------------------------------------------------
// Messages/Calls filters.
// -----------------------------------------------------------------
Borders {
Layout.fillWidth: true
Layout.preferredHeight: 40
color: '#C7C7C7'
Rectangle {
anchors.fill: parent
anchors.leftMargin: 1
ExclusiveButtons {
anchors.left: parent.left
anchors.leftMargin: 40
anchors.verticalCenter: parent.verticalCenter
texts: [
qsTr('displayCallsAndMessages'),
qsTr('displayCalls'),
qsTr('displayMessages')
]
Layout.preferredHeight: ConversationStyle.filters.height
borderColor: ConversationStyle.filters.border.color
bottomWidth: ConversationStyle.filters.border.bottomWidth
color: ConversationStyle.filters.backgroundColor
topWidth: ConversationStyle.filters.border.topWidth
ExclusiveButtons {
anchors {
left: parent.left
leftMargin: ConversationStyle.filters.leftMargin
verticalCenter: parent.verticalCenter
}
texts: [
qsTr('displayCallsAndMessages'),
qsTr('displayCalls'),
qsTr('displayMessages')
]
}
}
Borders {
Layout.fillHeight: true
Layout.fillWidth: true
borderColor: '#C7C7C7'
leftWidth: 1
topWidth: 1
// -----------------------------------------------------------------
// Chat.
// -----------------------------------------------------------------
Chat {
anchors.fill: parent
}
Chat {
Layout.fillWidth: true
Layout.fillHeight: true
}
}
tests/ui/views/App/MainWindow/MainWindow.qml
View file @ 22449228
......@@ -13,8 +13,8 @@ import App.Styles 1.0
ApplicationWindow {
id: window
function setView (view) {
contentLoader.source = view + '.qml'
function setView (view, props) {
contentLoader.setSource(view + '.qml', props || {})
}
// -----------------------------------------------------------------
......@@ -158,9 +158,9 @@ ApplicationWindow {
Layout.fillWidth: true
model: ContactsListModel {} // Use History list.
onClicked: {
onContactSelected: {
menu.resetSelectedEntry()
setView('Conversation')
setView('Conversation', { contact: contact })
}
}
}
......
tests/ui/views/App/Styles/MainWindow/ConversationStyle.qml 0 → 100644
View file @ 22449228
pragma Singleton
import QtQuick 2.7
import Common 1.0
// ===================================================================
QtObject {
property QtObject bar: QtObject {
property color backgroundColor: Colors.e
property int avatarSize: 60
property int height: 80
property int leftMargin: 40
property int rightMargin: 30
property int spacing: 20
property QtObject actions: QtObject {
property int spacing: 40
property QtObject call: QtObject {
property int iconSize: 40
}
property QtObject edit: QtObject {
property int contactIconSize: 22
property int deleteIconSize: 17
}
}
property QtObject description: QtObject {
property color sipAddressColor: Colors.g
property color usernameColor: Colors.j
}
}
property QtObject filters: QtObject {
property color backgroundColor: Colors.k
property int height: 51
property int leftMargin: 40
property QtObject border: QtObject {
property color color: Colors.p
property int bottomWidth: 1
property int topWidth: 0
}
}
}
tests/ui/views/App/Styles/qmldir
View file @ 22449228
......@@ -4,5 +4,6 @@ module App.Styles
# Views styles -------------------------------------------------------
singleton ContactsStyle 1.0 MainWindow/ContactsStyle.qml
singleton MainWindowStyle 1.0 MainWindow/MainWindowStyle.qml
singleton ContactsStyle 1.0 MainWindow/ContactsStyle.qml
singleton ConversationStyle 1.0 MainWindow/ConversationStyle.qml
singleton MainWindowStyle 1.0 MainWindow/MainWindowStyle.qml
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023