more android-looking top panel

This commit is contained in:
Marco Martin 2019-10-14 17:51:44 +02:00
parent 58510d211d
commit 4543b7724c
2 changed files with 46 additions and 31 deletions

View file

@ -20,16 +20,18 @@
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Layouts 1.1 import QtQuick.Layouts 1.1
import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents import org.kde.plasma.components 3.0 as PlasmaComponents
RowLayout { ColumnLayout {
id: delegateRoot id: delegateRoot
property bool toggled: model.enabled property bool toggled: model.enabled
spacing: units.smallSpacing spacing: units.smallSpacing
implicitWidth: flow.width / 2 - units.largeSpacing / 2
Rectangle { Rectangle {
Layout.minimumWidth: units.iconSizes.medium Layout.preferredWidth: units.iconSizes.large + units.smallSpacing * 6
Layout.minimumHeight: width Layout.minimumHeight: width
Layout.alignment: Qt.AlignHCenter
radius: width
color: toggled ? color: toggled ?
Qt.rgba(PlasmaCore.ColorScope.highlightColor.r, PlasmaCore.ColorScope.highlightColor.g, PlasmaCore.ColorScope.highlightColor.b, iconMouseArea.pressed ? 0.5 : 0.3) : Qt.rgba(PlasmaCore.ColorScope.highlightColor.r, PlasmaCore.ColorScope.highlightColor.g, PlasmaCore.ColorScope.highlightColor.b, iconMouseArea.pressed ? 0.5 : 0.3) :
Qt.rgba(PlasmaCore.ColorScope.textColor.r, PlasmaCore.ColorScope.textColor.g, PlasmaCore.ColorScope.textColor.b, iconMouseArea.pressed ? 0.5 : 0.1) Qt.rgba(PlasmaCore.ColorScope.textColor.r, PlasmaCore.ColorScope.textColor.g, PlasmaCore.ColorScope.textColor.b, iconMouseArea.pressed ? 0.5 : 0.1)
@ -38,16 +40,14 @@ RowLayout {
colorGroup: PlasmaCore.ColorScope.colorGroup colorGroup: PlasmaCore.ColorScope.colorGroup
anchors { anchors {
fill: parent fill: parent
margins: units.smallSpacing margins: units.smallSpacing * 3
} }
source: model.icon source: model.icon
MouseArea { MouseArea {
id: iconMouseArea id: iconMouseArea
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked: {
if (model.applet) { if (delegateRoot.toggle) {
model.applet.expanded = !model.applet.expanded;
} else if (delegateRoot.toggle) {
delegateRoot.toggle(); delegateRoot.toggle();
} else if (model.toggleFunction) { } else if (model.toggleFunction) {
root[model.toggleFunction](); root[model.toggleFunction]();
@ -58,25 +58,39 @@ RowLayout {
} }
} }
} }
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: Qt.rgba(PlasmaCore.ColorScope.textColor.r, PlasmaCore.ColorScope.textColor.g, PlasmaCore.ColorScope.textColor.b, labelMouseArea.pressed ? 0.5 : 0.1)
PlasmaComponents.Label { PlasmaComponents.Label {
anchors { id: label
fill: parent
margins: units.smallSpacing Layout.maximumWidth: parent.width
} Layout.alignment: Qt.AlignHCenter
text: model.text text: model.text
bottomPadding: units.smallSpacing * 2
horizontalAlignment: Text.AlignHCenter
font.pixelSize: theme.defaultFont.pixelSize * 0.8
elide: Text.ElideRight elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
PlasmaCore.SvgItem {
anchors {
left: parent.right
verticalCenter: parent.verticalCenter
verticalCenterOffset: -units.smallSpacing
}
visible: model.settingsCommand
width: units.iconSizes.small/2
height: width
elementId: "down-arrow"
svg: PlasmaCore.Svg {
imagePath: "widgets/arrows"
}
}
MouseArea { MouseArea {
id: labelMouseArea id: labelMouseArea
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked: {
if (model.applet) { if (model.settingsCommand) {
model.applet.expanded = !model.applet.expanded;
} else if (model.settingsCommand) {
plasmoid.nativeInterface.executeCommand(model.settingsCommand); plasmoid.nativeInterface.executeCommand(model.settingsCommand);
} else if (model.toggleFunction) { } else if (model.toggleFunction) {
root[model.toggleFunction](); root[model.toggleFunction]();
@ -85,5 +99,4 @@ RowLayout {
} }
} }
} }
}

View file

@ -185,12 +185,14 @@ Item {
fill: parent fill: parent
margins: units.smallSpacing*3 margins: units.smallSpacing*3
} }
spacing: units.largeSpacing readonly property real cellSizeHint: units.iconSizes.large + units.smallSpacing * 6 + Math.floor(units.largeSpacing/2)
readonly property real columnWidth: Math.floor(width / Math.floor(width / cellSizeHint))
spacing: 0
Repeater { Repeater {
model: settingsModel model: settingsModel
delegate: Loader { delegate: Loader {
//FIXME: why this is needed? //FIXME: why this is needed?
width: flow.width / 2 - units.largeSpacing / 2//item ? item.implicitWidth : 0 width: flow.columnWidth
height: item ? item.implicitHeight : 0 height: item ? item.implicitHeight : 0
source: Qt.resolvedUrl((model.delegate ? model.delegate : "Delegate") + ".qml") source: Qt.resolvedUrl((model.delegate ? model.delegate : "Delegate") + ".qml")
} }