From f3855dfc55364c042481cab540e15b1dbbdc7af5 Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Mon, 26 Sep 2016 10:53:25 +0200 Subject: [PATCH] feat(searchBox): use style file --- tests/resources.qrc | 10 +++- tests/ui/components/collapse/Collapse.qml | 3 +- tests/ui/components/dialog/ConfirmDialog.qml | 11 ++-- .../components/dialog/DialogDescription.qml | 2 +- tests/ui/components/dialog/DialogPlus.qml | 2 +- .../invertedMouseArea/InvertedMouseArea.qml | 2 +- tests/ui/components/popup/DropDownMenu.qml | 8 +-- tests/ui/components/popup/PopupShadow.qml | 13 +++++ tests/ui/components/searchBox/SearchBox.qml | 52 +++++++++---------- .../ui/components/view/ScrollableListView.qml | 14 +++++ tests/ui/style/components/Collapse.qml | 2 +- tests/ui/style/components/Dialog.qml | 2 +- tests/ui/style/components/Popup.qml | 14 +++++ tests/ui/style/components/SearchBox.qml | 12 +++++ tests/ui/style/components/qmldir | 8 +++ tests/ui/style/global/Colors.qml | 6 +++ tests/ui/style/{ => global}/Constants.qml | 0 tests/ui/style/global/qmldir | 6 +++ tests/ui/style/qmldir | 8 --- 19 files changed, 122 insertions(+), 53 deletions(-) create mode 100644 tests/ui/components/popup/PopupShadow.qml create mode 100644 tests/ui/components/view/ScrollableListView.qml create mode 100644 tests/ui/style/components/Popup.qml create mode 100644 tests/ui/style/components/SearchBox.qml create mode 100644 tests/ui/style/components/qmldir create mode 100644 tests/ui/style/global/Colors.qml rename tests/ui/style/{ => global}/Constants.qml (100%) create mode 100644 tests/ui/style/global/qmldir delete mode 100644 tests/ui/style/qmldir diff --git a/tests/resources.qrc b/tests/resources.qrc index cbefaadc9..47eef64f3 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -18,6 +18,8 @@ ui/components/contact/ContactDescription.qml ui/components/contact/Avatar.qml ui/components/popup/DropDownMenu.qml + ui/components/popup/PopupShadow.qml + ui/components/view/ScrollableListView.qml ui/components/dialog/ConfirmDialog.qml ui/components/dialog/DialogDescription.qml ui/components/dialog/DialogPlus.qml @@ -33,10 +35,14 @@ ui/components/form/DarkButton.qml ui/components/invertedMouseArea/InvertedMouseArea.qml ui/scripts/utils.js + ui/style/components/qmldir ui/style/components/Dialog.qml ui/style/components/Collapse.qml - ui/style/qmldir - ui/style/Constants.qml + ui/style/components/SearchBox.qml + ui/style/components/Popup.qml + ui/style/global/qmldir + ui/style/global/Colors.qml + ui/style/global/Constants.qml ui/views/newCall.qml ui/views/manageAccounts.qml ui/views/mainWindow/mainWindow.qml diff --git a/tests/ui/components/collapse/Collapse.qml b/tests/ui/components/collapse/Collapse.qml index 6e50828d4..730e0a571 100644 --- a/tests/ui/components/collapse/Collapse.qml +++ b/tests/ui/components/collapse/Collapse.qml @@ -1,7 +1,8 @@ import QtQuick 2.7 import 'qrc:/ui/components/form' -import 'qrc:/ui/style' + +import 'qrc:/ui/style/components' // =================================================================== // A simple component to build collapsed item. diff --git a/tests/ui/components/dialog/ConfirmDialog.qml b/tests/ui/components/dialog/ConfirmDialog.qml index 4aacd7776..14e66979f 100644 --- a/tests/ui/components/dialog/ConfirmDialog.qml +++ b/tests/ui/components/dialog/ConfirmDialog.qml @@ -1,7 +1,8 @@ import QtQuick 2.7 import 'qrc:/ui/components/form' -import 'qrc:/ui/style' + +import 'qrc:/ui/style/components' // =================================================================== // A simple dialog with OK/Cancel buttons. @@ -23,8 +24,8 @@ DialogPlus { } ] centeredButtons: true - maximumHeight: DialogStyle.confirm.height - maximumWidth: DialogStyle.confirm.width - minimumHeight: DialogStyle.confirm.height - minimumWidth: DialogStyle.confirm.width + maximumHeight: DialogStyle.confirmDialog.height + maximumWidth: DialogStyle.confirmDialog.width + minimumHeight: DialogStyle.confirmDialog.height + minimumWidth: DialogStyle.confirmDialog.width } diff --git a/tests/ui/components/dialog/DialogDescription.qml b/tests/ui/components/dialog/DialogDescription.qml index 202fd7479..fa63c1950 100644 --- a/tests/ui/components/dialog/DialogDescription.qml +++ b/tests/ui/components/dialog/DialogDescription.qml @@ -1,6 +1,6 @@ import QtQuick 2.7 -import 'qrc:/ui/style' +import 'qrc:/ui/style/components' // =================================================================== // Description content used by dialogs. diff --git a/tests/ui/components/dialog/DialogPlus.qml b/tests/ui/components/dialog/DialogPlus.qml index 089870be4..08680078f 100644 --- a/tests/ui/components/dialog/DialogPlus.qml +++ b/tests/ui/components/dialog/DialogPlus.qml @@ -2,7 +2,7 @@ import QtQuick 2.7 import QtQuick.Layouts 1.3 import QtQuick.Window 2.2 -import 'qrc:/ui/style' +import 'qrc:/ui/style/components' // =================================================================== // Helper to build quickly dialogs. diff --git a/tests/ui/components/invertedMouseArea/InvertedMouseArea.qml b/tests/ui/components/invertedMouseArea/InvertedMouseArea.qml index 86154867c..a9341738e 100644 --- a/tests/ui/components/invertedMouseArea/InvertedMouseArea.qml +++ b/tests/ui/components/invertedMouseArea/InvertedMouseArea.qml @@ -1,6 +1,6 @@ import QtQuick 2.0 -import 'qrc:/ui/style' +import 'qrc:/ui/style/global' // =================================================================== // Helper to handle button click outside a component. diff --git a/tests/ui/components/popup/DropDownMenu.qml b/tests/ui/components/popup/DropDownMenu.qml index c2afb7c5c..9a38f6b2f 100644 --- a/tests/ui/components/popup/DropDownMenu.qml +++ b/tests/ui/components/popup/DropDownMenu.qml @@ -5,6 +5,7 @@ import QtQuick.Controls 2.0 import 'qrc:/ui/components/contact' import 'qrc:/ui/components/form' import 'qrc:/ui/components/scrollBar' +import 'qrc:/ui/style' Rectangle { readonly property int entryHeight: 50 @@ -150,14 +151,9 @@ Rectangle { } } - DropShadow { + PopupShadow { anchors.fill: listContainer - color: "#80000000" - horizontalOffset: 2 - radius: 8.0 - samples: 15 source: listContainer - verticalOffset: 2 visible: true } } diff --git a/tests/ui/components/popup/PopupShadow.qml b/tests/ui/components/popup/PopupShadow.qml new file mode 100644 index 000000000..f48942987 --- /dev/null +++ b/tests/ui/components/popup/PopupShadow.qml @@ -0,0 +1,13 @@ +import QtGraphicalEffects 1.0 + +import 'qrc:/ui/style/components' + +// =================================================================== + +DropShadow { + color: PopupStyle.shadow.color + horizontalOffset: PopupStyle.shadow.horizontalOffset + radius: PopupStyle.shadow.radius + samples: PopupStyle.shadow.samples + verticalOffset: PopupStyle.shadow.verticalOffset +} diff --git a/tests/ui/components/searchBox/SearchBox.qml b/tests/ui/components/searchBox/SearchBox.qml index d0150a199..a494442f6 100644 --- a/tests/ui/components/searchBox/SearchBox.qml +++ b/tests/ui/components/searchBox/SearchBox.qml @@ -1,10 +1,12 @@ -import QtGraphicalEffects 1.0 import QtQuick 2.7 import QtQuick.Controls 2.0 import 'qrc:/ui/components/invertedMouseArea' import 'qrc:/ui/components/popup' +import 'qrc:/ui/style/components' +import 'qrc:/ui/style/global' + // =================================================================== Item { @@ -15,57 +17,47 @@ Item { signal menuOpened () signal searchTextChanged (string text) - implicitHeight: searchField.height - - function hideMenu () { + function _hideMenu () { menu.hide() shadow.visible = false searchField.focus = false + menuClosed() } - function showMenu () { + function _showMenu () { menu.show() shadow.visible = true + menuOpened() } + implicitHeight: searchField.height + Item { implicitHeight: searchField.height + menu.height width: parent.width TextField { - background: Rectangle { - implicitHeight: 30 - } id: searchField + + background: SearchBoxStyle.searchFieldBackground width: parent.width - Keys.onEscapePressed: hideMenu() + Keys.onEscapePressed: _hideMenu() - onActiveFocusChanged: activeFocus && showMenu() + onActiveFocusChanged: activeFocus && _showMenu() onTextChanged: searchTextChanged(text) } DropDownMenu { - anchors.top: searchField.bottom id: menu + + anchors.top: searchField.bottom width: searchField.width - z: 999 // Menu must be above any component. + z: Constants.zPopup - Keys.onEscapePressed: hideMenu() - } - - DropShadow { - anchors.fill: searchField - color: "#80000000" - horizontalOffset: 2 - id: shadow - radius: 8.0 - samples: 15 - source: searchField - verticalOffset: 2 - visible: false + Keys.onEscapePressed: _hideMenu() } InvertedMouseArea { @@ -74,7 +66,15 @@ Item { parent: parent width: parent.width - onPressed: hideMenu() + onPressed: _hideMenu() + } + + PopupShadow { + id: shadow + + anchors.fill: searchField + source: searchField + visible: false } } } diff --git a/tests/ui/components/view/ScrollableListView.qml b/tests/ui/components/view/ScrollableListView.qml new file mode 100644 index 000000000..b3ca26793 --- /dev/null +++ b/tests/ui/components/view/ScrollableListView.qml @@ -0,0 +1,14 @@ +import QtQuick 2.7 +import QtQuick.Controls 2.0 + +import 'qrc:/ui/components/scrollBar' + +// =================================================================== + +ListView { + ScrollBar.vertical: ForceScrollBar { } + boundsBehavior: Flickable.StopAtBounds + clip: true + highlightRangeMode: ListView.ApplyRange + spacing: 0 +} diff --git a/tests/ui/style/components/Collapse.qml b/tests/ui/style/components/Collapse.qml index c4f5d4b0b..25e5611f0 100644 --- a/tests/ui/style/components/Collapse.qml +++ b/tests/ui/style/components/Collapse.qml @@ -6,7 +6,7 @@ QtObject { property int iconSize: 32 property string icon: 'collapse' - property var background: Rectangle { + property Rectangle background: Rectangle { color: 'transparent' } } diff --git a/tests/ui/style/components/Dialog.qml b/tests/ui/style/components/Dialog.qml index 76b666b3d..72752c848 100644 --- a/tests/ui/style/components/Dialog.qml +++ b/tests/ui/style/components/Dialog.qml @@ -11,7 +11,7 @@ QtObject { property int topMargin: 15 } - property QtObject confirm: QtObject { + property QtObject confirmDialog: QtObject { property int height: 150 property int width: 370 } diff --git a/tests/ui/style/components/Popup.qml b/tests/ui/style/components/Popup.qml new file mode 100644 index 000000000..38887d68d --- /dev/null +++ b/tests/ui/style/components/Popup.qml @@ -0,0 +1,14 @@ +pragma Singleton +import QtQuick 2.7 + +import 'qrc:/ui/style/global' + +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: Colors.a + } +} diff --git a/tests/ui/style/components/SearchBox.qml b/tests/ui/style/components/SearchBox.qml new file mode 100644 index 000000000..4d9894d71 --- /dev/null +++ b/tests/ui/style/components/SearchBox.qml @@ -0,0 +1,12 @@ +pragma Singleton +import QtQuick 2.7 + +import 'qrc:/ui/style/global' + +QtObject { + property string shadowColor: Colors.a + + property Rectangle searchFieldBackground: Rectangle { + implicitHeight: 30 + } +} diff --git a/tests/ui/style/components/qmldir b/tests/ui/style/components/qmldir new file mode 100644 index 000000000..c0274055c --- /dev/null +++ b/tests/ui/style/components/qmldir @@ -0,0 +1,8 @@ +# See: https://wiki.qt.io/Qml_Styling + +module Style + +singleton CollapseStyle 1.0 Collapse.qml +singleton DialogStyle 1.0 Dialog.qml +singleton PopupStyle 1.0 Popup.qml +singleton SearchBoxStyle 1.0 SearchBox.qml diff --git a/tests/ui/style/global/Colors.qml b/tests/ui/style/global/Colors.qml new file mode 100644 index 000000000..e7516bf03 --- /dev/null +++ b/tests/ui/style/global/Colors.qml @@ -0,0 +1,6 @@ +pragma Singleton +import QtQuick 2.7 + +QtObject { + property string a: '#800000' +} diff --git a/tests/ui/style/Constants.qml b/tests/ui/style/global/Constants.qml similarity index 100% rename from tests/ui/style/Constants.qml rename to tests/ui/style/global/Constants.qml diff --git a/tests/ui/style/global/qmldir b/tests/ui/style/global/qmldir new file mode 100644 index 000000000..969871dfe --- /dev/null +++ b/tests/ui/style/global/qmldir @@ -0,0 +1,6 @@ +# See: https://wiki.qt.io/Qml_Styling + +module Style + +singleton Colors 1.0 Colors.qml +singleton Constants 1.0 Constants.qml diff --git a/tests/ui/style/qmldir b/tests/ui/style/qmldir deleted file mode 100644 index f80ea58b9..000000000 --- a/tests/ui/style/qmldir +++ /dev/null @@ -1,8 +0,0 @@ -# See: https://wiki.qt.io/Qml_Styling - -module Style - -singleton Constants 1.0 Constants.qml - -singleton CollapseStyle 1.0 components/Collapse.qml -singleton DialogStyle 1.0 components/Dialog.qml