Add custom scrollbar on the timeline

This commit is contained in:
Konstantinos Sideris 2017-05-24 22:45:13 +03:00
parent 0237fec90c
commit 251f569a5c
8 changed files with 170 additions and 13 deletions

View File

@ -111,6 +111,7 @@ set(SRC_FILES
src/ui/CircularProgress.cc
src/ui/FlatButton.cc
src/ui/OverlayModal.cc
src/ui/ScrollBar.cc
src/ui/RaisedButton.cc
src/ui/Ripple.cc
src/ui/RippleOverlay.cc
@ -181,6 +182,7 @@ qt5_wrap_cpp(MOC_HEADERS
include/ui/CircularProgress.h
include/ui/FlatButton.h
include/ui/OverlayWidget.h
include/ui/ScrollBar.h
include/ui/RaisedButton.h
include/ui/Ripple.h
include/ui/RippleOverlay.h

View File

@ -23,6 +23,7 @@
#include <QVBoxLayout>
#include <QWidget>
#include "ScrollBar.h"
#include "Sync.h"
#include "TimelineItem.h"
@ -97,6 +98,7 @@ private:
QVBoxLayout *scroll_layout_;
QScrollArea *scroll_area_;
ScrollBar *scrollbar_;
QWidget *scroll_widget_;
QString last_sender_;

53
include/ui/ScrollBar.h Normal file
View File

@ -0,0 +1,53 @@
/*
* nheko Copyright (C) 2017 Konstantinos Sideris <siderisk@auth.gr>
*
* 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 3 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, see <http://www.gnu.org/licenses/>.
*/
#pragma once
#include <QGraphicsOpacityEffect>
#include <QPainter>
#include <QScrollArea>
#include <QScrollBar>
#include <QTimer>
class ScrollBar : public QScrollBar
{
Q_OBJECT
public:
ScrollBar(QScrollArea *area, QWidget *parent = nullptr);
void fadeIn();
void fadeOut();
protected:
void paintEvent(QPaintEvent *e) override;
void sliderChange(SliderChange change) override;
private:
int roundRadius_ = 4;
int handleWidth_ = 7;
int minHandleHeight_ = 20;
bool isActive;
const int AnimationDuration = 300;
const int Padding = 4;
QGraphicsOpacityEffect *eff;
QTimer hideTimer_;
QScrollArea *area_;
QRect handle_;
};

View File

@ -32,13 +32,11 @@ EmojiPanel::EmojiPanel(QWidget *parent)
{
setStyleSheet(
"QWidget {background: #f8fbfe; color: #e8e8e8; border: none;}"
"QScrollBar:vertical { background-color: #f8fbfe; width: 8px; border-radius: 20px; margin: 0px 2px 0 2px; }"
"QScrollBar::handle:vertical { border-radius : 50px; background-color : #d6dde3; }"
"QScrollBar:vertical { background-color: #f8fbfe; width: 8px; margin: 0px 2px 0 2px; }"
"QScrollBar::handle:vertical { background-color: #d6dde3; min-height: 20px; }"
"QScrollBar::add-line:vertical { border: none; background: none; }"
"QScrollBar::sub-line:vertical { border: none; background: none; }");
setParent(0); // Create TopLevel-Widget
setAttribute(Qt::WA_NoSystemBackground, true);
setAttribute(Qt::WA_TranslucentBackground, true);
setWindowFlags(Qt::FramelessWindowHint | Qt::ToolTip);

View File

@ -27,9 +27,7 @@ RoomList::RoomList(QSharedPointer<MatrixClient> client, QWidget *parent)
: QWidget(parent)
, client_(client)
{
setStyleSheet(
"QWidget { border: none; }"
"QScrollBar:vertical { width: 4px; margin: 2px 0; }");
setStyleSheet("QWidget { border: none; }");
QSizePolicy sizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
sizePolicy.setHorizontalStretch(0);
@ -42,6 +40,7 @@ RoomList::RoomList(QSharedPointer<MatrixClient> client, QWidget *parent)
scrollArea_ = new QScrollArea(this);
scrollArea_->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
scrollArea_->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
scrollArea_->setSizeAdjustPolicy(QAbstractScrollArea::AdjustToContents);
scrollArea_->setWidgetResizable(true);
scrollArea_->setAlignment(Qt::AlignLeading | Qt::AlignLeft | Qt::AlignVCenter);

View File

@ -240,6 +240,9 @@ void TimelineView::init()
scroll_area_->setWidgetResizable(true);
scroll_area_->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
scrollbar_ = new ScrollBar(scroll_area_);
scroll_area_->setVerticalScrollBar(scrollbar_);
scroll_widget_ = new QWidget();
scroll_layout_ = new QVBoxLayout();

View File

@ -41,12 +41,6 @@ int main(int argc, char *argv[])
app.setWindowIcon(QIcon(":/logos/nheko.png"));
app.setStyleSheet(
"QScrollBar:vertical { background-color: #f8fbfe; width: 8px; border: none; margin: 2px; }"
"QScrollBar::handle:vertical { min-height: 40px; background-color : #d6dde3; }"
"QScrollBar::add-line:vertical { border: none; background: none; }"
"QScrollBar::sub-line:vertical { border: none; background: none; }");
QFont font("Open Sans");
app.setFont(font);

106
src/ui/ScrollBar.cc Normal file
View File

@ -0,0 +1,106 @@
/*
* nheko Copyright (C) 2017 Konstantinos Sideris <siderisk@auth.gr>
*
* 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 3 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, see <http://www.gnu.org/licenses/>.
*/
#include <QDebug>
#include <QGraphicsOpacityEffect>
#include <QPropertyAnimation>
#include "ScrollBar.h"
ScrollBar::ScrollBar(QScrollArea *area, QWidget *parent)
: QScrollBar(parent)
, area_{area}
{
hideTimer_.setSingleShot(true);
connect(&hideTimer_, &QTimer::timeout, this, &ScrollBar::fadeOut);
eff = new QGraphicsOpacityEffect(this);
setGraphicsEffect(eff);
}
void ScrollBar::fadeOut()
{
isActive = false;
QPropertyAnimation *anim = new QPropertyAnimation(eff, "opacity");
anim->setDuration(AnimationDuration);
anim->setStartValue(1);
anim->setEndValue(0);
anim->setEasingCurve(QEasingCurve::Linear);
anim->start(QPropertyAnimation::DeleteWhenStopped);
}
void ScrollBar::fadeIn()
{
QPropertyAnimation *anim = new QPropertyAnimation(eff, "opacity");
anim->setDuration(AnimationDuration);
anim->setStartValue(0);
anim->setEndValue(1);
anim->setEasingCurve(QEasingCurve::Linear);
anim->start(QPropertyAnimation::DeleteWhenStopped);
}
void ScrollBar::sliderChange(SliderChange change)
{
if (!isActive)
fadeIn();
hideTimer_.stop();
hideTimer_.start(1500);
isActive = true;
QScrollBar::sliderChange(change);
}
void ScrollBar::paintEvent(QPaintEvent *)
{
if (!width() && !height()) {
hide();
return;
}
QPainter p(this);
p.setRenderHint(QPainter::TextAntialiasing);
p.setRenderHint(QPainter::Antialiasing);
p.setRenderHint(QPainter::SmoothPixmapTransform);
p.setPen(Qt::NoPen);
QColor bg(33, 33, 33, 30);
QColor handle(0, 0, 0, 80);
p.setBrush(bg);
QRect backgroundArea(Padding, 0, handleWidth_, height());
p.drawRoundedRect(backgroundArea, roundRadius_, roundRadius_);
int areaHeight = area_->height();
int widgetHeight = area_->widget()->height();
double visiblePercentage = (double)areaHeight / (double)widgetHeight;
int handleHeight = std::max(visiblePercentage * areaHeight, (double)minHandleHeight_);
if (maximum() == 0) {
return;
}
int handle_y = (value() * (areaHeight - handleHeight - roundRadius_ / 2)) / maximum();
p.setBrush(handle);
QRect handleArea(Padding, handle_y, handleWidth_, handleHeight);
p.drawRoundedRect(handleArea, roundRadius_, roundRadius_);
}