[kimpanel] Replace Flow with GridView.

Flow seems to have bug that make the icon blurry. Use GridView instead,
also we can have the same panel icon size option.

applets/kimpanel/package/contents/config/main.xml

@@ -18,6 +18,10 @@
     <entry name="hiddenList" type="StringList">
       <default></default>
     </entry>
+    <entry name="scaleIconsToFit" type="bool">
+      <label>Whether to automatically scale System Tray icons to fix the available thickness of the panel. If false, tray icons will be capped at the smallMedium size (22px) and become a two-row/column layout when the panel is thick.</label>
+      <default>false</default>
+    </entry>
   </group>
 
 </kcfg>

applets/kimpanel/package/contents/ui/ConfigAppearance.qml

@@ -32,6 +32,7 @@ Kirigami.FormLayout {
     property alias cfg_vertical_lookup_table: verticalLookupTable.checked
     property bool cfg_use_default_font
     property font cfg_font
+    property bool cfg_scaleIconsToFit
 
     QQC2.CheckBox {
         id: verticalLookupTable
@@ -69,6 +70,20 @@ Kirigami.FormLayout {
         }
     }
 
+    QQC2.RadioButton {
+        Kirigami.FormData.label: i18nc("The arrangement of icons in the Panel", "Panel icon size:")
+        text: i18n("Small")
+        checked: cfg_scaleIconsToFit == false
+        onToggled: cfg_scaleIconsToFit = !checked
+    }
+    QQC2.RadioButton {
+        id: automaticRadioButton
+        text: plasmoid.formFactor === PlasmaCore.Types.Horizontal ? i18n("Scale with Panel height")
+                                                                    : i18n("Scale with Panel width")
+        checked: cfg_scaleIconsToFit == true
+        onToggled: cfg_scaleIconsToFit = checked
+    }
+
     QtDialogs.FontDialog {
         id: fontDialog
         title: i18nc("@title:window", "Select Font")

applets/kimpanel/package/contents/ui/StatusIcon.qml

@@ -30,7 +30,7 @@ Item {
     property string tip;
     property string hint;
     signal triggered(variant button);
-    property int iconSize: PlasmaCore.Units.roundToIconSize(Math.min(parent.width, parent.height))
+    property int iconSize: PlasmaCore.Units.roundToIconSize(Math.min(width, height))
 
     opacity: 'disable' == hint ? 0.3 : 1
 

applets/kimpanel/package/contents/ui/main.qml

@@ -26,16 +26,16 @@ import org.kde.plasma.private.kimpanel 0.1 as Kimpanel
 
 Item {
     id: kimpanel
-    property int visibleButtons: 0
 
-    property bool vertical: plasmoid.formFactor === PlasmaCore.Types.Vertical
+    property int visibleButtons: 0
+    readonly property bool vertical: plasmoid.formFactor === PlasmaCore.Types.Vertical
 
     LayoutMirroring.enabled: !vertical && Qt.application.layoutDirection === Qt.RightToLeft
     LayoutMirroring.childrenInherit: true
 
-    Layout.minimumWidth: vertical ? PlasmaCore.Units.iconSizes.small : items.implicitWidth
-    Layout.minimumHeight: !vertical ? PlasmaCore.Units.iconSizes.small : items.implicitHeight
-    Layout.preferredHeight: Layout.minimumHeight
+    Layout.minimumWidth: vertical ? PlasmaCore.Units.iconSizes.small : mainLayout.implicitWidth
+    Layout.minimumHeight: vertical ? mainLayout.implicitHeight : PlasmaCore.Units.iconSizes.small
+
     Plasmoid.preferredRepresentation: Plasmoid.fullRepresentation
 
     Component.onCompleted: {
@@ -44,35 +44,82 @@ Item {
 
     InputPanel { }
 
-    Flow {
-        id: items
-        width: parent.width
-        height: parent.height
-        x: (parent.width - childrenRect.width) / 2
-        y: (parent.height - childrenRect.height) / 2
-        flow: kimpanel.vertical ? Flow.LeftToRight : Flow.TopToBottom
+    GridLayout {
+        id: mainLayout
+
+        rowSpacing: 0
+        columnSpacing: 0
+        anchors.fill: parent
+
+        GridView {
+            id: items
+
+            Layout.alignment: Qt.AlignCenter
+
+            interactive: false
+            flow: kimpanel.vertical ? GridView.FlowLeftToRight : GridView.FlowTopToBottom
+
+            // 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: kimpanel.vertical ? kimpanel.width : kimpanel.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 / smallSizeCellLength)))
+
+            // 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 ? gridThickness : smallIconSize + PlasmaCore.Units.smallSpacing
+            cellHeight: {
+                console.log(gridThickness);
+                console.log(rowsOrColumns);
+                if (kimpanel.vertical) {
+                    return autoSize ? kimpanel.width : smallSizeCellLength
+                } else {
+                    return autoSize ? kimpanel.height : Math.floor(kimpanel.height / rowsOrColumns)
+                }
+            }
+            cellWidth: {
+                if (kimpanel.vertical) {
+                    return autoSize ? kimpanel.width : Math.floor(kimpanel.width / rowsOrColumns)
+                } else {
+                    return autoSize ? kimpanel.height : smallSizeCellLength
+                }
+            }
+
+            //depending on the form factor, we are calculating only one dimention, second is always the same as root/parent
+            implicitHeight: kimpanel.vertical ? cellHeight * Math.ceil(count / rowsOrColumns) : kimpanel.height
+            implicitWidth: !kimpanel.vertical ? cellWidth * Math.ceil(count / rowsOrColumns) : kimpanel.width
 
-        property int iconSize: Math.min(PlasmaCore.Units.iconSizeHints.panel, PlasmaCore.Units.roundToIconSize(Math.min(width, height)))
+            readonly property int iconSize: {
+                var size;
+                if (autoSize) {
+                    size = Math.min(implicitWidth / rowsOrColumns, implicitHeight / rowsOrColumns)
+                } else {
+                    size = Math.min(gridThickness, smallIconSize)
+                }
+                return PlasmaCore.Units.roundToIconSize(Math.min(size, PlasmaCore.Units.iconSizes.enormous))
+            }
 
-        Repeater {
             model: ListModel {
                 id: list
                 dynamicRoles: true
             }
 
             delegate: Item {
-                id: iconDelegate
-                width: items.iconSize
-                height: items.iconSize
+                width: items.cellWidth
+                height: items.cellHeight
                 StatusIcon {
                     id: statusIcon
                     anchors.centerIn: parent
+                    Layout.alignment: Qt.AlignCenter
+
                     width: items.iconSize
                     height: items.iconSize
                     label: model.label
                     tip: model.tip
                     icon: model.icon
                     hint: model.hint
+
                     onTriggered : {
                         if (button === Qt.LeftButton) {
                             if (model.key == 'kimpanel-placeholder') {