From b81239ae339c60d53f76799bacb7c30d311ea1aa Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Tue, 27 Sep 2016 14:50:28 +0200 Subject: [PATCH] feat(Form/ExclusiveButtons): use style file --- tests/linphone.pro | 1 + tests/resources.qrc | 2 + .../Linphone/Form/ExclusiveButtons.qml | 51 ++++++++++--------- .../ui/modules/Linphone/Form/SmallButton.qml | 47 +++++++++-------- .../Styles/Form/ExclusiveButtonsStyle.qml | 17 +++++++ .../Linphone/Styles/Form/SmallButtonStyle.qml | 22 ++++++++ tests/ui/modules/Linphone/Styles/qmldir | 17 ++++--- 7 files changed, 103 insertions(+), 54 deletions(-) create mode 100644 tests/ui/modules/Linphone/Styles/Form/ExclusiveButtonsStyle.qml create mode 100644 tests/ui/modules/Linphone/Styles/Form/SmallButtonStyle.qml diff --git a/tests/linphone.pro b/tests/linphone.pro index 063e22312..0dfce3211 100644 --- a/tests/linphone.pro +++ b/tests/linphone.pro @@ -36,6 +36,7 @@ lupdate_only{ ui/modules/Linphone/Popup/*.qml \ ui/modules/Linphone/Select/*.qml \ ui/modules/Linphone/Styles/*.qml \ + ui/modules/Linphone/Styles/Form/*.qml \ ui/modules/Linphone/View/*.qml \ ui/views/*.qml \ ui/views/MainWindow/*.qml \ diff --git a/tests/resources.qrc b/tests/resources.qrc index 040d54a0c..10f9057bd 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -60,6 +60,8 @@ ui/modules/Linphone/Styles/CollapseStyle.qml ui/modules/Linphone/Styles/DialogStyle.qml ui/modules/Linphone/Styles/ForceScrollBarStyle.qml + ui/modules/Linphone/Styles/Form/ExclusiveButtonsStyle.qml + ui/modules/Linphone/Styles/Form/SmallButtonStyle.qml ui/modules/Linphone/Styles/MenuStyle.qml ui/modules/Linphone/Styles/PopupStyle.qml ui/modules/Linphone/Styles/qmldir diff --git a/tests/ui/modules/Linphone/Form/ExclusiveButtons.qml b/tests/ui/modules/Linphone/Form/ExclusiveButtons.qml index e48f14ed8..b3269f44d 100644 --- a/tests/ui/modules/Linphone/Form/ExclusiveButtons.qml +++ b/tests/ui/modules/Linphone/Form/ExclusiveButtons.qml @@ -1,38 +1,39 @@ import QtQuick 2.7 +import Linphone.Styles 1.0 + // =================================================================== Row { - property int selectedButton: 0 - property variant texts + property int _selectedButton: 0 + property variant texts - signal clicked (int button) + signal clicked (int button) - spacing: 8 + spacing: ExclusiveButtonsStyle.buttonsSpacing - Repeater { - model: texts + Repeater { + model: texts - SmallButton { - anchors.verticalCenter: parent.verticalCenter - backgroundColor: selectedButton === index - ? '#8E8E8E' - : (button.down - ? '#FE5E00' - : (button.hovered - ? '#C0C0C0' - : '#D1D1D1' - ) - ) - id: button - text: modelData + SmallButton { + anchors.verticalCenter: parent.verticalCenter + backgroundColor: _selectedButton === index + ? ExclusiveButtonsStyle.button.color.selected + : (down + ? ExclusiveButtonsStyle.button.color.pressed + : (hovered + ? ExclusiveButtonsStyle.button.color.hovered + : ExclusiveButtonsStyle.button.color.normal + ) + ) + text: modelData - onClicked: { - if (selectedButton !== index) { - selectedButton = index - clicked(index) - } - } + onClicked: { + if (_selectedButton !== index) { + _selectedButton = index + clicked(index) } + } } + } } diff --git a/tests/ui/modules/Linphone/Form/SmallButton.qml b/tests/ui/modules/Linphone/Form/SmallButton.qml index ef91d4fbe..e7d84ab6f 100644 --- a/tests/ui/modules/Linphone/Form/SmallButton.qml +++ b/tests/ui/modules/Linphone/Form/SmallButton.qml @@ -1,30 +1,33 @@ import QtQuick 2.7 import QtQuick.Controls 2.0 +import Linphone.Styles 1.0 + // =================================================================== Button { - property alias backgroundColor: background.color + id: button - background: Rectangle { - color: button.down - ? '#FE5E00' - : (button.hovered - ? '#C0C0C0' - : '#D1D1D1' - ) - id: background - implicitHeight: 22 - radius: 10 - } - contentItem: Text { - color:'#FFFFFF' - font.pointSize: 8 - horizontalAlignment: Text.AlignHCenter - id: text - text: button.text - verticalAlignment: Text.AlignVCenter - } - hoverEnabled: true - id: button + property alias backgroundColor: background.color + + background: Rectangle { + id: background + + color: button.down + ? SmallButtonStyle.background.color.pressed + : (button.hovered + ? SmallButtonStyle.background.color.hovered + : SmallButtonStyle.background.color.normal + ) + implicitHeight: SmallButtonStyle.background.height + radius: SmallButtonStyle.background.radius + } + contentItem: Text { + color: SmallButtonStyle.text.color + font.pointSize: SmallButtonStyle.text.fontSize + horizontalAlignment: Text.AlignHCenter + text: button.text + verticalAlignment: Text.AlignVCenter + } + hoverEnabled: true } diff --git a/tests/ui/modules/Linphone/Styles/Form/ExclusiveButtonsStyle.qml b/tests/ui/modules/Linphone/Styles/Form/ExclusiveButtonsStyle.qml new file mode 100644 index 000000000..9fb536405 --- /dev/null +++ b/tests/ui/modules/Linphone/Styles/Form/ExclusiveButtonsStyle.qml @@ -0,0 +1,17 @@ +pragma Singleton +import QtQuick 2.7 + +import Linphone 1.0 + +QtObject { + property int buttonsSpacing: 8 + + property QtObject button: QtObject { + property QtObject color: QtObject { + property string hovered: '#C0C0C0' + property string normal: '#D1D1D1' + property string pressed: '#FE5E00' + property string selected: '#8E8E8E' + } + } +} diff --git a/tests/ui/modules/Linphone/Styles/Form/SmallButtonStyle.qml b/tests/ui/modules/Linphone/Styles/Form/SmallButtonStyle.qml new file mode 100644 index 000000000..a02e3500c --- /dev/null +++ b/tests/ui/modules/Linphone/Styles/Form/SmallButtonStyle.qml @@ -0,0 +1,22 @@ +pragma Singleton +import QtQuick 2.7 + +import Linphone 1.0 + +QtObject { + property QtObject background: QtObject { + property int height: 22 + property int radius: 10 + + property QtObject color: QtObject { + property string hovered: '#C0C0C0' + property string normal: '#D1D1D1' + property string pressed: '#FE5E00' + } + } + + property QtObject text: QtObject { + property int fontSize: 8 + property string color: '#FFFFFF' + } +} diff --git a/tests/ui/modules/Linphone/Styles/qmldir b/tests/ui/modules/Linphone/Styles/qmldir index 74ec3585d..4d6bbb846 100644 --- a/tests/ui/modules/Linphone/Styles/qmldir +++ b/tests/ui/modules/Linphone/Styles/qmldir @@ -3,10 +3,13 @@ module Linphone.Style # Components styles. -singleton CollapseStyle 1.0 CollapseStyle.qml -singleton DialogStyle 1.0 DialogStyle.qml -singleton ForceScrollBarStyle 1.0 ForceScrollBarStyle.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 +singleton CollapseStyle 1.0 CollapseStyle.qml +singleton DialogStyle 1.0 DialogStyle.qml +singleton ForceScrollBarStyle 1.0 ForceScrollBarStyle.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 + +singleton ExclusiveButtonsStyle 1.0 Form/ExclusiveButtonsStyle.qml +singleton SmallButtonStyle 1.0 Form/SmallButtonStyle.qml