Make the toolboxes in Projects Mode nicer

I did a couple of changes to make these more subtle.
- Moved inside the details widget
- Made them fade in and out
- Hide up/down buttons when not required

Note, there are some pending changes to Qt to disable
the graphicsevent cache that can cause issues when
scrolling items.

Reviewed-by: thorbjorn

src/libs/utils/detailsbutton.cpp

@@ -38,10 +38,34 @@
 
 using namespace Utils;
 
+FadingPanel::FadingPanel(QWidget *parent) : QWidget(parent), m_opacityEffect(0)
+
+{
+    m_opacityEffect = new QGraphicsOpacityEffect;
+    m_opacityEffect->setOpacity(0);
+    setGraphicsEffect(m_opacityEffect);
+
+    // Workaround for issue with QGraphicsEffect. GraphicsEffect
+    // currently clears with Window color. Remove if flickering
+    // no longer occurs on fade-in
+    QPalette pal;
+    pal.setBrush(QPalette::All, QPalette::Window, Qt::transparent);
+    setPalette(pal);
+}
+
+void FadingPanel::fadeTo(float value)
+{
+    QPropertyAnimation *animation = new QPropertyAnimation(m_opacityEffect, "opacity");
+    animation->setDuration(200);
+    animation->setEndValue(value);
+    animation->start(QAbstractAnimation::DeleteWhenStopped);
+}
+
 DetailsButton::DetailsButton(QWidget *parent) : QAbstractButton(parent), m_fader(0)
 {
     setCheckable(true);
     setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Expanding);
+    setText(tr("Details"));
 }
 
 QSize DetailsButton::sizeHint() const
@@ -114,7 +138,6 @@ QPixmap DetailsButton::cacheRendering(const QSize &size, bool checked)
     p.setRenderHint(QPainter::Antialiasing, true);
     p.translate(0.5, 0.5);
     p.setPen(Qt::NoPen);
-    QColor color = palette().highlight().color();
     if(!checked) {
         lg.setColorAt(0, QColor(0, 0, 0, 10));
         lg.setColorAt(1, QColor(0, 0, 0, 16));
@@ -133,12 +156,11 @@ QPixmap DetailsButton::cacheRendering(const QSize &size, bool checked)
 
     p.setPen(palette().color(QPalette::Text));
 
-    QString text = tr("Details");
-    QRect textRect = p.fontMetrics().boundingRect(text);
+    QRect textRect = p.fontMetrics().boundingRect(text());
     textRect.setWidth(textRect.width() + 15);
     textRect.moveCenter(rect().center());
 
-    p.drawText(textRect, Qt::AlignLeft | Qt::AlignVCenter, text);
+    p.drawText(textRect, Qt::AlignLeft | Qt::AlignVCenter, text());
 
     int arrowsize = 15;
     QStyleOption arrowOpt;

src/libs/utils/detailsbutton.h

@@ -31,12 +31,26 @@
 #define DETAILSBUTTON_H
 
 #include <QtGui/QAbstractButton>
+#include <QtGui/QToolButton>
 #include <QtGui/QPixmap>
+#include <QtGui/QPainter>
+#include <QtGui/QGraphicsOpacityEffect>
+#include <QtCore/QPropertyAnimation>
 
 #include "utils_global.h"
 
 namespace Utils {
 
+class QTCREATOR_UTILS_EXPORT FadingPanel : public QWidget
+{
+public:
+    FadingPanel(QWidget *parent = 0);
+    void fadeTo(float value);
+protected:
+    QGraphicsOpacityEffect *m_opacityEffect;
+};
+
+
 class QTCREATOR_UTILS_EXPORT DetailsButton : public QAbstractButton
 {
     Q_OBJECT

src/libs/utils/detailswidget.cpp

@@ -31,6 +31,7 @@
 #include "detailsbutton.h"
 
 #include <QtCore/QStack>
+#include <QtCore/QPropertyAnimation>
 
 #include <QtGui/QGridLayout>
 #include <QtGui/QLabel>
@@ -57,7 +58,7 @@ namespace Utils {
         DetailsButton *m_detailsButton;
         QGridLayout *m_grid;
         QLabel *m_summaryLabel;
-        QWidget *m_toolWidget;
+        Utils::FadingPanel *m_toolWidget;
         QWidget *m_widget;
 
         QPixmap m_collapsedPixmap;
@@ -210,7 +211,7 @@ namespace Utils {
         updateControls();
     }
 
-    void DetailsWidget::setToolWidget(QWidget *widget)
+    void DetailsWidget::setToolWidget(Utils::FadingPanel *widget)
     {
         if (d->m_toolWidget == widget)
             return;
@@ -221,7 +222,7 @@ namespace Utils {
             return;
 
         d->m_toolWidget->adjustSize();
-        d->m_grid->addWidget(d->m_toolWidget, 0, 0, 1, 1, Qt::AlignCenter);
+        d->m_grid->addWidget(d->m_toolWidget, 0, 1, 1, 1, Qt::AlignRight);
 
         d->m_grid->setColumnMinimumWidth(0, d->m_toolWidget->width());
         d->m_grid->setRowMinimumHeight(0, d->m_toolWidget->height());
@@ -271,9 +272,11 @@ namespace Utils {
     {
         if (!d->m_toolWidget)
             return;
-
+#ifdef Q_OS_MAC
         d->m_toolWidget->setVisible(hovered);
-
+#else
+        d->m_toolWidget->fadeTo(hovered ? 1.0 : 0);
+#endif
         d->m_hovered = hovered;
     }
 

src/libs/utils/detailswidget.h

@@ -41,6 +41,7 @@ QT_END_NAMESPACE
 namespace Utils {
 
 struct DetailsWidgetPrivate;
+class FadingPanel;
 
 class QTCREATOR_UTILS_EXPORT DetailsWidget : public QWidget
 {
@@ -68,7 +69,7 @@ public:
     void setWidget(QWidget *widget);
     QWidget *widget() const;
 
-    void setToolWidget(QWidget *widget);
+    void setToolWidget(Utils::FadingPanel *widget);
     QWidget *toolWidget() const;
 
 private slots:

src/plugins/coreplugin/core.qrc

@@ -54,5 +54,8 @@
         <file>images/progressbar.png</file>
         <file>images/help.png</file>
         <file>images/editclear.png</file>
+        <file>images/darkarrowdown.png</file>
+        <file>images/darkarrowup.png</file>
+        <file>images/darkclose.png</file>
     </qresource>
 </RCC>

src/plugins/projectexplorer/buildstepspage.cpp

@@ -29,6 +29,7 @@
 
 #include "buildstepspage.h"
 #include "buildconfiguration.h"
+#include "detailsbutton.h"
 
 #include <coreplugin/coreconstants.h>
 #include <coreplugin/icore.h>
@@ -117,6 +118,12 @@ void BuildStepsPage::init(BuildConfiguration *bc)
         s.detailsWidget->setSummaryText(s.widget->summaryText());
     }
     updateBuildStepButtonsState();
+
+    static QLatin1String buttonStyle(
+            "QToolButton{ border-width: 2;}"
+            "QToolButton:hover{border-image: url(:/welcome/images/btn_26_hover.png) 4;}"
+            "QToolButton:pressed{ border-image: url(:/welcome/images/btn_26_pressed.png) 4;}");
+    setStyleSheet(buttonStyle);
 }
 
 void BuildStepsPage::updateAddBuildStepMenu()
@@ -160,30 +167,32 @@ void BuildStepsPage::addBuildStepWidget(int pos, BuildStep *step)
     s.detailsWidget->setSummaryText(s.widget->summaryText());
     s.detailsWidget->setWidget(s.widget);
 
-    s.upButton = new QToolButton(this);
-    s.upButton->setArrowType(Qt::UpArrow);
-    s.upButton->setMaximumHeight(22);
-    s.upButton->setMaximumWidth(22);
-
-    s.downButton = new QToolButton(this);
-    s.downButton->setArrowType(Qt::DownArrow);
-    s.downButton->setMaximumHeight(22);
-    s.downButton->setMaximumWidth(22);
-#ifdef Q_OS_MAC
-    s.upButton->setIconSize(QSize(10, 10));
-    s.downButton->setIconSize(QSize(10, 10));
-#endif
-    s.removeButton = new QToolButton(this);
-    s.removeButton->setText(QChar('X'));
-    s.removeButton->setMaximumHeight(22);
-    s.removeButton->setMaximumWidth(22);
-
     // layout
-    QWidget *toolWidget = new QWidget(s.detailsWidget);
-    toolWidget->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
+    Utils::FadingPanel *toolWidget = new Utils::FadingPanel(s.detailsWidget);
+    QSize buttonSize(20, 26);
+
+    s.upButton = new QToolButton(toolWidget);
+    s.upButton->setAutoRaise(true);
+    s.upButton->setToolTip(tr("Move Up"));
+    s.upButton->setFixedSize(buttonSize);
+    s.upButton->setIcon(QIcon(":/core/images/darkarrowup.png"));
+
+    s.downButton = new QToolButton(toolWidget);
+    s.downButton->setAutoRaise(true);
+    s.downButton->setToolTip(tr("Move Down"));
+    s.downButton->setFixedSize(buttonSize);
+    s.downButton->setIcon(QIcon(":/core/images/darkarrowdown.png"));
+
+    s.removeButton  = new QToolButton(toolWidget);
+    s.removeButton->setAutoRaise(true);
+    s.removeButton->setToolTip(tr("Remove Item"));
+    s.removeButton->setFixedSize(buttonSize);
+    s.removeButton->setIcon(QIcon(":/core/images/darkclose.png"));
+
+    toolWidget->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Expanding);
     QHBoxLayout *hbox = new QHBoxLayout();
     toolWidget->setLayout(hbox);
-    hbox->setMargin(0);
+    hbox->setMargin(4);
     hbox->setSpacing(0);
     hbox->addWidget(s.upButton);
     hbox->addWidget(s.downButton);
@@ -316,9 +325,14 @@ void BuildStepsPage::updateBuildStepButtonsState()
         BuildStepsWidgetStruct s = m_buildSteps.at(i);
         s.removeButton->setEnabled(!steps.at(i)->immutable());
         m_removeMapper->setMapping(s.removeButton, i);
+
         s.upButton->setEnabled((i > 0) && !(steps.at(i)->immutable() && steps.at(i - 1)));
         m_upMapper->setMapping(s.upButton, i);
         s.downButton->setEnabled((i + 1 < steps.count()) && !(steps.at(i)->immutable() && steps.at(i + 1)->immutable()));
         m_downMapper->setMapping(s.downButton, i);
+
+        // Only show buttons when needed
+        s.downButton->setVisible(steps.count() != 1);
+        s.upButton->setVisible(steps.count() != 1);
     }
 }