From b13dc0406ab55706d1ba2ff90be0d6f3fd6bf587 Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Wed, 12 Oct 2011 00:04:37 +0200 Subject: [PATCH] toolbar component --- .../plasmacomponents/qml/Button.qml | 4 +- .../plasmacomponents/qml/ToolBar.qml | 166 ++++++++++++++++++ .../plasmacomponents/qml/qmldir | 1 + declarativeimports/test/gallery/Gallery.qml | 44 ++++- 4 files changed, 211 insertions(+), 4 deletions(-) create mode 100644 declarativeimports/plasmacomponents/qml/ToolBar.qml diff --git a/declarativeimports/plasmacomponents/qml/Button.qml b/declarativeimports/plasmacomponents/qml/Button.qml index 1e78f6ce2..4930090f2 100644 --- a/declarativeimports/plasmacomponents/qml/Button.qml +++ b/declarativeimports/plasmacomponents/qml/Button.qml @@ -58,8 +58,8 @@ Item { button.forceActiveFocus(); } - width: 50 - height: 20 + width: Math.max(50, icon.width + label.paintedWidth + surface.margins.left + surface.margins.right) + height: Math.max(20, Math.max(icon.height, label.paintedHeight) + surface.margins.top + surface.margins.bottom) // TODO: needs to define if there will be specific graphics for // disabled buttons opacity: enabled ? 1.0 : 0.5 diff --git a/declarativeimports/plasmacomponents/qml/ToolBar.qml b/declarativeimports/plasmacomponents/qml/ToolBar.qml new file mode 100644 index 000000000..68a7472a4 --- /dev/null +++ b/declarativeimports/plasmacomponents/qml/ToolBar.qml @@ -0,0 +1,166 @@ +/* +* Copyright (C) 2011 by Marco Martin +* +* 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 1.0 +import org.kde.plasma.core 0.1 as PlasmaCore + +PlasmaCore.FrameSvgItem { + id: toolBar + imagePath: "widgets/frame" + prefix: "raised" + height: 48 + margins.top + margins.bottom + + // The current set of tools; null if none. + property Item tools + + // The transition type. One of the following: + // set an instantaneous change (default) + // push follows page stack push animation + // pop follows page stack pop animation + // replace follows page stack replace animation + property string transition: "set" + + // Sets the tools with a transition. + function setTools(tools, transition) + { + if (toolBar.tools == tools) { + return + } + + toolBar.transition = transition + toolBar.tools = tools + } + onToolsChanged: { + var newContainer + var oldContainer + if (containerA.current) { + newContainer = containerB + oldContainer = containerA + } else { + newContainer = containerA + oldContainer = containerB + } + containerA.current = !containerA.current + + tools.parent = newContainer + tools.visible = true + tools.anchors.left = newContainer.left + tools.anchors.right = newContainer.right + tools.anchors.verticalCenter = newContainer.verticalCenter + + switch (transition) { + case "push": + containerA.animationsEnabled = true + oldContainer.x = -oldContainer.width + + containerA.animationsEnabled = false + newContainer.x = newContainer.width + newContainer.y = 0 + containerA.animationsEnabled = true + newContainer.x = 0 + break + case "pop": + containerA.animationsEnabled = true + oldContainer.x = oldContainer.width + + containerA.animationsEnabled = false + newContainer.x = -newContainer.width + newContainer.y = 0 + containerA.animationsEnabled = true + newContainer.x = 0 + break + case "replace": + containerA.animationsEnabled = true + oldContainer.y = oldContainer.height + + containerA.animationsEnabled = false + newContainer.x = 0 + newContainer.y = -newContainer.height + containerA.animationsEnabled = true + newContainer.y = 0 + break + case "set": + default: + containerA.animationsEnabled = false + containerA.animationsEnabled = false + oldContainer.x = -oldContainer.width + newContainer.x = 0 + break + } + + newContainer.opacity = 1 + oldContainer.opacity = 0 + } + + Item { + anchors { + fill: parent + leftMargin: parent.margins.left + topMargin: parent.margins.top + rightMargin: parent.margins.right + bottomMargin: parent.margins.bottom + } + + Item { + id: containerA + width: parent.width + height: parent.height + property bool animationsEnabled: false + opacity: 0 + //this asymmetry just to not export a property + property bool current: false + Behavior on opacity { + PropertyAnimation { duration: 250 } + } + Behavior on x { + enabled: containerA.animationsEnabled + PropertyAnimation { + duration: 250 + } + } + Behavior on y { + enabled: containerA.animationsEnabled + PropertyAnimation { + duration: 250 + } + } + } + Item { + id: containerB + width: parent.width + height: parent.height + opacity: 0 + Behavior on opacity { + PropertyAnimation { duration: 250 } + } + Behavior on x { + enabled: containerA.animationsEnabled + PropertyAnimation { + duration: 250 + } + } + Behavior on y { + enabled: containerA.animationsEnabled + PropertyAnimation { + duration: 250 + } + } + } + } +} diff --git a/declarativeimports/plasmacomponents/qml/qmldir b/declarativeimports/plasmacomponents/qml/qmldir index 45d8d4c3f..0b95953b1 100644 --- a/declarativeimports/plasmacomponents/qml/qmldir +++ b/declarativeimports/plasmacomponents/qml/qmldir @@ -19,4 +19,5 @@ Slider 0.1 Slider.qml Switch 0.1 Switch.qml TextField 0.1 TextField.qml TextArea 0.1 TextArea.qml +ToolBar 0.1 ToolBar.qml ToolButton 0.1 ToolButton.qml diff --git a/declarativeimports/test/gallery/Gallery.qml b/declarativeimports/test/gallery/Gallery.qml index 9ef246e3e..63ab80adf 100644 --- a/declarativeimports/test/gallery/Gallery.qml +++ b/declarativeimports/test/gallery/Gallery.qml @@ -25,10 +25,50 @@ Rectangle { height: 800 color: "lightgrey" + PlasmaComponents.ToolBar { + id: toolBar + z: 10 + anchors { + top: parent.top + left: parent.left + right: parent.right + } + tools: toolbarA + } + Row { + id: toolbarA + visible: false + spacing: 5 + PlasmaComponents.Button { + text: "Switch toolbar" + onClicked: toolBar.setTools(toolbarB, "push") + } + PlasmaComponents.Button { + text: "button on first toolbar" + } + } + Row { + id: toolbarB + visible: false + spacing: 5 + PlasmaComponents.Button { + text: "Switch toolbar" + onClicked: toolBar.setTools(toolbarA, "pop") + } + PlasmaComponents.Button { + text: "button on second toolbar" + } + PlasmaComponents.TextField {} + } Flickable { id: page - anchors.fill: parent + anchors { + top: toolBar.bottom + left: parent.left + right: parent.right + bottom: parent.bottom + } contentWidth: 2200 contentHeight: 1000 @@ -78,7 +118,7 @@ Rectangle { flickableItem: page animated: true anchors { - top: parent.top + top: toolBar.bottom right: parent.right bottom: horizontalScrollBar.top }