Skip to content

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

feat(Popup): use style file

parent 885c16f9
Hide whitespace changes
Inline Side-by-side
Showing with 372 additions and 363 deletions
tests/ui/modules/Linphone/Popup/DropDownMenu.qml
View file @ eaafc4b0
import QtGraphicalEffects 1.0
import QtQuick 2.7 import QtQuick 2.7
import QtQuick.Controls 2.0
import Linphone 1.0
import Linphone.Styles 1.0 import Linphone.Styles 1.0
Rectangle { // ===================================================================
readonly property int entryHeight: 50 // Low component to display a list/menu in a popup.
// ===================================================================
property int maxMenuHeight
implicitHeight: {
var height = model.count * entryHeight
return height > maxMenuHeight ? maxMenuHeight : height
}
visible: false
function show () {
visible = true
}
function hide () {
visible = false
}
Rectangle {
anchors.fill: parent
id: listContainer
ScrollableListView {
anchors.fill: parent
id: list
height: console.log(model.count) || count
// TODO: Remove, use C++ model instead. Rectangle {
model: ListModel { default property alias content: content.data
id: model property int entryHeight
property int maxMenuHeight
ListElement {
$presence: 'connected' // Ugly. Just ugly.
$sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org' // `model` is a reference on a unknown component!
$username: 'Toto' // See usage with SearchBox.
} implicitHeight: {
ListElement { var height = model.count * entryHeight
$presence: 'connected' return height > maxMenuHeight ? maxMenuHeight : height
$sipAddress: 'toto.lala.sip.linphone.org' }
$username: 'Toto' visible: false
}
ListElement { function show () {
$presence: 'disconnected' visible = true
$sipAddress: 'machin.truc.sip.linphone.org' }
$username: 'Toto'
} function hide () {
ListElement { visible = false
$presence: 'absent' }
$sipAddress: 'hey.listen.sip.linphone.org'
$username: 'Toto' Rectangle {
} id: content
ListElement {
$presence: 'do_not_disturb' anchors.fill: parent
$sipAddress: 'valentin.cognito.sip.linphone.org' color: PopupStyle.backgroundColor
$username: 'Toto' layer.enabled: true
} layer.effect: PopupShadow { }
ListElement { }
$presence: 'do_not_disturb'
$sipAddress: 'charles.henri.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'yesyes.nono.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'nsa.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'toto.lala.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'machin.truc.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'absent'
$sipAddress: 'hey.listen.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'valentin.cognito.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'charles.henri.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'yesyes.nono.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'nsa.sip.linphone.org'
$username: 'Toto'
}
}
delegate: Contact {
presence: $presence
sipAddress: $sipAddress
username: $username
width: parent.width
actions: [
ActionButton {
icon: 'call'
onClicked: console.log('clicked')
},
ActionButton {
icon: 'cam'
onClicked: console.log('cam clicked')
}
]
}
}
}
PopupShadow {
anchors.fill: listContainer
source: listContainer
visible: true
}
} }
tests/ui/modules/Linphone/Popup/PopupShadow.qml
View file @ eaafc4b0
...@@ -5,9 +5,9 @@ import Linphone.Styles 1.0 ...@@ -5,9 +5,9 @@ import Linphone.Styles 1.0
// =================================================================== // ===================================================================
DropShadow { DropShadow {
color: PopupStyle.shadow.color color: PopupStyle.shadow.color
horizontalOffset: PopupStyle.shadow.horizontalOffset horizontalOffset: PopupStyle.shadow.horizontalOffset
radius: PopupStyle.shadow.radius radius: PopupStyle.shadow.radius
samples: PopupStyle.shadow.samples samples: PopupStyle.shadow.samples
verticalOffset: PopupStyle.shadow.verticalOffset verticalOffset: PopupStyle.shadow.verticalOffset
} }
tests/ui/modules/Linphone/SearchBox.qml
View file @ eaafc4b0
...@@ -7,71 +7,82 @@ import Linphone.Styles 1.0 ...@@ -7,71 +7,82 @@ import Linphone.Styles 1.0
// =================================================================== // ===================================================================
Item { Item {
property alias placeholderText: searchField.placeholderText id: item
property alias maxMenuHeight: menu.maxMenuHeight
signal menuClosed () property alias delegate: list.delegate
signal menuOpened () property alias entryHeight: menu.entryHeight
signal searchTextChanged (string text) property alias maxMenuHeight: menu.maxMenuHeight
property alias model: list.model
property alias placeholderText: searchField.placeholderText
function _hideMenu () { signal menuClosed ()
menu.hide() signal menuOpened ()
shadow.visible = false signal searchTextChanged (string text)
searchField.focus = false
menuClosed() function _hideMenu () {
} menu.hide()
shadow.visible = false
searchField.focus = false
function _showMenu () { menuClosed()
menu.show() }
shadow.visible = true
menuOpened() function _showMenu () {
} menu.show()
shadow.visible = true
menuOpened()
}
implicitHeight: searchField.height
implicitHeight: searchField.height Item {
implicitHeight: searchField.height + menu.height
width: parent.width
Item { TextField {
implicitHeight: searchField.height + menu.height id: searchField
width: parent.width
TextField { background: SearchBoxStyle.searchFieldBackground
id: searchField width: parent.width
background: SearchBoxStyle.searchFieldBackground Keys.onEscapePressed: _hideMenu()
width: parent.width
Keys.onEscapePressed: _hideMenu() onActiveFocusChanged: activeFocus && _showMenu()
onTextChanged: searchTextChanged(text)
}
DropDownMenu {
id: menu
onActiveFocusChanged: activeFocus && _showMenu() anchors.top: searchField.bottom
onTextChanged: searchTextChanged(text) width: searchField.width
} z: Constants.zPopup
DropDownMenu { Keys.onEscapePressed: _hideMenu()
id: menu
anchors.top: searchField.bottom ScrollableListView {
width: searchField.width id: list
z: Constants.zPopup
Keys.onEscapePressed: _hideMenu() anchors.fill: parent
} }
}
InvertedMouseArea { InvertedMouseArea {
enabled: menu.visible enabled: menu.visible
height: parent.height height: parent.height
parent: parent parent: parent
width: parent.width width: parent.width
onPressed: _hideMenu() onPressed: _hideMenu()
} }
PopupShadow { PopupShadow {
id: shadow id: shadow
anchors.fill: searchField anchors.fill: searchField
source: searchField source: searchField
visible: false visible: false
}
} }
}
} }
tests/ui/modules/Linphone/Styles/PopupStyle.qml
View file @ eaafc4b0
...@@ -4,13 +4,15 @@ import QtQuick 2.7 ...@@ -4,13 +4,15 @@ import QtQuick 2.7
import Linphone 1.0 import Linphone 1.0
QtObject { QtObject {
property QtObject shadow: QtObject { property string backgroundColor: Colors.k
property double radius: 8.0
property int horizontalOffset: 0 property QtObject shadow: QtObject {
property int samples: 15 property double radius: 8.0
property int verticalOffset: 2
property string color: Colors.f property int horizontalOffset: 0
} property int samples: 15
property int verticalOffset: 2
property string color: Colors.f
}
} }
tests/ui/views/MainWindow/MainWindow.qml
View file @ eaafc4b0
...@@ -7,186 +7,291 @@ import Linphone 1.0 ...@@ -7,186 +7,291 @@ import Linphone 1.0
import 'qrc:/ui/scripts/utils.js' as Utils import 'qrc:/ui/scripts/utils.js' as Utils
ApplicationWindow { ApplicationWindow {
id: mainWindow id: mainWindow
maximumHeight: 70 maximumHeight: 70
minimumHeight: 70 minimumHeight: 70
minimumWidth: 780 minimumWidth: 780
title: 'Linphone' title: 'Linphone'
visible: true visible: true
header: ToolBar {
background: Rectangle {
color: '#EAEAEA'
}
height: 70
RowLayout {
anchors.fill: parent
anchors.leftMargin: 20
anchors.rightMargin: 20
spacing: 20
// Collapse.
Collapse {
Layout.preferredWidth: 25
Layout.fillHeight: parent.height
id: collapse
onCollapsed: mainWindowStates.state = isCollapsed()
? 'collapsed'
: ''
}
// User info. header: ToolBar {
ContactDescription { background: Rectangle {
Layout.fillHeight: parent.height color: '#EAEAEA'
Layout.preferredWidth: 200 }
sipAddress: 'e.miller@sip-linphone.org' height: 70
username: 'Edward Miller'
}
// User actions. RowLayout {
ActionButton { anchors.fill: parent
Layout.preferredWidth: 16 anchors.leftMargin: 20
onClicked: Utils.openWindow('ManageAccounts', mainWindow) anchors.rightMargin: 20
} spacing: 20
ActionButton { // Collapse.
Layout.preferredWidth: 16 Collapse {
onClicked: Utils.openWindow('NewCall', mainWindow) Layout.preferredWidth: 25
} Layout.fillHeight: parent.height
id: collapse
// Search. onCollapsed: mainWindowStates.state = isCollapsed()
SearchBox { ? 'collapsed'
Layout.fillWidth: true : ''
maxMenuHeight: 300 // See Hick's law for good choice. }
placeholderText: qsTr('mainSearchBarPlaceholder')
onMenuClosed: content.enabled = true // User info.
ContactDescription {
Layout.fillHeight: parent.height
Layout.preferredWidth: 200
sipAddress: 'e.miller@sip-linphone.org'
username: 'Edward Miller'
}
onMenuOpened: { // User actions.
if (!collapse.isCollapsed()) { ActionButton {
collapse.collapse() Layout.preferredWidth: 16
} onClicked: Utils.openWindow('ManageAccounts', mainWindow)
content.enabled = false }
}
} ActionButton {
Layout.preferredWidth: 16
onClicked: Utils.openWindow('NewCall', mainWindow)
}
// Search.
SearchBox {
Layout.fillWidth: true
maxMenuHeight: 300 // See Hick's law for good choice.
placeholderText: qsTr('mainSearchBarPlaceholder')
entryHeight: 50
onMenuClosed: content.enabled = true
onMenuOpened: {
if (!collapse.isCollapsed()) {
collapse.collapse()
}
content.enabled = false
}
model: ListModel {
id: model
ListElement {
$presence: 'connected'
$sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'toto.lala.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'machin.truc.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'absent'
$sipAddress: 'hey.listen.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'valentin.cognito.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'charles.henri.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'yesyes.nono.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'nsa.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'toto.lala.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'machin.truc.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'absent'
$sipAddress: 'hey.listen.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'valentin.cognito.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'charles.henri.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'yesyes.nono.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'nsa.sip.linphone.org'
$username: 'Toto'
}
}
delegate: Contact {
presence: $presence
sipAddress: $sipAddress
username: $username
width: parent.width
// Start conference. actions: [
ActionButton { ActionButton {
Layout.preferredWidth: 32 icon: 'call'
Layout.preferredHeight: 32 onClicked: console.log('clicked')
icon: 'conference' },
ActionButton {
icon: 'cam'
onClicked: console.log('cam clicked')
} }
]
} }
}
// Start conference.
ActionButton {
Layout.preferredWidth: 32
Layout.preferredHeight: 32
icon: 'conference'
}
} }
}
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
id: content id: content
spacing: 0 spacing: 0
// Main menu.
ColumnLayout {
Layout.fillHeight: true
Layout.maximumWidth: 250
Layout.preferredWidth: 250
spacing: 0
Menu {
entryHeight: 50
entryWidth: parent.width
entries: [{
entryName: qsTr('homeEntry'),
icon: 'home'
}, {
entryName: qsTr('contactsEntry'),
icon: 'contacts_list'
}]
onEntrySelected: {
console.log('entry', entry)
}
}
// History. // Main menu.
Timeline { ColumnLayout {
Layout.fillHeight: true Layout.fillHeight: true
Layout.fillWidth: true Layout.maximumWidth: 250
Layout.preferredWidth: 250
model: ListModel { spacing: 0
ListElement {
$presence: 'connected' Menu {
$sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org' entryHeight: 50
$username: 'Toto' entryWidth: parent.width
}
ListElement { entries: [{
$presence: 'connected' entryName: qsTr('homeEntry'),
$sipAddress: 'toto.lala.sip.linphone.org' icon: 'home'
$username: 'Toto' }, {
} entryName: qsTr('contactsEntry'),
ListElement { icon: 'contacts_list'
$presence: 'disconnected' }]
$sipAddress: 'machin.truc.sip.linphone.org'
$username: 'Toto' onEntrySelected: {
} console.log('entry', entry)
ListElement {
$presence: 'absent'
$sipAddress: 'hey.listen.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'valentin.cognito.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'charles.henri.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'yesyes.nono.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'nsa.sip.linphone.org'
$username: 'Toto'
}
}
}
// Logo.
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 70
color: '#EAEAEA'
}
} }
}
// History.
Timeline {
Layout.fillHeight: true
Layout.fillWidth: true
// Main content. model: ListModel {
Loader { ListElement {
Layout.fillHeight: true $presence: 'connected'
Layout.fillWidth: true $sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
source: 'qrc:/ui/views/MainWindow/Contacts.qml' $username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'toto.lala.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'machin.truc.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'absent'
$sipAddress: 'hey.listen.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'valentin.cognito.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'charles.henri.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'yesyes.nono.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'nsa.sip.linphone.org'
$username: 'Toto'
}
} }
}
// Logo.
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 70
color: '#EAEAEA'
}
} }
StateGroup { // Main content.
id: mainWindowStates Loader {
Layout.fillHeight: true
Layout.fillWidth: true
source: 'qrc:/ui/views/MainWindow/Contacts.qml'
}
}
states: State { StateGroup {
name: 'collapsed' id: mainWindowStates
PropertyChanges { states: State {
height: 480 name: 'collapsed'
maximumHeight: 99999
maximumWidth: 99999 PropertyChanges {
minimumHeight: 480 height: 480
target: mainWindow maximumHeight: 99999
} maximumWidth: 99999
} minimumHeight: 480
target: mainWindow
}
} }
}
} }
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