mirror of
https://invent.kde.org/marcoa/shift-shell.git
synced 2026-08-02 17:54:45 +00:00
redesign widget explorer as suggested by the VDG
This commit is contained in:
Marco Martin
parent
bab5d7d9e2
commit
d3b41afc02
2 changed files with 269 additions and 197 deletions
|
|
@ -31,28 +31,46 @@ Item {
|
|||
|
||||
readonly property string pluginName: model.pluginName
|
||||
|
||||
width: list.width
|
||||
height: iconContainer.height + units.largeSpacing
|
||||
width: list.cellWidth
|
||||
height: list.cellHeight
|
||||
|
||||
|
||||
RowLayout {
|
||||
|
||||
ColumnLayout {
|
||||
id: mainLayout
|
||||
spacing: units.smallSpacing
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: units.smallSpacing
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
//bottom: parent.bottom
|
||||
margins: units.smallSpacing * 2
|
||||
rightMargin: units.smallSpacing * 2 // don't cram the text to the border too much
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
spacing: units.largeSpacing
|
||||
|
||||
Item {
|
||||
id: iconContainer
|
||||
width: units.iconSizes.huge
|
||||
width: units.iconSizes.enormous
|
||||
height: width
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
QIconItem {
|
||||
Item {
|
||||
id: iconWidget
|
||||
anchors.fill: parent
|
||||
QIconItem {
|
||||
anchors.fill: parent
|
||||
icon: model.decoration
|
||||
visible: model.screenshot == ""
|
||||
}
|
||||
Image {
|
||||
width: units.iconSizes.enormous
|
||||
height: width
|
||||
anchors.fill: parent
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: model.screenshot
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Item {
|
||||
id: badgeMask
|
||||
|
|
@ -82,7 +100,6 @@ Item {
|
|||
anchors.fill: parent
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
color: theme.backgroundColor
|
||||
text: running
|
||||
}
|
||||
}
|
||||
|
|
@ -114,11 +131,6 @@ Item {
|
|||
"
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: units.smallSpacing
|
||||
|
||||
PlasmaExtras.Heading {
|
||||
id: heading
|
||||
Layout.fillWidth: true
|
||||
|
|
@ -128,6 +140,7 @@ Item {
|
|||
wrapMode: Text.WordWrap
|
||||
maximumLineCount: 2
|
||||
lineHeight: 0.95
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
PlasmaComponents.Label {
|
||||
Layout.fillWidth: true
|
||||
|
|
@ -138,7 +151,7 @@ Item {
|
|||
wrapMode: Text.WordWrap
|
||||
elide: Text.ElideRight
|
||||
maximumLineCount: heading.lineCount === 1 ? 3 : 2
|
||||
}
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -148,7 +161,10 @@ Item {
|
|||
hoverEnabled: true
|
||||
onClicked: {
|
||||
widgetExplorer.addApplet(pluginName);
|
||||
main.closed();
|
||||
main.closed()
|
||||
}
|
||||
onEntered: list.currentIndex = index
|
||||
onExited: list.currentIndex = -1
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,11 +31,47 @@ import QtQuick.Layouts 1.1
|
|||
|
||||
import org.kde.plasma.private.shell 2.0
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
color: Qt.rgba(0, 0, 0, main.opacity * 0.8)
|
||||
signal closed()
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: removeAnim.running = true;
|
||||
}
|
||||
|
||||
NumberAnimation {
|
||||
id: openAnim
|
||||
running: true
|
||||
target: main
|
||||
properties: "x"
|
||||
duration: units.longDuration
|
||||
easing.type: Easing.InOutQuad
|
||||
to: 0
|
||||
}
|
||||
SequentialAnimation {
|
||||
id: removeAnim
|
||||
NumberAnimation {
|
||||
target: main
|
||||
properties: "x"
|
||||
duration: units.longDuration
|
||||
easing.type: Easing.InOutQuad
|
||||
to: -main.width
|
||||
}
|
||||
ScriptAction {
|
||||
script: root.closed();
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
id: main
|
||||
|
||||
x: -width
|
||||
width: parent.width - parent.width/6
|
||||
height: parent.height
|
||||
color: theme.backgroundColor
|
||||
|
||||
opacity: 1 - Math.abs(x / (width/2))
|
||||
property alias containment: widgetExplorer.containment
|
||||
|
||||
//external drop events can cause a raise event causing us to lose focus and
|
||||
|
|
@ -47,7 +83,6 @@ Rectangle {
|
|||
property Item getWidgetsButton
|
||||
property Item categoryButton
|
||||
|
||||
signal closed()
|
||||
|
||||
function addCurrentApplet() {
|
||||
var pluginName = list.currentItem ? list.currentItem.pluginName : ""
|
||||
|
|
@ -60,12 +95,13 @@ Rectangle {
|
|||
WidgetExplorer {
|
||||
id: widgetExplorer
|
||||
//view: desktop
|
||||
onShouldClose: main.closed();
|
||||
onShouldClose: removeAnim.running = true;
|
||||
}
|
||||
MobileComponents.SplitDrawer {
|
||||
visible: true
|
||||
anchors.fill: parent
|
||||
drawer: PlasmaExtras.ScrollArea {
|
||||
|
||||
ListView {
|
||||
model: widgetExplorer.filterModel
|
||||
delegate: PlasmaComponents.ListItem {
|
||||
|
|
@ -85,7 +121,21 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
}
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
drag.filterChildren: true
|
||||
drag.target: main
|
||||
drag.axis: Drag.XAxis
|
||||
drag.maximumX: 0
|
||||
onReleased: {
|
||||
if (main.x < -main.width/2) {
|
||||
removeAnim.running = true;
|
||||
} else {
|
||||
openAnim.running = true;
|
||||
}
|
||||
}
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
GridLayout {
|
||||
id: topBar
|
||||
anchors {
|
||||
|
|
@ -110,7 +160,7 @@ Rectangle {
|
|||
verticalCenter: heading.verticalCenter
|
||||
}
|
||||
iconSource: "window-close"
|
||||
onClicked: main.closed()
|
||||
onClicked: removeAnim.running = true;
|
||||
}
|
||||
|
||||
PlasmaComponents.TextField {
|
||||
|
|
@ -139,13 +189,16 @@ Rectangle {
|
|||
leftMargin: units.smallSpacing
|
||||
bottomMargin: units.smallSpacing
|
||||
}
|
||||
ListView {
|
||||
GridView {
|
||||
id: list
|
||||
|
||||
model: widgetExplorer.widgetsModel
|
||||
activeFocusOnTab: true
|
||||
currentIndex: -1
|
||||
keyNavigationWraps: true
|
||||
cellWidth: units.iconSizes.enormous + units.smallSpacing * 2
|
||||
cellHeight: cellWidth + units.gridUnit * 4 + units.smallSpacing * 2
|
||||
|
||||
|
||||
delegate: AppletDelegate {}
|
||||
|
||||
|
|
@ -216,9 +269,12 @@ Rectangle {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Component.onCompleted: {
|
||||
main.getWidgetsButton = getWidgetsButton
|
||||
main.categoryButton = categoryButton
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue