diff --git a/src/CMakeLists.txt b/src/CMakeLists.txt --- a/src/CMakeLists.txt +++ b/src/CMakeLists.txt @@ -12,9 +12,10 @@ if (CMAKE_SYSTEM_NAME STREQUAL "Android") find_package(KF5Kirigami2 ${KF5_DEP_VERSION}) + find_package(KF5ItemModels ${KF5_DEP_VERSION}) set(kirigami2gallery_EXTRA_LIBS Qt5::AndroidExtras #FIXME: we shouldn't have to link to it but otherwise the lib won't be packaged on Android - Qt5::QuickControls2 KF5::Kirigami2) + Qt5::QuickControls2 KF5::Kirigami2 KF5::ItemModels) endif() find_program(kpackagetool_cmd kpackagetool5) diff --git a/src/data/contents/ui/MainPage.qml b/src/data/contents/ui/MainPage.qml --- a/src/data/contents/ui/MainPage.qml +++ b/src/data/contents/ui/MainPage.qml @@ -21,6 +21,7 @@ import QtQuick.Controls 2.0 as QQC2 import QtQuick.Layouts 1.2 import org.kde.kirigami 2.11 as Kirigami +import org.kde.kitemmodels 1.0 Kirigami.ScrollablePage { id: pageRoot @@ -60,153 +61,168 @@ Kirigami.PagePool { id: mainPagePool } - ListView { - id: mainListView - currentIndex: -1 - //currentIndex has focus, openPageIndex is the one actually open now - activeFocusOnTab: true - focus: true + ListModel { + id: galleryModel + ListElement { + title: "Buttons" + targetPage: "gallery/ButtonGallery.qml" + img: "img/buttons.svg" + } + ListElement { + title: "Selection Controls" + targetPage: "gallery/SelectionControlsGallery.qml" + img: "img/selection-controls.svg" + } + ListElement { + title: "Drawers" + targetPage: "gallery/DrawerGallery.qml" + img: "img/drawers.svg" + } + ListElement { + title: "Overlay Sheets" + targetPage: "gallery/OverlaySheetGallery.qml" + img: "img/overlay-sheets.svg" + } + ListElement { + title: "Progress Bar" + targetPage: "gallery/ProgressBarGallery.qml" + img: "img/progress-bar.svg" + } + ListElement { + title: "Slider" + targetPage: "gallery/SliderGallery.qml" + img: "img/slider.svg" + } + ListElement { + title: "Tab Bar" + targetPage: "gallery/TabBarGallery.qml" + img: "img/tabbar.svg" + } + ListElement { + title: "Text Field" + targetPage: "gallery/TextFieldGallery.qml" + img: "img/textfield.svg" + } + ListElement { + title: "Form Layout" + targetPage: "gallery/FormLayoutGallery.qml" + img: "img/formlayout.svg" + } + ListElement { + title: "Cards Layout" + targetPage: "gallery/CardsLayoutGallery.qml" + img: "img/cardlayout.svg" + } + ListElement { + title: "List View with Cards" + targetPage: "gallery/CardsListViewGallery.qml" + img: "img/cardlist.svg" + } + ListElement { + title: "Grid View with Cards" + targetPage: "gallery/CardsGridViewGallery.qml" + img: "img/cardgrid.svg" + } + ListElement { + title: "Inline Messages" + targetPage: "gallery/InlineMessagesGallery.qml" + img: "img/inlinemessage.svg" + } + ListElement { + title: "Multiple Columns" + targetPage: "gallery/MultipleColumnsGallery.qml" + img: "img/columnview.svg" + } + ListElement { + title: "Misc. Widgets" + targetPage: "gallery/MiscGallery.qml" + img: "img/miscwidgets.svg" + } + ListElement { + title: "List View" + targetPage: "gallery/ListViewGallery.qml" + img: "img/listview.svg" + } + ListElement { + title: "List Headers" + targetPage: "gallery/ListViewHeaderItemsGallery.qml" + img: "img/headers.svg" + } + ListElement { + title: "Non Scrollable Page" + targetPage: "gallery/NonScrollableGallery.qml" + img: "img/non-scroll-page.svg" + } + ListElement { + title: "Action Tool Bar" + targetPage: "gallery/ActionToolBarGallery.qml" + img: "img/action-tool-bar.svg" + } + ListElement { + title: "Colors" + targetPage: "gallery/ColorsGallery.qml" + img: "img/colors.svg" + } + ListElement { + title: "Color Sets" + targetPage: "gallery/ColorSetGallery.qml" + img: "img/colorsets.svg" + } + ListElement { + title: "Metrics" + targetPage: "gallery/MetricsGallery.qml" + img: "img/metrics.svg" + } + } + header: QQC2.ToolBar { + id: toolbar + RowLayout { + anchors.fill: parent + Kirigami.SearchField { + id: searchField - model: pageActions - property list pageActions: [ - Kirigami.PagePoolAction { - text: qsTr("Buttons") - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/ButtonGallery.qml" - }, - Kirigami.PagePoolAction { - text: qsTr("Selection Controls") - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/SelectionControlsGallery.qml" - }, - Kirigami.PagePoolAction { - text: qsTr("Overlay Sheets") - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/OverlaySheetGallery.qml" - }, - Kirigami.PagePoolAction { - text: qsTr("Drawers") - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/DrawerGallery.qml" - }, - Kirigami.PagePoolAction { - text: "Progress Bar" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/ProgressBarGallery.qml" - }, - Kirigami.PagePoolAction { - text: "Slider" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/SliderGallery.qml" - }, - Kirigami.PagePoolAction { - text: "Tab Bar" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/TabBarGallery.qml" - }, - Kirigami.PagePoolAction { - text: "Text Field" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/TextFieldGallery.qml" - }, - Kirigami.PagePoolAction { - text: "Form Layout" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/FormLayoutGallery.qml" - }, - Kirigami.PagePoolAction { - text: "Cards Layout" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/CardsLayoutGallery.qml" - }, - Kirigami.PagePoolAction { - text: "List view of cards" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/CardsListViewGallery.qml" - }, - Kirigami.PagePoolAction { - text: "Grid view of cards" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/CardsGridViewGallery.qml" - }, - Kirigami.PagePoolAction { - text: "Inline Messages" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/InlineMessagesGallery.qml" - }, - Kirigami.PagePoolAction { - text: "Multiple Columns" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/MultipleColumnsGallery.qml" - }, - Kirigami.PagePoolAction { - text: "Misc widgets" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/MiscGallery.qml" - }, - Kirigami.PagePoolAction { - text: "List View" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/ListViewGallery.qml" - }, - Kirigami.PagePoolAction { - text: "List Headers" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/ListViewHeaderItemsGallery.qml" - }, - Kirigami.PagePoolAction { - text: "Non Scrollable Page" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/NonScrollableGallery.qml" - }, - Kirigami.PagePoolAction { - text: "Colors" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/ColorsGallery.qml" - }, - Kirigami.PagePoolAction { - text: "Color Sets" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/ColorSetGallery.qml" - }, - Kirigami.PagePoolAction { - text: "Metrics" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/MetricsGallery.qml" - }, - Kirigami.PagePoolAction { - text: "Action Tool Bar" - pagePool: mainPagePool - basePage: pageRoot - page: "gallery/ActionToolBarGallery.qml" + Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true + Layout.leftMargin: Kirigami.Units.largeSpacing + Layout.rightMargin: Kirigami.Units.largeSpacing + Layout.maximumWidth: Kirigami.Units.gridUnit*30 + } + } + } + ColumnLayout { + Kirigami.CardsLayout { + Repeater { + activeFocusOnTab: true + focus: true + model: KSortFilterProxyModel { + sourceModel: galleryModel + filterRole: "title" + filterRegularExpression: { + if (!searchAction.checked || searchField.text === "") return new RegExp() + return new RegExp("%1".arg(searchField.text), "i") + } + } + delegate: Kirigami.Card { + id: listItem + banner { + source: img + title: title + titleAlignment: Qt.AlignBottom | Qt.AlignLeft + } + showClickFeedback: true + onClicked: action.trigger() + highlighted: action.checked + implicitWidth: Kirigami.Units.gridUnit*30 + implicitHeight: Kirigami.Units.gridUnit*10 + Layout.maximumWidth: Kirigami.Units.gridUnit*30 + Kirigami.PagePoolAction { + id: action + pagePool: mainPagePool + basePage: pageRoot + page: targetPage + } + } } - ] - delegate: Kirigami.BasicListItem { - id: listItem - reserveSpaceForIcon: false - //Accessible.role: Accessible.MenuItem - action: modelData } } } diff --git a/src/data/contents/ui/img/action-tool-bar.svg b/src/data/contents/ui/img/action-tool-bar.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/action-tool-bar.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/data/contents/ui/img/buttons.svg b/src/data/contents/ui/img/buttons.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/buttons.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/data/contents/ui/img/cardgrid.svg b/src/data/contents/ui/img/cardgrid.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/cardgrid.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/data/contents/ui/img/cardlayout.svg b/src/data/contents/ui/img/cardlayout.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/cardlayout.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/data/contents/ui/img/cardlist.svg b/src/data/contents/ui/img/cardlist.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/cardlist.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/data/contents/ui/img/colors.svg b/src/data/contents/ui/img/colors.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/colors.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/data/contents/ui/img/colorsets.svg b/src/data/contents/ui/img/colorsets.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/colorsets.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/data/contents/ui/img/columnview.svg b/src/data/contents/ui/img/columnview.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/columnview.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/data/contents/ui/img/drawers.svg b/src/data/contents/ui/img/drawers.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/drawers.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/data/contents/ui/img/formlayout.svg b/src/data/contents/ui/img/formlayout.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/formlayout.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/data/contents/ui/img/headers.svg b/src/data/contents/ui/img/headers.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/headers.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/data/contents/ui/img/inlinemessage.svg b/src/data/contents/ui/img/inlinemessage.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/inlinemessage.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/data/contents/ui/img/listview.svg b/src/data/contents/ui/img/listview.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/listview.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/data/contents/ui/img/metrics.svg b/src/data/contents/ui/img/metrics.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/metrics.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/data/contents/ui/img/miscwidgets.svg b/src/data/contents/ui/img/miscwidgets.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/miscwidgets.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/data/contents/ui/img/non-scroll-page.svg b/src/data/contents/ui/img/non-scroll-page.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/non-scroll-page.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/data/contents/ui/img/overlay-sheets.svg b/src/data/contents/ui/img/overlay-sheets.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/overlay-sheets.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/data/contents/ui/img/progress-bar.svg b/src/data/contents/ui/img/progress-bar.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/progress-bar.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/data/contents/ui/img/selection-controls.svg b/src/data/contents/ui/img/selection-controls.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/selection-controls.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/data/contents/ui/img/slider.svg b/src/data/contents/ui/img/slider.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/slider.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/data/contents/ui/img/tabbar.svg b/src/data/contents/ui/img/tabbar.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/tabbar.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/data/contents/ui/img/textfield.svg b/src/data/contents/ui/img/textfield.svg new file mode 100644 --- /dev/null +++ b/src/data/contents/ui/img/textfield.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/resources.qrc b/src/resources.qrc --- a/src/resources.qrc +++ b/src/resources.qrc @@ -28,6 +28,28 @@ ./data/contents/ui/gallery/ActionToolBarGallery.qml ./data/contents/ui/BaseApp.qml ./data/contents/ui/mobileApp.qml + ./data/contents/ui/img/action-tool-bar.svg + ./data/contents/ui/img/buttons.svg + ./data/contents/ui/img/cardgrid.svg + ./data/contents/ui/img/cardlayout.svg + ./data/contents/ui/img/cardlist.svg + ./data/contents/ui/img/colors.svg + ./data/contents/ui/img/colorsets.svg + ./data/contents/ui/img/columnview.svg + ./data/contents/ui/img/drawers.svg + ./data/contents/ui/img/formlayout.svg + ./data/contents/ui/img/headers.svg + ./data/contents/ui/img/inlinemessage.svg + ./data/contents/ui/img/listview.svg + ./data/contents/ui/img/metrics.svg + ./data/contents/ui/img/miscwidgets.svg + ./data/contents/ui/img/non-scroll-page.svg + ./data/contents/ui/img/overlay-sheets.svg + ./data/contents/ui/img/progress-bar.svg + ./data/contents/ui/img/selection-controls.svg + ./data/contents/ui/img/slider.svg + ./data/contents/ui/img/tabbar.svg + ./data/contents/ui/img/textfield.svg ./data/metadata.desktop qtquickcontrols2.conf ./data/info-data.json