Commit 543f0b9c authored by Huon Imberger's avatar Huon Imberger Committed by Henrik Fehlauer

Improve selection and hover colors in the thumbnail bars

Summary:
The visual feedback when hovering, especially in the fullscreen thumbnail bar,
was too weak. I've fixed this by improving the hover background color, and
applying a stylesheet to the fullscreen thumbnail bar.

Before:
{F5713490, loop, autoplay}
{F5713491, loop, autoplay}

After:
{F5717013, loop, autoplay}
{F5717011, loop, autoplay}

Test Plan:
Thumbnail bar colors in both `View` mode and fullscreen `View` should provide
good visual feedback (hover and select).

Reviewers: #gwenview, rkflx

Reviewed By: #gwenview, rkflx

Subscribers: rkflx, ngraham

Differential Revision: https://phabricator.kde.org/D10564
parent 447829b2
......@@ -47,6 +47,8 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Cambridge, MA 02110-1301, USA
#include <lib/thumbnailview/thumbnailbarview.h>
#include <lib/shadowfilter.h>
#include <lib/slideshow.h>
#include <gvcore.h>
#include <lib/stylesheetutils.h>
namespace Gwenview
{
......@@ -99,9 +101,10 @@ private:
};
FullScreenContent::FullScreenContent(QObject* parent)
FullScreenContent::FullScreenContent(QObject* parent, GvCore* gvCore)
: QObject(parent)
{
mGvCore = gvCore;
mViewPageVisible = false;
}
......@@ -461,6 +464,7 @@ void FullScreenContent::setFullScreenMode(bool fullScreenMode)
{
Q_UNUSED(fullScreenMode);
updateContainerAppearance();
setupThumbnailBarStyleSheet();
}
void FullScreenContent::setDistractionFreeMode(bool distractionFreeMode)
......@@ -489,4 +493,40 @@ void FullScreenContent::slotViewModeActionToggled(bool value)
updateContainerAppearance();
}
void FullScreenContent::setupThumbnailBarStyleSheet()
{
const QPalette pal = mGvCore->palette(GvCore::NormalPalette);
const QPalette fsPal = mGvCore->palette(GvCore::FullScreenPalette);
QColor bgColor = fsPal.color(QPalette::Normal, QPalette::Base);
QColor bgSelColor = pal.color(QPalette::Normal, QPalette::Highlight);
QColor bgHovColor = pal.color(QPalette::Normal, QPalette::Highlight);
// Darken the select color a little to suit dark theme of fullscreen mode
bgSelColor.setHsv(bgSelColor.hue(), bgSelColor.saturation(), (bgSelColor.value() * 0.8));
// Calculate hover color based on background color in case it changes (matches ViewMainPage thumbnail bar)
bgHovColor.setHsv(bgHovColor.hue(), (bgHovColor.saturation() / 2), ((bgHovColor.value() + bgColor.value()) / 2));
QString genCss =
"QListView {"
" background-color: %1;"
"}";
genCss = genCss.arg(StyleSheetUtils::rgba(bgColor));
QString itemSelCss =
"QListView::item:selected {"
" background-color: %1;"
"}";
itemSelCss = itemSelCss.arg(StyleSheetUtils::rgba(bgSelColor));
QString itemHovCss =
"QListView::item:hover:!selected {"
" background-color: %1;"
"}";
itemHovCss = itemHovCss.arg(StyleSheetUtils::rgba(bgHovColor));
QString css = genCss + itemSelCss + itemHovCss;
mThumbnailBar->setStyleSheet(css);
}
} // namespace
......@@ -44,7 +44,7 @@ class FullScreenBar;
class FullScreenToolBar;
class ShadowFilter;
class SlideShow;
class GvCore;
class ThumbnailBarView;
......@@ -66,7 +66,7 @@ class FullScreenContent : public QObject
{
Q_OBJECT
public:
FullScreenContent(QObject* parent);
FullScreenContent(QObject* parent, GvCore* gvCore);
void init(KActionCollection*, QWidget* autoHideParentWidget, SlideShow*);
......@@ -110,12 +110,14 @@ private:
QPointer<ImageMetaInfoDialog> mImageMetaInfoDialog;
QPointer<FullScreenConfigWidget> mConfigWidget;
QAction * mOptionsAction;
GvCore* mGvCore;
bool mViewPageVisible;
void createOptionsAction();
void updateContainerAppearance();
void updateLayout();
void setupThumbnailBarStyleSheet();
};
} // namespace
......
......@@ -221,7 +221,7 @@ struct MainWindow::Private
void setupWidgets()
{
mFullScreenContent = new FullScreenContent(q);
mFullScreenContent = new FullScreenContent(q, mGvCore);
connect(mContextManager, SIGNAL(currentUrlChanged(QUrl)), mFullScreenContent, SLOT(setCurrentUrl(QUrl)));
mCentralSplitter = new Splitter(Qt::Horizontal, q);
......
......@@ -59,6 +59,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
#include <lib/thumbnailview/thumbnailbarview.h>
#include <lib/zoomwidget.h>
#include <lib/zoommode.h>
#include <lib/stylesheetutils.h>
namespace Gwenview
{
......@@ -74,36 +75,6 @@ namespace Gwenview
const int ViewMainPage::MaxViewCount = 6;
static QString rgba(const QColor &color)
{
return QString::fromLocal8Bit("rgba(%1, %2, %3, %4)")
.arg(color.red())
.arg(color.green())
.arg(color.blue())
.arg(color.alpha());
}
static QString gradient(Qt::Orientation orientation, const QColor &color, int value)
{
int x2, y2;
if (orientation == Qt::Horizontal) {
x2 = 0;
y2 = 1;
} else {
x2 = 1;
y2 = 0;
}
QString grad =
"qlineargradient(x1:0, y1:0, x2:%1, y2:%2,"
"stop:0 %3, stop: 1 %4)";
return grad
.arg(x2)
.arg(y2)
.arg(rgba(PaintUtils::adjustedHsv(color, 0, 0, qMin(255 - color.value(), value / 2))))
.arg(rgba(PaintUtils::adjustedHsv(color, 0, 0, -qMin(color.value(), value / 2))))
;
}
/*
* Layout of mThumbnailSplitter is:
*
......@@ -181,24 +152,28 @@ struct ViewMainPagePrivate
Qt::Orientation orientation = mThumbnailBar->orientation();
QColor bgColor = pal.color(QPalette::Normal, QPalette::Base);
QColor bgSelColor = pal.color(QPalette::Normal, QPalette::Highlight);
QColor bgHovColor = pal.color(QPalette::Normal, QPalette::Highlight);
// Avoid dark and bright colors
bgColor.setHsv(bgColor.hue(), bgColor.saturation(), (127 + 3 * bgColor.value()) / 4);
// Hover uses lighter/faded version of select color. Combine with bgColor to adapt to different backgrounds
bgHovColor.setHsv(bgHovColor.hue(), (bgHovColor.saturation() / 2), ((bgHovColor.value() + bgColor.value()) / 2));
QColor leftBorderColor = PaintUtils::adjustedHsv(bgColor, 0, 0, qMin(20, 255 - bgColor.value()));
QColor rightBorderColor = PaintUtils::adjustedHsv(bgColor, 0, 0, -qMin(40, bgColor.value()));
QColor borderSelColor = PaintUtils::adjustedHsv(bgSelColor, 0, 0, -qMin(60, bgSelColor.value()));
QString itemCss =
"QListView::item:!hover {"
"QListView::item {"
" background-color: %1;"
" border-left: 1px solid %2;"
" border-right: 1px solid %3;"
"}";
itemCss = itemCss.arg(
gradient(orientation, bgColor, 46),
gradient(orientation, leftBorderColor, 36),
gradient(orientation, rightBorderColor, 26));
StyleSheetUtils::gradient(orientation, bgColor, 46),
StyleSheetUtils::gradient(orientation, leftBorderColor, 36),
StyleSheetUtils::gradient(orientation, rightBorderColor, 26));
QString itemSelCss =
"QListView::item:selected {"
......@@ -207,10 +182,21 @@ struct ViewMainPagePrivate
" border-right: 1px solid %2;"
"}";
itemSelCss = itemSelCss.arg(
gradient(orientation, bgSelColor, 56),
rgba(borderSelColor));
StyleSheetUtils::gradient(orientation, bgSelColor, 56),
StyleSheetUtils::rgba(borderSelColor));
QString itemHovCss =
"QListView::item:hover:!selected {"
" background-color: %1;"
" border-left: 1px solid %2;"
" border-right: 1px solid %3;"
"}";
itemHovCss = itemHovCss.arg(
StyleSheetUtils::gradient(orientation, bgHovColor, 56),
StyleSheetUtils::rgba(leftBorderColor),
StyleSheetUtils::rgba(rightBorderColor));
QString css = itemCss + itemSelCss;
QString css = itemCss + itemSelCss + itemHovCss;
if (orientation == Qt::Vertical) {
css.replace("left", "top").replace("right", "bottom");
}
......
......@@ -149,6 +149,7 @@ set(gwenviewlib_SRCS
slidecontainer.cpp
slideshow.cpp
statusbartoolbutton.cpp
stylesheetutils.cpp
redeyereduction/redeyereductionimageoperation.cpp
redeyereduction/redeyereductiontool.cpp
resize/resizeimageoperation.cpp
......
/*
Gwenview: an image viewer
Copyright 2007 Aurélien Gâteau <agateau@kde.org>
Copyright 2018 Huon Imberger <huon@plonq.org>
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
#include "stylesheetutils.h"
// Qt
// KDE
// Local
#include "paintutils.h"
namespace Gwenview
{
namespace StyleSheetUtils
{
QString rgba(const QColor &color)
{
return QString::fromLocal8Bit("rgba(%1, %2, %3, %4)")
.arg(color.red())
.arg(color.green())
.arg(color.blue())
.arg(color.alpha());
}
QString gradient(Qt::Orientation orientation, const QColor &color, int value)
{
int x2, y2;
if (orientation == Qt::Horizontal) {
x2 = 0;
y2 = 1;
} else {
x2 = 1;
y2 = 0;
}
QString grad =
"qlineargradient(x1:0, y1:0, x2:%1, y2:%2,"
"stop:0 %3, stop: 1 %4)";
return grad
.arg(x2)
.arg(y2)
.arg(rgba(PaintUtils::adjustedHsv(color, 0, 0, qMin(255 - color.value(), value / 2))))
.arg(rgba(PaintUtils::adjustedHsv(color, 0, 0, -qMin(color.value(), value / 2))))
;
}
} // namespace
} // namespace
/*
Gwenview: an image viewer
Copyright 2007 Aurélien Gâteau <agateau@kde.org>
Copyright 2018 Huon Imberger <huon@plonq.org>
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
#ifndef STYLESHEETUTILS_H
#define STYLESHEETUTILS_H
// Qt
#include <QString>
#include <QColor>
// KDE
// Local
#include <lib/gwenviewlib_export.h>
#include "orientation.h"
namespace Gwenview
{
/**
* A collection of convenience functions to generate CSS code
*/
namespace StyleSheetUtils
{
GWENVIEWLIB_EXPORT QString rgba(const QColor &color);
GWENVIEWLIB_EXPORT QString gradient(Qt::Orientation orientation, const QColor &color, int value);
} // namespace
} // namespace
#endif /* STYLESHEETUTILS_H */
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