From 238d6a74d9d3c0c207b4ae5166bfbfd4b3405aa7 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Mon, 9 Apr 2018 12:51:10 +0200 Subject: [PATCH 01/74] Update appdata --- src/demo/io.liri.Fluid.Demo.appdata.xml | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/demo/io.liri.Fluid.Demo.appdata.xml b/src/demo/io.liri.Fluid.Demo.appdata.xml index 99fcba60..62c88367 100644 --- a/src/demo/io.liri.Fluid.Demo.appdata.xml +++ b/src/demo/io.liri.Fluid.Demo.appdata.xml @@ -1,10 +1,11 @@ - io.liri.Fluid.Demo.desktop - CC0-1.0 - GPL-3.0+ + io.liri.Fluid.Demo Fluid Demo + Liri Demonstrate Fluid QML modules + CC0-1.0 + GPL-3.0+

Fluid is an implementation of the Material Design language for @@ -14,7 +15,17 @@ This app shows what Fluid has to offer.

+ io.liri.Fluid.Demo.desktop + + fluid-demo + + + + + + + https://liri.io - info@liri.io + info_at_liri.io From 51b826c6c92d70e399de2851deee125f9d5a61d3 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Mon, 9 Apr 2018 13:15:26 +0200 Subject: [PATCH 02/74] Validate desktop file and appdata in CI --- .travis/build.sh | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/.travis/build.sh b/.travis/build.sh index a19e6fbb..b2407c1b 100755 --- a/.travis/build.sh +++ b/.travis/build.sh @@ -4,6 +4,12 @@ set -e source /usr/local/share/liri-travis/functions +# Install packages +travis_start "install_packages" +msg "Install packages..." +sudo apt-get install -y desktop-file-utils appstream-util +travis_end "install_packages" + # Configure qbs travis_start "qbs_setup" msg "Setup qbs..." @@ -26,3 +32,11 @@ qbs -d build -j $(nproc) --all-products profile:travis-qt5 \ projects.Fluid.useSystemQbsShared:false \ projects.Fluid.deploymentEnabled:true travis_end "build" + +# Validate desktop file and appdata +for filename in $(find . -type f -name "*.desktop"); do + desktop-file-validate $filename +done +for filename in $(find . -type f -name "*.appdata.xml"); do + appstream-util validate-relax --nonet $filename +done From 04047f668aa4d89534ac487f570b08d568c1a8e0 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Mon, 9 Apr 2018 13:15:41 +0200 Subject: [PATCH 03/74] Add missing stuff from appdata --- src/demo/io.liri.Fluid.Demo.appdata.xml | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/demo/io.liri.Fluid.Demo.appdata.xml b/src/demo/io.liri.Fluid.Demo.appdata.xml index 62c88367..68a16273 100644 --- a/src/demo/io.liri.Fluid.Demo.appdata.xml +++ b/src/demo/io.liri.Fluid.Demo.appdata.xml @@ -19,7 +19,17 @@ fluid-demo - + + + https://liri.io/images/apps/fluid/fluid-demo1.png + + + https://liri.io/images/apps/fluid/fluid-demo2.png + + + + ModernToolkit + @@ -27,5 +37,6 @@ https://liri.io + https://github.com/lirios/fluid/issues/new info_at_liri.io From 6a811b1177c884727f35a2dba308b97e1b02a7d1 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Mon, 9 Apr 2018 13:16:38 +0200 Subject: [PATCH 04/74] Update .gitattributes --- .gitattributes | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitattributes b/.gitattributes index f90a194d..a25c0c4e 100644 --- a/.gitattributes +++ b/.gitattributes @@ -4,3 +4,4 @@ .gitmodules export-ignore .travis export-ignore .travis.yml export-ignore +.mailmap export-ignore From bd026f71f0bfe059d7d5baa917694ef780cbdb9f Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Mon, 9 Apr 2018 14:23:32 +0200 Subject: [PATCH 05/74] Make appdata compatible with older AppStream versions --- src/demo/io.liri.Fluid.Demo.appdata.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/demo/io.liri.Fluid.Demo.appdata.xml b/src/demo/io.liri.Fluid.Demo.appdata.xml index 68a16273..1485a522 100644 --- a/src/demo/io.liri.Fluid.Demo.appdata.xml +++ b/src/demo/io.liri.Fluid.Demo.appdata.xml @@ -1,6 +1,6 @@ - io.liri.Fluid.Demo + io.liri.Fluid.Demo.desktop Fluid Demo Liri Demonstrate Fluid QML modules From 5aa3051eb232fab1f64a0230093ccd71884c3827 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 14 Apr 2018 10:15:31 +0200 Subject: [PATCH 06/74] Update qbs-shared copy Pick up latest changes, including a fix of the run environment. Closes: #223 --- qbs/shared | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/qbs/shared b/qbs/shared index 913583b7..6d0e5689 160000 --- a/qbs/shared +++ b/qbs/shared @@ -1 +1 @@ -Subproject commit 913583b77a715dd060df4f9fa8a78adf956c9564 +Subproject commit 6d0e56898a799ad6c181420f6413acb2dc928cb4 From a680a9bcc99c01d1836dfa783e75f8ea415bed78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20Gro=C3=9F?= Date: Thu, 19 Apr 2018 21:29:32 +0200 Subject: [PATCH 07/74] Enable searching for icons in IconsPage.qml (#224) Typing in a keyword will filter for icons containing that keyword. --- src/demo/qml/Pages/Style/IconsPage.qml | 35 +++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 3 deletions(-) diff --git a/src/demo/qml/Pages/Style/IconsPage.qml b/src/demo/qml/Pages/Style/IconsPage.qml index c4409ca8..8bf6bdd9 100644 --- a/src/demo/qml/Pages/Style/IconsPage.qml +++ b/src/demo/qml/Pages/Style/IconsPage.qml @@ -19,12 +19,40 @@ import QtQuick.Controls.Material 2.3 import Fluid.Controls 1.0 as FluidControls import Fluid.Layouts 1.0 as FluidLayouts import Fluid.Demo 1.0 as FluidDemo -import "../.." as Components -Components.StyledPage { +Page { + Material.theme: lightRadio.checked ? Material.Light : Material.Dark + + Row { + id: themeRow + anchors { + top: parent.top + left: parent.left + } + + spacing: 16 + + RadioButton { + id: lightRadio + text: qsTr("Light") + checked: true + } + + RadioButton { + id: darkRadio + text: qsTr("Dark") + } + } + + FluidControls.SearchBar { + id: searchBar + anchors.left: themeRow.right + } + ScrollView { id: scrollView - anchors.fill: parent + anchors { left: parent.left; right: parent.right; top: searchBar.bottom; bottom: parent.bottom } + clip: true ColumnLayout { @@ -50,6 +78,7 @@ Components.StyledPage { } delegate: FluidControls.Icon { source: FluidControls.Utils.iconUrl(entry.currentCategory + "/" + model.name) + visible: model.name.indexOf(searchBar.searchText) !== -1 size: 48 ToolTip.visible: iconMouseArea.containsMouse From cb85ed57d40236a82de2ec0007e8f236b1c1df3a Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sun, 22 Apr 2018 07:56:25 +0200 Subject: [PATCH 08/74] Refresh window decoration when the color changes Every time the color or theme change we update the decoration. Wayland decorations cannot be updated at will so in order to trigger a refresh we resize the window to the current size. [ChangeLog][Controls] Refresh window decoration when color changes. --- src/imports/controls-private/windowdecoration.cpp | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/imports/controls-private/windowdecoration.cpp b/src/imports/controls-private/windowdecoration.cpp index 2960a8ef..97970813 100644 --- a/src/imports/controls-private/windowdecoration.cpp +++ b/src/imports/controls-private/windowdecoration.cpp @@ -52,6 +52,8 @@ void WindowDecoration::setTheme(WindowDecoration::Theme theme) m_theme = theme; Q_EMIT themeChanged(); + + updateDecorationColor(); } QColor WindowDecoration::color() const @@ -66,6 +68,8 @@ void WindowDecoration::setColor(const QColor &color) m_color = color; Q_EMIT colorChanged(); + + updateDecorationColor(); } void WindowDecoration::classBegin() @@ -121,6 +125,9 @@ void WindowDecoration::updateDecorationColor() // Set properties m_window->setProperty("__material_decoration_backgroundColor", m_color); m_window->setProperty("__material_decoration_foregroundColor", textColor); + + // Trigger a decoration update + m_window->resize(m_window->size()); } #endif } From d8e06e15f016a942bf209451c3fa7d5026d6908e Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sun, 22 Apr 2018 06:27:46 +0200 Subject: [PATCH 09/74] AppBar custom content Users can now replace the title with custom content. [ChangeLog][Controls][AppBar] Custom content that replaces title. Closes: #228 --- src/imports/controls/AppBar.qml | 22 ++++++++++++++++++++++ src/imports/controls/Page.qml | 7 +++++++ 2 files changed, 29 insertions(+) diff --git a/src/imports/controls/AppBar.qml b/src/imports/controls/AppBar.qml index 66b8ebc9..a52e98ef 100644 --- a/src/imports/controls/AppBar.qml +++ b/src/imports/controls/AppBar.qml @@ -105,6 +105,13 @@ QQC2.ToolBar { */ property alias title: titleLabel.text + /*! + \qmlproperty list customContent + + Custom content to show instead of the title. + */ + property alias customContent: customContentItem.data + /*! \qmlproperty AppToolBar toolbar @@ -166,6 +173,7 @@ QQC2.ToolBar { textFormat: Text.PlainText color: Material.primaryTextColor elide: Text.ElideRight + visible: text !== "" && customContentItem.children.length === 0 } Row { @@ -265,4 +273,18 @@ QQC2.ToolBar { } } } + + Item { + id: customContentItem + + anchors.left: parent.left + anchors.right: actionsRow.left + anchors.leftMargin: 16 + (leftButton.showing ? FluidCore.Device.gridUnit - leftButton.margin : 0) + anchors.rightMargin: 16 + anchors.verticalCenter: actionsRow.verticalCenter + + height: appBar.height + + visible: children.length > 0 + } } diff --git a/src/imports/controls/Page.qml b/src/imports/controls/Page.qml index 62e9748b..de731532 100644 --- a/src/imports/controls/Page.qml +++ b/src/imports/controls/Page.qml @@ -70,6 +70,13 @@ Page { */ property alias leftAction: appBar.leftAction + /*! + \qmlproperty list customContent + + Custom content to show instead of the title. + */ + property alias customContent: appBar.customContent + /*! \internal Set by the page stack to true if there is a page behind this page on the From a374be2869c91fc54b4987097a332b0f03cffba1 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sun, 22 Apr 2018 08:02:07 +0200 Subject: [PATCH 10/74] Change tool bar and decoration colors An app can now change tool bar and decoration colors from AppBar. [ChangeLog][Controls][AppBar] Add properties to change background and decoration color at will. Closes: #229 --- src/imports/controls/AppBar.qml | 19 +++++++++++++++++++ src/imports/controls/AppToolBar.qml | 4 ++-- src/imports/controls/ApplicationWindow.qml | 2 +- 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/imports/controls/AppBar.qml b/src/imports/controls/AppBar.qml index a52e98ef..a38e543b 100644 --- a/src/imports/controls/AppBar.qml +++ b/src/imports/controls/AppBar.qml @@ -35,6 +35,7 @@ QQC2.ToolBar { id: appBar Material.elevation: toolbar ? 0 : elevation + Material.background: toolbar ? toolbar.Material.background : backgroundColor Material.theme: toolbar ? toolbar.Material.theme : Material.Light /*! @@ -71,6 +72,24 @@ QQC2.ToolBar { */ property int elevation: 2 + /*! + \qmlproperty color backgroundColor + + The background color of the tool bar when the AppBar's page is active. + By default this is the primary color defined in \l Material.primaryColor + */ + property color backgroundColor: appBar.Material.primaryColor + + /*! + \qmlproperty color decorationColor + + The background color of the window decoration when the AppBar's page is active, + usually a darker version of \l backgroundColor. + By default this is the primary color defined in \l Material.primaryColor with a + shade of \l Material.Shade700. + */ + property color decorationColor: Material.shade(backgroundColor, Material.Shade700) + /*! \internal The size of the left icon and the action icons. diff --git a/src/imports/controls/AppToolBar.qml b/src/imports/controls/AppToolBar.qml index 3df6461a..31c2c12d 100644 --- a/src/imports/controls/AppToolBar.qml +++ b/src/imports/controls/AppToolBar.qml @@ -28,8 +28,8 @@ ToolBar { id: toolbar Material.elevation: page ? page.appBar.elevation : 2 - Material.background: Material.primaryColor - Material.theme: FluidControls.Color.isDarkColor(Material.background) ? Material.Dark : Material.Light + Material.background: page ? page.appBar.backgroundColor : toolbar.Material.primaryColor + Material.theme: FluidControls.Color.isDarkColor(page ? page.appBar.backgroundColor : toolbar.Material.background) ? Material.Dark : Material.Light /*! \internal diff --git a/src/imports/controls/ApplicationWindow.qml b/src/imports/controls/ApplicationWindow.qml index 4d7bd827..5e24dbd2 100644 --- a/src/imports/controls/ApplicationWindow.qml +++ b/src/imports/controls/ApplicationWindow.qml @@ -111,6 +111,6 @@ ApplicationWindow { FluidControlsPrivate.WindowDecoration { id: windowDecoration window: window - color: Material.shade(window.Material.primaryColor, Material.Shade700) + color: Material.shade(appBar ? appBar.Material.background : window.Material.primaryColor, Material.Shade700) } } From f70406298dbb796e31ade8cb2b0a523c8eb26763 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Thu, 19 Apr 2018 23:01:49 +0200 Subject: [PATCH 11/74] NavigationDrawer support for convergence NavigationDrawer is modal and interactive on mobile unlike desktop, where it is also open by default. [ChangeLog][Controls][NavigationDrawer] Convergence support. Closes: #227 --- src/imports/controls/NavigationDrawer.qml | 54 +++++++++++++++-------- 1 file changed, 35 insertions(+), 19 deletions(-) diff --git a/src/imports/controls/NavigationDrawer.qml b/src/imports/controls/NavigationDrawer.qml index 18885acf..cd2d939f 100644 --- a/src/imports/controls/NavigationDrawer.qml +++ b/src/imports/controls/NavigationDrawer.qml @@ -31,10 +31,11 @@ import Fluid.Controls 1.0 as FluidControls Closed by default, this type of navigation drawer opens temporarily above all other content until a section is selected or the overlay is tapped. - NavigationDrawer is recommended on phones and tablets. - This navigation drawer comes with no contents, therefore it's completely customizable. + By default the navigation drawer is permanent and pinned on desktop and + temporary on mobile. + \code import Fluid.Controls 2.0 as FluidControls @@ -51,9 +52,8 @@ import Fluid.Controls 1.0 as FluidControls FluidControls.NavigationDrawer { topContent: Image { source: "background.png" - - Layout.fillWidth: true - Layout.preferredHeight: 200 + width: parent.width + height: 200 } FluidControls.ListItem { @@ -86,13 +86,18 @@ Drawer { The items added to this list will be displayed on top of the contents. */ - property alias topContent: topContent.data + property alias topContent: topItem.data /*! \internal */ - default property alias contents: mainLayout.data + default property alias contents: mainitem.data + y: { + if (ApplicationWindow && ApplicationWindow.header) + return ApplicationWindow.header.height; + return 0; + } width: { switch (FluidCore.Device.formFactor) { case FluidCore.Device.Phone: @@ -114,6 +119,11 @@ Drawer { return parent.height; } + modal: FluidCore.Device.isMobile + interactive: FluidCore.Device.isMobile + position: FluidCore.Device.isMobile ? 0.0 : 1.0 + visible: !FluidCore.Device.isMobile + padding: 0 Material.elevation: interactive ? 4 : 0 @@ -124,22 +134,28 @@ Drawer { anchors.fill: parent padding: 0 - ColumnLayout { - id: mainLayout + Item { + id: topItem + + anchors.left: parent.left + anchors.top: parent.top + anchors.right: parent.right + anchors.margins: drawer.padding - anchors.fill: parent - spacing: 0 + height: childrenRect.height + visible: height > 0 + } - ColumnLayout { - id: topContent + Item { + id: mainitem - spacing: 0 - visible: children.length > 0 + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.margins: drawer.padding - Layout.margins: drawer.padding - Layout.fillWidth: true - Layout.fillHeight: true - } + height: pane.height - topItem.height + visible: children.length > 0 } } } From e2ea3ea81a89868694a1f3e7b6da7b9fce461547 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 21 Apr 2018 20:58:06 +0200 Subject: [PATCH 12/74] Demo: Convergent navigation drawer [ChangeLog][Demo] Use one navigation drawer that is temporary on mobile and permanent on desktop. Closes: #226 --- src/demo/qml/BasicComponents.qml | 80 ------------------- src/demo/qml/Controls.qml | 87 --------------------- src/demo/qml/LayoutComponents.qml | 75 ------------------ src/demo/qml/Style.qml | 77 ------------------- src/demo/qml/main.qml | 123 ++++++++++++++++++++---------- 5 files changed, 84 insertions(+), 358 deletions(-) delete mode 100644 src/demo/qml/BasicComponents.qml delete mode 100644 src/demo/qml/Controls.qml delete mode 100644 src/demo/qml/LayoutComponents.qml delete mode 100644 src/demo/qml/Style.qml diff --git a/src/demo/qml/BasicComponents.qml b/src/demo/qml/BasicComponents.qml deleted file mode 100644 index 8cc1e815..00000000 --- a/src/demo/qml/BasicComponents.qml +++ /dev/null @@ -1,80 +0,0 @@ -/* - * This file is part of Fluid. - * - * Copyright (C) 2018 Pier Luigi Fiorini - * - * $BEGIN_LICENSE:MPL2$ - * - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - * - * $END_LICENSE$ - */ - -import QtQuick 2.10 -import QtQuick.Controls 2.3 -import QtQuick.Controls.Material 2.3 -import QtQuick.Controls.Universal 2.3 -import Fluid.Controls 1.0 -import "Pages/Basic" - -Tab { - title: qsTr("Basic") - - Pane { - id: listPane - anchors { - left: parent.left - top: parent.top - bottom: parent.bottom - } - width: 200 - padding: 0 - z: 2 - - Material.background: "white" - Material.elevation: 1 - - Universal.background: Universal.accent - - ListView { - id: listView - anchors.fill: parent - currentIndex: 0 - model: ListModel { - ListElement { title: qsTr("Button"); source: "qrc:/qml/Pages/Basic/ButtonPage.qml" } - ListElement { title: qsTr("CheckBox"); source: "qrc:/qml/Pages/Basic/CheckBoxPage.qml" } - ListElement { title: qsTr("RadioButton"); source: "qrc:/qml/Pages/Basic/RadioButtonPage.qml" } - ListElement { title: qsTr("Switch"); source: "qrc:/qml/Pages/Basic/SwitchPage.qml" } - ListElement { title: qsTr("ProgressBar"); source: "qrc:/qml/Pages/Basic/ProgressBarPage.qml" } - ListElement { title: qsTr("BusyIndicator"); source: "qrc:/qml/Pages/Basic/BusyIndicatorPage.qml" } - ListElement { title: qsTr("Slider"); source: "qrc:/qml/Pages/Basic/SliderPage.qml" } - } - header: Subheader { - text: qsTr("Demos") - } - delegate: ListItem { - text: model.title - highlighted: ListView.isCurrentItem - onClicked: { - listView.currentIndex = index - stackView.push(model.source) - } - } - - ScrollBar.vertical: ScrollBar {} - } - } - - StackView { - id: stackView - anchors { - left: listPane.right - top: parent.top - right: parent.right - bottom: parent.bottom - } - initialItem: ButtonPage {} - } -} diff --git a/src/demo/qml/Controls.qml b/src/demo/qml/Controls.qml deleted file mode 100644 index d56c0552..00000000 --- a/src/demo/qml/Controls.qml +++ /dev/null @@ -1,87 +0,0 @@ -/* - * This file is part of Fluid. - * - * Copyright (C) 2018 Pier Luigi Fiorini - * - * $BEGIN_LICENSE:MPL2$ - * - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - * - * $END_LICENSE$ - */ - -import QtQuick 2.10 -import QtQuick.Controls 2.3 -import QtQuick.Controls.Material 2.3 -import QtQuick.Controls.Universal 2.3 -import Fluid.Controls 1.0 -import "Pages/Controls" - -Tab { - title: qsTr("Controls") - - Pane { - id: listPane - anchors { - left: parent.left - top: parent.top - bottom: parent.bottom - } - width: 200 - padding: 0 - z: 2 - - Material.background: "white" - Material.elevation: 1 - - Universal.background: Universal.accent - - ListView { - id: listView - anchors.fill: parent - currentIndex: 0 - model: ListModel { - ListElement { title: qsTr("BottomSheet"); source: "qrc:/qml/Pages/Controls/BottomSheetPage.qml" } - ListElement { title: qsTr("Card"); source: "qrc:/qml/Pages/Controls/CardPage.qml" } - ListElement { title: qsTr("Dialogs"); source: "qrc:/qml/Pages/Controls/DialogsPage.qml" } - ListElement { title: qsTr("DatePicker"); source: "qrc:/qml/Pages/Controls/DatePicker.qml" } - ListElement { title: qsTr("DateTimePicker"); source: "qrc:/qml/Pages/Controls/DateTimePicker.qml" } - ListElement { title: qsTr("FAB"); source: "qrc:/qml/Pages/Controls/ActionButtonPage.qml" } - ListElement { title: qsTr("ListItem"); source: "qrc:/qml/Pages/Controls/ListItemPage.qml" } - ListElement { title: qsTr("NavigationDrawer"); source: "qrc:/qml/Pages/Controls/NavDrawerPage.qml" } - ListElement { title: qsTr("Overlay"); source: "qrc:/qml/Pages/Controls/OverlayPage.qml" } - ListElement { title: qsTr("Placeholder"); source: "qrc:/qml/Pages/Controls/Placeholder.qml" } - ListElement { title: qsTr("Search"); source: "qrc:/qml/Pages/Controls/Search.qml" } - ListElement { title: qsTr("SnackBar"); source: "qrc:/qml/Pages/Controls/SnackBarPage.qml" } - ListElement { title: qsTr("TimePicker"); source: "qrc:/qml/Pages/Controls/TimePicker.qml" } - ListElement { title: qsTr("Wave"); source: "qrc:/qml/Pages/Controls/WavePage.qml" } - } - header: Subheader { - text: qsTr("Demos") - } - delegate: ListItem { - text: model.title - highlighted: ListView.isCurrentItem - onClicked: { - listView.currentIndex = index - stackView.push(model.source) - } - } - - ScrollBar.vertical: ScrollBar {} - } - } - - StackView { - id: stackView - anchors { - left: listPane.right - top: parent.top - right: parent.right - bottom: parent.bottom - } - initialItem: BottomSheetPage {} - } -} diff --git a/src/demo/qml/LayoutComponents.qml b/src/demo/qml/LayoutComponents.qml deleted file mode 100644 index 73dbca80..00000000 --- a/src/demo/qml/LayoutComponents.qml +++ /dev/null @@ -1,75 +0,0 @@ -/* - * This file is part of Fluid. - * - * Copyright (C) 2018 Pier Luigi Fiorini - * - * $BEGIN_LICENSE:MPL2$ - * - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - * - * $END_LICENSE$ - */ - -import QtQuick 2.10 -import QtQuick.Controls 2.3 -import QtQuick.Controls.Material 2.3 -import QtQuick.Controls.Universal 2.3 -import Fluid.Controls 1.0 -import "Pages/Layouts" - -Tab { - title: qsTr("Layout") - - Pane { - id: listPane - anchors { - left: parent.left - top: parent.top - bottom: parent.bottom - } - width: 200 - padding: 0 - z: 2 - - Material.background: "white" - Material.elevation: 1 - - Universal.background: Universal.accent - - ListView { - id: listView - anchors.fill: parent - currentIndex: 0 - model: ListModel { - ListElement { title: qsTr("AutomaticGrid"); source: "qrc:/qml/Pages/Layouts/AutomaticGridPage.qml" } - ListElement { title: qsTr("ColumnFlow"); source: "qrc:/qml/Pages/Layouts/ColumnFlowPage.qml" } - } - header: Subheader { - text: qsTr("Demos") - } - delegate: ListItem { - text: model.title - highlighted: ListView.isCurrentItem - onClicked: { - listView.currentIndex = index - stackView.push(model.source) - } - } - - ScrollBar.vertical: ScrollBar {} - } - } - - StackView { - id: stackView - anchors { - left: listPane.right - top: parent.top - right: parent.right - bottom: parent.bottom - } - initialItem: AutomaticGridPage {} - } -} diff --git a/src/demo/qml/Style.qml b/src/demo/qml/Style.qml deleted file mode 100644 index 31e5f140..00000000 --- a/src/demo/qml/Style.qml +++ /dev/null @@ -1,77 +0,0 @@ -/* - * This file is part of Fluid. - * - * Copyright (C) 2018 Pier Luigi Fiorini - * - * $BEGIN_LICENSE:MPL2$ - * - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - * - * $END_LICENSE$ - */ - -import QtQuick 2.10 -import QtQuick.Controls 2.3 -import QtQuick.Controls.Material 2.3 -import QtQuick.Controls.Universal 2.3 -import Fluid.Controls 1.0 -import "Pages/Style" - -Tab { - title: qsTr("Style") - - Pane { - id: listPane - anchors { - left: parent.left - top: parent.top - bottom: parent.bottom - } - width: 200 - padding: 0 - z: 2 - - Material.background: "white" - Material.elevation: 1 - - Universal.background: Universal.accent - - ListView { - id: listView - anchors.fill: parent - currentIndex: 0 - model: ListModel { - ListElement { title: qsTr("Palette"); source: "qrc:/qml/Pages/Style/PalettePage.qml" } - ListElement { title: qsTr("Typography"); source: "qrc:/qml/Pages/Style/TypographyPage.qml" } - ListElement { title: qsTr("System Icons"); source: "qrc:/qml/Pages/Style/SystemIconsPage.qml" } - ListElement { title: qsTr("Material Icons"); source: "qrc:/qml/Pages/Style/IconsPage.qml" } - } - header: Subheader { - text: qsTr("Demos") - } - delegate: ListItem { - text: model.title - highlighted: ListView.isCurrentItem - onClicked: { - listView.currentIndex = index - stackView.push(model.source) - } - } - - ScrollBar.vertical: ScrollBar {} - } - } - - StackView { - id: stackView - anchors { - left: listPane.right - top: parent.top - right: parent.right - bottom: parent.bottom - } - initialItem: PalettePage {} - } -} diff --git a/src/demo/qml/main.qml b/src/demo/qml/main.qml index 66ebc9ba..96f851b3 100644 --- a/src/demo/qml/main.qml +++ b/src/demo/qml/main.qml @@ -38,53 +38,93 @@ FluidControls.ApplicationWindow { Universal.accent: Universal.Cobalt - FluidControls.NavigationListView { + FluidControls.NavigationDrawer { id: navDrawer - topContent: Image { - source: FluidCore.Device.isMobile ? "qrc:/images/materialbg.png" : "" + readonly property bool mobileAspect: window.width < 500 + + modal: mobileAspect + interactive: mobileAspect + position: mobileAspect ? 0.0 : 1.0 + visible: !mobileAspect - Layout.fillWidth: true - Layout.preferredHeight: FluidCore.Device.isMobile ? 200 : window.header.height + topContent: Image { + source: navDrawer.mobileAspect ? "qrc:/images/materialbg.png" : "" + width: parent.width + height: navDrawer.mobileAspect ? 200 : 0 } - actions: [ - FluidControls.Action { - text: qsTr("Action 1") - icon.source: FluidControls.Utils.iconUrl("action/info") - onTriggered: console.log("action1 triggered") - }, - FluidControls.Action { - text: qsTr("Action 2") - icon.source: FluidControls.Utils.iconUrl("action/info") - hasDividerAfter: true - onTriggered: console.log("action2 triggered") - }, - FluidControls.Action { - text: qsTr("Action 3") - icon.source: FluidControls.Utils.iconUrl("action/info") - onTriggered: console.log("action3 triggered") - }, - FluidControls.Action { - text: qsTr("Action 4") - icon.source: FluidControls.Utils.iconUrl("action/info") - onTriggered: console.log("action4 triggered") - }, - FluidControls.Action { - text: qsTr("Action 5") - icon.source: FluidControls.Utils.iconUrl("action/info") - visible: false - onTriggered: console.log("action5 triggered") + ScrollView { + anchors.fill: parent + + clip: true + + ListView { + id: navListView + model: ListModel { + ListElement { category: qsTr("Basic"); title: qsTr("Button"); source: "qrc:/qml/Pages/Basic/ButtonPage.qml" } + ListElement { category: qsTr("Basic"); title: qsTr("CheckBox"); source: "qrc:/qml/Pages/Basic/CheckBoxPage.qml" } + ListElement { category: qsTr("Basic"); title: qsTr("RadioButton"); source: "qrc:/qml/Pages/Basic/RadioButtonPage.qml" } + ListElement { category: qsTr("Basic"); title: qsTr("Switch"); source: "qrc:/qml/Pages/Basic/SwitchPage.qml" } + ListElement { category: qsTr("Basic"); title: qsTr("ProgressBar"); source: "qrc:/qml/Pages/Basic/ProgressBarPage.qml" } + ListElement { category: qsTr("Basic"); title: qsTr("BusyIndicator"); source: "qrc:/qml/Pages/Basic/BusyIndicatorPage.qml" } + ListElement { category: qsTr("Basic"); title: qsTr("Slider"); source: "qrc:/qml/Pages/Basic/SliderPage.qml" } + ListElement { category: qsTr("Layout"); title: qsTr("AutomaticGrid"); source: "qrc:/qml/Pages/Layouts/AutomaticGridPage.qml" } + ListElement { category: qsTr("Layout"); title: qsTr("ColumnFlow"); source: "qrc:/qml/Pages/Layouts/ColumnFlowPage.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("BottomSheet"); source: "qrc:/qml/Pages/Controls/BottomSheetPage.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("Card"); source: "qrc:/qml/Pages/Controls/CardPage.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("Dialogs"); source: "qrc:/qml/Pages/Controls/DialogsPage.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("DatePicker"); source: "qrc:/qml/Pages/Controls/DatePicker.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("DateTimePicker"); source: "qrc:/qml/Pages/Controls/DateTimePicker.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("FAB"); source: "qrc:/qml/Pages/Controls/ActionButtonPage.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("ListItem"); source: "qrc:/qml/Pages/Controls/ListItemPage.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("NavigationDrawer"); source: "qrc:/qml/Pages/Controls/NavDrawerPage.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("Overlay"); source: "qrc:/qml/Pages/Controls/OverlayPage.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("Placeholder"); source: "qrc:/qml/Pages/Controls/Placeholder.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("Search"); source: "qrc:/qml/Pages/Controls/Search.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("SnackBar"); source: "qrc:/qml/Pages/Controls/SnackBarPage.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("TimePicker"); source: "qrc:/qml/Pages/Controls/TimePicker.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("Wave"); source: "qrc:/qml/Pages/Controls/WavePage.qml" } + ListElement { category: qsTr("Style"); title: qsTr("Palette"); source: "qrc:/qml/Pages/Style/PalettePage.qml" } + ListElement { category: qsTr("Style"); title: qsTr("Typography"); source: "qrc:/qml/Pages/Style/TypographyPage.qml" } + ListElement { category: qsTr("Style"); title: qsTr("System Icons"); source: "qrc:/qml/Pages/Style/SystemIconsPage.qml" } + ListElement { category: qsTr("Style"); title: qsTr("Material Icons"); source: "qrc:/qml/Pages/Style/IconsPage.qml" } + } + currentIndex: -1 + section.property: "category" + section.criteria: ViewSection.FullString + section.delegate: FluidControls.Subheader { + text: section + width: parent.width + + FluidControls.ThinDivider { + width: parent.width + } + } + delegate: FluidControls.ListItem { + text: model.title + highlighted: ListView.isCurrentItem + onClicked: { + navListView.currentIndex = index; + stackView.push(model.source); + if (navDrawer.modal) + navDrawer.close(); + } + } } - ] + } } - initialPage: FluidControls.TabbedPage { + initialPage: FluidControls.Page { title: window.title + x: navDrawer.modal ? 0 : navDrawer.position * navDrawer.width + width: window.width - x + leftAction: FluidControls.Action { icon.source: FluidControls.Utils.iconUrl("navigation/menu") - onTriggered: navDrawer.open() + visible: navDrawer.modal + onTriggered: navDrawer.visible ? navDrawer.close() : navDrawer.open() } actions: [ @@ -123,9 +163,14 @@ FluidControls.ApplicationWindow { } ] - BasicComponents {} - LayoutComponents {} - Controls {} - Style {} + StackView { + id: stackView + anchors.fill: parent + initialItem: FluidControls.Placeholder { + icon.source: FluidControls.Utils.iconUrl("content/filter_list") + text: qsTr("Select a demo") + subText: qsTr("At the moment there is no demo selected from the navigration drawer, choose one and play with it.") + } + } } } From 1b7f4836a5206f6c498b1714b71a623b7ce0c8fd Mon Sep 17 00:00:00 2001 From: Rajesh Kumar Mallah Date: Mon, 23 Apr 2018 02:07:58 +0530 Subject: [PATCH 13/74] exposed an alias to searchBar text input font property (#212) --- src/imports/controls/SearchBar.qml | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/imports/controls/SearchBar.qml b/src/imports/controls/SearchBar.qml index 078151a0..3b9deff5 100644 --- a/src/imports/controls/SearchBar.qml +++ b/src/imports/controls/SearchBar.qml @@ -87,6 +87,11 @@ Item { */ readonly property alias expanded: searchWave.open + /*! + The font of text in search TextInput box + */ + property alias searchTextFont : searchTextField.font + /*! The model containing the search results */ From 0450a7782715a0c4179bd5679e390011f72d1bad Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sun, 22 Apr 2018 15:36:12 +0200 Subject: [PATCH 14/74] Fix modal navigation drawer height A modal navigation drawer is not pinned hence y is 0. --- src/imports/controls/NavigationDrawer.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/imports/controls/NavigationDrawer.qml b/src/imports/controls/NavigationDrawer.qml index cd2d939f..c0bf49a0 100644 --- a/src/imports/controls/NavigationDrawer.qml +++ b/src/imports/controls/NavigationDrawer.qml @@ -94,7 +94,7 @@ Drawer { default property alias contents: mainitem.data y: { - if (ApplicationWindow && ApplicationWindow.header) + if (!modal && ApplicationWindow && ApplicationWindow.header) return ApplicationWindow.header.height; return 0; } From 57daef306c5ed5801a5fa67503aeb7c5f3926aee Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sun, 22 Apr 2018 15:40:03 +0200 Subject: [PATCH 15/74] Animate navigation drawer contents Animate resize. --- src/imports/controls/NavigationDrawer.qml | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/imports/controls/NavigationDrawer.qml b/src/imports/controls/NavigationDrawer.qml index c0bf49a0..f2b16f31 100644 --- a/src/imports/controls/NavigationDrawer.qml +++ b/src/imports/controls/NavigationDrawer.qml @@ -144,6 +144,10 @@ Drawer { height: childrenRect.height visible: height > 0 + + Behavior on height { + NumberAnimation { duration: FluidControls.Units.shortDuration } + } } Item { @@ -156,6 +160,10 @@ Drawer { height: pane.height - topItem.height visible: children.length > 0 + + Behavior on height { + NumberAnimation { duration: FluidControls.Units.shortDuration } + } } } } From 519a7c8f5004089e28af9366efcb7fd46c199f3d Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Mon, 23 Apr 2018 23:26:28 +0200 Subject: [PATCH 16/74] Add Windows CI with AppVeyor --- appveyor.yml | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 appveyor.yml diff --git a/appveyor.yml b/appveyor.yml new file mode 100644 index 00000000..9da0735e --- /dev/null +++ b/appveyor.yml @@ -0,0 +1,39 @@ +version: '{build}' +pull_requests: + do_not_increment_build_number: true +configuration: Release +branches: + except: + - /^(?i:continuous)$/ +skip_tags: true +environment: + matrix: + - APPVEYOR_BUILD_WORKER_IMAGE: Visual Studio 2015 + QT_PROFILE: msvc2015 + QTDIR: C:\Qt\5.10.1\msvc2015 + QBS_PROFILE: MSVC2015-x86 + - APPVEYOR_BUILD_WORKER_IMAGE: Visual Studio 2017 + QT_PROFILE: msvc2017_64 + QTDIR: C:\Qt\5.10.1\msvc2017_64 + QBS_PROFILE: MSVC2017-x86_x64 +init: +- set PATH=%QTDIR%\bin;%PATH% +install: +- choco install -y qbs --version 1.11.0 +before_build: +- qbs setup-toolchains --detect +- qbs setup-qt %QTDIR%\bin\qmake.exe appveyor-qt5 +- qbs config profiles.appveyor-qt5.baseProfile %QBS_PROFILE% +- qbs config defaultProfile appveyor-qt5 +- qbs config preferences.qbsSearchPaths %cd%/fluid/qbs/shared +build_script: +- git submodule update --init --recursive +- qbs -d build --all-products config:release +- dir build\release\install-root +notifications: +- provider: Slack + incoming_webhook: https://hooks.slack.com/services/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 + channel: '#events' + on_build_success: true + on_build_failure: true + on_build_status_changed: true From 8e707db5339ef5f88af3347bc141ec31e494d61c Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Mon, 23 Apr 2018 23:30:13 +0200 Subject: [PATCH 17/74] Do not build documentation on Windows CI --- appveyor.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/appveyor.yml b/appveyor.yml index 9da0735e..24f8902b 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -28,7 +28,7 @@ before_build: - qbs config preferences.qbsSearchPaths %cd%/fluid/qbs/shared build_script: - git submodule update --init --recursive -- qbs -d build --all-products config:release +- qbs -d build --all-products config:release project.autotestEnabled:true project.useSystemQbsShared:false project.deploymentEnabled:true project.withDocumentation:false - dir build\release\install-root notifications: - provider: Slack From 3580f9918fc425430304654b4bd452b861e077c4 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Mon, 23 Apr 2018 23:37:01 +0200 Subject: [PATCH 18/74] Do not run windeployqt from CI --- appveyor.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/appveyor.yml b/appveyor.yml index 24f8902b..fbb78578 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -28,7 +28,7 @@ before_build: - qbs config preferences.qbsSearchPaths %cd%/fluid/qbs/shared build_script: - git submodule update --init --recursive -- qbs -d build --all-products config:release project.autotestEnabled:true project.useSystemQbsShared:false project.deploymentEnabled:true project.withDocumentation:false +- qbs -d build --all-products config:release project.autotestEnabled:true project.useSystemQbsShared:false project.deploymentEnabled:false project.withDocumentation:false - dir build\release\install-root notifications: - provider: Slack From c80992eb605d76491779a1d76aef7d087647c3ac Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Mon, 23 Apr 2018 23:59:00 +0200 Subject: [PATCH 19/74] Do not run windeployqt if deployment is disabled --- src/deployment/windows.qbs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/deployment/windows.qbs b/src/deployment/windows.qbs index b2456e46..b1143881 100644 --- a/src/deployment/windows.qbs +++ b/src/deployment/windows.qbs @@ -14,8 +14,7 @@ Product { property stringList excludedPathPrefixes: [] name: "fluid-windows" - condition: qbs.targetOS.contains("windows") - builtByDefault: project.deploymentEnabled + condition: qbs.targetOS.contains("windows") && project.deploymentEnabled type: ["archiver.archive"] targetName: "fluid-windows-" + qbs.architecture + "-" + project.version destinationDirectory: project.buildDirectory From 21bc4a1aec9e5489975816531a9df4a98ee328ba Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Tue, 24 Apr 2018 00:06:36 +0200 Subject: [PATCH 20/74] Do not create artifacts tar if deployment is disabled --- src/deployment/tarball.qbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/deployment/tarball.qbs b/src/deployment/tarball.qbs index 730981fd..f18bc485 100644 --- a/src/deployment/tarball.qbs +++ b/src/deployment/tarball.qbs @@ -3,7 +3,7 @@ import qbs 1.0 InstallPackage { name: "fluid-artifacts" targetName: name - builtByDefault: project.deploymentEnabled + condition: project.deploymentEnabled archiver.type: "tar" archiver.outputDirectory: project.buildDirectory From 7d56b52583e7a7db071605bab06d259c3b3d6fc0 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Tue, 24 Apr 2018 00:07:41 +0200 Subject: [PATCH 21/74] Rename demo target on Windows FluidDemo looks better than fluid-demo. --- src/demo/demo.qbs | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/demo/demo.qbs b/src/demo/demo.qbs index 25b44f2a..d76ab6d0 100644 --- a/src/demo/demo.qbs +++ b/src/demo/demo.qbs @@ -9,7 +9,11 @@ Project { readonly property stringList qmlImportPaths: [FileInfo.joinPaths(qbs.installRoot, qbs.installPrefix, lirideployment.qmlDir)] name: "fluid-demo" - targetName: "fluid-demo" + targetName: { + if (qbs.targetOS.contains("windows")) + return "FluidDemo"; + return name; + } condition: project.withDemo consoleApplication: false From f0f328f03e3cb4d3696695ce7ac12d0e51c67301 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Tue, 1 May 2018 09:30:36 +0200 Subject: [PATCH 22/74] Update documentation to version 1.1 --- doc/src/fluidcontrols-qmltypes.qdoc | 4 ++-- doc/src/fluidcore-qmltypes.qdoc | 4 ++-- doc/src/fluideffects-qmltypes.qdoc | 4 ++-- doc/src/fluidlayouts-qmltypes.qdoc | 4 ++-- doc/src/fluidtemplates-qmltypes.qdoc | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/doc/src/fluidcontrols-qmltypes.qdoc b/doc/src/fluidcontrols-qmltypes.qdoc index c29a6c78..976732c3 100644 --- a/doc/src/fluidcontrols-qmltypes.qdoc +++ b/doc/src/fluidcontrols-qmltypes.qdoc @@ -13,7 +13,7 @@ */ /*! - \qmlmodule Fluid.Controls 1.0 + \qmlmodule Fluid.Controls 1.1 \title Fluid Controls QML Types \ingroup qmlmodules @@ -25,7 +25,7 @@ using the following import statement in your .qml file: \badcode - import Fluid.Controls 1.0 as FluidControls + import Fluid.Controls 1.1 as FluidControls \endcode \section1 diff --git a/doc/src/fluidcore-qmltypes.qdoc b/doc/src/fluidcore-qmltypes.qdoc index e9ca369a..fd4f09c6 100644 --- a/doc/src/fluidcore-qmltypes.qdoc +++ b/doc/src/fluidcore-qmltypes.qdoc @@ -13,7 +13,7 @@ */ /*! - \qmlmodule Fluid.Core 1.0 + \qmlmodule Fluid.Core 1.1 \title Fluid Core QML Types \ingroup qmlmodules @@ -25,7 +25,7 @@ using the following import statement in your .qml file: \badcode - import Fluid.Core 1.0 as FluidCore + import Fluid.Core 1.1 as FluidCore \endcode \section1 diff --git a/doc/src/fluideffects-qmltypes.qdoc b/doc/src/fluideffects-qmltypes.qdoc index 9fe23de8..31d28254 100644 --- a/doc/src/fluideffects-qmltypes.qdoc +++ b/doc/src/fluideffects-qmltypes.qdoc @@ -13,7 +13,7 @@ */ /*! - \qmlmodule Fluid.Effects 1.0 + \qmlmodule Fluid.Effects 1.1 \title Fluid Effects QML Types \ingroup qmlmodules @@ -25,7 +25,7 @@ using the following import statement in your .qml file: \badcode - import Fluid.Effects 1.0 as FluidEffects + import Fluid.Effects 1.1 as FluidEffects \endcode \section1 diff --git a/doc/src/fluidlayouts-qmltypes.qdoc b/doc/src/fluidlayouts-qmltypes.qdoc index 40e43ab7..995530d9 100644 --- a/doc/src/fluidlayouts-qmltypes.qdoc +++ b/doc/src/fluidlayouts-qmltypes.qdoc @@ -13,7 +13,7 @@ */ /*! - \qmlmodule Fluid.Layouts 1.0 + \qmlmodule Fluid.Layouts 1.1 \title Fluid Layouts QML Types \ingroup qmlmodules @@ -25,7 +25,7 @@ using the following import statement in your .qml file: \badcode - import Fluid.Layouts 1.0 as FluidLayouts + import Fluid.Layouts 1.1 as FluidLayouts \endcode \section1 diff --git a/doc/src/fluidtemplates-qmltypes.qdoc b/doc/src/fluidtemplates-qmltypes.qdoc index c0f7e83a..5ef1ef97 100644 --- a/doc/src/fluidtemplates-qmltypes.qdoc +++ b/doc/src/fluidtemplates-qmltypes.qdoc @@ -13,7 +13,7 @@ */ /*! - \qmlmodule Fluid.Templates 1.0 + \qmlmodule Fluid.Templates 1.1 \title Fluid Templates QML Types \ingroup qmlmodules @@ -31,7 +31,7 @@ using the following import statement in your \c .qml file: \badcode - import Fluid.Templates 1.0 as FluidTemplates + import Fluid.Templates 1.1 as FluidTemplates \endcode \section1 From ecf7ea0c97eee1b4127108060e2fec10ee6976f8 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Tue, 1 May 2018 09:30:48 +0200 Subject: [PATCH 23/74] demo: Add icon --- src/demo/demo.qbs | 10 + .../icons/128x128/apps/io.liri.Fluid.Demo.png | Bin 0 -> 12312 bytes .../icons/32x32/apps/io.liri.Fluid.Demo.png | Bin 0 -> 1818 bytes .../icons/48x48/apps/io.liri.Fluid.Demo.png | Bin 0 -> 3007 bytes .../icons/64x64/apps/io.liri.Fluid.Demo.png | Bin 0 -> 4790 bytes .../scalable/apps/io.liri.Fluid.Demo.svg | 1386 +++++++++++++++++ src/demo/io.liri.Fluid.Demo.desktop | 1 + 7 files changed, 1397 insertions(+) create mode 100644 src/demo/icons/128x128/apps/io.liri.Fluid.Demo.png create mode 100644 src/demo/icons/32x32/apps/io.liri.Fluid.Demo.png create mode 100644 src/demo/icons/48x48/apps/io.liri.Fluid.Demo.png create mode 100644 src/demo/icons/64x64/apps/io.liri.Fluid.Demo.png create mode 100644 src/demo/icons/scalable/apps/io.liri.Fluid.Demo.svg diff --git a/src/demo/demo.qbs b/src/demo/demo.qbs index d76ab6d0..22e96da5 100644 --- a/src/demo/demo.qbs +++ b/src/demo/demo.qbs @@ -82,6 +82,16 @@ Project { qbs.install: true qbs.installDir: lirideployment.appDataDir } + + Group { + condition: qbs.targetOS.contains("unix") && !qbs.targetOS.contains("darwin") + name: "Icons" + prefix: "icons/" + files: ["**/*.png", "**/*.svg"] + qbs.install: true + qbs.installSourceBase: prefix + qbs.installDir: lirideployment.dataDir + "/icons/hicolor" + } } /* diff --git a/src/demo/icons/128x128/apps/io.liri.Fluid.Demo.png b/src/demo/icons/128x128/apps/io.liri.Fluid.Demo.png new file mode 100644 index 0000000000000000000000000000000000000000..9d658178df10153b25b31e09333e8da64323d167 GIT binary patch literal 12312 zcmV+zFz3&SP)dp@83+`e6*tLt~_)H$b4R}0{9U=82`4K(HabLs#0tZTbM`a)paJk($E|5xXs zeWp#jLjPn*ZvuM)ECUt;1p>UrSnvO#XshweM`Hf?@IlbM`OOsMUVXL zz;a+CpwJwGRk&qcV;4ww{fC%q{iahI^Uyxirhdymlj#QQ#YXJcfepYgu+`60k5pi; zu?wU(=c)c&Y@eZ;{>9K2}B`Gr#c5GUshOGHj7C1^IFUWaA_ z)oMY@1Fxl@N_o0AA$|GafFlu(18xrTd2n+GA(W?7qt$GU*Q)h9ZlB!tFDG4h`z-_v z&;*wF{Wu@bH|YPL^^dvqKWOHhK#P4leW^fm#^!_ymZ3#Pv(E+$qd9tPjt^kc8|Y47 z`m-aBSakTJ;)Mg{%1d3>9mQ)&s#R3A3e5(nwv^K(GD`AjIlH`@LzGHTDuHypX0yJ1 zx>~({?ZnoPAAa3E<7fsjO7vV9z?_fzX%l^xchF*glhr0WeMvV4=vF~m10>qco|r=i zm~;;)eBc!$x&J$Q$fd*Ofs-95Qmvw9W}x90%L;P86lIQF9#Jkssf1G0rYEPa`_mH} z-+Jb%Rg>t^W>2C0KK~HfPvP}ZzS{s^k~Rfo5g};}7(~xw{dPbDJuk{9PJH<%7Yz-) z%W<7iW~Nb7li+zzKj7WSW(X+}gF{d()ACx|w@*%eW$$aQy9f&1l04lMYMl50;p=JExVq1UR}s-woowX)VX@V%5vnE!hv!wf68q8GDegU$^+iS^!WcQ`}rT zE}*W|#_Kjea@ZMvd~7|zv;f^DK-5prkCI*omKxWm)5ozL*b8my?I0M@PM11eApiKQ zkG|l|`|rImKRdIZ+PpCZ{60OhQD<(qqi^b=5+U@_YQfem6lSKEov`BhYaTuEWgkb6 zN|)q*v-`A(?(-6`H+mrUgQJYD1@uBjD=lPudff$p+nPQ=SM|Q+!Rp!?NLWP z`z0$zZV}T{B{egh(xfge-kH?X^q(QKKP`xI1u6qGH?ALFdHkRM{3u$qrzwH9o!^h2 zpgjfHi$VFA^SEmxeg)?LIND4p`2XEV+2VsIzWftM>^^c2+qWiwpE7!OrFFTU+L9ro zkp?r1TxBk>)uN-#d3)SRA%xx1|liJ#y zI0y71B{F4A$z=3`!67CE4=(%J?@mDDw3;CHp;tda-+q9&_53tDUjQq%o_@mhrB;2f z&iOtD#57!YMc;o`X6TwN0~1sRn04I0F8tYVjs({Gg?jZ9^z8>2rZ+p^1#;_8JN_4? z=4^NH(?n;lqBv+2o=ShnSiet7XU-ScS*h21Wo3la#FS@8 zOM*ecG3!n~_G<)d{M|5V5xDDPaZK_9MD6@&daRv4D)Vnv6K2Ue=E35gGYjxLlX_u> zZu$C^28IbH#u+KN=d60=k>{ZYsEvV*Nz@OJ)C(hYYjUrNh6#3zvG?%c1%Em6$mf!R31RFe2?A2= z^p5ue3}v->1R!6$Ab*qEF%}u>DbJJ!eAnB}1CVpAs~0^b?e@JU8YUPU69?}$cr(4N z9mHaqGzCOOd{TOG>*>ecA*LqFi9FK{{H~ojA7E#t9`BWv5z=ngYoZW3LTYldxcN25 z-b^qRq)h=y>4{T-El!fAfaaqoANiq@Qv1^|{)I@x?PrMVti;ZFCP7c49@@}#wD-#d zDO9ghfrB4E;pHDiW0N)oBux>GBtJmcwdLv%?N z{~j2jTYHnL?ur!ICW%p;gUq*&aOHZn{w*>G!3c}m(+Ls-65?yeMyC#TV3|fp{*^4eF zGyyqv#tCDLk6BSDqO+a$Lne-TsFg}A_{pzPv$M?p>nCX5c56HP&eQ;aj6VMiOT4|N zB^HTE@ayn~higMW{p~2h!d!GQ&tMAHVoC<1J^24j}_I?(gQg|xnk;NR3UZ^M2G)!%YCPYZOg(O|ik|3dtfUH&v>rQ>eW%xMJ zgA$neR_}w{u)`UF*542KVNwVRSA36|Z8}~+j*K$+)o)Y!uPacC7SclD0cyUCf_@mH z3nOSiBS0(bK!pD*t6a}INCMUCjL6)X@6)3@bEUmZ0fh~(e#I4ojoJx81aE`^dI8^P zvVf-)lgn4I+hspQSml&bG#+_~>Ur;j+ANNr_Owk6S>0cj=vEz<6pEO1Ka&7*M;(K+ z@@2@q_oZ>s$MDvzjen+Irvk@e+$~(a;+KDXBb^aLu~UE`J{};t-tPhBsn;Ag&h(^z zZSLTkNAZ-RrJ!;Cg)Di+v9S*~d-omGKK?<3=OK3iMo>QD!D#m9VgLkk;X>SFPr!ZA zVX$mB+~Hv;6p)S^s;AXxQ2o2p5wYQNNo`5i1sELk27dng0XpA2ihHvtaesg%1RF2_ zsMROG{PKm3#_MRcNEQ7d@VlFU3h+=U1Xbm+;HSSOUoOWzHD0qx{rA^W`{KVL5xpsk z{lxus(b1Fw_oP#hhpxok=UFf`j4YP)o5C4HyHZLY%?8!KJrSza&S&XW3b-!Y+`{+w zy5_pK5M}^_DFj$A$*Kc5iyZef4So#u3BH+!g`YPs1nV!lpgp>xBwd%{t4?Or=fqPr6DYDVLg*E^+>92}zb-JkUL3^p|zj7r`^@_PlD z7lRuAx&QtHIlKkB=7iCoB>F>&A)QQXb-eKBbSVVoR+GPe<13k;*QpFJaN*}DUw#$r z_iXJyPy*Gf@t=VaJYU@_eC*RbiTdPQhOHiV*=`iS{$2e)lrgq+T!jF*s70SS{O}?H zu6_9d#NY0*@KRN)#iVo*{Za5!$_w*XDI5e2P`LUhOl{g2Q!ts_kx>S|_)SWe{ScNe zwIo81hJOqr*yfxkApg7<^whQ_GK!#0xqbH||Ak9J_wAWxYrJJ)Wm<_>dizA1meLAV!uHqxHBoC(jNJStMX8vVwQjj4_GLW$nt zdK217u*pBR1Dk)ia^+&7yv~Ty4$S8shKHu~td5 z*Dq={{-!wi&!ofyq&b4Njh%Spx?H2NC?x)qMt>UkolQ$%aQ|L7+<~z60S?-^>4;|?ODuT`W2ej z{2YmBn|J{`1RZL02&5pt&%SeRL(mvOS!ks4 zrOZw&0ZQQt7GoT)0lwY+0KZsy&=JCmc#~qyKKr`=zfd6mv46pNneEq4Fj*2FNFWd> z93jX{$&Qblo5?qjm1Mp^`8^+`e8n%}@Rw)>PerGNfIJ1c_kMU@l|LbbHqNF0D1T8#$6b#az1r||02sQln6Dp&o1(&blD z_~gGLpSORze3UN)fYP0k6N2Keu3~)sx}+x0iQJJ1khn#R6y8WEXPmb$WjRg=!GbkU zuXZ^WG>m)rODKK*%T#`G9pxYYn!=YZ!#U%PAZ2(PUUaAArC|NJ@4`!3 zl$s-jeF)#ARW8%;6k_R8a?juYX}M=%#hyqZ{MAjR&0r}t6U2aTuGN)CjC(Fjfmd*Z z9=C|ubLy2x{1vYye7h_%JQEneO4k7pdYyb6LH@H}WXXXCW$YHMt*aelH1D~S+3#LT zW9wEe!<3@-)_1Yr>t3I^uD(ers(0T3OP5nvwmh&H=D`{b1GseBhvKjW3kH!w=$O$cbpt<|T`(jB z(;s<1Prmm<>~qp7$-QA0b6v!u#pI8D75QUd1PPolH{`OO3W=Iwjs#L=PA-)@C<9t(bqSI{?g)NMEM&vyiPDzl2YQjE>g<2RA@)_^tscR92jcH3mQt&xkKPb@-~#B zmePiO^M#|x8V^u%)n4({#CZFTHwNLVwvreNr+3Swrrh3f)283st zq?9;*e^ann^ z_p+fZCIIkM++Gg}u3)8{PGBR9kgy&Q1wY(C4VYADuNQ)XfW31Lvse9u8~^ECyk?i! z!)U8~CfM0hz>pB4gAvjcMd><0S-YOB;D>o8ei(dvI?!8+DhC)KjCHBM{Q-JV1UsAQGlA6WeGZD85R?S0a3urdV_bj6 zNsK+UrpG3U-W9NCfD9uTg|*dcg(QNIzL|t?GDpFWYW_WdZ}K*k(t$7uIzSce2x=cK zC9)5t=;-ePzR@Y#k^q79BY;X$uzSv72*tf`dlPGJ_)Eqn>^$E*kr@p+nk>c zzPaWhTIg>I*jQKN7lVYzFrjv8{GI6$ok7G%0-Fh>q$DLP@-738WZkDf&I8~3uS}zQ zXZr@SlJOx(DckMLE!!q6*A7%64j zOe_h(GS{Ub1XJJtHn)H36Q~TJ?h3wvtYoGJ0J&tDzGkO~^2T4!3O+zfw0!_Iy7>WG zcr&qgkEuFd^rtY1xfZby1c9083PD8*mN}BV5QtlD;LmS;BlX$zRq$QOH;{#tQf#^X zHtP4@<;N%L>+=o1K;U^QRleG`}$n}YkG{6)ekV_b1R9}g#mqU=bPVlk}T!0ECfq(4mn3M;0T^P z?_3`E!S_cjmivuj}%o7D~@1sPLdOPGYN71b=>%#x6z7;EwIhP zW{>XW`6SQtc<4Kq@$lvv>j&0o3U%u|@&7Qe@inFe--K2V#U=El=rMdLe{GT^(s3vKY# z{D2=yk5?u=)&2xPCMB>2)N3s@(bHRrZ5t-xNkSJh&I4Bd_Wl6~Nw!1FvFzxHbGe$8==R%a**K|u&T=S%&`f`+HJmk~ly zz4a!xY#(FsVJ~i%F;P2Dr$VTdV&k2+^WZtJXJmGof{+xX#1*tfzC=9j+J5`o|I<)# z#g6fJ|8C>VD7V#hW*3q^mlyI61f zcq;Iu`;8X~h%56#MLVwwcWo$mR9K-Qa4XvH%ck5XCgrb!JrUGr6@03&hsz+1~LNje1?#qq2jq(!mGV*l660b_K*faN2hRYromD>7w{IQ6tm=jz~$H z1En$nlqFQ8WcdfrMp zl;VLB*sGh^^E@8D{JX3=^HfG!jX=Zq=X%Co-EzNYmwp zHms#yogrU}-*eck6_|JZvRDQ6YL%P*{!E6)$EZk2LHZv{780R6y@F}<4YGmX-N_SC z_+mg#W2_Ce<{!|CpZWH4bhGHx{bW6$@$QG8dVkG>*eRrA#EO_!&0+peE1Op5;1FI) zU}-NQWJ)Pk|Nb}Jed_Tnn%qHI3d)Z5J>;a+9zENxr<-Ut^+vA8&f7!IC-pl zbk^NDMb9e6ZrQ$lf*|I@Y!wRu);aTS86*15Z__%L4^Pd0@37&@dvd8U#92gsH-<>j zI1`va0W4Zf>4MMV?7nA6!%qS>s4_l;Oew{d2UhXu2j0c7)DH6;0@uVTc>b&0Q4K%R zT)(nZ@T0S8W`!?qiAE_Q=%Th*yd-U6h<&^Ucgzl8~Km_3v##Jt>o}a7~SlBJFk=yuhrtt3qOXq z`Fe`}h|i(lX>^1@D$yQsGN>d1kTrKlojewBD(d91H-Lyr3F88e1z!c}3MQes;t#j( zORxseB;k7j-8Q{ZXmeru$*JnK`wy32?JCg&p8ZY%)>FnbNUqp};wLU@2UB*G_HBI# z;sFxxWLX5`Yu9k!Id5dtk?lQuT;ZE_C=I^QogAb2`1N&a^|~E&0G9}URN=G1@2J}X zA3+nv6SLK;(c%7y_P`A}Y{+_+NS9@pLWY+xf{`#<)RF=!^Z#s z4~a=cK~yLw4%|3vAmMKZCGx01p>X!xo80-I>I!_gIih23kE5-RJ<3Dxe3Yhpno4i(w`!2bd z#??QgB=m}%*{4r)y;k(}rcKtPq>WA@3ZL!dF?F<+dOL3gvq3&&>^B2b|zCV#lsf{pKRdU4;BRDg0vBtWa>q<{TQcE>?0}_4}K)S zt!IS659gg#iY@iV1FyZ~fp4G(r69n~#&S;I4YUtCy#`DIV=uh^&NH@6S7%#Mc2AQ6 zS(w0aaDAOZU{>IK5HV&@aF{gvJv#|HAXCxao~|wKg}GzO;Mvnp2R z^+-k$bAVyTe{y!D*WmTx_#d2;=qOyXE2#lm3d20K6~lB;?DKelI_CU{yEgnx z_I;9^Jhm4s8GMvt2dK|IvHA?OvuBbFK7SH0O?oe&K+tDqJ-|*MB+xeHZR68ZFCHov zmXs@pmRu(iYuckeV39;nkTBaG4c5pu=gK-4!MRYh*XeB~&NL?xln}7-_PVYrY`!H4 zyyW^)oIENS{4o!1m>9qKV-K$RCE*31K?2*~U}a)d%jj-vM$(5I^fqy}?bt$(?lO8k z*(iT@df6}I`Dx7`Z`^kONec!R4VEkW7ag;N&=!pGy_10?`i07x!LP%P_RlpErqAN- zXajx{DE9T}oZogT1^4L?`&JWD?~_n>D)?xn@8RkC&tG%uKOe7ck8AH1K2U?gsvpr&w35-Fn=ucYgvc_S*qFB!3ss zNcd_(T1vQ#W`GvZ?W+vRZ_E_1{fL|IdFPWG*FRj1&6ZR{d?(uE2%+C&A_MqJ^$xy~ zFsa~M`N;~tb)Fggu#}kb6zgk^#}2>gp0}Zuz8Qk0-ZUD*5AjdRkoI0c3oSNgfMK*5 zkz`Xg&|EeSY+ZT7J?~n-VdI9xu*?{RCm~}fpCbfAG75eqYbNj`=b6D*eSmNK1+s!4 zR5I-;Hq@IN4!Pm3x1l4r$I*S=@vgsho&!eE*iDd(uP2CK3^M1oD{+K?VHTjn#_jZ+ zpH=`41jcWB=|Pw7zHHfZhy2f;b%32Z@)MXu>0K|UEOGqIjQnRF{7Fx-sZoF8;J@5` zHhMI#A{fm^p#$Cji_p?R`v1r2#3zdH5PQL-#K&sSWB_CR=@p-8}I%H^k6HZNAxDNG>+mE zx89$GUppS4zrBK!HM&K9BWBPmQ)4f=`JQ*)zjo7)w$9eI6o z_7GO$IyVdW)~zywuhcUFz5=$i6c10=uRP+$yWd6-+)+h`c`YQq|NAnvlKcQsJ2L7A zi1QOHN6%3bEdgdsqrSgk^KFM!igF~Edr{Gm!XXT1EOqDxQE6b-37~070sKx+bh{=p zMR1;K=SP~6+0M@Ze#292@lZF6@3`c(x3BttXl;K6E%qyDoNDO4p2d%2A=%DP!mq0z zAZkZO{Qyxv!6+L1n*YCqo`c%%$DeN8x@yDt%(aJ(47|p1om?SlwIoEHpojk}f00Pg zPysV#a_=UB-w9kc_ih6C9g-{_{7Fx-O?kD?KJxe*E_h_^wP-uvDB(2%oLXpUFig<@ zNp^k`er-R1AU+--%N%09HBdl{{hXCjW;APm?4}bkQi$w;$B4fbE`QTciHOA%D614QO+E3N8BW zRoJ-o{AK>{v|nj2_|<_War*>fof{oN#iZB#222w;8cce{ziyt^xGQG?@6x9>{`w_@ zC2zpZ9g-75&?DYmpw zw~kL<@~T_z|2SHUA4B(N)w;VP=u-&#I)|17+vy#@7CKy_FDoGL-+0VFFQTUf^BuT2 zE1`%s6N_j?rgUJXviv&-KkvT=ONHGR%g>F)wZC3PWN)bLe(Nhe(qumNc=;DPY`#?H;XPY})*}({F$93!57a z^ZuSGl}Gngk#PSl^dE1~|22A>gJuMy81|$D_9Fon6L4FveuBDxBmU}-qsTI6gv~6#KIBEoM@gz|eLAZrrfMy~= zc31Fnv?D?#q}%032-d3O(#^TC5+qs@_M^AgoK;sa=|N55jW=d*S$X5VA0}8^nZ{o|^=mLo z>S_I-LrzfaiA*V~{eY96V%k%*JT11zS~&hN!fFp-cREngtu>H&104-hDg14}Cu zzx9Fx&fTk2I=bM9QdtPS^?IB`J0c~TnCTz^e25P=i8_!hEw7;jGbpN_!c#PM)Mjsg z`@N4}xN3UZ*z#tTbPCPn#&Hwp%TMZ`A@mg4kDb2^J!Ll&(wB5&fNm9ZYrv47XROEa zMgN`!f=Jdug2>ior!H79@Q(dfyk+-7{zZjcZm|naSwIOvPO4a$&`{y&pi?;O9RaN8@8VyYxx|(nuGbEbrG$%OcHzoP5%8p%MWpB3XBPNN|QgL@L7K+Pn^DzOve|${3Tj zhF%J{J9uaGPq*}_pP<7Jkk!uLS>!JowC7f{39|7gm{CUZ3Za#=QablR-J|c zgkO*8%qqcXHtD84CM;`LrVc-Wy+w=>5$266=oB%Ac6PeGg^fvvKwqg7fMTYdhLz6* zyqf=JG0co^hd_iY0-uEu{}4psn)A3VSa!w!8^^-h%tgcg1v`2)DniV)T_HVg{{lPR z^Uqx?y+Bw*HV6Qprc+C{r@*KcWK1&q{&DZ$@2dT`0gZXn1@;8iphZJei7?{Rv##w5 y=?neexz=y=hEkv9?R3+oXX5$iBfSai`Tqe>jefj`StH2+0000%?(pIt2(2R}L*rJq2R2)MI%&)L*!Sc&tMh2=WD&r74ZAI5MI**xw~uRmJDM3^#= zdH(*wJHA>4E^>VxYJTT@^qyAq!R|$KzER6W%76#TZ_S-Kb4p{h7w4o3yn4l}xnIpf z_RNi2tH+Jb_{bl3A507|RWWc=6n16c#()Us(eFUVnCoC5>2+f{CY+Orj+gV8nE^cu z@4U~Tqcd;>#4vR71WjAEVSl;_X=%B7@Fh&i^jWa#dzh!6A=>%}SlU@do>e|@anZ*< zmoqDtU|`|LyNxn3w%TOYdj;A20wcza$2&*iz&`ZJwcve@{g`Lpc^|D`TU8~DbB@AO zKZ4hGByuQTOmEwc-D5KeRze^ub>N6#jG^%TRXFD`*3vw4HjOXtfYoa%?u(#6!}2dt z+eC!swd;}Frd8gdqgEzCXaT$9u31lp$R}dm4NRMXy?q9H^gR$EEEE_RIhvMRZjE)b zmgwfGn9qL^7e?^rA^Zn#rm1r|Qj@NS?w-Siu9vVPMCbbfK~O$<(&?iRTQL@lpffg7pR zCzmn-P*yG{OjL?WQi!ZEbR5{rv9EubQlXH6T#Jd6Emtg3c=nf7;3gqjlN~rVz-w<+ zMKdN>Xkz`w^qu46@}*ola~fj|&bh0Cd++J~%PX9_cL8C4e;v3Wl%4)NGhoQME>siz zN-R_ui6@P*hW>|F(D&{;nbx(fR2=5`st3`h))OVuYr%~`!IyrQ8St&02cB?FQ|>Cj zCM`-yd;lY@p|Q0UYi$*|7jKL%|BoB@%q9ow)`|d(<_@)`!9lv8{xQ-1Jp=-x#Na6EeUjfXs6i1` z#4DGa?;Zc@8>18UP1X7A)q#O!i<_GN8U%r)(IY31bN-PBxa1Y^hVP^A%#y-olO zF*7E~vubc~pgV^y-IK?(NeA%T&h(yL+}`HKwzbYPrXoWmU}NnF5JHJ3#ixdZVu=IM zpfPwFd=~GwDYHwd3S=-iN3?f3&D`nM~ z>Lk?!7*>z-IB{U33fBO#lD@07*qo IM6N<$g6+j~m;e9( literal 0 HcmV?d00001 diff --git a/src/demo/icons/48x48/apps/io.liri.Fluid.Demo.png b/src/demo/icons/48x48/apps/io.liri.Fluid.Demo.png new file mode 100644 index 0000000000000000000000000000000000000000..e4803fac5e306066c511f2ba0fd0dc8d1abb54db GIT binary patch literal 3007 zcmV;w3qbUVP)6y(2@mKX~x?gv{_x=8^cZ~p3fgQYiaiZVgJ$yD+881LrbW?kmjkE(I zP0w_U-;Gtu0B&?siz-@?FhCKo5vXQyem!T-hnMtpUQ#r2s6i(fwFSgT1G9j&s>XPA zmF=Ffk3ZB`{q7lS*1Xz=fJS}!QNOLg*MM?tfm+jpw3L96<`&Kd_v#alyrnF99Ccg4 z_duJKJc<-c;FxMn%!;qw{m7X&LcPUXt@=)5%n@isq6m2D76z6cabHRGXgp8QW(Bn} zQY@_q3Y1G)GxFf%yH_sV1%YO4EeQa05Sq?Ljd%dB9DCU3rxwiBjEuMq;G+Q^O`6FF zbd>y!!(2G)FOS_2RTd)xaXbw-ebkmfDf*}uHR5eqa`=i4TVG5NTRH`NcQ~~4vQ(wx z;yKQ$iTAELnuhhu(MvgZGNW`;1Ily3-MaLMH#+KG1YW`-jmwaPj9$`Y)88ePkpy*$ zzIWJ;rAKa>8zz}{$tC$Rwm>@DlmKroI1e0u_(s_ zaiL5T14|Y@;QF;J__nSgyD0H%&F+-CZ{t#q?@b-}#DYg?BQ0ZK!{UYKlr%UB)fA4= zK<`SL-fcw$nwpC*l#<$oFD;sVR;s~7*)0j|Y4jTEsR1(8p>zBvQR8Im$5L`+nuxS? z#i%X_m{utMs1?>6f&L{6S5WueMy8273Cr;KZYp;@j4WFos$mSClLH%pQ$kg$Nb;M; zoe{rY7+gI6u2vM|ATFK__Q%K0AC@4HJoxZFP{q0RPjpV2OyGG`Z@(38y#a|kZ#SJt z$Ezx4?mT4P;mAJw;!N(r=^BT)E+fybBUt|BrfA{Zl-dpFU)dS%jSv7?jD3%*YAw|_=w z&ttUAV^InxpV|_9NKh#qb`<7IU&}ufp=9->H0C4*?wCD$KT*nw>$CtL-xvhB@=|I; zLz(uAGyGNyd6F`GyX6`ME9Cbv3o*W@ETdHa^lIz8K2F?gHf&gVc`M$B=>}) zT(DrAvph_jO~FIKL0F^2p#L!uw%n3bbn}OOEBf>dt-n3J4Rl8nc$LT*iwbAnftW_AIqf4JruVN zBL7&A1>R9*oCqd03#ed^h~G~LI3g1uWr4_T^ycf?`ub~3`o_1BgJ;9Rvq6=5b(q3i zy;PrEO|Z`gaNI&mK*ks7LLQe0*QiWD?Uzqq!Ao^LP*y#~8Ydq4WBm@Y1zcWk%ZFaivy7M1*?(+ZbsN9>58) z2S5;8KvmIZu=)G2${47KFlpt3JbS?x2z);xElFd$D?t$O<}JU%yXH#FDBz{hfrV5S z3RIJQnZ}^oJQ}AoCeUGo>6_l*xlf-+b#O4$j^pgM6>2+o^3RhNAvfQE8|$qNctKFX zPjE!P>RG!j+pIKQO0Eb(S%ewZ=hZV$Ver+LQB_1_Oz~i?rT2k*={;o$lj=SN8C~;n z@sw>u)4aq2J8bZ`WJfQv7)g<7u}Bf1EW%!{uzA^e47~V!GD{szyjqQy&-xVgYrjW_ z2reYP-%j&!-8)uS#qA_%^o}jVS7wx!2A^Auq~8haE5(5lLor`GWA zlNK?)|7}VlIB0v#t7gCls@yZscU6pAfNr8ap#G!h^p#7ck~j_+Cm+ChG@0wV7|J)_ zNwKpN2wfx|BLM2Y&ud@5fYM7ZP!baYPYU5?pDH5S0I!5aKu|ojwVsEc+B3$Sq*1^h z^!*1zQ0Y9DM0Bd8ECApZa4x=_uG?4Ol*`HEcx+Hrw!i)w8%{Wij#vIk*~H*eK5s|Y zyhIC{fogC+;l5A+1VU;>wm+0tA2YYVRIUh)17a9;p5wZ>%P*zy(T^dK-#2UBtJQe@ z2Uk#haur1ZM+`UH{Vx*k?PLJ7qY z2?wW)R>L_>=qiy!*I`{$Z^PdaY`y2~thfjhBJCQ$AQ(}^YB)LydGL@24{gCC$~Ify zGHdnvMP!el50}0QttF$<)W0VsbAv_tW0{tIc_4FaH^=*05AE|+@gAKyerZ!x^ z0$mboUdj2qwRxX!2|iTq#;Uh&@5k1D1lSf~DAUT13Fi|<@<*H{!uhrnT@U|!Q(^!47;IVk*VbA_RP?P8|M7#LSbrw4Ii=8Mx7p<} z>sSuD1?ZRvd)+(#pdZaBl@_>;DVI$=a|t(qYid(@KGu3fNMIz4o!Wnfyw%6AdG;#< z&`X#mb(FrFF=hyi_E&=fjpP3`kuosp^l6j!KY!}9FHWlz4l25)tDvS32;xV9ZUl^? zfvE2Vy7SGN|IBrpHeUCeO#?3iZ$}{0z~jEg{8t0ofFFxEG}aXr!b9>n<;6biM<7QC zwOl2fOnM_DR5);7(dGN@xkeEQi z%lHT&$ojz79(31p#K+3Ua}ZW>Jt``?E30^1Sk101t{xXz0TmU6LjWTN5<)fsmJsp) z5)$*CnN0Webl1K6$F19StE+lu60>{HshO^-Tep7S@9%kURS9qsa0uH>{9lg4ehH|K z(Lad)M`MiF2@D@+`2hMtEO-S}j`Iy97J9V)<0U|G{0S%nhr;+kB|b33_*zFih#utz zMG|0+5T0Ce)@75!;{32^W+|ik0JP{sjS+eIfNnf>*6-H+${Wj#SB&p98bOAH@UdDM zi@7Ag1nsM029kE z0zn8tfD}TEptV+mb!6?Xp@FZ@e{jv(Sgz6Tr+_Zth(}Cb|FVy_m4Ma`tpkijkbdl( zb6zuhO80k*N}m@*QNdJw%RSmANM{LD7}do*y=i~#gXgVY{q$(}KT7#a0`zznI7z$6 z#)J+M&1X!0h zp_cw_3242bgpI_N)*JrInKP%q_oUemg<8*~>Vke+@MCLj2s8#McT$(|rQ3IJx#&}C zU)oDnA!Td^a=7vo3T<2f5)&!M$40QMR{ZmOFI%>V+Gx=<&z;@-Db!{ z-=F&Phd&;7a`KmBnY*xo*vXx7iLnSM#s7y%{D)hYF70{W3B{)iwUHS#>Q0;-3C9O7 z)7pAZ&WRu-Ds}Gt(ShN)A78zCAU^8ifGF%m;s*jwr_?N3UV%=3?UASFL04S-Mdx0ATA{Rt zp(8Q)W_nNkwEJ>wTLu|9q-Oh>!6St;BwYK{vL#nyl^Vse7h)_Oc|ctO;TIh)&sV)| z_=&eHUNX0Z_y&GRr?r5u; z?iX^I7~txA1DL&+T=2a@qc%OM*;@oj2{{fh$6_HF?dMoS-i`>WUYoh+vZc4S!v~ml zS%90)nt5Uw{XwFLrrA3Iy#H#>shJy(9ofg~(}sw4`|U{3n(l`B>+k&8tERWZ>HCNC z5e3M{roC+w`1Bx?s2&PxQGx*r>wRlcx_}@{&L1^f76Q3 zZMhb(ZrP$Gp{~!&)oiO^w|$eSK0^7EpQhu^`(VLhn_I?X>AB${O@sw2XoKAVZ4C5H zB6!#PF{REnH%Z0|v_5(Lg$vJbCyq;l&9ry$;-x!__4>4?_A}sV?rQ_p*>jk3%St3Z zHgaG;wa;IN?06x|!)UX_)@)}CYRUP?Ip?EZ^E%X|$*8U_R2U-4>aKBQklMSJgVs4? znC3l4ip5=%e!cpn_(Zc*&JeKb!VBjuEY&yBh!XHkz-jP^B_IOym;Z@LXD>_%Kk~{> zYM=cSYX9E$)}Kd+iA8_=JL&%Digs555JeGYaFF3EFHY`ZGCv>)*&bC-J>$Xk&-(;q zV!-@jeI<=X`Yvt21Beooz{uyXrCzIfmk1rNnnm~RKcRTbzhTN<`DJ~Zs!tn3;XPN4 z3f{!z1--o#Z@(*VhLHSh)S0F_R+19~++4o|l#8$+Yx;iLBXv#yB|^!-?r(lQBZ5+j z;_FYL{Gay`-gq-c1(-3?odL{@nG`4XjY@z|Lh)5I3BPlD2Dd+cN#qS!?Kd$iY@J*I zsv9modyyC&`WK}I%sGxA2myxjBM&g};*MNFRS-}*Ya!)(A3&|RKDPXPBD67t*M6=U zQ$}k#ikc*pX3r(K>6TXH$*)Kko_f>bKld?*e%I-Z!gUy(4SKoYTZ#@5ion39KSB48 ze~t)oMTZ+rL8v;TR*>IMdVF$t0!d9Xw3<(EW_ub_=yeL@h74 zicnIr$j2-s3nHC^Z(V#)A{0up1c*>Cc2NA+A5%VIvL&?9AUb>q^UOx-cYGJUcQ0C? zq76Mix|i}eeAu=6;2^bce1-Z`Yw5k`H{&7zVEad|LT!72KmcP?p)v*$D4{5}qy{6R zCp@rb64nipG&mc2*S~r3KF1WIQsC_nLLJ~6x6(K7w2Uw&iqMrIqV3z*_t>LM|H$8< zRNHDhd%ZCLJ!6HXENjJPd0HM83Rr%s*O`1)G-mzlp-cVMA{Oe`X*Ud5puyhJ=RS^LQs&Y32ys@ zHVBnEA$|8&VMvHT2oQ=Q%-Ft_jqm>ph6e`7Ye5hYMN#g#@is>UfYv%is`T{4fZKxy zTXEO5u`8vbCKKb%MyQ+`zz6S!6qox2POepW=E}FRfAe#>!XK+Ev^J#_L0n(B_z-sY zj0?PjP&bCiB``9nIox|)JVQA8Myugc47Q53QLpTC9q#ZT#sEl*+MED%?F+8}W? zh#_Sm+88E3^u$!)F#dYL4ybFD7pX=AFPY6|2skl--hlz0e(&WR+P*CzC??@pTDAW$ z&%Eu8sQd1wODPN9>Bo()OIZ2j>Mc=_FzGSNhI3WP#)$`Tv>sAk{H0@@6cyt|ZoE};AC z^$nRND)H~qCLXlLhPYQKim8F3I}rAN_46FuvY8+V2!deTX|YzR@XUKJhdWkMR*E7L z`+R)6Sl;n~#~7-OXdT|O0p9}5x+6n3k11E4WsGt@5MfFnOj@{@$#dq#UB<2rwAQ?` z>Or<$@fLap`t74?v4PeB8Y|i-;4MiSSX~{y8E>UPfT`GL=N*6?T()Ruu}}yJ0=x36 zRHA)91?IKPL(Et^z)+#clsoTBWdp5sGoSmdK2qb^Yp$ki$5u+B2#i4qHrQcT|6n7^y1{tByL0||2ewe4_cLEg z1;4!7z!<~9=bmNr+m_M$;x@`k5yo0~rYe}RHE*(k5M$_%8tZ|6A9G0h*1rmpZOAnGtPt@lTTSg6tVe>HxRCUjGj;tBB{qXVAGn@ zyaSJ?;nr!fO@RiCp`qcf1ADIl8rYX6GVcet2P4IoFIu>xud_5&g3wME+~UY+1%OXP zM+b!)zCz*D(-SL*O}=%Z!x+Q9jT_i={WWxp&=ClMk=T^2Nn5f^Q3wlBnWb~@BSNLAkx&d6&gYFuffs=T^~Ro)A9>O}396E$s-_F1DnZh(#T%gi0~@zpFjT3G zIeQVHS1HPYA`m+v3W3nrwWm-ZFvRE5DJ=uO$!|OGWWk#>_#tf?%b$7j0_?2MkLJqX z53p}hHsY;2W=3N9YdfpeK~)UaFX-uhPq9#J9|_}Dl;kCbW;rUxGhI7+9^mHhI9U21 z)8I`~R-cc}-T;G|#+SGK@!enCvhAK2ynFQTQeN`*M&iez zp9UfOI{Ac{1V2l3_Q7i&KmY9er}XqpF9s?Zu1Q9kl#13wtf(UsyNv5MMzpUZ z9Bef9E!(i};+Oi_g4J>}%43buJ+#QYEYi`XvJnFPGMgRACR^SlS%U^rro*)UYS=afg*EqZ{ED`_jQ)0m4mp<&MTOVVc6K1kTl0><^p%%Aenlp|;I)vup zIK3Xg-^p zfL%~%{cNoeUpMKBDN|0l;gp#-PAe7XcLY)>A(jlURkexd2I<+Gc)l-U(`ZdVM@IKY z(Fl7@F#Fe4 z`v2#%&%L~wRumLP0sXHQX zb0k(dzVej;6JpKv5LT Qe*gdg07*qoM6N<$f&(;L%K!iX literal 0 HcmV?d00001 diff --git a/src/demo/icons/scalable/apps/io.liri.Fluid.Demo.svg b/src/demo/icons/scalable/apps/io.liri.Fluid.Demo.svg new file mode 100644 index 00000000..6dbbf68b --- /dev/null +++ b/src/demo/icons/scalable/apps/io.liri.Fluid.Demo.svg @@ -0,0 +1,1386 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/demo/io.liri.Fluid.Demo.desktop b/src/demo/io.liri.Fluid.Demo.desktop index 2fc4a4df..4dcf93aa 100644 --- a/src/demo/io.liri.Fluid.Demo.desktop +++ b/src/demo/io.liri.Fluid.Demo.desktop @@ -5,3 +5,4 @@ Exec=fluid-demo Terminal=false Type=Application Categories=X-Liri;Qt;Development; +Icon=io.liri.Fluid.Demo From 39f78f1c1fe33ebe6a4ddb7eb3e095fad76e2118 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Tue, 1 May 2018 11:04:15 +0200 Subject: [PATCH 24/74] update_qmltypes.sh: Verbose output This helps finding problems. --- scripts/update_qmltypes.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/update_qmltypes.sh b/scripts/update_qmltypes.sh index 108453b3..f881ded8 100755 --- a/scripts/update_qmltypes.sh +++ b/scripts/update_qmltypes.sh @@ -10,7 +10,7 @@ case $1 in ;; esac -cmd="${QMLPLUGINDUMP} -noinstantiate -notrelocatable -platform minimal" +cmd="${QMLPLUGINDUMP} -v -noinstantiate -notrelocatable -platform minimal" curpath=`dirname $0` rootpath=`dirname $(readlink -e $curpath)` From 941138023a17cee23ab3fa6acd3968781b84f776 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Tue, 1 May 2018 11:06:31 +0200 Subject: [PATCH 25/74] Fix dependency in qmldir files Correct typo that prevented plugins.qmltypes from being updated. --- src/imports/controls-private/qmldir | 2 +- src/imports/controls/qmldir | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/imports/controls-private/qmldir b/src/imports/controls-private/qmldir index 44379be1..bd28037e 100644 --- a/src/imports/controls-private/qmldir +++ b/src/imports/controls-private/qmldir @@ -2,7 +2,7 @@ module Fluid.Controls.Private plugin fluidcontrolsprivateplugin classname FluidControlsPrivatePlugin depends QtQuick.Controls 2.0 -depends Fluid.Template 1.0 +depends Fluid.Templates 1.0 typeinfo plugins.qmltypes DateSelector 1.0 DateSelector.qml diff --git a/src/imports/controls/qmldir b/src/imports/controls/qmldir index 656038f5..60f0a271 100644 --- a/src/imports/controls/qmldir +++ b/src/imports/controls/qmldir @@ -2,7 +2,7 @@ module Fluid.Controls plugin fluidcontrolsplugin classname FluidControlsPlugin depends QtQuick.Controls 2.0 -depends Fluid.Template 1.0 +depends Fluid.Templates 1.0 typeinfo plugins.qmltypes AbstractCard 1.0 AbstractCard.qml From e238b525ca97fbb4ba9ae5a3023e3307e8938c84 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Tue, 1 May 2018 12:54:18 +0200 Subject: [PATCH 26/74] Bump Fluid.Controls version to 1.1 Properties added after Fluid.Controls 1.0 were not versioned. Create a base type that provides 1.0 features and inherit or write a new QML file with 1.1 symbols. In order to avoid qdoc from showing a type for each version we move the documentation to qdoc files. Issue: #230 --- doc/offline.qbs | 1 + doc/online.qbs | 1 + doc/src/controls/AppBar.qdoc | 118 ++++++++++ doc/src/controls/AppToolBar.qdoc | 49 ++++ doc/src/controls/ApplicationWindow.qdoc | 86 +++++++ doc/src/controls/Page.qdoc | 127 ++++++++++ doc/src/controls/SearchBar.qdoc | 124 ++++++++++ scripts/update_qmltypes.sh | 2 +- src/demo/qml/Pages/Basic/ButtonPage.qml | 2 +- src/demo/qml/Pages/Basic/CheckBoxPage.qml | 2 +- src/demo/qml/Pages/Basic/ProgressBarPage.qml | 2 +- src/demo/qml/Pages/Basic/RadioButtonPage.qml | 2 +- src/demo/qml/Pages/Basic/SliderPage.qml | 2 +- src/demo/qml/Pages/Basic/SwitchPage.qml | 2 +- .../qml/Pages/Controls/ActionButtonPage.qml | 2 +- .../qml/Pages/Controls/BottomSheetPage.qml | 2 +- src/demo/qml/Pages/Controls/CardPage.qml | 2 +- src/demo/qml/Pages/Controls/DatePicker.qml | 2 +- .../qml/Pages/Controls/DateTimePicker.qml | 2 +- src/demo/qml/Pages/Controls/DialogsPage.qml | 2 +- src/demo/qml/Pages/Controls/ListItemPage.qml | 2 +- src/demo/qml/Pages/Controls/NavDrawerPage.qml | 2 +- src/demo/qml/Pages/Controls/OverlayPage.qml | 2 +- src/demo/qml/Pages/Controls/Placeholder.qml | 2 +- src/demo/qml/Pages/Controls/Search.qml | 2 +- src/demo/qml/Pages/Controls/SnackBarPage.qml | 2 +- src/demo/qml/Pages/Controls/SubPage.qml | 2 +- src/demo/qml/Pages/Controls/TimePicker.qml | 2 +- src/demo/qml/Pages/Controls/WavePage.qml | 2 +- src/demo/qml/Pages/Style/IconsPage.qml | 2 +- src/demo/qml/Pages/Style/PalettePage.qml | 2 +- src/demo/qml/Pages/Style/PaletteSwatch.qml | 2 +- src/demo/qml/Pages/Style/SystemIconsPage.qml | 2 +- src/demo/qml/Pages/Style/TypographyPage.qml | 2 +- src/demo/qml/main.qml | 2 +- src/imports/controls/AppBar.qml | 110 --------- src/imports/controls/AppBar11.qml | 221 ++++++++++++++++++ src/imports/controls/AppToolBar.qml | 34 +-- src/imports/controls/AppToolBar11.qml | 71 ++++++ src/imports/controls/ApplicationWindow.qml | 66 +----- src/imports/controls/ApplicationWindow11.qml | 54 +++++ src/imports/controls/Page.qml | 91 -------- src/imports/controls/Page11.qml | 89 +++++++ src/imports/controls/SearchBar.qml | 63 ----- src/imports/controls/SearchBar11.qml | 196 ++++++++++++++++ src/imports/controls/controls.qbs | 2 + src/imports/controls/qmldir | 8 + 47 files changed, 1179 insertions(+), 388 deletions(-) create mode 100644 doc/src/controls/AppBar.qdoc create mode 100644 doc/src/controls/AppToolBar.qdoc create mode 100644 doc/src/controls/ApplicationWindow.qdoc create mode 100644 doc/src/controls/Page.qdoc create mode 100644 doc/src/controls/SearchBar.qdoc create mode 100644 src/imports/controls/AppBar11.qml create mode 100644 src/imports/controls/AppToolBar11.qml create mode 100644 src/imports/controls/ApplicationWindow11.qml create mode 100644 src/imports/controls/Page11.qml create mode 100644 src/imports/controls/SearchBar11.qml diff --git a/doc/offline.qbs b/doc/offline.qbs index b72320af..655b80ee 100644 --- a/doc/offline.qbs +++ b/doc/offline.qbs @@ -17,6 +17,7 @@ Product { files: [ "config/*.qdocconf", "src/*.qdoc", + "src/controls/*.qdoc", ] Group { diff --git a/doc/online.qbs b/doc/online.qbs index 88735664..c7e9f9e3 100644 --- a/doc/online.qbs +++ b/doc/online.qbs @@ -17,6 +17,7 @@ Product { files: [ "config/*.qdocconf", "src/*.qdoc", + "src/controls/*.qdoc", ] Group { diff --git a/doc/src/controls/AppBar.qdoc b/doc/src/controls/AppBar.qdoc new file mode 100644 index 00000000..97ece772 --- /dev/null +++ b/doc/src/controls/AppBar.qdoc @@ -0,0 +1,118 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * Copyright (C) 2018 Michael Spencer + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype AppBar + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Application tool bar. + + For more information you can read the + \l{https://material.io/guidelines/layout/structure.html#structure-app-bar}{Material Design guidelines}. +*/ + +/*! + \qmlproperty Action AppBar::leftAction + + The back action to display to the left of the title in the action bar. + When used with a page, this will pick up the page's back action, which + by default is a back arrow when there is a page behind the current page + on the page stack. However, you can customize this, for example, to show + a navigation drawer at the root of your app. + + When using an action bar in a page, set the \l Page::leftAction instead of + directly setting this property. +*/ + +/*! + \qmlproperty list AppBar::actions + + A list of actions to show in the action bar. These actions will be shown + anchored to the right, and will overflow if there are more than the + maximum number of actions as defined in \l maxActionCount. + + When used with a page, the actions will be set to the page's \l Page::actions + property, so set that instead of changing this directly. +*/ + +/*! + \qmlproperty int AppBar::elevation + + The elevation of the action bar. Set to 0 if you want have a header or some + other view below the action bar that you want to appear as part of the action bar. +*/ + +/*! + \qmlproperty color AppBar::backgroundColor + + The background color of the tool bar when the AppBar's page is active. + By default this is the primary color defined in \l Material.primaryColor + + \since Fluid.Controls 1.1 +*/ + +/*! + \qmlproperty color AppBar::decorationColor + + The background color of the window decoration when the AppBar's page is active, + usually a darker version of \l backgroundColor. + By default this is the primary color defined in \l Material.primaryColor with a + shade of \l Material.Shade700. + + \since Fluid.Controls 1.1 +*/ + +/*! + \qmlproperty real AppBar::leftKeyline + + Keyline to align contents to the left to be visually appealing. +*/ + +/*! + \qmlproperty int AppBar::maxActionCount + + The maximum number of actions that can be displayed before they spill over + into a drop-down menu. When using an action bar with a page, this inherits + from the global \l AppToolBar::maxActionCount. If you are using an action bar + for custom purposes outside of a toolbar, this defaults to \c 3. + + Set to \c 0 if you don't want to overflow actions. +*/ + +/*! + \qmlproperty string AppBar::title + + The title displayed in the action bar. When used in a page, the title will + be set to the title of the page, so set the \l Page::title property instead + of changing this directly. +*/ + +/*! + \qmlproperty list AppBar::customContent + + Custom content to show instead of the title. + + \since Fluid.Controls 1.1 +*/ + +/*! + \qmlproperty AppToolBar AppBar::toolbar + + Tool bar. +*/ diff --git a/doc/src/controls/AppToolBar.qdoc b/doc/src/controls/AppToolBar.qdoc new file mode 100644 index 00000000..dcdac373 --- /dev/null +++ b/doc/src/controls/AppToolBar.qdoc @@ -0,0 +1,49 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * Copyright (C) 2018 Michael Spencer + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype AppToolBar + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Application tool bar. + */ + +/*! + \qmlproperty int AppToolBar::maxActionCount + + Maximum actions to be available on this tool bar. +*/ + +/*! + \qmlmethod void AppToolBar::pop(Page page) + + Pop the \l AppBar that belongs to \a page from the stack. +*/ + +/*! + \qmlmethod void AppToolBar::push(Page page) + + Push the \l AppBar that belongs to \a page to the stack. +*/ + +/*! + \qmlmethod void AppToolBar::replace(Page page) + + Replace current \l AppBar with the one that belongs to \a page. +*/ diff --git a/doc/src/controls/ApplicationWindow.qdoc b/doc/src/controls/ApplicationWindow.qdoc new file mode 100644 index 00000000..8b9082e1 --- /dev/null +++ b/doc/src/controls/ApplicationWindow.qdoc @@ -0,0 +1,86 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * Copyright (C) 2018 Michael Spencer + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype ApplicationWindow + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief A window that provides features commonly used for Material Design apps. + + This is normally what you should use as your root component. It provides a \l ToolBar and + \l PageStack to provide access to standard features used by Material Design applications. + + Here is a short working example of an application: + + \qml + import QtQuick 2.10 + import Fluid.Controls 1.1 as FluidControls + + FluidControls.ApplicationWindow { + title: "Application Name" + width: 1024 + height: 800 + visible: true + + initialPage: page + + FluidControls.Page { + id: page + title: "Page Title" + + Label { + anchors.centerIn: parent + text: "Hello World!" + } + } + } + \endqml +*/ + +/*! + \qmlproperty color ApplicationWindow::decorationColor + + The color of the status bar or window decorations, if the current + platform supports it. +*/ + +/*! + \qmlproperty Theme ApplicationWindow::decorationTheme + + Theme of the status bar or window decoration, if the current + platform supports it. +*/ + +/*! + \qmlproperty AppToolBar ApplicationWindow::appBar + + The tool bar for this application. +*/ + +/*! + \qmlproperty Page ApplicationWindow::initialPage + + The initial page shown when the application starts. +*/ + +/*! + \qmlproperty PageStack ApplicationWindow::pageStack + + The \l PageStack used for controlling pages and transitions between pages. +*/ diff --git a/doc/src/controls/Page.qdoc b/doc/src/controls/Page.qdoc new file mode 100644 index 00000000..32f4252a --- /dev/null +++ b/doc/src/controls/Page.qdoc @@ -0,0 +1,127 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * Copyright (C) 2018 Michael Spencer + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype Page + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Represents a page on the navigation page stack. + + Example: + + \qml + import QtQuick 2.10 + import Fluid.Controls 1.1 as FluidControls + + FluidControls.Page { + title: "Application Name" + + actions: [ + FluidControls.Action { + name: "Print" + + // Icon name from the Google Material Design icon pack + icon.source: FluidControls.Utils.iconUrl("action/print") + } + ] + } + \endqml +*/ + +/*! + \qmlproperty AppBar Page::appBar + + The action bar for this page. Use it as a group property to customize + this page's action bar. See the \l Page example for details on how to use + this property. +*/ + +/*! + \qmlproperty list Page::actions + + The page's actions shown in the action bar. +*/ + +/*! + \qmlproperty Action Page::leftAction + + The action shown to the left of the title in the action bar. By default, + this is a back button which shows when there is a page behind the current + page in the page stack. However, you can replace it with your own action, + for example, an icon to open a navigation drawer when on your root page. +*/ + +/*! + \qmlproperty bool Page::canGoBack + + Set by the page stack to true if there is a page behind this page on the + page stack. + + The default value is \c false. +*/ + +/*! + \qmlproperty list Page::customContent + + Custom content to show instead of the title. + + \since Fluid.Controls 1.1 +*/ + +/*! + \qmlsignal void Page::goBack(var event) + + This signal is emitted when the back action is triggered or back key is released. + + By default, the page will be popped from the page stack. To change the default + behavior, for example to show a confirmation dialog, listen for this signal using + \c onGoBack and set \c event.accepted to \c true. To dismiss the page from your + dialog without triggering this signal and re-showing the dialog, call + \c page.forcePop(). + + \sa Fluid.Controls::Page::forcePop() +*/ + +/*! + \qmlmethod void Page::pop(event event, bool force) + + Pop this page from the page stack. This does nothing if this page is not + the current page on the page stack. + + Use \c force to avoid calling the \l goBack signal. This is useful if you + use the \l goBack signal to show a confirmation dialog, and want to close + the page from your dialog without showing the dialog again. You can also + use \l Fluid.Controls::Page::forcePop() as a shortcut to this behavior. + + \sa Fluid.Controls::Page::forcePop() +*/ + +/*! + \qmlmethod void Page::forcePop() + + Force a pop from the page stack. +*/ + +/*! + \qmlmethod void Page::push(Component component, object properties) + + Push the specified component onto the page stack. + + \sa StackView::push() +*/ diff --git a/doc/src/controls/SearchBar.qdoc b/doc/src/controls/SearchBar.qdoc new file mode 100644 index 00000000..a7d742c9 --- /dev/null +++ b/doc/src/controls/SearchBar.qdoc @@ -0,0 +1,124 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * Copyright (C) 2018 Magnus Groß + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype SearchBar + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Provides a searchbar, that supports autocompletion and displays search results using cards. +*/ + +/*! + \qmlproperty string SearchBar::searchText + + The current search text in the search bar typed in so far. +*/ + +/*! + \qmlproperty model SearchBar::searchSuggestions + + The suggestions to display. + + \sa SearchBar::suggestionTextRole + \sa SearchBar::suggestionDelegate +*/ + +/*! + \qmlproperty Component SearchBar::suggestionDelegate + + The delegate item for the suggestion list view. + + \sa SearchBar::searchSuggestions +*/ + +/*! + \qmlproperty string SearchBar::suggestionTextRole + + The model type that contains the text to display in the suggestion delegate + + \sa SearchBar::searchSuggestions +*/ + +/*! + \qmlproperty string SearchBar::searchPlaceHolder + + The string to display when the search field is empty +*/ + +/*! + \qmlproperty int SearchBar::cardWidth + + The width of the search card. By default the search bar centers in the parent with a margin of 64 each side +*/ + +/*! + \qmlproperty int SearchBar::suggestionsHeight + + The viewable area of the suggestions list until it begins scrolling. +*/ + +/*! + \qmlproperty color SearchBar::waveColor + + The background color of the expanded search bar. +*/ + +/*! + \qmlproperty bool SearchBar::persistent + + Whether the SearchBar is persistent or expandable +*/ + +/*! + \qmlproperty bool SearchBar::expanded + + Whether the SearchBar is currently open +*/ + +/*! + \qmlproperty font SearchBar::searchTextFont + + The font of text in search TextInput box + + \since Fluid.Controls 1.1 +*/ + +/*! + \qmlproperty model SearchBar::searchResults + + The model containing the search results +*/ + +/*! + \qmlsignal SearchBar::search(string query) + + Is emitted, when the user searches for a query. The \a query parameter contains the search query as string. Use this signal to provide search results. +*/ + +/*! + \qmlmethod void SearchBar::open() + + Opens the search bar +*/ + +/*! + \qmlmethod void SearchBar::close() + + Closes the search bar +*/ diff --git a/scripts/update_qmltypes.sh b/scripts/update_qmltypes.sh index f881ded8..0183f113 100755 --- a/scripts/update_qmltypes.sh +++ b/scripts/update_qmltypes.sh @@ -24,7 +24,7 @@ function update() { } update Fluid.Core 1.0 core -update Fluid.Controls 1.0 controls +update Fluid.Controls 1.1 controls update Fluid.Controls.Private 1.0 controls-private update Fluid.Effects 1.0 effects update Fluid.Layouts 1.0 layouts diff --git a/src/demo/qml/Pages/Basic/ButtonPage.qml b/src/demo/qml/Pages/Basic/ButtonPage.qml index 831a9b5d..683a8536 100644 --- a/src/demo/qml/Pages/Basic/ButtonPage.qml +++ b/src/demo/qml/Pages/Basic/ButtonPage.qml @@ -15,7 +15,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 -import Fluid.Controls 1.0 +import Fluid.Controls 1.1 import "../.." Flickable { diff --git a/src/demo/qml/Pages/Basic/CheckBoxPage.qml b/src/demo/qml/Pages/Basic/CheckBoxPage.qml index 33232a15..e733034b 100644 --- a/src/demo/qml/Pages/Basic/CheckBoxPage.qml +++ b/src/demo/qml/Pages/Basic/CheckBoxPage.qml @@ -16,7 +16,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 -import Fluid.Controls 1.0 +import Fluid.Controls 1.1 import "../.." Flickable { diff --git a/src/demo/qml/Pages/Basic/ProgressBarPage.qml b/src/demo/qml/Pages/Basic/ProgressBarPage.qml index e8c32d68..7eea1c37 100644 --- a/src/demo/qml/Pages/Basic/ProgressBarPage.qml +++ b/src/demo/qml/Pages/Basic/ProgressBarPage.qml @@ -15,7 +15,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 -import Fluid.Controls 1.0 +import Fluid.Controls 1.1 import "../.." Flickable { diff --git a/src/demo/qml/Pages/Basic/RadioButtonPage.qml b/src/demo/qml/Pages/Basic/RadioButtonPage.qml index 68562a53..e7a6ae82 100644 --- a/src/demo/qml/Pages/Basic/RadioButtonPage.qml +++ b/src/demo/qml/Pages/Basic/RadioButtonPage.qml @@ -15,7 +15,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 -import Fluid.Controls 1.0 +import Fluid.Controls 1.1 import "../.." Flickable { diff --git a/src/demo/qml/Pages/Basic/SliderPage.qml b/src/demo/qml/Pages/Basic/SliderPage.qml index ccf8064b..ba0c8de6 100644 --- a/src/demo/qml/Pages/Basic/SliderPage.qml +++ b/src/demo/qml/Pages/Basic/SliderPage.qml @@ -15,7 +15,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 -import Fluid.Controls 1.0 +import Fluid.Controls 1.1 import "../.." Flickable { diff --git a/src/demo/qml/Pages/Basic/SwitchPage.qml b/src/demo/qml/Pages/Basic/SwitchPage.qml index a3d28f30..672152dd 100644 --- a/src/demo/qml/Pages/Basic/SwitchPage.qml +++ b/src/demo/qml/Pages/Basic/SwitchPage.qml @@ -15,7 +15,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 -import Fluid.Controls 1.0 +import Fluid.Controls 1.1 import "../.." Flickable { diff --git a/src/demo/qml/Pages/Controls/ActionButtonPage.qml b/src/demo/qml/Pages/Controls/ActionButtonPage.qml index 6c487855..728d9b50 100644 --- a/src/demo/qml/Pages/Controls/ActionButtonPage.qml +++ b/src/demo/qml/Pages/Controls/ActionButtonPage.qml @@ -14,7 +14,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls import "../.." Flickable { diff --git a/src/demo/qml/Pages/Controls/BottomSheetPage.qml b/src/demo/qml/Pages/Controls/BottomSheetPage.qml index c4d6b63f..67c0abed 100644 --- a/src/demo/qml/Pages/Controls/BottomSheetPage.qml +++ b/src/demo/qml/Pages/Controls/BottomSheetPage.qml @@ -15,7 +15,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls Item { Column { diff --git a/src/demo/qml/Pages/Controls/CardPage.qml b/src/demo/qml/Pages/Controls/CardPage.qml index 4a3ff069..bf4a30a2 100644 --- a/src/demo/qml/Pages/Controls/CardPage.qml +++ b/src/demo/qml/Pages/Controls/CardPage.qml @@ -14,7 +14,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import Fluid.Controls 1.0 +import Fluid.Controls 1.1 Item { Card { diff --git a/src/demo/qml/Pages/Controls/DatePicker.qml b/src/demo/qml/Pages/Controls/DatePicker.qml index 53aaa235..bf3b8749 100644 --- a/src/demo/qml/Pages/Controls/DatePicker.qml +++ b/src/demo/qml/Pages/Controls/DatePicker.qml @@ -15,7 +15,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls import "../.." as Components Components.StyledPage { diff --git a/src/demo/qml/Pages/Controls/DateTimePicker.qml b/src/demo/qml/Pages/Controls/DateTimePicker.qml index 74ed809e..1dbd3dcd 100644 --- a/src/demo/qml/Pages/Controls/DateTimePicker.qml +++ b/src/demo/qml/Pages/Controls/DateTimePicker.qml @@ -15,7 +15,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls import "../.." as Components Components.StyledPage { diff --git a/src/demo/qml/Pages/Controls/DialogsPage.qml b/src/demo/qml/Pages/Controls/DialogsPage.qml index e46f581b..80daeeed 100644 --- a/src/demo/qml/Pages/Controls/DialogsPage.qml +++ b/src/demo/qml/Pages/Controls/DialogsPage.qml @@ -14,7 +14,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls Item { Column { diff --git a/src/demo/qml/Pages/Controls/ListItemPage.qml b/src/demo/qml/Pages/Controls/ListItemPage.qml index d8c4ded9..2004f333 100644 --- a/src/demo/qml/Pages/Controls/ListItemPage.qml +++ b/src/demo/qml/Pages/Controls/ListItemPage.qml @@ -14,7 +14,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import Fluid.Controls 1.0 +import Fluid.Controls 1.1 import "../.." Page { diff --git a/src/demo/qml/Pages/Controls/NavDrawerPage.qml b/src/demo/qml/Pages/Controls/NavDrawerPage.qml index 682ced8c..777c89df 100644 --- a/src/demo/qml/Pages/Controls/NavDrawerPage.qml +++ b/src/demo/qml/Pages/Controls/NavDrawerPage.qml @@ -14,7 +14,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import Fluid.Controls 1.0 +import Fluid.Controls 1.1 import "../.." Item { diff --git a/src/demo/qml/Pages/Controls/OverlayPage.qml b/src/demo/qml/Pages/Controls/OverlayPage.qml index aec25b16..e05a3771 100644 --- a/src/demo/qml/Pages/Controls/OverlayPage.qml +++ b/src/demo/qml/Pages/Controls/OverlayPage.qml @@ -14,7 +14,7 @@ import QtQuick 2.10 import QtQuick.Controls.Material 2.3 -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls Item { Image { diff --git a/src/demo/qml/Pages/Controls/Placeholder.qml b/src/demo/qml/Pages/Controls/Placeholder.qml index 32bdea09..7ee19f96 100644 --- a/src/demo/qml/Pages/Controls/Placeholder.qml +++ b/src/demo/qml/Pages/Controls/Placeholder.qml @@ -15,7 +15,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls import "../.." Flickable { diff --git a/src/demo/qml/Pages/Controls/Search.qml b/src/demo/qml/Pages/Controls/Search.qml index 009a4c22..d5d06e7c 100644 --- a/src/demo/qml/Pages/Controls/Search.qml +++ b/src/demo/qml/Pages/Controls/Search.qml @@ -15,7 +15,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls Item { FluidControls.SearchBar { diff --git a/src/demo/qml/Pages/Controls/SnackBarPage.qml b/src/demo/qml/Pages/Controls/SnackBarPage.qml index dec9a2f2..0bd9af43 100644 --- a/src/demo/qml/Pages/Controls/SnackBarPage.qml +++ b/src/demo/qml/Pages/Controls/SnackBarPage.qml @@ -14,7 +14,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls Item { Column { diff --git a/src/demo/qml/Pages/Controls/SubPage.qml b/src/demo/qml/Pages/Controls/SubPage.qml index 2aa9eab9..9e7ad19f 100644 --- a/src/demo/qml/Pages/Controls/SubPage.qml +++ b/src/demo/qml/Pages/Controls/SubPage.qml @@ -13,7 +13,7 @@ */ import QtQuick.Controls 2.3 -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls FluidControls.Page { title: "Sub page demo" diff --git a/src/demo/qml/Pages/Controls/TimePicker.qml b/src/demo/qml/Pages/Controls/TimePicker.qml index 1071e47c..689bcf37 100644 --- a/src/demo/qml/Pages/Controls/TimePicker.qml +++ b/src/demo/qml/Pages/Controls/TimePicker.qml @@ -15,7 +15,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls import "../.." as Components Components.StyledPage { diff --git a/src/demo/qml/Pages/Controls/WavePage.qml b/src/demo/qml/Pages/Controls/WavePage.qml index 51f8ff26..8c95e66f 100644 --- a/src/demo/qml/Pages/Controls/WavePage.qml +++ b/src/demo/qml/Pages/Controls/WavePage.qml @@ -15,7 +15,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls import "../.." Item { diff --git a/src/demo/qml/Pages/Style/IconsPage.qml b/src/demo/qml/Pages/Style/IconsPage.qml index 8bf6bdd9..90f70578 100644 --- a/src/demo/qml/Pages/Style/IconsPage.qml +++ b/src/demo/qml/Pages/Style/IconsPage.qml @@ -16,7 +16,7 @@ import QtQuick 2.10 import QtQuick.Layouts 1.3 import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls import Fluid.Layouts 1.0 as FluidLayouts import Fluid.Demo 1.0 as FluidDemo diff --git a/src/demo/qml/Pages/Style/PalettePage.qml b/src/demo/qml/Pages/Style/PalettePage.qml index ea030cc8..a63541a3 100644 --- a/src/demo/qml/Pages/Style/PalettePage.qml +++ b/src/demo/qml/Pages/Style/PalettePage.qml @@ -17,7 +17,7 @@ import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 import QtQuick.Layouts 1.3 import Fluid.Core 1.0 -import Fluid.Controls 1.0 +import Fluid.Controls 1.1 import "../.." Flickable { diff --git a/src/demo/qml/Pages/Style/PaletteSwatch.qml b/src/demo/qml/Pages/Style/PaletteSwatch.qml index e3129487..d53817e2 100644 --- a/src/demo/qml/Pages/Style/PaletteSwatch.qml +++ b/src/demo/qml/Pages/Style/PaletteSwatch.qml @@ -15,7 +15,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls import "../.." Column { diff --git a/src/demo/qml/Pages/Style/SystemIconsPage.qml b/src/demo/qml/Pages/Style/SystemIconsPage.qml index de5a139b..76f879e9 100644 --- a/src/demo/qml/Pages/Style/SystemIconsPage.qml +++ b/src/demo/qml/Pages/Style/SystemIconsPage.qml @@ -16,7 +16,7 @@ import QtQuick 2.10 import QtQuick.Layouts 1.3 import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls Page { header: Row { diff --git a/src/demo/qml/Pages/Style/TypographyPage.qml b/src/demo/qml/Pages/Style/TypographyPage.qml index 8153bfd4..8691c700 100644 --- a/src/demo/qml/Pages/Style/TypographyPage.qml +++ b/src/demo/qml/Pages/Style/TypographyPage.qml @@ -15,7 +15,7 @@ import QtQuick 2.10 import QtQuick.Layouts 1.3 import QtQuick.Controls 2.3 -import Fluid.Controls 1.0 +import Fluid.Controls 1.1 import "../.." Flickable { diff --git a/src/demo/qml/main.qml b/src/demo/qml/main.qml index 96f851b3..5a3aef17 100644 --- a/src/demo/qml/main.qml +++ b/src/demo/qml/main.qml @@ -19,7 +19,7 @@ import QtQuick.Controls.Material 2.3 import QtQuick.Controls.Universal 2.3 import QtQuick.Layouts 1.3 import Fluid.Core 1.0 as FluidCore -import Fluid.Controls 1.0 as FluidControls +import Fluid.Controls 1.1 as FluidControls FluidControls.ApplicationWindow { id: window diff --git a/src/imports/controls/AppBar.qml b/src/imports/controls/AppBar.qml index a38e543b..da05344a 100644 --- a/src/imports/controls/AppBar.qml +++ b/src/imports/controls/AppBar.qml @@ -21,121 +21,26 @@ import QtQuick.Layouts 1.3 import Fluid.Core 1.0 as FluidCore import Fluid.Controls 1.0 as FluidControls -/*! - \qmltype AppBar - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Application tool bar. - - For more information you can read the - \l{https://material.io/guidelines/layout/structure.html#structure-app-bar}{Material Design guidelines}. - */ QQC2.ToolBar { id: appBar Material.elevation: toolbar ? 0 : elevation - Material.background: toolbar ? toolbar.Material.background : backgroundColor Material.theme: toolbar ? toolbar.Material.theme : Material.Light - /*! - \qmlproperty Action leftAction - - The back action to display to the left of the title in the action bar. - When used with a page, this will pick up the page's back action, which - by default is a back arrow when there is a page behind the current page - on the page stack. However, you can customize this, for example, to show - a navigation drawer at the root of your app. - - When using an action bar in a page, set the \l Page::leftAction instead of - directly setting this property. - */ property FluidControls.Action leftAction - /*! - \qmlproperty list actions - - A list of actions to show in the action bar. These actions will be shown - anchored to the right, and will overflow if there are more than the - maximum number of actions as defined in \l maxActionCount. - - When used with a page, the actions will be set to the page's \l Page::actions - property, so set that instead of changing this directly. - */ property list actions - /*! - \qmlproperty int elevation - - The elevation of the action bar. Set to 0 if you want have a header or some - other view below the action bar that you want to appear as part of the action bar. - */ property int elevation: 2 - /*! - \qmlproperty color backgroundColor - - The background color of the tool bar when the AppBar's page is active. - By default this is the primary color defined in \l Material.primaryColor - */ - property color backgroundColor: appBar.Material.primaryColor - - /*! - \qmlproperty color decorationColor - - The background color of the window decoration when the AppBar's page is active, - usually a darker version of \l backgroundColor. - By default this is the primary color defined in \l Material.primaryColor with a - shade of \l Material.Shade700. - */ - property color decorationColor: Material.shade(backgroundColor, Material.Shade700) - - /*! - \internal - The size of the left icon and the action icons. - */ property int __iconSize: FluidCore.Device.gridUnit <= 48 ? 20 : 24 - /*! - \qmlproperty real leftKeyline - - Keyline to align contents to the left to be visually appealing. - */ property alias leftKeyline: titleLabel.x - /*! - \qmlproperty int maxActionCount - - The maximum number of actions that can be displayed before they spill over - into a drop-down menu. When using an action bar with a page, this inherits - from the global \l AppToolBar::maxActionCount. If you are using an action bar - for custom purposes outside of a toolbar, this defaults to \c 3. - - Set to \c 0 if you don't want to overflow actions. - */ property int maxActionCount: toolbar ? toolbar.maxActionCount : 3 - /*! - \qmlproperty string title - - The title displayed in the action bar. When used in a page, the title will - be set to the title of the page, so set the \l Page::title property instead - of changing this directly. - */ property alias title: titleLabel.text - /*! - \qmlproperty list customContent - - Custom content to show instead of the title. - */ - property alias customContent: customContentItem.data - - /*! - \qmlproperty AppToolBar toolbar - - Tool bar. - */ property FluidControls.AppToolBar toolbar implicitHeight: FluidCore.Device.gridUnit @@ -192,7 +97,6 @@ QQC2.ToolBar { textFormat: Text.PlainText color: Material.primaryTextColor elide: Text.ElideRight - visible: text !== "" && customContentItem.children.length === 0 } Row { @@ -292,18 +196,4 @@ QQC2.ToolBar { } } } - - Item { - id: customContentItem - - anchors.left: parent.left - anchors.right: actionsRow.left - anchors.leftMargin: 16 + (leftButton.showing ? FluidCore.Device.gridUnit - leftButton.margin : 0) - anchors.rightMargin: 16 - anchors.verticalCenter: actionsRow.verticalCenter - - height: appBar.height - - visible: children.length > 0 - } } diff --git a/src/imports/controls/AppBar11.qml b/src/imports/controls/AppBar11.qml new file mode 100644 index 00000000..228cf70a --- /dev/null +++ b/src/imports/controls/AppBar11.qml @@ -0,0 +1,221 @@ +/* + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * Copyright (C) 2018 Michael Spencer + * + * $BEGIN_LICENSE:MPL2$ + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * + * $END_LICENSE$ + */ + +import QtQml 2.2 +import QtQuick 2.10 +import QtQuick.Controls 2.3 as QQC2 +import QtQuick.Controls.Material 2.3 +import QtQuick.Layouts 1.3 +import Fluid.Core 1.0 as FluidCore +import Fluid.Controls 1.1 as FluidControls + +QQC2.ToolBar { + id: appBar + + Material.elevation: toolbar ? 0 : elevation + Material.background: toolbar ? toolbar.Material.background : backgroundColor + Material.theme: toolbar ? toolbar.Material.theme : Material.Light + + property FluidControls.Action leftAction + + property list actions + + property int elevation: 2 + + property int __iconSize: FluidCore.Device.gridUnit <= 48 ? 20 : 24 + + property color backgroundColor: appBar.Material.primaryColor + + property color decorationColor: Material.shade(backgroundColor, Material.Shade700) + + property alias leftKeyline: titleLabel.x + + property int maxActionCount: toolbar ? toolbar.maxActionCount : 3 + + property alias title: titleLabel.text + + property alias customContent: customContentItem.data + + property FluidControls.AppToolBar toolbar + + implicitHeight: FluidCore.Device.gridUnit + + FluidControls.ToolButton { + id: leftButton + + property bool showing: leftAction && leftAction.visible + property int margin: (width - 24)/2 + + QQC2.ToolTip.visible: QQC2.ToolTip.text != "" && (FluidCore.Device.isMobile ? pressed : hovered) + QQC2.ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval + QQC2.ToolTip.text: leftAction ? leftAction.toolTip : "" + + anchors { + verticalCenter: actionsRow.verticalCenter + left: parent.left + leftMargin: leftButton.showing ? 16 - leftButton.margin : -leftButton.width + } + + icon.width: appBar.__iconSize + icon.height: appBar.__iconSize + icon.name: leftAction ? leftAction.icon.name : "" + icon.source: leftAction ? leftAction.icon.source : "" + + Binding { + target: leftButton + property: "icon.color" + value: leftAction.icon.color + when: leftAction && leftAction.icon.color.a > 0 + } + + visible: leftAction && leftAction.visible + enabled: leftAction && leftAction.enabled + hoverAnimation: leftAction && leftAction.hoverAnimation + focusPolicy: Qt.TabFocus + onClicked: { + if (leftAction) + leftAction.triggered(leftButton) + } + } + + FluidControls.TitleLabel { + id: titleLabel + + anchors { + verticalCenter: actionsRow.verticalCenter + left: parent.left + right: actionsRow.left + leftMargin: 16 + (leftButton.showing ? FluidCore.Device.gridUnit - leftButton.margin : 0) + rightMargin: 16 + } + + textFormat: Text.PlainText + color: Material.primaryTextColor + elide: Text.ElideRight + visible: text !== "" && customContentItem.children.length === 0 + } + + Row { + id: actionsRow + + anchors { + right: parent.right + rightMargin: 16 - leftButton.margin + } + + height: appBar.height + + spacing: 24 - 2 * leftButton.margin + + Repeater { + model: appBar.actions.length > appBar.maxActionCount && appBar.maxActionCount > 0 + ? appBar.maxActionCount : appBar.actions.length + delegate: FluidControls.ToolButton { + id: actionButton + + QQC2.ToolTip.visible: QQC2.ToolTip.text !== "" && !overflowMenu.visible && (FluidCore.Device.isMobile ? pressed : hovered) + QQC2.ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval + QQC2.ToolTip.text: appBar.actions[index].toolTip + + anchors.verticalCenter: parent.verticalCenter + + icon.width: appBar.__iconSize + icon.height: appBar.__iconSize + icon.name: appBar.actions[index].icon.name + icon.source: appBar.actions[index].icon.source + + Binding { + target: actionButton + property: "icon.color" + value: appBar.actions[index].icon.color + when: appBar.actions[index].icon.color.a > 0 + } + + visible: appBar.actions[index].visible + enabled: appBar.actions[index].enabled + hoverAnimation: appBar.actions[index].hoverAnimation + focusPolicy: Qt.TabFocus + + onClicked: appBar.actions[index].triggered(actionButton) + } + } + + FluidControls.ToolButton { + id: overflowButton + + anchors.verticalCenter: parent.verticalCenter + + icon.width: appBar.__iconSize + icon.height: appBar.__iconSize + icon.source: FluidControls.Utils.iconUrl("navigation/more_vert") + + onClicked: overflowMenu.open() + + visible: appBar.actions.length > appBar.maxActionCount && appBar.maxActionCount > 0 + focusPolicy: Qt.TabFocus + + QQC2.Menu { + id: overflowMenu + + x: -width + overflowButton.width - overflowButton.rightPadding + y: overflowButton.topPadding + transformOrigin: QQC2.Menu.TopRight + + Instantiator { + model: appBar.actions.length > appBar.maxActionCount && appBar.maxActionCount > 0 + ? appBar.actions.length - appBar.maxActionCount : 0 + delegate: QQC2.MenuItem { + id: overflowMenuItem + + icon.width: appBar.__iconSize + icon.height: appBar.__iconSize + icon.name: appBar.actions[index + appBar.maxActionCount].icon.name + icon.source: appBar.actions[index + appBar.maxActionCount].icon.source + + Binding { + target: overflowMenuItem + property: "icon.color" + value: appBar.actions[index + appBar.maxActionCount].icon.color + when: appBar.actions[index + appBar.maxActionCount].icon.color.a > 0 + } + + text: appBar.actions[index + appBar.maxActionCount].text + + enabled: appBar.actions[index + appBar.maxActionCount].enabled + visible: appBar.actions[index + appBar.maxActionCount].visible + + onTriggered: appBar.actions[index + appBar.maxActionCount].triggered(overflowMenuItem) + } + onObjectAdded: overflowMenu.addItem(object) + onObjectRemoved: overflowMenu.removeItem(index) + } + } + } + } + + Item { + id: customContentItem + + anchors.left: parent.left + anchors.right: actionsRow.left + anchors.leftMargin: 16 + (leftButton.showing ? FluidCore.Device.gridUnit - leftButton.margin : 0) + anchors.rightMargin: 16 + anchors.verticalCenter: actionsRow.verticalCenter + + height: appBar.height + + visible: children.length > 0 + } +} diff --git a/src/imports/controls/AppToolBar.qml b/src/imports/controls/AppToolBar.qml index 31c2c12d..8b812be8 100644 --- a/src/imports/controls/AppToolBar.qml +++ b/src/imports/controls/AppToolBar.qml @@ -17,58 +17,28 @@ import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 import Fluid.Controls 1.0 as FluidControls -/*! - \qmltype AppToolBar - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Application tool bar. - */ ToolBar { id: toolbar Material.elevation: page ? page.appBar.elevation : 2 - Material.background: page ? page.appBar.backgroundColor : toolbar.Material.primaryColor - Material.theme: FluidControls.Color.isDarkColor(page ? page.appBar.backgroundColor : toolbar.Material.background) ? Material.Dark : Material.Light + Material.background: Material.primaryColor + Material.theme: FluidControls.Color.isDarkColor(Material.background) ? Material.Dark : Material.Light - /*! - \internal - */ property Page page - /*! - \qmlproperty int maxActionCount - - Maximum actions to be available on this tool bar. - */ property int maxActionCount: 3 - /*! - \qmlmethod void AppToolBar::pop(Page page) - - Pop the \l AppBar that belongs to \a page from the stack. - */ function pop(page) { stack.pop(page.appBar, StackView.PopTransition); toolbar.page = page; } - /*! - \qmlmethod void AppToolBar::push(Page page) - - Push the \l AppBar that belongs to \a page to the stack. - */ function push(page) { stack.push(page.appBar, {}, StackView.PushTransition); page.appBar.toolbar = toolbar; toolbar.page = page; } - /*! - \qmlmethod void AppToolBar::replace(Page page) - - Replace current \l AppBar with the one that belongs to \a page. - */ function replace(page) { stack.replace(page.appBar, {}, StackView.ReplaceTransition); page.appBar.toolbar = toolbar; diff --git a/src/imports/controls/AppToolBar11.qml b/src/imports/controls/AppToolBar11.qml new file mode 100644 index 00000000..e61d01ee --- /dev/null +++ b/src/imports/controls/AppToolBar11.qml @@ -0,0 +1,71 @@ +/* + * This file is part of Fluid. + * + * Copyright (C) 2018 Michael Spencer + * + * $BEGIN_LICENSE:MPL2$ + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * + * $END_LICENSE$ + */ + +import QtQuick 2.10 +import QtQuick.Controls 2.3 +import QtQuick.Controls.Material 2.3 +import Fluid.Controls 1.1 as FluidControls + +ToolBar { + id: toolbar + + Material.elevation: page ? page.appBar.elevation : 2 + Material.background: page ? page.appBar.backgroundColor : toolbar.Material.primaryColor + Material.theme: FluidControls.Color.isDarkColor(page ? page.appBar.backgroundColor : toolbar.Material.background) ? Material.Dark : Material.Light + + property Page page + + property int maxActionCount: 3 + + function pop(page) { + stack.pop(page.appBar, StackView.PopTransition); + toolbar.page = page; + } + + function push(page) { + stack.push(page.appBar, {}, StackView.PushTransition); + page.appBar.toolbar = toolbar; + toolbar.page = page; + } + + function replace(page) { + stack.replace(page.appBar, {}, StackView.ReplaceTransition); + page.appBar.toolbar = toolbar; + toolbar.page = page; + } + + StackView { + id: stack + + anchors.fill: parent + + popEnter: Transition { + NumberAnimation { property: "y"; from: 0.5 * -stack.height; to: 0; duration: 250; easing.type: Easing.OutCubic } + NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 250; easing.type: Easing.OutCubic } + } + popExit: Transition { + NumberAnimation { property: "y"; from: 0; to: 0.5 * stack.height; duration: 250; easing.type: Easing.OutCubic } + NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 250; easing.type: Easing.OutCubic } + } + + pushEnter: Transition { + NumberAnimation { property: "y"; from: 0.5 * stack.height; to: 0; duration: 250; easing.type: Easing.OutCubic } + NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 250; easing.type: Easing.OutCubic } + } + pushExit: Transition { + NumberAnimation { property: "y"; from: 0; to: 0.5 * -stack.height; duration: 250; easing.type: Easing.OutCubic } + NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 250; easing.type: Easing.OutCubic } + } + } +} diff --git a/src/imports/controls/ApplicationWindow.qml b/src/imports/controls/ApplicationWindow.qml index 5e24dbd2..65c6e6e6 100644 --- a/src/imports/controls/ApplicationWindow.qml +++ b/src/imports/controls/ApplicationWindow.qml @@ -1,6 +1,7 @@ /* * This file is part of Fluid. * + * Copyright (C) 2018 Pier Luigi Fiorini * Copyright (C) 2018 Michael Spencer * * $BEGIN_LICENSE:MPL2$ @@ -18,80 +19,17 @@ import QtQuick.Controls.Material 2.3 import Fluid.Controls 1.0 as FluidControls import Fluid.Controls.Private 1.0 as FluidControlsPrivate -/*! - \qmltype ApplicationWindow - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief A window that provides features commonly used for Material Design apps. - - This is normally what you should use as your root component. It provides a \l ToolBar and - \l PageStack to provide access to standard features used by Material Design applications. - - Here is a short working example of an application: - - \qml - import QtQuick 2.10 - import Fluid.Controls 1.0 as FluidControls - - FluidControls.ApplicationWindow { - title: "Application Name" - width: 1024 - height: 800 - visible: true - - initialPage: page - - FluidControls.Page { - id: page - title: "Page Title" - - Label { - anchors.centerIn: parent - text: "Hello World!" - } - } - } - \endqml -*/ ApplicationWindow { id: window - /*! - \qmlproperty color decorationColor - - The color of the status bar or window decorations, if the current - platform supports it. - */ property alias decorationColor: windowDecoration.color - /*! - \qmlproperty Theme decorationTheme - - Theme of the status bar or window decoration, if the current - platform supports it. - */ property alias decorationTheme: windowDecoration.theme - /*! - \qmlproperty AppToolBar appBar - - The tool bar for this application. - */ property alias appBar: appBar - /*! - \qmlproperty Page initialPage - - The initial page shown when the application starts. - */ property alias initialPage: pageStack.initialItem - /*! - \qmlproperty PageStack pageStack - - The \l PageStack used for controlling pages and transitions between pages. - */ property alias pageStack: pageStack header: FluidControls.AppToolBar { @@ -111,6 +49,6 @@ ApplicationWindow { FluidControlsPrivate.WindowDecoration { id: windowDecoration window: window - color: Material.shade(appBar ? appBar.Material.background : window.Material.primaryColor, Material.Shade700) + color: Material.shade(window.Material.primaryColor, Material.Shade700) } } diff --git a/src/imports/controls/ApplicationWindow11.qml b/src/imports/controls/ApplicationWindow11.qml new file mode 100644 index 00000000..8edb0b66 --- /dev/null +++ b/src/imports/controls/ApplicationWindow11.qml @@ -0,0 +1,54 @@ +/* + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * Copyright (C) 2018 Michael Spencer + * + * $BEGIN_LICENSE:MPL2$ + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * + * $END_LICENSE$ + */ + +import QtQuick 2.10 +import QtQuick.Controls 2.3 +import QtQuick.Controls.Material 2.3 +import Fluid.Controls 1.1 as FluidControls +import Fluid.Controls.Private 1.0 as FluidControlsPrivate + +ApplicationWindow { + id: window + + property alias decorationColor: windowDecoration.color + + property alias decorationTheme: windowDecoration.theme + + property alias appBar: appBar + + property alias initialPage: pageStack.initialItem + + property alias pageStack: pageStack + + header: FluidControls.AppToolBar { + id: appBar + } + + FluidControls.PageStack { + id: pageStack + + anchors.fill: parent + + onPushed: appBar.push(page) + onPopped: appBar.pop(page) + onReplaced: appBar.replace(page) + } + + FluidControlsPrivate.WindowDecoration { + id: windowDecoration + window: window + color: Material.shade(appBar ? appBar.Material.background : window.Material.primaryColor, Material.Shade700) + } +} diff --git a/src/imports/controls/Page.qml b/src/imports/controls/Page.qml index de731532..eedd6587 100644 --- a/src/imports/controls/Page.qml +++ b/src/imports/controls/Page.qml @@ -18,98 +18,19 @@ import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 import Fluid.Controls 1.0 as FluidControls -/*! - \qmltype Page - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Represents a page on the navigation page stack. - - Example: - - \qml - import QtQuick 2.10 - import Fluid.Controls 1.0 as FluidControls - - FluidControls.Page { - title: "Application Name" - - actions: [ - FluidControls.Action { - name: "Print" - - // Icon name from the Google Material Design icon pack - icon.source: FluidControls.Utils.iconUrl("action/print") - } - ] - } - \endqml - */ Page { id: page - /*! - \qmlproperty ActionBar actionBar - - The action bar for this page. Use it as a group property to customize - this page's action bar. See the \l Page example for details on how to use - this property. - */ property alias appBar: appBar - /*! - The page's actions shown in the action bar. - */ property alias actions: appBar.actions - /*! - The action shown to the left of the title in the action bar. By default, - this is a back button which shows when there is a page behind the current - page in the page stack. However, you can replace it with your own action, - for example, an icon to open a navigation drawer when on your root page. - */ property alias leftAction: appBar.leftAction - /*! - \qmlproperty list customContent - - Custom content to show instead of the title. - */ - property alias customContent: appBar.customContent - - /*! - \internal - Set by the page stack to true if there is a page behind this page on the - page stack. - */ property bool canGoBack: false - /*! - \qmlsignal void goBack(var event) - - This signal is emitted when the back action is triggered or back key is released. - - By default, the page will be popped from the page stack. To change the default - behavior, for example to show a confirmation dialog, listen for this signal using - \c onGoBack and set \c event.accepted to \c true. To dismiss the page from your - dialog without triggering this signal and re-showing the dialog, call - \c page.forcePop(). - */ signal goBack(var event) - /*! - \qmlmethod void Page::pop(event event, bool force) - - Pop this page from the page stack. This does nothing if this page is not - the current page on the page stack. - - Use \c force to avoid calling the \l goBack signal. This is useful if you - use the \l goBack signal to show a confirmation dialog, and want to close - the page from your dialog without showing the dialog again. You can also - use \l Page::forcePop() as a shortcut to this behavior. - - \sa Page::forcePop() - */ function pop(event, force) { if (StackView.view.currentItem !== page) return false @@ -127,22 +48,10 @@ Page { } } - /*! - \qmlmethod void Page::forcePop() - - Force a pop from the page stack. - */ function forcePop() { pop(null, true) } - /*! - \qmlmethod void Page::push(Component component, object properties) - - Push the specified component onto the page stack. - - \sa StackView::push() - */ function push(component, properties) { return StackView.view.push(component, properties); } diff --git a/src/imports/controls/Page11.qml b/src/imports/controls/Page11.qml new file mode 100644 index 00000000..218bde25 --- /dev/null +++ b/src/imports/controls/Page11.qml @@ -0,0 +1,89 @@ +/* + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * Copyright (C) 2018 Michael Spencer + * + * $BEGIN_LICENSE:MPL2$ + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * + * $END_LICENSE$ + */ + +import QtQuick 2.10 +import QtQuick.Controls 2.3 +import QtQuick.Controls.Material 2.3 +import Fluid.Controls 1.1 as FluidControls + +Page { + id: page + + property alias appBar: appBar + + property alias actions: appBar.actions + + property alias leftAction: appBar.leftAction + + property bool canGoBack: false + + property alias customContent: appBar.customContent + + signal goBack(var event) + + function pop(event, force) { + if (StackView.view.currentItem !== page) + return false + + if (!event) + event = {accepted: false} + + if (!force) + goBack(event) + + if (event.accepted) { + return true + } else { + return StackView.view.pop() + } + } + + function forcePop() { + pop(null, true) + } + + function push(component, properties) { + return StackView.view.push(component, properties); + } + + Keys.onReleased: { + // catches the Android back button event and pops the page, if it isn't the top page + if (event.key === Qt.Key_Back && StackView.view.depth > 1) { + pop(event, false); + event.accepted = true; + } + } + + header: null + footer: null + + FluidControls.AppBar { + id: appBar + + Material.elevation: 0 + + title: page.title + + leftAction: FluidControls.Action { + icon.source: FluidControls.Utils.iconUrl("navigation/arrow_back") + + text: qsTr("Back") + toolTip: qsTr("Go back") + visible: page.canGoBack + + onTriggered: page.pop() + } + } +} diff --git a/src/imports/controls/SearchBar.qml b/src/imports/controls/SearchBar.qml index 3b9deff5..c8621c81 100644 --- a/src/imports/controls/SearchBar.qml +++ b/src/imports/controls/SearchBar.qml @@ -18,101 +18,38 @@ import QtQuick.Controls.Material 2.3 import QtQuick.Layouts 1.3 import Fluid.Controls 1.0 as FluidControls -/*! - \qmltype SearchBar - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Provides a searchbar, that supports autocompletion and displays search results using cards. -*/ Item { id: searchBar - /*! - \qmlproperty string searchText - - The current search text in the search bar typed in so far. - */ property alias searchText: searchTextField.text - /*! - \qmlproperty any model - - The suggestions to display. - - \sa SearchBar::suggestionTextRole - \sa SearchBar::suggestionDelegate - */ property alias searchSuggestions: suggestionsListView.model - /*! - The delegate item for the suggestion list view. - \sa searchSuggestions - */ property alias suggestionDelegate: suggestionsListView.delegate - /*! - The model type that contains the text to display in the suggestion delegate - \sa searchSuggestions - */ property string suggestionTextRole: "text" - /*! - The string to display when the search field is empty - */ property string searchPlaceHolder: qsTr("Search") - /*! - The width of the search card. By default the search bar centers in the parent with a margin of 64 each side - */ property int cardWidth: searchBar.width - Units.largeSpacing - /*! - The viewable area of the suggestions list until it begins scrolling. - */ property int suggestionsHeight: 300 - /*! - The background color of the expanded search bar. - */ property color waveColor: Material.accentColor - /*! - Whether the SearchBar is persistent or expandable - */ property bool persistent: false - /*! - Whether the SearchBar is currently open - */ readonly property alias expanded: searchWave.open - /*! - The font of text in search TextInput box - */ - property alias searchTextFont : searchTextField.font - - /*! - The model containing the search results - */ property var searchResults: ListModel {} - /*! - Is emitted, when the user searches for a query. The \a query parameter contains the search query as string. Use this signal to provide search results. - */ signal search(string query) - /*! - Opens the search bar - */ function open() { searchWave.openWave(openSearchButton.x, openSearchButton.y); searchTextField.forceActiveFocus(); } - /*! - Closes the search bar - */ function close() { if (persistent) diff --git a/src/imports/controls/SearchBar11.qml b/src/imports/controls/SearchBar11.qml new file mode 100644 index 00000000..a912c6ba --- /dev/null +++ b/src/imports/controls/SearchBar11.qml @@ -0,0 +1,196 @@ +/* + * This file is part of Fluid. + * + * Copyright (C) 2018 Magnus Groß + * + * $BEGIN_LICENSE:MPL2$ + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * + * $END_LICENSE$ + */ + +import QtQuick 2.10 +import QtQuick.Controls 2.3 +import QtQuick.Controls.Material 2.3 +import QtQuick.Layouts 1.3 +import Fluid.Controls 1.1 as FluidControls + +Item { + id: searchBar + + property alias searchText: searchTextField.text + + property alias searchSuggestions: suggestionsListView.model + + property alias suggestionDelegate: suggestionsListView.delegate + + property string suggestionTextRole: "text" + + property string searchPlaceHolder: qsTr("Search") + + property int cardWidth: searchBar.width - Units.largeSpacing + + property int suggestionsHeight: 300 + + property color waveColor: Material.accentColor + + property bool persistent: false + + readonly property alias expanded: searchWave.open + + property alias searchTextFont: searchTextField.font + + property var searchResults: ListModel {} + + signal search(string query) + + function open() { + searchWave.openWave(openSearchButton.x, openSearchButton.y); + searchTextField.forceActiveFocus(); + } + + function close() { + + if (persistent) + return; + + searchWave.closeWave(searchWave.initialX, searchWave.initialY); + searchSuggestions.clear(); + searchResults.clear(); + searchTextField.focus = false; + } + + anchors {left: parent.left; right: parent.right; top: parent.top} + height: 64 + + Item { + anchors.fill: parent + FluidControls.ToolButton { + id: openSearchButton + + anchors.right: parent.right + anchors.top: parent.top + anchors.margins: 8 + + icon.source: FluidControls.Utils.iconUrl("action/search") + + onClicked: open() + } + + FluidControls.Wave { + id: searchWave + anchors.fill: parent + size: persistent ? diameter : 0 + visible: persistent + Rectangle { + anchors.fill: parent + color: waveColor + } + FluidControls.Card { + id: searchCard + anchors.top: parent.top + anchors.left: parent.left + anchors.margins: Units.smallSpacing + width: cardWidth + height: openSearchButton.height + FluidControls.ToolButton { + id: dismissSearchButton + icon.source: FluidControls.Utils.iconUrl(persistent ? "action/search" : "navigation/arrow_back") + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + rotation: persistent ? 0 : searchWave.open ? 0 : 180 + onClicked: { + if (persistent) + search(searchTextField.text); + else + close(); + } + + Behavior on rotation { + NumberAnimation { + easing.type: Easing.InOutCubic + duration: 150 + } + } + } + TextInput { + id: searchTextField + anchors.verticalCenter: parent.verticalCenter + anchors.left: dismissSearchButton.right + anchors.right: resetSearchButton.left + font.pixelSize: parent.height/2 + Keys.onReturnPressed: search(text) + Keys.onEscapePressed: { + if (!persistent) + close(); + } + Keys.onDownPressed: suggestionsListView.forceActiveFocus() + onTextChanged: { + searchResults.clear(); + searchSuggestions.clear(); + } + inputMethodHints: Qt.ImhNoPredictiveText + } + Label { + text: searchPlaceHolder + visible: searchTextField.displayText === "" + anchors.fill: searchTextField + verticalAlignment: Label.AlignVCenter + font.pixelSize: searchTextField.font.pixelSize + color: Material.color(Material.Grey, Material.Shade400) + } + + FluidControls.ToolButton { + id: resetSearchButton + opacity: searchTextField.displayText !== "" + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.right: parent.right + icon.source: FluidControls.Utils.iconUrl("navigation/close") + rotation: opacity*90 + onClicked: { + searchTextField.clear(); + searchTextField.forceActiveFocus(); + } + Behavior on opacity { + NumberAnimation { + easing.type: Easing.InOutCubic + duration: 200 + } + } + } + } + } + } + ListView { + id: suggestionsListView + visible: searchResults.count === 0 && searchSuggestions.count !== 0 + anchors.top: parent.bottom + x: searchCard.x + width: cardWidth + height: suggestionsHeight + model: ListModel {} + clip: true + Keys.onUpPressed: { + if (currentIndex == 0) { + searchTextField.forceActiveFocus(); + } else { + decrementCurrentIndex(); + } + } + delegate: ListItem { + text: model[suggestionTextRole] + highlighted: suggestionsListView.focus === true && suggestionsListView.currentIndex === index + function autoComplete() { + searchTextField.text = this.text; + searchTextField.forceActiveFocus(); + } + Keys.onReturnPressed: autoComplete(); + onClicked: autoComplete(); + icon.source: FluidControls.Utils.iconUrl("action/search") + } + } +} diff --git a/src/imports/controls/controls.qbs b/src/imports/controls/controls.qbs index 303a8c4f..bf7aa974 100644 --- a/src/imports/controls/controls.qbs +++ b/src/imports/controls/controls.qbs @@ -27,6 +27,8 @@ LiriQmlPlugin { Group { name: "QML" files: ["qmldir", "*.qml", "*.qmltypes"] + qbs.install: true + qbs.installDir: FileInfo.joinPaths(lirideployment.qmlDir, pluginPath) } Group { diff --git a/src/imports/controls/qmldir b/src/imports/controls/qmldir index 60f0a271..ef1803f9 100644 --- a/src/imports/controls/qmldir +++ b/src/imports/controls/qmldir @@ -5,6 +5,7 @@ depends QtQuick.Controls 2.0 depends Fluid.Templates 1.0 typeinfo plugins.qmltypes +# 1.0 AbstractCard 1.0 AbstractCard.qml Action 1.0 Action.qml AlertDialog 1.0 AlertDialog.qml @@ -55,3 +56,10 @@ TitleLabel 1.0 TitleLabel.qml ToolButton 1.0 ToolButton.qml singleton Units 1.0 Units.qml Wave 1.0 Wave.qml + +# 1.1 +ApplicationWindow 1.1 ApplicationWindow11.qml +AppToolBar 1.1 AppToolBar11.qml +AppBar 1.1 AppBar11.qml +Page 1.1 Page11.qml +SearchBar 1.1 SearchBar11.qml From bf3cf8777cd5443fffd3ef4609f33f53df90cf30 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Thu, 3 May 2018 07:06:52 +0200 Subject: [PATCH 27/74] Animate AppBar and decoration colors changes --- src/imports/controls/AppBar11.qml | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/imports/controls/AppBar11.qml b/src/imports/controls/AppBar11.qml index 228cf70a..01d81893 100644 --- a/src/imports/controls/AppBar11.qml +++ b/src/imports/controls/AppBar11.qml @@ -52,6 +52,14 @@ QQC2.ToolBar { implicitHeight: FluidCore.Device.gridUnit + Behavior on backgroundColor { + ColorAnimation { duration: FluidControls.Units.mediumDuration } + } + + Behavior on decorationColor { + ColorAnimation { duration: FluidControls.Units.mediumDuration } + } + FluidControls.ToolButton { id: leftButton From 8d36d9ac4984b31b7f57d31a485aa928d7bf5467 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Fri, 4 May 2018 03:12:57 +0200 Subject: [PATCH 28/74] Fix NavigationDrawer height Closes: #232 --- src/imports/controls/NavigationDrawer.qml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/imports/controls/NavigationDrawer.qml b/src/imports/controls/NavigationDrawer.qml index f2b16f31..d062782c 100644 --- a/src/imports/controls/NavigationDrawer.qml +++ b/src/imports/controls/NavigationDrawer.qml @@ -112,11 +112,11 @@ Drawer { height: { if (ApplicationWindow) return (ApplicationWindow.header ? ApplicationWindow.header.height : 0) + - (ApplicationWindow.contentItem ? ApplicationWindow.contentItem.height : 0); + (ApplicationWindow.contentItem ? ApplicationWindow.contentItem.height : 0) - y; else if (Window) - return Window.contentItem; + return Window.contentItem - y; else - return parent.height; + return parent.height - y; } modal: FluidCore.Device.isMobile From 4f35e336d4f3f54644078f0d17343b1ab2810ee2 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Fri, 4 May 2018 03:16:55 +0200 Subject: [PATCH 29/74] AppBar extended content Now it's possible to add content under the row containing the title and actions. [ChangeLog][Controls][AppBar] Add extendedContent property to add components under the row containing the title and actions. [ChangeLog][Controls][AppBar] Add extendedContentHeight property that holds the height of the extended content. [ChangeLog][Controls][AppToolBar] Add appBarHeight property that holds the calculated height of the AppBar considering its extended content. Closes: #235 --- doc/src/controls/AppBar.qdoc | 19 +++++++++++++++++++ doc/src/controls/AppToolBar.qdoc | 6 ++++++ src/imports/controls/AppBar11.qml | 20 +++++++++++++++++--- src/imports/controls/AppToolBar11.qml | 11 +++++++++++ 4 files changed, 53 insertions(+), 3 deletions(-) diff --git a/doc/src/controls/AppBar.qdoc b/doc/src/controls/AppBar.qdoc index 97ece772..194f5697 100644 --- a/doc/src/controls/AppBar.qdoc +++ b/doc/src/controls/AppBar.qdoc @@ -111,6 +111,25 @@ \since Fluid.Controls 1.1 */ +/*! + \qmlproperty list AppBar::extendedContent + + A custom view to show under the row containing the title and actions. + Causes the action bar to be extend in height to contain this view. + + \since Fluid.Controls 1.1 +*/ + +/*! + \qmlproperty real AppBar::extendedContentHeight + \readonly + + The height of the custom view shown under the row containing the + title and actions. + + \since Fluid.Controls 1.1 +*/ + /*! \qmlproperty AppToolBar AppBar::toolbar diff --git a/doc/src/controls/AppToolBar.qdoc b/doc/src/controls/AppToolBar.qdoc index dcdac373..1e96e84b 100644 --- a/doc/src/controls/AppToolBar.qdoc +++ b/doc/src/controls/AppToolBar.qdoc @@ -30,6 +30,12 @@ Maximum actions to be available on this tool bar. */ +/*! + \qmlproperty real AppToolBar::appBarHeight + + Height of the \l AppBar considering its extended content. +*/ + /*! \qmlmethod void AppToolBar::pop(Page page) diff --git a/src/imports/controls/AppBar11.qml b/src/imports/controls/AppBar11.qml index 01d81893..63646bcc 100644 --- a/src/imports/controls/AppBar11.qml +++ b/src/imports/controls/AppBar11.qml @@ -47,6 +47,9 @@ QQC2.ToolBar { property alias title: titleLabel.text property alias customContent: customContentItem.data + property alias extendedContent: extendedContentItem.data + + readonly property alias extendedContentHeight: extendedContentItem.height property FluidControls.AppToolBar toolbar @@ -123,8 +126,6 @@ QQC2.ToolBar { rightMargin: 16 - leftButton.margin } - height: appBar.height - spacing: 24 - 2 * leftButton.margin Repeater { @@ -222,7 +223,20 @@ QQC2.ToolBar { anchors.rightMargin: 16 anchors.verticalCenter: actionsRow.verticalCenter - height: appBar.height + height: parent.height + + visible: children.length > 0 + } + + Item { + id: extendedContentItem + + anchors.left: titleLabel.left + anchors.top: actionsRow.bottom + anchors.right: actionsRow.right + anchors.rightMargin: 16 + + height: childrenRect.height visible: children.length > 0 } diff --git a/src/imports/controls/AppToolBar11.qml b/src/imports/controls/AppToolBar11.qml index e61d01ee..c27236c9 100644 --- a/src/imports/controls/AppToolBar11.qml +++ b/src/imports/controls/AppToolBar11.qml @@ -28,6 +28,17 @@ ToolBar { property int maxActionCount: 3 + property real appBarHeight: { + if (!page || !page.appBar || !page.appBar.visible) + return 0; + + var height = implicitHeight + page.appBar.extendedContentHeight; + + return height; + } + + height: appBarHeight + function pop(page) { stack.pop(page.appBar, StackView.PopTransition); toolbar.page = page; From ee93190d6a190c2c2d5d8ac651c49c216a79f209 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 5 May 2018 03:56:13 +0200 Subject: [PATCH 30/74] Set shortcut to go back action Standard shortcut to go back. [ChangeLog][Controls][Page] Assign standard shortcut to go back. --- src/imports/controls/Page.qml | 1 + src/imports/controls/Page11.qml | 1 + 2 files changed, 2 insertions(+) diff --git a/src/imports/controls/Page.qml b/src/imports/controls/Page.qml index eedd6587..ad4b39e0 100644 --- a/src/imports/controls/Page.qml +++ b/src/imports/controls/Page.qml @@ -79,6 +79,7 @@ Page { text: qsTr("Back") toolTip: qsTr("Go back") + shortcut: StandardKey.Back visible: page.canGoBack onTriggered: page.pop() diff --git a/src/imports/controls/Page11.qml b/src/imports/controls/Page11.qml index 218bde25..2e3c620a 100644 --- a/src/imports/controls/Page11.qml +++ b/src/imports/controls/Page11.qml @@ -81,6 +81,7 @@ Page { text: qsTr("Back") toolTip: qsTr("Go back") + shortcut: StandardKey.Back visible: page.canGoBack onTriggered: page.pop() From 767d8bbd08ffb8b16a0ba03936d17dfa831f70f1 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 5 May 2018 04:03:22 +0200 Subject: [PATCH 31/74] Clean up Page Add semicolon at the end. --- src/imports/controls/Page.qml | 14 +++++++------- src/imports/controls/Page11.qml | 14 +++++++------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/imports/controls/Page.qml b/src/imports/controls/Page.qml index ad4b39e0..b0491e00 100644 --- a/src/imports/controls/Page.qml +++ b/src/imports/controls/Page.qml @@ -33,23 +33,23 @@ Page { function pop(event, force) { if (StackView.view.currentItem !== page) - return false + return false; if (!event) - event = {accepted: false} + event = {accepted: false}; if (!force) - goBack(event) + goBack(event); if (event.accepted) { - return true + return true; } else { - return StackView.view.pop() + return StackView.view.pop(); } } function forcePop() { - pop(null, true) + pop(null, true); } function push(component, properties) { @@ -57,7 +57,7 @@ Page { } Keys.onReleased: { - // catches the Android back button event and pops the page, if it isn't the top page + // Catches the Android back button event and pops the page, if it isn't the top page if (event.key === Qt.Key_Back && StackView.view.depth > 1) { pop(event, false); event.accepted = true; diff --git a/src/imports/controls/Page11.qml b/src/imports/controls/Page11.qml index 2e3c620a..874ae44d 100644 --- a/src/imports/controls/Page11.qml +++ b/src/imports/controls/Page11.qml @@ -35,23 +35,23 @@ Page { function pop(event, force) { if (StackView.view.currentItem !== page) - return false + return false; if (!event) - event = {accepted: false} + event = {accepted: false}; if (!force) - goBack(event) + goBack(event); if (event.accepted) { - return true + return true; } else { - return StackView.view.pop() + return StackView.view.pop(); } } function forcePop() { - pop(null, true) + pop(null, true); } function push(component, properties) { @@ -59,7 +59,7 @@ Page { } Keys.onReleased: { - // catches the Android back button event and pops the page, if it isn't the top page + // Catches the Android back button event and pops the page, if it isn't the top page if (event.key === Qt.Key_Back && StackView.view.depth > 1) { pop(event, false); event.accepted = true; From 49b764b2b1378b18b48b950a0ba82499aa687e0d Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 5 May 2018 10:23:05 +0200 Subject: [PATCH 32/74] Add PageSidebar Page with a sidebar on the right edge, with its own title, actions and color. [ChangeLog][Controls] Add new type PageSidebar, a page with a sidebar on the right, with its own title, actions and color. Closes: #121 --- doc/src/controls/Page.qdoc | 9 ++++ doc/src/controls/PageSidebar.qdoc | 26 ++++++++++ src/imports/controls/AppToolBar11.qml | 75 ++++++++++++++++++++++++++- src/imports/controls/Page11.qml | 32 ++++++++++++ src/imports/controls/PageSidebar.qml | 46 ++++++++++++++++ src/imports/controls/qmldir | 1 + 6 files changed, 188 insertions(+), 1 deletion(-) create mode 100644 doc/src/controls/PageSidebar.qdoc create mode 100644 src/imports/controls/PageSidebar.qml diff --git a/doc/src/controls/Page.qdoc b/doc/src/controls/Page.qdoc index 32f4252a..7ed2e5e1 100644 --- a/doc/src/controls/Page.qdoc +++ b/doc/src/controls/Page.qdoc @@ -84,6 +84,15 @@ \since Fluid.Controls 1.1 */ +/*! + \qmlproperty PageSidebar rightSidebar + + A sidebar to show on the right of the page. This will have its own + app bar and title, which will split the toolbar into two app bars. + + \since Fluid.Controls 1.1 +*/ + /*! \qmlsignal void Page::goBack(var event) diff --git a/doc/src/controls/PageSidebar.qdoc b/doc/src/controls/PageSidebar.qdoc new file mode 100644 index 00000000..9ed01009 --- /dev/null +++ b/doc/src/controls/PageSidebar.qdoc @@ -0,0 +1,26 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * Copyright (C) 2018 Michael Spencer + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype PageSidebar + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Represents a split sidebar in a page, with its own title, actions, and color + in the app bar. +*/ diff --git a/src/imports/controls/AppToolBar11.qml b/src/imports/controls/AppToolBar11.qml index c27236c9..8f488285 100644 --- a/src/imports/controls/AppToolBar11.qml +++ b/src/imports/controls/AppToolBar11.qml @@ -34,32 +34,67 @@ ToolBar { var height = implicitHeight + page.appBar.extendedContentHeight; + if (page.rightSidebar && page.rightSidebar.showing) { + var sidebarHeight = implicitHeight + page.rightSidebar.appBar.extendedContentHeight; + height = Math.max(height, sidebarHeight); + } + return height; } height: appBarHeight + Behavior on height { + NumberAnimation { duration: FluidControls.Units.mediumDuration } + } + function pop(page) { stack.pop(page.appBar, StackView.PopTransition); + + if (page.rightSidebar && page.rightSidebar.appBar) + rightSidebarStack.pop(page.rightSidebar.appBar); + else + rightSidebarStack.pop(emptyRightSidebar); + toolbar.page = page; } function push(page) { stack.push(page.appBar, {}, StackView.PushTransition); + page.appBar.toolbar = toolbar; toolbar.page = page; + + if (page.rightSidebar && page.rightSidebar.appBar) + rightSidebarStack.replace(page.rightSidebar.appBar); + else + rightSidebarStack.replace(emptyRightSidebar); } function replace(page) { stack.replace(page.appBar, {}, StackView.ReplaceTransition); + page.appBar.toolbar = toolbar; toolbar.page = page; + + if (page.rightSidebar && page.rightSidebar.appBar) + rightSidebarStack.replace(page.rightSidebar.appBar); + else + rightSidebarStack.replace(emptyRightSidebar); } StackView { id: stack - anchors.fill: parent + anchors.left: parent.left + anchors.right: page && page.rightSidebar ? rightSidebarStack.left : parent.right + anchors.rightMargin: 0 + + height: appBarHeight + + Behavior on height { + NumberAnimation { duration: FluidControls.Units.mediumDuration } + } popEnter: Transition { NumberAnimation { property: "y"; from: 0.5 * -stack.height; to: 0; duration: 250; easing.type: Easing.OutCubic } @@ -79,4 +114,42 @@ ToolBar { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 250; easing.type: Easing.OutCubic } } } + + StackView { + id: rightSidebarStack + + anchors.right: parent.right + anchors.rightMargin: page && page.rightSidebar ? page.rightSidebar.anchors.rightMargin : 0 + + width: page && page.rightSidebar ? page.rightSidebar.width : 0 + height: appBarHeight + + Behavior on height { + NumberAnimation { duration: FluidControls.Units.mediumDuration } + } + + popEnter: Transition { + NumberAnimation { property: "y"; from: 0.5 * -stack.height; to: 0; duration: 250; easing.type: Easing.OutCubic } + NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 250; easing.type: Easing.OutCubic } + } + popExit: Transition { + NumberAnimation { property: "y"; from: 0; to: 0.5 * stack.height; duration: 250; easing.type: Easing.OutCubic } + NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 250; easing.type: Easing.OutCubic } + } + + pushEnter: Transition { + NumberAnimation { property: "y"; from: 0.5 * stack.height; to: 0; duration: 250; easing.type: Easing.OutCubic } + NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 250; easing.type: Easing.OutCubic } + } + pushExit: Transition { + NumberAnimation { property: "y"; from: 0; to: 0.5 * -stack.height; duration: 250; easing.type: Easing.OutCubic } + NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 250; easing.type: Easing.OutCubic } + } + } + + Component { + id: emptyRightSidebar + + Item {} + } } diff --git a/src/imports/controls/Page11.qml b/src/imports/controls/Page11.qml index 874ae44d..24c41530 100644 --- a/src/imports/controls/Page11.qml +++ b/src/imports/controls/Page11.qml @@ -21,6 +21,8 @@ import Fluid.Controls 1.1 as FluidControls Page { id: page + default property alias data: content.data + property alias appBar: appBar property alias actions: appBar.actions @@ -31,8 +33,15 @@ Page { property alias customContent: appBar.customContent + property Item rightSidebar: null + signal goBack(var event) + onRightSidebarChanged: { + if (rightSidebar) + rightSidebar.edge = Qt.RightEdge; + } + function pop(event, force) { if (StackView.view.currentItem !== page) return false; @@ -87,4 +96,27 @@ Page { onTriggered: page.pop() } } + + Item { + id: content + + anchors.left: parent.left + anchors.top: parent.top + anchors.right: rightSidebarContent.left + anchors.bottom: parent.bottom + } + + Item { + id: rightSidebarContent + + anchors.top: parent.top + anchors.right: parent.right + anchors.bottom: parent.bottom + + children: [rightSidebar] + + width: rightSidebar + ? rightSidebar.width + rightSidebar.anchors.rightMargin + : 0 + } } diff --git a/src/imports/controls/PageSidebar.qml b/src/imports/controls/PageSidebar.qml new file mode 100644 index 00000000..0d491cfe --- /dev/null +++ b/src/imports/controls/PageSidebar.qml @@ -0,0 +1,46 @@ +/* + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * Copyright (C) 2018 Michael Spencer + * + * $BEGIN_LICENSE:MPL2$ + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * + * $END_LICENSE$ + */ + +import QtQuick 2.10 +import QtQuick.Controls 2.3 +import Fluid.Controls 1.1 as FluidControls + +FluidControls.Page { + id: pageSidebar + + default property alias sidebar: sidebar.data + + property alias edge: sidebar.edge + property bool showing: true + + anchors.rightMargin: showing ? 0 : -width + + height: parent.height + + Behavior on anchors.rightMargin { + id: behavior + enabled: false + + NumberAnimation { duration: FluidControls.Units.mediumDuration } + } + + FluidControls.Sidebar { + id: sidebar + + anchors.fill: parent + } + + Component.onCompleted: behavior.enabled = true +} diff --git a/src/imports/controls/qmldir b/src/imports/controls/qmldir index ef1803f9..12d0119f 100644 --- a/src/imports/controls/qmldir +++ b/src/imports/controls/qmldir @@ -62,4 +62,5 @@ ApplicationWindow 1.1 ApplicationWindow11.qml AppToolBar 1.1 AppToolBar11.qml AppBar 1.1 AppBar11.qml Page 1.1 Page11.qml +PageSidebar 1.1 PageSidebar.qml SearchBar 1.1 SearchBar11.qml From b75e3b0188339777ef140c376f112f52b1dc222b Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 5 May 2018 10:34:53 +0200 Subject: [PATCH 33/74] Fix theme Change Material.theme based on whether the background is dark or light. --- src/imports/controls/AppBar11.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/imports/controls/AppBar11.qml b/src/imports/controls/AppBar11.qml index 63646bcc..983f84a9 100644 --- a/src/imports/controls/AppBar11.qml +++ b/src/imports/controls/AppBar11.qml @@ -26,7 +26,7 @@ QQC2.ToolBar { Material.elevation: toolbar ? 0 : elevation Material.background: toolbar ? toolbar.Material.background : backgroundColor - Material.theme: toolbar ? toolbar.Material.theme : Material.Light + Material.theme: FluidControls.Color.isDarkColor(Material.background) ? Material.Dark : Material.Light property FluidControls.Action leftAction From 9d6bfc406b40fa1a8da7790139b503f51b8275fe Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Wed, 2 May 2018 08:10:42 +0200 Subject: [PATCH 34/74] Update plugins.qmltypes --- src/imports/controls-private/plugins.qmltypes | 94 +-- src/imports/controls/plugins.qmltypes | 76 +-- src/imports/core/plugins.qmltypes | 2 +- src/imports/effects/plugins.qmltypes | 2 +- src/imports/layouts/plugins.qmltypes | 2 +- src/imports/templates/plugins.qmltypes | 643 +++++++++++++++++- 6 files changed, 729 insertions(+), 90 deletions(-) diff --git a/src/imports/controls-private/plugins.qmltypes b/src/imports/controls-private/plugins.qmltypes index 3a25d311..826c95a9 100644 --- a/src/imports/controls-private/plugins.qmltypes +++ b/src/imports/controls-private/plugins.qmltypes @@ -4,11 +4,11 @@ import QtQuick.tooling 1.2 // It is used for QML tooling purposes only. // // This file was auto-generated by: -// 'qmlplugindump -noinstantiate -notrelocatable Fluid.Controls.Private 1.0' +// 'qmlplugindump-qt5 -v -noinstantiate -notrelocatable Fluid.Controls.Private 1.0' Module { dependencies: [ - "Fluid.Controls 1.0", + "Fluid.Controls 1.1", "Fluid.Core 1.0", "Fluid.Effects 1.0", "Fluid.Layouts 1.0", @@ -147,17 +147,6 @@ Module { isComposite: true defaultProperty: "data" } - Component { - prototype: "QQuickRectangle" - name: "QtQuick.Controls.Fusion.impl/CheckIndicator 2.3" - exports: ["QtQuick.Controls.Fusion.impl/CheckIndicator 2.3"] - exportMetaObjectRevisions: [3] - isComposite: true - defaultProperty: "data" - Property { name: "control"; type: "QQuickItem"; isPointer: true } - Property { name: "pressedColor"; type: "QColor"; isReadonly: true } - Property { name: "checkMarkColor"; type: "QColor"; isReadonly: true } - } Component { prototype: "QQuickRectangle" name: "QtQuick.Controls.Material.impl/CheckIndicator 2.0" @@ -177,6 +166,17 @@ Module { Property { name: "control"; type: "QQuickItem"; isPointer: true } Property { name: "partiallyChecked"; type: "bool"; isReadonly: true } } + Component { + prototype: "QQuickRectangle" + name: "QtQuick.Controls.Fusion.impl/CheckIndicator 2.3" + exports: ["QtQuick.Controls.Fusion.impl/CheckIndicator 2.3"] + exportMetaObjectRevisions: [3] + isComposite: true + defaultProperty: "data" + Property { name: "control"; type: "QQuickItem"; isPointer: true } + Property { name: "pressedColor"; type: "QColor"; isReadonly: true } + Property { name: "checkMarkColor"; type: "QColor"; isReadonly: true } + } Component { prototype: "QQuickComboBox" name: "QtQuick.Controls/ComboBox 2.0" @@ -392,6 +392,17 @@ Module { isComposite: true defaultProperty: "data" } + Component { + prototype: "QQuickRectangle" + name: "QtQuick.Controls.Fusion.impl/RadioIndicator 2.3" + exports: ["QtQuick.Controls.Fusion.impl/RadioIndicator 2.3"] + exportMetaObjectRevisions: [3] + isComposite: true + defaultProperty: "data" + Property { name: "control"; type: "QQuickItem"; isPointer: true } + Property { name: "pressedColor"; type: "QColor"; isReadonly: true } + Property { name: "checkMarkColor"; type: "QColor"; isReadonly: true } + } Component { prototype: "QQuickRectangle" name: "QtQuick.Controls.Universal.impl/RadioIndicator 2.0" @@ -410,17 +421,6 @@ Module { defaultProperty: "data" Property { name: "control"; type: "QQuickItem"; isPointer: true } } - Component { - prototype: "QQuickRectangle" - name: "QtQuick.Controls.Fusion.impl/RadioIndicator 2.3" - exports: ["QtQuick.Controls.Fusion.impl/RadioIndicator 2.3"] - exportMetaObjectRevisions: [3] - isComposite: true - defaultProperty: "data" - Property { name: "control"; type: "QQuickItem"; isPointer: true } - Property { name: "pressedColor"; type: "QColor"; isReadonly: true } - Property { name: "checkMarkColor"; type: "QColor"; isReadonly: true } - } Component { prototype: "QQuickRangeSlider" name: "QtQuick.Controls/RangeSlider 2.0" @@ -494,19 +494,6 @@ Module { Property { name: "progress"; type: "double" } Property { name: "visualProgress"; type: "double" } } - Component { - prototype: "QQuickRectangle" - name: "QtQuick.Controls.Fusion.impl/SliderHandle 2.3" - exports: ["QtQuick.Controls.Fusion.impl/SliderHandle 2.3"] - exportMetaObjectRevisions: [3] - isComposite: true - defaultProperty: "data" - Property { name: "palette"; type: "QVariant" } - Property { name: "pressed"; type: "bool" } - Property { name: "hovered"; type: "bool" } - Property { name: "vertical"; type: "bool" } - Property { name: "visualFocus"; type: "bool" } - } Component { prototype: "QQuickItem" name: "QtQuick.Controls.Material.impl/SliderHandle 2.0" @@ -521,6 +508,19 @@ Module { Property { name: "initialSize"; type: "int"; isReadonly: true } Property { name: "control"; type: "QVariant"; isReadonly: true } } + Component { + prototype: "QQuickRectangle" + name: "QtQuick.Controls.Fusion.impl/SliderHandle 2.3" + exports: ["QtQuick.Controls.Fusion.impl/SliderHandle 2.3"] + exportMetaObjectRevisions: [3] + isComposite: true + defaultProperty: "data" + Property { name: "palette"; type: "QVariant" } + Property { name: "pressed"; type: "bool" } + Property { name: "hovered"; type: "bool" } + Property { name: "vertical"; type: "bool" } + Property { name: "visualFocus"; type: "bool" } + } Component { prototype: "QQuickSpinBox" name: "QtQuick.Controls/SpinBox 2.0" @@ -578,6 +578,16 @@ Module { defaultProperty: "data" Property { name: "control"; type: "QQuickItem"; isPointer: true } } + Component { + prototype: "QQuickItem" + name: "QtQuick.Controls.Material.impl/SwitchIndicator 2.0" + exports: ["QtQuick.Controls.Material.impl/SwitchIndicator 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + Property { name: "control"; type: "QQuickItem"; isPointer: true } + Property { name: "handle"; type: "QQuickRectangle"; isReadonly: true; isPointer: true } + } Component { prototype: "QQuickRectangle" name: "QtQuick.Controls.Fusion.impl/SwitchIndicator 2.3" @@ -589,16 +599,6 @@ Module { Property { name: "pressedColor"; type: "QColor"; isReadonly: true } Property { name: "checkMarkColor"; type: "QColor"; isReadonly: true } } - Component { - prototype: "QQuickItem" - name: "QtQuick.Controls.Material.impl/SwitchIndicator 2.0" - exports: ["QtQuick.Controls.Material.impl/SwitchIndicator 2.0"] - exportMetaObjectRevisions: [0] - isComposite: true - defaultProperty: "data" - Property { name: "control"; type: "QQuickItem"; isPointer: true } - Property { name: "handle"; type: "QQuickRectangle"; isReadonly: true; isPointer: true } - } Component { prototype: "QQuickTabBar" name: "QtQuick.Controls/TabBar 2.0" diff --git a/src/imports/controls/plugins.qmltypes b/src/imports/controls/plugins.qmltypes index 79bd0931..fe20b2e3 100644 --- a/src/imports/controls/plugins.qmltypes +++ b/src/imports/controls/plugins.qmltypes @@ -4,7 +4,7 @@ import QtQuick.tooling 1.2 // It is used for QML tooling purposes only. // // This file was auto-generated by: -// 'qmlplugindump -noinstantiate -notrelocatable Fluid.Controls 1.0' +// 'qmlplugindump-qt5 -v -noinstantiate -notrelocatable Fluid.Controls 1.1' Module { dependencies: [ @@ -170,14 +170,12 @@ Module { } Component { prototype: "QQuickRectangle" - name: "QtQuick.Controls.Fusion.impl/CheckIndicator 2.3" - exports: ["QtQuick.Controls.Fusion.impl/CheckIndicator 2.3"] - exportMetaObjectRevisions: [3] + name: "QtQuick.Controls.Material.impl/CheckIndicator 2.0" + exports: ["QtQuick.Controls.Material.impl/CheckIndicator 2.0"] + exportMetaObjectRevisions: [0] isComposite: true defaultProperty: "data" Property { name: "control"; type: "QQuickItem"; isPointer: true } - Property { name: "pressedColor"; type: "QColor"; isReadonly: true } - Property { name: "checkMarkColor"; type: "QColor"; isReadonly: true } } Component { prototype: "QQuickRectangle" @@ -191,12 +189,14 @@ Module { } Component { prototype: "QQuickRectangle" - name: "QtQuick.Controls.Material.impl/CheckIndicator 2.0" - exports: ["QtQuick.Controls.Material.impl/CheckIndicator 2.0"] - exportMetaObjectRevisions: [0] + name: "QtQuick.Controls.Fusion.impl/CheckIndicator 2.3" + exports: ["QtQuick.Controls.Fusion.impl/CheckIndicator 2.3"] + exportMetaObjectRevisions: [3] isComposite: true defaultProperty: "data" Property { name: "control"; type: "QQuickItem"; isPointer: true } + Property { name: "pressedColor"; type: "QColor"; isReadonly: true } + Property { name: "checkMarkColor"; type: "QColor"; isReadonly: true } } Component { prototype: "QQuickComboBox" @@ -415,21 +415,21 @@ Module { } Component { prototype: "QQuickRectangle" - name: "QtQuick.Controls.Material.impl/RadioIndicator 2.0" - exports: ["QtQuick.Controls.Material.impl/RadioIndicator 2.0"] + name: "QtQuick.Controls.Universal.impl/RadioIndicator 2.0" + exports: ["QtQuick.Controls.Universal.impl/RadioIndicator 2.0"] exportMetaObjectRevisions: [0] isComposite: true defaultProperty: "data" - Property { name: "control"; type: "QQuickItem"; isPointer: true } + Property { name: "control"; type: "QVariant" } } Component { prototype: "QQuickRectangle" - name: "QtQuick.Controls.Universal.impl/RadioIndicator 2.0" - exports: ["QtQuick.Controls.Universal.impl/RadioIndicator 2.0"] + name: "QtQuick.Controls.Material.impl/RadioIndicator 2.0" + exports: ["QtQuick.Controls.Material.impl/RadioIndicator 2.0"] exportMetaObjectRevisions: [0] isComposite: true defaultProperty: "data" - Property { name: "control"; type: "QVariant" } + Property { name: "control"; type: "QQuickItem"; isPointer: true } } Component { prototype: "QQuickRectangle" @@ -515,19 +515,6 @@ Module { Property { name: "progress"; type: "double" } Property { name: "visualProgress"; type: "double" } } - Component { - prototype: "QQuickRectangle" - name: "QtQuick.Controls.Fusion.impl/SliderHandle 2.3" - exports: ["QtQuick.Controls.Fusion.impl/SliderHandle 2.3"] - exportMetaObjectRevisions: [3] - isComposite: true - defaultProperty: "data" - Property { name: "palette"; type: "QVariant" } - Property { name: "pressed"; type: "bool" } - Property { name: "hovered"; type: "bool" } - Property { name: "vertical"; type: "bool" } - Property { name: "visualFocus"; type: "bool" } - } Component { prototype: "QQuickItem" name: "QtQuick.Controls.Material.impl/SliderHandle 2.0" @@ -542,6 +529,19 @@ Module { Property { name: "initialSize"; type: "int"; isReadonly: true } Property { name: "control"; type: "QVariant"; isReadonly: true } } + Component { + prototype: "QQuickRectangle" + name: "QtQuick.Controls.Fusion.impl/SliderHandle 2.3" + exports: ["QtQuick.Controls.Fusion.impl/SliderHandle 2.3"] + exportMetaObjectRevisions: [3] + isComposite: true + defaultProperty: "data" + Property { name: "palette"; type: "QVariant" } + Property { name: "pressed"; type: "bool" } + Property { name: "hovered"; type: "bool" } + Property { name: "vertical"; type: "bool" } + Property { name: "visualFocus"; type: "bool" } + } Component { prototype: "QQuickSpinBox" name: "QtQuick.Controls/SpinBox 2.0" @@ -599,6 +599,16 @@ Module { defaultProperty: "data" Property { name: "control"; type: "QQuickItem"; isPointer: true } } + Component { + prototype: "QQuickItem" + name: "QtQuick.Controls.Material.impl/SwitchIndicator 2.0" + exports: ["QtQuick.Controls.Material.impl/SwitchIndicator 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + Property { name: "control"; type: "QQuickItem"; isPointer: true } + Property { name: "handle"; type: "QQuickRectangle"; isReadonly: true; isPointer: true } + } Component { prototype: "QQuickRectangle" name: "QtQuick.Controls.Fusion.impl/SwitchIndicator 2.3" @@ -610,16 +620,6 @@ Module { Property { name: "pressedColor"; type: "QColor"; isReadonly: true } Property { name: "checkMarkColor"; type: "QColor"; isReadonly: true } } - Component { - prototype: "QQuickItem" - name: "QtQuick.Controls.Material.impl/SwitchIndicator 2.0" - exports: ["QtQuick.Controls.Material.impl/SwitchIndicator 2.0"] - exportMetaObjectRevisions: [0] - isComposite: true - defaultProperty: "data" - Property { name: "control"; type: "QQuickItem"; isPointer: true } - Property { name: "handle"; type: "QQuickRectangle"; isReadonly: true; isPointer: true } - } Component { prototype: "QQuickTabBar" name: "QtQuick.Controls/TabBar 2.0" diff --git a/src/imports/core/plugins.qmltypes b/src/imports/core/plugins.qmltypes index 3e46b461..c9c1b26d 100644 --- a/src/imports/core/plugins.qmltypes +++ b/src/imports/core/plugins.qmltypes @@ -4,7 +4,7 @@ import QtQuick.tooling 1.2 // It is used for QML tooling purposes only. // // This file was auto-generated by: -// 'qmlplugindump -noinstantiate -notrelocatable Fluid.Core 1.0' +// 'qmlplugindump-qt5 -v -noinstantiate -notrelocatable Fluid.Core 1.0' Module { dependencies: ["QtQuick 2.10"] diff --git a/src/imports/effects/plugins.qmltypes b/src/imports/effects/plugins.qmltypes index 1657ef12..03485dae 100644 --- a/src/imports/effects/plugins.qmltypes +++ b/src/imports/effects/plugins.qmltypes @@ -4,7 +4,7 @@ import QtQuick.tooling 1.2 // It is used for QML tooling purposes only. // // This file was auto-generated by: -// 'qmlplugindump -noinstantiate -notrelocatable Fluid.Effects 1.0' +// 'qmlplugindump-qt5 -v -noinstantiate -notrelocatable Fluid.Effects 1.0' Module { dependencies: [ diff --git a/src/imports/layouts/plugins.qmltypes b/src/imports/layouts/plugins.qmltypes index 576bbe7a..e647bf3e 100644 --- a/src/imports/layouts/plugins.qmltypes +++ b/src/imports/layouts/plugins.qmltypes @@ -4,7 +4,7 @@ import QtQuick.tooling 1.2 // It is used for QML tooling purposes only. // // This file was auto-generated by: -// 'qmlplugindump -noinstantiate -notrelocatable Fluid.Layouts 1.0' +// 'qmlplugindump-qt5 -v -noinstantiate -notrelocatable Fluid.Layouts 1.0' Module { dependencies: ["QtQuick 2.10"] diff --git a/src/imports/templates/plugins.qmltypes b/src/imports/templates/plugins.qmltypes index 8bfdb43f..1f916a27 100644 --- a/src/imports/templates/plugins.qmltypes +++ b/src/imports/templates/plugins.qmltypes @@ -4,10 +4,25 @@ import QtQuick.tooling 1.2 // It is used for QML tooling purposes only. // // This file was auto-generated by: -// 'qmlplugindump -noinstantiate -notrelocatable Fluid.Templates 1.0' +// 'qmlplugindump-qt5 -v -noinstantiate -notrelocatable Fluid.Templates 1.0' Module { - dependencies: ["QtQuick 2.8"] + dependencies: [ + "QtGraphicalEffects 1.0", + "QtQuick 2.8", + "QtQuick.Controls 2.3", + "QtQuick.Controls.Fusion 2.3", + "QtQuick.Controls.Fusion.impl 2.3", + "QtQuick.Controls.Imagine 2.3", + "QtQuick.Controls.Imagine.impl 2.3", + "QtQuick.Controls.Material 2.3", + "QtQuick.Controls.Material.impl 2.3", + "QtQuick.Controls.Universal 2.3", + "QtQuick.Controls.Universal.impl 2.3", + "QtQuick.Controls.impl 2.3", + "QtQuick.Templates 2.3", + "QtQuick.Window 2.3" + ] Component { name: "DatePicker" defaultProperty: "data" @@ -158,4 +173,628 @@ Module { Property { name: "to"; type: "QDate" } Property { name: "selectedYear"; type: "int" } } + Component { + prototype: "QQuickAbstractButton" + name: "QtQuick.Controls/AbstractButton 2.0" + exports: ["QtQuick.Controls/AbstractButton 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickAction" + name: "QtQuick.Controls/Action 2.3" + exports: ["QtQuick.Controls/Action 2.3"] + exportMetaObjectRevisions: [3] + isComposite: true + } + Component { + prototype: "QQuickActionGroup" + name: "QtQuick.Controls/ActionGroup 2.3" + exports: ["QtQuick.Controls/ActionGroup 2.3"] + exportMetaObjectRevisions: [3] + isComposite: true + defaultProperty: "actions" + } + Component { + prototype: "QQuickApplicationWindow" + name: "QtQuick.Controls/ApplicationWindow 2.0" + exports: ["QtQuick.Controls/ApplicationWindow 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickItem" + name: "QtQuick.Controls.Material.impl/BoxShadow 2.0" + exports: ["QtQuick.Controls.Material.impl/BoxShadow 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + Property { name: "offsetX"; type: "int" } + Property { name: "offsetY"; type: "int" } + Property { name: "blurRadius"; type: "int" } + Property { name: "spreadRadius"; type: "int" } + Property { name: "source"; type: "QQuickItem"; isPointer: true } + Property { name: "fullWidth"; type: "bool" } + Property { name: "fullHeight"; type: "bool" } + Property { name: "glowRadius"; type: "double" } + Property { name: "spread"; type: "double" } + Property { name: "color"; type: "QColor" } + Property { name: "cornerRadius"; type: "double" } + Property { name: "cached"; type: "bool" } + } + Component { + prototype: "QQuickBusyIndicator" + name: "QtQuick.Controls/BusyIndicator 2.0" + exports: ["QtQuick.Controls/BusyIndicator 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickButton" + name: "QtQuick.Controls/Button 2.0" + exports: ["QtQuick.Controls/Button 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickButtonGroup" + name: "QtQuick.Controls/ButtonGroup 2.0" + exports: ["QtQuick.Controls/ButtonGroup 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + } + Component { + prototype: "QQuickRectangle" + name: "QtQuick.Controls.Fusion.impl/ButtonPanel 2.3" + exports: ["QtQuick.Controls.Fusion.impl/ButtonPanel 2.3"] + exportMetaObjectRevisions: [3] + isComposite: true + defaultProperty: "data" + Property { name: "control"; type: "QQuickItem"; isPointer: true } + Property { name: "highlighted"; type: "bool" } + } + Component { + prototype: "QQuickCheckBox" + name: "QtQuick.Controls/CheckBox 2.0" + exports: ["QtQuick.Controls/CheckBox 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickCheckDelegate" + name: "QtQuick.Controls/CheckDelegate 2.0" + exports: ["QtQuick.Controls/CheckDelegate 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickRectangle" + name: "QtQuick.Controls.Fusion.impl/CheckIndicator 2.3" + exports: ["QtQuick.Controls.Fusion.impl/CheckIndicator 2.3"] + exportMetaObjectRevisions: [3] + isComposite: true + defaultProperty: "data" + Property { name: "control"; type: "QQuickItem"; isPointer: true } + Property { name: "pressedColor"; type: "QColor"; isReadonly: true } + Property { name: "checkMarkColor"; type: "QColor"; isReadonly: true } + } + Component { + prototype: "QQuickRectangle" + name: "QtQuick.Controls.Universal.impl/CheckIndicator 2.0" + exports: ["QtQuick.Controls.Universal.impl/CheckIndicator 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + Property { name: "control"; type: "QQuickItem"; isPointer: true } + Property { name: "partiallyChecked"; type: "bool"; isReadonly: true } + } + Component { + prototype: "QQuickRectangle" + name: "QtQuick.Controls.Material.impl/CheckIndicator 2.0" + exports: ["QtQuick.Controls.Material.impl/CheckIndicator 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + Property { name: "control"; type: "QQuickItem"; isPointer: true } + } + Component { + prototype: "QQuickComboBox" + name: "QtQuick.Controls/ComboBox 2.0" + exports: ["QtQuick.Controls/ComboBox 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickContainer" + name: "QtQuick.Controls/Container 2.0" + exports: ["QtQuick.Controls/Container 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickControl" + name: "QtQuick.Controls/Control 2.0" + exports: ["QtQuick.Controls/Control 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickRectangle" + name: "QtQuick.Controls.Material.impl/CursorDelegate 2.0" + exports: ["QtQuick.Controls.Material.impl/CursorDelegate 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickDelayButton" + name: "QtQuick.Controls/DelayButton 2.2" + exports: ["QtQuick.Controls/DelayButton 2.2"] + exportMetaObjectRevisions: [2] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickDial" + name: "QtQuick.Controls/Dial 2.0" + exports: ["QtQuick.Controls/Dial 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickDialog" + name: "QtQuick.Controls/Dialog 2.1" + exports: ["QtQuick.Controls/Dialog 2.1"] + exportMetaObjectRevisions: [1] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickDialogButtonBox" + name: "QtQuick.Controls/DialogButtonBox 2.1" + exports: ["QtQuick.Controls/DialogButtonBox 2.1"] + exportMetaObjectRevisions: [1] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickDrawer" + name: "QtQuick.Controls/Drawer 2.0" + exports: ["QtQuick.Controls/Drawer 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickItem" + name: "QtQuick.Controls.Material.impl/ElevationEffect 2.0" + exports: ["QtQuick.Controls.Material.impl/ElevationEffect 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + Property { name: "source"; type: "QVariant" } + Property { name: "elevation"; type: "int" } + Property { name: "fullWidth"; type: "bool" } + Property { name: "fullHeight"; type: "bool" } + Property { name: "sourceItem"; type: "QQuickItem"; isReadonly: true; isPointer: true } + Property { name: "_shadows"; type: "QVariant"; isReadonly: true } + Property { name: "_shadow"; type: "QVariant"; isReadonly: true } + } + Component { + prototype: "QQuickFrame" + name: "QtQuick.Controls/Frame 2.0" + exports: ["QtQuick.Controls/Frame 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickGroupBox" + name: "QtQuick.Controls/GroupBox 2.0" + exports: ["QtQuick.Controls/GroupBox 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickItemDelegate" + name: "QtQuick.Controls/ItemDelegate 2.0" + exports: ["QtQuick.Controls/ItemDelegate 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickLabel" + name: "QtQuick.Controls/Label 2.0" + exports: ["QtQuick.Controls/Label 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickMenu" + name: "QtQuick.Controls/Menu 2.0" + exports: ["QtQuick.Controls/Menu 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickMenuBar" + name: "QtQuick.Controls/MenuBar 2.3" + exports: ["QtQuick.Controls/MenuBar 2.3"] + exportMetaObjectRevisions: [3] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickMenuBarItem" + name: "QtQuick.Controls/MenuBarItem 2.3" + exports: ["QtQuick.Controls/MenuBarItem 2.3"] + exportMetaObjectRevisions: [3] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickMenuItem" + name: "QtQuick.Controls/MenuItem 2.0" + exports: ["QtQuick.Controls/MenuItem 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickMenuSeparator" + name: "QtQuick.Controls/MenuSeparator 2.1" + exports: ["QtQuick.Controls/MenuSeparator 2.1"] + exportMetaObjectRevisions: [1] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickPage" + name: "QtQuick.Controls/Page 2.0" + exports: ["QtQuick.Controls/Page 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickPageIndicator" + name: "QtQuick.Controls/PageIndicator 2.0" + exports: ["QtQuick.Controls/PageIndicator 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickPane" + name: "QtQuick.Controls/Pane 2.0" + exports: ["QtQuick.Controls/Pane 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickPopup" + name: "QtQuick.Controls/Popup 2.0" + exports: ["QtQuick.Controls/Popup 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickProgressBar" + name: "QtQuick.Controls/ProgressBar 2.0" + exports: ["QtQuick.Controls/ProgressBar 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickRadioButton" + name: "QtQuick.Controls/RadioButton 2.0" + exports: ["QtQuick.Controls/RadioButton 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickRadioDelegate" + name: "QtQuick.Controls/RadioDelegate 2.0" + exports: ["QtQuick.Controls/RadioDelegate 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickRectangle" + name: "QtQuick.Controls.Universal.impl/RadioIndicator 2.0" + exports: ["QtQuick.Controls.Universal.impl/RadioIndicator 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + Property { name: "control"; type: "QVariant" } + } + Component { + prototype: "QQuickRectangle" + name: "QtQuick.Controls.Fusion.impl/RadioIndicator 2.3" + exports: ["QtQuick.Controls.Fusion.impl/RadioIndicator 2.3"] + exportMetaObjectRevisions: [3] + isComposite: true + defaultProperty: "data" + Property { name: "control"; type: "QQuickItem"; isPointer: true } + Property { name: "pressedColor"; type: "QColor"; isReadonly: true } + Property { name: "checkMarkColor"; type: "QColor"; isReadonly: true } + } + Component { + prototype: "QQuickRectangle" + name: "QtQuick.Controls.Material.impl/RadioIndicator 2.0" + exports: ["QtQuick.Controls.Material.impl/RadioIndicator 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + Property { name: "control"; type: "QQuickItem"; isPointer: true } + } + Component { + prototype: "QQuickRangeSlider" + name: "QtQuick.Controls/RangeSlider 2.0" + exports: ["QtQuick.Controls/RangeSlider 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickItem" + name: "QtQuick.Controls.Material.impl/RectangularGlow 2.0" + exports: ["QtQuick.Controls.Material.impl/RectangularGlow 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + Property { name: "glowRadius"; type: "double" } + Property { name: "spread"; type: "double" } + Property { name: "color"; type: "QColor" } + Property { name: "cornerRadius"; type: "double" } + Property { name: "cached"; type: "bool" } + } + Component { + prototype: "QQuickRoundButton" + name: "QtQuick.Controls/RoundButton 2.1" + exports: ["QtQuick.Controls/RoundButton 2.1"] + exportMetaObjectRevisions: [1] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickScrollBar" + name: "QtQuick.Controls/ScrollBar 2.0" + exports: ["QtQuick.Controls/ScrollBar 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickScrollIndicator" + name: "QtQuick.Controls/ScrollIndicator 2.0" + exports: ["QtQuick.Controls/ScrollIndicator 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickScrollView" + name: "QtQuick.Controls/ScrollView 2.2" + exports: ["QtQuick.Controls/ScrollView 2.2"] + exportMetaObjectRevisions: [2] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickSlider" + name: "QtQuick.Controls/Slider 2.0" + exports: ["QtQuick.Controls/Slider 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickRectangle" + name: "QtQuick.Controls.Fusion.impl/SliderGroove 2.3" + exports: ["QtQuick.Controls.Fusion.impl/SliderGroove 2.3"] + exportMetaObjectRevisions: [3] + isComposite: true + defaultProperty: "data" + Property { name: "control"; type: "QQuickItem"; isPointer: true } + Property { name: "offset"; type: "double" } + Property { name: "progress"; type: "double" } + Property { name: "visualProgress"; type: "double" } + } + Component { + prototype: "QQuickRectangle" + name: "QtQuick.Controls.Fusion.impl/SliderHandle 2.3" + exports: ["QtQuick.Controls.Fusion.impl/SliderHandle 2.3"] + exportMetaObjectRevisions: [3] + isComposite: true + defaultProperty: "data" + Property { name: "palette"; type: "QVariant" } + Property { name: "pressed"; type: "bool" } + Property { name: "hovered"; type: "bool" } + Property { name: "vertical"; type: "bool" } + Property { name: "visualFocus"; type: "bool" } + } + Component { + prototype: "QQuickItem" + name: "QtQuick.Controls.Material.impl/SliderHandle 2.0" + exports: ["QtQuick.Controls.Material.impl/SliderHandle 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + Property { name: "value"; type: "double" } + Property { name: "handleHasFocus"; type: "bool" } + Property { name: "handlePressed"; type: "bool" } + Property { name: "handleHovered"; type: "bool" } + Property { name: "initialSize"; type: "int"; isReadonly: true } + Property { name: "control"; type: "QVariant"; isReadonly: true } + } + Component { + prototype: "QQuickSpinBox" + name: "QtQuick.Controls/SpinBox 2.0" + exports: ["QtQuick.Controls/SpinBox 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickStackView" + name: "QtQuick.Controls/StackView 2.0" + exports: ["QtQuick.Controls/StackView 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickSwipeDelegate" + name: "QtQuick.Controls/SwipeDelegate 2.0" + exports: ["QtQuick.Controls/SwipeDelegate 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickSwipeView" + name: "QtQuick.Controls/SwipeView 2.0" + exports: ["QtQuick.Controls/SwipeView 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickSwitch" + name: "QtQuick.Controls/Switch 2.0" + exports: ["QtQuick.Controls/Switch 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickSwitchDelegate" + name: "QtQuick.Controls/SwitchDelegate 2.0" + exports: ["QtQuick.Controls/SwitchDelegate 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickItem" + name: "QtQuick.Controls.Universal.impl/SwitchIndicator 2.0" + exports: ["QtQuick.Controls.Universal.impl/SwitchIndicator 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + Property { name: "control"; type: "QQuickItem"; isPointer: true } + } + Component { + prototype: "QQuickItem" + name: "QtQuick.Controls.Material.impl/SwitchIndicator 2.0" + exports: ["QtQuick.Controls.Material.impl/SwitchIndicator 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + Property { name: "control"; type: "QQuickItem"; isPointer: true } + Property { name: "handle"; type: "QQuickRectangle"; isReadonly: true; isPointer: true } + } + Component { + prototype: "QQuickRectangle" + name: "QtQuick.Controls.Fusion.impl/SwitchIndicator 2.3" + exports: ["QtQuick.Controls.Fusion.impl/SwitchIndicator 2.3"] + exportMetaObjectRevisions: [3] + isComposite: true + defaultProperty: "data" + Property { name: "control"; type: "QQuickItem"; isPointer: true } + Property { name: "pressedColor"; type: "QColor"; isReadonly: true } + Property { name: "checkMarkColor"; type: "QColor"; isReadonly: true } + } + Component { + prototype: "QQuickTabBar" + name: "QtQuick.Controls/TabBar 2.0" + exports: ["QtQuick.Controls/TabBar 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickTabButton" + name: "QtQuick.Controls/TabButton 2.0" + exports: ["QtQuick.Controls/TabButton 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickTextArea" + name: "QtQuick.Controls/TextArea 2.0" + exports: ["QtQuick.Controls/TextArea 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickTextField" + name: "QtQuick.Controls/TextField 2.0" + exports: ["QtQuick.Controls/TextField 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickToolBar" + name: "QtQuick.Controls/ToolBar 2.0" + exports: ["QtQuick.Controls/ToolBar 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickToolButton" + name: "QtQuick.Controls/ToolButton 2.0" + exports: ["QtQuick.Controls/ToolButton 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickToolSeparator" + name: "QtQuick.Controls/ToolSeparator 2.1" + exports: ["QtQuick.Controls/ToolSeparator 2.1"] + exportMetaObjectRevisions: [1] + isComposite: true + defaultProperty: "data" + } + Component { + prototype: "QQuickToolTip" + name: "QtQuick.Controls/ToolTip 2.0" + exports: ["QtQuick.Controls/ToolTip 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "contentData" + } + Component { + prototype: "QQuickTumbler" + name: "QtQuick.Controls/Tumbler 2.0" + exports: ["QtQuick.Controls/Tumbler 2.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } } From 5c90ff46afa2bc8c519ddc0410f0f95c07989045 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20Gro=C3=9F?= Date: Sat, 5 May 2018 17:46:07 +0200 Subject: [PATCH 35/74] Implement Chip Implement Chip from https://material.io/guidelines/components/chips.html Supports contact icons and the delete button. [ChangeLog][Controls] Add Chip control. Closes: #59 --- src/demo/qml/Pages/Controls/ChipPage.qml | 40 +++++++++ src/demo/qml/main.qml | 1 + src/imports/controls/Chip.qml | 104 +++++++++++++++++++++++ src/imports/controls/qmldir | 1 + 4 files changed, 146 insertions(+) create mode 100644 src/demo/qml/Pages/Controls/ChipPage.qml create mode 100644 src/imports/controls/Chip.qml diff --git a/src/demo/qml/Pages/Controls/ChipPage.qml b/src/demo/qml/Pages/Controls/ChipPage.qml new file mode 100644 index 00000000..c6037b17 --- /dev/null +++ b/src/demo/qml/Pages/Controls/ChipPage.qml @@ -0,0 +1,40 @@ +/* + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:MPL2$ + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * + * $END_LICENSE$ + */ + +import QtQuick 2.10 +import Fluid.Controls 1.1 as FluidControls + +Item { + Row { + anchors.centerIn: parent + spacing: 16 + + FluidControls.Chip { + caption: qsTr("Chip") + } + FluidControls.Chip { + caption: qsTr("Deletable chip") + deletable: true + } + FluidControls.Chip { + caption: qsTr("Chip with icon") + icon.source: FluidControls.Utils.iconUrl("action/face") + } + FluidControls.Chip { + caption: qsTr("Deletable chip with icon") + icon.source: FluidControls.Utils.iconUrl("social/person") + deletable: true + } + } +} diff --git a/src/demo/qml/main.qml b/src/demo/qml/main.qml index 5a3aef17..97054724 100644 --- a/src/demo/qml/main.qml +++ b/src/demo/qml/main.qml @@ -73,6 +73,7 @@ FluidControls.ApplicationWindow { ListElement { category: qsTr("Layout"); title: qsTr("ColumnFlow"); source: "qrc:/qml/Pages/Layouts/ColumnFlowPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("BottomSheet"); source: "qrc:/qml/Pages/Controls/BottomSheetPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("Card"); source: "qrc:/qml/Pages/Controls/CardPage.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("Chip"); source: "qrc:/qml/Pages/Controls/ChipPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("Dialogs"); source: "qrc:/qml/Pages/Controls/DialogsPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("DatePicker"); source: "qrc:/qml/Pages/Controls/DatePicker.qml" } ListElement { category: qsTr("Controls"); title: qsTr("DateTimePicker"); source: "qrc:/qml/Pages/Controls/DateTimePicker.qml" } diff --git a/src/imports/controls/Chip.qml b/src/imports/controls/Chip.qml new file mode 100644 index 00000000..ed2bb53e --- /dev/null +++ b/src/imports/controls/Chip.qml @@ -0,0 +1,104 @@ +/* + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:MPL2$ + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * + * $END_LICENSE$ + */ + +import QtQuick 2.10 +import QtQuick.Controls.Material 2.2 +import Fluid.Controls 1.1 +import Fluid.Effects 1.0 + +/*! + \qmltype Chip + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Chips represent complex entities in small blocks, such as a contact. + + \since 1.1 +*/ +Rectangle { + /*! + \qmlproperty string caption + + The caption to show in the chip + */ + property string caption: "" + + /*! + \qmlproperty alias icon + + The icon to display (if any) + */ + property alias icon: contactIcon + + /*! + \qmlproperty alias font + + The caption font in the Chip + */ + property alias font: captionLabel.font + + /*! + \qmlproperty bool deletable + + Whether the chip can be deleted + */ + property bool deletable: false + + /*! + Emitted, when the user wants to delete the chip + */ + signal deleted() + + width: contactIcon.width + captionLabel.implicitWidth + deleteButton.width + 12 + height: 32 + radius: 16 + color: Material.color(Material.Grey, Material.Shade300) + Icon { + id: contactIcon + anchors { left: parent.left; verticalCenter: parent.verticalCenter } + width: 32 + height: width + visible: false + } + CircleMask { + id: circleMask + anchors.fill: contactIcon + source: contactIcon + visible: source !== "" + } + CaptionLabel { + id: captionLabel + anchors { + left: parent.left + right: deleteButton.left + verticalCenter: parent.verticalCenter + leftMargin: circleMask.visible ? 40 : 12 + rightMargin: deletable ? 4 : 12 + } + text: caption + } + ToolButton { + id: deleteButton + icon.source: Utils.iconUrl("navigation/close") + icon.color: Material.iconColor + visible: deletable + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + } + width: 40 + height: width + onClicked: deleted(); + } +} diff --git a/src/imports/controls/qmldir b/src/imports/controls/qmldir index 12d0119f..6ab377ad 100644 --- a/src/imports/controls/qmldir +++ b/src/imports/controls/qmldir @@ -18,6 +18,7 @@ BottomSheetList 1.0 BottomSheetList.qml BottomSheetGrid 1.0 BottomSheetGrid.qml CaptionLabel 1.0 CaptionLabel.qml Card 1.0 Card.qml +Chip 1.1 Chip.qml CircleImage 1.0 CircleImage.qml DatePicker 1.0 DatePicker.qml DatePickerDialog 1.0 DatePickerDialog.qml From 71aedb8224cdcf236c770b66bf8b351a62b2444d Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 5 May 2018 17:50:59 +0200 Subject: [PATCH 36/74] Separate Chip documentation and reorganize qmldir Move documentation into a separate file like we recently did with other types. Reorganize qmldir so that the new Chip type is listed with other 1.1 types. --- doc/src/controls/Chip.qdoc | 58 +++++++++++++++++++++++++++ src/imports/controls/Chip.qml | 74 ++++++++++++++--------------------- src/imports/controls/qmldir | 2 +- 3 files changed, 88 insertions(+), 46 deletions(-) create mode 100644 doc/src/controls/Chip.qdoc diff --git a/doc/src/controls/Chip.qdoc b/doc/src/controls/Chip.qdoc new file mode 100644 index 00000000..cf575c80 --- /dev/null +++ b/doc/src/controls/Chip.qdoc @@ -0,0 +1,58 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype Chip + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + \since Fluid.Controls 1.1 + + \brief Chips represent complex entities in small blocks, such as a contact. + + For more information you can read the + \l{https://material.io/guidelines/components/chips.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty string Chip::caption + + The caption to show in the chip. +*/ + +/*! + \qmlproperty alias icon + + The icon to display (if any) +*/ + +/*! + \qmlproperty font Chip::font + + The caption font in the Chip. +*/ + +/*! + \qmlproperty bool Chip::deletable + + Whether the chip can be deleted. +*/ + +/*! + \qmlsignal void Chip::deleted() + + Emitted when the user wants to delete the chip. +*/ diff --git a/src/imports/controls/Chip.qml b/src/imports/controls/Chip.qml index ed2bb53e..00c71685 100644 --- a/src/imports/controls/Chip.qml +++ b/src/imports/controls/Chip.qml @@ -13,72 +13,49 @@ */ import QtQuick 2.10 -import QtQuick.Controls.Material 2.2 -import Fluid.Controls 1.1 -import Fluid.Effects 1.0 +import QtQuick.Controls.Material 2.3 +import Fluid.Controls 1.1 as FluidControls +import Fluid.Effects 1.0 as FluidEffects -/*! - \qmltype Chip - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Chips represent complex entities in small blocks, such as a contact. - - \since 1.1 -*/ Rectangle { - /*! - \qmlproperty string caption - - The caption to show in the chip - */ property string caption: "" - - /*! - \qmlproperty alias icon - - The icon to display (if any) - */ property alias icon: contactIcon - - /*! - \qmlproperty alias font - - The caption font in the Chip - */ property alias font: captionLabel.font - - /*! - \qmlproperty bool deletable - - Whether the chip can be deleted - */ property bool deletable: false - /*! - Emitted, when the user wants to delete the chip - */ signal deleted() width: contactIcon.width + captionLabel.implicitWidth + deleteButton.width + 12 height: 32 radius: 16 color: Material.color(Material.Grey, Material.Shade300) - Icon { + + FluidControls.Icon { id: contactIcon - anchors { left: parent.left; verticalCenter: parent.verticalCenter } + + anchors { + left: parent.left + verticalCenter: parent.verticalCenter + } + width: 32 height: width + visible: false } - CircleMask { + + FluidEffects.CircleMask { id: circleMask + anchors.fill: contactIcon source: contactIcon + visible: source !== "" } - CaptionLabel { + + FluidControls.CaptionLabel { id: captionLabel + anchors { left: parent.left right: deleteButton.left @@ -86,19 +63,26 @@ Rectangle { leftMargin: circleMask.visible ? 40 : 12 rightMargin: deletable ? 4 : 12 } + text: caption } + ToolButton { id: deleteButton - icon.source: Utils.iconUrl("navigation/close") + + icon.source: FluidControls.Utils.iconUrl("navigation/close") icon.color: Material.iconColor - visible: deletable + anchors { right: parent.right verticalCenter: parent.verticalCenter } + width: 40 height: width - onClicked: deleted(); + + visible: deletable + + onClicked: deleted() } } diff --git a/src/imports/controls/qmldir b/src/imports/controls/qmldir index 6ab377ad..df323f5f 100644 --- a/src/imports/controls/qmldir +++ b/src/imports/controls/qmldir @@ -18,7 +18,6 @@ BottomSheetList 1.0 BottomSheetList.qml BottomSheetGrid 1.0 BottomSheetGrid.qml CaptionLabel 1.0 CaptionLabel.qml Card 1.0 Card.qml -Chip 1.1 Chip.qml CircleImage 1.0 CircleImage.qml DatePicker 1.0 DatePicker.qml DatePickerDialog 1.0 DatePickerDialog.qml @@ -62,6 +61,7 @@ Wave 1.0 Wave.qml ApplicationWindow 1.1 ApplicationWindow11.qml AppToolBar 1.1 AppToolBar11.qml AppBar 1.1 AppBar11.qml +Chip 1.1 Chip.qml Page 1.1 Page11.qml PageSidebar 1.1 PageSidebar.qml SearchBar 1.1 SearchBar11.qml From add71c2776f19899da6e3dd8bcf6fca758a7ea1c Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Thu, 3 May 2018 06:50:48 +0200 Subject: [PATCH 37/74] Toggle overflow menu whith the Menu button Add a method to toggle the menu and invoke it when the Menu button is released. [ChangeLog][Controls][Page] Toggle overflow menu when the Menu button is released. Closes: #234 --- doc/src/controls/AppBar.qdoc | 8 ++++++++ src/imports/controls/AppBar11.qml | 10 ++++++++++ src/imports/controls/Page11.qml | 6 ++++++ 3 files changed, 24 insertions(+) diff --git a/doc/src/controls/AppBar.qdoc b/doc/src/controls/AppBar.qdoc index 194f5697..d5600085 100644 --- a/doc/src/controls/AppBar.qdoc +++ b/doc/src/controls/AppBar.qdoc @@ -135,3 +135,11 @@ Tool bar. */ + +/*! + \qmlmethod void AppBar::toggleOverflowMenu() + + Toggle the overflow menu if the number of actions is greater than \l AppBar::maxActionCount. + + \since Fluid.Controls 1.1 +*/ diff --git a/src/imports/controls/AppBar11.qml b/src/imports/controls/AppBar11.qml index 983f84a9..3cd61239 100644 --- a/src/imports/controls/AppBar11.qml +++ b/src/imports/controls/AppBar11.qml @@ -240,4 +240,14 @@ QQC2.ToolBar { visible: children.length > 0 } + + function toggleOverflowMenu() { + if (!overflowButton.visible) + return; + + if (overflowMenu.visible) + overflowMenu.close(); + else + overflowMenu.open(); + } } diff --git a/src/imports/controls/Page11.qml b/src/imports/controls/Page11.qml index 24c41530..822945b1 100644 --- a/src/imports/controls/Page11.qml +++ b/src/imports/controls/Page11.qml @@ -73,6 +73,12 @@ Page { pop(event, false); event.accepted = true; } + + // Toggle overflow menu when the menu button is released + if (event.key === Qt.Key_Menu) { + appBar.toggleOverflowMenu(); + event.accepted = true; + } } header: null From fe3f7aa04de5afa51752ba8cd9f8d7c5c0ff37ae Mon Sep 17 00:00:00 2001 From: Mikko Gynther Date: Fri, 18 May 2018 21:51:30 +0300 Subject: [PATCH 38/74] Expose AppBar overflow menu open state It is useful to know if overflow menu of AppBar is open or not. For example NavigationDrawer dragMargin can be set to 0 when menu is open to disable dragging drawer open at the same time as menu. Depending on application there can be other situations where overflow menu state is valuable information. [ChangeLog][Controls] Add property AppBar::overflowMenuVisible to know whether the overflow menu is open or not. --- doc/src/controls/AppBar.qdoc | 9 +++++++++ src/imports/controls/AppBar11.qml | 2 ++ 2 files changed, 11 insertions(+) diff --git a/doc/src/controls/AppBar.qdoc b/doc/src/controls/AppBar.qdoc index d5600085..8008630e 100644 --- a/doc/src/controls/AppBar.qdoc +++ b/doc/src/controls/AppBar.qdoc @@ -78,6 +78,15 @@ \since Fluid.Controls 1.1 */ +/*! + \qmlproperty bool AppBar::overflowMenuVisible + + Value indicates if overflow menu is open or not. + + \readonly + \since Fluid.Controls 1.1 +*/ + /*! \qmlproperty real AppBar::leftKeyline diff --git a/src/imports/controls/AppBar11.qml b/src/imports/controls/AppBar11.qml index 3cd61239..00ebdf9a 100644 --- a/src/imports/controls/AppBar11.qml +++ b/src/imports/controls/AppBar11.qml @@ -38,6 +38,8 @@ QQC2.ToolBar { property color backgroundColor: appBar.Material.primaryColor + readonly property alias overflowMenuVisible: overflowMenu.visible + property color decorationColor: Material.shade(backgroundColor, Material.Shade700) property alias leftKeyline: titleLabel.x From d59206bfe40210af281a8d6f15a228249a7d791f Mon Sep 17 00:00:00 2001 From: luntik2012 Date: Tue, 12 Jun 2018 08:56:18 +0300 Subject: [PATCH 39/74] Fix FloatingActionButton background Background is not anchored to center with Qt 5.11. Closes: #258 --- src/imports/controls/FloatingActionButton.qml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/imports/controls/FloatingActionButton.qml b/src/imports/controls/FloatingActionButton.qml index 737b4f91..d08bc486 100644 --- a/src/imports/controls/FloatingActionButton.qml +++ b/src/imports/controls/FloatingActionButton.qml @@ -71,8 +71,7 @@ RoundButton { implicitWidth: control.mini ? 40 : 56 implicitHeight: implicitWidth - x: control.leftPadding - y: control.topPadding + anchors.centerIn: parent color: !control.enabled ? control.Material.buttonDisabledColor : control.checked || control.highlighted ? control.Material.highlightedButtonColor : control.Material.buttonColor From c0e34314a3a6303716d649ca0a304770dea15230 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Mon, 2 Jul 2018 11:30:58 +0200 Subject: [PATCH 40/74] Fix outdated minimalqbs example Fluid project variables were renamed but minimalqbs.qbs was never updated to reflect those changes. Closes: #257 --- examples/perproject/minimalqbs/minimalqbs.qbs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/perproject/minimalqbs/minimalqbs.qbs b/examples/perproject/minimalqbs/minimalqbs.qbs index a2bce432..8b9afbff 100644 --- a/examples/perproject/minimalqbs/minimalqbs.qbs +++ b/examples/perproject/minimalqbs/minimalqbs.qbs @@ -20,8 +20,8 @@ Project { filePath: "fluid/fluid.qbs" Properties { - documentationEnabled: false - demoEnabled: false + withDocumentation: false + withDemo: false autotestEnabled: false } } From 08e92bd83e8e535c0a0a73e711bc676deae95e73 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Mon, 20 Aug 2018 22:04:46 +0200 Subject: [PATCH 41/74] Add iOS support Unfortunately Qt on iOS is statically built, hence making Fluid apps to work requires to jump through some hoops. Apps need to link to all the required plugins (that is Fluid QML plugin and the SVG image format for MD icons), and they need to be imported. Apps also need an explicit QtQuick.Controls.Material import, otherwise the static plugin is not loaded. Issue: #131 --- examples/perproject/minimalqmake/src/main.cpp | 8 ++++++++ examples/perproject/minimalqmake/src/main.qml | 1 + examples/perproject/minimalqmake/src/src.pro | 19 +++++++++++++++++++ 3 files changed, 28 insertions(+) diff --git a/examples/perproject/minimalqmake/src/main.cpp b/examples/perproject/minimalqmake/src/main.cpp index 21f7a2c6..f3f37fc6 100644 --- a/examples/perproject/minimalqmake/src/main.cpp +++ b/examples/perproject/minimalqmake/src/main.cpp @@ -2,6 +2,14 @@ #include #include +#ifdef Q_OS_IOS +# include +Q_IMPORT_PLUGIN(FluidCorePlugin) +Q_IMPORT_PLUGIN(FluidControlsPlugin) +Q_IMPORT_PLUGIN(FluidControlsPrivatePlugin) +Q_IMPORT_PLUGIN(FluidTemplatesPlugin) +#endif + int main(int argc, char *argv[]) { QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); diff --git a/examples/perproject/minimalqmake/src/main.qml b/examples/perproject/minimalqmake/src/main.qml index 456fa88a..fcf64696 100644 --- a/examples/perproject/minimalqmake/src/main.qml +++ b/examples/perproject/minimalqmake/src/main.qml @@ -1,5 +1,6 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 +import QtQuick.Controls.Material 2.2 import QtQuick.Layouts 1.3 import Fluid.Controls 1.0 as FluidControls diff --git a/examples/perproject/minimalqmake/src/src.pro b/examples/perproject/minimalqmake/src/src.pro index 277b094f..7cbb45f3 100644 --- a/examples/perproject/minimalqmake/src/src.pro +++ b/examples/perproject/minimalqmake/src/src.pro @@ -40,6 +40,25 @@ macx { QMAKE_BUNDLE_DATA += APP_QML_FILES } +ios { + # Bundle Fluid QML plugins with the application + APP_QML_FILES.files = $$OUT_PWD/../fluid/qml/Fluid + APP_QML_FILES.path = qml + QMAKE_BUNDLE_DATA += APP_QML_FILES + + QMAKE_LIBDIR += \ + $$OUT_PWD/../fluid/qml/Fluid/Core \ + $$OUT_PWD/../fluid/qml/Fluid/Controls \ + $$OUT_PWD/../fluid/qml/Fluid/Controls/Private \ + $$OUT_PWD/../fluid/qml/Fluid/Templates + QTPLUGIN += \ + qsvg \ + fluidcoreplugin \ + fluidcontrolsplugin \ + fluidcontrolsprivateplugin \ + fluidtemplatesplugin +} + win32 { WINDEPLOYQT_OPTIONS = -qmldir $$OUT_PWD/../fluid/qml/Fluid } From e66a938b237d56828f77463af2198029a83eac30 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Tue, 21 Aug 2018 13:56:58 +0200 Subject: [PATCH 42/74] Avoid conflicts with static builds We had a couple of classes both called Utils which conflicted with static builds. This was discovered working on iOS support (see #131). --- src/imports/controls/controlsplugin.cpp | 6 +++--- src/imports/controls/{utils.cpp => controlsutils.cpp} | 6 +++--- src/imports/controls/{utils.h => controlsutils.h} | 10 +++++----- src/imports/core/coreplugin.cpp | 6 +++--- src/imports/core/{utils.cpp => coreutils.cpp} | 6 +++--- src/imports/core/{utils.h => coreutils.h} | 10 +++++----- 6 files changed, 22 insertions(+), 22 deletions(-) rename src/imports/controls/{utils.cpp => controlsutils.cpp} (90%) rename src/imports/controls/{utils.h => controlsutils.h} (72%) rename src/imports/core/{utils.cpp => coreutils.cpp} (85%) rename src/imports/core/{utils.h => coreutils.h} (77%) diff --git a/src/imports/controls/controlsplugin.cpp b/src/imports/controls/controlsplugin.cpp index 4b35c3d1..138a84e5 100644 --- a/src/imports/controls/controlsplugin.cpp +++ b/src/imports/controls/controlsplugin.cpp @@ -14,8 +14,8 @@ #include "color.h" #include "controlsplugin.h" +#include "controlsutils.h" #include "iconthemeimageprovider.h" -#include "utils.h" static QObject *colorProvider(QQmlEngine *engine, QJSEngine *jsEngine) { @@ -29,7 +29,7 @@ static QObject *utilsProvider(QQmlEngine *engine, QJSEngine *jsEngine) { Q_UNUSED(jsEngine); - return new Utils(engine->baseUrl()); + return new ControlsUtils(engine->baseUrl()); } void FluidControlsPlugin::initializeEngine(QQmlEngine *engine, const char *uri) @@ -48,5 +48,5 @@ void FluidControlsPlugin::registerTypes(const char *uri) Q_ASSERT(QLatin1String(uri) == QLatin1String("Fluid.Controls")); qmlRegisterSingletonType(uri, 1, 0, "Color", colorProvider); - qmlRegisterSingletonType(uri, 1, 0, "Utils", utilsProvider); + qmlRegisterSingletonType(uri, 1, 0, "Utils", utilsProvider); } diff --git a/src/imports/controls/utils.cpp b/src/imports/controls/controlsutils.cpp similarity index 90% rename from src/imports/controls/utils.cpp rename to src/imports/controls/controlsutils.cpp index f0b76367..5c1dac79 100644 --- a/src/imports/controls/utils.cpp +++ b/src/imports/controls/controlsutils.cpp @@ -12,7 +12,7 @@ * $END_LICENSE$ */ -#include "utils.h" +#include "controlsutils.h" /*! \qmltype Utils @@ -21,7 +21,7 @@ \brief A collection of helpful utility methods. */ -Utils::Utils(const QUrl &baseUrl, QObject *parent) +ControlsUtils::ControlsUtils(const QUrl &baseUrl, QObject *parent) : QObject(parent) , m_baseUrl(baseUrl) { @@ -53,7 +53,7 @@ Utils::Utils(const QUrl &baseUrl, QObject *parent) } \endcode */ -QUrl Utils::iconUrl(const QString &name) +QUrl ControlsUtils::iconUrl(const QString &name) { #if FLUID_INSTALL_ICONS == 1 return QUrl::fromLocalFile(QStringLiteral("%1/icons/%2.svg").arg(m_baseUrl.toLocalFile()).arg(name)); diff --git a/src/imports/controls/utils.h b/src/imports/controls/controlsutils.h similarity index 72% rename from src/imports/controls/utils.h rename to src/imports/controls/controlsutils.h index 9b0e0fa1..2d88d45d 100644 --- a/src/imports/controls/utils.h +++ b/src/imports/controls/controlsutils.h @@ -12,17 +12,17 @@ * $END_LICENSE$ */ -#ifndef FLUID_CONTROLS_UTILS_H -#define FLUID_CONTROLS_UTILS_H +#ifndef CONTROLSUTILS_H +#define CONTROLSUTILS_H #include #include -class Utils : public QObject +class ControlsUtils : public QObject { Q_OBJECT public: - explicit Utils(const QUrl &baseUrl, QObject *parent = nullptr); + explicit ControlsUtils(const QUrl &baseUrl, QObject *parent = nullptr); Q_INVOKABLE QUrl iconUrl(const QString &name); @@ -30,4 +30,4 @@ class Utils : public QObject QUrl m_baseUrl; }; -#endif // FLUID_CONTROLS_UTILS_H +#endif // CONTROLSUTILS_H diff --git a/src/imports/core/coreplugin.cpp b/src/imports/core/coreplugin.cpp index c5a32ef1..be93da5d 100644 --- a/src/imports/core/coreplugin.cpp +++ b/src/imports/core/coreplugin.cpp @@ -15,19 +15,19 @@ #include #include "coreplugin.h" +#include "coreutils.h" #include "clipboard.h" #include "device.h" #include "dateutils.h" #include "qqmlsortfilterproxymodel.h" #include "standardpaths.h" -#include "utils.h" static QObject *utilsProvider(QQmlEngine *engine, QJSEngine *jsEngine) { Q_UNUSED(engine); Q_UNUSED(jsEngine); - return new Utils(); + return new CoreUtils(); } @@ -69,5 +69,5 @@ void FluidCorePlugin::registerTypes(const char *uri) qmlRegisterSingletonType(uri, 1, 0, "DateUtils", dateUtilsProvider); qmlRegisterSingletonType(uri, 1, 0, "Device", deviceProvider); qmlRegisterSingletonType(uri, 1, 0, "StandardPaths", standardPathsProvider); - qmlRegisterSingletonType(uri, 1, 0, "Utils", utilsProvider); + qmlRegisterSingletonType(uri, 1, 0, "Utils", utilsProvider); } diff --git a/src/imports/core/utils.cpp b/src/imports/core/coreutils.cpp similarity index 85% rename from src/imports/core/utils.cpp rename to src/imports/core/coreutils.cpp index bf476c75..92332e85 100644 --- a/src/imports/core/utils.cpp +++ b/src/imports/core/coreutils.cpp @@ -12,7 +12,7 @@ * $END_LICENSE$ */ -#include "utils.h" +#include "coreutils.h" /*! \qmltype Utils @@ -21,7 +21,7 @@ \brief A collection of helpful utility methods. */ -Utils::Utils(QObject *parent) +CoreUtils::CoreUtils(QObject *parent) : QObject(parent) { } @@ -31,7 +31,7 @@ Utils::Utils(QObject *parent) Scale \a percent in the range between \a start and \a end. */ -qreal Utils::scale(qreal percent, qreal start, qreal end) +qreal CoreUtils::scale(qreal percent, qreal start, qreal end) { return start + ((end - start) * (percent / 100)); } diff --git a/src/imports/core/utils.h b/src/imports/core/coreutils.h similarity index 77% rename from src/imports/core/utils.h rename to src/imports/core/coreutils.h index 48e9a1e9..29ac8df0 100644 --- a/src/imports/core/utils.h +++ b/src/imports/core/coreutils.h @@ -12,19 +12,19 @@ * $END_LICENSE$ */ -#ifndef UTILS_H -#define UTILS_H +#ifndef COREUTILS_H +#define COREUTILS_H #include #include -class Utils : public QObject +class CoreUtils : public QObject { Q_OBJECT public: - explicit Utils(QObject *parent = nullptr); + explicit CoreUtils(QObject *parent = nullptr); Q_INVOKABLE qreal scale(qreal percent, qreal start, qreal end); }; -#endif // UTILS_H +#endif // COREUTILS_H From 06d7dfd80f564163d6224a33f873e1959373dcca Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Tue, 21 Aug 2018 14:04:11 +0200 Subject: [PATCH 43/74] Fix documentation for Fluid.Core Utils --- src/imports/core/coreutils.cpp | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/imports/core/coreutils.cpp b/src/imports/core/coreutils.cpp index 92332e85..43613d52 100644 --- a/src/imports/core/coreutils.cpp +++ b/src/imports/core/coreutils.cpp @@ -27,7 +27,7 @@ CoreUtils::CoreUtils(QObject *parent) } /*! - \qmlmethod real Fluid.Controls::Utils::scale(real percent, real start, real end) + \qmlmethod real Fluid.Core::Utils::scale(real percent, real start, real end) Scale \a percent in the range between \a start and \a end. */ From 541a51bf00cd1e7b0dfe7ec91127cc3ab32cbf49 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Tue, 21 Aug 2018 14:05:12 +0200 Subject: [PATCH 44/74] Add missing import to Fluid.Controls Utils example --- src/imports/controls/controlsutils.cpp | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/imports/controls/controlsutils.cpp b/src/imports/controls/controlsutils.cpp index 5c1dac79..ee410f9d 100644 --- a/src/imports/controls/controlsutils.cpp +++ b/src/imports/controls/controlsutils.cpp @@ -35,6 +35,7 @@ ControlsUtils::ControlsUtils(const QUrl &baseUrl, QObject *parent) \code import QtQuick 2.10 + import Fluid.Controls 1.0 as FluidControls Image { source: FluidControls.Utils.iconUrl("action/alarm") @@ -46,6 +47,7 @@ ControlsUtils::ControlsUtils(const QUrl &baseUrl, QObject *parent) \code import QtQuick 2.10 import QtQuick.Controls 2.3 + import Fluid.Controls 1.0 as FluidControls Button { icon.source: FluidControls.Utils.iconUrl("action/alarm") From 87480b9c888ad67d33f7ea2db4aaaedef8c6d228 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Tue, 21 Aug 2018 17:34:18 +0200 Subject: [PATCH 45/74] demo: Warn that system icons might not be available freedesktop.org icon themes are rarely installed on non-Linux systems. In this case our image provider fails and the user doesn't understand why. Add a label that appears on non-Linux systems explaining that the feature might not be available. Closes: #198 --- src/demo/qml/Pages/Style/SystemIconsPage.qml | 85 ++++++++++++-------- 1 file changed, 52 insertions(+), 33 deletions(-) diff --git a/src/demo/qml/Pages/Style/SystemIconsPage.qml b/src/demo/qml/Pages/Style/SystemIconsPage.qml index 76f879e9..c56df91c 100644 --- a/src/demo/qml/Pages/Style/SystemIconsPage.qml +++ b/src/demo/qml/Pages/Style/SystemIconsPage.qml @@ -39,50 +39,69 @@ Page { anchors.fill: parent clip: true - GridLayout { + Column { anchors.fill: parent - columns: (scrollView.width * 0.8) / 48 - columnSpacing: 16 - rowSpacing: 16 + anchors.margins: 16 - FluidControls.Icon { - name: "text-editor-symbolic" - size: 48 + Label { + id: warningLabel + width: parent.width + text: qsTr("This feature might not be available on your platform, as it depends on " + + "the installation of a freedesktop.org icon theme.") + wrapMode: Label.WordWrap + visible: Qt.platform.os !== "linux" } - FluidControls.Icon { - name: "weather-few-clouds-symbolic" - size: 48 + Item { + width: parent.width + height: 16 + visible: warningLabel.visible } - FluidControls.Icon { - name: "system-software-install-symbolic" - size: 48 - } + GridLayout { + columns: (scrollView.width * 0.8) / 48 + columnSpacing: 16 + rowSpacing: 16 - FluidControls.Icon { - name: "system-users-symbolic" - size: 48 - } + FluidControls.Icon { + name: "text-editor-symbolic" + size: 48 + } - FluidControls.Icon { - name: "accessories-calculator" - size: 48 - } + FluidControls.Icon { + name: "weather-few-clouds-symbolic" + size: 48 + } - FluidControls.Icon { - name: "accessories-character-map" - size: 48 - } + FluidControls.Icon { + name: "system-software-install-symbolic" + size: 48 + } - FluidControls.Icon { - name: "accessories-dictionary" - size: 48 - } + FluidControls.Icon { + name: "system-users-symbolic" + size: 48 + } + + FluidControls.Icon { + name: "accessories-calculator" + size: 48 + } + + FluidControls.Icon { + name: "accessories-character-map" + size: 48 + } + + FluidControls.Icon { + name: "accessories-dictionary" + size: 48 + } - FluidControls.Icon { - name: "accessories-text-editor" - size: 48 + FluidControls.Icon { + name: "accessories-text-editor" + size: 48 + } } } } From 8006ecb5a546e6662ae852f45d15126de3af320c Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Tue, 21 Aug 2018 18:06:59 +0200 Subject: [PATCH 46/74] demo: Add bundle name for macOS Specify the application name on the menu bar. --- src/demo/demo.qbs | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/demo/demo.qbs b/src/demo/demo.qbs index 22e96da5..a4d86098 100644 --- a/src/demo/demo.qbs +++ b/src/demo/demo.qbs @@ -17,9 +17,14 @@ Project { condition: project.withDemo consoleApplication: false + bundle.identifierPrefix: "io.liri" + bundle.identifier: "io.liri.Fluid.Demo" + bundle.infoPlist: ({"CFBundleName": "Fluid Demo"}) + Depends { name: "lirideployment" } Depends { name: "Qt"; submodules: ["gui", "qml", "quick", "quickcontrols2"]; versionAtLeast: project.minimumQtVersion } Depends { name: "Android.ndk"; condition: qbs.targetOS.contains("android") } + Depends { name: "ib"; condition: qbs.targetOS.contains("macos") } Properties { condition: qbs.targetOS.contains("android") From 5796477be13f5c77f343dff580b47f25f82998a7 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Tue, 21 Aug 2018 18:20:55 +0200 Subject: [PATCH 47/74] Allow non-visual children in TabbedPage swipeView.contentChildren is a list of visual children, therefore non-visual children were not allowed. Fixes: #263 --- src/imports/controls/TabbedPage.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/imports/controls/TabbedPage.qml b/src/imports/controls/TabbedPage.qml index 01e61813..f031d5ac 100644 --- a/src/imports/controls/TabbedPage.qml +++ b/src/imports/controls/TabbedPage.qml @@ -65,7 +65,7 @@ FluidControls.Page { /*! \internal */ - default property alias contents: swipeView.contentChildren + default property alias contents: swipeView.contentData /*! \qmlproperty int count From f5ccfbe6de084c94e0844e04326bc9bbcf839913 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 12 May 2018 17:06:08 +0200 Subject: [PATCH 48/74] Fix animations --- src/imports/controls/AppToolBar11.qml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/imports/controls/AppToolBar11.qml b/src/imports/controls/AppToolBar11.qml index 8f488285..d64a4e20 100644 --- a/src/imports/controls/AppToolBar11.qml +++ b/src/imports/controls/AppToolBar11.qml @@ -129,20 +129,20 @@ ToolBar { } popEnter: Transition { - NumberAnimation { property: "y"; from: 0.5 * -stack.height; to: 0; duration: 250; easing.type: Easing.OutCubic } + NumberAnimation { property: "y"; from: 0.5 * -rightSidebarStack.height; to: 0; duration: 250; easing.type: Easing.OutCubic } NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 250; easing.type: Easing.OutCubic } } popExit: Transition { - NumberAnimation { property: "y"; from: 0; to: 0.5 * stack.height; duration: 250; easing.type: Easing.OutCubic } + NumberAnimation { property: "y"; from: 0; to: 0.5 * rightSidebarStack.height; duration: 250; easing.type: Easing.OutCubic } NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 250; easing.type: Easing.OutCubic } } pushEnter: Transition { - NumberAnimation { property: "y"; from: 0.5 * stack.height; to: 0; duration: 250; easing.type: Easing.OutCubic } + NumberAnimation { property: "y"; from: 0.5 * rightSidebarStack.height; to: 0; duration: 250; easing.type: Easing.OutCubic } NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 250; easing.type: Easing.OutCubic } } pushExit: Transition { - NumberAnimation { property: "y"; from: 0; to: 0.5 * -stack.height; duration: 250; easing.type: Easing.OutCubic } + NumberAnimation { property: "y"; from: 0; to: 0.5 * -rightSidebarStack.height; duration: 250; easing.type: Easing.OutCubic } NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 250; easing.type: Easing.OutCubic } } } From f380ab815436d14fda07036e3c1bf819a1302d2d Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 12 May 2018 18:22:59 +0200 Subject: [PATCH 49/74] demo: Remove Universal styling Fluid implements Material and we care only about it. --- src/demo/qml/+material/StyledRectangle.qml | 22 --------------------- src/demo/qml/+universal/StyledRectangle.qml | 22 --------------------- src/demo/qml/StyledRectangle.qml | 7 ++++--- src/demo/qml/main.qml | 3 --- 4 files changed, 4 insertions(+), 50 deletions(-) delete mode 100644 src/demo/qml/+material/StyledRectangle.qml delete mode 100644 src/demo/qml/+universal/StyledRectangle.qml diff --git a/src/demo/qml/+material/StyledRectangle.qml b/src/demo/qml/+material/StyledRectangle.qml deleted file mode 100644 index f5bab2bd..00000000 --- a/src/demo/qml/+material/StyledRectangle.qml +++ /dev/null @@ -1,22 +0,0 @@ -/* - * This file is part of Fluid. - * - * Copyright (C) 2018 Pier Luigi Fiorini - * - * $BEGIN_LICENSE:MPL2$ - * - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - * - * $END_LICENSE$ - */ - -import QtQuick 2.10 -import QtQuick.Controls.Material 2.3 - -Rectangle { - color: Material.background - - Material.theme: index == 0 ? Material.Light : Material.Dark -} diff --git a/src/demo/qml/+universal/StyledRectangle.qml b/src/demo/qml/+universal/StyledRectangle.qml deleted file mode 100644 index 53528663..00000000 --- a/src/demo/qml/+universal/StyledRectangle.qml +++ /dev/null @@ -1,22 +0,0 @@ -/* - * This file is part of Fluid. - * - * Copyright (C) 2018 Pier Luigi Fiorini - * - * $BEGIN_LICENSE:MPL2$ - * - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - * - * $END_LICENSE$ - */ - -import QtQuick 2.10 -import QtQuick.Controls.Universal 2.3 - -Rectangle { - color: Universal.background - - Universal.theme: index == 0 ? Universal.Light : Universal.Dark -} diff --git a/src/demo/qml/StyledRectangle.qml b/src/demo/qml/StyledRectangle.qml index 65aac54c..f5bab2bd 100644 --- a/src/demo/qml/StyledRectangle.qml +++ b/src/demo/qml/StyledRectangle.qml @@ -13,9 +13,10 @@ */ import QtQuick 2.10 +import QtQuick.Controls.Material 2.3 Rectangle { - // Default styled rectangle is red to spot errors - // related to how styles are loaded - color: "red" + color: Material.background + + Material.theme: index == 0 ? Material.Light : Material.Dark } diff --git a/src/demo/qml/main.qml b/src/demo/qml/main.qml index 97054724..981c86ba 100644 --- a/src/demo/qml/main.qml +++ b/src/demo/qml/main.qml @@ -16,7 +16,6 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 -import QtQuick.Controls.Universal 2.3 import QtQuick.Layouts 1.3 import Fluid.Core 1.0 as FluidCore import Fluid.Controls 1.1 as FluidControls @@ -36,8 +35,6 @@ FluidControls.ApplicationWindow { Material.primary: Material.LightBlue Material.accent: Material.Blue - Universal.accent: Universal.Cobalt - FluidControls.NavigationDrawer { id: navDrawer From 62b168fe5533124deb8c23e9b64118890071aff4 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 12 May 2018 18:27:39 +0200 Subject: [PATCH 50/74] demo: Use a tool bar for the theme selector --- src/demo/qml/StyledPage.qml | 29 ++++++++++++++++++----------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/src/demo/qml/StyledPage.qml b/src/demo/qml/StyledPage.qml index 939777a0..7ef4fcc0 100644 --- a/src/demo/qml/StyledPage.qml +++ b/src/demo/qml/StyledPage.qml @@ -17,20 +17,27 @@ import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 Page { - header: Row { + Material.theme: lightRadio.checked ? Material.Light : Material.Dark + + header: ToolBar { spacing: 16 - RadioButton { - id: lightRadio - text: qsTr("Light") - checked: true - } + Material.background: Material.shade(Material.primary, Material.ShadeA700) + Material.theme: Material.Dark + + Row { + anchors.verticalCenter: parent.verticalCenter - RadioButton { - id: darkRadio - text: qsTr("Dark") + RadioButton { + id: lightRadio + text: qsTr("Light") + checked: true + } + + RadioButton { + id: darkRadio + text: qsTr("Dark") + } } } - - Material.theme: lightRadio.checked ? Material.Light : Material.Dark } From d143c1f40fdba01a4b06b03044fa2469ae06500c Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 12 May 2018 19:03:09 +0200 Subject: [PATCH 51/74] demo: List all files For better QtCreator integration. --- src/demo/demo.qbs | 47 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/src/demo/demo.qbs b/src/demo/demo.qbs index a4d86098..15684b35 100644 --- a/src/demo/demo.qbs +++ b/src/demo/demo.qbs @@ -46,11 +46,54 @@ Project { Qt.core.resourcePrefix: "/" Qt.core.resourceSourceBase: sourceDirectory - files: ["*.cpp", "*.h"] + files: [ + "iconcategorymodel.cpp", + "iconcategorymodel.h", + "iconnamemodel.cpp", + "iconnamemodel.h", + "main.cpp", + ] Group { name: "Resource Data" - files: ["images/**", "qml/**"] + files: [ + "images/balloon.jpg", + "images/materialbg.png", + "qml/icons.txt", + "qml/main.qml", + "qml/StyledPage.qml", + "qml/StyledRectangle.qml", + "qml/Pages/Basic/BusyIndicatorPage.qml", + "qml/Pages/Basic/ButtonPage.qml", + "qml/Pages/Basic/CheckBoxPage.qml", + "qml/Pages/Basic/ProgressBarPage.qml", + "qml/Pages/Basic/RadioButtonPage.qml", + "qml/Pages/Basic/SliderPage.qml", + "qml/Pages/Basic/SwitchPage.qml", + "qml/Pages/Controls/ActionButtonPage.qml", + "qml/Pages/Controls/BottomSheetPage.qml", + "qml/Pages/Controls/CardPage.qml", + "qml/Pages/Controls/ChipPage.qml", + "qml/Pages/Controls/DatePickerPage.qml", + "qml/Pages/Controls/DateTimePickerPage.qml", + "qml/Pages/Controls/DialogsPage.qml", + "qml/Pages/Controls/ListItemPage.qml", + "qml/Pages/Controls/NavDrawerPage.qml", + "qml/Pages/Controls/OverlayPage.qml", + "qml/Pages/Controls/Placeholder.qml", + "qml/Pages/Controls/Search.qml", + "qml/Pages/Controls/SnackBarPage.qml", + "qml/Pages/Controls/SubPage.qml", + "qml/Pages/Controls/TimePicker.qml", + "qml/Pages/Controls/WavePage.qml", + "qml/Pages/Layouts/AutomaticGridPage.qml", + "qml/Pages/Layouts/ColumnFlowPage.qml", + "qml/Pages/Style/IconsPage.qml", + "qml/Pages/Style/PalettePage.qml", + "qml/Pages/Style/PaletteSwatch.qml", + "qml/Pages/Style/SystemIconsPage.qml", + "qml/Pages/Style/TypographyPage.qml", + ] fileTags: ["qt.core.resource_data"] } From 120c64e03566f0c99fdf48bdc66a5a8f37aa1080 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 12 May 2018 19:09:09 +0200 Subject: [PATCH 52/74] demo: Rename files Other pages have the Page suffix. --- src/demo/demo.qbs | 6 +++--- .../Controls/{DatePicker.qml => DatePickerPage.qml} | 0 .../{DateTimePicker.qml => DateTimePickerPage.qml} | 0 .../Controls/{Placeholder.qml => PlaceholderPage.qml} | 0 .../qml/Pages/Controls/{Search.qml => SearchPage.qml} | 0 .../Controls/{TimePicker.qml => TimePickerPage.qml} | 0 src/demo/qml/main.qml | 10 +++++----- 7 files changed, 8 insertions(+), 8 deletions(-) rename src/demo/qml/Pages/Controls/{DatePicker.qml => DatePickerPage.qml} (100%) rename src/demo/qml/Pages/Controls/{DateTimePicker.qml => DateTimePickerPage.qml} (100%) rename src/demo/qml/Pages/Controls/{Placeholder.qml => PlaceholderPage.qml} (100%) rename src/demo/qml/Pages/Controls/{Search.qml => SearchPage.qml} (100%) rename src/demo/qml/Pages/Controls/{TimePicker.qml => TimePickerPage.qml} (100%) diff --git a/src/demo/demo.qbs b/src/demo/demo.qbs index 15684b35..ac3f70a0 100644 --- a/src/demo/demo.qbs +++ b/src/demo/demo.qbs @@ -80,11 +80,11 @@ Project { "qml/Pages/Controls/ListItemPage.qml", "qml/Pages/Controls/NavDrawerPage.qml", "qml/Pages/Controls/OverlayPage.qml", - "qml/Pages/Controls/Placeholder.qml", - "qml/Pages/Controls/Search.qml", + "qml/Pages/Controls/PlaceholderPage.qml", + "qml/Pages/Controls/SearchPage.qml", "qml/Pages/Controls/SnackBarPage.qml", "qml/Pages/Controls/SubPage.qml", - "qml/Pages/Controls/TimePicker.qml", + "qml/Pages/Controls/TimePickerPage.qml", "qml/Pages/Controls/WavePage.qml", "qml/Pages/Layouts/AutomaticGridPage.qml", "qml/Pages/Layouts/ColumnFlowPage.qml", diff --git a/src/demo/qml/Pages/Controls/DatePicker.qml b/src/demo/qml/Pages/Controls/DatePickerPage.qml similarity index 100% rename from src/demo/qml/Pages/Controls/DatePicker.qml rename to src/demo/qml/Pages/Controls/DatePickerPage.qml diff --git a/src/demo/qml/Pages/Controls/DateTimePicker.qml b/src/demo/qml/Pages/Controls/DateTimePickerPage.qml similarity index 100% rename from src/demo/qml/Pages/Controls/DateTimePicker.qml rename to src/demo/qml/Pages/Controls/DateTimePickerPage.qml diff --git a/src/demo/qml/Pages/Controls/Placeholder.qml b/src/demo/qml/Pages/Controls/PlaceholderPage.qml similarity index 100% rename from src/demo/qml/Pages/Controls/Placeholder.qml rename to src/demo/qml/Pages/Controls/PlaceholderPage.qml diff --git a/src/demo/qml/Pages/Controls/Search.qml b/src/demo/qml/Pages/Controls/SearchPage.qml similarity index 100% rename from src/demo/qml/Pages/Controls/Search.qml rename to src/demo/qml/Pages/Controls/SearchPage.qml diff --git a/src/demo/qml/Pages/Controls/TimePicker.qml b/src/demo/qml/Pages/Controls/TimePickerPage.qml similarity index 100% rename from src/demo/qml/Pages/Controls/TimePicker.qml rename to src/demo/qml/Pages/Controls/TimePickerPage.qml diff --git a/src/demo/qml/main.qml b/src/demo/qml/main.qml index 981c86ba..be3875b8 100644 --- a/src/demo/qml/main.qml +++ b/src/demo/qml/main.qml @@ -72,16 +72,16 @@ FluidControls.ApplicationWindow { ListElement { category: qsTr("Controls"); title: qsTr("Card"); source: "qrc:/qml/Pages/Controls/CardPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("Chip"); source: "qrc:/qml/Pages/Controls/ChipPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("Dialogs"); source: "qrc:/qml/Pages/Controls/DialogsPage.qml" } - ListElement { category: qsTr("Controls"); title: qsTr("DatePicker"); source: "qrc:/qml/Pages/Controls/DatePicker.qml" } - ListElement { category: qsTr("Controls"); title: qsTr("DateTimePicker"); source: "qrc:/qml/Pages/Controls/DateTimePicker.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("DatePicker"); source: "qrc:/qml/Pages/Controls/DatePickerPage.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("DateTimePicker"); source: "qrc:/qml/Pages/Controls/DateTimePickerPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("FAB"); source: "qrc:/qml/Pages/Controls/ActionButtonPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("ListItem"); source: "qrc:/qml/Pages/Controls/ListItemPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("NavigationDrawer"); source: "qrc:/qml/Pages/Controls/NavDrawerPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("Overlay"); source: "qrc:/qml/Pages/Controls/OverlayPage.qml" } - ListElement { category: qsTr("Controls"); title: qsTr("Placeholder"); source: "qrc:/qml/Pages/Controls/Placeholder.qml" } - ListElement { category: qsTr("Controls"); title: qsTr("Search"); source: "qrc:/qml/Pages/Controls/Search.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("Placeholder"); source: "qrc:/qml/Pages/Controls/PlaceholderPage.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("Search"); source: "qrc:/qml/Pages/Controls/SearchPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("SnackBar"); source: "qrc:/qml/Pages/Controls/SnackBarPage.qml" } - ListElement { category: qsTr("Controls"); title: qsTr("TimePicker"); source: "qrc:/qml/Pages/Controls/TimePicker.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("TimePicker"); source: "qrc:/qml/Pages/Controls/TimePickerPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("Wave"); source: "qrc:/qml/Pages/Controls/WavePage.qml" } ListElement { category: qsTr("Style"); title: qsTr("Palette"); source: "qrc:/qml/Pages/Style/PalettePage.qml" } ListElement { category: qsTr("Style"); title: qsTr("Typography"); source: "qrc:/qml/Pages/Style/TypographyPage.qml" } From 90b0a68e94a0f41148d94c03be2a5e23a01aa30f Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sun, 13 May 2018 08:10:51 +0200 Subject: [PATCH 53/74] demo: Use styled page everywhere --- src/demo/demo.qbs | 1 + .../qml/Pages/Basic/BusyIndicatorPage.qml | 30 +-- src/demo/qml/Pages/Basic/ButtonPage.qml | 182 ++++++------- src/demo/qml/Pages/Basic/CheckBoxPage.qml | 102 +++---- src/demo/qml/Pages/Basic/ProgressBarPage.qml | 148 +++++------ src/demo/qml/Pages/Basic/RadioButtonPage.qml | 103 +++---- src/demo/qml/Pages/Basic/SliderPage.qml | 251 +++++++++--------- src/demo/qml/Pages/Basic/SwitchPage.qml | 103 +++---- .../qml/Pages/Controls/ActionButtonPage.qml | 125 ++++----- src/demo/qml/Pages/Controls/CardPage.qml | 3 +- src/demo/qml/Pages/Controls/ChipPage.qml | 3 +- .../qml/Pages/Controls/PlaceholderPage.qml | 33 +-- src/demo/qml/StyledPageTwoColumns.qml | 40 +++ 13 files changed, 474 insertions(+), 650 deletions(-) create mode 100644 src/demo/qml/StyledPageTwoColumns.qml diff --git a/src/demo/demo.qbs b/src/demo/demo.qbs index ac3f70a0..0236e91a 100644 --- a/src/demo/demo.qbs +++ b/src/demo/demo.qbs @@ -62,6 +62,7 @@ Project { "qml/icons.txt", "qml/main.qml", "qml/StyledPage.qml", + "qml/StyledPageTwoColumns.qml", "qml/StyledRectangle.qml", "qml/Pages/Basic/BusyIndicatorPage.qml", "qml/Pages/Basic/ButtonPage.qml", diff --git a/src/demo/qml/Pages/Basic/BusyIndicatorPage.qml b/src/demo/qml/Pages/Basic/BusyIndicatorPage.qml index 83e5f228..77e16247 100644 --- a/src/demo/qml/Pages/Basic/BusyIndicatorPage.qml +++ b/src/demo/qml/Pages/Basic/BusyIndicatorPage.qml @@ -14,31 +14,11 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -import QtQuick.Layouts 1.3 -import "../.." +import "../.." as Components -Flickable { - clip: true - contentHeight: Math.max(layout.implicitHeight, height) - - ScrollBar.vertical: ScrollBar {} - - ColumnLayout { - id: layout - anchors.fill: parent - - Repeater { - model: 2 - - StyledRectangle { - Layout.fillWidth: true - Layout.fillHeight: true - - BusyIndicator { - anchors.centerIn: parent - running: true - } - } - } +Components.StyledPage { + BusyIndicator { + anchors.centerIn: parent + running: true } } diff --git a/src/demo/qml/Pages/Basic/ButtonPage.qml b/src/demo/qml/Pages/Basic/ButtonPage.qml index 683a8536..bd3b8e8d 100644 --- a/src/demo/qml/Pages/Basic/ButtonPage.qml +++ b/src/demo/qml/Pages/Basic/ButtonPage.qml @@ -16,115 +16,83 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 import Fluid.Controls 1.1 -import "../.." +import "../.." as Components -Flickable { - clip: true - contentHeight: Math.max(layout.implicitHeight, height) +Components.StyledPageTwoColumns { + leftColumn: ColumnLayout { + anchors.centerIn: parent - ScrollBar.vertical: ScrollBar {} - - ColumnLayout { - id: layout - anchors.fill: parent - - Repeater { - model: 2 - - StyledRectangle { - Layout.fillWidth: true - Layout.fillHeight: true - Layout.minimumWidth: grid.width + 80 - Layout.minimumHeight: grid.height + 80 - - GridLayout { - id: grid - anchors.centerIn: parent - columns: 2 - rows: 6 - - // Row 1 - - TitleLabel { - text: qsTr("Enabled") - - Layout.alignment: Qt.AlignHCenter - } - - TitleLabel { - text: qsTr("Disabled") - - Layout.alignment: Qt.AlignHCenter - } - - // Row 2 - - Button { - text: qsTr("Button") - } - - Button { - text: qsTr("Button") - enabled: false - } - - // Row 3 - - Button { - text: qsTr("Checked") - checkable: false - checked: true - } - - Button { - text: qsTr("Checked") - checkable: false - checked: true - enabled: false - } - - // Row 4 - - Button { - text: qsTr("Flat") - flat: true - } - - Button { - text: qsTr("Flat") - flat: true - enabled: false - } - - // Row 5 - - Button { - text: qsTr("Highlighted") - highlighted: true - } - - Button { - text: qsTr("Highlighted") - highlighted: true - enabled: false - } - - // Row 6 - - Button { - text: qsTr("Flat Highlighted") - flat: true - highlighted: true - } - - Button { - text: qsTr("Flat Highlighted") - flat: true - highlighted: true - enabled: false - } - } - } + TitleLabel { + text: qsTr("Enabled") + + Layout.alignment: Qt.AlignHCenter + } + + Button { + text: qsTr("Button") + } + + Button { + text: qsTr("Checked") + checkable: false + checked: true + } + + Button { + text: qsTr("Flat") + flat: true + } + + Button { + text: qsTr("Highlighted") + highlighted: true + } + + Button { + text: qsTr("Flat Highlighted") + flat: true + highlighted: true + } + } + + rightColumn: ColumnLayout { + anchors.centerIn: parent + + TitleLabel { + text: qsTr("Disabled") + + Layout.alignment: Qt.AlignHCenter + } + + Button { + text: qsTr("Button") + enabled: false + } + + Button { + text: qsTr("Checked") + checkable: false + checked: true + enabled: false + } + + Button { + text: qsTr("Flat") + flat: true + enabled: false + } + + Button { + text: qsTr("Highlighted") + highlighted: true + enabled: false + } + + Button { + text: qsTr("Flat Highlighted") + flat: true + highlighted: true + enabled: false } } } diff --git a/src/demo/qml/Pages/Basic/CheckBoxPage.qml b/src/demo/qml/Pages/Basic/CheckBoxPage.qml index e733034b..058d8f88 100644 --- a/src/demo/qml/Pages/Basic/CheckBoxPage.qml +++ b/src/demo/qml/Pages/Basic/CheckBoxPage.qml @@ -17,85 +17,49 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 import Fluid.Controls 1.1 -import "../.." +import "../.." as Components -Flickable { - clip: true - contentHeight: Math.max(layout.implicitHeight, height) +Components.StyledPageTwoColumns { + leftColumn: ColumnLayout { + anchors.centerIn: parent - ScrollBar.vertical: ScrollBar {} + TitleLabel { + text: qsTr("Enabled") - ColumnLayout { - id: layout - anchors.fill: parent - - Repeater { - model: 2 - - StyledRectangle { - Layout.fillWidth: true - Layout.fillHeight: true - Layout.minimumWidth: grid.width + 80 - Layout.minimumHeight: grid.height + 80 - - GridLayout { - id: grid - anchors.centerIn: parent - columns: 3 - rows: 3 - - // Row 1 - - Item { - width: 1 - height: 1 - } - - TitleLabel { - text: qsTr("Enabled") - - Layout.alignment: Qt.AlignHCenter - } - - TitleLabel { - text: qsTr("Disabled") - - Layout.alignment: Qt.AlignHCenter - } - - // Row 2 + Layout.alignment: Qt.AlignHCenter + } - Label { - text: qsTr("On") - } + CheckBox { + checked: true + text: checked ? qsTr("On") : qsTr("Off") + } - CheckBox { - checked: true - text: qsTr("CheckBox") - } + CheckBox { + checked: false + checkable: false + text: qsTr("Off") + } + } - CheckBox { - checked: true - enabled: false - text: qsTr("CheckBox") - } + rightColumn: ColumnLayout { + anchors.centerIn: parent - // Row 3 + TitleLabel { + text: qsTr("Disabled") - Label { - text: qsTr("Off") - } + Layout.alignment: Qt.AlignHCenter + } - CheckBox { - text: qsTr("CheckBox") - } + CheckBox { + checked: true + enabled: false + text: qsTr("On") + } - CheckBox { - text: qsTr("CheckBox") - enabled: false - } - } - } + CheckBox { + checked: false + enabled: false + text: qsTr("Off") } } } diff --git a/src/demo/qml/Pages/Basic/ProgressBarPage.qml b/src/demo/qml/Pages/Basic/ProgressBarPage.qml index 7eea1c37..f792e326 100644 --- a/src/demo/qml/Pages/Basic/ProgressBarPage.qml +++ b/src/demo/qml/Pages/Basic/ProgressBarPage.qml @@ -16,109 +16,97 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 import Fluid.Controls 1.1 -import "../.." +import "../.." as Components -Flickable { - clip: true - contentHeight: Math.max(layout.implicitHeight, height) +Components.StyledPageTwoColumns { + leftColumn: ColumnLayout { + anchors.centerIn: parent - ScrollBar.vertical: ScrollBar {} + TitleLabel { + text: qsTr("Determinate") - ColumnLayout { - id: layout - anchors.fill: parent + Layout.alignment: Qt.AlignHCenter + } - Repeater { - model: 2 + GridLayout { + rows: 2 + columns: 2 - StyledRectangle { - Layout.fillWidth: true - Layout.fillHeight: true - Layout.minimumWidth: grid.width + 80 - Layout.minimumHeight: grid.height + 80 + Label { + text: qsTr("Static") + } - GridLayout { - id: grid - anchors.centerIn: parent - columns: 3 + ProgressBar { + from: 0.0 + to: 1.0 + value: 0.5 + indeterminate: false + } - // Row 1 + Label { + text: qsTr("Animated") + } - Item { - width: 1 - height: 1 - } + ProgressBar { + from: 0.0 + to: 1.0 + indeterminate: false - TitleLabel { - text: qsTr("Determinate") + SequentialAnimation on value { + running: true + loops: NumberAnimation.Infinite - Layout.alignment: Qt.AlignHCenter + NumberAnimation { + from: 0.0 + to: 1.0 + duration: 3000 } + } + } + } + } - TitleLabel { - text: qsTr("Indeterminate") + rightColumn: ColumnLayout { + anchors.centerIn: parent - Layout.alignment: Qt.AlignHCenter - } + TitleLabel { + text: qsTr("Indeterminate") - // Row 2 + Layout.alignment: Qt.AlignHCenter + } - Label { - text: qsTr("Static") - } + GridLayout { + rows: 2 + columns: 2 - ProgressBar { - from: 0.0 - to: 1.0 - value: 0.5 - indeterminate: false - } + Label { + text: qsTr("Static") + } - ProgressBar { - from: 0.0 - to: 1.0 - value: 0.5 - indeterminate: true - } + ProgressBar { + from: 0.0 + to: 1.0 + value: 0.5 + indeterminate: true + } - // Row 3 + Label { + text: qsTr("Animated") + } - Label { - text: qsTr("Animated") - } + ProgressBar { + from: 0.0 + to: 1.0 + indeterminate: true - ProgressBar { - from: 0.0 - to: 1.0 - indeterminate: false - - SequentialAnimation on value { - running: true - loops: NumberAnimation.Infinite - - NumberAnimation { - from: 0.0 - to: 1.0 - duration: 3000 - } - } - } + SequentialAnimation on value { + running: true + loops: NumberAnimation.Infinite - ProgressBar { + NumberAnimation { from: 0.0 to: 1.0 - indeterminate: true - - SequentialAnimation on value { - running: true - loops: NumberAnimation.Infinite - - NumberAnimation { - from: 0.0 - to: 1.0 - duration: 3000 - } - } + duration: 3000 } } } diff --git a/src/demo/qml/Pages/Basic/RadioButtonPage.qml b/src/demo/qml/Pages/Basic/RadioButtonPage.qml index e7a6ae82..e328718d 100644 --- a/src/demo/qml/Pages/Basic/RadioButtonPage.qml +++ b/src/demo/qml/Pages/Basic/RadioButtonPage.qml @@ -16,85 +16,50 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 import Fluid.Controls 1.1 -import "../.." +import "../.." as Components -Flickable { - clip: true - contentHeight: Math.max(layout.implicitHeight, height) +Components.StyledPageTwoColumns { + leftColumn: ColumnLayout { + anchors.centerIn: parent - ScrollBar.vertical: ScrollBar {} + TitleLabel { + text: qsTr("Enabled") - ColumnLayout { - id: layout - anchors.fill: parent - - Repeater { - model: 2 - - StyledRectangle { - Layout.fillWidth: true - Layout.fillHeight: true - Layout.minimumWidth: grid.width + 80 - Layout.minimumHeight: grid.height + 80 - - GridLayout { - id: grid - anchors.centerIn: parent - columns: 3 - rows: 3 - - // Row 1 - - Item { - width: 1 - height: 1 - } - - TitleLabel { - text: qsTr("Enabled") - - Layout.alignment: Qt.AlignHCenter - } - - TitleLabel { - text: qsTr("Disabled") - - Layout.alignment: Qt.AlignHCenter - } - - // Row 2 + Layout.alignment: Qt.AlignHCenter + } - Label { - text: qsTr("On") - } + RadioButton { + checked: true + text: checked ? qsTr("On") : qsTr("Off") + } - RadioButton { - checked: true - text: qsTr("RadioButton") - } + RadioButton { + checked: false + checkable: false + text: qsTr("Off") + } + } - RadioButton { - checked: true - enabled: false - text: qsTr("RadioButton") - } + rightColumn: ColumnLayout { + anchors.centerIn: parent - // Row 3 + TitleLabel { + text: qsTr("Disabled") - Label { - text: qsTr("Off") - } + Layout.alignment: Qt.AlignHCenter + } - RadioButton { - text: qsTr("RadioButton") - } + RadioButton { + enabled: false + checked: true + text: checked ? qsTr("On") : qsTr("Off") + } - RadioButton { - text: qsTr("RadioButton") - enabled: false - } - } - } + RadioButton { + enabled: false + checked: false + checkable: false + text: qsTr("Off") } } } diff --git a/src/demo/qml/Pages/Basic/SliderPage.qml b/src/demo/qml/Pages/Basic/SliderPage.qml index ba0c8de6..7877f224 100644 --- a/src/demo/qml/Pages/Basic/SliderPage.qml +++ b/src/demo/qml/Pages/Basic/SliderPage.qml @@ -16,136 +16,127 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 import Fluid.Controls 1.1 -import "../.." - -Flickable { - clip: true - contentHeight: Math.max(layout.implicitHeight, height) - - ScrollBar.vertical: ScrollBar {} - - ColumnLayout { - id: layout - anchors.fill: parent - - Repeater { - model: 2 - - StyledRectangle { - Layout.fillWidth: true - Layout.fillHeight: true - Layout.minimumWidth: grid.width + 80 - Layout.minimumHeight: grid.height + 80 - - GridLayout { - id: grid - anchors.centerIn: parent - columns: 3 - rows: 3 - - // Row 1 - - Item { - width: 1 - height: 1 - } - - TitleLabel { - text: qsTr("Enabled") - - Layout.alignment: Qt.AlignHCenter - } - - TitleLabel { - text: qsTr("Disabled") - - Layout.alignment: Qt.AlignHCenter - } - - // Row 2 - - Label { - text: qsTr("Horizontal / Single") - } - - Slider { - from: 0.0 - to: 1.0 - value: 0.5 - } - - Slider { - from: 0.0 - to: 1.0 - value: 0.5 - enabled: false - } - - // Row 3 - - Label { - text: qsTr("Horizontal / Range") - } - - RangeSlider { - from: 0.0 - to: 1.0 - first.value: 0.4 - second.value: 0.6 - } - - RangeSlider { - from: 0.0 - to: 1.0 - first.value: 0.4 - second.value: 0.6 - enabled: false - } - - // Row 4 - - Label { - text: qsTr("Vertical / Single") - } - - Slider { - from: 0.0 - to: 1.0 - value: 0.5 - orientation: Qt.Vertical - } - - Slider { - from: 0.0 - to: 1.0 - value: 0.5 - enabled: false - orientation: Qt.Vertical - } - - // Row 5 - - Label { - text: qsTr("Vertical / Range") - } - - RangeSlider { - from: 0.0 - to: 1.0 - first.value: 0.4 - second.value: 0.6 - orientation: Qt.Vertical - } - - RangeSlider { - from: 0.0 - to: 1.0 - first.value: 0.4 - second.value: 0.6 - enabled: false - orientation: Qt.Vertical - } - } +import "../.." as Components + +Components.StyledPageTwoColumns { + leftColumn: ColumnLayout { + anchors.centerIn: parent + + TitleLabel { + text: qsTr("Enabled") + + Layout.alignment: Qt.AlignHCenter + } + + GridLayout { + rows: 4 + columns: 2 + + Label { + text: qsTr("Horizontal / Single") + } + + Slider { + from: 0.0 + to: 1.0 + value: 0.5 + } + + Label { + text: qsTr("Horizontal / Range") + } + + RangeSlider { + from: 0.0 + to: 1.0 + first.value: 0.4 + second.value: 0.6 + } + + Label { + text: qsTr("Vertical / Single") + } + + Slider { + from: 0.0 + to: 1.0 + value: 0.5 + orientation: Qt.Vertical + } + + Label { + text: qsTr("Vertical / Range") + } + + RangeSlider { + from: 0.0 + to: 1.0 + first.value: 0.4 + second.value: 0.6 + orientation: Qt.Vertical + } + } + } + + rightColumn: ColumnLayout { + anchors.centerIn: parent + + TitleLabel { + text: qsTr("Disabled") + + Layout.alignment: Qt.AlignHCenter + } + + GridLayout { + rows: 4 + columns: 2 + + Label { + text: qsTr("Horizontal / Single") + } + + Slider { + enabled: false + from: 0.0 + to: 1.0 + value: 0.5 + } + + Label { + text: qsTr("Horizontal / Range") + } + + RangeSlider { + enabled: false + from: 0.0 + to: 1.0 + first.value: 0.4 + second.value: 0.6 + } + + Label { + text: qsTr("Vertical / Single") + } + + Slider { + enabled: false + from: 0.0 + to: 1.0 + value: 0.5 + orientation: Qt.Vertical + } + + Label { + text: qsTr("Vertical / Range") + } + + RangeSlider { + enabled: false + from: 0.0 + to: 1.0 + first.value: 0.4 + second.value: 0.6 + orientation: Qt.Vertical } } } diff --git a/src/demo/qml/Pages/Basic/SwitchPage.qml b/src/demo/qml/Pages/Basic/SwitchPage.qml index 672152dd..80fa0bce 100644 --- a/src/demo/qml/Pages/Basic/SwitchPage.qml +++ b/src/demo/qml/Pages/Basic/SwitchPage.qml @@ -16,85 +16,50 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 import Fluid.Controls 1.1 -import "../.." +import "../.." as Components -Flickable { - clip: true - contentHeight: Math.max(layout.implicitHeight, height) +Components.StyledPageTwoColumns { + leftColumn: ColumnLayout { + anchors.centerIn: parent - ScrollBar.vertical: ScrollBar {} + TitleLabel { + text: qsTr("Enabled") - ColumnLayout { - id: layout - anchors.fill: parent - - Repeater { - model: 2 - - StyledRectangle { - Layout.fillWidth: true - Layout.fillHeight: true - Layout.minimumWidth: grid.width + 80 - Layout.minimumHeight: grid.height + 80 - - GridLayout { - id: grid - anchors.centerIn: parent - columns: 3 - rows: 3 - - // Row 1 - - Item { - width: 1 - height: 1 - } - - TitleLabel { - text: qsTr("Enabled") - - Layout.alignment: Qt.AlignHCenter - } - - TitleLabel { - text: qsTr("Disabled") - - Layout.alignment: Qt.AlignHCenter - } - - // Row 2 + Layout.alignment: Qt.AlignHCenter + } - Label { - text: qsTr("On") - } + Switch { + checked: true + text: checked ? qsTr("On") : qsTr("Off") + } - Switch { - checked: true - text: qsTr("Switch") - } + Switch { + checked: false + checkable: false + text: qsTr("Off") + } + } - Switch { - checked: true - enabled: false - text: qsTr("Switch") - } + rightColumn: ColumnLayout { + anchors.centerIn: parent - // Row 3 + TitleLabel { + text: qsTr("Disabled") - Label { - text: qsTr("Off") - } + Layout.alignment: Qt.AlignHCenter + } - Switch { - text: qsTr("Switch") - } + Switch { + enabled: false + checked: true + text: checked ? qsTr("On") : qsTr("Off") + } - Switch { - text: qsTr("Switch") - enabled: false - } - } - } + Switch { + enabled: false + checked: false + checkable: false + text: qsTr("Off") } } } diff --git a/src/demo/qml/Pages/Controls/ActionButtonPage.qml b/src/demo/qml/Pages/Controls/ActionButtonPage.qml index 728d9b50..8e9ebdbd 100644 --- a/src/demo/qml/Pages/Controls/ActionButtonPage.qml +++ b/src/demo/qml/Pages/Controls/ActionButtonPage.qml @@ -15,91 +15,70 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import Fluid.Controls 1.1 as FluidControls -import "../.." +import "../.." as Components -Flickable { - clip: true - contentHeight: Math.max(layout.implicitHeight, height) +Components.StyledPageTwoColumns { + leftColumn: Column { + anchors.centerIn: parent - ScrollBar.vertical: ScrollBar {} - - Column { - id: layout - anchors.fill: parent - - Repeater { - model: 2 - - StyledRectangle { - //y: height * index - width: parent.width - height: parent.height / 2 - - Row { - anchors.centerIn: parent - spacing: 64 + FluidControls.TitleLabel { + text: qsTr("Enabled") + } - Column { - FluidControls.TitleLabel { - text: qsTr("Enabled") - } + FluidControls.FloatingActionButton { + icon.source: FluidControls.Utils.iconUrl("device/airplanemode_active") + mini: false + } - FluidControls.FloatingActionButton { - icon.source: FluidControls.Utils.iconUrl("device/airplanemode_active") - mini: false - } + FluidControls.FloatingActionButton { + icon.source: FluidControls.Utils.iconUrl("navigation/check") + highlighted: true + mini: false + } - FluidControls.FloatingActionButton { - icon.source: FluidControls.Utils.iconUrl("navigation/check") - highlighted: true - mini: false - } + FluidControls.FloatingActionButton { + icon.source: FluidControls.Utils.iconUrl("device/airplanemode_active") + mini: true + } - FluidControls.FloatingActionButton { - icon.source: FluidControls.Utils.iconUrl("device/airplanemode_active") - mini: true - } + FluidControls.FloatingActionButton { + icon.source: FluidControls.Utils.iconUrl("navigation/check") + highlighted: true + mini: true + } + } - FluidControls.FloatingActionButton { - icon.source: FluidControls.Utils.iconUrl("navigation/check") - highlighted: true - mini: true - } - } + rightColumn: Column { + anchors.centerIn: parent - Column { - FluidControls.TitleLabel { - text: qsTr("Disabled") - } + FluidControls.TitleLabel { + text: qsTr("Disabled") + } - FluidControls.FloatingActionButton { - icon.source: FluidControls.Utils.iconUrl("device/airplanemode_active") - mini: false - enabled: false - } + FluidControls.FloatingActionButton { + icon.source: FluidControls.Utils.iconUrl("device/airplanemode_active") + mini: false + enabled: false + } - FluidControls.FloatingActionButton { - icon.source: FluidControls.Utils.iconUrl("navigation/check") - highlighted: true - mini: false - enabled: false - } + FluidControls.FloatingActionButton { + icon.source: FluidControls.Utils.iconUrl("navigation/check") + highlighted: true + mini: false + enabled: false + } - FluidControls.FloatingActionButton { - icon.source: FluidControls.Utils.iconUrl("device/airplanemode_active") - mini: true - enabled: false - } + FluidControls.FloatingActionButton { + icon.source: FluidControls.Utils.iconUrl("device/airplanemode_active") + mini: true + enabled: false + } - FluidControls.FloatingActionButton { - icon.source: FluidControls.Utils.iconUrl("navigation/check") - highlighted: true - mini: true - enabled: false - } - } - } - } + FluidControls.FloatingActionButton { + icon.source: FluidControls.Utils.iconUrl("navigation/check") + highlighted: true + mini: true + enabled: false } } } diff --git a/src/demo/qml/Pages/Controls/CardPage.qml b/src/demo/qml/Pages/Controls/CardPage.qml index bf4a30a2..b86857e9 100644 --- a/src/demo/qml/Pages/Controls/CardPage.qml +++ b/src/demo/qml/Pages/Controls/CardPage.qml @@ -15,8 +15,9 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import Fluid.Controls 1.1 +import "../.." as Components -Item { +Components.StyledPage { Card { id: card anchors.centerIn: parent diff --git a/src/demo/qml/Pages/Controls/ChipPage.qml b/src/demo/qml/Pages/Controls/ChipPage.qml index c6037b17..5b88d86c 100644 --- a/src/demo/qml/Pages/Controls/ChipPage.qml +++ b/src/demo/qml/Pages/Controls/ChipPage.qml @@ -14,8 +14,9 @@ import QtQuick 2.10 import Fluid.Controls 1.1 as FluidControls +import "../.." as Components -Item { +Components.StyledPage { Row { anchors.centerIn: parent spacing: 16 diff --git a/src/demo/qml/Pages/Controls/PlaceholderPage.qml b/src/demo/qml/Pages/Controls/PlaceholderPage.qml index 7ee19f96..d95c0fce 100644 --- a/src/demo/qml/Pages/Controls/PlaceholderPage.qml +++ b/src/demo/qml/Pages/Controls/PlaceholderPage.qml @@ -16,32 +16,13 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 import Fluid.Controls 1.1 as FluidControls -import "../.." +import "../.." as Components -Flickable { - clip: true - contentHeight: Math.max(layout.implicitHeight, height) - - ScrollBar.vertical: ScrollBar {} - - ColumnLayout { - id: layout - anchors.fill: parent - - Repeater { - model: 2 - - StyledRectangle { - Layout.fillWidth: true - Layout.fillHeight: true - - FluidControls.Placeholder { - anchors.centerIn: parent - icon.source: FluidControls.Utils.iconUrl("social/notifications_none") - text: qsTr("No notifications") - subText: qsTr("At the moment there are no notifications available") - } - } - } +Components.StyledPage { + FluidControls.Placeholder { + anchors.centerIn: parent + icon.source: FluidControls.Utils.iconUrl("social/notifications_none") + text: qsTr("No notifications") + subText: qsTr("At the moment there are no notifications available") } } diff --git a/src/demo/qml/StyledPageTwoColumns.qml b/src/demo/qml/StyledPageTwoColumns.qml new file mode 100644 index 00000000..cce118be --- /dev/null +++ b/src/demo/qml/StyledPageTwoColumns.qml @@ -0,0 +1,40 @@ +/* + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:MPL2$ + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * + * $END_LICENSE$ + */ + +import QtQuick 2.10 + +StyledPage { + id: page + + property alias leftColumn: leftColumn.data + property alias rightColumn: rightColumn.data + + Row { + anchors.fill: parent + + Item { + id: leftColumn + + width: parent.width * 0.5 + height: parent.height + } + + Item { + id: rightColumn + + width: parent.width * 0.5 + height: parent.height + } + } +} From ee766b1fdf7fc071ae0a85eabc4aa63dde91171b Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Wed, 29 Aug 2018 21:50:16 +0200 Subject: [PATCH 54/74] demo: Use a combo box to select the theme --- src/demo/qml/StyledPage.qml | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/src/demo/qml/StyledPage.qml b/src/demo/qml/StyledPage.qml index 7ef4fcc0..97f59d86 100644 --- a/src/demo/qml/StyledPage.qml +++ b/src/demo/qml/StyledPage.qml @@ -17,27 +17,21 @@ import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 Page { - Material.theme: lightRadio.checked ? Material.Light : Material.Dark + Material.theme: themeCombo.currentIndex === 0 ? Material.Light : Material.Dark header: ToolBar { spacing: 16 + padding: 8 Material.background: Material.shade(Material.primary, Material.ShadeA700) Material.theme: Material.Dark - Row { - anchors.verticalCenter: parent.verticalCenter + ComboBox { + id: themeCombo + model: [qsTr("Light"), qsTr("Dark")] - RadioButton { - id: lightRadio - text: qsTr("Light") - checked: true - } - - RadioButton { - id: darkRadio - text: qsTr("Dark") - } + Material.elevation: 0 + Material.theme: Material.Dark } } } From 66a5ddbec1df8f0f0d7033767c942fa190e119ca Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Mon, 10 Sep 2018 06:51:13 +0200 Subject: [PATCH 55/74] Fix NavigationListView being empty Remove references to QtQuick.Layouts since it's not really used and make an example to test it. Closes: #266 --- src/demo/demo.qbs | 1 + .../Pages/Controls/NavigationListViewPage.qml | 55 +++++++++++++++++++ src/demo/qml/main.qml | 1 + src/imports/controls/NavigationListView.qml | 14 ++--- 4 files changed, 63 insertions(+), 8 deletions(-) create mode 100644 src/demo/qml/Pages/Controls/NavigationListViewPage.qml diff --git a/src/demo/demo.qbs b/src/demo/demo.qbs index 0236e91a..be2b8144 100644 --- a/src/demo/demo.qbs +++ b/src/demo/demo.qbs @@ -59,6 +59,7 @@ Project { files: [ "images/balloon.jpg", "images/materialbg.png", + "qml/Pages/Controls/NavigationListViewPage.qml", "qml/icons.txt", "qml/main.qml", "qml/StyledPage.qml", diff --git a/src/demo/qml/Pages/Controls/NavigationListViewPage.qml b/src/demo/qml/Pages/Controls/NavigationListViewPage.qml new file mode 100644 index 00000000..2f114039 --- /dev/null +++ b/src/demo/qml/Pages/Controls/NavigationListViewPage.qml @@ -0,0 +1,55 @@ +/* + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:MPL2$ + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * + * $END_LICENSE$ + */ + +import QtQuick 2.10 +import QtQuick.Controls 2.3 +import Fluid.Controls 1.1 as FluidControls +import "../.." + +Item { + FluidControls.NavigationListView { + id: navListView + + autoHighlight: autoHighlightCheckBox.checked + + topContent: Image { + width: parent.width + height: 200 + source: "qrc:/images/materialbg.png" + } + + actions: [ + FluidControls.Action { + text: "Action 1" + }, + FluidControls.Action { + text: "Action 2" + } + ] + } + + Column { + anchors.centerIn: parent + + CheckBox { + id: autoHighlightCheckBox + text: qsTr("Auto highlight") + } + + Button { + text: navListView.opened ? qsTr("Close") : qsTr("Open") + onClicked: navListView.opened ? navListView.close() : navListView.open() + } + } +} diff --git a/src/demo/qml/main.qml b/src/demo/qml/main.qml index be3875b8..31983308 100644 --- a/src/demo/qml/main.qml +++ b/src/demo/qml/main.qml @@ -77,6 +77,7 @@ FluidControls.ApplicationWindow { ListElement { category: qsTr("Controls"); title: qsTr("FAB"); source: "qrc:/qml/Pages/Controls/ActionButtonPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("ListItem"); source: "qrc:/qml/Pages/Controls/ListItemPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("NavigationDrawer"); source: "qrc:/qml/Pages/Controls/NavDrawerPage.qml" } + ListElement { category: qsTr("Controls"); title: qsTr("NavigationListView"); source: "qrc:/qml/Pages/Controls/NavigationListViewPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("Overlay"); source: "qrc:/qml/Pages/Controls/OverlayPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("Placeholder"); source: "qrc:/qml/Pages/Controls/PlaceholderPage.qml" } ListElement { category: qsTr("Controls"); title: qsTr("Search"); source: "qrc:/qml/Pages/Controls/SearchPage.qml" } diff --git a/src/imports/controls/NavigationListView.qml b/src/imports/controls/NavigationListView.qml index fbe4efde..bc81e06d 100644 --- a/src/imports/controls/NavigationListView.qml +++ b/src/imports/controls/NavigationListView.qml @@ -13,7 +13,6 @@ */ import QtQuick 2.10 -import QtQuick.Layouts 1.3 import QtQuick.Controls 2.3 import Fluid.Core 1.0 as FluidCore import Fluid.Controls 1.0 as FluidControls @@ -34,8 +33,10 @@ import Fluid.Controls 1.0 as FluidControls This navigation drawer comes with a built-in ListView. \code + import QtQuick 2.10 + import QtQuick.Controls 2.3 import QtQuick.Window 2.2 - import Fluid.Controls 2.0 as FluidControls + import Fluid.Controls 1.0 as FluidControls Window { id: window @@ -50,10 +51,9 @@ import Fluid.Controls 1.0 as FluidControls FluidControls.NavigationListView { topContent: Image { + width: parent.width + height: 200 source: "background.png" - - Layout.fillWidth: true - Layout.preferredHeight: 200 } actions: [ @@ -114,6 +114,7 @@ FluidControls.NavigationDrawer { property alias delegate : navDrawerListView.delegate ScrollView { + anchors.fill: parent clip: true ListView { @@ -144,8 +145,5 @@ FluidControls.NavigationDrawer { visible: count > 0 } - - Layout.fillWidth: true - Layout.fillHeight: true } } From 715b49e93b7214b2e37437263332bbf2a2c52585 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Thu, 30 Aug 2018 08:25:15 +0200 Subject: [PATCH 56/74] Drop online documentation It's basically the same as offline documentation so there is no point in having two configurations. --- .travis/deploy.sh | 2 +- doc/doc.qbs | 1 - doc/fluid-online.qdocconf | 67 --------------------------------------- doc/online.qbs | 41 ------------------------ 4 files changed, 1 insertion(+), 110 deletions(-) delete mode 100644 doc/fluid-online.qdocconf delete mode 100644 doc/online.qbs diff --git a/.travis/deploy.sh b/.travis/deploy.sh index 0ea38476..dadd22d4 100755 --- a/.travis/deploy.sh +++ b/.travis/deploy.sh @@ -43,5 +43,5 @@ openssl aes-256-cbc -K $encrypted_a841ddf051d0_key -iv $encrypted_a841ddf051d0_i chmod 600 /tmp/github_deploy_key_liri_ci eval "$(ssh-agent -s)" ssh-add /tmp/github_deploy_key_liri_ci -rsync -crvz --rsh="ssh" --delete-after --delete-excluded build/default/fluid-online-doc.*/qdoc_html/ $DEPLOY_USER@$DEPLOY_HOST:$TRAVIS_BRANCH +rsync -crvz --rsh="ssh" --delete-after --delete-excluded build/default/fluid-offline-doc.*/qdoc_html/ $DEPLOY_USER@$DEPLOY_HOST:$TRAVIS_BRANCH scp $filename $DEPLOY_USER@$DEPLOY_HOST:$TRAVIS_BRANCH/$destfilename diff --git a/doc/doc.qbs b/doc/doc.qbs index b0426078..e4387911 100644 --- a/doc/doc.qbs +++ b/doc/doc.qbs @@ -11,7 +11,6 @@ Project { condition: project.withDocumentation && !qbs.targetOS.contains("android") references: [ - "online.qbs", "offline.qbs", ] } diff --git a/doc/fluid-online.qdocconf b/doc/fluid-online.qdocconf deleted file mode 100644 index 8331ca4f..00000000 --- a/doc/fluid-online.qdocconf +++ /dev/null @@ -1,67 +0,0 @@ -include(config/fluid-project.qdocconf) -include($QT_INSTALL_DOCS/global/qt-html-templates-offline.qdocconf) - -HTML.nonavigationbar = "false" - -HTML.navigationseparator = "" - -HTML.stylesheets = \ - template/style/base.css \ - template/style/liri.css \ - template/style/liri.eot \ - template/style/liri.svg \ - template/style/liri.ttf \ - template/style/liri.woff - -HTML.headerstyles = \ - "\n" \ - " \n" \ - " \n" \ - " \n" \ - " \n" \ - " \n" \ - "\n" \ - -HTML.headerscripts = \ - " \n" \ - -HTML.endheader = \ - "\n" - -HTML.postheader = \ - "\n" \ - "\n" \ - "
\n" \ - "
\n" \ - "
\n" \ - " \n" \ - " Liri\n" \ - " Fluid API\n" \ - "
\n" \ - "
\n" \ - "
\n" \ - "
\n" \ - "
\n" \ - "
\n" \ - "
\n" \ - " \n" \ - "
\n" \ - "
    \n" \ - "\n" \ - -HTML.postpostheader = \ - "\n" \ - "
\n" \ - "\n" \ - -HTML.prologue = "" - -HTML.footer = \ - "\n" \ - "
\n" \ - "
\n" \ - "
\n" \ - "
\n" \ - "
\n" \ - "\n" \ diff --git a/doc/online.qbs b/doc/online.qbs deleted file mode 100644 index c7e9f9e3..00000000 --- a/doc/online.qbs +++ /dev/null @@ -1,41 +0,0 @@ -import qbs 1.0 - -Product { - name: "fluid-online-doc" - builtByDefault: false - type: "qdoc-output" - - Depends { name: "lirideployment" } - Depends { name: "Qt.core"; versionAtLeast: project.minimumQtVersion } - - Qt.core.qdocEnvironment: project.qdocEnvironment.concat([ - "SRCDIR=" + path, - "QT_INSTALL_DOCS=" + Qt.core.docPath, - "QT_VERSION=" + Qt.core.version - ]) - - files: [ - "config/*.qdocconf", - "src/*.qdoc", - "src/controls/*.qdoc", - ] - - Group { - name: "Online qdocconf file" - files: "fluid-online.qdocconf" - fileTags: "qdocconf-main" - } - - Group { - name: "Style" - prefix: "template/style/" - files: "**" - } - - Group { - fileTagsFilter: ["qdoc-output"] - qbs.install: true - qbs.installDir: qbs.targetOS.contains("linux") ? lirideployment.docDir + "/fluid/online-html" : "Docs" - qbs.installSourceBase: Qt.core.qdocOutputDir - } -} From 226ead195a6dcb546fb066b6cbda26836d45b3e0 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Thu, 30 Aug 2018 08:29:51 +0200 Subject: [PATCH 57/74] List all documentation files Makes it easier to work with QtCreator. --- doc/offline.qbs | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/doc/offline.qbs b/doc/offline.qbs index 655b80ee..71dd5010 100644 --- a/doc/offline.qbs +++ b/doc/offline.qbs @@ -15,9 +15,22 @@ Product { ]) files: [ - "config/*.qdocconf", - "src/*.qdoc", - "src/controls/*.qdoc", + "config/fluid-project.qdocconf", + "config/macros.qdocconf", + "src/deployment.qdoc", + "src/fluidcontrols-qmltypes.qdoc", + "src/fluidcore-qmltypes.qdoc", + "src/fluideffects-qmltypes.qdoc", + "src/fluidlayouts-qmltypes.qdoc", + "src/fluidtemplates-qmltypes.qdoc", + "src/index.qdoc", + "src/controls/AppBar.qdoc", + "src/controls/ApplicationWindow.qdoc", + "src/controls/AppToolBar.qdoc", + "src/controls/Chip.qdoc", + "src/controls/Page.qdoc", + "src/controls/PageSidebar.qdoc", + "src/controls/SearchBar.qdoc", ] Group { @@ -29,7 +42,14 @@ Product { Group { name: "Style" prefix: "template/style/" - files: "**" + files: [ + "base.css", + "liri.css", + "liri.eot", + "liri.svg", + "liri.ttf", + "liri.woff", + ] } Group { From b8335830d59a342ef2737f616e8bb9b4ac5042a0 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Thu, 30 Aug 2018 08:40:10 +0200 Subject: [PATCH 58/74] Separate code from documentation --- doc/offline.qbs | 19 +++++--- doc/src/controls/Action.qdoc | 62 ++++++++++++++++++++++++ doc/src/controls/AlertDialog.qdoc | 41 ++++++++++++++++ doc/src/controls/BodyLabel.qdoc | 42 ++++++++++++++++ doc/src/controls/BottomSheet.qdoc | 41 ++++++++++++++++ doc/src/controls/BottomSheetGrid.qdoc | 59 ++++++++++++++++++++++ src/imports/controls/Action.qml | 44 ----------------- src/imports/controls/AlertDialog.qml | 23 --------- src/imports/controls/BodyLabel.qml | 24 --------- src/imports/controls/BottomSheet.qml | 23 --------- src/imports/controls/BottomSheetGrid.qml | 39 --------------- 11 files changed, 257 insertions(+), 160 deletions(-) create mode 100644 doc/src/controls/Action.qdoc create mode 100644 doc/src/controls/AlertDialog.qdoc create mode 100644 doc/src/controls/BodyLabel.qdoc create mode 100644 doc/src/controls/BottomSheet.qdoc create mode 100644 doc/src/controls/BottomSheetGrid.qdoc diff --git a/doc/offline.qbs b/doc/offline.qbs index 71dd5010..f453ccd7 100644 --- a/doc/offline.qbs +++ b/doc/offline.qbs @@ -17,6 +17,18 @@ Product { files: [ "config/fluid-project.qdocconf", "config/macros.qdocconf", + "src/controls/Action.qdoc", + "src/controls/AlertDialog.qdoc", + "src/controls/AppBar.qdoc", + "src/controls/AppToolBar.qdoc", + "src/controls/ApplicationWindow.qdoc", + "src/controls/BodyLabel.qdoc", + "src/controls/BottomSheet.qdoc", + "src/controls/BottomSheetGrid.qdoc", + "src/controls/Chip.qdoc", + "src/controls/Page.qdoc", + "src/controls/PageSidebar.qdoc", + "src/controls/SearchBar.qdoc", "src/deployment.qdoc", "src/fluidcontrols-qmltypes.qdoc", "src/fluidcore-qmltypes.qdoc", @@ -24,13 +36,6 @@ Product { "src/fluidlayouts-qmltypes.qdoc", "src/fluidtemplates-qmltypes.qdoc", "src/index.qdoc", - "src/controls/AppBar.qdoc", - "src/controls/ApplicationWindow.qdoc", - "src/controls/AppToolBar.qdoc", - "src/controls/Chip.qdoc", - "src/controls/Page.qdoc", - "src/controls/PageSidebar.qdoc", - "src/controls/SearchBar.qdoc", ] Group { diff --git a/doc/src/controls/Action.qdoc b/doc/src/controls/Action.qdoc new file mode 100644 index 00000000..e80e1738 --- /dev/null +++ b/doc/src/controls/Action.qdoc @@ -0,0 +1,62 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * Copyright (C) 2018 Michael Spencer + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype Action + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Represents an action shown in an action bar, context menu, or list. + + One of the most common uses of actions is displaying actions in the action bar of a page + using the \l Page::actions property. See the example for \l Page for more details. + + Actions may contain \l text, an \l icon, a \l toolTip and a \l shortcut. + + \snippet fluidcontrols-action.qml action +*/ + +/*! + \qmlproperty string Action::toolTip + + The tool tip displayed for the action. +*/ + +/*! + \qmlproperty bool Action::visible + + Set to \c false to hide the action in the UI. + + This property is \c true by default. +*/ + +/*! + \qmlproperty bool Action::hasDividerAfter + + Set to \c true to display a divider after the control bound to this action. + + This property is \c false by default. +*/ + +/*! + \qmlproperty bool Action::hoverAnimation + + Set to \c true to rotate the icon 90 degrees on mouseover. + + This property is \c false by default. +*/ diff --git a/doc/src/controls/AlertDialog.qdoc b/doc/src/controls/AlertDialog.qdoc new file mode 100644 index 00000000..a76c005f --- /dev/null +++ b/doc/src/controls/AlertDialog.qdoc @@ -0,0 +1,41 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype AlertDialog + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Alert dialogs are urgent interruptions to inform the user about a situation. + + An alert dialog is used to interrupt the user's workflow to inform them about + a situation that requires their acknowledgement. + + Most alert don't need a title and they summarize a decision in a sentence or two + by either asking a question or making a statement related to the action buttons. + + \snippet fluidcontrols-alertdialog.qml file + + For more information you can read the + \l{https://material.io/guidelines/components/dialogs.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty string AlertDialog::text + + Informative text to display. +*/ diff --git a/doc/src/controls/BodyLabel.qdoc b/doc/src/controls/BodyLabel.qdoc new file mode 100644 index 00000000..2f024fff --- /dev/null +++ b/doc/src/controls/BodyLabel.qdoc @@ -0,0 +1,42 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype BodyLabel + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Text label with standard font and styling suitable to body text. + + Text label for the Material Design body text style. + + \snippet fluidcontrols-bodylabel.qml file + + For more information you can read the + \l{https://material.io/guidelines/style/typography.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty int BodyLabel::level + + This property holds the label level that controls + font style and size. + + It can be either 1 or 2. + + Default value is 1. +*/ diff --git a/doc/src/controls/BottomSheet.qdoc b/doc/src/controls/BottomSheet.qdoc new file mode 100644 index 00000000..af87041d --- /dev/null +++ b/doc/src/controls/BottomSheet.qdoc @@ -0,0 +1,41 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype BottomSheet + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief A sheet of paper that slides up from the bottom. + + A sheet of paper that slides up from the bottom edge of the screen and presents + a set of clear and simple actions. + + \snippet fluidcontrols-bottomsheet.qml file + + For more information you can read the + \l{https://material.io/guidelines/components/bottom-sheets.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty int BottomSheet::maxHeight + + Maximum height of the bottom sheet. + + By default it's set to the height of the \c ApplicationWindow + minus \c AppBar height. +*/ diff --git a/doc/src/controls/BottomSheetGrid.qdoc b/doc/src/controls/BottomSheetGrid.qdoc new file mode 100644 index 00000000..4f5a378b --- /dev/null +++ b/doc/src/controls/BottomSheetGrid.qdoc @@ -0,0 +1,59 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype BottomSheetGrid + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + \inherits BottomSheet + + \brief A sheet of paper with actions and an optional title that slides up from the bottom. + + A sheet of paper that displays actions in a grid and an optional title that slides up + from the bottom edge of the screen and presents a set of clear and simple actions. + + \snippet fluidcontrols-bottomsheetgrid.qml file + + For more information you can read the + \l{https://material.io/guidelines/components/bottom-sheets.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty string BottomSheetGrid::title + + Title. +*/ + +/*! + \qmlproperty list BottomSheetGrid::actions + + Actions to display in the bottom sheet. +*/ + +/*! + \qmlproperty int BottomSheetGrid::columns + + Number of columns. + By default it's set to fit the screen width. +*/ + +/*! + \qmlproperty int BottomSheetGrid::rows + + Number of rows. + By default it's set to fit the screen size based on the \l columns. +*/ diff --git a/src/imports/controls/Action.qml b/src/imports/controls/Action.qml index ad63f5b4..364812ba 100644 --- a/src/imports/controls/Action.qml +++ b/src/imports/controls/Action.qml @@ -15,56 +15,12 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 as QQC2 -import Fluid.Core 1.0 -/*! - \qmltype Action - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Represents an action shown in an action bar, context menu, or list. - - One of the most common uses of actions is displaying actions in the action bar of a page - using the \l Page::actions property. See the example for \l Page for more details. - - Actions may contain \l text, an \l icon, a \l toolTip and a \l shortcut. - - \snippet fluidcontrols-action.qml action -*/ QQC2.Action { id: action - /*! - \qmlproperty string toolTip - - The tool tip displayed for the action. - */ property string toolTip - - /*! - \qmlproperty bool visible - - Set to \c false to hide the action in the UI. - - This property is \c true by default. - */ property bool visible: true - - /*! - \qmlproperty bool hasDividerAfter - - Set to \c true to display a divider after the control bound to this action. - - This property is \c false by default. - */ property bool hasDividerAfter: false - - /*! - \qmlproperty bool hoverAnimation - - Set to \c true to rotate the icon 90 degrees on mouseover. - - This property is \c false by default. - */ property bool hoverAnimation: false } diff --git a/src/imports/controls/AlertDialog.qml b/src/imports/controls/AlertDialog.qml index 7131c32a..e547e2a7 100644 --- a/src/imports/controls/AlertDialog.qml +++ b/src/imports/controls/AlertDialog.qml @@ -16,35 +16,12 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import Fluid.Controls 1.0 as FluidControls -/*! - \qmltype AlertDialog - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Alert dialogs are urgent interruptions to inform the user about a situation. - - An alert dialog is used to interrupt the user's workflow to inform them about - a situation that requires their acknowledgement. - - Most alert don't need a title and they summarize a decision in a sentence or two - by either asking a question or making a statement related to the action buttons. - - \snippet fluidcontrols-alertdialog.qml file - - For more information you can read the - \l{https://material.io/guidelines/components/dialogs.html}{Material Design guidelines}. -*/ Dialog { /*! \internal */ default property alias content: dialogContent.data - /*! - \qmlproperty string text - - Informative text to display. - */ property alias text: dialogLabel.text x: (parent.width - width) / 2 diff --git a/src/imports/controls/BodyLabel.qml b/src/imports/controls/BodyLabel.qml index 2c54e87c..7995f688 100644 --- a/src/imports/controls/BodyLabel.qml +++ b/src/imports/controls/BodyLabel.qml @@ -16,31 +16,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import Fluid.Core 1.0 as FluidCore -/*! - \qmltype BodyLabel - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Text label with standard font and styling suitable to body text. - - Text label for the Material Design body text style. - - \snippet fluidcontrols-bodylabel.qml file - - For more information you can read the - \l{https://material.io/guidelines/style/typography.html}{Material Design guidelines}. -*/ Label { - /*! - \qmlproperty int level - - This property holds the label level that controls - font style and size. - - It can be either 1 or 2. - - Default value is 1. - */ property int level: 1 font.pixelSize: FluidCore.Device.isMobile ? 14 : 13 diff --git a/src/imports/controls/BottomSheet.qml b/src/imports/controls/BottomSheet.qml index 45138959..3fb7f420 100644 --- a/src/imports/controls/BottomSheet.qml +++ b/src/imports/controls/BottomSheet.qml @@ -17,21 +17,6 @@ import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 import Fluid.Controls 1.0 as FluidControls -/*! - \qmltype BottomSheet - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief A sheet of paper that slides up from the bottom. - - A sheet of paper that slides up from the bottom edge of the screen and presents - a set of clear and simple actions. - - \snippet fluidcontrols-bottomsheet.qml file - - For more information you can read the - \l{https://material.io/guidelines/components/bottom-sheets.html}{Material Design guidelines}. -*/ Drawer { id: bottomSheet @@ -40,14 +25,6 @@ Drawer { */ default property alias content: containerPane.data - /*! - \qmlproperty int maxHeight - - Maximum height of the bottom sheet. - - By default it's set to the height of the \c ApplicationWindow - minus \c AppBar height. - */ property int maxHeight: ApplicationWindow.contentItem.height - ApplicationWindow.header.height modal: true diff --git a/src/imports/controls/BottomSheetGrid.qml b/src/imports/controls/BottomSheetGrid.qml index 33baa9df..59e21c14 100644 --- a/src/imports/controls/BottomSheetGrid.qml +++ b/src/imports/controls/BottomSheetGrid.qml @@ -20,52 +20,13 @@ import QtQuick.Templates 2.0 as T import Fluid.Controls 1.0 import Fluid.Layouts 1.0 as FluidLayouts -/*! - \qmltype BottomSheetGrid - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - \brief A sheet of paper with actions and an optional title that slides up from the bottom. - - A sheet of paper that displays actions in a grid and an optional title that slides up - from the bottom edge of the screen and presents a set of clear and simple actions. - - \snippet fluidcontrols-bottomsheetgrid.qml file - - For more information you can read the - \l{https://material.io/guidelines/components/bottom-sheets.html}{Material Design guidelines}. -*/ BottomSheet { id: bottomSheet - /*! - \qmlproperty string title - - Title. - */ property string title - - /*! - \qmlproperty list actions - - Actions to display in the bottom sheet. - */ property list actions - - /*! - \qmlproperty int columns - - Number of columns. - By default it's set to fit the screen width. - */ property alias columns: grid.columns - - /*! - \qmlproperty int rows - - Number of rows. - By default it's set to fit the screen size based on the \l columns. - */ property alias rows: grid.rows height: Math.min(implicitHeight, maxHeight) From c041b0b70ef6d9f069e0e3b526fc8949661486d8 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 1 Sep 2018 17:59:34 +0200 Subject: [PATCH 59/74] Move documentation of QML files In order to support multiple versions we have to duplicate QML files, but the documentation cannot be duplicated as well. --- doc/offline.qbs | 36 ++++ doc/src/controls/Action.qdoc | 8 +- doc/src/controls/AlertDialog.qdoc | 2 +- doc/src/controls/AppBar.qdoc | 28 +-- doc/src/controls/AppToolBar.qdoc | 10 +- doc/src/controls/ApplicationWindow.qdoc | 10 +- doc/src/controls/BodyLabel.qdoc | 2 +- doc/src/controls/BottomSheet.qdoc | 2 +- doc/src/controls/BottomSheetGrid.qdoc | 8 +- doc/src/controls/BottomSheetList.qodc | 45 ++++ doc/src/controls/CaptionLabel.qdoc | 31 +++ doc/src/controls/Card.qdoc | 29 +++ doc/src/controls/Chip.qdoc | 10 +- doc/src/controls/CircleImage.qdoc | 81 +++++++ doc/src/controls/DatePickerDialog.qdoc | 115 ++++++++++ doc/src/controls/DateTimePickerDialog.qdoc | 115 ++++++++++ doc/src/controls/DialogLabel.qdoc | 31 +++ doc/src/controls/DisplayLabel.qdoc | 42 ++++ doc/src/controls/FloatingActionButton.qdoc | 49 +++++ doc/src/controls/HeadlineLabel.qdoc | 31 +++ doc/src/controls/Icon.qdoc | 146 +++++++++++++ doc/src/controls/InputDialog.qdoc | 42 ++++ doc/src/controls/ListItem.qdoc | 78 +++++++ doc/src/controls/Loadable.qdoc | 66 ++++++ doc/src/controls/NavigationDrawer.qdoc | 82 ++++++++ doc/src/controls/NavigationListView.qdoc | 106 ++++++++++ doc/src/controls/NoiseBackground.qdoc | 40 ++++ doc/src/controls/OverlayView.qdoc | 33 +++ doc/src/controls/Page.qdoc | 20 +- doc/src/controls/PageStack.qdoc | 43 ++++ doc/src/controls/Placeholder.qdoc | 45 ++++ doc/src/controls/Ripple.qdoc | 79 +++++++ doc/src/controls/SearchBar.qdoc | 30 +-- doc/src/controls/Showable.qdoc | 48 +++++ doc/src/controls/Sidebar.qdoc | 78 +++++++ doc/src/controls/SmoothFadeImage.qdoc | 199 ++++++++++++++++++ doc/src/controls/SmoothFadeLoader.qdoc | 75 +++++++ doc/src/controls/SnackBar.qdoc | 89 ++++++++ doc/src/controls/Subheader.qdoc | 33 +++ doc/src/controls/SubheadingLabel.qdoc | 42 ++++ doc/src/controls/Tab.qdoc | 44 ++++ doc/src/controls/TabbedPage.qdoc | 90 ++++++++ doc/src/controls/ThinDivider.qdoc | 24 +++ doc/src/controls/TimePickerDialog.qdoc | 90 ++++++++ doc/src/controls/TitleLabel.qdoc | 32 +++ doc/src/controls/ToolButton.qdoc | 31 +++ doc/src/controls/Units.qdoc | 99 +++++++++ doc/src/controls/Wave.qdoc | 88 ++++++++ src/imports/controls/BottomSheetList.qml | 26 --- src/imports/controls/CaptionLabel.qml | 14 -- src/imports/controls/Card.qml | 12 -- src/imports/controls/CircleImage.qml | 63 ------ src/imports/controls/DatePickerDialog.qml | 96 --------- src/imports/controls/DateTimePickerDialog.qml | 96 --------- src/imports/controls/DialogLabel.qml | 14 -- src/imports/controls/DisplayLabel.qml | 24 --- src/imports/controls/FloatingActionButton.qml | 30 --- src/imports/controls/HeadlineLabel.qml | 14 -- src/imports/controls/Icon.qml | 126 +---------- src/imports/controls/InputDialog.qml | 24 --- src/imports/controls/ListItem.qml | 59 ------ src/imports/controls/Loadable.qml | 46 ---- src/imports/controls/NavigationDrawer.qml | 63 ------ src/imports/controls/NavigationListView.qml | 87 -------- src/imports/controls/NoiseBackground.qml | 22 -- src/imports/controls/OverlayView.qml | 15 -- src/imports/controls/PageStack.qml | 24 --- src/imports/controls/Placeholder.qml | 22 -- src/imports/controls/Ripple.qml | 61 ------ src/imports/controls/Showable.qml | 28 --- src/imports/controls/Sidebar.qml | 45 ---- src/imports/controls/SmoothFadeImage.qml | 165 +-------------- src/imports/controls/SmoothFadeLoader.qml | 49 ----- src/imports/controls/SnackBar.qml | 67 ------ src/imports/controls/Subheader.qml | 15 -- src/imports/controls/SubheadingLabel.qml | 24 --- src/imports/controls/Tab.qml | 19 -- src/imports/controls/TabbedPage.qml | 70 +----- src/imports/controls/ThinDivider.qml | 7 - src/imports/controls/TimePickerDialog.qml | 72 ------- src/imports/controls/TitleLabel.qml | 14 -- src/imports/controls/ToolButton.qml | 13 -- src/imports/controls/Units.qml | 65 ------ src/imports/controls/Wave.qml | 41 ---- src/imports/templates/Card.qml | 2 +- 85 files changed, 2496 insertions(+), 1695 deletions(-) create mode 100644 doc/src/controls/BottomSheetList.qodc create mode 100644 doc/src/controls/CaptionLabel.qdoc create mode 100644 doc/src/controls/Card.qdoc create mode 100644 doc/src/controls/CircleImage.qdoc create mode 100644 doc/src/controls/DatePickerDialog.qdoc create mode 100644 doc/src/controls/DateTimePickerDialog.qdoc create mode 100644 doc/src/controls/DialogLabel.qdoc create mode 100644 doc/src/controls/DisplayLabel.qdoc create mode 100644 doc/src/controls/FloatingActionButton.qdoc create mode 100644 doc/src/controls/HeadlineLabel.qdoc create mode 100644 doc/src/controls/Icon.qdoc create mode 100644 doc/src/controls/InputDialog.qdoc create mode 100644 doc/src/controls/ListItem.qdoc create mode 100644 doc/src/controls/Loadable.qdoc create mode 100644 doc/src/controls/NavigationDrawer.qdoc create mode 100644 doc/src/controls/NavigationListView.qdoc create mode 100644 doc/src/controls/NoiseBackground.qdoc create mode 100644 doc/src/controls/OverlayView.qdoc create mode 100644 doc/src/controls/PageStack.qdoc create mode 100644 doc/src/controls/Placeholder.qdoc create mode 100644 doc/src/controls/Ripple.qdoc create mode 100644 doc/src/controls/Showable.qdoc create mode 100644 doc/src/controls/Sidebar.qdoc create mode 100644 doc/src/controls/SmoothFadeImage.qdoc create mode 100644 doc/src/controls/SmoothFadeLoader.qdoc create mode 100644 doc/src/controls/SnackBar.qdoc create mode 100644 doc/src/controls/Subheader.qdoc create mode 100644 doc/src/controls/SubheadingLabel.qdoc create mode 100644 doc/src/controls/Tab.qdoc create mode 100644 doc/src/controls/TabbedPage.qdoc create mode 100644 doc/src/controls/ThinDivider.qdoc create mode 100644 doc/src/controls/TimePickerDialog.qdoc create mode 100644 doc/src/controls/TitleLabel.qdoc create mode 100644 doc/src/controls/ToolButton.qdoc create mode 100644 doc/src/controls/Units.qdoc create mode 100644 doc/src/controls/Wave.qdoc diff --git a/doc/offline.qbs b/doc/offline.qbs index f453ccd7..3f1401d8 100644 --- a/doc/offline.qbs +++ b/doc/offline.qbs @@ -25,10 +25,46 @@ Product { "src/controls/BodyLabel.qdoc", "src/controls/BottomSheet.qdoc", "src/controls/BottomSheetGrid.qdoc", + "src/controls/BottomSheetList.qodc", + "src/controls/CaptionLabel.qdoc", + "src/controls/Card.qdoc", "src/controls/Chip.qdoc", + "src/controls/CircleImage.qdoc", + "src/controls/DatePickerDialog.qdoc", + "src/controls/DateTimePickerDialog.qdoc", + "src/controls/DialogLabel.qdoc", + "src/controls/DisplayLabel.qdoc", + "src/controls/FloatingActionButton.qdoc", + "src/controls/HeadlineLabel.qdoc", + "src/controls/Icon.qdoc", + "src/controls/InputDialog.qdoc", + "src/controls/ListItem.qdoc", + "src/controls/Loadable.qdoc", + "src/controls/NavigationDrawer.qdoc", + "src/controls/NavigationListView.qdoc", + "src/controls/NoiseBackground.qdoc", + "src/controls/OverlayView.qdoc", "src/controls/Page.qdoc", "src/controls/PageSidebar.qdoc", + "src/controls/PageStack.qdoc", + "src/controls/Placeholder.qdoc", + "src/controls/Ripple.qdoc", "src/controls/SearchBar.qdoc", + "src/controls/Showable.qdoc", + "src/controls/Sidebar.qdoc", + "src/controls/SmoothFadeImage.qdoc", + "src/controls/SmoothFadeLoader.qdoc", + "src/controls/SnackBar.qdoc", + "src/controls/Subheader.qdoc", + "src/controls/SubheadingLabel.qdoc", + "src/controls/Tab.qdoc", + "src/controls/TabbedPage.qdoc", + "src/controls/ThinDivider.qdoc", + "src/controls/TimePickerDialog.qdoc", + "src/controls/TitleLabel.qdoc", + "src/controls/ToolButton.qdoc", + "src/controls/Units.qdoc", + "src/controls/Wave.qdoc", "src/deployment.qdoc", "src/fluidcontrols-qmltypes.qdoc", "src/fluidcore-qmltypes.qdoc", diff --git a/doc/src/controls/Action.qdoc b/doc/src/controls/Action.qdoc index e80e1738..2d48d916 100644 --- a/doc/src/controls/Action.qdoc +++ b/doc/src/controls/Action.qdoc @@ -32,13 +32,13 @@ */ /*! - \qmlproperty string Action::toolTip + \qmlproperty string Fluid.Controls::Action::toolTip The tool tip displayed for the action. */ /*! - \qmlproperty bool Action::visible + \qmlproperty bool Fluid.Controls::Action::visible Set to \c false to hide the action in the UI. @@ -46,7 +46,7 @@ */ /*! - \qmlproperty bool Action::hasDividerAfter + \qmlproperty bool Fluid.Controls::Action::hasDividerAfter Set to \c true to display a divider after the control bound to this action. @@ -54,7 +54,7 @@ */ /*! - \qmlproperty bool Action::hoverAnimation + \qmlproperty bool Fluid.Controls::Action::hoverAnimation Set to \c true to rotate the icon 90 degrees on mouseover. diff --git a/doc/src/controls/AlertDialog.qdoc b/doc/src/controls/AlertDialog.qdoc index a76c005f..2080a1c2 100644 --- a/doc/src/controls/AlertDialog.qdoc +++ b/doc/src/controls/AlertDialog.qdoc @@ -35,7 +35,7 @@ */ /*! - \qmlproperty string AlertDialog::text + \qmlproperty string Fluid.Controls::AlertDialog::text Informative text to display. */ diff --git a/doc/src/controls/AppBar.qdoc b/doc/src/controls/AppBar.qdoc index 8008630e..1cf08dd6 100644 --- a/doc/src/controls/AppBar.qdoc +++ b/doc/src/controls/AppBar.qdoc @@ -28,7 +28,7 @@ */ /*! - \qmlproperty Action AppBar::leftAction + \qmlproperty Action Fluid.Controls::AppBar::leftAction The back action to display to the left of the title in the action bar. When used with a page, this will pick up the page's back action, which @@ -41,7 +41,7 @@ */ /*! - \qmlproperty list AppBar::actions + \qmlproperty list Fluid.Controls::AppBar::actions A list of actions to show in the action bar. These actions will be shown anchored to the right, and will overflow if there are more than the @@ -52,14 +52,14 @@ */ /*! - \qmlproperty int AppBar::elevation + \qmlproperty int Fluid.Controls::AppBar::elevation The elevation of the action bar. Set to 0 if you want have a header or some other view below the action bar that you want to appear as part of the action bar. */ /*! - \qmlproperty color AppBar::backgroundColor + \qmlproperty color Fluid.Controls::AppBar::backgroundColor The background color of the tool bar when the AppBar's page is active. By default this is the primary color defined in \l Material.primaryColor @@ -68,7 +68,7 @@ */ /*! - \qmlproperty color AppBar::decorationColor + \qmlproperty color Fluid.Controls::AppBar::decorationColor The background color of the window decoration when the AppBar's page is active, usually a darker version of \l backgroundColor. @@ -79,7 +79,7 @@ */ /*! - \qmlproperty bool AppBar::overflowMenuVisible + \qmlproperty bool Fluid.Controls::AppBar::overflowMenuVisible Value indicates if overflow menu is open or not. @@ -88,13 +88,13 @@ */ /*! - \qmlproperty real AppBar::leftKeyline + \qmlproperty real Fluid.Controls::AppBar::leftKeyline Keyline to align contents to the left to be visually appealing. */ /*! - \qmlproperty int AppBar::maxActionCount + \qmlproperty int Fluid.Controls::AppBar::maxActionCount The maximum number of actions that can be displayed before they spill over into a drop-down menu. When using an action bar with a page, this inherits @@ -105,7 +105,7 @@ */ /*! - \qmlproperty string AppBar::title + \qmlproperty string Fluid.Controls::AppBar::title The title displayed in the action bar. When used in a page, the title will be set to the title of the page, so set the \l Page::title property instead @@ -113,7 +113,7 @@ */ /*! - \qmlproperty list AppBar::customContent + \qmlproperty list Fluid.Controls::AppBar::customContent Custom content to show instead of the title. @@ -121,7 +121,7 @@ */ /*! - \qmlproperty list AppBar::extendedContent + \qmlproperty list Fluid.Controls::AppBar::extendedContent A custom view to show under the row containing the title and actions. Causes the action bar to be extend in height to contain this view. @@ -130,7 +130,7 @@ */ /*! - \qmlproperty real AppBar::extendedContentHeight + \qmlproperty real Fluid.Controls::AppBar::extendedContentHeight \readonly The height of the custom view shown under the row containing the @@ -140,13 +140,13 @@ */ /*! - \qmlproperty AppToolBar AppBar::toolbar + \qmlproperty AppToolBar Fluid.Controls::AppBar::toolbar Tool bar. */ /*! - \qmlmethod void AppBar::toggleOverflowMenu() + \qmlmethod void Fluid.Controls::AppBar::toggleOverflowMenu() Toggle the overflow menu if the number of actions is greater than \l AppBar::maxActionCount. diff --git a/doc/src/controls/AppToolBar.qdoc b/doc/src/controls/AppToolBar.qdoc index 1e96e84b..57d45ae2 100644 --- a/doc/src/controls/AppToolBar.qdoc +++ b/doc/src/controls/AppToolBar.qdoc @@ -25,31 +25,31 @@ */ /*! - \qmlproperty int AppToolBar::maxActionCount + \qmlproperty int Fluid.Controls::AppToolBar::maxActionCount Maximum actions to be available on this tool bar. */ /*! - \qmlproperty real AppToolBar::appBarHeight + \qmlproperty real Fluid.Controls::AppToolBar::appBarHeight Height of the \l AppBar considering its extended content. */ /*! - \qmlmethod void AppToolBar::pop(Page page) + \qmlmethod void Fluid.Controls::AppToolBar::pop(Page page) Pop the \l AppBar that belongs to \a page from the stack. */ /*! - \qmlmethod void AppToolBar::push(Page page) + \qmlmethod void Fluid.Controls::AppToolBar::push(Page page) Push the \l AppBar that belongs to \a page to the stack. */ /*! - \qmlmethod void AppToolBar::replace(Page page) + \qmlmethod void Fluid.Controls::AppToolBar::replace(Page page) Replace current \l AppBar with the one that belongs to \a page. */ diff --git a/doc/src/controls/ApplicationWindow.qdoc b/doc/src/controls/ApplicationWindow.qdoc index 8b9082e1..4a00e246 100644 --- a/doc/src/controls/ApplicationWindow.qdoc +++ b/doc/src/controls/ApplicationWindow.qdoc @@ -54,33 +54,33 @@ */ /*! - \qmlproperty color ApplicationWindow::decorationColor + \qmlproperty color Fluid.Controls::ApplicationWindow::decorationColor The color of the status bar or window decorations, if the current platform supports it. */ /*! - \qmlproperty Theme ApplicationWindow::decorationTheme + \qmlproperty Theme Fluid.Controls::ApplicationWindow::decorationTheme Theme of the status bar or window decoration, if the current platform supports it. */ /*! - \qmlproperty AppToolBar ApplicationWindow::appBar + \qmlproperty AppToolBar Fluid.Controls::ApplicationWindow::appBar The tool bar for this application. */ /*! - \qmlproperty Page ApplicationWindow::initialPage + \qmlproperty Page Fluid.Controls::ApplicationWindow::initialPage The initial page shown when the application starts. */ /*! - \qmlproperty PageStack ApplicationWindow::pageStack + \qmlproperty PageStack Fluid.Controls::ApplicationWindow::pageStack The \l PageStack used for controlling pages and transitions between pages. */ diff --git a/doc/src/controls/BodyLabel.qdoc b/doc/src/controls/BodyLabel.qdoc index 2f024fff..716f1290 100644 --- a/doc/src/controls/BodyLabel.qdoc +++ b/doc/src/controls/BodyLabel.qdoc @@ -31,7 +31,7 @@ */ /*! - \qmlproperty int BodyLabel::level + \qmlproperty int Fluid.Controls::BodyLabel::level This property holds the label level that controls font style and size. diff --git a/doc/src/controls/BottomSheet.qdoc b/doc/src/controls/BottomSheet.qdoc index af87041d..a6d0e449 100644 --- a/doc/src/controls/BottomSheet.qdoc +++ b/doc/src/controls/BottomSheet.qdoc @@ -32,7 +32,7 @@ */ /*! - \qmlproperty int BottomSheet::maxHeight + \qmlproperty int Fluid.Controls::BottomSheet::maxHeight Maximum height of the bottom sheet. diff --git a/doc/src/controls/BottomSheetGrid.qdoc b/doc/src/controls/BottomSheetGrid.qdoc index 4f5a378b..fc211b2a 100644 --- a/doc/src/controls/BottomSheetGrid.qdoc +++ b/doc/src/controls/BottomSheetGrid.qdoc @@ -33,26 +33,26 @@ */ /*! - \qmlproperty string BottomSheetGrid::title + \qmlproperty string Fluid.Controls::BottomSheetGrid::title Title. */ /*! - \qmlproperty list BottomSheetGrid::actions + \qmlproperty list Fluid.Controls::BottomSheetGrid::actions Actions to display in the bottom sheet. */ /*! - \qmlproperty int BottomSheetGrid::columns + \qmlproperty int Fluid.Controls::BottomSheetGrid::columns Number of columns. By default it's set to fit the screen width. */ /*! - \qmlproperty int BottomSheetGrid::rows + \qmlproperty int Fluid.Controls::BottomSheetGrid::rows Number of rows. By default it's set to fit the screen size based on the \l columns. diff --git a/doc/src/controls/BottomSheetList.qodc b/doc/src/controls/BottomSheetList.qodc new file mode 100644 index 00000000..d7852d87 --- /dev/null +++ b/doc/src/controls/BottomSheetList.qodc @@ -0,0 +1,45 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype BottomSheetList + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + \inherits BottomSheet + + \brief A sheet of paper with actions and an optional title that slides up from the bottom. + + A sheet of paper that displays actions in a list and an optional title that slides up + from the bottom edge of the screen and presents a set of clear and simple actions. + + \snippet fluidcontrols-bottomsheetlist.qml file + + For more information you can read the + \l{https://material.io/guidelines/components/bottom-sheets.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty string Fluid.Controls::BottomSheetList::title + + Title. +*/ + +/*! + \qmlproperty list Fluid.Controls::BottomSheetList::actions + + Actions to display in the bottom sheet. +*/ diff --git a/doc/src/controls/CaptionLabel.qdoc b/doc/src/controls/CaptionLabel.qdoc new file mode 100644 index 00000000..1c653c07 --- /dev/null +++ b/doc/src/controls/CaptionLabel.qdoc @@ -0,0 +1,31 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype CaptionLabel + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Text label with standard font and styling suitable to captions. + + Text label for the Material Design caption text style. + + \snippet fluidcontrols-captionlabel.qml file + + For more information you can read the + \l{https://material.io/guidelines/style/typography.html}{Material Design guidelines}. +*/ diff --git a/doc/src/controls/Card.qdoc b/doc/src/controls/Card.qdoc new file mode 100644 index 00000000..353ed0d9 --- /dev/null +++ b/doc/src/controls/Card.qdoc @@ -0,0 +1,29 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype Card + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Cards display content composed of different elements. + + \snippet fluidcontrols-card.qml file + + For more information you can read the + \l{https://material.io/guidelines/components/cards.html}{Material Design guidelines}. +*/ diff --git a/doc/src/controls/Chip.qdoc b/doc/src/controls/Chip.qdoc index cf575c80..7777e6d1 100644 --- a/doc/src/controls/Chip.qdoc +++ b/doc/src/controls/Chip.qdoc @@ -28,31 +28,31 @@ */ /*! - \qmlproperty string Chip::caption + \qmlproperty string Fluid.Controls::Chip::caption The caption to show in the chip. */ /*! - \qmlproperty alias icon + \qmlproperty alias Fluid.Controls::Chip::icon The icon to display (if any) */ /*! - \qmlproperty font Chip::font + \qmlproperty font Fluid.Controls::Chip::font The caption font in the Chip. */ /*! - \qmlproperty bool Chip::deletable + \qmlproperty bool Fluid.Controls::Chip::deletable Whether the chip can be deleted. */ /*! - \qmlsignal void Chip::deleted() + \qmlsignal void Fluid.Controls::Chip::deleted() Emitted when the user wants to delete the chip. */ diff --git a/doc/src/controls/CircleImage.qdoc b/doc/src/controls/CircleImage.qdoc new file mode 100644 index 00000000..9df2b578 --- /dev/null +++ b/doc/src/controls/CircleImage.qdoc @@ -0,0 +1,81 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype CircleImage + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Circular image. + + An \l Image with a \l CircleMask. +*/ + +/*! + \qmlproperty url Fluid.Controls::CircleImage::source + + URL of the image to load. + + \sa Image::source +*/ + +/*! + \qmlproperty enumeration Fluid.Controls::CircleImage::status + \list + \li Image.Null - no image has been set + \li Image.Ready - the image has been loaded + \li Image.Loading - the image is currently being loaded + \li Image.Error - an error occurred while loading the image + \endlist + + Status of the image loading. + + \sa Image::status +*/ + +/*! + \qmlproperty size Fluid.Controls::CircleImage::sourceSize + + Actual width and height of the loaded image. + + \sa Image::sourceSize +*/ + +/*! + \qmlproperty bool Fluid.Controls::CircleImage::asynchronous + + Specify whether the image should be loaded asynchronously. + + \sa Image::asynchronous +*/ + +/*! + \qmlproperty bool Fluid.Controls::CircleImage::cache + + Specify whether the image should be cached. + + \sa Image::cache +*/ + +/*! + \qmlproperty enumeration Fluid.Controls::CircleImage::fillMode + + Set this property to define what happens when the source image + has a different size than the item. + + \sa Image::fillMode +*/ diff --git a/doc/src/controls/DatePickerDialog.qdoc b/doc/src/controls/DatePickerDialog.qdoc new file mode 100644 index 00000000..5d04d057 --- /dev/null +++ b/doc/src/controls/DatePickerDialog.qdoc @@ -0,0 +1,115 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype DatePickerDialog + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Dialog to select a single date + + Dialog to select a single date from a calendar. + + \code + import QtQuick 2.10 + import Fluid.Controls 1.0 as FluidControls + + Item { + width: 600 + height: 600 + + Button { + anchors.centerIn: parent + text: qsTr("Open") + onClicked: datePickerDialog.open() + } + + FluidControls.DatePickerDialog { + id: datePickerDialog + onAccepted: { + console.log(selectedDate); + } + standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel + } + } + \endcode + + For more information you can read the + \l{https://material.io/guidelines/components/pickers.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty enumeration Fluid.Controls::DatePickerDialog::orientation + + This property holds the date picker orientation. + The default value is automatically selected based on the device orientation. + + Possible values: + \value DatePicker.Landscape The date picker is landscape. + \value DatePicker.Portrait The date picker is portrait. +*/ + +/*! + \qmlproperty bool Fluid.Controls::DatePickerDialog::dayOfWeekRowVisible + + This property determines the visibility of the day of week row. +*/ + +/*! + \qmlproperty bool Fluid.Controls::DatePickerDialog::weekNumberVisible + + This property determines the visibility of the week number column. +*/ + +/*! + \qmlproperty date Fluid.Controls::DatePickerDialog::from + + This property holds the start date. +*/ + +/*! + \qmlproperty date Fluid.Controls::DatePickerDialog::to + + This property holds the end date. +*/ + +/*! + \qmlproperty date Fluid.Controls::DatePickerDialog::selectedDate + + This property holds the date that has been selected by the user. + The default value is the current date. +*/ + +/*! + \qmlproperty list Fluid.Controls::DatePickerDialog::standardButtonsContainer + + This property allows you to place additional buttons alongside the standard buttons + of the dialog, like in this example: + + \code + FluidControls.DatePickerDialog { + id: datePickerDialog + standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel + standardButtonsContainer: Button { + anchors.verticalCenter: parent.verticalCenter + text: qsTr("Today") + flat: true + onClicked: datePickerDialog.selectedDate = new Date() + } + } + \endcode +*/ diff --git a/doc/src/controls/DateTimePickerDialog.qdoc b/doc/src/controls/DateTimePickerDialog.qdoc new file mode 100644 index 00000000..29b59233 --- /dev/null +++ b/doc/src/controls/DateTimePickerDialog.qdoc @@ -0,0 +1,115 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype DateTimePickerDialog + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Dialog with a picker to select dates and time + + A dialog that lets you select dates and time. + + \code + import QtQuick 2.10 + import Fluid.Controls 1.0 as FluidControls + + Item { + width: 600 + height: 600 + + FluidControls.DateTimePickerDialog { + onAccepted: { + console.log(selectedDate); + } + standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel + } + } + \endcode + + For more information you can read the + \l{https://material.io/guidelines/components/pickers.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty enumeration Fluid.Controls::DateTimePickerDialog::orientation + + This property holds the picker orientation. + The default value is automatically selected based on the device orientation. + + Possible values: + \value DatePicker.Landscape The picker is landscape. + \value DatePicker.Portrait The picker is portrait. +*/ + +/*! + \qmlproperty bool Fluid.Controls::DateTimePickerDialog::dayOfWeekRowVisible + + This property determines the visibility of the day of week row. +*/ + +/*! + \qmlproperty bool Fluid.Controls::DateTimePickerDialog::weekNumberVisible + + This property determines the visibility of the week number column. +*/ + + +/*! + \qmlproperty bool Fluid.Controls::DateTimePicker::prefer24Hour + + This property determines the visibility of the AM/PM switch. +*/ + +/*! + \qmlproperty date Fluid.Controls::DateTimePickerDialog::from + + This property holds the start date. +*/ + +/*! + \qmlproperty date Fluid.Controls::DateTimePickerDialog::to + + This property holds the end date. +*/ + +/*! + \qmlproperty date Fluid.Controls::DateTimePickerDialog::selectedDateTime + + This property holds the date and time that has been selected by the user. + The default value is the current date and time. +*/ + +/*! + \qmlproperty list Fluid.Controls::DateTimePickerDialog::standardButtonsContainer + + This property allows you to place additional buttons alongside the standard buttons + of the dialog, like in this example: + + \code + FluidControls.DateTimePickerDialog { + id: dateTimePickerDialog + standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel + standardButtonsContainer: Button { + anchors.verticalCenter: parent.verticalCenter + text: qsTr("Now") + flat: true + onClicked: dateTimePickerDialog.selectedDate = new Date() + } + } + \endcode +*/ diff --git a/doc/src/controls/DialogLabel.qdoc b/doc/src/controls/DialogLabel.qdoc new file mode 100644 index 00000000..ffc1b681 --- /dev/null +++ b/doc/src/controls/DialogLabel.qdoc @@ -0,0 +1,31 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype DialogLabel + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Text label with standard font and styling suitable to message box text. + + Text label for the Material Design dialog text style. + + \snippet fluidcontrols-dialoglabel.qml file + + For more information you can read the + \l{https://material.io/guidelines/style/typography.html}{Material Design guidelines}. +*/ diff --git a/doc/src/controls/DisplayLabel.qdoc b/doc/src/controls/DisplayLabel.qdoc new file mode 100644 index 00000000..560bc403 --- /dev/null +++ b/doc/src/controls/DisplayLabel.qdoc @@ -0,0 +1,42 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype DisplayLabel + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Text label with standard font and styling suitable to display text. + + Text label for the Material Design display text style. + + \snippet fluidcontrols-displaylabel.qml file + + For more information you can read the + \l{https://material.io/guidelines/style/typography.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty int Fluid.Controls::DisplayLabel::level + + This property holds the label level that controls + font style and size. + + Only values between 1 and 4 are allowed. + + Default value is 1. +*/ diff --git a/doc/src/controls/FloatingActionButton.qdoc b/doc/src/controls/FloatingActionButton.qdoc new file mode 100644 index 00000000..245afbaf --- /dev/null +++ b/doc/src/controls/FloatingActionButton.qdoc @@ -0,0 +1,49 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype FloatingActionButton + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief A floating action button. + + A floating action button represents the primary action of the current page + and is used for a promoted action. + + It is a push button with rounded corners and an icon in the center. + + \snippet fluidcontrols-fab.qml file + + For more information you can read the + \l{https://material.io/guidelines/components/buttons-floating-action-button.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty bool Fluid.Controls::FloatingActionButton::mini + + Floating action button comes in two sizes: + + \list + \li \c Default (56x56 pixels): default size for most use cases + \li \c Mini (40x40 pixels): only used to create visual continuity with other screen elements + \endlist + + This property holds whether the floating action button size is \c Mini or not. + + By default it is \c true if screen width is less than 460 pixels. +*/ diff --git a/doc/src/controls/HeadlineLabel.qdoc b/doc/src/controls/HeadlineLabel.qdoc new file mode 100644 index 00000000..02db7ace --- /dev/null +++ b/doc/src/controls/HeadlineLabel.qdoc @@ -0,0 +1,31 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype HeadlineLabel + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Text label with standard font and styling suitable to headlines. + + Text label for the Material Design headline text style. + + \snippet fluidcontrols-headinglabel.qml file + + For more information you can read the + \l{https://material.io/guidelines/style/typography.html}{Material Design guidelines}. +*/ diff --git a/doc/src/controls/Icon.qdoc b/doc/src/controls/Icon.qdoc new file mode 100644 index 00000000..de4c8c87 --- /dev/null +++ b/doc/src/controls/Icon.qdoc @@ -0,0 +1,146 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype Icon + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Displays an icon from the Material Design icon collection, the platform's icon theme, + or another (local or remote) location. + + To use an icon from the \l{https://materialdesignicons.com/}{Material Design icon collection}, + set the \c name property to the name of the icon in its group in the form of \c group/icon_name. For example: + \code + Icon { + name: "action/settings" + } + \endcode + + This icon will by default use the light icon color from Material Design. To use the dark icon + color: + \code + Icon { + Material.theme: Material.Dark + + name: "action/settings" + } + \endcode + + In addition to using icons from Material Design, you can also use icons from the platform's + \l{http://standards.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html}{Freedesktop icon theme}. For example: + + \code + Icon { + name: "gimp" + } + \endcode + + By default, icons from the Freedesktop icon theme are not colorized unless they include the word "symbolic" in the icon name. For example, "gimp" would be full-colored by "edit-cut-symbolic" would be colored using the set \c color property (based off of \c Material.theme). If you need to colorize an icon manually, you can do so like this: + + \code + Icon { + name: "gimp" + colorize: true + } + \endcode + + You can also use custom icons like this: + \code + Icon { + source: Qt.resolvedUrl("icons/fun_icon.png") + } + \endcode +*/ + +/*! + \qmlproperty color Fluid.Controls::Icon::color + + The color of the icon. Defaults to \c Material.iconColor. +*/ + +/*! + \qmlproperty real Fluid.Controls::Icon::size + + The size of the icon. Defaults to 24px. +*/ + +/*! + \qmlproperty string Fluid.Controls::Icon::name + + The name of the icon to display. + + \sa Fluid.Controls::Icon::source +*/ + +/*! + \qmlproperty url Fluid.Controls::Icon::source + + \brief A URL pointing to an image to display as the icon. + + By default, this is a special URL representing the icon named by \l name from the Material + Design icon collection when using the form of "collection/icon_name", or in the case of a + single "icon_name", the platform's Freedesktop icon theme will be used. + + By default, icons from the Material Design icons collection will be treated as symbolic icons and colored using the specified \l color, while icons from the Freedesktop icon theme will + not be colorized. To override this, or set the behavior for your own custom icons, use + \l colorize. + + \sa Fluid.Controls::Icon::name + */ + +/*! + \qmlproperty enumeration Fluid.Controls::Icon::status + \list + \li Image.Null - no image has been set + \li Image.Ready - the image has been loaded + \li Image.Loading - the image is currently being loaded + \li Image.Error - an error occurred while loading the image + \endlist +*/ + +/*! + \qmlproperty bool Fluid.Controls::Icon::cache + + Specifies whether the image should be cached. + The default value is true. + + Setting cache to false is useful when dealing with large images, + to make sure that they aren't cached at the expense of small + 'ui element' images. +*/ + +/*! + \qmlproperty bool Fluid.Controls::Icon::valid + \readonly + + \c true if the icon is valid and fully loaded. +*/ + +/*! + \qmlproperty bool Fluid.Controls::Icon::colorize + + Set to \c false if you want the icon to use the original image's colors and not be + colored using the specified \c color. +*/ + +/*! + \qmlproperty real Fluid.Controls::Icon::sourceSize + \readonly + + Source image size. +*/ diff --git a/doc/src/controls/InputDialog.qdoc b/doc/src/controls/InputDialog.qdoc new file mode 100644 index 00000000..6273d026 --- /dev/null +++ b/doc/src/controls/InputDialog.qdoc @@ -0,0 +1,42 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype InputDialog + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Input dialogs ask the user to input data with certain constraints. + + The dialog is automatically accepted when the Return or Enter key is pressed + and the input in an acceptable state. + + For more information you can read the + \l{https://material.io/guidelines/components/dialogs.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty TextField Fluid.Controls::InputDialog::textField + + Text field. +*/ + +/*! + \qmlproperty string Fluid.Controls::InputDialog::text + + Dialog text. +*/ diff --git a/doc/src/controls/ListItem.qdoc b/doc/src/controls/ListItem.qdoc new file mode 100644 index 00000000..6540a16d --- /dev/null +++ b/doc/src/controls/ListItem.qdoc @@ -0,0 +1,78 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype ListItem + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + \inherits ItemDelegate + + \brief A standard list item, with one or more lines of text and optional left and right items. +*/ + +/*! + \qmlproperty int Fluid.Controls::ListItem::dividerInset + + How many pixels the divider is from the left border. + This property is set to the \l leftItem width by default. + + \sa Fluid.Controls::ListItem::showDivider + \sa Fluid.Controls::ListItem::leftItem +*/ + +/*! + \qmlproperty bool Fluid.Controls::ListItem::showDivider + + This property holds whether the divider is shown or not. + Default value is \c false. +*/ + +/*! + \qmlproperty int Fluid.Controls::ListItem::maximumLineCount + + Maximum number of text lines allowed to show. +*/ + +/*! + \qmlproperty string Fluid.Controls::ListItem::subText + + Text to display below \l text. +*/ + +/*! + \qmlproperty string Fluid.Controls::ListItem::valueText + + Value text. +*/ + +/*! + \qmlproperty Item Fluid.Controls::ListItem::leftItem + + Item to show on the left. +*/ + +/*! + \qmlproperty Item Fluid.Controls::ListItem::rightItem + + Item to show on the right. +*/ + +/*! + \qmlproperty Item Fluid.Controls::ListItem::secondaryItem + + Secondary item. +*/ diff --git a/doc/src/controls/Loadable.qdoc b/doc/src/controls/Loadable.qdoc new file mode 100644 index 00000000..791e7af2 --- /dev/null +++ b/doc/src/controls/Loadable.qdoc @@ -0,0 +1,66 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype Loadable + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Loadable component. +*/ + +/*! + \qmlproperty Component Fluid.Controls::Loadable::component + + Component to load. +*/ + +/*! + \qmlproperty Animation Fluid.Controls::Loadable::showAnimation + + Animation to play when the component is shown. +*/ + +/*! + \qmlproperty Animation Fluid.Controls::Loadable::hideAnimation + + Animation to play when the component is hidden. +*/ + +/*! + \qmlproperty bool Fluid.Controls::Loadable::asynchronous + + Whether the component is loaded asynchronously or not. +*/ + +/*! + \qmlproperty Item Fluid.Controls::Loadable::item + + Item created after \l Loadable::component is loaded. +*/ + +/*! + \qmlmethod void Fluid.Controls::Loadable::show() + + Show the component. +*/ + +/*! + \qmlmethod void Fluid.Controls::Loadable::hide() + + Hide the component. +*/ diff --git a/doc/src/controls/NavigationDrawer.qdoc b/doc/src/controls/NavigationDrawer.qdoc new file mode 100644 index 00000000..c50c810c --- /dev/null +++ b/doc/src/controls/NavigationDrawer.qdoc @@ -0,0 +1,82 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype NavigationDrawer + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + \inherits Drawer + + \brief The navigation drawer slides in from the left and is a common pattern in apps. + + This is a temporary navigation drawer: it can toggle open or closed. + Closed by default, this type of navigation drawer opens temporarily above all + other content until a section is selected or the overlay is tapped. + + This navigation drawer comes with no contents, therefore it's completely customizable. + + By default the navigation drawer is permanent and pinned on desktop and + temporary on mobile. + + \code + import Fluid.Controls 2.0 as FluidControls + + FluidControls.ApplicationWindow { + width: 400 + height: 400 + visible: true + + Button { + text: "Open" + onClicked: drawer.open() + } + + FluidControls.NavigationDrawer { + topContent: Image { + source: "background.png" + width: parent.width + height: 200 + } + + FluidControls.ListItem { + icon.source: FluidControls.Utils.iconUrl("content/inbox") + text: "Inbox" + } + + FluidControls.ListItem { + icon.source: FluidControls.Utils.iconUrl("content/archive") + text: "Archive" + } + + FluidControls.ListItem { + icon.source: FluidControls.Utils.iconUrl("action/settings") + text: "Settings" + showDivider: true + } + } + } + \endcode + + For more information you can read the + \l{https://material.io/guidelines/patterns/navigation-drawer.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty list Fluid.Controls::NavigationDrawer::topContent + + The items added to this list will be displayed on top of the contents. +*/ diff --git a/doc/src/controls/NavigationListView.qdoc b/doc/src/controls/NavigationListView.qdoc new file mode 100644 index 00000000..c087ee06 --- /dev/null +++ b/doc/src/controls/NavigationListView.qdoc @@ -0,0 +1,106 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype NavigationListView + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + \inherits Fluid.Controls::NavigationDrawer + + \brief The navigation drawer slides in from the left and is a common pattern in apps. + + This is a temporary navigation drawer: it can toggle open or closed. + Closed by default, this type of navigation drawer opens temporarily above all + other content until a section is selected or the overlay is tapped. + + NavigationDrawer is recommended on phones and tablets. + + This navigation drawer comes with a built-in ListView. + + \code + import QtQuick 2.10 + import QtQuick.Controls 2.3 + import QtQuick.Window 2.2 + import Fluid.Controls 1.0 as FluidControls + + Window { + id: window + width: 400 + height: 400 + visible: true + + Button { + text: "Open" + onClicked: drawer.open() + } + + FluidControls.NavigationListView { + topContent: Image { + width: parent.width + height: 200 + source: "background.png" + } + + actions: [ + FluidControls.Action { + text: "Action 1" + }, + FluidControls.Action { + text: "Action 2" + } + ] + } + } + \endcode + + For more information you can read the + \l{https://material.io/guidelines/patterns/navigation-drawer.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty int Fluid.Controls::NavigationListView::currentIndex + + The \c currentIndex property holds the index of the current item. +*/ + +/*! + \qmlproperty Item Fluid.Controls::NavigationListView::currentItem + + The \c currentItem property holds the current item. +*/ + +/*! + \qmlproperty bool Fluid.Controls::NavigationListView::autoHighlight + + This property holds whether auto-highlight is enabled. + + If this property is \c true, the current item will be automatically highlighted. + + The default value is \c false. +*/ + +/*! + \qmlproperty list Fluid.Controls::NavigationListView::actions + + List of actions to be displayed by the drawer. +*/ + +/*! + \qmlproperty Component Fluid.Controls::NavigationListView::delegate + + The delegate for item that constitute a menu item. +*/ diff --git a/doc/src/controls/NoiseBackground.qdoc b/doc/src/controls/NoiseBackground.qdoc new file mode 100644 index 00000000..62ce45d1 --- /dev/null +++ b/doc/src/controls/NoiseBackground.qdoc @@ -0,0 +1,40 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype NoiseBackground + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Background with noise. +*/ + +/*! + \qmlproperty Gradient Fluid.Controls::NoiseBackground::gradient + + The gradient to use to fill the rectangle. + + \sa Rectangle::gradient +*/ + +/*! + \qmlproperty color Fluid.Controls::NoiseBackground::color + + The color to use to fill the rectangle. + + \sa Rectangle::color +*/ diff --git a/doc/src/controls/OverlayView.qdoc b/doc/src/controls/OverlayView.qdoc new file mode 100644 index 00000000..37f0fba9 --- /dev/null +++ b/doc/src/controls/OverlayView.qdoc @@ -0,0 +1,33 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype OverlayView + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + \inherits Popup + + \brief Ready made popup centered on its parent. + + This controls provides a ready made popup visual element that can be + used with \l Window or \l ApplicationWindow. + + Overlay is centered to its parent. In order to ensure it is displayed + above other items in the scene, it is recommended to use ApplicationWindow. + ApplicationWindow also provides background dimming effects since Overlay + acts as a modal popup. +*/ diff --git a/doc/src/controls/Page.qdoc b/doc/src/controls/Page.qdoc index 7ed2e5e1..fef931c7 100644 --- a/doc/src/controls/Page.qdoc +++ b/doc/src/controls/Page.qdoc @@ -45,7 +45,7 @@ */ /*! - \qmlproperty AppBar Page::appBar + \qmlproperty Fluid.Controls::AppBar Fluid.Controls::Page::appBar The action bar for this page. Use it as a group property to customize this page's action bar. See the \l Page example for details on how to use @@ -53,13 +53,13 @@ */ /*! - \qmlproperty list Page::actions + \qmlproperty list Fluid.Controls::Page::actions The page's actions shown in the action bar. */ /*! - \qmlproperty Action Page::leftAction + \qmlproperty Fluid.Controls::Action Fluid.Controls::Page::leftAction The action shown to the left of the title in the action bar. By default, this is a back button which shows when there is a page behind the current @@ -68,7 +68,7 @@ */ /*! - \qmlproperty bool Page::canGoBack + \qmlproperty bool Fluid.Controls::Page::canGoBack Set by the page stack to true if there is a page behind this page on the page stack. @@ -77,7 +77,7 @@ */ /*! - \qmlproperty list Page::customContent + \qmlproperty list Fluid.Controls::Page::customContent Custom content to show instead of the title. @@ -85,7 +85,7 @@ */ /*! - \qmlproperty PageSidebar rightSidebar + \qmlproperty Fluid.Controls::PageSidebar Fluid.Controls::Page::rightSidebar A sidebar to show on the right of the page. This will have its own app bar and title, which will split the toolbar into two app bars. @@ -94,7 +94,7 @@ */ /*! - \qmlsignal void Page::goBack(var event) + \qmlsignal void Fluid.Controls::Page::goBack(var event) This signal is emitted when the back action is triggered or back key is released. @@ -108,7 +108,7 @@ */ /*! - \qmlmethod void Page::pop(event event, bool force) + \qmlmethod void Fluid.Controls::Page::pop(event event, bool force) Pop this page from the page stack. This does nothing if this page is not the current page on the page stack. @@ -122,13 +122,13 @@ */ /*! - \qmlmethod void Page::forcePop() + \qmlmethod void Fluid.Controls::Page::forcePop() Force a pop from the page stack. */ /*! - \qmlmethod void Page::push(Component component, object properties) + \qmlmethod void Fluid.Controls::Page::push(Component component, object properties) Push the specified component onto the page stack. diff --git a/doc/src/controls/PageStack.qdoc b/doc/src/controls/PageStack.qdoc new file mode 100644 index 00000000..2fcef5b1 --- /dev/null +++ b/doc/src/controls/PageStack.qdoc @@ -0,0 +1,43 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype PageStack + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + \inherits StackView + + \brief Manages the page stack used for navigation. +*/ + +/*! + \qmlsignal Fluid.Controls::PageStack::pushed(Item page) + + This signal is emitted when an item is pushed to the stack. +*/ + +/*! + \qmlsignal Fluid.Controls::PageStack::popped(Item page) + + This signal is emitted when an item is popped from the stack. +*/ + +/*! + \qmlsignal Fluid.Controls::PageStack::replaced(Item page) + + This signal is emitted when an item is replaced in the stack. +*/ diff --git a/doc/src/controls/Placeholder.qdoc b/doc/src/controls/Placeholder.qdoc new file mode 100644 index 00000000..c69b3a95 --- /dev/null +++ b/doc/src/controls/Placeholder.qdoc @@ -0,0 +1,45 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype Placeholder + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Shows a placeholder icon and text. + + For more information you can read the + \l{https://material.io/guidelines/patterns/empty-states.html#empty-states-avoiding-completely-empty-states}{Material Design guidelines}. +*/ + +/*! + \qmlproperty object Fluid.Controls::Placeholder::icon + + Icon. +*/ + +/*! + \qmlproperty string Fluid.Controls::Placeholder::text + + Text. +*/ + +/*! + \qmlproperty string Fluid.Controls::Placeholder::subText + + Sub text. +*/ diff --git a/doc/src/controls/Ripple.qdoc b/doc/src/controls/Ripple.qdoc new file mode 100644 index 00000000..722d6e24 --- /dev/null +++ b/doc/src/controls/Ripple.qdoc @@ -0,0 +1,79 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype Ripple + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Represents a Material Design ripple ink animation used in various touchable components. + + This component is useful for including in Material Design-specific components, which should be implemented using the +material file selector. Eventually this should be upstreamed to QtQuick + Controls 2. + + For more information you can read the + \l{https://material.io/guidelines/motion/material-motion.html#material-motion-how-does-material-move}{Material Design guidelines}. +*/ + +/*! + \qmlproperty color Fluid.Controls::Riple::color + + The color of the ripple. Defaults to black with 12% opacity. +*/ + +/*! + \qmlproperty bool Fluid.Controls::Riple::circular + + Set to \c true if the ripple is used on a circular component, such as a button in an + action bar or a floating action button. +*/ + +/*! + \qmlproperty bool Fluid.Controls::Riple::centered + + Set to \c true if the ripple should be centered regardless of where the mouse/touch + input came from. +*/ + +/*! + \qmlproperty bool Fluid.Controls::Riple::focused + + Set to \c true if the component is focused and should display a focus ripple. +*/ + +/*! + \qmlproperty color Fluid.Controls::Riple::focusColor + + The color of the focus ripple. Also used to determine the color of the focus background + behind the ripple. + + \sa Ripple::focused +*/ + +/*! + \qmlproperty int Fluid.Controls::Riple::focusWidth + + The width of the focus ripple. + + \sa Ripple::focused +*/ + +/*! + \qmlproperty Item Fluid.Controls::Riple::control + + Control that that needs the ripple effect. +*/ diff --git a/doc/src/controls/SearchBar.qdoc b/doc/src/controls/SearchBar.qdoc index a7d742c9..4b403430 100644 --- a/doc/src/controls/SearchBar.qdoc +++ b/doc/src/controls/SearchBar.qdoc @@ -25,13 +25,13 @@ */ /*! - \qmlproperty string SearchBar::searchText + \qmlproperty string Fluid.Controls::SearchBar::searchText The current search text in the search bar typed in so far. */ /*! - \qmlproperty model SearchBar::searchSuggestions + \qmlproperty model Fluid.Controls::SearchBar::searchSuggestions The suggestions to display. @@ -40,7 +40,7 @@ */ /*! - \qmlproperty Component SearchBar::suggestionDelegate + \qmlproperty Component Fluid.Controls::SearchBar::suggestionDelegate The delegate item for the suggestion list view. @@ -48,7 +48,7 @@ */ /*! - \qmlproperty string SearchBar::suggestionTextRole + \qmlproperty string Fluid.Controls::SearchBar::suggestionTextRole The model type that contains the text to display in the suggestion delegate @@ -56,43 +56,43 @@ */ /*! - \qmlproperty string SearchBar::searchPlaceHolder + \qmlproperty string Fluid.Controls::SearchBar::searchPlaceHolder The string to display when the search field is empty */ /*! - \qmlproperty int SearchBar::cardWidth + \qmlproperty int Fluid.Controls::SearchBar::cardWidth The width of the search card. By default the search bar centers in the parent with a margin of 64 each side */ /*! - \qmlproperty int SearchBar::suggestionsHeight + \qmlproperty int Fluid.Controls::SearchBar::suggestionsHeight The viewable area of the suggestions list until it begins scrolling. */ /*! - \qmlproperty color SearchBar::waveColor + \qmlproperty color Fluid.Controls::SearchBar::waveColor The background color of the expanded search bar. */ /*! - \qmlproperty bool SearchBar::persistent + \qmlproperty bool Fluid.Controls::SearchBar::persistent Whether the SearchBar is persistent or expandable */ /*! - \qmlproperty bool SearchBar::expanded + \qmlproperty bool Fluid.Controls::SearchBar::expanded Whether the SearchBar is currently open */ /*! - \qmlproperty font SearchBar::searchTextFont + \qmlproperty font Fluid.Controls::SearchBar::searchTextFont The font of text in search TextInput box @@ -100,25 +100,25 @@ */ /*! - \qmlproperty model SearchBar::searchResults + \qmlproperty model Fluid.Controls::SearchBar::searchResults The model containing the search results */ /*! - \qmlsignal SearchBar::search(string query) + \qmlsignal Fluid.Controls::SearchBar::search(string query) Is emitted, when the user searches for a query. The \a query parameter contains the search query as string. Use this signal to provide search results. */ /*! - \qmlmethod void SearchBar::open() + \qmlmethod void Fluid.Controls::SearchBar::open() Opens the search bar */ /*! - \qmlmethod void SearchBar::close() + \qmlmethod void Fluid.Controls::SearchBar::close() Closes the search bar */ diff --git a/doc/src/controls/Showable.qdoc b/doc/src/controls/Showable.qdoc new file mode 100644 index 00000000..790b6d32 --- /dev/null +++ b/doc/src/controls/Showable.qdoc @@ -0,0 +1,48 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype Showable + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Showtable component. +*/ + +/*! + \qmlproperty Animation Fluid.Controls::Showable::showAnimation + + Animation to play to show the component. +*/ + +/*! + \qmlproperty Animation Fluid.Controls::Showable::hideAnimation + + Animation to play to hide the component. +*/ + +/*! + \qmlmethod void Fluid.Controls::Showable::show() + + Show the component. +*/ + +/*! + \qmlmethod void Fluid.Controls::Showable::hide() + + Hide the component. +*/ diff --git a/doc/src/controls/Sidebar.qdoc b/doc/src/controls/Sidebar.qdoc new file mode 100644 index 00000000..5c5f7b32 --- /dev/null +++ b/doc/src/controls/Sidebar.qdoc @@ -0,0 +1,78 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype Sidebar + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief A sidebar component for use in adaptive layouts + + To use, simply add an instance to your code, and anchor other components to it. + + To show or hide, set the expanded property. + + By default, the sidebar has a flickable built in, and whatever contents are added + will be placed in the flickable. When you want this disabled, or want to fill the + entire sidebar, set the autoFill property to false. + + Examples: + \code + Item { + property bool wideAspect: width > Units.gu(80) + + Sidebar { + expanded: wideAspect + + // Anchoring is automatic + } + } + \endcode + + For more information you can read the + \l{https://material.io/guidelines/patterns/navigation-drawer.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty enumeration Fluid.Controls::Sidebar::edge + + This property holds the edge of the window at which the sidebar + will be attached to. The acceptable values are: + + \value Qt.TopEdge The top edge of the window. + \value Qt.LeftEdge The left edge of the window (default). + \value Qt.RightEdge The right edge of the window. + \value Qt.BottomEdge The bottom edge of the window. +*/ + +/*! + \qmlproperty bool Fluid.Controls::Sidebar::expanded + + This property holds whether to show or hide the sidebar. +*/ + +/*! + \qmlproperty bool Fluid.Controls::Sidebar::autoFlick + + This property holds whether the sidebar is flickable or not. +*/ + +/*! + \qmlproperty string Fluid.Controls::Sidebar::header + + This property holds the text displayed as header. +*/ diff --git a/doc/src/controls/SmoothFadeImage.qdoc b/doc/src/controls/SmoothFadeImage.qdoc new file mode 100644 index 00000000..2df20338 --- /dev/null +++ b/doc/src/controls/SmoothFadeImage.qdoc @@ -0,0 +1,199 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * Copyright (C) 2018 The Qt Company Ltd. + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype SmoothFadeImage + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Displays an image and smoothly fade when the source is changed. + + This component can be used in place of an Image when a smooth fade animation + between two sources is needed. + + When the source is changed and the fade animation ends, the image loaded before + is unloaded; this means that only one image at a time is loaded. + + Images are loaded asynchronously and are not cache, so unlike the Image + component the \c asynchronous and \c cache properties are not available. + + Example of usage: + \code + import QtQuick 2.10 + import Fluid.Controls 1.0 + + Item { + width: 128 + height: 128 + + SmoothFadeImage { + anchors.fill: parent + source: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Qt_logo_2015.svg/1380px-Qt_logo_2015.svg.png" + fillMode: Image.PreserveAspectFit + smooth: true + fadeDuration: 400 + + MouseArea { + anchors.fill: parent + onClicked: parent.source = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Qt_logo_2016.svg/1280px-Qt_logo_2016.svg.png" + } + } + } + \endcode +*/ + +/*! + \qmlproperty url Fluid.Controls::SmoothFadeImage::source + + The image being displayed. + SmoothFadeImage can handle any image format supported by Qt, loaded + from any URL scheme supported by Qt. + + \sa Image::source +*/ + +/*! + \qmlproperty enumeration Fluid.Controls::SmoothFadeImage::fillMode + + Set this property to define what happens when the source image has a + different size than the item. + + \list + \li Image.Stretch - the image is scaled to fit (default) + \li Image.PreserveAspectFit - the image is scaled uniformly to fit without cropping + \li Image.PreserveAspectCrop - the image is scaled uniformly to fill, cropping if necessary + \li Image.Tile - the image is duplicated horizontally and vertically + \li Image.TileVertically - the image is stretched horizontally and tiled vertically + \li Image.TileHorizontally - the image is stretched vertically and tiled horizontally + \li Image.Pad - the image is not transformed + \endlist + + Defaults to \c Image.Stretch. + + Note that \c clip is false by default which means that the item might + paint outside its bounding rectangle even if the fillMode is set to PreserveAspectCrop. +*/ + +/*! + \qmlproperty int Fluid.Controls::SmoothFadeImage::fadeDuration + + Set this to change the fade animation time (in milliseconds). + Default value is 250 ms. +*/ + +/*! + \qmlproperty bool Fluid.Controls::SmoothFadeImage::running + \readonly + + This property holds whether the fade animation is running or not. +*/ + +/*! + \qmlproperty bool Fluid.Controls::SmoothFadeImage::animationEnabled + + Set this property to false to disable the fade animation. + If the animation is disable, SmoothFadeImage behaves like a normal Image. + + The fade animation is enabled by default. +*/ + +/*! + \qmlproperty size Fluid.Controls::SmoothFadeImage::sourceSize + + This property holds the actual width and height of the loaded image. + + Unlike the \c width and \c height properties, which scale the painting of the + image, this property sets the actual number of pixels stored for the + loaded image so that large images do not use more memory than necessary. + + For example, this ensures the image in memory is no larger than + 1024x1024 pixels, regardless of the SmoothFadeImage's width and height values: + + \code + Rectangle { + width: ... + height: ... + + Image { + anchors.fill: parent + source: "reallyBigImage.jpg" + sourceSize.width: 1024 + sourceSize.height: 1024 + } + } + \endcode + + If the image's actual size is larger than the sourceSize, the image is + scaled down. If only one dimension of the size is set to greater than 0, + the other dimension is set in proportion to preserve the source image's + aspect ratio. (The \c fillMode is independent of this.) + + If both the sourceSize.width and sourceSize.height are set the image + will be scaled down to fit within the specified size, maintaining the + image's aspect ratio. The actual size of the image after scaling is + available via \c Item::implicitWidth and \c Item::implicitHeight. + + If the source is an intrinsically scalable image (eg. SVG), this property + determines the size of the loaded image regardless of intrinsic size. + Avoid changing this property dynamically; rendering an SVG is slow compared + to an image. + + If the source is a non-scalable image (eg. JPEG), the loaded image will be + no greater than this property specifies. For some formats (currently only + JPEG), the whole image will never actually be loaded into memory. + + sourceSize can be cleared to the natural size of the image by setting + sourceSize to undefined. + + Note: Changing this property dynamically causes the image source to be + reloaded, potentially even from the network, if it is not in the disk cache. +*/ + +/*! + \qmlproperty enumeration Fluid.Controls::SmoothFadeImage::status + \readonly + + This property holds the status of image loading. It can be one of: + + \list + \li Image.Null - no image has been set + \li Image.Ready - the image has been loaded + \li Image.Loading - the image is currently being loaded + \li Image.Error - an error occurred while loading the image + \endlist +*/ + +/*! + \qmlproperty bool Fluid.Controls::SmoothFadeImage::smooth + + This property holds whether the image is smoothly filtered when scaled or + transformed. Smooth filtering gives better visual quality, but it may be + slower on some hardware. + + If the image is displayed at its natural size, this property has no + visual or performance effect. + + By default, this property is set to \c true. +*/ + +/*! + \qmlsignal Fluid.Controls::SmoothFadeImage::imageSwapped() + + This signal is emitted when the swap between the old source and the new + one has happened. +*/ diff --git a/doc/src/controls/SmoothFadeLoader.qdoc b/doc/src/controls/SmoothFadeLoader.qdoc new file mode 100644 index 00000000..473818aa --- /dev/null +++ b/doc/src/controls/SmoothFadeLoader.qdoc @@ -0,0 +1,75 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype SmoothFadeLoader + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + \inherits Item + + \brief Displays an item and smoothly fade when the source is changed. + + This component loads an item with a Loader and smoothly fade to another item when + the source URL is changed. + + Items are loaded synchronously, also the item being hidden is not unloaded to + avoid an unpleasant "flash" after the transition. + + Example of usage: + \code + import QtQuick 2.10 + import Fluid.Controls 1.0 + + Item { + width: 640 + height: 480 + + SmoothFadeLoader { + anchors.fill: parent + source: "MyComponent.qml" + fadeDuration: 400 + + MouseArea { + anchors.fill: parent + onClicked: parent.source = "AnotherComponent.qml" + } + } + } + \endcode +*/ + +/*! + \qmlproperty url Fluid.Controls::SmoothFadeLoader::source + + The item being displayed. + + \sa Loader::source +*/ + +/*! + \qmlproperty int Fluid.Controls::SmoothFadeLoader::fadeDuration + + Set this to change the fade animation time (in milliseconds). + Default value is 250 ms. +*/ + +/*! + \qmlproperty bool Fluid.Controls::SmoothFadeLoader::running + \readonly + + This property holds whether the fade animation is running or not. +*/ diff --git a/doc/src/controls/SnackBar.qdoc b/doc/src/controls/SnackBar.qdoc new file mode 100644 index 00000000..5fd0a5e3 --- /dev/null +++ b/doc/src/controls/SnackBar.qdoc @@ -0,0 +1,89 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype SnackBar + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief SnackBar provides a brief feedback about an operation. + + \code + Page { + title: qsTr("Send a message") + + Button { + anchors.centerIn: parent + text: qsTr("Send Message") + onClicked: snackBar.open(qsTr("Message sent")) + } + + SnackBar { + id: snackBar + } + } + \endcode + + SnackBar provides a brief feedback about an operation through a + message at the bottom of the screen. + + It contains a single line of text directly related to the operation performed. + There can be a text action, but no icons. + + For more information you can read the + \l{https://material.io/guidelines/components/snackbars-toasts.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty bool Fluid.Controls::SnackBar::opened + \readonly + + Whether the snack bar is currently open or not. +*/ + +/*! + \qmlproperty int Fluid.Controls::SnackBar::duration + + Amount of time (in ms) to keep the notification visible. + The default is 2s. +*/ + +/*! + \qmlproperty bool Fluid.Controls::SnackBar::fullWidth + + Whether the bar should take full screen width. + The default depends on the device: full width only on phones and tablets. +*/ + +/*! + \qmlsignal Fluid.Controls::SnackBar::clicked() + + This signal is emitted when the button is clicked. + The handler is \c onClicked. +*/ + +/*! + \qmlmethod void Fluid.Controls::SnackBar::open(string text, string buttonText = "") + + Open the bar with the specified \a text and \a buttonText. +*/ + +/*! + \qmlmethod void Fluid.Controls::SnackBar::close() + + Close the bar. +*/ diff --git a/doc/src/controls/Subheader.qdoc b/doc/src/controls/Subheader.qdoc new file mode 100644 index 00000000..466f8d24 --- /dev/null +++ b/doc/src/controls/Subheader.qdoc @@ -0,0 +1,33 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype Subheader + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Subheaders are special list tiles that delineate distinct sections of a list or grid list. + + For more information you can read the + \l{https://material.io/guidelines/components/subheaders.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty color Fluid.Controls::Subheader::textColor + + Text color. +*/ diff --git a/doc/src/controls/SubheadingLabel.qdoc b/doc/src/controls/SubheadingLabel.qdoc new file mode 100644 index 00000000..94e13dfe --- /dev/null +++ b/doc/src/controls/SubheadingLabel.qdoc @@ -0,0 +1,42 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype SubheadingLabel + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Text label with standard font and styling suitable to subheading. + + Text label for the Material Design subheading text style. + + \snippet fluidcontrols-subheadinglabel.qml file + + For more information you can read the + \l{https://material.io/guidelines/style/typography.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty int Fluid.Controls::SubheadingLabel::level + + This property holds the label level that controls + font style and size. + + Only values between 1 and 4 are allowed. + + Default value is 1. +*/ diff --git a/doc/src/controls/Tab.qdoc b/doc/src/controls/Tab.qdoc new file mode 100644 index 00000000..d2b8079a --- /dev/null +++ b/doc/src/controls/Tab.qdoc @@ -0,0 +1,44 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype Tab + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Tab for tabbed pages. + + Tab of a \l TabbedPage. +*/ + +/*! + \qmlproperty object Fluid.Controls::Tab::icon + + This property holds the tab icon information. +*/ + +/*! + \qmlproperty string Fluid.Controls::Tab::title + + The title of this tab. +*/ + +/*! + \qmlproperty bool Fluid.Controls::Tab::canRemove + + Controls whether a close button will be shown for this tab. +*/ diff --git a/doc/src/controls/TabbedPage.qdoc b/doc/src/controls/TabbedPage.qdoc new file mode 100644 index 00000000..ec6ad501 --- /dev/null +++ b/doc/src/controls/TabbedPage.qdoc @@ -0,0 +1,90 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype TabbedPage + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Page with tabs. + + \qml + import QtQuick 2.10 + import Fluid.Controls 1.0 as FluidControls + + FluidControls.ApplicationWindow { + title: "Application Name" + width: 1024 + height: 800 + visible: true + + initialPage: FluidControls.TabbedPage { + FluidControls.Tab { + title: "Tab 1" + + Label { + anchors.centerIn: parent + text: "Hello World!" + } + } + + FluidControls.Tab { + title: "Tab 2" + + Label { + anchors.centerIn: parent + text: "Hello World!" + } + } + } + } + \endqml +*/ + +/*! + \qmlproperty int Fluid.Controls::TabbedPage::count + \readonly + + Number of tabs. +*/ + +/*! + \qmlproperty int Fluid.Controls::TabbedPage::currentIndex + \readonly + + Index of the currently selected tab. +*/ + +/*! + \qmlproperty Item Fluid.Controls::TabbedPage::selectedTab + \readonly + + The currently selected tab. +*/ + +/*! + \qmlproperty ToolBar Fluid.Controls::TabbedPage::tabBar + \readonly + + Tool bar that contains tabs. +*/ + +/*! + \qmlproperty TabBar Fluid.Controls::TabbedPage::tabs + + Tab bar. +*/ diff --git a/doc/src/controls/ThinDivider.qdoc b/doc/src/controls/ThinDivider.qdoc new file mode 100644 index 00000000..8a2b15b2 --- /dev/null +++ b/doc/src/controls/ThinDivider.qdoc @@ -0,0 +1,24 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype ThinDivider + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief A 1px high divider for use in lists and other columns of content. +*/ diff --git a/doc/src/controls/TimePickerDialog.qdoc b/doc/src/controls/TimePickerDialog.qdoc new file mode 100644 index 00000000..65d37927 --- /dev/null +++ b/doc/src/controls/TimePickerDialog.qdoc @@ -0,0 +1,90 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype TimePickerDialog + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Dialog with a picker to select time + + A dialog that lets you selected time. + + \code + import QtQuick 2.10 + import Fluid.Controls 1.0 as FluidControls + + Item { + width: 600 + height: 600 + + FluidControls.TimePickerDialog { + onAccepted: { + console.log(selectedDate); + } + standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel + } + } + \endcode + + For more information you can read the + \l{https://material.io/guidelines/components/pickers.html}{Material Design guidelines}. +*/ + +/*! + \qmlproperty enumeration Fluid.Controls::TimePickerDialog::orientation + + This property holds the picker orientation. + The default value is automatically selected based on the device orientation. + + Possible values: + \value TimePicker.Landscape The picker is landscape. + \value TimePicker.Portrait The picker is portrait. +*/ + +/*! + \qmlproperty bool Fluid.Controls::TimePickerDialog::prefer24Hour + + This property determines the visibility of the AM/PM switch. +*/ + +/*! + \qmlproperty date Fluid.Controls::TimePickerDialog::selectedTime + + This property holds the time that has been selected by the user. + The default value is the current time. +*/ + +/*! + \qmlproperty list Fluid.Controls::TimePickerDialog::standardButtonsContainer + + This property allows you to place additional buttons alongside the standard buttons + of the dialog, like in this example: + + \code + FluidControls.TimePickerDialog { + id: timePickerDialog + standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel + standardButtonsContainer: Button { + anchors.verticalCenter: parent.verticalCenter + text: qsTr("Now") + flat: true + onClicked: timePickerDialog.selectedTime = new Date() + } + } + \endcode +*/ diff --git a/doc/src/controls/TitleLabel.qdoc b/doc/src/controls/TitleLabel.qdoc new file mode 100644 index 00000000..cf8c5146 --- /dev/null +++ b/doc/src/controls/TitleLabel.qdoc @@ -0,0 +1,32 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype TitleLabel + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + \inherits Label + + \brief Text label with standard font and styling suitable to titles. + + Text label for the Material Design title text style. + + \snippet fluidcontrols-titlelabel.qml file + + For more information you can read the + \l{https://material.io/guidelines/style/typography.html}{Material Design guidelines}. +*/ diff --git a/doc/src/controls/ToolButton.qdoc b/doc/src/controls/ToolButton.qdoc new file mode 100644 index 00000000..9499dc18 --- /dev/null +++ b/doc/src/controls/ToolButton.qdoc @@ -0,0 +1,31 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype ToolButton + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief \l ToolButton with a extra features. +*/ + +/*! + \qmlproperty bool Fluid.Controls::ToolButton::hoverAnimation + + Specify whether the icon should be rotated 90 degrees when the mouse hovers. + Default is \c false. +*/ diff --git a/doc/src/controls/Units.qdoc b/doc/src/controls/Units.qdoc new file mode 100644 index 00000000..03336331 --- /dev/null +++ b/doc/src/controls/Units.qdoc @@ -0,0 +1,99 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype Units + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Units. +*/ + +/*! + \qmlproperty int Fluid.Controls::Units::gridUnit + + Fundamental unit of space for sizes depending on the current font. + It correspond to the capital letter M width in pixel. +*/ + +/*! + \qmlproperty real Fluid.Controls::Units::smallSpacing + + The amount of spacing that should be used around smaller UI + elements. It can be used as margin around button box and + spacing between buttons. +*/ + +/*! + \qmlproperty real Fluid.Controls::Units::mediumSpacing + + The amount of spacing that should be used inside medium UI + elements such as padding between title and body text in a dialog box. +*/ + +/*! + \qmlproperty real Fluid.Controls::Units::largeSpacing + + The amount of spacing that should be used inside bigger UI + elements such as padding in a dialog box. +*/ + +/*! + \qmlproperty int Fluid.Controls::Units::shortDuration + + Duration for short animations to make UI events noticeable. +*/ + +/*! + \qmlproperty int Fluid.Controls::Units::mediumDuration + + Duration for medium length animations. +*/ + +/*! + \qmlproperty int Fluid.Controls::Units::longDuration + + Duration for long animations such as windows opening or closing. +*/ + +/*! + \qmlproperty object Fluid.Controls::Units::iconSizes + + Standard icon sizes: + + \list + \li \c iconSizes.tiny + \li \c iconSizes.small + \li \c iconSizes.smallMedium + \li \c iconSizes.medium + \li \c iconSizes.large + \li \c iconSizes.huge + \li \c iconSizes.enormous + \endlist +*/ + +/*! + \qmlmethod int Fluid.Controls::Units::Units::gu(real size) + + Returns a round size in pixels multiplied by grid unit. +*/ + +/*! + \qmlmethod int Fluid.Controls::Units::Units::roundToIconSize(real size) + + Returns the size in pixel closes to the icon size. +*/ diff --git a/doc/src/controls/Wave.qdoc b/doc/src/controls/Wave.qdoc new file mode 100644 index 00000000..f5aaf4a5 --- /dev/null +++ b/doc/src/controls/Wave.qdoc @@ -0,0 +1,88 @@ +/**************************************************************************** + * This file is part of Fluid. + * + * Copyright (C) 2018 Pier Luigi Fiorini + * + * $BEGIN_LICENSE:FDL$ + * + * Permission is granted to copy, distribute and/or modify this document + * under the terms of the GNU Free Documentation License, Version 1.3 + * or any later version published by the Free Software Foundation; + * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. + * A copy of the license is included in the section entitled "GNU + * Free Documentation License". + * + * $END_LICENSE$ + ***************************************************************************/ + +/*! + \qmltype Wave + \inqmlmodule Fluid.Controls + \ingroup fluidcontrols + + \brief Provides a wave animation for transitioning between views of content. + + For more information you can read the + \l{https://material.io/guidelines/motion/material-motion.html#material-motion-how-does-material-move}{Material Design guidelines}. +*/ + +/*! + \qmlproperty bool Fluid.Controls::Wave::open + + This property holds whether the wave is open. +*/ + +/*! + \qmlproperty real Fluid.Controls::Wave::size + + This property holds the current size of the wave. +*/ + +/*! + \qmlproperty real Fluid.Controls::Wave::initialX + + This property holds the horizontal center of the wave. +*/ + +/*! + \qmlproperty real Fluid.Controls::Wave::initialY + + This property holds the vertical center of the wave. +*/ + +/*! + \qmlproperty real Fluid.Controls::Wave::abstractWidth + + This property holds the abstract width of the wave. +*/ + +/*! + \qmlproperty real Fluid.Controls::Wave::abstractHeight + + This property holds the abstract height of the wave. +*/ + +/*! + \qmlproperty real Fluid.Controls::Wave::diameter + + This property holds the diameter of the completely open wave. +*/ + +/*! + \qmlsignal void Fluid.Controls::Wave::finished(bool open) + + This signal is emitted, when the wave has finished opening or closing. + \a open defines, whether the wave was being opened or closed. +*/ + +/*! + \qmlmethod void Fluid.Controls::Wave::openWave(real x, real y) + + Opens the wave centering the wave at (\a x, \a y). +*/ + +/*! + \qmlmethod void Fluid.Controls::Wave::closeWave(real x, real y) + + Closes the wave centering the wave at (\a x, \a y). +*/ diff --git a/src/imports/controls/BottomSheetList.qml b/src/imports/controls/BottomSheetList.qml index 639b82d4..736f73e7 100644 --- a/src/imports/controls/BottomSheetList.qml +++ b/src/imports/controls/BottomSheetList.qml @@ -17,36 +17,10 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import Fluid.Controls 1.0 -/*! - \qmltype BottomSheetAction - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief A sheet of paper with actions and an optional title that slides up from the bottom. - - A sheet of paper that displays actions in a list and an optional title that slides up - from the bottom edge of the screen and presents a set of clear and simple actions. - - \snippet fluidcontrols-bottomsheetlist.qml file - - For more information you can read the - \l{https://material.io/guidelines/components/bottom-sheets.html}{Material Design guidelines}. -*/ BottomSheet { id: bottomSheet - /*! - \qmlproperty string title - - Title. - */ property string title - - /*! - \qmlproperty list actions - - Actions to display in the bottom sheet. - */ property list actions height: Math.min(implicitHeight, maxHeight) diff --git a/src/imports/controls/CaptionLabel.qml b/src/imports/controls/CaptionLabel.qml index 23a2dcf4..9ea188c6 100644 --- a/src/imports/controls/CaptionLabel.qml +++ b/src/imports/controls/CaptionLabel.qml @@ -15,20 +15,6 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -/*! - \qmltype CaptionLabel - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Text label with standard font and styling suitable to captions. - - Text label for the Material Design caption text style. - - \snippet fluidcontrols-captionlabel.qml file - - For more information you can read the - \l{https://material.io/guidelines/style/typography.html}{Material Design guidelines}. -*/ Label { font.pixelSize: 12 } diff --git a/src/imports/controls/Card.qml b/src/imports/controls/Card.qml index 1d8639b6..c83648f6 100644 --- a/src/imports/controls/Card.qml +++ b/src/imports/controls/Card.qml @@ -14,17 +14,5 @@ import Fluid.Templates 1.0 as FluidTemplates -/*! - \qmltype Card - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Cards display content composed of different elements. - - \snippet fluidcontrols-card.qml file - - For more information you can read the - \l{https://material.io/guidelines/components/cards.html}{Material Design guidelines}. -*/ FluidTemplates.Card { } diff --git a/src/imports/controls/CircleImage.qml b/src/imports/controls/CircleImage.qml index 8562fb79..7a3ce2bf 100644 --- a/src/imports/controls/CircleImage.qml +++ b/src/imports/controls/CircleImage.qml @@ -15,77 +15,14 @@ import QtQuick 2.10 import Fluid.Effects 1.0 -/*! - \qmltype CircleImage - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Circular image. - - An \l Image with a \l CircleMask. -*/ Item { id: item - /*! - \qmlproperty url source - - URL of the image to load. - - \sa Image::source - */ property alias source: image.source - - /*! - \qmlproperty enumeration status - \list - \li Image.Null - no image has been set - \li Image.Ready - the image has been loaded - \li Image.Loading - the image is currently being loaded - \li Image.Error - an error occurred while loading the image - \endlist - - Status of the image loading. - - \sa Image::status - */ property alias status: image.status - - /*! - \qmlproperty size sourceSize - - Actual width and height of the loaded image. - - \sa Image::sourceSize - */ property alias sourceSize: image.sourceSize - - /*! - \qmlproperty bool asynchronous - - Specify whether the image should be loaded asynchronously. - - \sa Image::asynchronous - */ property alias asynchronous: image.asynchronous - - /*! - \qmlproperty bool cache - - Specify whether the image should be cached. - - \sa Image::cache - */ property alias cache: image.cache - - /*! - \qmlproperty enumeration fillMode - - Set this property to define what happens when the source image - has a different size than the item. - - \sa Image::fillMode - */ property alias fillMode: image.fillMode width: image.implicitWidth diff --git a/src/imports/controls/DatePickerDialog.qml b/src/imports/controls/DatePickerDialog.qml index 712e3f06..87b2efb6 100644 --- a/src/imports/controls/DatePickerDialog.qml +++ b/src/imports/controls/DatePickerDialog.qml @@ -17,112 +17,16 @@ import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 import Fluid.Controls 1.0 as FluidControls -/*! - \qmltype DatePickerDialog - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - \brief Dialog to select a single date - - Dialog to select a single date from a calendar. - - \code - import QtQuick 2.10 - import Fluid.Controls 1.0 as FluidControls - - Item { - width: 600 - height: 600 - - Button { - anchors.centerIn: parent - text: qsTr("Open") - onClicked: datePickerDialog.open() - } - - FluidControls.DatePickerDialog { - id: datePickerDialog - onAccepted: { - console.log(selectedDate); - } - standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel - } - } - \endcode - - For more information you can read the - \l{https://material.io/guidelines/components/pickers.html}{Material Design guidelines}. -*/ Dialog { id: dialog - /*! - \qmlproperty enumeration Fluid.Controls::DatePickerDialog::orientation - - This property holds the date picker orientation. - The default value is automatically selected based on the device orientation. - - Possible values: - \value DatePicker.Landscape The date picker is landscape. - \value DatePicker.Portrait The date picker is portrait. - */ property alias orientation: datePicker.orientation - - /*! - \qmlproperty bool Fluid.Controls::DatePickerDialog::dayOfWeekRowVisible - - This property determines the visibility of the day of week row. - */ property alias dayOfWeekRowVisible: datePicker.dayOfWeekRowVisible - - /*! - \qmlproperty bool Fluid.Controls::DatePickerDialog::weekNumberVisible - - This property determines the visibility of the week number column. - */ property alias weekNumberVisible: datePicker.weekNumberVisible - - /*! - \qmlproperty date Fluid.Controls::DatePickerDialog::from - - This property holds the start date. - */ property alias from: datePicker.from - - /*! - \qmlproperty date Fluid.Controls::DatePickerDialog::to - - This property holds the end date. - */ property alias to: datePicker.to - - /*! - \qmlproperty date Fluid.Controls::DatePickerDialog::selectedDate - - This property holds the date that has been selected by the user. - The default value is the current date. - */ property alias selectedDate: datePicker.selectedDate - - /*! - \qmlproperty list Fluid.Controls::DatePickerDialog::standardButtonsContainer - - This property allows you to place additional buttons alongside the standard buttons - of the dialog, like in this example: - - \code - FluidControls.DatePickerDialog { - id: datePickerDialog - standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel - standardButtonsContainer: Button { - anchors.verticalCenter: parent.verticalCenter - text: qsTr("Today") - flat: true - onClicked: datePickerDialog.selectedDate = new Date() - } - } - \endcode - */ property alias standardButtonsContainer: buttonBox.data x: (parent.width - width) / 2 diff --git a/src/imports/controls/DateTimePickerDialog.qml b/src/imports/controls/DateTimePickerDialog.qml index 138d6df4..5929ba65 100644 --- a/src/imports/controls/DateTimePickerDialog.qml +++ b/src/imports/controls/DateTimePickerDialog.qml @@ -17,112 +17,16 @@ import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 import Fluid.Controls 1.0 as FluidControls -/*! - \qmltype DateTimePickerDialog - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Dialog with a picker to select dates and time - - A dialog that lets you select dates and time. - - \code - import QtQuick 2.10 - import Fluid.Controls 1.0 as FluidControls - - Item { - width: 600 - height: 600 - - FluidControls.DateTimePickerDialog { - onAccepted: { - console.log(selectedDate); - } - standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel - } - } - \endcode - - For more information you can read the - \l{https://material.io/guidelines/components/pickers.html}{Material Design guidelines}. -*/ Dialog { id: dialog - /*! - \qmlproperty enumeration Fluid.Controls::DateTimePickerDialog::orientation - - This property holds the picker orientation. - The default value is automatically selected based on the device orientation. - - Possible values: - \value DatePicker.Landscape The picker is landscape. - \value DatePicker.Portrait The picker is portrait. - */ property alias orientation: dateTimePicker.orientation - - /*! - \qmlproperty bool Fluid.Controls::DateTimePickerDialog::dayOfWeekRowVisible - - This property determines the visibility of the day of week row. - */ property alias dayOfWeekRowVisible: dateTimePicker.dayOfWeekRowVisible - - /*! - \qmlproperty bool Fluid.Controls::DateTimePickerDialog::weekNumberVisible - - This property determines the visibility of the week number column. - */ property alias weekNumberVisible: dateTimePicker.weekNumberVisible - - /*! - \qmlproperty bool Fluid.Controls::DateTimePicker::prefer24Hour - - This property determines the visibility of the AM/PM switch. - */ property alias prefer24Hour: dateTimePicker.prefer24Hour - - /*! - \qmlproperty date Fluid.Controls::DateTimePickerDialog::from - - This property holds the start date. - */ property alias from: dateTimePicker.from - - /*! - \qmlproperty date Fluid.Controls::DateTimePickerDialog::to - - This property holds the end date. - */ property alias to: dateTimePicker.to - - /*! - \qmlproperty date Fluid.Controls::DateTimePickerDialog::selectedDateTime - - This property holds the date and time that has been selected by the user. - The default value is the current date and time. - */ property alias selectedDateTime: dateTimePicker.selectedDateTime - - /*! - \qmlproperty list Fluid.Controls::DateTimePickerDialog::standardButtonsContainer - - This property allows you to place additional buttons alongside the standard buttons - of the dialog, like in this example: - - \code - FluidControls.DateTimePickerDialog { - id: dateTimePickerDialog - standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel - standardButtonsContainer: Button { - anchors.verticalCenter: parent.verticalCenter - text: qsTr("Now") - flat: true - onClicked: dateTimePickerDialog.selectedDate = new Date() - } - } - \endcode - */ property alias standardButtonsContainer: buttonBox.data x: (parent.width - width) / 2 diff --git a/src/imports/controls/DialogLabel.qml b/src/imports/controls/DialogLabel.qml index 6e62c8c8..3ad8f005 100644 --- a/src/imports/controls/DialogLabel.qml +++ b/src/imports/controls/DialogLabel.qml @@ -17,20 +17,6 @@ import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 import Fluid.Core 1.0 as FluidCore -/*! - \qmltype DialogLabel - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Text label with standard font and styling suitable to message box text. - - Text label for the Material Design dialog text style. - - \snippet fluidcontrols-dialoglabel.qml file - - For more information you can read the - \l{https://material.io/guidelines/style/typography.html}{Material Design guidelines}. -*/ Label { font.pixelSize: FluidCore.Device.isMobile ? 18 : 17 color: Material.secondaryTextColor diff --git a/src/imports/controls/DisplayLabel.qml b/src/imports/controls/DisplayLabel.qml index dffe749a..2483d789 100644 --- a/src/imports/controls/DisplayLabel.qml +++ b/src/imports/controls/DisplayLabel.qml @@ -15,31 +15,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -/*! - \qmltype DisplayLabel - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Text label with standard font and styling suitable to display text. - - Text label for the Material Design display text style. - - \snippet fluidcontrols-displaylabel.qml file - - For more information you can read the - \l{https://material.io/guidelines/style/typography.html}{Material Design guidelines}. -*/ Label { - /*! - \qmlproperty int level - - This property holds the label level that controls - font style and size. - - Only values between 1 and 4 are allowed. - - Default value is 1. - */ property int level: 1 font.pixelSize: { diff --git a/src/imports/controls/FloatingActionButton.qml b/src/imports/controls/FloatingActionButton.qml index d08bc486..b90ead4c 100644 --- a/src/imports/controls/FloatingActionButton.qml +++ b/src/imports/controls/FloatingActionButton.qml @@ -21,23 +21,7 @@ import Fluid.Core 1.0 as FluidCore import Fluid.Controls 1.0 as FluidControls import Fluid.Effects 1.0 as FluidEffects -/*! - \qmltype FloatingActionButton - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - \brief A floating action button. - - A floating action button represents the primary action of the current page - and is used for a promoted action. - - It is a push button with rounded corners and an icon in the center. - - \snippet fluidcontrols-fab.qml file - - For more information you can read the - \l{https://material.io/guidelines/components/buttons-floating-action-button.html}{Material Design guidelines}. -*/ RoundButton { id: control @@ -49,20 +33,6 @@ RoundButton { topPadding: 6 bottomPadding: 6 - /*! - \qmlproperty bool mini - - Floating action button comes in two sizes: - - \list - \li \c Default (56x56 pixels): default size for most use cases - \li \c Mini (40x40 pixels): only used to create visual continuity with other screen elements - \endlist - - This property holds whether the floating action button size is \c Mini or not. - - By default it is \c true if screen width is less than 460 pixels. - */ property bool mini: Screen.width < 460 Material.elevation: 1 diff --git a/src/imports/controls/HeadlineLabel.qml b/src/imports/controls/HeadlineLabel.qml index 4f594126..586fa7f0 100644 --- a/src/imports/controls/HeadlineLabel.qml +++ b/src/imports/controls/HeadlineLabel.qml @@ -15,20 +15,6 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -/*! - \qmltype HeadlineLabel - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Text label with standard font and styling suitable to headlines. - - Text label for the Material Design headline text style. - - \snippet fluidcontrols-headinglabel.qml file - - For more information you can read the - \l{https://material.io/guidelines/style/typography.html}{Material Design guidelines}. -*/ Label { font.pixelSize: 24 lineHeight: 32.0 diff --git a/src/imports/controls/Icon.qml b/src/imports/controls/Icon.qml index 218c3451..a2bee2f4 100644 --- a/src/imports/controls/Icon.qml +++ b/src/imports/controls/Icon.qml @@ -20,149 +20,25 @@ import QtQuick.Controls.Material 2.3 import Fluid.Core 1.0 import Fluid.Controls 1.0 -/*! - \qmltype Icon - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Displays an icon from the Material Design icon collection, the platform's icon theme, - or another (local or remote) location. - - To use an icon from the \l{https://materialdesignicons.com/}{Material Design icon collection}, - set the \c name property to the name of the icon in its group in the form of \c group/icon_name. For example: - \code - Icon { - name: "action/settings" - } - \endcode - - This icon will by default use the light icon color from Material Design. To use the dark icon - color: - \code - Icon { - Material.theme: Material.Dark - - name: "action/settings" - } - \endcode - - In addition to using icons from Material Design, you can also use icons from the platform's - \l{http://standards.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html}{Freedesktop icon theme}. For example: - - \code - Icon { - name: "gimp" - } - \endcode - - By default, icons from the Freedesktop icon theme are not colorized unless they include the word "symbolic" in the icon name. For example, "gimp" would be full-colored by "edit-cut-symbolic" would be colored using the set \c color property (based off of \c Material.theme). If you need to colorize an icon manually, you can do so like this: - - \code - Icon { - name: "gimp" - colorize: true - } - \endcode - - You can also use custom icons like this: - \code - Icon { - source: Qt.resolvedUrl("icons/fun_icon.png") - } - \endcode - */ Item { id: icon - /*! - \qmlproperty color color - - The color of the icon. Defaults to \c Material.iconColor. - */ property color color: Material.iconColor - - /*! - \qmlproperty real size - - The size of the icon. Defaults to 24px. - */ property real size: 24 - - /*! - \qmlproperty string name - - The name of the icon to display. - - \sa source - */ property string name - - /*! - \qmlproperty url source - - \brief A URL pointing to an image to display as the icon. - - By default, this is a special URL representing the icon named by \l name from the Material - Design icon collection when using the form of "collection/icon_name", or in the case of a - single "icon_name", the platform's Freedesktop icon theme will be used. - - By default, icons from the Material Design icons collection will be treated as symbolic icons and colored using the specified \l color, while icons from the Freedesktop icon theme will - not be colorized. To override this, or set the behavior for your own custom icons, use - \l colorize. - - \sa name - */ - property url source: { + property url source: { return name ? name.indexOf("/") === 0 || name.indexOf("file://") === 0 || name.indexOf("qrc") === 0 ? name : "image://fluidicontheme/" + name : ""; } - - /*! - \qmlproperty enumeration status - \list - \li Image.Null - no image has been set - \li Image.Ready - the image has been loaded - \li Image.Loading - the image is currently being loaded - \li Image.Error - an error occurred while loading the image - \endlist - */ property alias status: image.status - - /*! - \qmlproperty bool cache - - Specifies whether the image should be cached. - The default value is true. - - Setting cache to false is useful when dealing with large images, - to make sure that they aren't cached at the expense of small - 'ui element' images. - */ property alias cache: image.cache - - /*! - \qmlproperty bool valid - - \c true if the icon is valid and fully loaded. - */ readonly property bool valid: status == Image.Ready - - /*! - Set to \c false if you want the icon to use the original image's colors and not be - colored using the specified \c color. - */ property bool colorize: (String(icon.source).indexOf(".color.") === -1 && String(icon.source).indexOf("image://fluidicontheme/") === -1) || String(icon.source).indexOf("symbolic") !== -1 || (String(icon.source).indexOf("image://fluidicontheme/") !== -1 && icon.name.indexOf("/") !== -1) - - /*! - \qmlproperty real sourceSize - - Source image size. - */ readonly property real sourceSize: String(icon.source).indexOf("image://fluidicontheme/") === 0 ? Units.roundToIconSize(size) : size width: size diff --git a/src/imports/controls/InputDialog.qml b/src/imports/controls/InputDialog.qml index 23276bb2..0de449ec 100644 --- a/src/imports/controls/InputDialog.qml +++ b/src/imports/controls/InputDialog.qml @@ -17,34 +17,10 @@ import QtQuick.Layouts 1.3 import QtQuick.Controls 2.3 import Fluid.Controls 1.0 as FluidControls -/*! - \qmltype InputDialog - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Input dialogs ask the user to input data with certain constraints. - - The dialog is automatically accepted when the Return or Enter key is pressed - and the input in an acceptable state. - - For more information you can read the - \l{https://material.io/guidelines/components/dialogs.html}{Material Design guidelines}. -*/ Dialog { id: dialog - /*! - \qmlproperty TextField textField - - Text field. - */ property alias textField: textField - - /*! - \qmlproperty string text - - Dialog text. - */ property alias text: dialogLabel.text focus: true diff --git a/src/imports/controls/ListItem.qml b/src/imports/controls/ListItem.qml index e065e0e5..7ba7bde5 100644 --- a/src/imports/controls/ListItem.qml +++ b/src/imports/controls/ListItem.qml @@ -21,75 +21,16 @@ import QtQuick.Controls.Material 2.3 import Fluid.Core 1.0 as FluidCore import Fluid.Controls 1.0 as FluidControls -/*! - \qmltype ListItem - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief A standard list item, with one or more lines of text and optional left and right items. - */ ItemDelegate { id: listItem - /*! - \qmlproperty int dividerInset - - How many pixels the divider is from the left border. - This property is set to the \l leftItem width by default. - - \sa ListItem::showDivider - \sa ListItem::leftItem - */ property int dividerInset: leftItem.showing ? listItem.height : 0 - - /*! - \qmlproperty bool showDivider - - This property holds whether the divider is shown or not. - Default value is \c false. - */ property alias showDivider: divider.visible - - /*! - \qmlproperty int maximumLineCount - - Maximum number of text lines allowed to show. - */ property int maximumLineCount: 2 - - /*! - \qmlproperty string subText - - Text to display below \l text. - */ property alias subText: subLabel.text - - /*! - \qmlproperty string valueText - - Value text. - */ property alias valueText: valueLabel.text - - /*! - \qmlproperty Item leftItem - - Item to show on the left. - */ property alias leftItem: leftItem.children - - /*! - \qmlproperty Item rightItem - - Item to show on the right. - */ property alias rightItem: rightItem.children - - /*! - \qmlproperty Item secondaryItem - - Secondary item. - */ property alias secondaryItem: secondaryItem.children /*! diff --git a/src/imports/controls/Loadable.qml b/src/imports/controls/Loadable.qml index 8f860eb5..eae29ae4 100644 --- a/src/imports/controls/Loadable.qml +++ b/src/imports/controls/Loadable.qml @@ -14,47 +14,11 @@ import QtQuick 2.10 -/*! - \qmltype Loadable - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Loadable component. -*/ Item { - /*! - \qmlproperty Component component - - Component to load. - */ property Component component - - /*! - \qmlproperty Animation showAnimation - - Animation to play when the component is shown. - */ property var showAnimation - - /*! - \qmlproperty Animation hideAnimation - - Animation to play when the component is hidden. - */ property var hideAnimation - - /*! - \qmlproperty bool asynchronous - - Whether the component is loaded asynchronously or not. - */ property alias asynchronous: loader.asynchronous - - /*! - \qmlproperty Item item - - Item created after \l Loadable::component is loaded. - */ property alias item: loader.item id: root @@ -88,20 +52,10 @@ Item { } } - /*! - \qmlmethod void Loadable::show() - - Show the component. - */ function show() { loader.sourceComponent = root.component; } - /*! - \qmlmethod void Loadable::hide() - - Hide the component. - */ function hide() { if (loader.item && loader.item.hide != undefined) loader.item.hide(); diff --git a/src/imports/controls/NavigationDrawer.qml b/src/imports/controls/NavigationDrawer.qml index d062782c..0535d475 100644 --- a/src/imports/controls/NavigationDrawer.qml +++ b/src/imports/controls/NavigationDrawer.qml @@ -20,72 +20,9 @@ import QtQuick.Controls.Material 2.3 import Fluid.Core 1.0 as FluidCore import Fluid.Controls 1.0 as FluidControls -/*! - \qmltype NavigationDrawer - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief The navigation drawer slides in from the left and is a common pattern in apps. - - This is a temporary navigation drawer: it can toggle open or closed. - Closed by default, this type of navigation drawer opens temporarily above all - other content until a section is selected or the overlay is tapped. - - This navigation drawer comes with no contents, therefore it's completely customizable. - - By default the navigation drawer is permanent and pinned on desktop and - temporary on mobile. - - \code - import Fluid.Controls 2.0 as FluidControls - - FluidControls.ApplicationWindow { - width: 400 - height: 400 - visible: true - - Button { - text: "Open" - onClicked: drawer.open() - } - - FluidControls.NavigationDrawer { - topContent: Image { - source: "background.png" - width: parent.width - height: 200 - } - - FluidControls.ListItem { - icon.source: FluidControls.Utils.iconUrl("content/inbox") - text: "Inbox" - } - - FluidControls.ListItem { - icon.source: FluidControls.Utils.iconUrl("content/archive") - text: "Archive" - } - - FluidControls.ListItem { - icon.source: FluidControls.Utils.iconUrl("action/settings") - text: "Settings" - showDivider: true - } - } - } - \endcode - - For more information you can read the - \l{https://material.io/guidelines/patterns/navigation-drawer.html}{Material Design guidelines}. -*/ Drawer { id: drawer - /*! - \qmlproperty list topContent - - The items added to this list will be displayed on top of the contents. - */ property alias topContent: topItem.data /*! diff --git a/src/imports/controls/NavigationListView.qml b/src/imports/controls/NavigationListView.qml index bc81e06d..56267686 100644 --- a/src/imports/controls/NavigationListView.qml +++ b/src/imports/controls/NavigationListView.qml @@ -17,100 +17,13 @@ import QtQuick.Controls 2.3 import Fluid.Core 1.0 as FluidCore import Fluid.Controls 1.0 as FluidControls -/*! - \qmltype NavigationListView - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief The navigation drawer slides in from the left and is a common pattern in apps. - - This is a temporary navigation drawer: it can toggle open or closed. - Closed by default, this type of navigation drawer opens temporarily above all - other content until a section is selected or the overlay is tapped. - - NavigationDrawer is recommended on phones and tablets. - - This navigation drawer comes with a built-in ListView. - - \code - import QtQuick 2.10 - import QtQuick.Controls 2.3 - import QtQuick.Window 2.2 - import Fluid.Controls 1.0 as FluidControls - - Window { - id: window - width: 400 - height: 400 - visible: true - - Button { - text: "Open" - onClicked: drawer.open() - } - - FluidControls.NavigationListView { - topContent: Image { - width: parent.width - height: 200 - source: "background.png" - } - - actions: [ - FluidControls.Action { - text: "Action 1" - }, - FluidControls.Action { - text: "Action 2" - } - ] - } - } - \endcode - - For more information you can read the - \l{https://material.io/guidelines/patterns/navigation-drawer.html}{Material Design guidelines}. -*/ FluidControls.NavigationDrawer { id: drawer - /*! - \qmlproperty int currentIndex - - The \c currentIndex property holds the index of the current item. - */ property alias currentIndex: navDrawerListView.currentIndex - - /*! - \qmlproperty Item currentItem - - The \c currentItem property holds the current item. - */ property alias currentItem: navDrawerListView.currentItem - - /*! - \qmlproperty bool autoHighlight - - This property holds whether auto-highlight is enabled. - - If this property is \c true, the current item will be automatically highlighted. - - The default value is \c false. - */ property bool autoHighlight: false - - /*! - \qmlproperty list actions - - List of actions to be displayed by the drawer. - */ property list actions - - /*! - \qmlproperty Component delegate - - The delegate for item that constitute a menu item. - */ property alias delegate : navDrawerListView.delegate ScrollView { diff --git a/src/imports/controls/NoiseBackground.qml b/src/imports/controls/NoiseBackground.qml index cb10eee8..816ac7e6 100644 --- a/src/imports/controls/NoiseBackground.qml +++ b/src/imports/controls/NoiseBackground.qml @@ -55,30 +55,8 @@ import QtQuick 2.10 -/*! - \qmltype NoiseBackground - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Background with noise. -*/ ShaderEffect { - /*! - \qmlproperty Gradient gradient - - The gradient to use to fill the rectangle. - - \sa Rectangle::gradient - */ property alias gradient: rect.gradient - - /*! - \qmlproperty color color - - The color to use to fill the rectangle. - - \sa Rectangle::color - */ property alias color: rect.color Rectangle { diff --git a/src/imports/controls/OverlayView.qml b/src/imports/controls/OverlayView.qml index 0044f768..f1f47665 100644 --- a/src/imports/controls/OverlayView.qml +++ b/src/imports/controls/OverlayView.qml @@ -15,21 +15,6 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -/*! - \qmltype OverlayView - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Ready made popup centered on its parent. - - This controls provides a ready made popup visual element that can be - used with \l Window or \l ApplicationWindow. - - Overlay is centered to its parent. In order to ensure it is displayed - above other items in the scene, it is recommended to use ApplicationWindow. - ApplicationWindow also provides background dimming effects since Overlay - acts as a modal popup. - */ Popup { x: (parent.width - width) / 2 y: (parent.height - height) / 2 diff --git a/src/imports/controls/PageStack.qml b/src/imports/controls/PageStack.qml index 88102932..417a579f 100644 --- a/src/imports/controls/PageStack.qml +++ b/src/imports/controls/PageStack.qml @@ -15,35 +15,11 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -/*! - \qmltype PageStack - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Manages the page stack used for navigation. -*/ StackView { id: stackView - /*! - \qmlsignal pushed(Item page) - - This signal is emitted when an item is pushed to the stack. - */ signal pushed(Item page) - - /*! - \qmlsignal popped(Item page) - - This signal is emitted when an item is popped from the stack. - */ signal popped(Item page) - - /*! - \qmlsignal replaced(Item page) - - This signal is emitted when an item is replaced in the stack. - */ signal replaced(Item page) property int __lastDepth: 0 diff --git a/src/imports/controls/Placeholder.qml b/src/imports/controls/Placeholder.qml index b45b6388..9a2a373e 100644 --- a/src/imports/controls/Placeholder.qml +++ b/src/imports/controls/Placeholder.qml @@ -20,33 +20,11 @@ import QtQuick.Controls.impl 2.3 import QtQuick.Controls.Material 2.3 import Fluid.Controls 1.0 -/*! - \qmltype Placeholder - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Shows a placeholder icon and text. - - For more information you can read the - \l{https://material.io/guidelines/patterns/empty-states.html#empty-states-avoiding-completely-empty-states}{Material Design guidelines}. -*/ Control { id: control property alias icon: iconLabel.icon - - /*! - \qmlproperty string text - - Text. - */ property alias text: textLabel.text - - /*! - \qmlproperty string subText - - Sub text. - */ property alias subText: subTextLabel.text implicitWidth: columnLayout.implicitWidth diff --git a/src/imports/controls/Ripple.qml b/src/imports/controls/Ripple.qml index e7690531..604640bf 100644 --- a/src/imports/controls/Ripple.qml +++ b/src/imports/controls/Ripple.qml @@ -18,76 +18,15 @@ import Fluid.Core 1.0 import Fluid.Controls 1.0 as FluidControls import Fluid.Effects 1.0 -/*! - \qmltype Ripple - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Represents a Material Design ripple ink animation used in various touchable components. - - This component is useful for including in Material Design-specific components, which should be implemented using the +material file selector. Eventually this should be upstreamed to QtQuick - Controls 2. - - For more information you can read the - \l{https://material.io/guidelines/motion/material-motion.html#material-motion-how-does-material-move}{Material Design guidelines}. - */ MouseArea { id: ripple - /*! - \qmlproperty color color - - The color of the ripple. Defaults to black with 12% opacity. - */ property color color: Qt.rgba(0,0,0,0.12) - - /*! - \qmlproperty bool circular - - Set to \c true if the ripple is used on a circular component, such as a button in an - action bar or a floating action button. - */ property bool circular: false - - /*! - \qmlproperty bool centered - - Set to \c true if the ripple should be centered regardless of where the mouse/touch - input came from. - */ property bool centered: false - - /*! - \qmlproperty bool focused - - Set to \c true if the component is focused and should display a focus ripple. - */ property bool focused - - /*! - \qmlproperty color focusColor - - The color of the focus ripple. Also used to determine the color of the focus background - behind the ripple. - - \sa Ripple::focused - */ property color focusColor: "transparent" - - /*! - \qmlproperty int focusWidth - - The width of the focus ripple. - - \sa Ripple::focused - */ property int focusWidth: width - 32 - - /*! - \qmlproperty Item control - - Control that that needs the ripple effect. - */ property Item control clip: true diff --git a/src/imports/controls/Showable.qml b/src/imports/controls/Showable.qml index c34d539c..eaf0056e 100644 --- a/src/imports/controls/Showable.qml +++ b/src/imports/controls/Showable.qml @@ -14,26 +14,8 @@ import QtQuick 2.10 -/*! - \qmltype Showable - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Showtable component. -*/ FocusScope { - /*! - \qmlproperty Animation showAnimation - - Animation to play to show the component. - */ property var showAnimation - - /*! - \qmlproperty Animation hideAnimation - - Animation to play to hide the component. - */ property var hideAnimation id: root @@ -54,11 +36,6 @@ FocusScope { } } - /*! - \qmlmethod void Showable::show() - - Show the component. - */ function show() { // Stop hide animation if it's still running if (hideAnimation != undefined && hideAnimation.running) @@ -72,11 +49,6 @@ FocusScope { showAnimation.restart(); } - /*! - \qmlmethod void Showable::hide() - - Hide the component. - */ function hide() { // Stop show animation if it's still running if (showAnimation != undefined && showAnimation.running) diff --git a/src/imports/controls/Sidebar.qml b/src/imports/controls/Sidebar.qml index 9df39b98..63cb33e8 100644 --- a/src/imports/controls/Sidebar.qml +++ b/src/imports/controls/Sidebar.qml @@ -18,37 +18,7 @@ import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 import Fluid.Controls 1.0 -/*! - \qmltype Sidebar - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - \brief A sidebar component for use in adaptive layouts - - To use, simply add an instance to your code, and anchor other components to it. - - To show or hide, set the expanded property. - - By default, the sidebar has a flickable built in, and whatever contents are added - will be placed in the flickable. When you want this disabled, or want to fill the - entire sidebar, set the autoFill property to false. - - Examples: - \code - Item { - property bool wideAspect: width > Units.gu(80) - - Sidebar { - expanded: wideAspect - - // Anchoring is automatic - } - } - \endcode - - For more information you can read the - \l{https://material.io/guidelines/patterns/navigation-drawer.html}{Material Design guidelines}. - */ Pane { id: sidebar @@ -57,24 +27,9 @@ Pane { */ default property alias contents: contents.data - /*! - The text displayed for the action. - */ property int edge: Qt.LeftEdge - - /*! - Show or hide the sidebar. - */ property bool expanded: true - - /*! - Flick automatically. - */ property bool autoFlick: true - - /*! - The text displayed as header. - */ property alias header: headerItem.text Behavior on anchors.leftMargin { diff --git a/src/imports/controls/SmoothFadeImage.qml b/src/imports/controls/SmoothFadeImage.qml index ac9b979a..691ae24b 100644 --- a/src/imports/controls/SmoothFadeImage.qml +++ b/src/imports/controls/SmoothFadeImage.qml @@ -14,181 +14,18 @@ import QtQuick 2.10 -/*! - \qmltype SmoothFadeImage - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Displays an image and smoothly fade when the source is changed. - - This component can be used in place of an Image when a smooth fade animation - between two sources is needed. - - When the source is changed and the fade animation ends, the image loaded before - is unloaded; this means that only one image at a time is loaded. - - Images are loaded asynchronously and are not cache, so unlike the Image - component the \c asynchronous and \c cache properties are not available. - - Example of usage: - \code - import QtQuick 2.10 - import Fluid.Controls 1.0 - - Item { - width: 128 - height: 128 - - SmoothFadeImage { - anchors.fill: parent - source: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Qt_logo_2015.svg/1380px-Qt_logo_2015.svg.png" - fillMode: Image.PreserveAspectFit - smooth: true - fadeDuration: 400 - - MouseArea { - anchors.fill: parent - onClicked: parent.source = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Qt_logo_2016.svg/1280px-Qt_logo_2016.svg.png" - } - } - } - \endcode -*/ Item { id: root - /*! - The image being displayed. - SmoothFadeImage can handle any image format supported by Qt, loaded - from any URL scheme supported by Qt. - - \sa Image::source - */ property url source - - /*! - \qmlproperty enumeration fillMode - - Set this property to define what happens when the source image has a - different size than the item. - - \list - \li Image.Stretch - the image is scaled to fit (default) - \li Image.PreserveAspectFit - the image is scaled uniformly to fit without cropping - \li Image.PreserveAspectCrop - the image is scaled uniformly to fill, cropping if necessary - \li Image.Tile - the image is duplicated horizontally and vertically - \li Image.TileVertically - the image is stretched horizontally and tiled vertically - \li Image.TileHorizontally - the image is stretched vertically and tiled horizontally - \li Image.Pad - the image is not transformed - \endlist - - Defaults to \c Image.Stretch. - - Note that \c clip is false by default which means that the item might - paint outside its bounding rectangle even if the fillMode is set to PreserveAspectCrop. - */ - property int fillMode : Image.Stretch - - /*! - Set this to change the fade animation time (in milliseconds). - Default value is 250 ms. - */ + property int fillMode: Image.Stretch property int fadeDuration: 250 - - /*! - This property holds whether the fade animation is running or not. - */ readonly property bool running: animation.running - - /*! - Set this property to false to disable the fade animation. - If the animation is disable, SmoothFadeImage behaves like a normal Image. - - The fade animation is enabled by default. - */ property bool animationEnabled: true - - /*! - This property holds the actual width and height of the loaded image. - - Unlike the \c width and \c height properties, which scale the painting of the - image, this property sets the actual number of pixels stored for the - loaded image so that large images do not use more memory than necessary. - - For example, this ensures the image in memory is no larger than - 1024x1024 pixels, regardless of the SmoothFadeImage's width and height values: - - \code - Rectangle { - width: ... - height: ... - - Image { - anchors.fill: parent - source: "reallyBigImage.jpg" - sourceSize.width: 1024 - sourceSize.height: 1024 - } - } - \endcode - - If the image's actual size is larger than the sourceSize, the image is - scaled down. If only one dimension of the size is set to greater than 0, - the other dimension is set in proportion to preserve the source image's - aspect ratio. (The \c fillMode is independent of this.) - - If both the sourceSize.width and sourceSize.height are set the image - will be scaled down to fit within the specified size, maintaining the - image's aspect ratio. The actual size of the image after scaling is - available via \c Item::implicitWidth and \c Item::implicitHeight. - - If the source is an intrinsically scalable image (eg. SVG), this property - determines the size of the loaded image regardless of intrinsic size. - Avoid changing this property dynamically; rendering an SVG is slow compared - to an image. - - If the source is a non-scalable image (eg. JPEG), the loaded image will be - no greater than this property specifies. For some formats (currently only - JPEG), the whole image will never actually be loaded into memory. - - sourceSize can be cleared to the natural size of the image by setting - sourceSize to undefined. - - Note: Changing this property dynamically causes the image source to be - reloaded, potentially even from the network, if it is not in the disk cache. - */ property alias sourceSize: __priv.sourceSize - - /*! - \qmlproperty enumeration status - - This property holds the status of image loading. It can be one of: - - \list - \li Image.Null - no image has been set - \li Image.Ready - the image has been loaded - \li Image.Loading - the image is currently being loaded - \li Image.Error - an error occurred while loading the image - \endlist - */ readonly property int status: __priv.loadingImage ? __priv.loadingImage.status : Image.Null - - /*! - This property holds whether the image is smoothly filtered when scaled or - transformed. Smooth filtering gives better visual quality, but it may be - slower on some hardware. - - If the image is displayed at its natural size, this property has no - visual or performance effect. - - By default, this property is set to \c true. - */ property bool smooth: true - /*! - This signal is emitted when the swap between the old source and the new - one has happened. - */ signal imageSwapped() QtObject { diff --git a/src/imports/controls/SmoothFadeLoader.qml b/src/imports/controls/SmoothFadeLoader.qml index 1498c339..bd6fae48 100644 --- a/src/imports/controls/SmoothFadeLoader.qml +++ b/src/imports/controls/SmoothFadeLoader.qml @@ -14,58 +14,9 @@ import QtQuick 2.10 -/*! - \qmltype SmoothFadeLoader - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Displays an item and smoothly fade when the source is changed. - - This component loads an item with a Loader and smoothly fade to another item when - the source URL is changed. - - Items are loaded synchronously, also the item being hidden is not unloaded to - avoid an unpleasant "flash" after the transition. - - Example of usage: - \code - import QtQuick 2.10 - import Fluid.Controls 1.0 - - Item { - width: 640 - height: 480 - - SmoothFadeLoader { - anchors.fill: parent - source: "MyComponent.qml" - fadeDuration: 400 - - MouseArea { - anchors.fill: parent - onClicked: parent.source = "AnotherComponent.qml" - } - } - } - \endcode -*/ Item { - /*! - The item being displayed. - - \sa Loader::source - */ property url source - - /*! - Set this to change the fade animation time (in milliseconds). - Default value is 250 ms. - */ property int fadeDuration: 250 - - /*! - This property holds whether the fade animation is running or not. - */ readonly property bool running: animation.running id: root diff --git a/src/imports/controls/SnackBar.qml b/src/imports/controls/SnackBar.qml index a442809e..2219ce22 100644 --- a/src/imports/controls/SnackBar.qml +++ b/src/imports/controls/SnackBar.qml @@ -19,77 +19,15 @@ import QtQuick.Controls.Material 2.3 import Fluid.Core 1.0 as FluidCore import Fluid.Effects 1.0 as FluidEffects -/*! - \qmltype SnackBar - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief SnackBar provides a brief feedback about an operation. - - \code - Page { - title: qsTr("Send a message") - - Button { - anchors.centerIn: parent - text: qsTr("Send Message") - onClicked: snackBar.open(qsTr("Message sent")) - } - - SnackBar { - id: snackBar - } - } - \endcode - - SnackBar provides a brief feedback about an operation through a - message at the bottom of the screen. - - It contains a single line of text directly related to the operation performed. - There can be a text action, but no icons. - - For more information you can read the - \l{https://material.io/guidelines/components/snackbars-toasts.html}{Material Design guidelines}. -*/ Rectangle { id: control - /*! - \qmlproperty bool opened - - Whether the snack bar is currently open or not. - */ readonly property bool opened: d.opened - - /*! - \qmlproperty int duration - - Amount of time (in ms) to keep the notification visible. - The default is 2s. - */ property int duration: 2000 - - /*! - \qmlproperty bool fullWidth - - Whether the bar should take full screen width. - The default depends on the device: full width only on phones and tablets. - */ property bool fullWidth: FluidCore.Device.type === FluidCore.Device.phone || FluidCore.Device.type === FluidCore.Device.phablet - /*! - \qmlsignal clicked() - - This signal is emitted when the button is clicked. - The handler is \c onClicked. - */ signal clicked() - /*! - \qmlmethod void SnackBar::open(string text, string buttonText = "") - - Open the bar with the specified \a text and \a buttonText. - */ function open(text, buttonText) { snackText.text = text; snackButton.text = buttonText; @@ -98,11 +36,6 @@ Rectangle { timer.restart(); } - /*! - \qmlmethod void SnackBar::close() - - Close the bar. - */ function close() { d.opened = false; } diff --git a/src/imports/controls/Subheader.qml b/src/imports/controls/Subheader.qml index ac8578e2..7216b698 100644 --- a/src/imports/controls/Subheader.qml +++ b/src/imports/controls/Subheader.qml @@ -18,24 +18,9 @@ import QtQuick.Layouts 1.3 import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 -/*! - \qmltype Subheader - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Subheaders are special list tiles that delineate distinct sections of a list or grid list. - - For more information you can read the - \l{https://material.io/guidelines/components/subheaders.html}{Material Design guidelines}. - */ ItemDelegate { id: listItem - /*! - \qmlproperty color textColor - - Text color. - */ property alias textColor: label.color width: parent ? parent.width : undefined diff --git a/src/imports/controls/SubheadingLabel.qml b/src/imports/controls/SubheadingLabel.qml index 0abd830e..dcc4a8ca 100644 --- a/src/imports/controls/SubheadingLabel.qml +++ b/src/imports/controls/SubheadingLabel.qml @@ -16,31 +16,7 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 import Fluid.Core 1.0 as FluidCore -/*! - \qmltype SubheadingLabel - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Text label with standard font and styling suitable to subheading. - - Text label for the Material Design subheading text style. - - \snippet fluidcontrols-subheadinglabel.qml file - - For more information you can read the - \l{https://material.io/guidelines/style/typography.html}{Material Design guidelines}. -*/ Label { - /*! - \qmlproperty int level - - This property holds the label level that controls - font style and size. - - Only values between 1 and 4 are allowed. - - Default value is 1. - */ property int level: 1 font.pixelSize: FluidCore.Device.isMobile ? 16 : 15 diff --git a/src/imports/controls/Tab.qml b/src/imports/controls/Tab.qml index 24cfd0d8..d355a066 100644 --- a/src/imports/controls/Tab.qml +++ b/src/imports/controls/Tab.qml @@ -15,21 +15,10 @@ import QtQuick 2.10 -/*! - \qmltype Tab - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - \brief Tab for tabbed pages. - - Tab of a \l TabbedPage. - */ Item { id: tab - /*! - This property holds the tab icon information. - */ property QtObject icon: QtObject { property string name property url source @@ -37,14 +26,6 @@ Item { property int height: 24 property color color: "transparent" } - - /*! - The title of this tab. - */ property string title - - /*! - Controls whether a close button will be shown for this tab. - */ property bool canRemove: false } diff --git a/src/imports/controls/TabbedPage.qml b/src/imports/controls/TabbedPage.qml index f031d5ac..a9f6d5f8 100644 --- a/src/imports/controls/TabbedPage.qml +++ b/src/imports/controls/TabbedPage.qml @@ -20,86 +20,18 @@ import QtQuick.Controls.impl 2.3 import QtQuick.Controls.Material 2.3 import Fluid.Controls 1.0 as FluidControls -/*! - \qmltype TabbedPage - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Page with tabs. - - \qml - import QtQuick 2.10 - import Fluid.Controls 1.0 as FluidControls - - FluidControls.ApplicationWindow { - title: "Application Name" - width: 1024 - height: 800 - visible: true - - initialPage: FluidControls.TabbedPage { - FluidControls.Tab { - title: "Tab 1" - - Label { - anchors.centerIn: parent - text: "Hello World!" - } - } - - FluidControls.Tab { - title: "Tab 2" - - Label { - anchors.centerIn: parent - text: "Hello World!" - } - } - } - } - \endqml - */ FluidControls.Page { id: page /*! \internal - */ + */ default property alias contents: swipeView.contentData - /*! - \qmlproperty int count - - Number of tabs. - */ readonly property alias count: swipeView.count - - /*! - \qmlproperty int currentIndex - - Index of the currently selected tab. - */ readonly property alias currentIndex: swipeView.currentIndex - - /*! - \qmlproperty Item selectedTab - - The currently selected tab. - */ readonly property alias selectedTab: swipeView.currentItem - - /*! - \qmlproperty ToolBar tabBar - - Tool bar that contains tabs. - */ readonly property alias tabBar: tabToolBar - - /*! - \qmlproperty TabBar tabs - - Tab bar. - */ readonly property alias tabs: tabBar appBar.elevation: 0 diff --git a/src/imports/controls/ThinDivider.qml b/src/imports/controls/ThinDivider.qml index 182b8cca..c2ae2a5b 100644 --- a/src/imports/controls/ThinDivider.qml +++ b/src/imports/controls/ThinDivider.qml @@ -15,13 +15,6 @@ import QtQuick 2.10 import QtQuick.Controls.Material 2.3 -/*! - \qmltype ThinDivider - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief A 1px high divider for use in lists and other columns of content. - */ Rectangle { color: Material.dividerColor width: parent.width diff --git a/src/imports/controls/TimePickerDialog.qml b/src/imports/controls/TimePickerDialog.qml index de490771..1bbe318d 100644 --- a/src/imports/controls/TimePickerDialog.qml +++ b/src/imports/controls/TimePickerDialog.qml @@ -17,84 +17,12 @@ import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 import Fluid.Controls 1.0 as FluidControls -/*! - \qmltype TimePickerDialog - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Dialog with a picker to select time - - A dialog that lets you selected time. - - \code - import QtQuick 2.10 - import Fluid.Controls 1.0 as FluidControls - - Item { - width: 600 - height: 600 - - FluidControls.TimePickerDialog { - onAccepted: { - console.log(selectedDate); - } - standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel - } - } - \endcode - - For more information you can read the - \l{https://material.io/guidelines/components/pickers.html}{Material Design guidelines}. -*/ Dialog { id: dialog - /*! - \qmlproperty enumeration Fluid.Controls::TimePickerDialog::orientation - - This property holds the picker orientation. - The default value is automatically selected based on the device orientation. - - Possible values: - \value TimePicker.Landscape The picker is landscape. - \value TimePicker.Portrait The picker is portrait. - */ property alias orientation: timePicker.orientation - - /*! - \qmlproperty bool Fluid.Controls::TimePickerDialog::prefer24Hour - - This property determines the visibility of the AM/PM switch. - */ property alias prefer24Hour: timePicker.prefer24Hour - - /*! - \qmlproperty date Fluid.Controls::TimePickerDialog::selectedTime - - This property holds the time that has been selected by the user. - The default value is the current time. - */ property alias selectedTime: timePicker.selectedTime - - /*! - \qmlproperty list Fluid.Controls::TimePickerDialog::standardButtonsContainer - - This property allows you to place additional buttons alongside the standard buttons - of the dialog, like in this example: - - \code - FluidControls.TimePickerDialog { - id: timePickerDialog - standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel - standardButtonsContainer: Button { - anchors.verticalCenter: parent.verticalCenter - text: qsTr("Now") - flat: true - onClicked: timePickerDialog.selectedTime = new Date() - } - } - \endcode - */ property alias standardButtonsContainer: buttonBox.data x: (parent.width - width) / 2 diff --git a/src/imports/controls/TitleLabel.qml b/src/imports/controls/TitleLabel.qml index afdcde87..cb899b65 100644 --- a/src/imports/controls/TitleLabel.qml +++ b/src/imports/controls/TitleLabel.qml @@ -15,20 +15,6 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 -/*! - \qmltype TitleLabel - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Text label with standard font and styling suitable to titles. - - Text label for the Material Design title text style. - - \snippet fluidcontrols-titlelabel.qml file - - For more information you can read the - \l{https://material.io/guidelines/style/typography.html}{Material Design guidelines}. -*/ Label { font.pixelSize: 20 font.weight: Font.Medium diff --git a/src/imports/controls/ToolButton.qml b/src/imports/controls/ToolButton.qml index df96e054..745ecb13 100644 --- a/src/imports/controls/ToolButton.qml +++ b/src/imports/controls/ToolButton.qml @@ -16,22 +16,9 @@ import QtQuick 2.10 import QtQuick.Controls 2.3 as QQC2 import QtQuick.Controls.impl 2.3 as QQCImpl2 -/*! - \qmltype ToolButton - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief \l ToolButton with a extra features. -*/ QQC2.ToolButton { id: control - /*! - \qmlproperty bool hoverAnimation - - Specify whether the icon should be rotated 90 degrees when the mouse hovers. - Default is \c false. - */ property bool hoverAnimation: false contentItem: QQCImpl2.IconLabel { diff --git a/src/imports/controls/Units.qml b/src/imports/controls/Units.qml index 624d4de9..3388eb93 100644 --- a/src/imports/controls/Units.qml +++ b/src/imports/controls/Units.qml @@ -17,72 +17,17 @@ pragma Singleton import QtQuick 2.10 import Fluid.Core 1.0 -/*! - \qmltype Units - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Units. -*/ Item { - /*! - \qmlproperty int gridUnit - - Fundamental unit of space for sizes depending on the current font. - It correspond to the capital letter M width in pixel. - */ readonly property int gridUnit: textMetrics.height - /*! - \qmlproperty real smallSpacing - - The amount of spacing that should be used around smaller UI - elements. It can be used as margin around button box and - spacing between buttons. - */ readonly property real smallSpacing: 8 - - /*! - \qmlproperty real mediumSpacing - - The amount of spacing that should be used inside medium UI - elements such as padding between title and body text in a dialog box. - */ readonly property real mediumSpacing: 20 - - /*! - \qmlproperty real largeSpacing - - The amount of spacing that should be used inside bigger UI - elements such as padding in a dialog box. - */ readonly property real largeSpacing: 24 - /*! - \qmlproperty int shortDuration - - Duration for short animations to make UI events noticeable. - */ readonly property int shortDuration: 100 - - /*! - \qmlproperty int mediumDuration - - Duration for medium length animations. - */ readonly property int mediumDuration: 200 - - /*! - \qmlproperty int longDuration - - Duration for long animations such as windows opening or closing. - */ readonly property int longDuration: 400 - /*! - \qmlproperty object iconSizes - Standard icon sizes. - */ readonly property QtObject iconSizes: QtObject { readonly property int tiny: 8 readonly property int small: 16 @@ -98,20 +43,10 @@ Item { text: "M" } - /*! - \qmlmethod int Units::gu(real size) - - Returns a round size in pixels multiplied by grid unit. - */ function gu(x) { return Math.round(x * gridUnit); } - /*! - \qmlmethod int Units::roundToIconSize(real size) - - Returns the size in pixel closes to the icon size. - */ function roundToIconSize(x) { // Find the size closest to icon size if (x <= 0) diff --git a/src/imports/controls/Wave.qml b/src/imports/controls/Wave.qml index ba724f74..d7588532 100644 --- a/src/imports/controls/Wave.qml +++ b/src/imports/controls/Wave.qml @@ -16,67 +16,26 @@ import QtQuick 2.10 import QtGraphicalEffects 1.0 -/*! - \qmltype Wave - \inqmlmodule Fluid.Controls - \ingroup fluidcontrols - - \brief Provides a wave animation for transitioning between views of content. - - For more information you can read the - \l{https://material.io/guidelines/motion/material-motion.html#material-motion-how-does-material-move}{Material Design guidelines}. -*/ Item { id: wave - /*! - Whether wave is open. - */ property bool open: false - /*! - The current size of the wave - */ property real size: 0 - /*! - The horizontal center of the wave - */ property real initialX - /*! - The vertical center of the wave - */ property real initialY - /*! - The abstract width of the wave - */ property real abstractWidth: parent.width - /*! - The abstract height of the wave - */ property real abstractHeight: parent.height - /*! - The diameter of the completely open wave - */ property real diameter: 2 * Math.sqrt(Math.pow(Math.max(initialX, abstractWidth - initialX), 2) + Math.pow(Math.max(initialY, abstractHeight - initialY), 2)) - /*! - This signal is emitted, when the wave has finished opening or closing. - \a open defines, whether the wave was being opened or closed - */ signal finished(bool open) - /*! - Opens the wave centering the wave at (\a x, \a y) - */ function openWave(x, y) { wave.initialX = x || parent.width/2; wave.initialY = y || parent.height/2; wave.open = true; } - /*! - Closes the wave centering the wave at (\a x, \a y) - */ function closeWave(x, y) { wave.initialX = x || parent.width/2; wave.initialY = y || parent.height/2; diff --git a/src/imports/templates/Card.qml b/src/imports/templates/Card.qml index f83f8e8c..2d02412f 100644 --- a/src/imports/templates/Card.qml +++ b/src/imports/templates/Card.qml @@ -16,7 +16,7 @@ import QtQuick.Controls 2.3 as C import QtQuick.Controls.Material 2.3 /*! - \qmltype AbstractCard + \qmltype Card \inqmlmodule Fluid.Templates \ingroup fluidtemplates From 8d3c34738e63a1bde8d9d95f4e1f93c8ad93ccb7 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Wed, 3 Oct 2018 23:34:00 +0200 Subject: [PATCH 60/74] Redesign Chip Make Chip look more like the Material Design specifications: Inherit from AbstractButton so we have mouse input management, and other Control properties. Replace the delete ToolButton with an Icon: it doesn't seem to be a tool button from the Material Design specifications and also change the icon to what we see in the specifications. Change foreground and background on mouse hover. Remove the caption property and use text instead. Add the ability to open a popup with alternative options for expandable chips (for example contact chips). --- doc/src/controls/Chip.qdoc | 67 ++++- src/demo/qml/Pages/Controls/ChipPage.qml | 314 ++++++++++++++++++++++- src/imports/controls/Chip.qml | 181 +++++++++---- src/imports/controls/qmldir | 1 + 4 files changed, 498 insertions(+), 65 deletions(-) diff --git a/doc/src/controls/Chip.qdoc b/doc/src/controls/Chip.qdoc index 7777e6d1..125351b7 100644 --- a/doc/src/controls/Chip.qdoc +++ b/doc/src/controls/Chip.qdoc @@ -17,6 +17,7 @@ /*! \qmltype Chip + \inherits QtQuick.Controls::AbstractButton \inqmlmodule Fluid.Controls \ingroup fluidcontrols \since Fluid.Controls 1.1 @@ -28,27 +29,79 @@ */ /*! - \qmlproperty string Fluid.Controls::Chip::caption + \qmlproperty bool Fluid.Controls::Chip::expandable - The caption to show in the chip. + This property holds whether this chip can expand to show + more information or options. + + \sa Fluid.Controls::Chip::model + \sa Fluid.Controls::Chip::delegate + \sa Fluid.Controls::Chip::selectedItem */ /*! - \qmlproperty alias Fluid.Controls::Chip::icon + \qmlproperty model Fluid.Controls::Chip::model + + Expandable chips show a popup with a list view when clicked. + + This property holds the model providing data for said list view. + + The following roles are expected to be present: + + \list + \li label - Description of the option + \li value - Actual value of the option + \li imageSource - URL with the image source for the option + \endlist - The icon to display (if any) + \sa Fluid.Controls::Chip::expandable + \sa Fluid.Controls::Chip::delegate + \sa Fluid.Controls::Chip::selectedItem */ /*! - \qmlproperty font Fluid.Controls::Chip::font + \qmlproperty Component Fluid.Controls::Chip::delegate - The caption font in the Chip. + Expandable chips show a popup with a list view when clicked. + + The delegate provides a template defining each item instantiated + by the list view. + + By default the delegate is a Fluid.Controls::ListItem. + + \sa Fluid.Controls::Chip::expandable + \sa Fluid.Controls::Chip::model + \sa Fluid.Controls::Chip::selectedItem */ +/*! + \qmlproperty Component Fluid.Controls::Chip::selectedItem + \readonly + + Expandable chips show a popup with a list view when clicked. + + This property holds the currently selected item. + + By default the delegate is a Fluid.Controls::ListItem and the + selected item contains the following properties: + + \list + \li string label - Description of the option + \li string value - Actual value of the option + \li url imageSource - URL with the image source for the option + \endlist + + \sa Fluid.Controls::Chip::expandable + \sa Fluid.Controls::Chip::model + \sa Fluid.Controls::Chip::delegate +*/ + + /*! \qmlproperty bool Fluid.Controls::Chip::deletable - Whether the chip can be deleted. + This property holds whether the chip can be deleted. + The default value is \c false. */ /*! diff --git a/src/demo/qml/Pages/Controls/ChipPage.qml b/src/demo/qml/Pages/Controls/ChipPage.qml index 5b88d86c..13c4c2bd 100644 --- a/src/demo/qml/Pages/Controls/ChipPage.qml +++ b/src/demo/qml/Pages/Controls/ChipPage.qml @@ -13,29 +13,315 @@ */ import QtQuick 2.10 +import QtQuick.Controls 2.3 +import QtQuick.Controls.Material 2.3 +import Fluid.Core 1.0 as FluidCore import Fluid.Controls 1.1 as FluidControls import "../.." as Components Components.StyledPage { - Row { + Column { anchors.centerIn: parent spacing: 16 - - FluidControls.Chip { - caption: qsTr("Chip") + + Column { + spacing: 16 + + FluidControls.TitleLabel { + text: qsTr("Input Chips") + } + + FluidCore.SortFilterProxyModel { + id: contactModel + + sourceModel: ListModel { + ListElement { + label: "Contact Name 1" + value: "primaryemail@email.com" + imageSource: "qrc:/images/balloon.jpg" + } + ListElement { + label: "Contact Name 2" + value: "email2@email.com" + imageSource: "qrc:/images/balloon.jpg" + } + ListElement { + label: "Contact Name 3" + value: "email3@email.com" + imageSource: "qrc:/images/balloon.jpg" + } + } + sortExpression: { + return (modelLeft.weight < modelRight.weight) && (modelRight.email < modelRight.email); + } + } + + Row { + spacing: 8 + + FluidControls.Chip { + id: inputChip1 + iconItem: FluidControls.CircleImage { + source: inputChip1.selectedItem.imageSource + width: 24 + height: 24 + } + text: selectedItem.label + expandable: true + model: contactModel + onSelectedItemChanged: console.info(selectedItem.value) + } + + FluidControls.Chip { + id: inputChip2 + iconItem: FluidControls.CircleImage { + source: inputChip2.selectedItem.imageSource + width: 24 + height: 24 + } + text: selectedItem.label + expandable: true + deletable: true + model: contactModel + onDeleted: console.info(qsTr("Deleted")) + onSelectedItemChanged: console.info(selectedItem.value) + } + } + } + + Column { + spacing: 16 + + FluidControls.TitleLabel { + text: qsTr("Color Chips") + } + + ButtonGroup { + id: colorChipsGroup + } + + Row { + spacing: 8 + + FluidControls.Chip { + id: colorChip1 + iconItem: Rectangle { + width: 24 + height: 24 + radius: 12 + color: Material.color(Material.Blue) + + FluidControls.Icon { + anchors.centerIn: parent + source: colorChip1.checked ? FluidControls.Utils.iconUrl("navigation/check") : "" + size: 20 + } + } + text: qsTr("Blue 500") + checkable: true + ButtonGroup.group: colorChipsGroup + } + + FluidControls.Chip { + id: colorChip2 + iconItem: Rectangle { + width: 24 + height: 24 + radius: 12 + color: Material.color(Material.Green) + + FluidControls.Icon { + anchors.centerIn: parent + source: colorChip2.checked ? FluidControls.Utils.iconUrl("navigation/check") : "" + size: 20 + } + } + text: qsTr("Green 500") + checkable: true + ButtonGroup.group: colorChipsGroup + } + + FluidControls.Chip { + id: colorChip3 + iconItem: Rectangle { + width: 24 + height: 24 + radius: 12 + color: Material.color(Material.Red) + + FluidControls.Icon { + anchors.centerIn: parent + source: colorChip3.checked ? FluidControls.Utils.iconUrl("navigation/check") : "" + size: 20 + } + } + text: qsTr("Red 500") + checkable: true + ButtonGroup.group: colorChipsGroup + } + } } - FluidControls.Chip { - caption: qsTr("Deletable chip") - deletable: true + + Column { + spacing: 16 + + FluidControls.TitleLabel { + text: qsTr("Choice Chips") + } + + ButtonGroup { + id: choiceChipsGroup + } + + Row { + id: choiceChips + spacing: 8 + + FluidControls.Chip { + checkable: true + checked: true + text: qsTr("Extra Soft") + ButtonGroup.group: choiceChipsGroup + } + + FluidControls.Chip { + checkable: true + text: qsTr("Soft") + ButtonGroup.group: choiceChipsGroup + } + + FluidControls.Chip { + checkable: true + text: qsTr("Medium") + ButtonGroup.group: choiceChipsGroup + } + + FluidControls.Chip { + checkable: true + text: qsTr("Hard") + ButtonGroup.group: choiceChipsGroup + } + } } - FluidControls.Chip { - caption: qsTr("Chip with icon") - icon.source: FluidControls.Utils.iconUrl("action/face") + + Column { + spacing: 16 + + FluidControls.TitleLabel { + text: qsTr("Filter Chips") + } + + ButtonGroup { + id: filterChipsGroup + exclusive: false + } + + Row { + id: filterChips + spacing: 8 + + FluidControls.Chip { + checkable: true + checked: true + text: qsTr("Elevator") + icon.source: checked ? FluidControls.Utils.iconUrl("navigation/check") : "" + ButtonGroup.group: filterChipsGroup + } + + FluidControls.Chip { + checkable: true + text: qsTr("Washer / Dryer") + icon.source: checked ? FluidControls.Utils.iconUrl("navigation/check") : "" + ButtonGroup.group: filterChipsGroup + } + + FluidControls.Chip { + checkable: true + text: qsTr("Fireplace") + icon.source: checked ? FluidControls.Utils.iconUrl("navigation/check") : "" + ButtonGroup.group: filterChipsGroup + } + + FluidControls.Chip { + checkable: true + text: qsTr("Wheelchair access") + icon.source: checked ? FluidControls.Utils.iconUrl("navigation/check") : "" + ButtonGroup.group: filterChipsGroup + } + + FluidControls.Chip { + checkable: true + text: qsTr("Dogs ok") + icon.source: checked ? FluidControls.Utils.iconUrl("navigation/check") : "" + ButtonGroup.group: filterChipsGroup + } + + FluidControls.Chip { + checkable: true + text: qsTr("Cats ok") + icon.source: checked ? FluidControls.Utils.iconUrl("navigation/check") : "" + ButtonGroup.group: filterChipsGroup + } + } } - FluidControls.Chip { - caption: qsTr("Deletable chip with icon") - icon.source: FluidControls.Utils.iconUrl("social/person") - deletable: true + + Column { + spacing: 16 + + FluidControls.TitleLabel { + text: qsTr("Chips") + } + + Row { + spacing: 8 + + FluidControls.Chip { + text: qsTr("Chip") + } + FluidControls.Chip { + text: qsTr("Deletable chip") + deletable: true + onDeleted: console.info(qsTr("Deleted")) + } + } + + Row { + spacing: 8 + + FluidControls.Chip { + text: qsTr("Chip with icon") + icon.source: FluidControls.Utils.iconUrl("action/face") + } + FluidControls.Chip { + text: qsTr("Deletable chip with icon") + icon.source: FluidControls.Utils.iconUrl("social/person") + deletable: true + onDeleted: console.info(qsTr("Deleted")) + } + } + + Row { + spacing: 8 + + FluidControls.Chip { + iconItem: FluidControls.CircleImage { + source: "qrc:/images/balloon.jpg" + width: 24 + height: 24 + } + text: qsTr("Chip with image") + } + FluidControls.Chip { + iconItem: FluidControls.CircleImage { + source: "qrc:/images/balloon.jpg" + width: 24 + height: 24 + } + text: qsTr("Deletable chip with image") + deletable: true + onDeleted: console.info(qsTr("Deleted")) + } + } } } } diff --git a/src/imports/controls/Chip.qml b/src/imports/controls/Chip.qml index 00c71685..f39a385f 100644 --- a/src/imports/controls/Chip.qml +++ b/src/imports/controls/Chip.qml @@ -13,76 +13,169 @@ */ import QtQuick 2.10 +import QtQuick.Layouts 1.0 +import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.3 import Fluid.Controls 1.1 as FluidControls import Fluid.Effects 1.0 as FluidEffects -Rectangle { - property string caption: "" - property alias icon: contactIcon - property alias font: captionLabel.font +AbstractButton { + id: control + + property bool expandable: false + property alias model: listView.model + property alias delegate: listView.delegate + readonly property alias selectedItem: listView.currentItem + property alias iconItem: iconItem.children property bool deletable: false signal deleted() - width: contactIcon.width + captionLabel.implicitWidth + deleteButton.width + 12 - height: 32 - radius: 16 - color: Material.color(Material.Grey, Material.Shade300) + implicitWidth: Math.max(background ? background.implicitWidth : 0, contentItem.implicitWidth) + leftPadding + rightPadding + implicitHeight: Math.max(background ? background.implicitHeight : 0, contentItem.implicitHeight) + topPadding + bottomPadding - FluidControls.Icon { - id: contactIcon + font.pixelSize: expandable ? 14 : 13 - anchors { - left: parent.left - verticalCenter: parent.verticalCenter - } + leftPadding: 12 + rightPadding: 12 + spacing: 8 - width: 32 - height: width + icon.width: 24 + icon.height: 24 - visible: false - } + hoverEnabled: true - FluidEffects.CircleMask { - id: circleMask + Material.elevation: control.pressed ? 2 : 0 + Material.background: Material.color(Material.Grey, control.checked || control.hovered ? Material.Shade700 : Material.Shade300) - anchors.fill: contactIcon - source: contactIcon + onClicked: { + if (control.expandable) + popup.open(); + } + + background: Rectangle { + implicitHeight: 32 + radius: 16 + color: control.Material.backgroundColor - visible: source !== "" + layer.enabled: control.Material.elevation > 0 + layer.effect: FluidEffects.Elevation { + elevation: control.Material.elevation + } } - FluidControls.CaptionLabel { - id: captionLabel + contentItem: RowLayout { + spacing: control.spacing - anchors { - left: parent.left - right: deleteButton.left - verticalCenter: parent.verticalCenter - leftMargin: circleMask.visible ? 40 : 12 - rightMargin: deletable ? 4 : 12 + Material.theme: control.hovered ? Material.Dark : Material.Light + + FluidControls.Icon { + id: actualIcon + + Layout.alignment: Qt.AlignVCenter + + name: control.icon.name + source: control.icon.source + size: control.icon.width + color: bodyLabel.color + + visible: !iconItem.visible && (name || source.toString()) } - text: caption - } + Item { + id: iconItem + + Layout.alignment: Qt.AlignVCenter - ToolButton { - id: deleteButton + objectName: "iconItem" - icon.source: FluidControls.Utils.iconUrl("navigation/close") - icon.color: Material.iconColor + implicitWidth: childrenRect.width + implicitHeight: childrenRect.height - anchors { - right: parent.right - verticalCenter: parent.verticalCenter + visible: visibleChildren.length > 0 } - width: 40 - height: width + Label { + id: bodyLabel - visible: deletable + Layout.alignment: Qt.AlignVCenter - onClicked: deleted() + text: control.text + font: control.font + color: FluidControls.Color.transparent(control.checked || control.hovered ? Material.primaryHighlightedTextColor : Material.primaryTextColor, 0.87) + } + + FluidControls.Icon { + id: deleteIcon + + Layout.alignment: Qt.AlignVCenter + + implicitWidth: control.icon.width + implicitHeight: control.icon.height + + source: FluidControls.Utils.iconUrl("navigation/cancel") + color: control.hovered ? Material.primaryHighlightedTextColor : Material.iconColor + colorize: true + + opacity: control.hovered ? 1.0 : 0.54 + + visible: control.deletable + + MouseArea { + anchors.fill: parent + enabled: control.deletable + onClicked: control.deleted() + } + } + } + + Popup { + id: popup + + width: 400 + + padding: 0 + + Material.elevation: 8 + + ScrollView { + anchors.fill: parent + + clip: true + + ListView { + id: listView + currentIndex: 0 + delegate: FluidControls.ListItem { + readonly property string label: model.label + readonly property string value: model.value + readonly property url imageSource: model.imageSource + + text: listView.currentIndex === index ? model.label : "" + subText: model.value + highlighted: ListView.isCurrentItem + leftItem: FluidControls.CircleImage { + anchors.centerIn: parent + source: model.imageSource + width: 40 + height: width + } + rightItem: FluidControls.Icon { + anchors.centerIn: parent + source: FluidControls.Utils.iconUrl("navigation/cancel") + visible: listView.currentIndex === index + + MouseArea { + anchors.fill: parent + onClicked: popup.close() + } + } + onClicked: { + listView.currentIndex = index; + popup.close(); + } + } + } + } } } diff --git a/src/imports/controls/qmldir b/src/imports/controls/qmldir index df323f5f..1f08659d 100644 --- a/src/imports/controls/qmldir +++ b/src/imports/controls/qmldir @@ -62,6 +62,7 @@ ApplicationWindow 1.1 ApplicationWindow11.qml AppToolBar 1.1 AppToolBar11.qml AppBar 1.1 AppBar11.qml Chip 1.1 Chip.qml +ContactChip 1.1 ContactChip.qml Page 1.1 Page11.qml PageSidebar 1.1 PageSidebar.qml SearchBar 1.1 SearchBar11.qml From 33614f8577efd14a7ff26e47a45b8963f7cb7943 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sun, 14 Oct 2018 18:37:43 +0200 Subject: [PATCH 61/74] Support Qt static builds iOS builds are all static, so we already had support for Qt static builds. We just had to make it work for every target OS. Closes: #219 --- examples/perproject/minimalqmake/src/main.cpp | 2 +- examples/perproject/minimalqmake/src/src.pro | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/examples/perproject/minimalqmake/src/main.cpp b/examples/perproject/minimalqmake/src/main.cpp index f3f37fc6..a134502a 100644 --- a/examples/perproject/minimalqmake/src/main.cpp +++ b/examples/perproject/minimalqmake/src/main.cpp @@ -2,7 +2,7 @@ #include #include -#ifdef Q_OS_IOS +#ifdef QT_STATIC # include Q_IMPORT_PLUGIN(FluidCorePlugin) Q_IMPORT_PLUGIN(FluidControlsPlugin) diff --git a/examples/perproject/minimalqmake/src/src.pro b/examples/perproject/minimalqmake/src/src.pro index 7cbb45f3..b43f685d 100644 --- a/examples/perproject/minimalqmake/src/src.pro +++ b/examples/perproject/minimalqmake/src/src.pro @@ -45,7 +45,13 @@ ios { APP_QML_FILES.files = $$OUT_PWD/../fluid/qml/Fluid APP_QML_FILES.path = qml QMAKE_BUNDLE_DATA += APP_QML_FILES +} + +win32 { + WINDEPLOYQT_OPTIONS = -qmldir $$OUT_PWD/../fluid/qml/Fluid +} +qtConfig(static) { QMAKE_LIBDIR += \ $$OUT_PWD/../fluid/qml/Fluid/Core \ $$OUT_PWD/../fluid/qml/Fluid/Controls \ @@ -59,10 +65,6 @@ ios { fluidtemplatesplugin } -win32 { - WINDEPLOYQT_OPTIONS = -qmldir $$OUT_PWD/../fluid/qml/Fluid -} - # Default rules for deployment. qnx: target.path = /tmp/$${TARGET}/bin else: unix:!android: target.path = /opt/$${TARGET}/bin From f16a3d75c6da023219c9a36418a94a6205a6aa57 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sun, 14 Oct 2018 18:43:33 +0200 Subject: [PATCH 62/74] Bump Fluid.Controls import version --- src/imports/controls/controls.pro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/imports/controls/controls.pro b/src/imports/controls/controls.pro index 043ba280..4b0f4901 100644 --- a/src/imports/controls/controls.pro +++ b/src/imports/controls/controls.pro @@ -1,6 +1,6 @@ TARGET = fluidcontrolsplugin TARGETPATH = Fluid/Controls -IMPORT_VERSION = 1.0 +IMPORT_VERSION = 1.1 QT += qml quick quickcontrols2 svg From a2b666fd506862f49f143aa0b4c57db628dcef74 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sun, 14 Oct 2018 20:21:56 +0200 Subject: [PATCH 63/74] Fix App Store for iOS Do not include static QML plugins inside the bundle to fix App Store complaints. Issue: #267 --- examples/perproject/minimalqmake/src/src.pro | 24 +++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/examples/perproject/minimalqmake/src/src.pro b/examples/perproject/minimalqmake/src/src.pro index b43f685d..35f8f292 100644 --- a/examples/perproject/minimalqmake/src/src.pro +++ b/examples/perproject/minimalqmake/src/src.pro @@ -42,9 +42,27 @@ macx { ios { # Bundle Fluid QML plugins with the application - APP_QML_FILES.files = $$OUT_PWD/../fluid/qml/Fluid - APP_QML_FILES.path = qml - QMAKE_BUNDLE_DATA += APP_QML_FILES + APP_QML_FILES_Core.files = $$files($$OUT_PWD/../fluid/qml/Fluid/Core/*qml*) + APP_QML_FILES_Core.path = qml/Fluid/Core + APP_QML_FILES_Controls.files = \ + $$files($$OUT_PWD/../fluid/qml/Fluid/Controls/*qml*) \ + $$OUT_PWD/../fluid/qml/Fluid/Controls/icons + APP_QML_FILES_Controls.path = qml/Fluid/Controls + APP_QML_FILES_ControlsPrivate.files = $$files($$OUT_PWD/../fluid/qml/Fluid/Controls/Private/*qml*) + APP_QML_FILES_ControlsPrivate.path = qml/Fluid/Controls/Private + APP_QML_FILES_Effects.files = $$files($$OUT_PWD/../fluid/qml/Fluid/Effects/*qml*) + APP_QML_FILES_Effects.path = qml/Fluid/Effects + APP_QML_FILES_Layouts.files = $$files($$OUT_PWD/../fluid/qml/Fluid/Layouts/*qml*) + APP_QML_FILES_Layouts.path = qml/Fluid/Layouts + APP_QML_FILES_Templates.files = $$files($$OUT_PWD/../fluid/qml/Fluid/Templates/*qml*) + APP_QML_FILES_Templates.path = qml/Fluid/Templates + QMAKE_BUNDLE_DATA += \ + APP_QML_FILES_Core \ + APP_QML_FILES_Controls \ + APP_QML_FILES_ControlsPrivate \ + APP_QML_FILES_Effects \ + APP_QML_FILES_Layouts \ + APP_QML_FILES_Templates } win32 { From 7b1d1c1d09e3834978c14e43875d9761fad8855f Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 27 Oct 2018 09:07:55 +0200 Subject: [PATCH 64/74] Fix autotests Autotests were not built due to a typo... That's embarassing. --- tests/auto/auto.qbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/auto/auto.qbs b/tests/auto/auto.qbs index 8dcb5deb..2373d4bf 100644 --- a/tests/auto/auto.qbs +++ b/tests/auto/auto.qbs @@ -3,7 +3,7 @@ import qbs.FileInfo Project { name: "Autotests" - condition: project.autotestEnabled && project.withQmlImports + condition: project.autotestEnabled && project.withQmlModules references: [ "controls/controls.qbs", From 400668df7bf2d5f85d31ea695ff950e2f07545f6 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 27 Oct 2018 10:01:56 +0200 Subject: [PATCH 65/74] Hide AppVeyor configuration --- appveyor.yml => .appveyor.yml | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename appveyor.yml => .appveyor.yml (100%) diff --git a/appveyor.yml b/.appveyor.yml similarity index 100% rename from appveyor.yml rename to .appveyor.yml From d646e4622b1e71d357c47eae43b97827c1ccf2fb Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 27 Oct 2018 10:02:26 +0200 Subject: [PATCH 66/74] Disable autotests on AppVeyor Tests fails on Windows due to different time format, we have to investigate whether the bug is in Qt or Fluid. Issue: #270 --- .appveyor.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.appveyor.yml b/.appveyor.yml index fbb78578..8a9074f2 100644 --- a/.appveyor.yml +++ b/.appveyor.yml @@ -28,7 +28,7 @@ before_build: - qbs config preferences.qbsSearchPaths %cd%/fluid/qbs/shared build_script: - git submodule update --init --recursive -- qbs -d build --all-products config:release project.autotestEnabled:true project.useSystemQbsShared:false project.deploymentEnabled:false project.withDocumentation:false +- qbs -d build --all-products config:release project.autotestEnabled:false project.useSystemQbsShared:false project.deploymentEnabled:false project.withDocumentation:false - dir build\release\install-root notifications: - provider: Slack From 670e2a75db7a54e97549b4ffcad525a7a7193fa2 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Mon, 22 Oct 2018 08:36:16 +0200 Subject: [PATCH 67/74] Fix SnackBar form factor detection Fix typo. [ChangeLog][Controls] Fix SnackBar form factor detection, resulting in `fullWidth` default value being correctly set. --- src/imports/controls/SnackBar.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/imports/controls/SnackBar.qml b/src/imports/controls/SnackBar.qml index 2219ce22..d10eb1fd 100644 --- a/src/imports/controls/SnackBar.qml +++ b/src/imports/controls/SnackBar.qml @@ -24,7 +24,7 @@ Rectangle { readonly property bool opened: d.opened property int duration: 2000 - property bool fullWidth: FluidCore.Device.type === FluidCore.Device.phone || FluidCore.Device.type === FluidCore.Device.phablet + property bool fullWidth: FluidCore.Device.formFactor === FluidCore.Device.Phone || FluidCore.Device.formFactor === FluidCore.Device.Phablet signal clicked() From 28d994897eaea2f9a37abaeac2813cff8251f5bf Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Wed, 24 Oct 2018 23:48:05 +0200 Subject: [PATCH 68/74] Implement SnackBar as a Popup SnackBar is now an Item that controls a Popup whose size and position are determined based on the Item's parent. Using a Popup will allow us to never show SnackBar by mistake and will make it work inside a Layout. [ChangeLog][Controls] Implement SnackBar as a Popup making it always stack on top of the window contents. --- src/imports/controls/SnackBar.qml | 163 +++++++++++++----------------- 1 file changed, 71 insertions(+), 92 deletions(-) diff --git a/src/imports/controls/SnackBar.qml b/src/imports/controls/SnackBar.qml index d10eb1fd..be4e8505 100644 --- a/src/imports/controls/SnackBar.qml +++ b/src/imports/controls/SnackBar.qml @@ -19,10 +19,10 @@ import QtQuick.Controls.Material 2.3 import Fluid.Core 1.0 as FluidCore import Fluid.Effects 1.0 as FluidEffects -Rectangle { - id: control +Item { + id: snackBar - readonly property bool opened: d.opened + readonly property bool opened: popup.visible property int duration: 2000 property bool fullWidth: FluidCore.Device.formFactor === FluidCore.Device.Phone || FluidCore.Device.formFactor === FluidCore.Device.Phablet @@ -32,125 +32,104 @@ Rectangle { snackText.text = text; snackButton.text = buttonText; snackButton.visible = buttonText !== ""; - d.opened = true; - timer.restart(); + popup.open(); } function close() { - d.opened = false; + popup.close(); } - states: [ - State { - name: "fullWidth" - when: fullWidth - - AnchorChanges { - target: control - anchors.left: parent.left - anchors.right: parent.right - } - }, - State { - name: "normalWidth" - when: !fullWidth - - PropertyChanges { - target: control - width: snackLayout.implicitWidth - } - AnchorChanges { - target: control - anchors.horizontalCenter: parent.horizontalCenter - } - } - ] + Timer { + id: timer - anchors.bottom: parent.bottom - anchors.bottomMargin: d.opened ? 0 : -control.height + interval: snackBar.duration + running: popup.visible - Behavior on anchors.bottomMargin { - NumberAnimation { duration: 300 } + onTriggered: popup.close() } - radius: fullWidth ? 0 : 2 - color: Material.background - height: snackLayout.implicitHeight - z: 10000 + Popup { + id: popup - layer.enabled: !fullWidth - layer.effect: FluidEffects.Elevation { - elevation: 1 - } + Material.theme: Material.Dark - Material.theme: Material.Dark + modal: false + closePolicy: Popup.NoAutoClose - QtObject { - id: d + x: snackBar.fullWidth ? 0 : (snackBar.parent.width - width) / 2 - property bool opened: false - } + width: snackBar.fullWidth ? snackBar.parent.width : snackLayout.implicitWidth + height: snackLayout.implicitHeight - Timer { - id: timer + enter: Transition { + NumberAnimation { property: "y"; from: snackBar.parent.height; to: snackBar.parent.height - popup.height } + } - interval: control.duration + exit: Transition { + NumberAnimation { property: "y"; from: snackBar.parent.height - popup.height; to: snackBar.parent.height } + } + + background: Rectangle { + radius: snackBar.fullWidth ? 0 : 2 + color: Material.background - onTriggered: { - if (!running) - d.opened = false; + layer.enabled: !snackBar.fullWidth + layer.effect: FluidEffects.Elevation { + elevation: 1 + } } - } - MouseArea { - anchors.fill: parent - } + contentItem: Item { + implicitWidth: snackLayout.implicitWidth + implicitHeight: snackLayout.implicitHeight - RowLayout { - id: snackLayout + RowLayout { + id: snackLayout - anchors { - verticalCenter: parent.verticalCenter - left: control.fullWidth ? parent.left : undefined - right: control.fullWidth ? parent.right : undefined - } + anchors { + verticalCenter: parent.verticalCenter + left: snackBar.fullWidth ? parent.left : undefined + right: snackBar.fullWidth ? parent.right : undefined + } - spacing: 0 + spacing: 0 - Item { - width: 24 - } + Item { + width: 24 + } - Label { - id: snackText + Label { + id: snackText - verticalAlignment: Text.AlignVCenter - maximumLineCount: 2 - wrapMode: Text.Wrap - elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + maximumLineCount: 2 + wrapMode: Text.Wrap + elide: Text.ElideRight - Layout.fillWidth: true - Layout.minimumWidth: control.fullWidth ? -1 : 288 - Layout.maximumWidth: control.fullWidth ? -1 : 568 - Layout.preferredHeight: lineCount == 2 ? 80 : 48 - } + Layout.fillWidth: true + Layout.minimumWidth: snackBar.fullWidth ? -1 : 288 + Layout.maximumWidth: snackBar.fullWidth ? -1 : 568 + Layout.preferredHeight: lineCount == 2 ? 80 : 48 + } - Item { - id: middleSpacer - width: snackButton.text == "" ? 0 : (control.fullWidth ? 24 : 48) - } + Item { + id: middleSpacer + width: snackButton.text == "" ? 0 : (snackBar.fullWidth ? 24 : 48) + } - Button { - id: snackButton + Button { + id: snackButton - flat: true - onClicked: control.clicked() + flat: true + onClicked: snackBar.clicked() - Material.foreground: Material.accentColor - } + Material.foreground: Material.accentColor + } - Item { - width: 24 + Item { + width: 24 + } + } } } } From f1c0556b6caa671c6dce331d545d52d15a68cef8 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 27 Oct 2018 08:48:50 +0200 Subject: [PATCH 69/74] Revamp list item demo Show all list items that you can make. [ChangeLog][Demo] ListItem demo now shows all the supported item types. --- src/demo/qml/Pages/Controls/ListItemPage.qml | 77 ++++++++++++++++---- 1 file changed, 63 insertions(+), 14 deletions(-) diff --git a/src/demo/qml/Pages/Controls/ListItemPage.qml b/src/demo/qml/Pages/Controls/ListItemPage.qml index 2004f333..736ee747 100644 --- a/src/demo/qml/Pages/Controls/ListItemPage.qml +++ b/src/demo/qml/Pages/Controls/ListItemPage.qml @@ -13,28 +13,77 @@ */ import QtQuick 2.10 +import QtQuick.Layouts 1.0 import QtQuick.Controls 2.3 -import Fluid.Controls 1.1 +import Fluid.Controls 1.0 as FluidControls import "../.." Page { - ListView { + ColumnLayout { anchors.fill: parent - model: ListModel { - ListElement { title: "List Item 1"; source: "qrc:/qml/Pages/Controls/SubPage.qml" } - ListElement { title: "List Item 2"; source: "qrc:/qml/Pages/Controls/SubPage.qml" } - ListElement { title: "List Item 3"; source: "qrc:/qml/Pages/Controls/SubPage.qml" } - ListElement { title: "List Item 4"; source: "qrc:/qml/Pages/Controls/SubPage.qml" } - ListElement { title: "List Item 5"; source: "qrc:/qml/Pages/Controls/SubPage.qml" } + + FluidControls.ListItem { + text: "ListItem with only text" + } + + FluidControls.ListItem { + text: "ListItem with sub text" + subText: "Sub text" + } + + FluidControls.ListItem { + text: "ListItem with sub text and 2/2 lines" + subText: "Sub text line 1\nSub text line 2" + } + + FluidControls.ListItem { + text: "ListItem with sub text and 3/3 lines" + subText: "Sub text line 1\nSub text line 2\nSub text line 3" + maximumLineCount: 3 + } + + FluidControls.ListItem { + text: "ListItem with sub text and 4/4 lines" + subText: "Sub text line 1\nSub text line 2\nSub text line 3\nSub text line 4" + maximumLineCount: 4 } - header: Subheader { - text: "Header" + + FluidControls.ListItem { + text: "ListItem with sub text and 5/3 lines" + subText: "Sub text line 1\nSub text line 2\nSub text line 3\nSub text line 4\nSub text line 5" + maximumLineCount: 3 } - delegate: ListItem { - text: model.title - onClicked: pageStack.push(model.source) + + FluidControls.ListItem { + text: "ListItem with value text" + valueText: "Value" } - ScrollIndicator.vertical: ScrollIndicator {} + FluidControls.ListItem { + icon.source: FluidControls.Utils.iconUrl("action/event") + text: "ListItem with icon" + } + + FluidControls.ListItem { + text: "ListItem with custom rightItem" + rightItem: Switch { + anchors.centerIn: parent + checked: true + } + } + + FluidControls.ListItem { + text: "ListItem with custom secondaryItem" + secondaryItem: Slider { + width: parent.width + from: 0 + to: 100 + value: 50 + } + } + + Item { + Layout.fillHeight: true + } } } From 5d16dc4772213f927e2694a6174a0d994c252fa7 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 27 Oct 2018 08:49:58 +0200 Subject: [PATCH 70/74] Do not calculate ListItem.implicitHeight Let the layout figure out the size itself. This will avoid binding loops for implicitHeight. [ChangeLog][Controls] Avoid binding loops on ListItem.implicitHeight with implicit size calculation. --- src/imports/controls/ListItem.qml | 32 +++++----------------------- tests/auto/controls/tst_listitem.qml | 14 ++++++------ 2 files changed, 12 insertions(+), 34 deletions(-) diff --git a/src/imports/controls/ListItem.qml b/src/imports/controls/ListItem.qml index 7ba7bde5..aa1f7fac 100644 --- a/src/imports/controls/ListItem.qml +++ b/src/imports/controls/ListItem.qml @@ -67,27 +67,6 @@ ItemDelegate { } contentItem: RowLayout { - implicitHeight: { - var height = 0; - - if (subText != "") { - if (maximumLineCount == 2) - height = 72; - else - height = 88; - } else { - if (secondaryItem.showing) - height = secondaryItem.childrenRect.height + (label.visible ? FluidControls.Units.largeSpacing * 2 : FluidControls.Units.smallSpacing * 2); - else - height = 48; - } - - var leftHeight = leftItem.childrenRect.height + FluidControls.Units.smallSpacing * 2; - var rightHeight = rightItem.childrenRect.height + FluidControls.Units.smallSpacing * 2; - - return Math.max(height, leftHeight, rightHeight); - } - spacing: FluidControls.Units.smallSpacing * 2 Item { @@ -97,8 +76,8 @@ ItemDelegate { objectName: "leftItem" - Layout.preferredWidth: showing ? 40 : 0 - Layout.preferredHeight: width + Layout.preferredWidth: showing ? childrenRect.width : 0 + Layout.preferredHeight: showing ? childrenRect.height : 0 Layout.alignment: Qt.AlignCenter IconLabel { @@ -169,14 +148,13 @@ ItemDelegate { objectName: "subTextLabel" Layout.fillWidth: true - Layout.preferredHeight: visible ? implicitHeight * maximumLineCount/lineCount : 0 color: Material.secondaryTextColor elide: Text.ElideRight wrapMode: Text.WordWrap visible: text != "" && !contentItem.showing - maximumLineCount: visible ? listItem.maximumLineCount - 1 : 0 + maximumLineCount: visible ? listItem.maximumLineCount : 0 } Item { @@ -187,7 +165,7 @@ ItemDelegate { objectName: "secondaryItem" Layout.fillWidth: true - Layout.preferredHeight: showing ? childrenRect.height + (label.visible ? FluidControls.Units.smallSpacing : FluidControls.Units.largeSpacing) : 0 + Layout.preferredHeight: showing ? childrenRect.height + (FluidControls.Units.smallSpacing * 2) : 0 } } @@ -199,7 +177,7 @@ ItemDelegate { objectName: "rightItem" Layout.preferredWidth: showing ? childrenRect.width : 0 - Layout.preferredHeight: parent.height + Layout.preferredHeight: showing ? childrenRect.height + (FluidControls.Units.smallSpacing * 2) : 0 } } } diff --git a/tests/auto/controls/tst_listitem.qml b/tests/auto/controls/tst_listitem.qml index a77c0869..06c975dd 100644 --- a/tests/auto/controls/tst_listitem.qml +++ b/tests/auto/controls/tst_listitem.qml @@ -47,7 +47,7 @@ Item { id: listItemWithSubtext2 maximumLineCount: 3 - subText: "Random Text" + subText: "Random Text\nRandom Text\nRandom Text" } ListItem { @@ -55,7 +55,7 @@ Item { secondaryItem: Item { width: parent.width - height: 42 + height: 90 } } @@ -75,7 +75,7 @@ Item { text: "Random Text" rightItem: Item { width: parent.width - height: 69 + height: 70 } } } @@ -111,12 +111,12 @@ Item { } function test_implicit_height() { - compare(listItemWithSubtext1.implicitHeight, 72); - compare(listItemWithSubtext2.implicitHeight, 88); - compare(listItemWithSecondaryItem.implicitHeight, 58); + compare(listItemWithSubtext1.implicitHeight, 48); + compare(listItemWithSubtext2.implicitHeight, 60); + compare(listItemWithSecondaryItem.implicitHeight, 106); compare(listItemWithoutSecondaryItem.implicitHeight, 48); compare(listItemWithLeftItem.implicitHeight, 48); - compare(listItemWithRightItem.implicitHeight, 85); + compare(listItemWithRightItem.implicitHeight, 86); } } } From 709663ebf8828bf09019cd3a2395545e6ed73c2b Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Wed, 24 Oct 2018 23:48:44 +0200 Subject: [PATCH 71/74] Update qbs-shared --- qbs/shared | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/qbs/shared b/qbs/shared index 6d0e5689..ebee5a87 160000 --- a/qbs/shared +++ b/qbs/shared @@ -1 +1 @@ -Subproject commit 6d0e56898a799ad6c181420f6413acb2dc928cb4 +Subproject commit ebee5a8798ab0a063b56cf7c73be2a28ec353a2e From 1f26947eacacdd26fedfa5e3fb62dd002d5ea759 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 27 Oct 2018 14:49:22 +0200 Subject: [PATCH 72/74] Update appdata --- src/demo/io.liri.Fluid.Demo.appdata.xml | 1 + 1 file changed, 1 insertion(+) diff --git a/src/demo/io.liri.Fluid.Demo.appdata.xml b/src/demo/io.liri.Fluid.Demo.appdata.xml index 1485a522..0755c875 100644 --- a/src/demo/io.liri.Fluid.Demo.appdata.xml +++ b/src/demo/io.liri.Fluid.Demo.appdata.xml @@ -31,6 +31,7 @@ ModernToolkit + From cedf8ae6ff0119dbab3668c911cfa1a3298fce90 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 27 Oct 2018 16:46:57 +0200 Subject: [PATCH 73/74] Remove ZenHub link --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index 2eb1c846..2bfd6d07 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,6 @@ Fluid ===== -[![ZenHub.io](https://img.shields.io/badge/supercharged%20by-zenhub.io-blue.svg)](https://zenhub.io) - [![License](https://img.shields.io/badge/license-MPL2-blue.svg)](https://www.mozilla.org/en-US/MPL/2.0/) [![GitHub release](https://img.shields.io/github/release/lirios/fluid.svg)](https://github.com/lirios/fluid) [![Build Status](https://travis-ci.org/lirios/fluid.svg?branch=develop)](https://travis-ci.org/lirios/fluid) From d6541782710630dd5e5634e7e6036dfe8e617a7d Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Sat, 27 Oct 2018 14:48:32 +0200 Subject: [PATCH 74/74] Bump version to 1.1.0 --- fluid.qbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fluid.qbs b/fluid.qbs index edf9b9d6..4f45096f 100644 --- a/fluid.qbs +++ b/fluid.qbs @@ -4,7 +4,7 @@ import qbs.Probes Project { name: "Fluid" - readonly property string version: "1.0.0" + readonly property string version: "1.1.0" readonly property var versionParts: version.split('.').map(function(part) { return parseInt(part); }) readonly property string minimumQtVersion: "5.10.0"