Commit 42ebc6b0 authored by Jens Bache-Wiig's avatar Jens Bache-Wiig
Browse files

Redesigned the project settings page

I redesigned the gradient boxes for a
more subtle an professional look.
parent f593b0d6
...@@ -31,6 +31,9 @@ ...@@ -31,6 +31,9 @@
#include <QtGui/QPaintEvent> #include <QtGui/QPaintEvent>
#include <QtGui/QPainter> #include <QtGui/QPainter>
#include <QtGui/QStyleOption>
#include <utils/stylehelper.h>
using namespace Utils; using namespace Utils;
...@@ -43,7 +46,7 @@ DetailsButton::DetailsButton(QWidget *parent) : QAbstractButton(parent) ...@@ -43,7 +46,7 @@ DetailsButton::DetailsButton(QWidget *parent) : QAbstractButton(parent)
QSize DetailsButton::sizeHint() const QSize DetailsButton::sizeHint() const
{ {
// TODO: Adjust this when icons become available! // 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) ...@@ -69,36 +72,45 @@ QPixmap DetailsButton::cacheRendering(const QSize &size, bool checked)
lg.setCoordinateMode(QGradient::ObjectBoundingMode); lg.setCoordinateMode(QGradient::ObjectBoundingMode);
lg.setFinalStop(0, 1); lg.setFinalStop(0, 1);
if (checked) {
lg.setColorAt(0, palette().color(QPalette::Midlight));
lg.setColorAt(1, palette().color(QPalette::Button));
} else {
lg.setColorAt(0, palette().color(QPalette::Button));
lg.setColorAt(1, palette().color(QPalette::Midlight));
}
QPixmap pixmap(size); QPixmap pixmap(size);
pixmap.fill(Qt::transparent);
QPainter p(&pixmap); QPainter p(&pixmap);
p.setBrush(lg); p.setRenderHint(QPainter::Antialiasing, true);
p.translate(0.5, 0.5);
p.setPen(Qt::NoPen); 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, QColor(255, 255, 255, 0));
lg.setColorAt(1, QColor(255, 255, 255, 50));
}
p.drawRect(0, 0, size.width(), size.height()); p.setBrush(lg);
p.setPen(QColor(255,255,255,140));
p.setPen(QPen(palette().color(QPalette::Mid))); p.drawRoundedRect(1, 1, size.width()-3, size.height()-3, 1, 1);
p.drawLine(0, size.height() - 1, 0, 0); p.setPen(QPen(QColor(0, 0, 0, 40)));
p.drawLine(0, 0, size.width() - 1, 0); p.drawLine(0, 1, 0, size.height() - 2);
p.drawLine(size.width() - 1, 0, size.width() - 1, size.height() - 1); if(checked)
if (!checked) p.drawLine(1, size.height() - 1, size.width() - 1, size.height() - 1);
p.drawLine(size.width() - 1, size.height() - 1, 0, size.height() - 1);
p.setPen(palette().color(QPalette::Text)); 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; return pixmap;
} }
...@@ -40,232 +40,241 @@ ...@@ -40,232 +40,241 @@
namespace Utils { 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);
} }
}
DetailsWidget::DetailsWidget(QWidget *parent) :
void DetailsWidget::enterEvent(QEvent * event) QWidget(parent),
{ d(new DetailsWidgetPrivate)
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; d->m_summaryLabel->setTextInteractionFlags(Qt::TextSelectableByMouse);
while (w) { d->m_summaryLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
if (w->layout()) d->m_summaryLabel->setContentsMargins(MARGIN, MARGIN, MARGIN, MARGIN);
w->layout()->activate();
if (QScrollArea *area = qobject_cast<QScrollArea*>(w)) { d->m_grid->setContentsMargins(0, 0, 0, 0);
QEvent e(QEvent::LayoutRequest); d->m_grid->setSpacing(0);
QCoreApplication::sendEvent(area, &e); d->m_grid->addWidget(d->m_summaryLabel, 0, 1);
} d->m_grid->addWidget(d->m_detailsButton, 0, 2);
w = w->parentWidget(); 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) void DetailsWidget::leaveEvent(QEvent * event)
{ {
if (d->m_widget == widget) QWidget::leaveEvent(event);
return; changeHoverState(false);
}
if (d->m_widget) { void DetailsWidget::setSummaryText(const QString &text)
d->m_grid->removeWidget(d->m_widget); {
delete d->m_widget; d->m_summaryLabel->setText(text);
} }
d->m_widget = widget; QString DetailsWidget::summaryText() const
{
return d->m_summaryLabel->text();
}
if (d->m_widget) { DetailsWidget::State DetailsWidget::state() const
d->m_widget->setContentsMargins(MARGIN, MARGIN, MARGIN, MARGIN); {
d->m_grid->addWidget(d->m_widget, 1, 1, 1, 2); return d->m_state;
} }
updateControls();
}
void DetailsWidget::setToolWidget(QWidget *widget) void DetailsWidget::setState(State state)
{ {
if (d->m_toolWidget == widget) if (state == d->m_state)
return; return;
d->m_state = state;
updateControls();
}
d->m_toolWidget = widget; void DetailsWidget::setExpanded(bool expanded)
{
setState(expanded ? Expanded : Collapsed);
}
if (!d->m_toolWidget) void DetailsWidget::updateControls()
return; {
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();
}
}
}
d->m_toolWidget->adjustSize(); QWidget *DetailsWidget::widget() const
d->m_grid->addWidget(d->m_toolWidget, 0, 0, 1, 1, Qt::AlignCenter); {
return d->m_widget;
}
d->m_grid->setColumnMinimumWidth(0, d->m_toolWidget->width()); void DetailsWidget::setWidget(QWidget *widget)
d->m_grid->setRowMinimumHeight(0, d->m_toolWidget->height()); {
if (d->m_widget == widget)
return;
changeHoverState(d->m_hovered); if (d->m_widget) {
} d->m_grid->removeWidget(d->m_widget);
delete d->m_widget;
}
QWidget *DetailsWidget::toolWidget() const d->m_widget = widget;
{
return d->m_toolWidget;
}
QPixmap DetailsWidget::cacheBackground(const QSize &size, bool expanded) if (d->m_widget) {
{ d->m_widget->setContentsMargins(MARGIN, MARGIN, MARGIN, MARGIN);
QLinearGradient lg; d->m_grid->addWidget(d->m_widget, 1, 1, 1, 2);
lg.setCoordinateMode(QGradient::ObjectBoundingMode); }
lg.setFinalStop(0, 1); updateControls();
}
void DetailsWidget::setToolWidget(QWidget *widget)
{
if (d->m_toolWidget == widget)
return;
lg.setColorAt(0, palette().color(QPalette::Midlight)); d->m_toolWidget = widget;
lg.setColorAt(1, palette().color(QPalette::Button));
QPixmap pixmap(size); if (!d->m_toolWidget)
QPainter p(&pixmap); return;
p.setBrush(lg);
p.setPen(QPen(palette().color(QPalette::Mid)));
p.drawRect(0, 0, size.width() - 1, size.height() - 1); d->m_toolWidget->adjustSize();
d->m_grid->addWidget(d->m_toolWidget, 0, 0, 1, 1, Qt::AlignCenter);
if (expanded) { d->m_grid->setColumnMinimumWidth(0, d->m_toolWidget->width());
p.drawLine(0, d->m_widget->geometry().top() - 1, d->m_grid->setRowMinimumHeight(0, d->m_toolWidget->height());
d->m_summaryLabel->width(), d->m_widget->geometry().top() - 1);
changeHoverState(d->m_hovered);
} }
return pixmap; 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) void DetailsWidget::changeHoverState(bool hovered)
{ {
if (!d->m_toolWidget) if (!d->m_toolWidget)
return; return;
d->m_toolWidget->setVisible(hovered); d->m_toolWidget->setVisible(hovered);
d->m_hovered = hovered; d->m_hovered = hovered;
} }
} // namespace Utils } // namespace Utils
...@@ -114,7 +114,9 @@ public: ...@@ -114,7 +114,9 @@ public:
{ {
Q_UNUSED(e); Q_UNUSED(e);
QPainter p(this); 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) ...@@ -130,9 +132,14 @@ void RootWidget::paintEvent(QPaintEvent *e)
QWidget::paintEvent(e); QWidget::paintEvent(e);
QPainter painter(this); 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.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)); painter.drawLine(rect().topRight() - QPoint(1,0), rect().bottomRight() - QPoint(1,0));
} }
...@@ -147,11 +154,15 @@ PanelsWidget::PanelsWidget(QWidget *parent) : ...@@ -147,11 +154,15 @@ PanelsWidget::PanelsWidget(QWidget *parent) :
// We want a 900px wide widget with and the scrollbar at the // We want a 900px wide widget with and the scrollbar at the
// side of the screen. // side of the screen.
m_root->setFixedWidth(900); m_root->setFixedWidth(900);
m_root->setContentsMargins(0, 0, 20, 0); m_root->setContentsMargins(0, 0, 40, 0);
QPalette pal = m_root->palette();