diff --git a/linphone-desktop/assets/images/settings_advanced_normal.svg b/linphone-desktop/assets/images/settings_advanced_normal.svg new file mode 100644 index 000000000..a9a16694f --- /dev/null +++ b/linphone-desktop/assets/images/settings_advanced_normal.svg @@ -0,0 +1,12 @@ + + + + settings_advanced_default + Created with Sketch. + + + + + + + diff --git a/linphone-desktop/assets/images/settings_advanced_selected.svg b/linphone-desktop/assets/images/settings_advanced_selected.svg new file mode 100644 index 000000000..3ed9f3d57 --- /dev/null +++ b/linphone-desktop/assets/images/settings_advanced_selected.svg @@ -0,0 +1,12 @@ + + + + settings_advanced_selected + Created with Sketch. + + + + + + + diff --git a/linphone-desktop/assets/images/settings_audio_normal.svg b/linphone-desktop/assets/images/settings_audio_normal.svg new file mode 100644 index 000000000..8b699f08c --- /dev/null +++ b/linphone-desktop/assets/images/settings_audio_normal.svg @@ -0,0 +1,12 @@ + + + + settings_audio_default + Created with Sketch. + + + + + + + diff --git a/linphone-desktop/assets/images/settings_audio_selected.svg b/linphone-desktop/assets/images/settings_audio_selected.svg new file mode 100644 index 000000000..906dc8ccc --- /dev/null +++ b/linphone-desktop/assets/images/settings_audio_selected.svg @@ -0,0 +1,12 @@ + + + + settings_audio_selected + Created with Sketch. + + + + + + + diff --git a/linphone-desktop/assets/images/settings_call_normal.svg b/linphone-desktop/assets/images/settings_call_normal.svg new file mode 100644 index 000000000..34bd78429 --- /dev/null +++ b/linphone-desktop/assets/images/settings_call_normal.svg @@ -0,0 +1,12 @@ + + + + settings_call_default + Created with Sketch. + + + + + + + diff --git a/linphone-desktop/assets/images/settings_call_selected.svg b/linphone-desktop/assets/images/settings_call_selected.svg new file mode 100644 index 000000000..2a517d0f5 --- /dev/null +++ b/linphone-desktop/assets/images/settings_call_selected.svg @@ -0,0 +1,12 @@ + + + + settings_call_selected + Created with Sketch. + + + + + + + diff --git a/linphone-desktop/assets/images/settings_network_normal.svg b/linphone-desktop/assets/images/settings_network_normal.svg new file mode 100644 index 000000000..1b2724d32 --- /dev/null +++ b/linphone-desktop/assets/images/settings_network_normal.svg @@ -0,0 +1,12 @@ + + + + settings_network_default + Created with Sketch. + + + + + + + diff --git a/linphone-desktop/assets/images/settings_network_selected.svg b/linphone-desktop/assets/images/settings_network_selected.svg new file mode 100644 index 000000000..60bf1e3dc --- /dev/null +++ b/linphone-desktop/assets/images/settings_network_selected.svg @@ -0,0 +1,12 @@ + + + + settings_network_selected + Created with Sketch. + + + + + + + diff --git a/linphone-desktop/assets/images/settings_sip_accounts_normal.svg b/linphone-desktop/assets/images/settings_sip_accounts_normal.svg new file mode 100644 index 000000000..d1c79f0bb --- /dev/null +++ b/linphone-desktop/assets/images/settings_sip_accounts_normal.svg @@ -0,0 +1,12 @@ + + + + settings_account_default + Created with Sketch. + + + + + + + diff --git a/linphone-desktop/assets/images/settings_sip_accounts_selected.svg b/linphone-desktop/assets/images/settings_sip_accounts_selected.svg new file mode 100644 index 000000000..180cc8702 --- /dev/null +++ b/linphone-desktop/assets/images/settings_sip_accounts_selected.svg @@ -0,0 +1,12 @@ + + + + settings_account_selected + Created with Sketch. + + + + + + + diff --git a/linphone-desktop/assets/images/settings_video_normal.svg b/linphone-desktop/assets/images/settings_video_normal.svg new file mode 100644 index 000000000..edcf18833 --- /dev/null +++ b/linphone-desktop/assets/images/settings_video_normal.svg @@ -0,0 +1,12 @@ + + + + settings_video_default + Created with Sketch. + + + + + + + diff --git a/linphone-desktop/assets/images/settings_video_selected.svg b/linphone-desktop/assets/images/settings_video_selected.svg new file mode 100644 index 000000000..3315e31e8 --- /dev/null +++ b/linphone-desktop/assets/images/settings_video_selected.svg @@ -0,0 +1,12 @@ + + + + settings_video_selected + Created with Sketch. + + + + + + + diff --git a/linphone-desktop/resources.qrc b/linphone-desktop/resources.qrc index 4678865b8..03d491e8c 100644 --- a/linphone-desktop/resources.qrc +++ b/linphone-desktop/resources.qrc @@ -135,6 +135,18 @@ assets/images/screenshot_normal.svg assets/images/screenshot_pressed.svg assets/images/search.svg + assets/images/settings_advanced_normal.svg + assets/images/settings_advanced_selected.svg + assets/images/settings_audio_normal.svg + assets/images/settings_audio_selected.svg + assets/images/settings_call_normal.svg + assets/images/settings_call_selected.svg + assets/images/settings_network_normal.svg + assets/images/settings_network_selected.svg + assets/images/settings_sip_accounts_normal.svg + assets/images/settings_sip_accounts_selected.svg + assets/images/settings_video_normal.svg + assets/images/settings_video_selected.svg assets/images/speaker_off_hovered.svg assets/images/speaker_off_normal.svg assets/images/speaker_off_pressed.svg diff --git a/linphone-desktop/ui/modules/Common/Form/Tab/TabButton.qml b/linphone-desktop/ui/modules/Common/Form/Tab/TabButton.qml index 2f0a22e95..b13b07bf4 100644 --- a/linphone-desktop/ui/modules/Common/Form/Tab/TabButton.qml +++ b/linphone-desktop/ui/modules/Common/Form/Tab/TabButton.qml @@ -1,17 +1,26 @@ import QtQuick 2.7 -import QtQuick.Controls 2.1 +import QtQuick.Controls 2.1 as Controls +import QtQuick.Layouts 1.3 +import Common 1.0 import Common.Styles 1.0 // ============================================================================= -TabButton { +Controls.TabButton { id: button // --------------------------------------------------------------------------- + property string icon + property int iconSize: TabButtonStyle.icon.size + + readonly property bool _isSelected: parent.parent.currentItem === button + + // --------------------------------------------------------------------------- + function _getBackgroundColor () { - if (button.parent.parent.currentItem === button) { + if (_isSelected) { return TabButtonStyle.backgroundColor.selected } @@ -25,7 +34,7 @@ TabButton { } function _getTextColor () { - if (button.parent.parent.currentItem === button) { + if (_isSelected) { return TabButtonStyle.text.color.selected } @@ -45,22 +54,44 @@ TabButton { implicitHeight: TabButtonStyle.text.height } - contentItem: Text { - color: _getTextColor() + contentItem: RowLayout { + spacing: 8 - font { - bold: true - pointSize: TabButtonStyle.text.fontSize + Icon { + id: icon + + Layout.fillHeight: true + Layout.leftMargin: TabButtonStyle.text.leftPadding + + icon: { + var icon = button.icon + return icon.length + ? (icon + '_' + (button._isSelected ? 'selected' : 'normal')) + : '' + } + iconSize: button.iconSize } - elide: Text.ElideRight + Text { + Layout.fillWidth: true + Layout.fillHeight: true - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter + color: _getTextColor() - leftPadding: TabButtonStyle.text.leftPadding - rightPadding: TabButtonStyle.text.rightPadding - text: button.text + font { + bold: true + pointSize: TabButtonStyle.text.fontSize + } + + elide: Text.ElideRight + + height: parent.height + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + + rightPadding: TabButtonStyle.text.rightPadding + text: button.text + } } hoverEnabled: true diff --git a/linphone-desktop/ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml b/linphone-desktop/ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml index 25991fe90..9d72205e0 100644 --- a/linphone-desktop/ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml +++ b/linphone-desktop/ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml @@ -13,6 +13,10 @@ QtObject { property color selected: Colors.k } + property QtObject icon: QtObject { + property int size: 20 + } + property QtObject text: QtObject { property int fontSize: 9 property int height: 40 diff --git a/linphone-desktop/ui/views/App/Settings/SettingsWindow.qml b/linphone-desktop/ui/views/App/Settings/SettingsWindow.qml index 3dda6e11d..d2620544c 100644 --- a/linphone-desktop/ui/views/App/Settings/SettingsWindow.qml +++ b/linphone-desktop/ui/views/App/Settings/SettingsWindow.qml @@ -15,8 +15,8 @@ ApplicationWindow { height: SettingsWindowStyle.height width: SettingsWindowStyle.width - maximumHeight: height - maximumWidth: width + //maximumHeight: height + //maximumWidth: width minimumHeight: height minimumWidth: width @@ -40,31 +40,37 @@ ApplicationWindow { id: tabBar TabButton { + icon: 'settings_sip_accounts' text: qsTr('sipAccountsTab') width: implicitWidth } TabButton { + icon: 'settings_audio' text: qsTr('audioTab') width: implicitWidth } TabButton { + icon: 'settings_video' text: qsTr('videoTab') width: implicitWidth } TabButton { + icon: 'settings_call' text: qsTr('callsAndChatTab') width: implicitWidth } TabButton { + icon: 'settings_network' text: qsTr('networkTab') width: implicitWidth } TabButton { + icon: 'settings_advanced' text: qsTr('uiTab') width: implicitWidth }