use MobileComponents.SplitDrawer

as suggested in the vdg meeting, use a splitdrawer and put the
applet categories there
This commit is contained in:
Marco Martin 2015-09-09 00:14:15 +02:00
parent 0ea412cc8f
commit 5af13c56cf

View file

@ -24,19 +24,17 @@ import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.extras 2.0 as PlasmaExtras import org.kde.plasma.extras 2.0 as PlasmaExtras
import org.kde.kquickcontrolsaddons 2.0 import org.kde.kquickcontrolsaddons 2.0
import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
import QtQuick.Window 2.1 import QtQuick.Window 2.1
import QtQuick.Layouts 1.1 import QtQuick.Layouts 1.1
import org.kde.plasma.private.shell 2.0 import org.kde.plasma.private.shell 2.0
PlasmaCore.FrameSvgItem { Rectangle {
id: main id: main
imagePath: "widgets/background"
enabledBorders: PlasmaCore.FrameSvgItem.NoBorder
width: Math.max(heading.paintedWidth, units.gridUnit * 16) color: theme.backgroundColor
height: 800//Screen.height
property alias containment: widgetExplorer.containment property alias containment: widgetExplorer.containment
@ -64,142 +62,160 @@ PlasmaCore.FrameSvgItem {
//view: desktop //view: desktop
onShouldClose: main.closed(); onShouldClose: main.closed();
} }
MobileComponents.SplitDrawer {
GridLayout { visible: true
id: topBar anchors.fill: parent
anchors { drawer: PlasmaExtras.ScrollArea {
top: parent.top ListView {
left: parent.left model: widgetExplorer.filterModel
right: parent.right delegate: PlasmaComponents.ListItem {
topMargin: 0 enabled: true
leftMargin: units.smallSpacing visible: !model.separator
rightMargin: main.margins.right height: model.separator ? 0 : implicitHeight
} PlasmaComponents.Label {
columns: 2 text: model.display
}
PlasmaExtras.Title { onClicked: {
id: heading list.contentX = 0
text: i18nd("plasma_shell_org.kde.plasma.desktop", "Widgets") list.contentY = 0
Layout.fillWidth: true heading.text = model.display
} widgetExplorer.widgetsModel.filterQuery = model.filterData
widgetExplorer.widgetsModel.filterType = model.filterType
PlasmaComponents.ToolButton { }
id: closeButton
anchors {
right: parent.right
verticalCenter: heading.verticalCenter
}
iconSource: "window-close"
onClicked: main.closed()
}
PlasmaComponents.TextField {
id: searchInput
clearButtonShown: true
placeholderText: i18nd("plasma_shell_org.kde.plasma.desktop", "Search...")
onTextChanged: {
list.positionViewAtBeginning()
list.currentIndex = -1
widgetExplorer.widgetsModel.searchTerm = text
}
Component.onCompleted: forceActiveFocus()
Layout.columnSpan: 2
Layout.fillWidth: true
}
}
PlasmaCore.FrameSvgItem {
id: backgroundHint
imagePath: "widgets/viewitem"
prefix: "normal"
visible: false
}
PlasmaExtras.ScrollArea {
anchors {
top: topBar.bottom
left: parent.left
right: parent.right
bottom: bottomBar.top
topMargin: units.smallSpacing
leftMargin: units.smallSpacing
bottomMargin: units.smallSpacing
rightMargin: main.margins.right
}
ListView {
id: list
model: widgetExplorer.widgetsModel
activeFocusOnTab: true
currentIndex: -1
keyNavigationWraps: true
delegate: AppletDelegate {}
//slide in to view from the left
add: Transition {
NumberAnimation {
properties: "x"
from: -list.width
to: 0
duration: units.shortDuration * 3
}
}
//slide out of view to the right
remove: Transition {
NumberAnimation {
properties: "x"
to: list.width
duration: units.shortDuration * 3
}
}
//if we are adding other items into the view use the same animation as normal adding
//this makes everything slide in together
//if we make it move everything ends up weird
addDisplaced: list.add
//moved due to filtering
displaced: Transition {
NumberAnimation {
properties: "y"
duration: units.shortDuration * 3
} }
} }
} }
} ColumnLayout {
GridLayout {
id: topBar
anchors {
top: parent.top
left: parent.left
right: parent.right
topMargin: 0
leftMargin: units.smallSpacing
}
columns: 2
Column { PlasmaExtras.Title {
id: bottomBar id: heading
anchors { text: i18nd("plasma_shell_org.kde.plasma.desktop", "Widgets")
left: parent.left Layout.fillWidth: true
right: parent.right }
bottom: parent.bottom
leftMargin: units.smallSpacing
rightMargin: units.smallSpacing
bottomMargin: units.smallSpacing
}
spacing: units.smallSpacing PlasmaComponents.ToolButton {
id: closeButton
anchors {
right: parent.right
verticalCenter: heading.verticalCenter
}
iconSource: "window-close"
onClicked: main.closed()
}
Repeater { PlasmaComponents.TextField {
model: widgetExplorer.extraActions.length id: searchInput
PlasmaComponents.Button { clearButtonShown: true
placeholderText: i18nd("plasma_shell_org.kde.plasma.desktop", "Search...")
onTextChanged: {
list.positionViewAtBeginning()
list.currentIndex = -1
widgetExplorer.widgetsModel.searchTerm = text
}
Component.onCompleted: forceActiveFocus()
Layout.columnSpan: 2
Layout.fillWidth: true
}
}
PlasmaExtras.ScrollArea {
anchors {
top: topBar.bottom
left: parent.left
right: parent.right
bottom: bottomBar.top
topMargin: units.smallSpacing
leftMargin: units.smallSpacing
bottomMargin: units.smallSpacing
}
ListView {
id: list
model: widgetExplorer.widgetsModel
activeFocusOnTab: true
currentIndex: -1
keyNavigationWraps: true
delegate: AppletDelegate {}
//slide in to view from the left
add: Transition {
NumberAnimation {
properties: "x"
from: -list.width
to: 0
duration: units.shortDuration * 3
}
}
//slide out of view to the right
remove: Transition {
NumberAnimation {
properties: "x"
to: list.width
duration: units.shortDuration * 3
}
}
//if we are adding other items into the view use the same animation as normal adding
//this makes everything slide in together
//if we make it move everything ends up weird
addDisplaced: list.add
//moved due to filtering
displaced: Transition {
NumberAnimation {
properties: "y"
duration: units.shortDuration * 3
}
}
}
}
Column {
id: bottomBar
anchors { anchors {
left: parent.left left: parent.left
right: parent.right right: parent.right
bottom: parent.bottom
leftMargin: units.smallSpacing
rightMargin: units.smallSpacing
bottomMargin: units.smallSpacing
} }
iconSource: widgetExplorer.extraActions[modelData].icon
text: widgetExplorer.extraActions[modelData].text spacing: units.smallSpacing
onClicked: {
widgetExplorer.extraActions[modelData].trigger() Repeater {
model: widgetExplorer.extraActions.length
PlasmaComponents.Button {
anchors {
left: parent.left
right: parent.right
}
iconSource: widgetExplorer.extraActions[modelData].icon
text: widgetExplorer.extraActions[modelData].text
onClicked: {
widgetExplorer.extraActions[modelData].trigger()
}
}
} }
} }
}
}
}
}
Component.onCompleted: { Component.onCompleted: {
main.getWidgetsButton = getWidgetsButton main.getWidgetsButton = getWidgetsButton
main.categoryButton = categoryButton main.categoryButton = categoryButton