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

Redesigned the project settings page

I redesigned the gradient boxes for a
more subtle an professional look.
parent f593b0d6
......@@ -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) {
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);
pixmap.fill(Qt::transparent);
QPainter p(&pixmap);
p.setBrush(lg);
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, QColor(255, 255, 255, 0));
lg.setColorAt(1, QColor(255, 255, 255, 50));
}
p.drawRect(0, 0, size.width(), size.height());
p.setPen(QPen(palette().color(QPalette::Mid)));
p.drawLine(0, size.height() - 1, 0, 0);
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.setBrush(lg);
p.setPen(QColor(255,255,255,140));
p.drawRoundedRect(1, 1, size.width()-3, size.height()-3, 1, 1);
p.setPen(QPen(QColor(0, 0, 0, 40)));
p.drawLine(0, 1, 0, size.height() - 2);
if(checked)
p.drawLine(1, size.height() - 1, size.width() - 1, size.height() - 1);
p.setPen(palette().color(QPalette::Text));
// TODO: This should actually use some icons instead...
if (checked) {
p.drawText(0, 0, size.width(), size.height(), Qt::AlignCenter, tr("Less"));
} else {
p.drawText(0, 0, size.width(), size.height(), Qt::AlignCenter, tr("More"));
}
QString text = tr("Details");
QRect textRect = p.fontMetrics().boundingRect(text);
textRect.setWidth(textRect.width() + 15);
textRect.moveCenter(rect().center());
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;
}
......@@ -40,232 +40,241 @@
namespace Utils {
static const int MARGIN=8;
// This widget is using a grid layout and places the items
// in the following way:
//
// +------------+-------------------------+---------------+
// + toolWidget | summaryLabel | detailsButton |
// +------------+-------------------------+---------------+
// | | widget |
// +------------+-------------------------+---------------+
struct DetailsWidgetPrivate {
DetailsWidgetPrivate();
DetailsButton *m_detailsButton;
QGridLayout *m_grid;
QLabel *m_summaryLabel;
QWidget *m_toolWidget;
QWidget *m_widget;
QPixmap m_collapsedPixmap;
QPixmap m_expandedPixmap;
DetailsWidget::State m_state;
bool m_hovered;
};
DetailsWidgetPrivate::DetailsWidgetPrivate() :
m_detailsButton(new DetailsButton),
m_grid(new QGridLayout),
m_summaryLabel(new QLabel),
m_toolWidget(0),
m_widget(0),
m_state(DetailsWidget::Collapsed),
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);
static const int MARGIN=8;
// This widget is using a grid layout and places the items
// in the following way:
//
// +------------+-------------------------+---------------+
// + toolWidget | summaryLabel | detailsButton |
// +------------+-------------------------+---------------+
// | | widget |
// +------------+-------------------------+---------------+
struct DetailsWidgetPrivate {
DetailsWidgetPrivate();
DetailsButton *m_detailsButton;
QGridLayout *m_grid;
QLabel *m_summaryLabel;
QWidget *m_toolWidget;
QWidget *m_widget;
QPixmap m_collapsedPixmap;
QPixmap m_expandedPixmap;
DetailsWidget::State m_state;
bool m_hovered;
};
DetailsWidgetPrivate::DetailsWidgetPrivate() :
m_detailsButton(new DetailsButton),
m_grid(new QGridLayout),
m_summaryLabel(new QLabel),
m_toolWidget(0),
m_widget(0),
m_state(DetailsWidget::Collapsed),
m_hovered(false)
{
}
}
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);
DetailsWidget::DetailsWidget(QWidget *parent) :
QWidget(parent),
d(new DetailsWidgetPrivate)
{
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_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);
}
}
}
QWidget *DetailsWidget::widget() const
{
return d->m_widget;
}
void DetailsWidget::enterEvent(QEvent * event)
{
QWidget::enterEvent(event);
changeHoverState(true);
}
void DetailsWidget::setWidget(QWidget *widget)
{
if (d->m_widget == widget)
return;
void DetailsWidget::leaveEvent(QEvent * event)
{
QWidget::leaveEvent(event);
changeHoverState(false);
}
if (d->m_widget) {
d->m_grid->removeWidget(d->m_widget);
delete d->m_widget;
void DetailsWidget::setSummaryText(const QString &text)
{
d->m_summaryLabel->setText(text);
}
d->m_widget = widget;
QString DetailsWidget::summaryText() const
{
return d->m_summaryLabel->text();
}
if (d->m_widget) {
d->m_widget->setContentsMargins(MARGIN, MARGIN, MARGIN, MARGIN);
d->m_grid->addWidget(d->m_widget, 1, 1, 1, 2);
DetailsWidget::State DetailsWidget::state() const
{
return d->m_state;
}
updateControls();
}
void DetailsWidget::setToolWidget(QWidget *widget)
{
if (d->m_toolWidget == widget)
return;
void DetailsWidget::setState(State state)
{
if (state == d->m_state)
return;
d->m_state = state;
updateControls();
}
d->m_toolWidget = widget;
void DetailsWidget::setExpanded(bool expanded)
{
setState(expanded ? Expanded : Collapsed);
}
if (!d->m_toolWidget)
return;
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();
}
}
}
d->m_toolWidget->adjustSize();
d->m_grid->addWidget(d->m_toolWidget, 0, 0, 1, 1, Qt::AlignCenter);
QWidget *DetailsWidget::widget() const
{
return d->m_widget;
}
d->m_grid->setColumnMinimumWidth(0, d->m_toolWidget->width());
d->m_grid->setRowMinimumHeight(0, d->m_toolWidget->height());
void DetailsWidget::setWidget(QWidget *widget)
{
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
{
return d->m_toolWidget;
}
d->m_widget = widget;
QPixmap DetailsWidget::cacheBackground(const QSize &size, bool expanded)
{
QLinearGradient lg;
lg.setCoordinateMode(QGradient::ObjectBoundingMode);
lg.setFinalStop(0, 1);
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;
lg.setColorAt(0, palette().color(QPalette::Midlight));
lg.setColorAt(1, palette().color(QPalette::Button));
d->m_toolWidget = widget;
QPixmap pixmap(size);
QPainter p(&pixmap);
p.setBrush(lg);
p.setPen(QPen(palette().color(QPalette::Mid)));
if (!d->m_toolWidget)
return;
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) {
p.drawLine(0, d->m_widget->geometry().top() - 1,
d->m_summaryLabel->width(), d->m_widget->geometry().top() - 1);
d->m_grid->setColumnMinimumWidth(0, d->m_toolWidget->width());
d->m_grid->setRowMinimumHeight(0, d->m_toolWidget->height());
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)
{
if (!d->m_toolWidget)
return;
void DetailsWidget::changeHoverState(bool hovered)
{
if (!d->m_toolWidget)
return;
d->m_toolWidget->setVisible(hovered);
d->m_toolWidget->setVisible(hovered);
d->m_hovered = hovered;
}
d->m_hovered = hovered;
}
} // namespace Utils
......@@ -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);
......
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