From 845228ac6ac549ec9af97ee0da3aaa71168f605e Mon Sep 17 00:00:00 2001 From: Konstantinos Sideris Date: Fri, 27 Oct 2017 22:20:33 +0300 Subject: [PATCH] Add scroll-down button --- CMakeLists.txt | 2 + include/TimelineView.h | 4 + include/ui/FloatingButton.h | 26 ++++++ resources/icons/ui/angle-arrow-down.png | Bin 0 -> 698 bytes resources/icons/ui/angle-arrow-down@2x.png | Bin 0 -> 1013 bytes resources/res.qrc | 2 + src/TimelineView.cc | 23 +++++ src/ui/FloatingButton.cc | 95 +++++++++++++++++++++ 8 files changed, 152 insertions(+) create mode 100644 include/ui/FloatingButton.h create mode 100644 resources/icons/ui/angle-arrow-down.png create mode 100644 resources/icons/ui/angle-arrow-down@2x.png create mode 100644 src/ui/FloatingButton.cc diff --git a/CMakeLists.txt b/CMakeLists.txt index 6f8c167c..c15093ad 100644 --- a/CMakeLists.txt +++ b/CMakeLists.txt @@ -171,6 +171,7 @@ set(SRC_FILES src/ui/Badge.cc src/ui/LoadingIndicator.cc src/ui/FlatButton.cc + src/ui/FloatingButton.cc src/ui/Label.cc src/ui/OverlayModal.cc src/ui/ScrollBar.cc @@ -224,6 +225,7 @@ qt5_wrap_cpp(MOC_HEADERS include/EmojiItemDelegate.h include/EmojiPanel.h include/EmojiPickButton.h + include/ui/FloatingButton.h include/ImageItem.h include/ImageOverlayDialog.h include/JoinRoomDialog.h diff --git a/include/TimelineView.h b/include/TimelineView.h index 400b0db0..83247948 100644 --- a/include/TimelineView.h +++ b/include/TimelineView.h @@ -34,6 +34,8 @@ #include "RoomInfoListItem.h" #include "Text.h" +class FloatingButton; + namespace msgs = matrix::events::messages; namespace events = matrix::events; @@ -155,6 +157,8 @@ private: int oldPosition_; int oldHeight_; + FloatingButton *scrollDownBtn_; + TimelineDirection lastMessageDirection_; // The events currently rendered. Used for duplicate detection. diff --git a/include/ui/FloatingButton.h b/include/ui/FloatingButton.h new file mode 100644 index 00000000..91e99ebb --- /dev/null +++ b/include/ui/FloatingButton.h @@ -0,0 +1,26 @@ +#pragma once + +#include "RaisedButton.h" + +constexpr int DIAMETER = 40; +constexpr int ICON_SIZE = 18; + +constexpr int OFFSET_X = 30; +constexpr int OFFSET_Y = 20; + +class FloatingButton : public RaisedButton +{ + Q_OBJECT + +public: + FloatingButton(const QIcon &icon, QWidget *parent = nullptr); + + QSize sizeHint() const override { return QSize(DIAMETER, DIAMETER); }; + QRect buttonGeometry() const; + +protected: + bool event(QEvent *event) override; + bool eventFilter(QObject *obj, QEvent *event) override; + + void paintEvent(QPaintEvent *event) override; +}; diff --git a/resources/icons/ui/angle-arrow-down.png b/resources/icons/ui/angle-arrow-down.png new file mode 100644 index 0000000000000000000000000000000000000000..e40ebca54e3d7c27820e67ec65d850a3bafbfd2a GIT binary patch literal 698 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz#^NA%Cx&(BWL^R}oCO|{#S9D* zuRxe_zrLtDP(ey&NJL45ua8x7ey(0(N`6wRUPW#JP&EUCO@$SZnVVXYs8ErclUHn2 zVXFjIVFhG^g!Ppaz)DK8ZIvQ?0~DO|i&7O#^-S~(l1AfjnEK zjFOT9D}DX)@^Za$W4-*MbbUihOG|wNBYh(yU7!lx;>x^|#0uTKVr7USFmqf|i<65o z3raHc^AtelCMM;Vme?vOfh>Xps5^5D;1=Z-LwyDGpMFJRfxe-hfj-=1phg>@AFZ5= zQWHz^i$e1AbL>D)%goCzPEIUH1v$`0A6*61N*jHUJCNK3@ibTz=xaMJpiWo_+Hu`E zzAP6QsP8>p977^F-%i=ccgTRpWpmRH<|7PDo%zq5BN{q+?bzOF`Q=Usa>^>-v~=}k zldrq2LW8?H_*~e3@#z@Ed=1_%D4CMF@z@)ly9<-cj+Y&}l`_FKOy- zuchP`o=~x#%htUsGxw3S9^cKE3>$T$Lbe$NHcj>{6OWFu_31fy^30)IN8$@CHyT}J zncgYO7TlLC6r&bpoye4Ln#eW1^VZ{n#?wb`6u#NmDfRE+7x{DSry^7odplSvNn+hu+GdHy)QK2F?C$HG5 z!d3~a!V1U+3F|8Y3;nDA{o-C@9zzrKDK}xwt{K19`Se z86_nJR{Hwo<>h+i#(Mch>H3D2mX`VkM*2oZx=P7{9O-#x!EwNQn0$BtHPdNb z#z)V83oQOxC9D2Ttxw&08k_a&H^<&rKC&?B6*W#^JJTR(z?^n~X9gpPb3jb$2Csqq z!_C}B6d&ncSpRWxFwZZZk9|KJwoDWLVxwFqFuy~)<(m`RrU{)nDLi6jdz2~`9WlQ( zOSRxlih$g;l$gl^P1E%=rwTNQFB9cFZt&?*DXj)WYLgo6OB^{h#q)oyS?5c2CslTbg`fe}Q#UuGbE?D`6IDeY$34+xyR?{MTmx zFr@!%A2zTw{v|p1&muHTQk}UT5hS)V_`~TKMA3@1i0Vo}H0WsawA* z?(Pd#i~j;rrUx*zxI^-icons/ui/paper-clip-outline@2x.png icons/ui/angle-pointing-to-left.png icons/ui/angle-pointing-to-left@2x.png + icons/ui/angle-arrow-down.png + icons/ui/angle-arrow-down@2x.png icons/emoji-categories/people.png icons/emoji-categories/people@2x.png diff --git a/src/TimelineView.cc b/src/TimelineView.cc index 2142f546..13209062 100644 --- a/src/TimelineView.cc +++ b/src/TimelineView.cc @@ -27,6 +27,7 @@ #include "MessageEvent.h" #include "MessageEventContent.h" +#include "FloatingButton.h" #include "ImageItem.h" #include "TimelineItem.h" #include "TimelineView.h" @@ -140,6 +141,16 @@ TimelineView::sliderMoved(int position) if (!scroll_area_->verticalScrollBar()->isVisible()) return; + const int maxScroll = scroll_area_->verticalScrollBar()->maximum(); + const int currentScroll = scroll_area_->verticalScrollBar()->value(); + + if (maxScroll - currentScroll > SCROLL_BAR_GAP) { + scrollDownBtn_->show(); + scrollDownBtn_->raise(); + } else { + scrollDownBtn_->hide(); + } + // The scrollbar is high enough so we can start retrieving old events. if (position < SCROLL_BAR_GAP) { if (isTimelineFinished) @@ -376,6 +387,18 @@ TimelineView::init() QSettings settings; local_user_ = settings.value("auth/user_id").toString(); + QIcon icon; + icon.addFile(":/icons/icons/ui/angle-arrow-down.png"); + scrollDownBtn_ = new FloatingButton(icon, this); + scrollDownBtn_->setBackgroundColor(QColor("#F5F5F5")); + scrollDownBtn_->setForegroundColor(QColor("black")); + scrollDownBtn_->hide(); + + connect(scrollDownBtn_, &QPushButton::clicked, this, [=]() { + const int max = scroll_area_->verticalScrollBar()->maximum(); + scroll_area_->verticalScrollBar()->setValue(max); + }); + top_layout_ = new QVBoxLayout(this); top_layout_->setSpacing(0); top_layout_->setMargin(0); diff --git a/src/ui/FloatingButton.cc b/src/ui/FloatingButton.cc new file mode 100644 index 00000000..74dcd482 --- /dev/null +++ b/src/ui/FloatingButton.cc @@ -0,0 +1,95 @@ +#include + +#include "FloatingButton.h" + +FloatingButton::FloatingButton(const QIcon &icon, QWidget *parent) + : RaisedButton(parent) +{ + setFixedSize(DIAMETER, DIAMETER); + setGeometry(buttonGeometry()); + + if (parentWidget()) + parentWidget()->installEventFilter(this); + + setFixedRippleRadius(50); + setIcon(icon); + raise(); +} + +QRect +FloatingButton::buttonGeometry() const +{ + QWidget *parent = parentWidget(); + + if (!parent) + return QRect(); + + return QRect(parent->width() - (OFFSET_X + DIAMETER), + parent->height() - (OFFSET_Y + DIAMETER), + DIAMETER, + DIAMETER); +} + +bool +FloatingButton::event(QEvent *event) +{ + if (!parent()) + return RaisedButton::event(event); + + switch (event->type()) { + case QEvent::ParentChange: { + parent()->installEventFilter(this); + setGeometry(buttonGeometry()); + break; + } + case QEvent::ParentAboutToChange: { + parent()->installEventFilter(this); + break; + } + default: + break; + } + + return RaisedButton::event(event); +} + +bool +FloatingButton::eventFilter(QObject *obj, QEvent *event) +{ + const QEvent::Type type = event->type(); + + if (QEvent::Move == type || QEvent::Resize == type) + setGeometry(buttonGeometry()); + + return RaisedButton::eventFilter(obj, event); +} + +void +FloatingButton::paintEvent(QPaintEvent *event) +{ + Q_UNUSED(event); + + QRect square = QRect(0, 0, DIAMETER, DIAMETER); + square.moveCenter(rect().center()); + + QPainter p(this); + p.setRenderHints(QPainter::Antialiasing); + + QBrush brush; + brush.setStyle(Qt::SolidPattern); + brush.setColor(backgroundColor()); + + p.setBrush(brush); + p.setPen(Qt::NoPen); + p.drawEllipse(square); + + QRect iconGeometry(0, 0, ICON_SIZE, ICON_SIZE); + iconGeometry.moveCenter(square.center()); + + QPixmap pixmap = icon().pixmap(QSize(ICON_SIZE, ICON_SIZE)); + QPainter icon(&pixmap); + icon.setCompositionMode(QPainter::CompositionMode_SourceIn); + icon.fillRect(pixmap.rect(), foregroundColor()); + + p.drawPixmap(iconGeometry, pixmap); +}