[plasma-mobile/qmlkonsole] src/contents/ui: Fix tabs strip design

Devin Lin <[email protected]>
Newsgroups gmane.comp.kde.cvs
Message-ID <[email protected]>
Git commit 46c03183d17f8679944c2a6d66389d7da4feb3b0 by Devin Lin.
Committed on 19/07/2026 at 05:14.
Pushed by devinlin into branch 'master'.

Fix tabs strip design

The tabs strip delegates didn't have proper margins, and had no selection indication

M  +20   -27   src/contents/ui/Tabs.qml
M  +6    -0    src/contents/ui/TerminalPage.qml

https://invent.kde.org/plasma-mobile/qmlkonsole/-/commit/46c03183d17f8679944c2a6d66389d7da4feb3b0

diff --git a/src/contents/ui/Tabs.qml b/src/contents/ui/Tabs.qml
index 1a0a06d..8983f38 100644
--- a/src/contents/ui/Tabs.qml
+++ b/src/contents/ui/Tabs.qml
@@ -59,7 +59,10 @@ ListView {
     delegate: ItemDelegate {
         id: control
 
-        padding: 0
+        topPadding: 0
+        bottomPadding: 0
+        leftPadding: 0
+        rightPadding: 0
         leftInset: 0
         rightInset: 0
         topInset: 0
@@ -68,16 +71,23 @@ ListView {
         highlighted: ListView.isCurrentItem
 
         width: Kirigami.Units.gridUnit * 15
-        height: tabControl.height
+        height: root.height
 
         background: Rectangle {
             Kirigami.Theme.colorSet: Kirigami.Theme.Button
             Kirigami.Theme.inherit: false
-            implicitHeight: Kirigami.Units.gridUnit * 3 + Kirigami.Units.smallSpacing * 2
             color: control.highlighted ? Kirigami.Theme.backgroundColor
                 : (control.hovered ? Qt.darker(Kirigami.Theme.backgroundColor, 1.05)
                 : Qt.darker(Kirigami.Theme.backgroundColor, 1.1))
-            Behavior on color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
+
+            Rectangle {
+                anchors.top: parent.top
+                anchors.left: parent.left
+                anchors.right: parent.right
+                height: 1
+                color: Kirigami.Theme.highlightColor
+                visible: control.highlighted
+            }
 
             ToolSeparator {
                 anchors.top: parent.top
@@ -108,6 +118,10 @@ ListView {
             RowLayout {
                 id: layout
                 anchors.fill: parent
+                anchors.leftMargin: Kirigami.Units.smallSpacing
+                anchors.rightMargin: Kirigami.Units.smallSpacing
+                anchors.topMargin: Kirigami.Units.smallSpacing
+                anchors.bottomMargin: Kirigami.Units.smallSpacing
                 spacing: Kirigami.Units.smallSpacing
 
                 Kirigami.Icon {
@@ -131,31 +145,10 @@ ListView {
 
                 ToolButton {
                     id: closeButton
-                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-                    Layout.preferredWidth: Kirigami.Units.iconSizes.smallMedium
-                    Layout.preferredHeight: width
+                    Layout.fillHeight: true
+                    Layout.preferredWidth: height
                     icon.name: "tab-close"
                     onClicked: root.closeTabRequested(model.index)
-
-                    topPadding: 0
-                    bottomPadding: 0
-                    leftPadding: 0
-                    rightPadding: 0
-                    background: Item {}
-                    contentItem: Kirigami.Icon {
-                        source: closeButton.icon.name
-                        implicitHeight: Kirigami.Units.iconSizes.smallMedium
-                        implicitWidth: Kirigami.Units.iconSizes.smallMedium
-                        opacity: Kirigami.Settings.tabletMode ? 1 : (closeButton.hovered ? 0.5 : 1)
-                    }
-
-                    opacity: Kirigami.Settings.tabletMode ? 1 : (control.hovered ? 1 : 0);
-                    Behavior on opacity {
-                        OpacityAnimator {
-                            duration: Kirigami.Units.shortDuration
-                            easing.type: Easing.InOutQuad
-                        }
-                    }
                 }
             }
         }
diff --git a/src/contents/ui/TerminalPage.qml b/src/contents/ui/TerminalPage.qml
index 49710ed..42f81fe 100644
--- a/src/contents/ui/TerminalPage.qml
+++ b/src/contents/ui/TerminalPage.qml
@@ -278,6 +278,12 @@ Kirigami.Page {
                 onSwitchToTabRequested: index => root.switchToTab(index)
                 onCloseTabRequested: index => root.closeTab(index)
                 onAddTabRequested: newTabAction.trigger()
+
+                Kirigami.Separator {
+                    anchors.bottom: parent.bottom
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                }
             }
         }
     }
lmpx.com only provides a reader for public news (NNTP) servers. It is not affiliated with the servers or forums shown here and is not responsible for the content of articles, which is written by their respective authors.