Skip to content
GitLab
Commit 82bfb6a2 authored by Felipe Kinoshita's avatar Felipe Kinoshita 🌎
Browse files

Add ChipGallery

parent a00b0551
Pipeline #204865 passed with stage
in 49 seconds
Hide whitespace changes
Inline Side-by-side
src/data/contents/ui/MainPage.qml
View file @ 82bfb6a2
......@@ -74,6 +74,11 @@ Kirigami.ScrollablePage {
targetPage: "gallery/ButtonGallery.qml"
img: "img/buttons.svg"
}
ListElement {
title: "Chips"
targetPage: "gallery/ChipGallery.qml"
img: "img/chips.svg"
}
ListElement {
title: "Selection Controls"
targetPage: "gallery/SelectionControlsGallery.qml"
......
src/data/contents/ui/gallery/ChipGallery.qml 0 → 100644
View file @ 82bfb6a2
/*
* Copyright 2022 Felipe Kinoshita <kinofhek@gmail.com>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2 or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.19 as Kirigami
import "components"
Kirigami.ScrollablePage {
id: page
Layout.fillWidth: true
title: qsTr("Chips")
actions.main: Kirigami.Action {
text: qsTr("Info")
iconName: "documentinfo"
checkable: true
shortcut: "Alt+I"
onCheckedChanged: sheet.visible = checked;
}
//Close the drawer with the back button
onBackRequested: {
if (sheet.sheetOpen) {
event.accepted = true;
sheet.close();
}
}
InfoSheet {
id: sheet
page: page
component: "ChipGallery"
}
ColumnLayout {
width: page.width
spacing: Kirigami.Units.smallSpacing
Kirigami.FormLayout {
Layout.fillWidth: true
Item {
Kirigami.FormData.label: qsTr("Closable Chips")
Kirigami.FormData.isSection: true
}
Flow {
Layout.fillWidth: true
Layout.bottomMargin: Kirigami.Units.gridUnit
spacing: Kirigami.Units.largeSpacing
Repeater {
model: ListModel {
id: closableChips
ListElement { text: "One"}
ListElement { text: "Two"}
ListElement { text: "Three"}
ListElement { text: "Four"}
ListElement { text: "Five"}
}
Kirigami.Chip {
text: modelData
onRemoved: closableChips.remove(index)
}
}
}
Item {
Kirigami.FormData.label: qsTr("Informative Chips")
Kirigami.FormData.isSection: true
}
Flow {
Layout.fillWidth: true
Layout.bottomMargin: Kirigami.Units.gridUnit
spacing: Kirigami.Units.largeSpacing
Repeater {
model: ListModel {
id: informativeChips
ListElement { text: "Info One"}
ListElement { text: "Another Info"}
ListElement { text: "Info Two"}
ListElement { text: "Short"}
ListElement { text: "Info Three"}
ListElement { text: "Very Long Information Four"}
ListElement { text: "Info Five"}
ListElement { text: "Medium Info Six"}
}
Kirigami.Chip {
checked: false
checkable: false
text: modelData
closable: false
}
}
}
Item {
Kirigami.FormData.label: qsTr("Checkable Chips")
Kirigami.FormData.isSection: true
}
Flow {
Layout.fillWidth: true
spacing: Kirigami.Units.largeSpacing
Repeater {
model: ListModel {
id: checkableChips
ListElement { text: "Option One"}
ListElement { text: "Option Two"}
ListElement { text: "Another Option"}
ListElement { text: "The Longest Option"}
ListElement { text: "Option Three"}
}
Kirigami.Chip {
text: modelData
closable: false
}
}
}
}
}
}
src/data/contents/ui/img/chips.svg 0 → 100644
View file @ 82bfb6a2
<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M384 0H0V192H384V0Z" fill="#5E44A0"/>
<rect x="78.5" y="40.5" width="60" height="30" rx="7.5" fill="#926EE4" stroke="black"/>
<rect x="149.5" y="40.5" width="99" height="30" rx="7.5" fill="#926EE4" stroke="black"/>
<rect x="259.5" y="40.5" width="44" height="30" rx="7.5" fill="#926EE4" stroke="black"/>
<rect x="78.5" y="81.5" width="56" height="30" rx="7.5" fill="#926EE4" stroke="black"/>
<rect x="145.5" y="81.5" width="76" height="30" rx="7.5" fill="#926EE4" stroke="black"/>
<rect x="232.5" y="81.5" width="71" height="30" rx="7.5" fill="#926EE4" stroke="black"/>
<rect x="78.5" y="122.5" width="85" height="30" rx="7.5" fill="#926EE4" stroke="black"/>
<rect x="174.5" y="122.5" width="59" height="30" rx="7.5" fill="#926EE4" stroke="black"/>
<rect x="244.5" y="122.5" width="59" height="30" rx="7.5" fill="#926EE4" stroke="black"/>
</svg>
src/data/info-data.json
View file @ 82bfb6a2
......@@ -31,6 +31,12 @@
"apiUrl": "https://api.kde.org/frameworks/kirigami/html/classorg_1_1kde_1_1kirigami_1_1Dialog.html",
"text": "Dialogs are a type of a modal that goes over application content, and prompts users with information."
},
"ChipGallery": {
"title": "Chips",
"sourceUrl": "https://invent.kde.org/sdk/kirigami-gallery/-/blob/master/src/data/contents/ui/gallery/ChipGallery.qml",
"apiUrl": "https://api.kde.org/frameworks/kirigami/html/classorg_1_1kde_1_1kirigami_1_1Chip.html",
"text": "A Chip is a compact element used for displaying attributes, actions, or filters. Chips should be used in a group of multiple elements, never alone."
},
"OverlaySheetGallery": {
"title": "Overlay Sheets",
"sourceUrl": "https://invent.kde.org/sdk/kirigami-gallery/-/blob/master/src/data/contents/ui/gallery/OverlaySheetGallery.qml",
......
src/resources.qrc
View file @ 82bfb6a2
......@@ -5,6 +5,7 @@
<file alias="contents/ui/gallery/components/InfoSheet.qml">./data/contents/ui/gallery/components/InfoSheet.qml</file>
<file alias="contents/ui/gallery/NonScrollableGallery.qml">./data/contents/ui/gallery/NonScrollableGallery.qml</file>
<file alias="contents/ui/gallery/ButtonGallery.qml">./data/contents/ui/gallery/ButtonGallery.qml</file>
<file alias="contents/ui/gallery/ChipGallery.qml">./data/contents/ui/gallery/ChipGallery.qml</file>
<file alias="contents/ui/gallery/DialogGallery.qml">./data/contents/ui/gallery/DialogGallery.qml</file>
<file alias="contents/ui/gallery/OverlaySheetGallery.qml">./data/contents/ui/gallery/OverlaySheetGallery.qml</file>
<file alias="contents/ui/gallery/DrawerGallery.qml">./data/contents/ui/gallery/DrawerGallery.qml</file>
......@@ -30,6 +31,7 @@
<file alias="contents/ui/BaseApp.qml">./data/contents/ui/BaseApp.qml</file>
<file alias="contents/ui/mobileApp.qml">./data/contents/ui/mobileApp.qml</file>
<file alias="contents/ui/img/action-tool-bar.svg">./data/contents/ui/img/action-tool-bar.svg</file>
<file alias="contents/ui/img/chips.svg">./data/contents/ui/img/chips.svg</file>
<file alias="contents/ui/img/buttons.svg">./data/contents/ui/img/buttons.svg</file>
<file alias="contents/ui/img/cardgrid.svg">./data/contents/ui/img/cardgrid.svg</file>
<file alias="contents/ui/img/cardlayout.svg">./data/contents/ui/img/cardlayout.svg</file>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment