More muted and modern Toolbar buttons

.. the side bar, bottom bar and related buttons were still
   following a skeuomorphic design that has long since
   fallen into disuse.

.. now have a more muted feel with hover/press colors active
   on mouse events.

.. moved the whatsthis button to the far right since this
   is quite a common placement in other apps.

.. it is noticeable how we use many many different schemes
   for hover/pressed colors across the UI- at some point
   this should be unified.

.. also deprecated the segmentcontrol.
This commit is contained in:
Mark Liversedge
2021-08-24 20:56:31 +01:00
parent 7c944d6100
commit a4d928e4a0
9 changed files with 57 additions and 92 deletions

View File

@@ -26,33 +26,17 @@
static int bigHandle = 23;
static int smallHandle = 18;
// creates an icon in the apple style of gray emboss
QIcon iconFromPNG(QString filename, bool emboss)
// creates an icon with a modern style
QIcon iconFromPNG(QString filename, bool )
{
QImage pngImage;
pngImage.load(filename);
// use muted dark gray color
QImage gray8 = pngImage.convertToFormat(QImage::Format_Indexed8);
gray8.setColor(0, QColor(80,80,80, 170).rgb());
gray8.setColor(0, QColor(127,127,127,127).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!
QImage white = white8.convertToFormat(QImage::Format_ARGB32_Premultiplied);
QImage gray = gray8.convertToFormat(QImage::Format_ARGB32_Premultiplied);
QPainter painter;
painter.begin(&white);
painter.setBackgroundMode(Qt::TransparentMode);
if (emboss) painter.drawImage(0,-1, gray);
else painter.drawImage(0,0, gray);
painter.end();
return QIcon(QPixmap::fromImage(white));
return QIcon(QPixmap::fromImage(gray8));
}
QIcon iconFromPNG(QString filename, QSize size)

View File

@@ -94,7 +94,6 @@
#if !defined(Q_OS_MAC)
#include "QTFullScreen.h" // not mac!
#endif
#include "../qtsolutions/segmentcontrol/qtsegmentcontrol.h"
// SEARCH / FILTER
#include "NamedSearch.h"
@@ -128,6 +127,9 @@ extern ConfigDialog *configdialog_ptr;
extern QString gl_version;
extern double gl_major; // 1.x 2.x 3.x - we insist on 2.x or higher to enable OpenGL
// constants for gui
static int gl_toolheight=28;
MainWindow::MainWindow(const QDir &home)
{
/*----------------------------------------------------------------------
@@ -171,14 +173,6 @@ MainWindow::MainWindow(const QDir &home)
QNetworkProxy::setApplicationProxy(listOfProxies.first());
}
static const QIcon hideIcon(":images/toolbar/main/hideside.png");
static const QIcon rhideIcon(":images/toolbar/main/hiderside.png");
static const QIcon showIcon(":images/toolbar/main/showside.png");
static const QIcon rshowIcon(":images/toolbar/main/showrside.png");
static const QIcon tabIcon(":images/toolbar/main/tab.png");
static const QIcon tileIcon(":images/toolbar/main/tile.png");
static const QIcon fullIcon(":images/toolbar/main/togglefull.png");
#ifndef Q_OS_MAC
fullScreen = new QTFullScreen(this);
#endif
@@ -271,102 +265,85 @@ MainWindow::MainWindow(const QDir &home)
head = new GcToolBar(this);
QStyle *toolStyle = QStyleFactory::create("fusion");
QPalette metal;
metal.setColor(QPalette::Button, QColor(215,215,215));
// get those icons
sidebarIcon = iconFromPNG(":images/mac/sidebar.png", QSize(16*dpiXFactor,16*dpiXFactor));
lowbarIcon = iconFromPNG(":images/mac/lowbar.png", QSize(16*dpiXFactor,16*dpiXFactor));
tabbedIcon = iconFromPNG(":images/mac/tabbed.png", QSize(20*dpiXFactor,20*dpiXFactor));
tiledIcon = iconFromPNG(":images/mac/tiled.png", QSize(20*dpiXFactor,20*dpiXFactor));
sidebarIcon = iconFromPNG(":images/titlebar/sidebar.png");
lowbarIcon = iconFromPNG(":images/titlebar/bottombar.png");
tiledIcon = iconFromPNG(":images/titlebar/tile.png");
backIcon = iconFromPNG(":images/mac/back.png");
whatIcon = iconFromPNG(":images/titlebar/whatsthis.png");
forwardIcon = iconFromPNG(":images/mac/forward.png");
QSize isize(20 *dpiXFactor,20 *dpiYFactor);
QSize isize(16 *dpiXFactor,16 *dpiYFactor);
back = new QPushButton(this);
back->setIcon(backIcon);
back->setFixedHeight(24 *dpiYFactor);
back->setFixedWidth(24 *dpiYFactor);
back->setFixedHeight(gl_toolheight *dpiYFactor);
back->setFixedWidth(gl_toolheight *dpiYFactor);
back->setIconSize(isize);
back->setStyle(toolStyle);
connect(back, SIGNAL(clicked(bool)), this, SIGNAL(backClicked()));
forward = new QPushButton(this);
forward->setIcon(forwardIcon);
forward->setFixedHeight(24 *dpiYFactor);
forward->setFixedWidth(24 *dpiYFactor);
forward->setFixedHeight(gl_toolheight *dpiYFactor);
forward->setFixedWidth(gl_toolheight *dpiYFactor);
forward->setIconSize(isize);
forward->setStyle(toolStyle);
connect(forward, SIGNAL(clicked(bool)), this, SIGNAL(forwardClicked()));
lowbar = new QPushButton(this);
lowbar->setIcon(lowbarIcon);
lowbar->setFixedHeight(24 *dpiYFactor);
lowbar->setFixedHeight(gl_toolheight *dpiYFactor);
lowbar->setFixedWidth(gl_toolheight *dpiYFactor);
lowbar->setIconSize(isize);
lowbar->setStyle(toolStyle);
lowbar->setToolTip(tr("Toggle Compare Pane"));
lowbar->setPalette(metal);
connect(lowbar, SIGNAL(clicked(bool)), this, SLOT(toggleLowbar()));
HelpWhatsThis *helpLowBar = new HelpWhatsThis(lowbar);
lowbar->setWhatsThis(helpLowBar->getWhatsThisText(HelpWhatsThis::ToolBar_ToggleComparePane));
sidelist = new QPushButton(this);
sidelist->setIcon(sidebarIcon);
sidelist->setFixedHeight(24 * dpiYFactor);
sidelist->setFixedHeight(gl_toolheight * dpiYFactor);
sidelist->setFixedWidth(gl_toolheight *dpiYFactor);
sidelist->setIconSize(isize);
sidelist->setStyle(toolStyle);
sidelist->setToolTip(tr("Toggle Sidebar"));
sidelist->setPalette(metal);
connect(sidelist, SIGNAL(clicked(bool)), this, SLOT(toggleSidebar()));
HelpWhatsThis *helpSideBar = new HelpWhatsThis(sidelist);
sidelist->setWhatsThis(helpSideBar->getWhatsThisText(HelpWhatsThis::ToolBar_ToggleSidebar));
styleSelector = new QtSegmentControl(this);
styleSelector->setStyle(toolStyle);
styleSelector->setCount(2);
styleSelector->setSegmentIcon(0, tabbedIcon);
styleSelector->setSegmentIcon(1, tiledIcon);
styleSelector->setSegmentToolTip(0, tr("Tabbed View"));
styleSelector->setSegmentToolTip(1, tr("Tiled View"));
styleSelector->setSelectionBehavior(QtSegmentControl::SelectOne); //wince. spelling. ugh
styleSelector->setFixedHeight(24 * dpiYFactor);
styleSelector->setIconSize(isize);
styleSelector->setPalette(metal);
connect(styleSelector, SIGNAL(segmentSelected(int)), this, SLOT(setStyleFromSegment(int))); //avoid toggle infinitely
tabtile = new QPushButton(this);
tabtile->setIcon(tiledIcon);
tabtile->setFixedHeight(gl_toolheight *dpiYFactor);
tabtile->setFixedWidth(gl_toolheight *dpiYFactor);
tabtile->setIconSize(isize);
lowbar->setStyle(toolStyle);
tabtile->setToolTip(tr("Toggle Tab/Tile"));
connect(tabtile, SIGNAL(clicked(bool)), this, SLOT(toggleStyle()));
// What's this button
whatsthis = new QPushButton(this);
whatsthis->setIcon(myHelper->icon());
whatsthis->setFixedHeight(24 * dpiYFactor);
whatsthis->setIcon(whatIcon);
whatsthis->setFixedHeight(gl_toolheight * dpiYFactor);
whatsthis->setFixedWidth(gl_toolheight * dpiYFactor);
whatsthis->setIconSize(isize);
whatsthis->setStyle(toolStyle);
whatsthis->setToolTip(tr("What's This?"));
whatsthis->setPalette(metal);
connect(whatsthis, SIGNAL(clicked(bool)), this, SLOT(enterWhatsThisMode()));
#if defined(WIN32) || defined (Q_OS_LINUX)
// are we in hidpi mode? if so undo global defaults for toolbar pushbuttons
if (dpiXFactor > 1) {
QString nopad = QString("QPushButton { padding-left: 0px; padding-right: 0px; "
" padding-top: 0px; padding-bottom: 0px; }");
sidelist->setStyleSheet(nopad);
lowbar->setStyleSheet(nopad);
whatsthis->setStyleSheet(nopad);
}
#endif
// add a search box on far right, but with a little space too
perspectiveSelector = new QComboBox(this);
perspectiveSelector->setStyle(toolStyle);
perspectiveSelector->setFixedWidth(200 * dpiXFactor);
perspectiveSelector->setFixedHeight(28 * dpiYFactor);
perspectiveSelector->setFixedHeight(gl_toolheight * dpiYFactor);
connect(perspectiveSelector, SIGNAL(currentIndexChanged(int)), this, SLOT(perspectiveSelected(int)));
searchBox = new SearchFilterBox(this,context,false);
searchBox->setStyle(toolStyle);
searchBox->setFixedWidth(400 * dpiXFactor);
searchBox->setFixedHeight(28 * dpiYFactor);
searchBox->setFixedHeight(gl_toolheight * dpiYFactor);
QWidget *space = new QWidget(this);
space->setAutoFillBackground(false);
@@ -379,8 +356,7 @@ MainWindow::MainWindow(const QDir &home)
head->addStretch();
head->addWidget(sidelist);
head->addWidget(lowbar);
head->addWidget(styleSelector);
head->addWidget(whatsthis);
head->addWidget(tabtile);
#ifdef Q_OS_MAC // no menu on mac, so lets have some breathing space
head->setFixedHeight(searchBox->height() + (20 *dpiXFactor * 2));
#else
@@ -399,6 +375,10 @@ MainWindow::MainWindow(const QDir &home)
space = new Spacer(this);
space->setFixedWidth(5 *dpiYFactor);
head->addWidget(space);
head->addWidget(whatsthis);
space = new Spacer(this);
space->setFixedWidth(5 *dpiYFactor);
head->addWidget(space);
#ifdef Q_OS_LINUX
// check opengl is available with version 2 or higher
@@ -1061,13 +1041,6 @@ MainWindow::addChartFromCloudDB()
}
#endif
void
MainWindow::setStyleFromSegment(int segment)
{
currentAthleteTab->setTiled(segment);
styleAction->setChecked(!segment);
}
void
MainWindow::toggleStyle()
{
@@ -1395,8 +1368,8 @@ MainWindow::setToolButtons()
styleAction->setChecked(select);
showhideLowbar->setChecked(lowselected);
if (styleSelector->isSegmentSelected(select) == false)
styleSelector->setSegmentSelected(select, true);
//if (styleSelector->isSegmentSelected(select) == false)
//styleSelector->setSegmentSelected(select, true);
int index = currentAthleteTab->currentView();
@@ -2521,9 +2494,19 @@ MainWindow::configChanged(qint32)
"QComboBox::item { background: %1; color: %2; }"
"QComboBox::item::selected { background: %3; color: %1; }").arg(GColor(CTOOLBAR).name()).arg(GCColor::invertColor(GColor(CTOOLBAR)).name()).arg(selected.name()));
QString buttonstyle = QString("QPushButton { border: none; background-color: %1; }").arg(CTOOLBAR);
QString buttonstyle = QString("QPushButton { border: none; border-radius: %2px; background-color: %1; "
"padding-left: 0px; padding-right: 0px; "
"padding-top: 0px; padding-bottom: 0px; }"
"QPushButton:hover { background-color: rgba(127,127,127,180); }"
"QPushButton:hover:pressed { background-color: rgba(127,127,127,127); }"
).arg(GColor(CTOOLBAR).name()).arg(3 * dpiXFactor);
back->setStyleSheet(buttonstyle);
forward->setStyleSheet(buttonstyle);
sidelist->setStyleSheet(buttonstyle);
tabtile->setStyleSheet(buttonstyle);
lowbar->setStyleSheet(buttonstyle);
whatsthis->setStyleSheet(buttonstyle);
// All platforms
QPalette tabbarPalette;

View File

@@ -213,7 +213,6 @@ class MainWindow : public QMainWindow
void resetWindowLayout();
void toggleStyle();
void setToolButtons(); // set toolbar buttons to match tabview
void setStyleFromSegment(int); // special case for linux/win qtsegmentcontrol toggline
void toggleLowbar();
void showLowbar(bool want);
void enterWhatsThisMode();
@@ -303,13 +302,12 @@ class MainWindow : public QMainWindow
SearchFilterBox *searchBox;
// Not on Mac so use other types
QPushButton *sidelist, *lowbar, *whatsthis;
QPushButton *sidelist, *lowbar, *tabtile, *whatsthis;
QPushButton *back, *forward;
QtSegmentControl *styleSelector;
GcToolBar *head;
// the icons
QIcon backIcon, forwardIcon, sidebarIcon, lowbarIcon, tabbedIcon, tiledIcon;
QIcon backIcon, forwardIcon, sidebarIcon, lowbarIcon, tiledIcon, whatIcon;
// tab bar (that supports swtitching on drag and drop)
DragBar *tabbar;

View File

@@ -17,6 +17,10 @@
<file>images/devices/kickr.png</file>
<file>images/devices/fortius.png</file>
<file>images/devices/quarqd.png</file>
<file>images/titlebar/sidebar.png</file>
<file>images/titlebar/bottombar.png</file>
<file>images/titlebar/whatsthis.png</file>
<file>images/titlebar/tile.png</file>
<file>images/toolbar/main/togglefull.png</file>
<file>images/toolbar/main/hideside.png</file>
<file>images/toolbar/main/hiderside.png</file>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

@@ -183,10 +183,6 @@ macx {
SOURCES += Train/VideoWindow.cpp
}
#### these are no longer non-mac only
HEADERS += ../contrib/qtsolutions/segmentcontrol/qtsegmentcontrol.h
SOURCES += ../contrib/qtsolutions/segmentcontrol/qtsegmentcontrol.cpp
# X11
if (defined(GC_WANT_X11)) {
LIBS += -lX11