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