Commit 9f3a617d authored by Arjen Hiemstra's avatar Arjen Hiemstra
Browse files

Add a page to display ActionToolBar and some of its features

Summary:
ActionToolBar has gained quite a lot of functionality. So add a page
to highlight some of it.

There's a screencapture of the page in D25940

Test Plan: The new page displays properly.

Reviewers: #kirigami, mart

Reviewed By: #kirigami, mart

Subscribers: plasma-devel

Tags: #plasma, #kirigami

Differential Revision: https://phabricator.kde.org/D25941
parent 9b581fa2
......@@ -194,6 +194,12 @@ Kirigami.ScrollablePage {
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/MetricsGallery.qml"
},
Kirigami.PagePoolAction {
text: "Action Tool Bar"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/ActionToolBarGallery.qml"
}
]
delegate: Kirigami.BasicListItem {
......
/*
* Copyright 2015 Marco Martin <mart@kde.org>
*
* 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.11
import QtQuick.Controls 2.11 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.11
import "components"
ScrollablePage {
id: page
Layout.fillWidth: true
title: "Action Tool Bar"
actions.main: Action {
iconName: "documentinfo"
text: qsTr("Info")
checkable: true
onCheckedChanged: sheet.sheetOpen = checked;
shortcut: "Alt+I"
}
//Close the drawer with the back button
onBackRequested: {
if (sheet.sheetOpen) {
event.accepted = true;
sheet.close();
}
}
InfoSheet {
id: sheet
page: page
component: "ActionToolBar"
}
property int alignment: Qt.AlignLeft
ColumnLayout {
width: page.width
spacing: Units.smallSpacing
Controls.Label { text: "Basic Actions and Alignment"; elide: Text.ElideRight; Layout.fillWidth: true }
Controls.GroupBox {
Layout.fillWidth: true
Layout.minimumWidth: 0
ActionToolBar {
anchors.fill: parent
alignment: page.alignment
actions: [
Action { text: "Align Left"; icon.name: "align-horizontal-left"; onTriggered: page.alignment = Qt.AlignLeft },
Action { text: "Align Center"; icon.name: "align-horizontal-center"; onTriggered: page.alignment = Qt.AlignHCenter },
Action { text: "Align Right"; icon.name: "align-horizontal-right"; onTriggered: page.alignment = Qt.AlignRight }
]
}
}
Controls.Label { text: "Display Hints"; elide: Text.ElideRight; Layout.fillWidth: true }
Controls.GroupBox {
Layout.fillWidth: true
Layout.minimumWidth: 0
ActionToolBar {
anchors.fill: parent
alignment: page.alignment
actions: [
Action { text: "IconOnly"; icon.name: "view-list-icons"; displayHint: Action.DisplayHint.IconOnly },
Action { text: "KeepVisible"; icon.name: "view-visible"; displayHint: Action.DisplayHint.KeepVisible },
Action {
text: "HideChildIndicator";
icon.name: "overflow-menu"
displayHint: Action.DisplayHint.HideChildIndicator
Action {
text: "Child Action"
}
},
Action { text: "AlwaysHide"; icon.name: "password-show-off"; displayHint: Action.DisplayHint.AlwaysHide }
]
}
}
Controls.Label { text: "Custom Display Component"; elide: Text.ElideRight; Layout.fillWidth: true }
Controls.GroupBox {
Layout.fillWidth: true
Layout.minimumWidth: 0
ActionToolBar {
anchors.fill: parent
alignment: page.alignment
actions: [
Action { id: customAction; text: "Custom Component"; icon.name: "search"; displayComponent: SearchField { } },
Action {
text: "Add IconOnly Hint";
icon.name: "list-add";
onTriggered: customAction.displayHint |= Action.DisplayHint.IconOnly
},
Action {
text: "Remove IconOnly Hint";
icon.name: "list-remove"
onTriggered: customAction.displayHint ^= Action.DisplayHint.IconOnly
}
]
}
}
Controls.Label { text: "All Custom Components and Layouts"; elide: Text.ElideRight; Layout.fillWidth: true }
Controls.GroupBox {
Layout.fillWidth: true
Layout.minimumWidth: 0
ActionToolBar {
anchors.fill: parent
alignment: page.alignment
actions: [
Action { text: "Action 1"; displayComponent: Controls.Button { text: kirigamiAction.text } },
Action {
text: "Action 2";
displayComponent: Controls.TextField { placeholderText: kirigamiAction.text; Layout.fillWidth: true; Layout.maximumWidth: 350 }
},
Action { text: "Action 3"; displayComponent: Controls.SpinBox { } },
Action { text: "Action 4"; displayComponent: Controls.RangeSlider { Layout.fillWidth: true } }
]
}
}
}
}
......@@ -48,5 +48,11 @@
"sourceUrl": "https://cgit.kde.org/kirigami-gallery.git/tree/src/data/contents/ui/gallery/InlineMessagesGallery.qml",
"apiUrl": "https://api.kde.org/frameworks/kirigami/html/classorg_1_1kde_1_1kirigami_1_1InlineMessage.html",
"text": "Inline messages allow you to show various types of messages placed the same layout as content they relate to, instead of showing a message in an overlay. They are invisible by default and need to be explicitly set visible to be revealed."
},
"ActionToolBar": {
"title": "Action Tool Bar",
"sourceUrl": "https://cgit.kde.org/kirigami-gallery.git/tree/src/data/contents/ui/gallery/ActionToolBarGallery.qml",
"apiUrl": "https://api.kde.org/frameworks/kirigami/html/classorg_1_1kde_1_1kirigami_1_1ActionToolBar.html",
"text": "ActionToolBar is a component that can be used to display a list of Action objects. It will try to display as many of them as possible, with those that do not fit being put in an overflow menu. When resized, ActionToolBar will update which actions are visible and move them accordingly."
}
}
......@@ -25,6 +25,7 @@
<file alias="contents/ui/gallery/LayersGallery.qml">./data/contents/ui/gallery/LayersGallery.qml</file>
<file alias="contents/ui/gallery/FormLayoutGallery.qml">./data/contents/ui/gallery/FormLayoutGallery.qml</file>
<file alias="contents/ui/gallery/ColorSetGallery.qml">./data/contents/ui/gallery/ColorSetGallery.qml</file>
<file alias="contents/ui/gallery/ActionToolBarGallery.qml">./data/contents/ui/gallery/ActionToolBarGallery.qml</file>
<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="metadata.desktop">./data/metadata.desktop</file>
......
Markdown is supported
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