Add custom scrollbar on the timeline

CMakeLists.txt

@@ -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

include/TimelineView.h

@@ -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_;

include/ui/ScrollBar.h

@@ -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_;
+};

src/EmojiPanel.cc

@@ -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);
 

src/RoomList.cc

@@ -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);

src/TimelineView.cc

@@ -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();

src/main.cc

@@ -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);
 

src/ui/ScrollBar.cc

@@ -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_);
+}