Improve tab bar of Plasmoid (use footer and improve sizing of elements)

plasmoid/package/contents/ui/FullRepresentation.qml

@@ -7,12 +7,48 @@ import org.kde.plasma.extras 2.0 as PlasmaExtras
 import org.kde.plasma.components 3.0 as PlasmaComponents3
 
 PlasmaComponents3.Page {
+    // header ("toolbar" with buttons and combo box) and footer ("tabbar")
     header: PlasmaExtras.PlasmoidHeading {
         ToolBar {
             id: toolbar
             width: parent.width
         }
     }
+    footer: PlasmaExtras.PlasmoidHeading {
+        spacing: 0
+        height: units.iconSizes.medium
+        PlasmaComponents3.TabBar {
+            id: tabBar
+            readonly property double buttonWidth: parent.width / count
+            position: PlasmaComponents3.TabBar.Footer
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            TabButton {
+                id: dirsTabButton
+                text: qsTr("Directories")
+                icon.source: "image://fa/folder"
+                width: tabBar.buttonWidth
+            }
+            TabButton {
+                id: devsTabButton
+                text: qsTr("Devices")
+                icon.source: "image://fa/sitemap"
+                width: tabBar.buttonWidth
+            }
+            TabButton {
+                id: downloadsTabButton
+                text: qsTr("Downloads")
+                icon.source: "image://fa/download"
+                width: tabBar.buttonWidth
+            }
+            TabButton {
+                id: recentChangesTabButton
+                text: qsTr("History")
+                icon.source: "image://fa/history"
+                width: tabBar.buttonWidth
+            }
+        }
+    }
 
     // define functions to locate the current page and filter
     function findCurrentPage() {
@@ -45,6 +81,7 @@ PlasmaComponents3.Page {
         onActivated: clickCurrentItemButton("openButton")
     }
 
+    // main contents
     FocusScope {
         anchors.fill: parent
         anchors.topMargin: PlasmaCore.Units.smallSpacing * 2
@@ -228,64 +265,23 @@ PlasmaComponents3.Page {
                 }
             }
 
-            // tab "widget"
+            // tab content
-            ColumnLayout {
+            StackLayout {
-                id: tabWidget
+                id: tabLayout
-                spacing: 0
+                currentIndex: tabBar.currentIndex
                 Layout.fillWidth: true
                 Layout.fillHeight: true
-
+                DirectoriesPage {
-                StackLayout {
+                    id: directoriesPage
-                    id: tabLayout
-                    currentIndex: tabBar.currentIndex
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-                    DirectoriesPage {
-                        id: directoriesPage
-                    }
-                    DevicesPage {
-                        id: devicesPage
-                    }
-                    DownloadsPage {
-                        id: downloadsPage
-                    }
-                    RecentChangesPage {
-                        id: recentChangesPage
-                    }
                 }
-                PlasmaCore.SvgItem {
+                DevicesPage {
-                    Layout.preferredHeight: 1
+                    id: devicesPage
-                    Layout.fillWidth: true
-                    elementId: "horizontal-line"
-                    svg: PlasmaCore.Svg {
-                        imagePath: "widgets/line"
-                    }
                 }
-                PlasmaComponents3.TabBar {
+                DownloadsPage {
-                    id: tabBar
+                    id: downloadsPage
-                    position: PlasmaComponents3.TabBar.Footer
+                }
-                    spacing: units.smallSpacing
+                RecentChangesPage {
-                    Layout.alignment: Qt.AlignBottom
+                    id: recentChangesPage
-                    TabButton {
-                        id: dirsTabButton
-                        text: qsTr("Directories")
-                        icon.source: "image://fa/folder"
-                    }
-                    TabButton {
-                        id: devsTabButton
-                        text: qsTr("Devices")
-                        icon.source: "image://fa/sitemap"
-                    }
-                    TabButton {
-                        id: downloadsTabButton
-                        text: qsTr("Downloads")
-                        icon.source: "image://fa/download"
-                    }
-                    TabButton {
-                        id: recentChangesTabButton
-                        text: qsTr("History")
-                        icon.source: "image://fa/history"
-                    }
                 }
             }
         }

plasmoid/package/contents/ui/TabButton.qml

@@ -5,9 +5,14 @@ import org.kde.plasma.components 3.0 as PlasmaComponents3
 
 PlasmaComponents3.TabButton {
     id: root
+    spacing: 0
     contentItem: RowLayout {
         spacing: label.visible ? units.smallSpacing : 0
         PlasmaCore.ColorScope.inherit: true
+        width: parent.width
+        Item {
+            Layout.fillWidth: true
+        }
         Image {
             id: image
             Layout.preferredHeight: height
@@ -22,8 +27,10 @@ PlasmaComponents3.TabButton {
             font: root.parent.font
             color: PlasmaCore.ColorScope.textColor
             elide: Text.ElideRight
-            Layout.fillWidth: true
             Layout.fillHeight: true
         }
+        Item {
+            Layout.fillWidth: true
+        }
     }
 }