Redesigned the project settings page

I redesigned the gradient boxes for a
more subtle an professional look.

src/libs/utils/detailsbutton.cpp

@@ -31,6 +31,9 @@
 
 #include <QtGui/QPaintEvent>
 #include <QtGui/QPainter>
+#include <QtGui/QStyleOption>
+
+#include <utils/stylehelper.h>
 
 using namespace Utils;
 
@@ -43,7 +46,7 @@ DetailsButton::DetailsButton(QWidget *parent) : QAbstractButton(parent)
 QSize DetailsButton::sizeHint() const
 {
     // TODO: Adjust this when icons become available!
-    return QSize(40, 22);
+    return QSize(80, 22);
 }
 
 
@@ -69,36 +72,45 @@ QPixmap DetailsButton::cacheRendering(const QSize &size, bool checked)
     lg.setCoordinateMode(QGradient::ObjectBoundingMode);
     lg.setFinalStop(0, 1);
 
-    if (checked) {
+    QPixmap pixmap(size);
-        lg.setColorAt(0, palette().color(QPalette::Midlight));
+    pixmap.fill(Qt::transparent);
-        lg.setColorAt(1, palette().color(QPalette::Button));
+    QPainter p(&pixmap);
+    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));
     } else {
-        lg.setColorAt(0, palette().color(QPalette::Button));
+        lg.setColorAt(0, QColor(255, 255, 255, 0));
-        lg.setColorAt(1, palette().color(QPalette::Midlight));
+        lg.setColorAt(1, QColor(255, 255, 255, 50));
     }
 
-    QPixmap pixmap(size);
-    QPainter p(&pixmap);
     p.setBrush(lg);
-    p.setPen(Qt::NoPen);
+    p.setPen(QColor(255,255,255,140));
-
+    p.drawRoundedRect(1, 1, size.width()-3, size.height()-3, 1, 1);
-    p.drawRect(0, 0, size.width(), size.height());
+    p.setPen(QPen(QColor(0, 0, 0, 40)));
-
+    p.drawLine(0, 1, 0, size.height() - 2);
-    p.setPen(QPen(palette().color(QPalette::Mid)));
+    if(checked)
-    p.drawLine(0, size.height() - 1, 0, 0);
+        p.drawLine(1, size.height() - 1, size.width() - 1, size.height() - 1);
-    p.drawLine(0, 0,                 size.width() - 1, 0);
-    p.drawLine(size.width() - 1, 0,  size.width() - 1, size.height() - 1);
-    if (!checked)
-        p.drawLine(size.width() - 1, size.height() - 1, 0, size.height() - 1);
 
     p.setPen(palette().color(QPalette::Text));
 
-    // TODO: This should actually use some icons instead...
+    QString text = tr("Details");
-    if (checked) {
+    QRect textRect = p.fontMetrics().boundingRect(text);
-        p.drawText(0, 0, size.width(), size.height(), Qt::AlignCenter, tr("Less"));
+    textRect.setWidth(textRect.width() + 15);
-    } else {
+    textRect.moveCenter(rect().center());
-        p.drawText(0, 0, size.width(), size.height(), Qt::AlignCenter, tr("More"));
-    }
 
+    p.drawText(textRect, Qt::AlignLeft | Qt::AlignVCenter, text);
+
+    int arrowsize = 15;
+    QStyleOption arrowOpt;
+    arrowOpt.initFrom(this);
+    QPalette pal = arrowOpt.palette;
+    pal.setBrush(QPalette::All, QPalette::Text, QColor(0, 0, 0));
+    arrowOpt.rect = QRect(size.width() - arrowsize - 6, height()/2-arrowsize/2, arrowsize, arrowsize);
+    arrowOpt.palette = pal;
+    style()->drawPrimitive(checked ? QStyle::PE_IndicatorArrowUp : QStyle::PE_IndicatorArrowDown, &arrowOpt, &p, this);
     return pixmap;
 }

src/libs/utils/detailswidget.cpp

@@ -40,232 +40,241 @@
 
 namespace Utils {
 
-static const int MARGIN=8;
+    static const int MARGIN=8;
 
-// This widget is using a grid layout and places the items
+    // This widget is using a grid layout and places the items
-// in the following way:
+    // in the following way:
-//
+    //
-// +------------+-------------------------+---------------+
+    // +------------+-------------------------+---------------+
-// + toolWidget | summaryLabel            | detailsButton |
+    // + toolWidget | summaryLabel            | detailsButton |
-// +------------+-------------------------+---------------+
+    // +------------+-------------------------+---------------+
-// |            | widget                                  |
+    // |            | widget                                  |
-// +------------+-------------------------+---------------+
+    // +------------+-------------------------+---------------+
 
-struct DetailsWidgetPrivate {
+    struct DetailsWidgetPrivate {
-    DetailsWidgetPrivate();
+        DetailsWidgetPrivate();
 
-    DetailsButton *m_detailsButton;
+        DetailsButton *m_detailsButton;
-    QGridLayout *m_grid;
+        QGridLayout *m_grid;
-    QLabel *m_summaryLabel;
+        QLabel *m_summaryLabel;
-    QWidget *m_toolWidget;
+        QWidget *m_toolWidget;
-    QWidget *m_widget;
+        QWidget *m_widget;
 
-    QPixmap m_collapsedPixmap;
+        QPixmap m_collapsedPixmap;
-    QPixmap m_expandedPixmap;
+        QPixmap m_expandedPixmap;
 
-    DetailsWidget::State m_state;
+        DetailsWidget::State m_state;
-    bool m_hovered;
+        bool m_hovered;
-};
+    };
 
-DetailsWidgetPrivate::DetailsWidgetPrivate() :
+    DetailsWidgetPrivate::DetailsWidgetPrivate() :
-        m_detailsButton(new DetailsButton),
+            m_detailsButton(new DetailsButton),
-        m_grid(new QGridLayout),
+            m_grid(new QGridLayout),
-        m_summaryLabel(new QLabel),
+            m_summaryLabel(new QLabel),
-        m_toolWidget(0),
+            m_toolWidget(0),
-        m_widget(0),
+            m_widget(0),
-        m_state(DetailsWidget::Collapsed),
+            m_state(DetailsWidget::Collapsed),
-        m_hovered(false)
+            m_hovered(false)
-{
-}
-
-DetailsWidget::DetailsWidget(QWidget *parent) :
-    QWidget(parent),
-    d(new DetailsWidgetPrivate)
-{
-    d->m_summaryLabel->setTextInteractionFlags(Qt::TextSelectableByMouse);
-    d->m_summaryLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
-    d->m_summaryLabel->setContentsMargins(MARGIN, MARGIN, MARGIN, MARGIN);
-
-    d->m_grid->setContentsMargins(0, 0, 0, 0);
-    d->m_grid->setSpacing(0);
-    d->m_grid->addWidget(d->m_summaryLabel, 0, 1);
-    d->m_grid->addWidget(d->m_detailsButton, 0, 2);
-    setLayout(d->m_grid);
-
-    connect(d->m_detailsButton, SIGNAL(toggled(bool)),
-            this, SLOT(setExpanded(bool)));
-    updateControls();
-}
-
-DetailsWidget::~DetailsWidget()
-{
-    delete d;
-}
-
-void DetailsWidget::paintEvent(QPaintEvent *paintEvent)
-{
-    QWidget::paintEvent(paintEvent);
-
-    QPainter p(this);
-
-    QPoint topLeft(d->m_summaryLabel->geometry().left(), contentsRect().top());
-    const QRect paintArea(topLeft, contentsRect().bottomRight());
-
-    if (d->m_state != Expanded) {
-        if (d->m_collapsedPixmap.isNull() ||
-            d->m_collapsedPixmap.size() != size())
-            d->m_collapsedPixmap = cacheBackground(paintArea.size(), false);
-        p.drawPixmap(paintArea, d->m_collapsedPixmap);
-    } else {
-        if (d->m_expandedPixmap.isNull() ||
-            d->m_expandedPixmap.size() != size())
-            d->m_expandedPixmap = cacheBackground(paintArea.size(), true);
-        p.drawPixmap(paintArea, d->m_expandedPixmap);
-    }
-}
-
-void DetailsWidget::enterEvent(QEvent * event)
-{
-    QWidget::enterEvent(event);
-    changeHoverState(true);
-}
-
-void DetailsWidget::leaveEvent(QEvent * event)
-{
-    QWidget::leaveEvent(event);
-    changeHoverState(false);
-}
-
-void DetailsWidget::setSummaryText(const QString &text)
-{
-    d->m_summaryLabel->setText(text);
-}
-
-QString DetailsWidget::summaryText() const
-{
-    return d->m_summaryLabel->text();
-}
-
-DetailsWidget::State DetailsWidget::state() const
-{
-    return d->m_state;
-}
-
-void DetailsWidget::setState(State state)
-{
-    if (state == d->m_state)
-        return;
-    d->m_state = state;
-    updateControls();
-}
-
-void DetailsWidget::setExpanded(bool expanded)
-{
-    setState(expanded ? Expanded : Collapsed);
-}
-
-void DetailsWidget::updateControls()
-{
-    if (d->m_widget)
-        d->m_widget->setVisible(d->m_state == Expanded || d->m_state == NoSummary);
-    d->m_detailsButton->setChecked(d->m_state == Expanded && d->m_widget);
-    d->m_summaryLabel->setEnabled(d->m_state == Collapsed && d->m_widget);
-    d->m_detailsButton->setVisible(d->m_state != NoSummary);
-    d->m_summaryLabel->setVisible(d->m_state != NoSummary);
     {
-        QWidget *w = this;
+    }
-        while (w) {
+
-            if (w->layout())
+    DetailsWidget::DetailsWidget(QWidget *parent) :
-                w->layout()->activate();
+            QWidget(parent),
-            if (QScrollArea *area = qobject_cast<QScrollArea*>(w)) {
+            d(new DetailsWidgetPrivate)
-                QEvent e(QEvent::LayoutRequest);
+    {
-                QCoreApplication::sendEvent(area, &e);
+        d->m_summaryLabel->setTextInteractionFlags(Qt::TextSelectableByMouse);
-            }
+        d->m_summaryLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
-            w = w->parentWidget();
+        d->m_summaryLabel->setContentsMargins(MARGIN, MARGIN, MARGIN, MARGIN);
+
+        d->m_grid->setContentsMargins(0, 0, 0, 0);
+        d->m_grid->setSpacing(0);
+        d->m_grid->addWidget(d->m_summaryLabel, 0, 1);
+        d->m_grid->addWidget(d->m_detailsButton, 0, 2);
+        setLayout(d->m_grid);
+
+        connect(d->m_detailsButton, SIGNAL(toggled(bool)),
+                this, SLOT(setExpanded(bool)));
+        updateControls();
+    }
+
+    DetailsWidget::~DetailsWidget()
+    {
+        delete d;
+    }
+
+    void DetailsWidget::paintEvent(QPaintEvent *paintEvent)
+    {
+        QWidget::paintEvent(paintEvent);
+
+        QPainter p(this);
+
+        QPoint topLeft(d->m_summaryLabel->geometry().left(), contentsRect().top());
+        const QRect paintArea(topLeft, contentsRect().bottomRight());
+
+        if (d->m_state != Expanded) {
+            if (d->m_collapsedPixmap.isNull() ||
+                d->m_collapsedPixmap.size() != size())
+                d->m_collapsedPixmap = cacheBackground(paintArea.size(), false);
+            p.drawPixmap(paintArea, d->m_collapsedPixmap);
+        } else {
+            if (d->m_expandedPixmap.isNull() ||
+                d->m_expandedPixmap.size() != size())
+                d->m_expandedPixmap = cacheBackground(paintArea.size(), true);
+            p.drawPixmap(paintArea, d->m_expandedPixmap);
         }
     }
-}
 
-QWidget *DetailsWidget::widget() const
+    void DetailsWidget::enterEvent(QEvent * event)
-{
+    {
-    return d->m_widget;
+        QWidget::enterEvent(event);
-}
+        changeHoverState(true);
-
-void DetailsWidget::setWidget(QWidget *widget)
-{
-    if (d->m_widget == widget)
-        return;
-
-    if (d->m_widget) {
-        d->m_grid->removeWidget(d->m_widget);
-        delete d->m_widget;
     }
 
-    d->m_widget = widget;
+    void DetailsWidget::leaveEvent(QEvent * event)
-
+    {
-    if (d->m_widget) {
+        QWidget::leaveEvent(event);
-        d->m_widget->setContentsMargins(MARGIN, MARGIN, MARGIN, MARGIN);
+        changeHoverState(false);
-        d->m_grid->addWidget(d->m_widget, 1, 1, 1, 2);
-    }
-    updateControls();
-}
-
-void DetailsWidget::setToolWidget(QWidget *widget)
-{
-    if (d->m_toolWidget == widget)
-        return;
-
-    d->m_toolWidget = widget;
-
-    if (!d->m_toolWidget)
-        return;
-
-    d->m_toolWidget->adjustSize();
-    d->m_grid->addWidget(d->m_toolWidget, 0, 0, 1, 1, Qt::AlignCenter);
-
-    d->m_grid->setColumnMinimumWidth(0, d->m_toolWidget->width());
-    d->m_grid->setRowMinimumHeight(0, d->m_toolWidget->height());
-
-    changeHoverState(d->m_hovered);
-}
-
-QWidget *DetailsWidget::toolWidget() const
-{
-    return d->m_toolWidget;
-}
-
-QPixmap DetailsWidget::cacheBackground(const QSize &size, bool expanded)
-{
-    QLinearGradient lg;
-    lg.setCoordinateMode(QGradient::ObjectBoundingMode);
-    lg.setFinalStop(0, 1);
-
-    lg.setColorAt(0, palette().color(QPalette::Midlight));
-    lg.setColorAt(1, palette().color(QPalette::Button));
-
-    QPixmap pixmap(size);
-    QPainter p(&pixmap);
-    p.setBrush(lg);
-    p.setPen(QPen(palette().color(QPalette::Mid)));
-
-    p.drawRect(0, 0, size.width() - 1, size.height() - 1);
-
-    if (expanded) {
-        p.drawLine(0, d->m_widget->geometry().top() - 1,
-                   d->m_summaryLabel->width(), d->m_widget->geometry().top() - 1);
     }
 
-    return pixmap;
+    void DetailsWidget::setSummaryText(const QString &text)
-}
+    {
+        d->m_summaryLabel->setText(text);
+    }
 
-void DetailsWidget::changeHoverState(bool hovered)
+    QString DetailsWidget::summaryText() const
-{
+    {
-    if (!d->m_toolWidget)
+        return d->m_summaryLabel->text();
-        return;
+    }
 
-    d->m_toolWidget->setVisible(hovered);
+    DetailsWidget::State DetailsWidget::state() const
+    {
+        return d->m_state;
+    }
 
-    d->m_hovered = hovered;
+    void DetailsWidget::setState(State state)
-}
+    {
+        if (state == d->m_state)
+            return;
+        d->m_state = state;
+        updateControls();
+    }
+
+    void DetailsWidget::setExpanded(bool expanded)
+    {
+        setState(expanded ? Expanded : Collapsed);
+    }
+
+    void DetailsWidget::updateControls()
+    {
+        if (d->m_widget)
+            d->m_widget->setVisible(d->m_state == Expanded || d->m_state == NoSummary);
+        d->m_detailsButton->setChecked(d->m_state == Expanded && d->m_widget);
+        //d->m_summaryLabel->setEnabled(d->m_state == Collapsed && d->m_widget);
+        d->m_detailsButton->setVisible(d->m_state != NoSummary);
+        d->m_summaryLabel->setVisible(d->m_state != NoSummary);
+        {
+            QWidget *w = this;
+            while (w) {
+                if (w->layout())
+                    w->layout()->activate();
+                if (QScrollArea *area = qobject_cast<QScrollArea*>(w)) {
+                    QEvent e(QEvent::LayoutRequest);
+                    QCoreApplication::sendEvent(area, &e);
+                }
+                w = w->parentWidget();
+            }
+        }
+    }
+
+    QWidget *DetailsWidget::widget() const
+    {
+        return d->m_widget;
+    }
+
+    void DetailsWidget::setWidget(QWidget *widget)
+    {
+        if (d->m_widget == widget)
+            return;
+
+        if (d->m_widget) {
+            d->m_grid->removeWidget(d->m_widget);
+            delete d->m_widget;
+        }
+
+        d->m_widget = widget;
+
+        if (d->m_widget) {
+            d->m_widget->setContentsMargins(MARGIN, MARGIN, MARGIN, MARGIN);
+            d->m_grid->addWidget(d->m_widget, 1, 1, 1, 2);
+        }
+        updateControls();
+    }
+
+    void DetailsWidget::setToolWidget(QWidget *widget)
+    {
+        if (d->m_toolWidget == widget)
+            return;
+
+        d->m_toolWidget = widget;
+
+        if (!d->m_toolWidget)
+            return;
+
+        d->m_toolWidget->adjustSize();
+        d->m_grid->addWidget(d->m_toolWidget, 0, 0, 1, 1, Qt::AlignCenter);
+
+        d->m_grid->setColumnMinimumWidth(0, d->m_toolWidget->width());
+        d->m_grid->setRowMinimumHeight(0, d->m_toolWidget->height());
+
+        changeHoverState(d->m_hovered);
+    }
+
+    QWidget *DetailsWidget::toolWidget() const
+    {
+        return d->m_toolWidget;
+    }
+
+    QPixmap DetailsWidget::cacheBackground(const QSize &size, bool expanded)
+    {
+        QPixmap pixmap(size);
+        pixmap.fill(Qt::transparent);
+        QPainter p(&pixmap);
+
+        QRect topRect(0, 0, size.width(), d->m_summaryLabel->height());
+        QRect fullRect(0, 0, size.width(), size.height());
+        p.fillRect(fullRect, QColor(255, 255, 255, 40));
+
+        QColor highlight = palette().highlight().color();
+        highlight.setAlpha(0.5);
+        if (expanded) {
+            p.fillRect(topRect, highlight);
+        }
+
+        QLinearGradient lg(topRect.topLeft(), topRect.bottomLeft());
+        lg.setColorAt(0, QColor(255, 255, 255, 130));
+        lg.setColorAt(1, QColor(255, 255, 255, 0));
+        p.fillRect(topRect, lg);
+        p.setRenderHint(QPainter::Antialiasing, true);
+        p.translate(0.5, 0.5);
+        p.setPen(QColor(0, 0, 0, 40));
+        p.setBrush(Qt::NoBrush);
+        p.drawRoundedRect(fullRect.adjusted(0, 0, -1, -1), 2, 2);
+        p.setBrush(Qt::NoBrush);
+        p.setPen(QColor(255,255,255,140));
+        p.drawRoundedRect(fullRect.adjusted(1, 1, -2, -2), 2, 2);
+        p.setPen(QPen(palette().color(QPalette::Mid)));
+
+        return pixmap;
+    }
+
+    void DetailsWidget::changeHoverState(bool hovered)
+    {
+        if (!d->m_toolWidget)
+            return;
+
+        d->m_toolWidget->setVisible(hovered);
+
+        d->m_hovered = hovered;
+    }
 
 } // namespace Utils

src/plugins/projectexplorer/projectwindow.cpp

@@ -114,7 +114,9 @@ public:
     {
         Q_UNUSED(e);
         QPainter p(this);
-        p.fillRect(contentsRect(), QBrush(Utils::StyleHelper::borderColor()));
+        QColor fillColor = Utils::StyleHelper::mergedColors(
+                palette().button().color(), Qt::black, 80);
+        p.fillRect(contentsRect(), fillColor);
     }
 };
 
@@ -130,9 +132,14 @@ void RootWidget::paintEvent(QPaintEvent *e)
     QWidget::paintEvent(e);
 
     QPainter painter(this);
-    painter.setPen(QColor(255, 255, 255, 90));
+    QColor light = Utils::StyleHelper::mergedColors(
+            palette().button().color(), Qt::white, 30);
+    QColor dark = Utils::StyleHelper::mergedColors(
+            palette().button().color(), Qt::black, 85);
+
+    painter.setPen(light);
     painter.drawLine(rect().topRight(), rect().bottomRight());
-    painter.setPen(QColor(0, 0, 0, 30));
+    painter.setPen(dark);
     painter.drawLine(rect().topRight() - QPoint(1,0), rect().bottomRight() - QPoint(1,0));
 }
 
@@ -147,11 +154,15 @@ PanelsWidget::PanelsWidget(QWidget *parent) :
     // We want a 900px wide widget with and the scrollbar at the
     // side of the screen.
     m_root->setFixedWidth(900);
-    m_root->setContentsMargins(0, 0, 20, 0);
+    m_root->setContentsMargins(0, 0, 40, 0);
     
     QPalette pal = m_root->palette();
-    pal.setColor(QPalette::All, QPalette::Window, QColor(255, 255, 255, 40));
+    QColor background = Utils::StyleHelper::mergedColors(
+            palette().window().color(), Qt::white, 85);
+    pal.setColor(QPalette::All, QPalette::Window, background.darker(102));
     setPalette(pal);
+    pal.setColor(QPalette::All, QPalette::Window, background);
+    m_root->setPalette(pal);
     // The layout holding the individual panels:
     m_layout = new QGridLayout(m_root);
     m_layout->setColumnMinimumWidth(0, ICON_SIZE + 4);
@@ -198,6 +209,9 @@ void PanelsWidget::addPropertiesPanel(IPropertiesPanel *panel)
     // name:
     QLabel *nameLabel = new QLabel(m_root);
     nameLabel->setText(panel->displayName());
+    QPalette palette = nameLabel->palette();
+    palette.setBrush(QPalette::All, QPalette::Foreground, QColor(0, 0, 0, 110));
+    nameLabel->setPalette(palette);
     nameLabel->setContentsMargins(0, ABOVE_HEADING_MARGIN, 0, 0);
     QFont f = nameLabel->font();
     f.setBold(true);