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

feat(ui/views/App/Settings/SettingsUi): view in progress, add a ComboBox component

Browse source
This commit is contained in:
Ronan Abhamon 2017-02-22 16:31:32 +01:00
parent b4da8ddce9
commit f514b2d6e3
11 changed files with 169 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
linphone-desktop/assets/images/drop_down.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="7px" viewBox="0 0 12 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>drop_down_list</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="drop_down_list" stroke="#6B7A86" stroke-width="2">
<path d="M3.5,8.5 L8.5,3.5 M3.50419639,-1.5 L8.5,3.5" id="status_username_disconnected" transform="translate(6.000000, 3.500000) rotate(-270.000000) translate(-6.000000, -3.500000) "></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 782 B

8
linphone-desktop/assets/languages/en.ts
View file

@ -851,6 +851,14 @@ Server url not configured.</translation>
<source>savedVideosLabel</source>
<translation>Saved videos folder</translation>
</message>
<message>
<source>languagesTitle</source>
<translation>Languages</translation>
</message>
<message>
<source>languagesLabel</source>
<translation>Language</translation>
</message>
</context>
<context>
<name>SettingsWindow</name>

8
linphone-desktop/assets/languages/fr.ts
View file

@ -861,6 +861,14 @@ Url du serveur non configurée.</translation>
<source>savedVideosLabel</source>
<translation>Dossier des captures vidéos</translation>
</message>
<message>
<source>languagesTitle</source>
<translation>Langues</translation>
</message>
<message>
<source>languagesLabel</source>
<translation>Langue</translation>
</message>
</context>
<context>
<name>SettingsWindow</name>

5
linphone-desktop/resources.qrc
View file

@ -74,6 +74,7 @@
<file>assets/images/delete_hovered.svg</file>
<file>assets/images/delete_normal.svg</file>
<file>assets/images/delete_pressed.svg</file>
<file>assets/images/drop_down.svg</file>
<file>assets/images/edit_hovered.svg</file>
<file>assets/images/edit_normal.svg</file>
<file>assets/images/edit_pressed.svg</file>
@ -183,6 +184,7 @@
<file>ui/modules/Common/Form/Buttons/TextButtonA.qml</file>
<file>ui/modules/Common/Form/Buttons/TextButtonB.qml</file>
<file>ui/modules/Common/Form/CheckBoxText.qml</file>
<file>ui/modules/Common/Form/ComboBox.qml</file>
<file>ui/modules/Common/Form/DroppableTextArea.qml</file>
<file>ui/modules/Common/Form/Fields/NumericField.qml</file>
<file>ui/modules/Common/Form/Fields/TextAreaField.qml</file>
@ -203,7 +205,6 @@
<file>ui/modules/Common/Form/Tab/TabBar.qml</file>
<file>ui/modules/Common/Form/Tab/TabButton.qml</file>
<file>ui/modules/Common/Form/Tab/TabContainer.qml</file>
<file>ui/modules/Common/Form/TransparentComboBox.qml</file>
<file>ui/modules/Common/Form/TransparentTextInput.qml</file>
<file>ui/modules/Common/Helpers/InvertedMouseArea.qml</file>
<file>ui/modules/Common/Image/Icon.qml</file>
@ -231,6 +232,7 @@
<file>ui/modules/Common/Styles/Form/Buttons/TextButtonAStyle.qml</file>
<file>ui/modules/Common/Styles/Form/Buttons/TextButtonBStyle.qml</file>
<file>ui/modules/Common/Styles/Form/CheckBoxTextStyle.qml</file>
<file>ui/modules/Common/Styles/Form/ComboBoxStyle.qml</file>
<file>ui/modules/Common/Styles/Form/DroppableTextAreaStyle.qml</file>
<file>ui/modules/Common/Styles/Form/Fields/NumericFieldStyle.qml</file>
<file>ui/modules/Common/Styles/Form/Fields/TextAreaFieldStyle.qml</file>
@ -245,7 +247,6 @@
<file>ui/modules/Common/Styles/Form/SwitchStyle.qml</file>
<file>ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml</file>
<file>ui/modules/Common/Styles/Form/Tab/TabContainerStyle.qml</file>
<file>ui/modules/Common/Styles/Form/TransparentComboBoxStyle.qml</file>
<file>ui/modules/Common/Styles/Form/TransparentTextInputStyle.qml</file>
<file>ui/modules/Common/Styles/Menu/ActionMenuStyle.qml</file>
<file>ui/modules/Common/Styles/Menu/MenuStyle.qml</file>

73
linphone-desktop/ui/modules/Common/Form/ComboBox.qml Normal file
View file

@ -0,0 +1,73 @@
import QtQuick 2.7
import QtQuick.Controls 2.0
import Common 1.0
import Common.Styles 1.0
// =============================================================================
ComboBox {
id: comboBox
textRole: 'key'
// ---------------------------------------------------------------------------
background: Rectangle {
border {
color: ComboBoxStyle.background.border.color
width: ComboBoxStyle.background.border.width
}
color: ComboBoxStyle.background.color
radius: ComboBoxStyle.background.radius
implicitHeight: ComboBoxStyle.background.height
implicitWidth: ComboBoxStyle.background.width
}
indicator: Icon {
icon: 'drop_down'
iconSize: ComboBoxStyle.background.iconSize
x: comboBox.width - width - comboBox.rightPadding
y: comboBox.topPadding + (comboBox.availableHeight - height) / 2
}
// ---------------------------------------------------------------------------
delegate: ItemDelegate {
id: item
background: Rectangle {
color: item.hovered
? ComboBoxStyle.delegate.color.hovered
: ComboBoxStyle.delegate.color.normal
Rectangle {
anchors.left: parent.left
color: ComboBoxStyle.delegate.indicator.color
height: parent.height
width: ComboBoxStyle.delegate.indicator.width
visible: item.hovered
}
Rectangle {
anchors.bottom: parent.bottom
color: ComboBoxStyle.delegate.separator.color
height: ComboBoxStyle.delegate.separator.height
width: parent.width
visible: comboBox.count !== index + 1
}
}
font.bold: comboBox.currentIndex === index
hoverEnabled: true
text: key
width: comboBox.width
}
}

33
linphone-desktop/ui/modules/Common/Form/TransparentComboBox.qml
View file

@ -1,33 +0,0 @@
import QtQuick 2.7
import QtQuick.Controls 2.0
import Common.Styles 1.0
// =============================================================================
// Discrete ComboBox that can be integrated in text.
// =============================================================================
ComboBox {
id: comboBox
background: Rectangle {
// No Style constant, see component name.
// It's a `transparent` ComboBox.
color: 'transparent'
}
delegate: ItemDelegate {
id: item
background: Rectangle {
color: item.down
? TransparentComboBoxStyle.item.color.pressed
: (comboBox.currentIndex === index
? TransparentComboBoxStyle.item.color.selected
: TransparentComboBoxStyle.item.color.normal
)
}
font.bold: comboBox.currentIndex === index
text: key || modelData
width: comboBox.width
}
}

38
linphone-desktop/ui/modules/Common/Styles/Form/ComboBoxStyle.qml Normal file
View file

@ -0,0 +1,38 @@
pragma Singleton
import QtQuick 2.7
import Common 1.0
// =============================================================================
QtObject {
property QtObject background: QtObject {
property color color: Colors.k
property int height: 36
property int iconSize: 10
property int radius: 4
property int width: 400
property QtObject border: QtObject {
property color color: Colors.c
property int width: 1
}
}
property QtObject delegate: QtObject {
property QtObject color: QtObject {
property color hovered: Colors.y
property color normal: Colors.k
}
property QtObject indicator: QtObject {
property color color: Colors.i
property int width: 5
}
property QtObject separator: QtObject {
property color color: Colors.c
property int height: 1
}
}
}

16
linphone-desktop/ui/modules/Common/Styles/Form/TransparentComboBoxStyle.qml
View file

@ -1,16 +0,0 @@
pragma Singleton
import QtQuick 2.7
import Common 1.0
// =============================================================================
QtObject {
property QtObject item: QtObject {
property QtObject color: QtObject {
property color normal: Colors.k
property color pressed: Colors.i
property color selected: Colors.k
}
}
}

18
linphone-desktop/ui/modules/Common/Styles/qmldir
View file

@ -8,6 +8,15 @@ singleton BusyIndicatorStyle 1.0 Animations/BusyIndicatorStyle.qml
singleton DialogStyle 1.0 Dialog/DialogStyle.qml
singleton ActionBarStyle 1.0 Form/ActionBarStyle.qml
singleton CheckBoxTextStyle 1.0 Form/CheckBoxTextStyle.qml
singleton ComboBoxStyle 1.0 Form/ComboBoxStyle.qml
singleton DroppableTextAreaStyle 1.0 Form/DroppableTextAreaStyle.qml
singleton ListFormStyle 1.0 Form/ListFormStyle.qml
singleton SearchBoxStyle 1.0 Form/SearchBoxStyle.qml
singleton SwitchStyle 1.0 Form/SwitchStyle.qml
singleton TransparentTextInputStyle 1.0 Form/TransparentTextInputStyle.qml
singleton AbstractTextButtonStyle 1.0 Form/Buttons/AbstractTextButtonStyle.qml
singleton ExclusiveButtonsStyle 1.0 Form/Buttons/ExclusiveButtonsStyle.qml
singleton FileChooserButtonStyle 1.0 Form/Buttons/FileChooserButtonStyle.qml
@ -28,15 +37,6 @@ singleton FormStyle 1.0 Form/Placements/FormStyle.qml
singleton TabButtonStyle 1.0 Form/Tab/TabButtonStyle.qml
singleton TabContainerStyle 1.0 Form/Tab/TabContainerStyle.qml
singleton ActionBarStyle 1.0 Form/ActionBarStyle.qml
singleton CheckBoxTextStyle 1.0 Form/CheckBoxTextStyle.qml
singleton DroppableTextAreaStyle 1.0 Form/DroppableTextAreaStyle.qml
singleton ListFormStyle 1.0 Form/ListFormStyle.qml
singleton SearchBoxStyle 1.0 Form/SearchBoxStyle.qml
singleton SwitchStyle 1.0 Form/SwitchStyle.qml
singleton TransparentComboBoxStyle 1.0 Form/TransparentComboBoxStyle.qml
singleton TransparentTextInputStyle 1.0 Form/TransparentTextInputStyle.qml
singleton ActionMenuStyle 1.0 Menu/ActionMenuStyle.qml
singleton MenuStyle 1.0 Menu/MenuStyle.qml

2
linphone-desktop/ui/modules/Common/qmldir
View file

@ -20,12 +20,12 @@ ActionBar 1.0 Form/ActionBar.qml
ActionButton 1.0 Form/ActionButton.qml
ActionSwitch 1.0 Form/ActionSwitch.qml
CheckBoxText 1.0 Form/CheckBoxText.qml
ComboBox 1.0 Form/ComboBox.qml
DroppableTextArea 1.0 Form/DroppableTextArea.qml
ListForm 1.0 Form/ListForm.qml
SearchBox 1.0 Form/SearchBox.qml
StaticListForm 1.0 Form/StaticListForm.qml
Switch 1.0 Form/Switch.qml
TransparentComboBox 1.0 Form/TransparentComboBox.qml
TransparentTextInput 1.0 Form/TransparentTextInput.qml
ExclusiveButtons 1.0 Form/Buttons/ExclusiveButtons.qml

18
linphone-desktop/ui/views/App/Settings/SettingsUi.qml
View file

@ -15,7 +15,23 @@ TabContainer {
// Languages.
// -------------------------------------------------------------------------
// TODO
Form {
title: qsTr('languagesTitle')
width: parent.width
FormLine {
FormGroup {
label: qsTr('languagesLabel')
ComboBox {
model: ListModel {
ListElement { key: 'English'; value: 0 }
ListElement { key: 'Français'; value: 1 }
}
}
}
}
}
// -------------------------------------------------------------------------
// Paths.