From 2f0fce86287c1ec839db65ba824527da4d88af04 Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Wed, 26 Sep 2012 17:44:25 +0200 Subject: [PATCH] scroll arrows when there are too many tabs --- .../plasmacomponents/qml/TabBar.qml | 43 ++++++++++++++++--- .../plasmacomponents/qml/TabButton.qml | 9 ++-- .../qml/private/TabBarLayout.qml | 10 +++-- 3 files changed, 49 insertions(+), 13 deletions(-) diff --git a/declarativeimports/plasmacomponents/qml/TabBar.qml b/declarativeimports/plasmacomponents/qml/TabBar.qml index 449e2358f..34347e3d5 100644 --- a/declarativeimports/plasmacomponents/qml/TabBar.qml +++ b/declarativeimports/plasmacomponents/qml/TabBar.qml @@ -87,13 +87,14 @@ FocusScope { prefix: "sunken" } + clip: true PlasmaCore.FrameSvgItem { id: buttonFrame visible: currentTab !== null - x: currentTab.x + backgroundFrame.margins.left + x: tabBarLayout.x + currentTab.x + backgroundFrame.margins.left y: backgroundFrame.margins.top - width: currentTab.width + buttonFrame.margins.left + buttonFrame.margins.right + width: currentTab.width height: currentTab.height + buttonFrame.margins.top + buttonFrame.margins.bottom imagePath: "widgets/button" prefix: "normal" @@ -105,14 +106,46 @@ FocusScope { } } - Private.TabBarLayout { - id: tabBarLayout + Item { + id: tabbarScroller + clip: true anchors { fill: parent leftMargin: backgroundFrame.margins.left + buttonFrame.margins.left topMargin: backgroundFrame.margins.top + buttonFrame.margins.top - rightMargin: backgroundFrame.margins.right + buttonFrame.margins.right + rightMargin: backgroundFrame.margins.right + buttonFrame.margins.right + (buttonsLayout.visible ? buttonsLayout.width : 0) bottomMargin: backgroundFrame.margins.bottom + buttonFrame.margins.bottom } + + Private.TabBarLayout { + id: tabBarLayout + width: Math.max(parent.width, implicitWidth) + anchors { + top: parent.top + bottom: parent.bottom + } + } + } + Row { + id: buttonsLayout + visible: tabBarLayout.width > root.width - backgroundFrame.margins.left - backgroundFrame.margins.right + height: Math.min(parent.height, theme.mediumIconSize) + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + rightMargin: Math.min(y, backgroundFrame.margins.right) + } + ToolButton { + height: parent.height + width: height + iconSource: "go-previous" + onClicked: tabBarLayout.x = Math.min(0, tabBarLayout.x + tabBarLayout.height) + } + ToolButton { + height: parent.height + width: height + iconSource: "go-next" + onClicked: tabBarLayout.x = Math.max(-tabBarLayout.width + tabbarScroller.width, tabBarLayout.x - tabBarLayout.height) + } } } diff --git a/declarativeimports/plasmacomponents/qml/TabButton.qml b/declarativeimports/plasmacomponents/qml/TabButton.qml index 75c0b9fd2..f1ae3eb38 100644 --- a/declarativeimports/plasmacomponents/qml/TabButton.qml +++ b/declarativeimports/plasmacomponents/qml/TabButton.qml @@ -83,7 +83,7 @@ Item { // Common Public API property Item tab - property bool checked: (internal.tabGroup == null) ? (root.parent.parent.currentTab == root) : (internal.tabGroup.currentTab == tab) + property bool checked: (internal.tabGroup == null) ? (internal.tabBar.currentTab == root) : (internal.tabGroup.currentTab == tab) property bool pressed: mouseArea.pressed == true && mouseArea.containsMouse property alias text: label.text @@ -100,8 +100,8 @@ Item { target: root onPressedChanged: { //TabBar is the granparent - root.parent.parent.currentTab = root - root.parent.parent.forceActiveFocus() + internal.tabBar.currentTab = root + internal.tabBar.forceActiveFocus() } onVisibleChanged: root.parent.childrenChanged() } @@ -109,6 +109,7 @@ Item { QtObject { id: internal + property Item tabBar: Utils.findParent(root, "currentTab") property Item tabGroup: Utils.findParent(tab, "currentTab") property bool portrait: root.height >= label.paintedHeight + 16 @@ -168,7 +169,7 @@ Item { internal.tabGroup.currentTab = tab } //TabBar is the granparent, done here too in case of no tabgroup - root.parent.parent.currentTab = root + internal.tabBar.currentTab = root } anchors.fill: parent diff --git a/declarativeimports/plasmacomponents/qml/private/TabBarLayout.qml b/declarativeimports/plasmacomponents/qml/private/TabBarLayout.qml index 211576619..9d3804275 100644 --- a/declarativeimports/plasmacomponents/qml/private/TabBarLayout.qml +++ b/declarativeimports/plasmacomponents/qml/private/TabBarLayout.qml @@ -55,6 +55,7 @@ Properties: **/ import QtQuick 1.1 +import "AppManager.js" as Utils Item { id: root @@ -89,12 +90,13 @@ Item { property Item firstTab: firstButton ? (firstButton.tab != null ? firstButton.tab : null) : null property Item tabGroup: firstTab ? (firstTab.parent ? firstTab.parent.parent.parent : null) : null property bool mirrored: root.LayoutMirroring.enabled + property Item tabBar: Utils.findParent(root, "currentTab") onMirroredChanged: layoutChildren() function currentButtonIndex() { for (var i = 0; i < root.children.length; ++i) { - if (root.children[i] == root.parent.currentTab) + if (root.children[i] == priv.tabBar.currentTab) return i } return -1 @@ -104,7 +106,7 @@ Item { if (tabGroup) { tabGroup.currentTab = root.children[index].tab } - root.parent.currentTab = root.children[index] + priv.tabBar.currentTab = root.children[index] } function layoutChildren() { @@ -146,12 +148,12 @@ Item { } root.implicitWidth = contentWidth root.implicitHeight = contentHeight - if (root.parent.currentTab === null) { + if (priv.tabBar.currentTab === null) { //99% of the cases this loop will be length 1 but a tabbar can also have other children, such as Repeater for (var i = 0; i < tabBarLayout.children.length; ++i) { //anything with a checked property may act as tabbutton if (tabBarLayout.children[i].checked !== undefined) { - root.parent.currentTab = tabBarLayout.children[i] + priv.tabBar.currentTab = tabBarLayout.children[i] break; } }