Window Style Part 2 of 3

.. apply Flat styling across all the widget painting

.. only use WHITE as the flat color for now, in part 3
   we will look at user customisation and updating the
   toolbar and sidebar buttons to also be flat.
This commit is contained in:
Mark Liversedge
2014-06-01 13:18:30 +01:00
parent 18ee7c8841
commit 5c479e6539
14 changed files with 145 additions and 82 deletions

View File

@@ -109,10 +109,6 @@ ChartBar::ChartBar(Context *context) : QWidget(context->mainWindow), context(con
buttonFont.setPointSize(10);
buttonFont.setWeight(QFont::Black);
// linear gradients
active = GCColor::linearGradient(23, true);
inactive = GCColor::linearGradient(23, false);
signalMapper = new QSignalMapper(this); // maps each option
connect(signalMapper, SIGNAL(mapped(int)), this, SLOT(clicked(int)));
@@ -345,18 +341,24 @@ ChartBar::paintBackground(QPaintEvent *)
painter.save();
QRect all(0,0,width(),height());
// linear gradients
QLinearGradient active = GCColor::linearGradient(23, true);
QLinearGradient inactive = GCColor::linearGradient(23, false);
// fill with a linear gradient
painter.setPen(Qt::NoPen);
painter.fillRect(all, QColor(Qt::white));
painter.fillRect(all, isActiveWindow() ? active : inactive);
QPen black(QColor(100,100,100,200));
painter.setPen(black);
painter.drawLine(0,height()-1, width()-1, height()-1);
if (!GCColor::isFlat()) {
QPen black(QColor(100,100,100,200));
painter.setPen(black);
painter.drawLine(0,height()-1, width()-1, height()-1);
QPen gray(QColor(230,230,230));
painter.setPen(gray);
painter.drawLine(0,0, width()-1, 0);
QPen gray(QColor(230,230,230));
painter.setPen(gray);
painter.drawLine(0,0, width()-1, 0);
}
painter.restore();
}
@@ -379,18 +381,24 @@ ButtonBar::paintBackground(QPaintEvent *)
painter.save();
QRect all(0,0,width(),height());
// linear gradients
QLinearGradient active = GCColor::linearGradient(23, true);
QLinearGradient inactive = GCColor::linearGradient(23, false);
// fill with a linear gradient
painter.setPen(Qt::NoPen);
painter.fillRect(all, QColor(Qt::white));
painter.fillRect(all, isActiveWindow() ? chartbar->active : chartbar->inactive);
painter.fillRect(all, isActiveWindow() ? active : inactive);
QPen black(QColor(100,100,100,200));
painter.setPen(black);
painter.drawLine(0,height()-1, width()-1, height()-1);
if (!GCColor::isFlat()) {
QPen black(QColor(100,100,100,200));
painter.setPen(black);
painter.drawLine(0,height()-1, width()-1, height()-1);
QPen gray(QColor(230,230,230));
painter.setPen(gray);
painter.drawLine(0,0, width()-1, 0);
QPen gray(QColor(230,230,230));
painter.setPen(gray);
painter.drawLine(0,0, width()-1, 0);
}
painter.restore();
}

View File

@@ -46,8 +46,6 @@ public:
ChartBar(Context *context);
~ChartBar();
// reused by button bar
QLinearGradient active, inactive;
public slots:

View File

@@ -351,6 +351,12 @@ GCColor::stylesheet()
"QTreeView::item:hover { color: black; background: lightGray; }").arg(bgColor.name()).arg(fgColor.name());
}
bool
GCColor::isFlat()
{
return (appsettings->value(NULL, GC_CHROME, "Mac").toString() == "Flat");
}
// setup a linearGradient for the metallic backgrounds used on things like
// the toolbar, sidebar handles and so on
QLinearGradient
@@ -358,37 +364,53 @@ GCColor::linearGradient(int size, bool active, bool alternate)
{
QLinearGradient returning;
int shade, inshade;
if (!alternate) {
#ifdef Q_OS_MAC
shade = 178;
inshade = 225;
#else
shade = 200;
inshade = 250;
#endif
} else {
#ifdef Q_OS_MAC
inshade = 225;
shade = 210;
#else
inshade = 250;
shade = 225;
#endif
}
QString chrome = appsettings->value(NULL, GC_CHROME, "Mac").toString();
if (chrome == "Mac") {
int shade, inshade;
if (!alternate) {
#ifdef Q_OS_MAC
shade = 178;
inshade = 225;
#else
shade = 200;
inshade = 250;
#endif
} else {
#ifdef Q_OS_MAC
inshade = 225;
shade = 210;
#else
inshade = 250;
shade = 225;
#endif
}
// metallic
if (active) {
returning = QLinearGradient(0, 0, 0, size);
returning.setColorAt(0.0, QColor(shade,shade,shade, 100));
returning.setColorAt(0.5, QColor(shade,shade,shade, 180));
returning.setColorAt(1.0, QColor(shade,shade,shade, 255));
returning.setSpread(QGradient::PadSpread);
} else {
returning = QLinearGradient(0, 0, 0, size);
returning.setColorAt(0.0, QColor(inshade,inshade,inshade, 100));
returning.setColorAt(0.5, QColor(inshade,inshade,inshade, 180));
returning.setColorAt(1.0, QColor(inshade,inshade,inshade, 255));
returning.setSpread(QGradient::PadSpread);
}
if (active) {
returning = QLinearGradient(0, 0, 0, size);
returning.setColorAt(0.0, QColor(shade,shade,shade, 100));
returning.setColorAt(0.5, QColor(shade,shade,shade, 180));
returning.setColorAt(1.0, QColor(shade,shade,shade, 255));
returning.setSpread(QGradient::PadSpread);
} else {
// flat is just white for now, fix in part 3
QColor color = QColor(255, 255, 255);
// just blocks of color
returning = QLinearGradient(0, 0, 0, size);
returning.setColorAt(0.0, QColor(inshade,inshade,inshade, 100));
returning.setColorAt(0.5, QColor(inshade,inshade,inshade, 180));
returning.setColorAt(1.0, QColor(inshade,inshade,inshade, 255));
returning.setSpread(QGradient::PadSpread);
returning.setColorAt(0.0, color);
returning.setColorAt(1.0, color);
}
return returning;

View File

@@ -108,6 +108,7 @@ class GCColor : public QObject
static Themes &themes();
// for styling things with current preferences
static bool isFlat();
static QLinearGradient linearGradient(int size, bool active, bool alternate=false);
static QString css();
static QPalette palette();

View File

@@ -191,7 +191,7 @@ GcLabel::paintEvent(QPaintEvent *)
if (text() != "<" && text() != ">") {
painter.setFont(this->font());
if (xoff || yoff) {
if (!GCColor::isFlat() && (xoff || yoff)) {
// draw text in white behind...
QRectF off(xoff,yoff,width(),height());

View File

@@ -89,10 +89,6 @@ GcOverlayWidget::GcOverlayWidget(Context *context, QWidget *parent) : QWidget(pa
stack->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
mlayout->addWidget(stack);
// linear gradients
active = GCColor::linearGradient(23, true);
inactive = GCColor::linearGradient(23, false);
// trap resize / mouse events
m_infocus = true;
m_showMenu = false;
@@ -195,6 +191,10 @@ GcOverlayWidget::paintBackground(QPaintEvent *)
painter.setPen(Qt::NoPen);
painter.fillRect(all, QColor(Qt::gray));
// linear gradients
QLinearGradient active = GCColor::linearGradient(23, true);
QLinearGradient inactive = GCColor::linearGradient(23, false);
// title
QRect title(0,0,width(),23);
painter.fillRect(title, QColor(Qt::white));

View File

@@ -67,9 +67,6 @@ public:
// set arrow widgets if needed
void setCursors();
// reused by button bar
QLinearGradient active, inactive;
public slots:
// events

View File

@@ -350,8 +350,12 @@ GcScopeButton::paintEvent(QPaintEvent *)
}
// now paint the text
painter.setPen((underMouse() || checked) ? QColor(50,50,50) : Qt::white);
painter.drawText(off, text, Qt::AlignVCenter | Qt::AlignCenter);
// don't do all that offset nonsense for flat style
bool flat = (appsettings->value(this, GC_CHROME, "Mac").toString() == "Flat");
if (!flat) {
painter.setPen((underMouse() || checked) ? QColor(50,50,50) : Qt::white);
painter.drawText(off, text, Qt::AlignVCenter | Qt::AlignCenter);
}
painter.setPen((underMouse() || checked) ? QColor(240,240,240) : QColor(30,30,30,200));
painter.drawText(body, text, Qt::AlignVCenter | Qt::AlignCenter);
painter.restore();

View File

@@ -28,8 +28,11 @@ QIcon iconFromPNG(QString filename, bool emboss)
// use muted dark gray color
QImage gray8 = pngImage.convertToFormat(QImage::Format_Indexed8);
QImage white8 = pngImage.convertToFormat(QImage::Format_Indexed8);
gray8.setColor(0, QColor(80,80,80, 170).rgb());
if (GCColor::isFlat()) return QIcon(QPixmap::fromImage(gray8));
QImage white8 = pngImage.convertToFormat(QImage::Format_Indexed8);
white8.setColor(0, QColor(255,255,255, 255).rgb());
// now convert to a format we can paint with!
@@ -43,8 +46,7 @@ QIcon iconFromPNG(QString filename, bool emboss)
else painter.drawImage(0,0, gray);
painter.end();
QIcon icon(QPixmap::fromImage(white));
return icon;
return QIcon(QPixmap::fromImage(white));
}
//
@@ -282,9 +284,6 @@ GcSplitterHandle::init(QString title, Qt::Orientation orientation,
titleLabel = new GcLabel(title, this);
titleLabel->setXOff(0);
active = GCColor::linearGradient(metal ? 23 : 18, true, !metal);
inactive = GCColor::linearGradient(metal ? 23 : 18, false, !metal);
QFont font;
#ifdef Q_OS_MAC
titleLabel->setFixedHeight(16);
@@ -365,15 +364,21 @@ GcSplitterHandle::paintBackground(QPaintEvent *)
// fill with a linear gradient
painter.setPen(Qt::NoPen);
painter.fillRect(all, QColor(Qt::white));
QLinearGradient active = GCColor::linearGradient(metal ? 23 : 18, true, !metal);
QLinearGradient inactive = GCColor::linearGradient(metal ? 23 : 18, false, !metal);
painter.fillRect(all, isActiveWindow() ? active : inactive);
QPen black(QColor(100,100,100,200));
painter.setPen(black);
painter.drawLine(0,height()-1, width()-1, height()-1);
if (!GCColor::isFlat()) {
QPen black(QColor(100,100,100,200));
painter.setPen(black);
painter.drawLine(0,height()-1, width()-1, height()-1);
QPen gray(QColor(230,230,230));
painter.setPen(gray);
painter.drawLine(0,0, width()-1, 0);
QPen gray(QColor(230,230,230));
painter.setPen(gray);
painter.drawLine(0,0, width()-1, 0);
}
painter.restore();
}
@@ -390,9 +395,6 @@ GcSplitterControl::GcSplitterControl(QWidget *parent) : QToolBar(parent)
setToolButtonStyle(Qt::ToolButtonIconOnly);
setAutoFillBackground(false);
active = GCColor::linearGradient(20, true);
inactive = GCColor::linearGradient(20, false);
QWidget *spacer = new QWidget(this);
spacer->setAutoFillBackground(false);
spacer->setSizePolicy(QSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding));
@@ -415,13 +417,18 @@ GcSplitterControl::paintBackground(QPaintEvent *)
// setup a painter and the area to paint
QPainter painter(this);
QLinearGradient active = GCColor::linearGradient(20, true);
QLinearGradient inactive = GCColor::linearGradient(20, false);
// fill with a linear gradient
painter.setPen(Qt::NoPen);
painter.fillRect(all, isActiveWindow() ? active : inactive);
QPen gray(QColor(230,230,230));
painter.setPen(gray);
painter.drawLine(0,0, width()-1, 0);
if (!GCColor::isFlat()) {
QPen gray(QColor(230,230,230));
painter.setPen(gray);
painter.drawLine(0,0, width()-1, 0);
}
}
void

View File

@@ -124,7 +124,6 @@ private:
QString _title;
int fullHeight;
QLinearGradient active, inactive;
bool metal;
};
@@ -141,7 +140,6 @@ protected:
private:
void paintBackground(QPaintEvent *);
QLinearGradient active, inactive;
};

View File

@@ -72,9 +72,11 @@ GcToolBar::paintBackground(QPaintEvent *)
painter.setPen(black);
painter.drawLine(0,height()-1, width()-1, height()-1);
#ifndef WIN32 // not on windows clashes with menu
QPen gray(QColor(230,230,230));
painter.setPen(gray);
painter.drawLine(0,0, width()-1, 0);
if (!GCColor::isFlat()) {
#ifndef Q_OS_WIN32 // never on windows.
QPen gray(QColor(230,230,230));
painter.setPen(gray);
painter.drawLine(0,0, width()-1, 0);
#endif
}
}

View File

@@ -1117,6 +1117,15 @@ ColorsPage::ColorsPage(QWidget *parent) : QWidget(parent)
{
QVBoxLayout *mainLayout = new QVBoxLayout(this);
// chrome style -- metal or flat currently offered
QLabel *chromeLabel = new QLabel(tr("Styling" ));
chromeCombo = new QComboBox(this);
chromeCombo->addItem(tr("Metallic (Mac)"));
chromeCombo->addItem(tr("Flat Color (Windows)"));
QString chrome = appsettings->value(this, GC_CHROME, "Mac").toString();
if (chrome == "Mac") chromeCombo->setCurrentIndex(0);
if (chrome == "Flat") chromeCombo->setCurrentIndex(1);
themes = new QTreeWidget;
themes->headerItem()->setText(0, tr("Swatch"));
themes->headerItem()->setText(1, tr("Name"));
@@ -1257,7 +1266,8 @@ ColorsPage::ColorsPage(QWidget *parent) : QWidget(parent)
grid->addWidget(chartlabelsSize, 3,2, Qt::AlignVCenter|Qt::AlignLeft);
grid->addWidget(calendarSize, 4,2, Qt::AlignVCenter|Qt::AlignLeft);
grid->addWidget(applyTheme, 4,4);
grid->addWidget(chromeLabel, 5, 0);
grid->addWidget(chromeCombo, 5, 1, Qt::AlignVCenter|Qt::AlignLeft);
grid->setColumnStretch(0,1);
grid->setColumnStretch(1,4);
@@ -1270,6 +1280,7 @@ ColorsPage::ColorsPage(QWidget *parent) : QWidget(parent)
colorTab = new QTabWidget(this);
colorTab->addTab(themes, tr("Theme"));
colorTab->addTab(colors, tr("Colors"));
colorTab->setCornerWidget(applyTheme);
mainLayout->addWidget(colorTab);
@@ -1403,6 +1414,17 @@ ColorsPage::applyThemeClicked()
void
ColorsPage::saveClicked()
{
// chrome style only has 2 types for now
switch(chromeCombo->currentIndex()) {
default:
case 0:
appsettings->setValue(GC_CHROME, "Mac");
break;
case 1:
appsettings->setValue(GC_CHROME, "Flat");
break;
}
appsettings->setValue(GC_LINEWIDTH, lineWidth->value());
appsettings->setValue(GC_ANTIALIAS, antiAliased->isChecked());
#ifndef Q_OS_MAC

View File

@@ -426,6 +426,9 @@ class ColorsPage : public QWidget
#endif
QDoubleSpinBox *lineWidth;
// theme
QComboBox *chromeCombo;
// Fonts
QFontComboBox *def,
*titles,

View File

@@ -85,6 +85,7 @@
#define GC_BLANK_DIARY "blank/diary"
#define GC_LINEWIDTH "linewidth"
#define GC_ANTIALIAS "antialias"
#define GC_CHROME "chrome" // mac or flat only so far
#define GC_RIDEBG "rideBG"
#define GC_RIDESCROLL "rideScroll"
#define GC_RIDEHEAD "rideHead"