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

@@ -169,7 +169,7 @@ 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_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);
         {
@@ -236,25 +236,34 @@ QWidget *DetailsWidget::toolWidget() const
 
     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);
+        pixmap.fill(Qt::transparent);
         QPainter p(&pixmap);
-    p.setBrush(lg);
-    p.setPen(QPen(palette().color(QPalette::Mid)));
 
-    p.drawRect(0, 0, size.width() - 1, size.height() - 1);
+        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.drawLine(0, d->m_widget->geometry().top() - 1,
+            p.fillRect(topRect, highlight);
-                   d->m_summaryLabel->width(), d->m_widget->geometry().top() - 1);
         }
 
+        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;
     }
 

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);