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

feat(views/App/MainWindow/ContactEdit): view in progress, use better lists

Browse source
This commit is contained in:
Ronan Abhamon 2016-12-07 11:11:15 +01:00
parent f4c56c99c3
commit 0ce9a5d55c
13 changed files with 172 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
tests/assets/images/add_disabled.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>add_disabled</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="add_disabled" stroke="#D0D8DE">
<path d="M9,17.5 C4.305875,17.5 0.5,13.694125 0.5,9 C0.5,4.3056625 4.305875,0.5 9,0.5 C13.694975,0.5 17.5,4.3056625 17.5,9 C17.5,13.694125 13.694975,17.5 9,17.5 Z" stroke-linejoin="round"></path>
<path d="M9.01666657,6 L9.01666657,11.8333333"></path>
<path d="M6.0999999,8.91666667 L11.9333332,8.91666667"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 887 B

14
tests/assets/images/add_hovered.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>add_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="add_over" stroke="#4B5964">
<path d="M9,17.5 C4.305875,17.5 0.5,13.694125 0.5,9 C0.5,4.3056625 4.305875,0.5 9,0.5 C13.694975,0.5 17.5,4.3056625 17.5,9 C17.5,13.694125 13.694975,17.5 9,17.5 Z" stroke-linejoin="round"></path>
<path d="M9.01666657,6 L9.01666657,11.8333333"></path>
<path d="M6.0999999,8.91666667 L11.9333332,8.91666667"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 879 B

14
tests/assets/images/add_normal.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>add_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="add_default" stroke="#96A6B1">
<path d="M9,17.5 C4.305875,17.5 0.5,13.694125 0.5,9 C0.5,4.3056625 4.305875,0.5 9,0.5 C13.694975,0.5 17.5,4.3056625 17.5,9 C17.5,13.694125 13.694975,17.5 9,17.5 Z" stroke-linejoin="round"></path>
<path d="M9.01666657,6 L9.01666657,11.8333333"></path>
<path d="M6.0999999,8.91666667 L11.9333332,8.91666667"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 885 B

14
tests/assets/images/add_pressed.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>add_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="add_clic" stroke="#FF5E00">
<path d="M17.5,9 C17.5,13.694125 13.694975,17.5 9,17.5 C4.305875,17.5 0.5,13.694125 0.5,9 C0.5,4.3056625 4.305875,0.5 9,0.5 C13.694975,0.5 17.5,4.3056625 17.5,9 L17.5,9 Z" stroke-linejoin="round"></path>
<path d="M9.01666657,6 L9.01666657,11.8333333"></path>
<path d="M6.0999999,8.91666667 L11.9333332,8.91666667"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 887 B

4
tests/resources.qrc
View file

@ -1,5 +1,9 @@
<!DOCTYPE RCC><RCC version="1.0">
<qresource prefix="/">
<file>assets/images/add_disabled.svg</file>
<file>assets/images/add_hovered.svg</file>
<file>assets/images/add_normal.svg</file>
<file>assets/images/add_pressed.svg</file>
<file>assets/images/attachment_hovered.svg</file>
<file>assets/images/attachment_normal.svg</file>
<file>assets/images/attachment_pressed.svg</file>

9
tests/src/components/contacts/ContactModel.cpp
View file

@ -31,6 +31,15 @@ QString ContactModel::getUsername () const {
);
}
bool ContactModel::setUsername (const QString &username) {
if (username.length() == 0)
return false;
return !m_linphone_friend->setName(
Utils::qStringToLinphoneString(username)
);
}
QString ContactModel::getAvatar () const {
// Find desktop avatar.
list<shared_ptr<belcard::BelCardPhoto> > photos =

2
tests/src/components/contacts/ContactModel.hpp
View file

@ -17,6 +17,7 @@ class ContactModel : public QObject {
Q_PROPERTY(
QString username
READ getUsername
WRITE setUsername
NOTIFY contactUpdated
);
@ -56,6 +57,7 @@ signals:
private:
QString getUsername () const;
bool setUsername (const QString &username);
QString getAvatar () const;
bool setAvatar (const QString &path);

47
tests/ui/modules/Common/Form/ActionButton.qml
View file

@ -7,24 +7,32 @@ import Common 1.0
// An animated (or not) button with image(s).
// ===================================================================
Button {
id: button
Item {
id: wrappedButton
property bool enabled: true
property bool useStates: true
property int iconSize // Optionnal.
readonly property alias hovered: button.hovered
// If `useStates` = true, the used icons are:
// `icon`_pressed, `icon`_hovered and `icon`_normal.
property string icon
signal clicked
// -----------------------------------------------------------------
function _getIcon () {
if (!useStates) {
return button.icon
return wrappedButton.icon
}
return button.icon + (
if (!wrappedButton.enabled) {
return wrappedButton.icon + '_disabled'
}
return wrappedButton.icon + (
button.down
? '_pressed'
: (button.hovered ? '_hovered' : '_normal')
@ -33,21 +41,28 @@ Button {
// -----------------------------------------------------------------
background: Rectangle {
color: 'transparent'
}
hoverEnabled: true
height: iconSize || parent.iconSize || parent.height
width: iconSize || parent.iconSize || parent.height
Icon {
id: icon
Button {
id: button
anchors.centerIn: parent
icon: _getIcon()
iconSize: parent.iconSize || (
parent.width > parent.height ? parent.height : parent.width
)
anchors.fill: parent
background: Rectangle {
color: 'transparent'
}
hoverEnabled: true
onClicked: wrappedButton.enabled && wrappedButton.clicked()
Icon {
id: icon
anchors.centerIn: parent
icon: _getIcon()
iconSize: parent.iconSize || (
parent.width > parent.height ? parent.height : parent.width
)
}
}
}

3
tests/ui/modules/Common/Form/ActionSwitch.qml
View file

@ -4,11 +4,10 @@ import QtQuick 2.7
Item {
property alias useStates: actionButton.useStates
property bool enabled: true
property int iconSize // Optionnal.
property string icon
property bool enabled: true
signal clicked
// -----------------------------------------------------------------

102
tests/ui/modules/Common/Form/ListForm.qml
View file

@ -10,15 +10,16 @@ RowLayout {
id: listForm
property alias model: values.model
property alias placeholder: placeholder.text
property alias title: text.text
property string placeholder
// -----------------------------------------------------------------
function _addValue (value) {
if (
model.count === 0 ||
model.get(model.count - 1).$value.length !== 0
) {
model.append({ $value: value })
model.append({ $value: value })
if (value.length === 0) {
addButton.enabled = false
}
}
@ -28,86 +29,102 @@ RowLayout {
} else {
model.set(index, { $value: text })
}
addButton.enabled = true
}
// -----------------------------------------------------------------
spacing: 0
// -----------------------------------------------------------------
// Title area.
// -----------------------------------------------------------------
RowLayout {
Layout.alignment: Qt.AlignTop
Layout.preferredHeight: ListFormStyle.lineHeight
spacing: ListFormStyle.titleArea.spacing
// Button: Add item in list.
ActionButton {
Layout.preferredHeight: ListFormStyle.titleArea.iconSize
Layout.preferredWidth: ListFormStyle.titleArea.iconSize
icon: 'add_field'
id: addButton
icon: 'add'
iconSize: ListFormStyle.titleArea.iconSize
onClicked: _addValue('')
}
// Title text.
Text {
id: text
Layout.preferredWidth: ListFormStyle.titleArea.text.width
color: ListFormStyle.titleArea.text.color
font.pointSize: ListFormStyle.titleArea.text.fontSize
elide: Text.ElideRight
font {
bold: true
pointSize: ListFormStyle.titleArea.text.fontSize
}
}
}
// -----------------------------------------------------------------
// Placeholder.
// -----------------------------------------------------------------
Text {
id: placeholder
Layout.fillWidth: true
Layout.preferredHeight: ListFormStyle.lineHeight
color: ListFormStyle.value.placeholder.color
font {
italic: true
pointSize: ListFormStyle.value.placeholder.fontSize
}
padding: ListFormStyle.value.text.padding
visible: model.count === 0
verticalAlignment: Text.AlignVCenter
}
// -----------------------------------------------------------------
// Values.
// -----------------------------------------------------------------
ListView {
id: values
Layout.fillWidth: true
Layout.preferredHeight: count * ListFormStyle.lineHeight
interactive: false
visible: count > 0
delegate: Item {
implicitHeight: textEdit.height
width: parent.width
// Background.
Rectangle {
color: textEdit.activeFocus
? ListFormStyle.value.backgroundColor.focused
: ListFormStyle.value.backgroundColor.normal
implicitHeight: textEdit.height
implicitWidth: textEdit.width
}
// Placeholder.
Text {
anchors.fill: textEdit
color: ListFormStyle.value.placeholder.color
font {
italic: true
pointSize: ListFormStyle.value.placeholder.fontSize
}
padding: textEdit.padding
text: textEdit.text.length === 0 && !textEdit.activeFocus
? listForm.placeholder
: ''
verticalAlignment: Text.AlignVCenter
}
// Input.
TextEdit {
id: textEdit
color: activeFocus
? ListFormStyle.value.text.color.focused
: ListFormStyle.value.text.color.normal
font.bold: !activeFocus
height: ListFormStyle.lineHeight
padding: ListFormStyle.value.text.padding
selectByMouse: true
text: $value
verticalAlignment: TextEdit.AlignVCenter
height: ListFormStyle.lineHeight
width: !activeFocus
? parent.width
: contentWidth + padding * 2
@ -116,15 +133,18 @@ RowLayout {
Keys.onReturnPressed: focus = false
onEditingFinished: _handleEditionFinished(index, text)
InvertedMouseArea {
anchors.fill: parent
enabled: textEdit.activeFocus
onPressed: textEdit.focus = false
}
}
// Handle click outside `TextEdit` instance.
InvertedMouseArea {
enabled: textEdit.activeFocus
height: textEdit.height
width: textEdit.width
onPressed: textEdit.focus = false
Component.onCompleted: {
if ($value.length === 0) {
textEdit.forceActiveFocus()
}
}
}
}

2
tests/ui/modules/Common/Image/RoundedImage.qml
View file

@ -6,9 +6,9 @@ Item {
id: item
property alias source: image.source
property alias status: image.status // READONLY!!!
property color backgroundColor: '#00000000'
property color foregroundColor: '#00000000'
readonly property alias status: image.status
Item {
id: imageContainer

10
tests/ui/modules/Common/Styles/Form/ListFormStyle.qml
View file

@ -15,7 +15,7 @@ QtObject {
}
property QtObject placeholder: QtObject {
property color color: Colors.d
property color color: Colors.w
property int fontSize: 10
}
@ -24,18 +24,18 @@ QtObject {
property QtObject color: QtObject {
property color focused: Colors.l
property color normal: Colors.d
property color normal: Colors.r
}
}
}
property QtObject titleArea: QtObject {
property int spacing: 10
property int iconSize: 16
property int iconSize: 18
property QtObject text: QtObject {
property color color: Colors.l
property int fontSize: 10
property color color: Colors.j
property int fontSize: 9
property int width: 130
}
}

7
tests/ui/views/App/MainWindow/ContactEdit.qml
View file

@ -21,8 +21,6 @@ ColumnLayout {
sipAddress
) || sipAddress
property var _info: {}
// -----------------------------------------------------------------
function _removeContact () {
@ -82,10 +80,8 @@ ColumnLayout {
spacing: ContactEditStyle.infoBar.spacing
ActionButton {
Layout.preferredHeight: ContactEditStyle.infoBar.avatarSize
Layout.preferredWidth: ContactEditStyle.infoBar.avatarSize
icon: 'contact_card_photo'
iconSize: ContactEditStyle.infoBar.avatarSize
onClicked: avatarChooser.open()
@ -141,6 +137,7 @@ ColumnLayout {
Flickable {
Layout.fillHeight: true
Layout.fillWidth: true
Layout.topMargin: 40
ScrollBar.vertical: ForceScrollBar {}
boundsBehavior: Flickable.StopAtBounds