WelcomePage: replace context panel for session editing

This patch replaces the context panel by extendable list items.
This does not create any visual cluttering on hover and is more
user friendly.

Change-Id: Ib9b283f6972ea7e9ae3dc3155d0c3f1c8fe2e806
Reviewed-by: Alessandro Portale <alessandro.portale@nokia.com>

9 files changed, 362 insertions, 263 deletions

diff --git a/share/qtcreator/welcomescreen/develop.qml b/share/qtcreator/welcomescreen/develop.qml
index e6ae8f83ed..c106084ca7 100644
--- a/share/qtcreator/welcomescreen/develop.qml
+++ b/share/qtcreator/welcomescreen/develop.qml
@@ -124,7 +124,7 @@ Rectangle {
             color: "#535353"
             text: qsTr("Recent Projects")
             anchors.left: sessionsTitle.right
-            anchors.leftMargin: 160
+            anchors.leftMargin: 280
             font.bold: true
             font.family: "Helvetica"
             font.pixelSize: 16
diff --git a/share/qtcreator/welcomescreen/widgets/CustomFonts.qml b/share/qtcreator/welcomescreen/widgets/CustomFonts.qml
index c676ca67ca..4035b2060b 100644
--- a/share/qtcreator/welcomescreen/widgets/CustomFonts.qml
+++ b/share/qtcreator/welcomescreen/widgets/CustomFonts.qml
@@ -38,10 +38,19 @@ QtObject {
     property alias standstandardDescription: standardDescriptionText.font
     property alias italicDescription: italicDescriptionText.font
     property alias boldDescription: boldText.font
+    property alias smallPath: smallPathText.font
 
     property list<Item> texts: [
 
         Text {
+            id: smallPathText
+
+            visible: false
+            font.pixelSize: 12
+            font.family: "Helvetica"
+        },
+
+        Text {
             id: linkText
 
             visible: false
diff --git a/share/qtcreator/welcomescreen/widgets/ProjectItem.qml b/share/qtcreator/welcomescreen/widgets/ProjectItem.qml
index 0f1f96bb1d..068a92dc31 100644
--- a/share/qtcreator/welcomescreen/widgets/ProjectItem.qml
+++ b/share/qtcreator/welcomescreen/widgets/ProjectItem.qml
@@ -62,12 +62,29 @@ Item {
     Text {
         id: pathText
         y: 18
-        color: "#8b8b8b"
+        color: "#6b6b6b"
         anchors.right: parent.right
         anchors.rightMargin: 12
         anchors.left: parent.left
         anchors.leftMargin: 8
-        font: fonts.italicDescription
+        font: fonts.smallPath
         elide: Text.ElideRight
+        MouseArea {
+            anchors.fill: parent
+            hoverEnabled: true
+            onEntered: {
+                toolTip.show();
+            }
+            onExited: {
+                toolTip.hide()
+            }
+
+        }
+        ToolTip {
+            x: 10
+            y: 20
+            id: toolTip
+            text: pathText.text
+        }
     }
 }
diff --git a/share/qtcreator/welcomescreen/widgets/SessionItem.qml b/share/qtcreator/welcomescreen/widgets/SessionItem.qml
index cd8a83dafb..49e024aab0 100644
--- a/share/qtcreator/welcomescreen/widgets/SessionItem.qml
+++ b/share/qtcreator/welcomescreen/widgets/SessionItem.qml
@@ -32,26 +32,226 @@
 
 import QtQuick 1.1
 
-Row {
-    spacing: 4
-    property alias name: sessionText.text
+Item {
+    x: 5
+    id: delegate
+    property bool expanded: false
+    height: column.height
+    property alias name: text.text
 
-    property alias hovered: sessionText.hovered
+    CustomFonts {
+        id: fonts
+    }
+
+    Column {
+        id: column
+        spacing: 4
+
+        Row {
+            id: row1
+            height: text.height + 8
+
+            spacing: 4
+
+            Image {
+                anchors.verticalCenter: text.verticalCenter
+                source: "images/bullet.png"
+            }
+
+            LinkedText {
+                id: text
+
+                onClicked: {
+                    projectWelcomePage.requestSession(sessionName);
+                }
+
+                width: delegate.ListView.view.width - 80
+                elide: Text.ElideRight
+
+                Rectangle {
+                    z: -4
+                    color: "#f9f9f9"
+                    anchors.fill: parent
+                    anchors.rightMargin: - delegate.ListView.view.width + text.width + 32
+                    anchors.topMargin: -4
+                    anchors.bottomMargin: -4
+                    opacity: iArea.hovered || text.hovered || area2.hovered ? 1: 0.1
+                    MouseArea {
+                        acceptedButtons: Qt.RightButton
+                        id: area2
+                        hoverEnabled: true
+                        anchors.fill: parent
+                        property bool hovered: false
+                        onEntered: {
+                            area2.hovered = true
+                        }
+                        onExited: {
+                            area2.hovered = false
+                        }
+                        onClicked: {
+                            delegate.expanded = !delegate.expanded;
+                            delegate.ListView.view.positionViewAtIndex(index, ListView.Contain);
+                            area2.hovered = false
+                        }
+                    }
+                }
+            }
+
+        }
+        Item {
+            z: -1
+            property int margin: 6
+            height: innerColumn.height + margin * 2
+            width: delegate.ListView.view.width - 8 - margin * 2
+            opacity: delegate.expanded ? 1 : 0
+
+            Behavior on opacity {
+                ParallelAnimation {
+                    PauseAnimation { duration: delegate.expanded ? 100 : 0; }
+                    PropertyAnimation { duration:  100; }
+                }
+            }
 
-    signal clicked
+            Column {
+                x: parent.margin + 8
+                //y: parent.margin
+                id: innerColumn
+                spacing: 12
 
-    id: root
+                Repeater {
+                    model: projectsPath
+                    delegate: Column {
+                        Text {
+                            text: projectsName[index]
+                            font: fonts.boldDescription
+                        }
+                        Text {
+                            text: modelData
+                            font: fonts.smallPath
+                            elide: Text.ElideMiddle
+                            color: "#6b6b6b"
+                            width: delegate.ListView.view.width - 40
+                            MouseArea {
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                onEntered: {
+                                    toolTip.show();
+                                }
+                                onExited: {
+                                    toolTip.hide()
+                                }
 
-    Image {
-        source: "images/bullet.png"
-        anchors.verticalCenter: sessionText.verticalCenter
+                            }
+                            ToolTip {
+                                x: 10
+                                y: 20
+                                id: toolTip
+                                text: modelData
+                            }
+                        }
+                    }
+                }
+
+                Row {
+                    x: 16
+                    spacing: 24
+                    LinkedText {
+                        text: qsTr("Clone")
+                        onClicked: {
+                            root.model.cloneSession(sessionName);
+                        }
+                    }
+
+                    LinkedText {
+                        text: qsTr("Delete")
+                        onClicked: {
+                            root.model.deleteSession(sessionName);
+                        }
+                    }
+                    LinkedText {
+                        text: qsTr("Rename")
+                        onClicked: {
+                            root.model.renameSession(sessionName);
+                        }
+                    }
+                }
+            }
+            Rectangle {
+                color: "#f1f1f1"
+                radius: 4
+                anchors.fill: parent
+                anchors.topMargin: -8
+                anchors.bottomMargin: -2
+                anchors.leftMargin: 6
+                anchors.rightMargin: 6
+                z: -1
+            }
+
+        }
     }
 
-    LinkedText {
-        id: sessionText
-        onClicked: {
-            projectWelcomePage.requestSession(sessionName);
-            root.clicked();
+    Item {
+
+        x: delegate.ListView.view.width - 65
+        width: 38
+        height: 20
+        Item {
+            id: collapseButton
+            opacity: text.hovered || area2.hovered || iArea.hovered || delegate.expanded ? 1 : 0
+
+            property color color: iArea.hovered ? "#E9E9E9" : "#f1f1f1"
+
+            anchors.fill: parent
+            Image {
+                x: 4
+                source: "images/info.png"
+            }
+            Image {
+                x: 20
+                source: delegate.expanded ? "images/arrow_up.png" : "images/arrow_down.png"
+            }
+            Rectangle {
+                color: collapseButton.color
+                z: -1
+                radius: 6
+                anchors.fill: parent
+                anchors.topMargin: -3
+                anchors.bottomMargin: 6
+                anchors.leftMargin: -1
+                anchors.rightMargin: -1
+                visible: iArea.hovered || delegate.expanded
+            }
+
+            Rectangle {
+                color: collapseButton.color
+                z: -1
+                anchors.fill: parent
+                anchors.topMargin: 6
+                anchors.bottomMargin: delegate.expanded ? -2 : 2
+                anchors.leftMargin: -1
+                anchors.rightMargin: -1
+                visible: iArea.hovered || delegate.expanded
+            }
+        }
+
+        MouseArea {
+            id: iArea
+            anchors.margins: -2
+            anchors.fill: parent
+            hoverEnabled: true
+            property bool hovered: false
+
+            onClicked: {
+                delegate.expanded = !delegate.expanded;
+                delegate.ListView.view.positionViewAtIndex(index, ListView.Contain);
+            }
+            onEntered: {
+                iArea.hovered = true
+            }
+            onExited: {
+                iArea.hovered = false
+            }
         }
+
     }
 }
diff --git a/share/qtcreator/welcomescreen/widgets/Sessions.qml b/share/qtcreator/welcomescreen/widgets/Sessions.qml
index fbcf031a30..db970a2a14 100644
--- a/share/qtcreator/welcomescreen/widgets/Sessions.qml
+++ b/share/qtcreator/welcomescreen/widgets/Sessions.qml
@@ -35,58 +35,27 @@ import qtcomponents 1.0
 
 Item {
     property alias model: root.model
-    height: Math.min(root.count * root.delegateHeight, 276)
-
+    property int topMargin: 6
+    height: Math.min(root.contentHeight + topMargin, parent.height - 260)
 
     ListView {
         id: root
 
         anchors.fill: parent
+        anchors.topMargin: topMargin
 
         snapMode: ListView.SnapToItem
         property int delegateHeight: currentItem.height + spacing
+        //property int delegateHeight: 22
 
-        clip: true
         interactive: false
 
         spacing: 4
+        cacheBuffer: 800 //We need a big cache to avoid artefacts caused by delegate recreation
+        clip: true
 
-        property bool delayedHide: false
-
-        Behavior on delayedHide {
-            PropertyAnimation { duration: 200; }
-        }
-
-        onDelayedHideChanged: {
-            panel.opacity = 0;
-        }
 
         delegate: SessionItem {
-            id: item
-
-            property bool activate: hovered
-
-            Behavior on activate {
-                PropertyAnimation { duration: 50 }
-            }
-
-            onActivateChanged: {
-                if (activate) {
-                    panel.y = item.y + 20 - root.contentY;
-                    panel.opacity = 1;
-                    panel.projectsPathList = projectsPath;
-                    panel.projectsDisplayList = projectsName
-                    panel.currentSession = sessionName;
-                } else {
-                    if (!panel.hovered)
-                        panel.opacity = 0
-                }
-            }
-
-            onClicked: {
-                root.delayedHide = !root.delayedHide
-            }
-
             function fullSessionName()
             {
                 var newSessionName = sessionName
@@ -120,219 +89,12 @@ Item {
             anchors.top: parent.top
             anchors.bottom: parent.bottom
             singleStep: root.delegateHeight
-            anchors.topMargin: styleitem.style == "mac" ? 1 : 0
+            anchors.topMargin: styleitem.style === "mac" ? 1 : 0
             onValueChanged: root.contentY =  Math.round(value / root.delegateHeight) * root.delegateHeight
             anchors.rightMargin: styleitem.frameoffset
             anchors.bottomMargin: styleitem.frameoffset
+            value: root.contentY
         }
     }
 
-    Rectangle {
-
-        CustomFonts {
-            id: fonts
-        }
-
-        id: panel
-
-        border.width: 1
-        smooth: true
-        opacity: 0
-
-        property int margin: 12
-
-        width: panelColumn.width + margin * 2
-        height: panelColumn.height + margin * 2
-
-        property bool hovered: false
-
-        property variant projectsPathList
-        property variant projectsDisplayList
-
-        property string currentSession
-
-        onHoveredChanged: {
-            if (panel.hovered)
-                panel.opacity = 1;
-            else
-                panel.opacity = 0;
-        }
-
-        MouseArea {
-            anchors.topMargin: 0
-            anchors.fill: parent
-            id: panelMouseArea
-            hoverEnabled: true
-            onEntered: {
-                panel.hovered = true
-            }
-            onExited: {
-                panel.hovered = false
-            }
-        }
-
-        Column {
-            x: panel.margin
-            y: panel.margin
-            id: panelColumn
-            spacing: 8
-
-            Repeater {
-                model: panel.projectsPathList
-                delegate: Row {
-                    spacing: 6
-                    Text {
-                        text: panel.projectsDisplayList[index]
-                        font: fonts.boldDescription
-                    }
-                    Text {
-                        text: modelData
-                        font: fonts.linkFont
-                    }
-                }
-            }
-
-            Row {
-                x: -2
-                spacing: 2
-                id: add
-
-                Item {
-                    //place hold for an icon
-                    width: 16
-                    height: 16
-
-                    MouseArea {
-                        id: exitMouseArea
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        onEntered: {
-                            panel.hovered = true
-                        }
-                        onExited: {
-                            panel.hovered = false
-                        }
-                        onClicked: {
-                            //Will be uncommented once we have an icon
-                            //model.cloneSession(panel.currentSession);
-                        }
-                    }
-                }
-                LinkedText {
-                    text: qsTr("Clone this session")
-                    onEntered: {
-                        panel.hovered = true
-                    }
-                    onExited: {
-                        panel.hovered = false
-                    }
-                    onClicked: {
-                        panel.opacity = 0;
-                        model.cloneSession(panel.currentSession);
-                    }
-                }
-            }
-            Row {
-                x: -2
-                spacing: 2
-                id: clear
-
-                Item {
-                    //place holder for an icon
-                    width: 16
-                    height: 16
-
-
-                    MouseArea {
-                        id: clearMouseArea
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        onEntered: {
-                            panel.hovered = true
-                        }
-                        onExited: {
-                            panel.hovered = false
-                        }
-                        onClicked: {
-                            //Will be uncommented once we have an icon
-                            //model.deleteSession(panel.currentSession);
-                        }
-                    }
-                }
-                LinkedText {
-                    text: qsTr("Delete this session")
-                    onEntered: {
-                        panel.hovered = true
-                    }
-                    onExited: {
-                        panel.hovered = false
-                    }
-                    onClicked: {
-                        panel.opacity = 0;
-                        model.deleteSession(panel.currentSession);
-                    }
-                }
-            }
-            Row {
-                x: -2
-                spacing: 2
-                id: rename
-
-                Item {
-                    //place holder for an icon
-                    opacity: clearMouseArea.containsMouse ? 0.8 : 1
-                    Behavior on opacity {
-                        PropertyAnimation { duration: visible ? 0 : 50; }
-                    }
-
-                    width: 16
-                    height: 16
-
-                    MouseArea {
-                        id: renameMouseArea
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        onEntered: {
-                            panel.hovered = true
-                        }
-                        onExited: {
-                            panel.hovered = false
-                        }
-                        onClicked: {
-                            //Will be uncommented once we have an icon
-                            //model.renameSession(panel.currentSession);
-                        }
-                    }
-                }
-                LinkedText {
-                    text: qsTr("Rename this session")
-                    onEntered: {
-                        panel.hovered = true
-                    }
-                    onExited: {
-                        panel.hovered = false
-                    }
-                    onClicked: {
-                        panel.opacity = 0;
-                        model.renameSession(panel.currentSession);
-                    }
-                }
-            }
-        }
-
-        Behavior on opacity {
-            PropertyAnimation { duration: visible ? 50 : 100; }
-        }
-        radius: 2
-        gradient: Gradient {
-            GradientStop {
-                position: 0.00;
-                color: "#ffffff";
-            }
-            GradientStop {
-                position: 1.00;
-                color: "#e4e5f0";
-            }
-        }
-    }
 }
diff --git a/share/qtcreator/welcomescreen/widgets/ToolTip.qml b/share/qtcreator/welcomescreen/widgets/ToolTip.qml
new file mode 100644
index 0000000000..78b9f01cbc
--- /dev/null
+++ b/share/qtcreator/welcomescreen/widgets/ToolTip.qml
@@ -0,0 +1,111 @@
+/**************************************************************************
+**
+** This file is part of Qt Creator
+**
+** Copyright (c) 2012 Nokia Corporation and/or its subsidiary(-ies).
+**
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+**
+** GNU Lesser General Public License Usage
+**
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this file.
+** Please review the following information to ensure the GNU Lesser General
+** Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** Other Usage
+**
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**************************************************************************/
+
+import QtQuick 1.1
+
+Item {
+    id: toolTip
+
+    property alias text: text.text
+
+
+    property int margin: 4
+
+    width: text.width + margin * 2
+    height: text.height + margin * 2
+
+    opacity: 0
+
+    property Item originalParent: parent
+
+    property int oldX: x
+    property int oldY: y
+
+    Behavior on opacity {
+        SequentialAnimation {
+            PauseAnimation { duration: opacity === 0 ? 1000 : 0 }
+            PropertyAnimation { duration: 50 }
+        }
+    }
+
+    function show() {
+        toolTip.originalParent = toolTip.parent;
+        var p = toolTip.parent;
+        while (p.parent != undefined && p.parent.parent != undefined)
+            p = p.parent
+        toolTip.parent = p;
+
+        toolTip.oldX = toolTip.x
+        toolTip.oldY = toolTip.y
+        var globalPos = mapFromItem(toolTip.originalParent, toolTip.oldX, toolTip.oldY);
+
+        toolTip.x = globalPos.x + toolTip.oldX
+        toolTip.y = globalPos.y + toolTip.oldY
+
+        toolTip.opacity = 1;
+    }
+
+    function hide() {
+        toolTip.opacity = 0;
+        oldClip = originalParent.clip
+        originalParent.clip = false
+        toolTip.parent = originalParent
+        originalParent.clip = true
+        originalParent.clip = oldClip
+        toolTip.x = toolTip.oldX
+        toolTip.y = toolTip.oldY
+    }
+
+    Rectangle {
+        anchors.fill: parent
+
+        border.width: 1
+        smooth: true
+        radius: 2
+        gradient: Gradient {
+            GradientStop {
+                position: 0.00;
+                color: "#ffffff";
+            }
+            GradientStop {
+                position: 1.00;
+                color: "#e4e5f0";
+            }
+        }
+    }
+
+    Text {
+        x: toolTip.margin
+        y: toolTip.margin
+        id: text
+    }
+}
diff --git a/share/qtcreator/welcomescreen/widgets/images/arrow_down.png b/share/qtcreator/welcomescreen/widgets/images/arrow_down.png
new file mode 100644
index 0000000000..fd3e6afcc7
--- /dev/null
+++ b/share/qtcreator/welcomescreen/widgets/images/arrow_down.png
diff --git a/share/qtcreator/welcomescreen/widgets/images/arrow_up.png b/share/qtcreator/welcomescreen/widgets/images/arrow_up.png
new file mode 100644
index 0000000000..b4764172e6
--- /dev/null
+++ b/share/qtcreator/welcomescreen/widgets/images/arrow_up.png
diff --git a/share/qtcreator/welcomescreen/widgets/images/info.png b/share/qtcreator/welcomescreen/widgets/images/info.png
new file mode 100644
index 0000000000..4ff1669799
--- /dev/null
+++ b/share/qtcreator/welcomescreen/widgets/images/info.png