How to add spacing between system tray icons in Plasma 5.22?

I have had spent my day today customising my laptop. I managed to do this:

customized screenshot

Now the problem with the above is at this specific region in the top menubar:

system tray screenshot

This system tray plasmoid does not provide any setting to configure the spacing, and as I have been directed by many other guides, I am supposed to edit this file known as /usr/share/plasma/plasmoids/

As you can see in the screenshot, I first tried to find this option known as spacing: 0 but I found that people at kde have changed it to a grid layout with columnSpacing and rowSpacing parameters. I tried to modify them but did not get any results. I even tried to add the spacing parameter by myself but that did not work either. So is there anyway to modify the qml file in Plasma 5.22 to achieve custom spacing between icons in the system tray.

Here is the qml file if needed:

/* * Copyright 2011 Marco Martin <> * Copyright 2020 Konrad Materka <> * * 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.5
import QtQuick.Layouts 1.1
import org.kde.plasma.core 2.1 as PlasmaCore
import org.kde.plasma.plasmoid 2.0
import org.kde.draganddrop 2.0 as DnD
import org.kde.kirigami 2.5 as Kirigami
import "items"
MouseArea { id: root readonly property bool vertical: plasmoid.formFactor === PlasmaCore.Types.Vertical Layout.minimumWidth: vertical ? PlasmaCore.Units.iconSizes.small : mainLayout.implicitWidth + PlasmaCore.Units.smallSpacing Layout.minimumHeight: vertical ? mainLayout.implicitHeight + PlasmaCore.Units.smallSpacing : PlasmaCore.Units.iconSizes.small LayoutMirroring.enabled: !vertical && Qt.application.layoutDirection === Qt.RightToLeft LayoutMirroring.childrenInherit: true readonly property alias systemTrayState: systemTrayState readonly property alias itemSize: tasksGrid.itemSize readonly property alias visibleLayout: tasksGrid readonly property alias hiddenLayout: expandedRepresentation.hiddenLayout onWheel: { // Don't propagate unhandled wheel events wheel.accepted = true; } SystemTrayState { id: systemTrayState } //being there forces the items to fully load, and they will be reparented in the popup one by one, this item is *never* visible Item { id: preloadedStorage visible: false } CurrentItemHighLight { location: plasmoid.location parent: root } DnD.DropArea { anchors.fill: parent preventStealing: true; /** Extracts the name of the system tray applet in the drag data if present * otherwise returns null*/ function systemTrayAppletName(event) { if (event.mimeData.formats.indexOf("text/x-plasmoidservicename") < 0) { return null; } var plasmoidId = event.mimeData.getDataAsByteArray("text/x-plasmoidservicename"); if (!plasmoid.nativeInterface.isSystemTrayApplet(plasmoidId)) { return null; } return plasmoidId; } onDragEnter: { if (!systemTrayAppletName(event)) { event.ignore(); } } onDrop: { var plasmoidId = systemTrayAppletName(event); if (!plasmoidId) { event.ignore(); return; } if (plasmoid.configuration.extraItems.indexOf(plasmoidId) < 0) { var extraItems = plasmoid.configuration.extraItems; extraItems.push(plasmoidId); plasmoid.configuration.extraItems = extraItems; } } } //Main Layout GridLayout { id: mainLayout rowSpacing: 0 columnSpacing: 0 anchors.fill: parent flow: vertical ? GridLayout.TopToBottom : GridLayout.LeftToRight GridView { id: tasksGrid Layout.alignment: Qt.AlignCenter interactive: false //disable features we don't need flow: vertical ? GridView.LeftToRight : GridView.TopToBottom // The icon size to display when not using the auto-scaling setting readonly property int smallIconSize: PlasmaCore.Units.iconSizes.smallMedium readonly property bool autoSize: plasmoid.configuration.scaleIconsToFit readonly property int gridThickness: root.vertical ? root.width : root.height // Should change to 2 rows/columns on a 56px panel (in standard DPI) readonly property int rowsOrColumns: autoSize ? 1 : Math.max(1, Math.min(count, Math.floor(gridThickness / (smallIconSize + PlasmaCore.Units.smallSpacing)))) // Add margins only if the panel is larger than a small icon (to avoid large gaps between tiny icons) readonly property int smallSizeCellLength: gridThickness < smallIconSize ? smallIconSize : smallIconSize + PlasmaCore.Units.smallSpacing * 2 cellHeight: { if (root.vertical) { return autoSize ? root.width + PlasmaCore.Units.smallSpacing : smallSizeCellLength } else { return autoSize ? root.height : Math.floor(root.height / rowsOrColumns) } } cellWidth: { if (root.vertical) { return autoSize ? root.width : Math.floor(root.width / rowsOrColumns) } else { return autoSize ? root.height + PlasmaCore.Units.smallSpacing : smallSizeCellLength } } //depending on the form factor, we are calculating only one dimention, second is always the same as root/parent implicitHeight: root.vertical ? cellHeight * Math.ceil(count / rowsOrColumns) : root.height implicitWidth: !root.vertical ? cellWidth * Math.ceil(count / rowsOrColumns) : root.width // Used only by AbstractItem, but it's easiest to keep it here since it // uses dimensions from this item to calculate the final value readonly property int itemSize: { if (autoSize) { const size = Math.min(implicitWidth / rowsOrColumns, implicitHeight / rowsOrColumns) return PlasmaCore.Units.roundToIconSize(Math.min(size, PlasmaCore.Units.iconSizes.enormous)) } else { return smallIconSize } } model: PlasmaCore.SortFilterModel { sourceModel: plasmoid.nativeInterface.systemTrayModel filterRole: "effectiveStatus" filterCallback: function(source_row, value) { return value === PlasmaCore.Types.ActiveStatus } } delegate: ItemLoader {} add: Transition { enabled: itemSize > 0 NumberAnimation { property: "scale" from: 0 to: 1 easing.type: Easing.InOutQuad duration: PlasmaCore.Units.longDuration } } displaced: Transition { //ensure scale value returns to 1.0 // NumberAnimation { property: "scale" to: 1 easing.type: Easing.InOutQuad duration: PlasmaCore.Units.longDuration } } move: Transition { NumberAnimation { properties: "x,y" easing.type: Easing.InOutQuad duration: PlasmaCore.Units.longDuration } } } ExpanderArrow { id: expander Layout.fillWidth: vertical Layout.fillHeight: !vertical Layout.alignment: vertical ? Qt.AlignVCenter : Qt.AlignHCenter visible: root.hiddenLayout.itemCount > 0 } } //Main popup PlasmaCore.Dialog { id: dialog visualParent: root flags: Qt.WindowStaysOnTopHint location: plasmoid.location hideOnWindowDeactivate: !plasmoid.configuration.pin visible: systemTrayState.expanded onVisibleChanged: { systemTrayState.expanded = visible } mainItem: ExpandedRepresentation { id: expandedRepresentation Keys.onEscapePressed: { systemTrayState.expanded = false } LayoutMirroring.enabled: Qt.application.layoutDirection === Qt.RightToLeft LayoutMirroring.childrenInherit: true } }
}

I was unable to find any related setting in the settings app either.

Reset to default

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

You Might Also Like