mirrors/linphone-desktop
1
0
Fork 0
mirror of https://gitlab.linphone.org/BC/public/linphone-desktop.git synced 2026-01-23 06:38:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(app): new menu component

Browse source
This commit is contained in:
Ronan Abhamon 2016-09-27 11:19:00 +02:00
parent b79724a9f5
commit ba2ec69285
9 changed files with 151 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
tests/imgs/contacts_list.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="86px" height="86px" viewBox="0 0 86 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
<title>footer_contacts</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="OUTILS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="linphone_v2.0_icones_buttons" sketch:type="MSArtboardGroup" transform="translate(-1888.000000, -17134.000000)">
<g id="footer_contacts" sketch:type="MSLayerGroup" transform="translate(1886.000000, 17132.000000)">
<path d="M45.2014578,5 C56.7508248,5 66.113294,14.455 66.113294,26.118 C66.113294,31.7 63.9701741,36.775 60.4679539,40.552 C59.9764491,41.083 60.1704642,40.99 59.6262271,41.467 L60.4987973,42.061 C92.192895,55.993 84.0661522,79.413 84.0661522,79.413 C63.6547753,85.951 45.2342911,84.945 45.2342911,84.945 L44.7666651,84.945 C44.7666651,84.944 26.344191,85.951 5.93380901,79.413 C5.93380901,79.413 -2.19293371,55.993 29.5021589,42.061 L30.3747291,41.467 C29.830492,40.99 30.0245071,41.083 29.5330023,40.552 C26.0317771,36.775 23.8876622,31.7 23.8876622,26.118 C23.8876622,14.455 33.2501314,5 44.7994984,5 L45.2014578,5 L45.2014578,5 Z" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-250-Copy-9" fill-opacity="0" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="90" height="90"></rect>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

17
tests/imgs/home.svg Normal file
View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="56px" height="55px" viewBox="0 0 56 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
<title>menu</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="OUTILS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="linphone_v2.0_icones_buttons" sketch:type="MSArtboardGroup" transform="translate(-7027.000000, -2873.000000)">
<g id="menu" sketch:type="MSLayerGroup" transform="translate(7010.000000, 2856.000000)">
<rect id="Rectangle-232-Copy" fill-opacity="0" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="90" height="90"></rect>
<g id="menu-copy" transform="translate(19.000000, 20.000000)" stroke="#FFFFFF" stroke-width="5" sketch:type="MSShapeGroup" stroke-linecap="round" stroke-linejoin="round">
<path d="M1,0 L51,0 M1,16.4781511 L51,16.4781511 M1,32.445549 L51,32.445549 M1,48.9237001 L51,48.9237001" id="menu-icon-copy"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

15
tests/imgs/right_arrow.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="56px" height="106px" viewBox="0 0 56 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
<title>arrow_hangup</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="SMARTPHONE-PORTRAIT" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="6-call-incoming-04-background-mode-hangup" sketch:type="MSArtboardGroup" transform="translate(-924.000000, -1773.000000)" stroke-linecap="round" stroke="#FFFFFF" stroke-width="5">
<g id="arrow_hangup" sketch:type="MSLayerGroup" transform="translate(928.500000, 1825.500000) rotate(-45.000000) translate(-928.500000, -1825.500000) translate(892.000000, 1790.000000)">
<path d="M70.5,0 L70.5,70" id="Line" sketch:type="MSShapeGroup"></path>
<path d="M70,70 L0,70" id="Line-Copy" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
tests/linphone.pro
View file

@ -33,7 +33,6 @@ lupdate_only{
ui/modules/Linphone/Dialog/*.qml \
ui/modules/Linphone/Form/*.qml \
ui/modules/Linphone/Image/*.qml \
ui/modules/Linphone/Misc/*.qml \
ui/modules/Linphone/Popup/*.qml \
ui/modules/Linphone/Select/*.qml \
ui/modules/Linphone/Styles/*.qml \

5
tests/resources.qrc
View file

@ -6,10 +6,12 @@
<file>imgs/chat.svg</file>
<file>imgs/collapse.svg</file>
<file>imgs/conference.svg</file>
<file>imgs/contacts_list.svg</file>
<file>imgs/contact.svg</file>
<file>imgs/delete.svg</file>
<file>imgs/hangup.svg</file>
<file>imgs/history.svg</file>
<file>imgs/home.svg</file>
<file>imgs/incoming_call.svg</file>
<file>imgs/led_absent.svg</file>
<file>imgs/led_connected.svg</file>
@ -18,6 +20,7 @@
<file>imgs/linphone.png</file>
<file>imgs/lost_incoming_call.svg</file>
<file>imgs/lost_outgoing_call.svg</file>
<file>imgs/right_arrow.svg</file>
<file>imgs/valid.svg</file>
<file>languages/en.qm</file>
<file>languages/fr.qm</file>
@ -47,7 +50,7 @@
<file>ui/modules/Linphone/Form/TransparentComboBox.qml</file>
<file>ui/modules/Linphone/Image/Icon.qml</file>
<file>ui/modules/Linphone/InvertedMouseArea.qml</file>
<file>ui/modules/Linphone/Misc/MenuEntry.qml</file>
<file>ui/modules/Linphone/Menu.qml</file>
<file>ui/modules/Linphone/Popup/DropDownMenu.qml</file>
<file>ui/modules/Linphone/Popup/PopupShadow.qml</file>
<file>ui/modules/Linphone/qmldir</file>

85
tests/ui/modules/Linphone/Menu.qml Normal file
View file

@ -0,0 +1,85 @@
import QtQuick 2.7
import QtQuick.Layouts 1.3
import Linphone 1.0
// ===================================================================
// Responsive flat menu with visual indicators.
// ===================================================================
ColumnLayout {
id: item
property int entryHeight
property int entryWidth
property variant entries
property int _selectedEntry: 0
signal entrySelected (int entry)
spacing: 2
Repeater {
model: entries
Rectangle {
color: _selectedEntry === index
? '#434343'
: (mouseArea.pressed
? '#FE5E00'
: (mouseArea.containsMouse
? '#707070'
: '#8E8E8E'
)
)
height: item.entryHeight
width: item.entryWidth
RowLayout {
anchors.left: parent.left
anchors.leftMargin: 20
anchors.right: parent.right
anchors.rightMargin: 20
anchors.verticalCenter: parent.verticalCenter
spacing: 18
Icon {
Layout.preferredHeight: 24
Layout.preferredWidth: 24
icon: modelData.icon
}
Text {
Layout.fillWidth: true
color: '#FFFFFF'
font.pointSize: 13
height: parent.height
text: modelData.entryName
verticalAlignment: Text.AlignVCenter
}
Icon {
Layout.alignment: Qt.AlignRight
Layout.preferredHeight: 12
Layout.preferredWidth: 12
icon: _selectedEntry === index ? 'right_arrow' : ''
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
if (_selectedEntry !== index) {
_selectedEntry = index
entrySelected(index)
}
}
}
}
}
}

39
tests/ui/modules/Linphone/Misc/MenuEntry.qml
View file

@ -1,39 +0,0 @@
import QtQuick 2.7
Rectangle {
property alias entryName: text.text
property bool isSelected
color: isSelected ? '#434343' : '#8E8E8E'
Row {
anchors.fill: parent
anchors.leftMargin: 10
anchors.rightMargin: 10
spacing: 10
Image {
fillMode: Image.PreserveAspectFit
height: parent.height
width: 30
}
Text {
color: '#FFFFFF'
font.pointSize: 13
height: parent.height
id: text
verticalAlignment: Text.AlignVCenter
}
Image {
fillMode: Image.PreserveAspectFit
height: parent.height
}
}
MouseArea {
anchors.fill: parent
onClicked: { } // TODO.
}
}

4
tests/ui/modules/Linphone/qmldir
View file

@ -40,8 +40,8 @@ Icon 1.0 Image/Icon.qml
# InvertedMouseArea
InvertedMouseArea 1.0 InvertedMouseArea.qml
# Misc
MenuEntry 1.0 Misc/MenuEntry.qml
# Menu
Menu 1.0 Menu.qml
# Popup
DropDownMenu 1.0 Popup/DropDownMenu.qml

23
tests/ui/views/MainWindow/MainWindow.qml
View file

@ -93,18 +93,21 @@ ApplicationWindow {
Layout.preferredWidth: 250
spacing: 0
MenuEntry {
Layout.fillWidth: true
Layout.preferredHeight: 50
entryName: qsTr('homeEntry')
}
Menu {
entryHeight: 50
entryWidth: parent.width
Item { Layout.preferredHeight: 2 }
entries: [{
entryName: qsTr('homeEntry'),
icon: 'home'
}, {
entryName: qsTr('contactsEntry'),
icon: 'contacts_list'
}]
MenuEntry {
Layout.fillWidth: true
Layout.preferredHeight: 50
entryName: qsTr('contactsEntry')
onEntrySelected: {
console.log('entry', entry)
}
}
// History.