diff --git a/tests/resources.qrc b/tests/resources.qrc index 8c97b4edf..3e1ad02cf 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -59,6 +59,7 @@ ui/modules/Linphone/Styles/CollapseStyle.qml ui/modules/Linphone/Styles/DialogStyle.qml ui/modules/Linphone/Styles/ForceScrollBarStyle.qml + ui/modules/Linphone/Styles/MenuStyle.qml ui/modules/Linphone/Styles/PopupStyle.qml ui/modules/Linphone/Styles/qmldir ui/modules/Linphone/Styles/SearchBoxStyle.qml diff --git a/tests/ui/modules/Linphone/Constants.qml b/tests/ui/modules/Linphone/Constants.qml index 90d2f83a8..9800447ef 100644 --- a/tests/ui/modules/Linphone/Constants.qml +++ b/tests/ui/modules/Linphone/Constants.qml @@ -5,13 +5,22 @@ QtObject { property int zPopup: 999 property int zMax: 999999 - // TODO: Mutualize similar colors. property QtObject colors: QtObject { property string a: 'transparent' - property string b: '#5E5E5F' - property string c: '#C5C5C5' - property string d: '#5A585B' - property string e: '#DEDEDE' - property string f: '#808080' + property string b: '#5E5E5F' // Pressed toolbar. + property string c: '#C5C5C5' // Released toolbar. + + property string d: '#5A585B' // Text color. + + property string e: '#DEDEDE' // Timeline separator + + property string f: '#808080' // Popup shadow. + + property string g: '#8E8E8E' // MenuEntry Normal. + property string h: '#707070' // MenuEntry Hovered. + property string i: '#FE5E00' // MenuEntry Pressed. + property string j: '#434343' // MenuEntry Selected. + + property string k: '#FFFFFF' // Text color. } } diff --git a/tests/ui/modules/Linphone/Menu.qml b/tests/ui/modules/Linphone/Menu.qml index eda31fb49..8670320f9 100644 --- a/tests/ui/modules/Linphone/Menu.qml +++ b/tests/ui/modules/Linphone/Menu.qml @@ -2,6 +2,7 @@ import QtQuick 2.7 import QtQuick.Layouts 1.3 import Linphone 1.0 +import Linphone.Styles 1.0 // =================================================================== // Responsive flat menu with visual indicators. @@ -18,19 +19,19 @@ ColumnLayout { signal entrySelected (int entry) - spacing: 2 + spacing: MenuStyle.spacing Repeater { model: entries Rectangle { color: _selectedEntry === index - ? '#434343' + ? MenuStyle.entry.color.selected : (mouseArea.pressed - ? '#FE5E00' + ? MenuStyle.entry.color.pressed : (mouseArea.containsMouse - ? '#707070' - : '#8E8E8E' + ? MenuStyle.entry.color.hovered + : MenuStyle.entry.color.normal ) ) height: item.entryHeight @@ -38,22 +39,22 @@ ColumnLayout { RowLayout { anchors.left: parent.left - anchors.leftMargin: 20 + anchors.leftMargin: MenuStyle.entry.leftMargin anchors.right: parent.right - anchors.rightMargin: 20 + anchors.rightMargin: MenuStyle.entry.rightMargin anchors.verticalCenter: parent.verticalCenter - spacing: 18 + spacing: MenuStyle.entry.spacing Icon { - Layout.preferredHeight: 24 - Layout.preferredWidth: 24 + Layout.preferredHeight: MenuStyle.entry.iconSize + Layout.preferredWidth: MenuStyle.entry.iconSize icon: modelData.icon } Text { Layout.fillWidth: true - color: '#FFFFFF' - font.pointSize: 13 + color: MenuStyle.entry.textColor + font.pointSize: MenuStyle.entry.fontSize height: parent.height text: modelData.entryName verticalAlignment: Text.AlignVCenter @@ -61,9 +62,11 @@ ColumnLayout { Icon { Layout.alignment: Qt.AlignRight - Layout.preferredHeight: 12 - Layout.preferredWidth: 12 - icon: _selectedEntry === index ? 'right_arrow' : '' + Layout.preferredHeight: MenuStyle.entry.selectionIconSize + Layout.preferredWidth: MenuStyle.entry.selectionIconSize + icon: _selectedEntry === index + ? MenuStyle.entry.selectionIcon + : '' } } diff --git a/tests/ui/modules/Linphone/Styles/CollapseStyle.qml b/tests/ui/modules/Linphone/Styles/CollapseStyle.qml index 25e5611f0..6935f4e0d 100644 --- a/tests/ui/modules/Linphone/Styles/CollapseStyle.qml +++ b/tests/ui/modules/Linphone/Styles/CollapseStyle.qml @@ -4,6 +4,7 @@ import QtQuick 2.7 QtObject { property int animationDuration: 200 property int iconSize: 32 + property string icon: 'collapse' property Rectangle background: Rectangle { diff --git a/tests/ui/modules/Linphone/Styles/MenuStyle.qml b/tests/ui/modules/Linphone/Styles/MenuStyle.qml new file mode 100644 index 000000000..8c5445dce --- /dev/null +++ b/tests/ui/modules/Linphone/Styles/MenuStyle.qml @@ -0,0 +1,27 @@ +pragma Singleton +import QtQuick 2.7 + +import Linphone 1.0 + +QtObject { + property int spacing: 2 + + property QtObject entry: QtObject { + property int fontSize: 13 + property int iconSize: 24 + property int leftMargin: 20 + property int rightMargin: 20 + property int selectionIconSize: 12 + property int spacing: 18 + + property string selectionIcon: 'right_arrow' + property string textColor: Constants.colors.k + + property QtObject color: QtObject { + property string normal: Constants.colors.g + property string hovered: Constants.colors.h + property string pressed: Constants.colors.i + property string selected: Constants.colors.j + } + } +} diff --git a/tests/ui/modules/Linphone/Styles/PopupStyle.qml b/tests/ui/modules/Linphone/Styles/PopupStyle.qml index 0a9d232e4..acdafb52d 100644 --- a/tests/ui/modules/Linphone/Styles/PopupStyle.qml +++ b/tests/ui/modules/Linphone/Styles/PopupStyle.qml @@ -6,9 +6,11 @@ import Linphone 1.0 QtObject { property QtObject shadow: QtObject { property double radius: 8.0 + property int horizontalOffset: 0 property int samples: 15 property int verticalOffset: 2 + property string color: Constants.colors.f } } diff --git a/tests/ui/modules/Linphone/Styles/TimelineStyle.qml b/tests/ui/modules/Linphone/Styles/TimelineStyle.qml index 37b068a34..0556c76c6 100644 --- a/tests/ui/modules/Linphone/Styles/TimelineStyle.qml +++ b/tests/ui/modules/Linphone/Styles/TimelineStyle.qml @@ -11,12 +11,14 @@ QtObject { property int leftMargin: 18 property int spacing: 16 property int topMargin: 10 + property string color: Constants.colors.d property string icon: 'history' } property QtObject separator: QtObject { property int height: 1 + property string color: Constants.colors.e } } diff --git a/tests/ui/modules/Linphone/Styles/qmldir b/tests/ui/modules/Linphone/Styles/qmldir index 3ca735f9a..74ec3585d 100644 --- a/tests/ui/modules/Linphone/Styles/qmldir +++ b/tests/ui/modules/Linphone/Styles/qmldir @@ -3,9 +3,10 @@ module Linphone.Style # Components styles. -singleton CollapseStyle 1.0 CollapseStyle.qml -singleton DialogStyle 1.0 DialogStyle.qml +singleton CollapseStyle 1.0 CollapseStyle.qml +singleton DialogStyle 1.0 DialogStyle.qml singleton ForceScrollBarStyle 1.0 ForceScrollBarStyle.qml -singleton PopupStyle 1.0 PopupStyle.qml -singleton SearchBoxStyle 1.0 SearchBoxStyle.qml -singleton TimelineStyle 1.0 TimelineStyle.qml +singleton MenuStyle 1.0 MenuStyle.qml +singleton PopupStyle 1.0 PopupStyle.qml +singleton SearchBoxStyle 1.0 SearchBoxStyle.qml +singleton TimelineStyle 1.0 TimelineStyle.qml