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,18 +40,18 @@ ...@@ -40,18 +40,18 @@
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;
...@@ -65,9 +65,9 @@ struct DetailsWidgetPrivate { ...@@ -65,9 +65,9 @@ struct DetailsWidgetPrivate {
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),
...@@ -75,13 +75,13 @@ DetailsWidgetPrivate::DetailsWidgetPrivate() : ...@@ -75,13 +75,13 @@ DetailsWidgetPrivate::DetailsWidgetPrivate() :
m_widget(0), m_widget(0),
m_state(DetailsWidget::Collapsed), m_state(DetailsWidget::Collapsed),
m_hovered(false) m_hovered(false)
{ {
} }
DetailsWidget::DetailsWidget(QWidget *parent) : DetailsWidget::DetailsWidget(QWidget *parent) :
QWidget(parent), QWidget(parent),
d(new DetailsWidgetPrivate) d(new DetailsWidgetPrivate)
{ {
d->m_summaryLabel->setTextInteractionFlags(Qt::TextSelectableByMouse); d->m_summaryLabel->setTextInteractionFlags(Qt::TextSelectableByMouse);
d->m_summaryLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed); d->m_summaryLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
d->m_summaryLabel->setContentsMargins(MARGIN, MARGIN, MARGIN, MARGIN); d->m_summaryLabel->setContentsMargins(MARGIN, MARGIN, MARGIN, MARGIN);
...@@ -95,15 +95,15 @@ DetailsWidget::DetailsWidget(QWidget *parent) : ...@@ -95,15 +95,15 @@ DetailsWidget::DetailsWidget(QWidget *parent) :
connect(d->m_detailsButton, SIGNAL(toggled(bool)), connect(d->m_detailsButton, SIGNAL(toggled(bool)),
this, SLOT(setExpanded(bool))); this, SLOT(setExpanded(bool)));
updateControls(); updateControls();
} }
DetailsWidget::~DetailsWidget() DetailsWidget::~DetailsWidget()
{ {
delete d; delete d;
} }
void DetailsWidget::paintEvent(QPaintEvent *paintEvent) void DetailsWidget::paintEvent(QPaintEvent *paintEvent)
{ {
QWidget::paintEvent(paintEvent); QWidget::paintEvent(paintEvent);
QPainter p(this); QPainter p(this);
...@@ -122,54 +122,54 @@ void DetailsWidget::paintEvent(QPaintEvent *paintEvent) ...@@ -122,54 +122,54 @@ void DetailsWidget::paintEvent(QPaintEvent *paintEvent)
d->m_expandedPixmap = cacheBackground(paintArea.size(), true); d->m_expandedPixmap = cacheBackground(paintArea.size(), true);
p.drawPixmap(paintArea, d->m_expandedPixmap); p.drawPixmap(paintArea, d->m_expandedPixmap);
} }
} }
void DetailsWidget::enterEvent(QEvent * event) void DetailsWidget::enterEvent(QEvent * event)
{ {
QWidget::enterEvent(event); QWidget::enterEvent(event);
changeHoverState(true); changeHoverState(true);
} }
void DetailsWidget::leaveEvent(QEvent * event) void DetailsWidget::leaveEvent(QEvent * event)
{ {
QWidget::leaveEvent(event); QWidget::leaveEvent(event);
changeHoverState(false); changeHoverState(false);
} }
void DetailsWidget::setSummaryText(const QString &text) void DetailsWidget::setSummaryText(const QString &text)
{ {
d->m_summaryLabel->setText(text); d->m_summaryLabel->setText(text);
} }
QString DetailsWidget::summaryText() const QString DetailsWidget::summaryText() const
{ {
return d->m_summaryLabel->text(); return d->m_summaryLabel->text();
} }
DetailsWidget::State DetailsWidget::state() const DetailsWidget::State DetailsWidget::state() const
{ {
return d->m_state; return d->m_state;
} }
void DetailsWidget::setState(State state) void DetailsWidget::setState(State state)
{ {
if (state == d->m_state) if (state == d->m_state)
return; return;
d->m_state = state; d->m_state = state;
updateControls(); updateControls();
} }
void DetailsWidget::setExpanded(bool expanded) void DetailsWidget::setExpanded(bool expanded)
{ {
setState(expanded ? Expanded : Collapsed); setState(expanded ? Expanded : Collapsed);
} }
void DetailsWidget::updateControls() void DetailsWidget::updateControls()
{ {
if (d->m_widget) if (d->m_widget)
d->m_widget->setVisible(d->m_state == Expanded || d->m_state == NoSummary); 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_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_detailsButton->setVisible(d->m_state != NoSummary);
d->m_summaryLabel->setVisible(d->m_state != NoSummary); d->m_summaryLabel->setVisible(d->m_state != NoSummary);
{ {
...@@ -184,15 +184,15 @@ void DetailsWidget::updateControls() ...@@ -184,15 +184,15 @@ void DetailsWidget::updateControls()
w = w->parentWidget(); w = w->parentWidget();
} }
} }
} }
QWidget *DetailsWidget::widget() const QWidget *DetailsWidget::widget() const
{ {
return d->m_widget; return d->m_widget;
} }
void DetailsWidget::setWidget(QWidget *widget) void DetailsWidget::setWidget(QWidget *widget)
{ {
if (d->m_widget == widget) if (d->m_widget == widget)
return; return;
...@@ -208,10 +208,10 @@ void DetailsWidget::setWidget(QWidget *widget) ...@@ -208,10 +208,10 @@ void DetailsWidget::setWidget(QWidget *widget)
d->m_grid->addWidget(d->m_widget, 1, 1, 1, 2); d->m_grid->addWidget(d->m_widget, 1, 1, 1, 2);
} }
updateControls(); updateControls();
} }
void DetailsWidget::setToolWidget(QWidget *widget) void DetailsWidget::setToolWidget(QWidget *widget)
{ {
if (d->m_toolWidget == widget) if (d->m_toolWidget == widget)
return; return;
...@@ -227,45 +227,54 @@ void DetailsWidget::setToolWidget(QWidget *widget) ...@@ -227,45 +227,54 @@ void DetailsWidget::setToolWidget(QWidget *widget)
d->m_grid->setRowMinimumHeight(0, d->m_toolWidget->height()); d->m_grid->setRowMinimumHeight(0, d->m_toolWidget->height());
changeHoverState(d->m_hovered); changeHoverState(d->m_hovered);
} }
QWidget *DetailsWidget::toolWidget() const QWidget *DetailsWidget::toolWidget() const
{ {
return d->m_toolWidget; 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 DetailsWidget::cacheBackground(const QSize &size, bool expanded)
{
QPixmap pixmap(size); QPixmap pixmap(size);
pixmap.fill(Qt::transparent);
QPainter p(&pixmap); 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) { 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; 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(); 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); setPalette(pal);
pal.setColor(QPalette::All, QPalette::Window, background);
m_root->setPalette(pal);
// The layout holding the individual panels: // The layout holding the individual panels:
m_layout = new QGridLayout(m_root); m_layout = new QGridLayout(m_root);
m_layout->setColumnMinimumWidth(0, ICON_SIZE + 4); m_layout->setColumnMinimumWidth(0, ICON_SIZE + 4);
...@@ -198,6 +209,9 @@ void PanelsWidget::addPropertiesPanel(IPropertiesPanel *panel) ...@@ -198,6 +209,9 @@ void PanelsWidget::addPropertiesPanel(IPropertiesPanel *panel)
// name: // name:
QLabel *nameLabel = new QLabel(m_root); QLabel *nameLabel = new QLabel(m_root);
nameLabel->setText(panel->displayName()); 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); nameLabel->setContentsMargins(0, ABOVE_HEADING_MARGIN, 0, 0);
QFont f = nameLabel->font(); QFont f = nameLabel->font();
f.setBold(true); f.setBold(true);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment