Timeline: Updated UI

Might need some tweaks regarding hidpi.

src/app/GUI/keysview.cpp

@@ -471,15 +471,15 @@ void KeysView::paintEvent(QPaintEvent *) {
     if(mPixelsPerFrame < 0.001) return;
     if(!mGraphViewed) {
         int currY = eSizesUI::widget;
-        p.setPen(QPen(QColor(40, 40, 40), 1));
+        p.setPen(QPen(QColor(40, 40, 40), 2));
         while(currY < height()) {
             p.drawLine(0, currY, width(), currY);
             currY += eSizesUI::widget;
         }
     }
     p.translate(eSizesUI::widget/2, 0);
 
-    p.setPen(QPen(QColor(44, 44, 49), 1));
+    p.setPen(QPen(QColor(44, 44, 49), 2));
     qreal xT = mPixelsPerFrame*0.5;
     int iInc = 1;
     bool mult5 = true;

src/app/GUI/timelinewidget.cpp

@@ -43,50 +43,36 @@
 #include "widgets/scenechooser.h"
 #include "widgets/changewidthwidget.h"
 #include "timelinehighlightwidget.h"
+#include "appsupport.h"
 
 TimelineWidget::TimelineWidget(Document &document,
                                QWidget * const menu,
-                               QWidget *parent) :
-    QWidget(parent), mDocument(document) {
+                               QWidget *parent)
+    : QWidget(parent)
+    , mDocument(document)
+{
+    setPalette(AppSupport::getDarkerPalette());
+    setAutoFillBackground(true);
+
     mMainLayout = new QGridLayout(this);
     mMainLayout->setSpacing(0);
     mMainLayout->setMargin(0);
 
     mMenuLayout = new QHBoxLayout();
-    mMenuLayout->setSpacing(0);
+    //mMenuLayout->setSpacing(0);
     mMenuLayout->setMargin(0);
+
     mBoxesListMenuBar = new FakeMenuBar(this);
     mBoxesListMenuBar->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Preferred);
-//    ((QToolButton*)mBoxesListMenuBar->children()[0])->setStyleSheet(
-//                "QToolButton {"
-//                    "padding: 0px 0px;"
-//                    "background: transparent;"
-//                    "border-radius: 4px;"
-//                    "margin-top: 0;"
-//                    "border-bottom-right-radius: 0px;"
-//                    "border-bottom-left-radius: 0px;"
-//                    "padding-bottom: 0;"
-//                    "margin-bottom: 0;"
-//                "}"
-//                "QToolButton:hover {"
-//                    "background-color: rgba(0, 0, 0, 30);"
-//                "}"
-
-//                "QToolButton:pressed {"
-//                    "background-color: rgba(0, 0, 0, 50);"
-//                "}"
-
-//                "QToolButton:checked {"
-//                    "background-color: rgb(60, 60, 60);"
-//                    "color: white;"
-//                "}");
+
     mSceneChooser = new SceneChooser(mDocument, true,
                                      mBoxesListMenuBar);
     mBoxesListMenuBar->addMenu(mSceneChooser);
 
     mCornerMenuBar = new FakeMenuBar(this);
-  //  mCornerMenuBar->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Preferred);
-    //mCornerMenuBar->setStyleSheet("QMenuBar::item { padding: 1px 0px; }");
+
+    mCornerMenuBar->setObjectName("TimelineMenu");
+    menu->setObjectName("TimelineMenu");
 
     const auto iconsDir = eSettings::sIconsDir();
 
@@ -186,9 +172,7 @@ TimelineWidget::TimelineWidget(Document &document,
     mSearchLine->setMinimumHeight(0);
     mSearchLine->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred);
     MainWindow::sGetInstance()->installLineFilter(mSearchLine);
-//    mSearchLine->setStyleSheet("border-radius: 0;"
-//                               "border: 0;");
-    mSearchLine->setPlaceholderText(tr("Search"));
+    mSearchLine->setPlaceholderText(tr("Search ..."));
     connect(mSearchLine, &QLineEdit::textChanged,
             this, &TimelineWidget::setSearchText);
     mSearchLine->setFocusPolicy(Qt::ClickFocus);
@@ -208,7 +192,7 @@ TimelineWidget::TimelineWidget(Document &document,
     mBoxesListWidget->setCurrentTarget(nullptr, SWT_Target::canvas);
 
     mBoxesListScrollArea->setWidget(mBoxesListWidget);
-    mMainLayout->addWidget(mMenuWidget, 0, 0);
+    mMainLayout->addWidget(mMenuWidget, 0, 0, Qt::AlignTop);
     mMainLayout->addWidget(mBoxesListScrollArea, 1, 0);
 
     mKeysViewLayout = new QVBoxLayout();
@@ -265,6 +249,7 @@ TimelineWidget::TimelineWidget(Document &document,
     mFrameScrollBar = new FrameScrollBar(1, 1, false, false, false, this);
     mFrameScrollBar->setSizePolicy(QSizePolicy::Minimum,
                                    QSizePolicy::Preferred);
+    mFrameScrollBar->setFixedHeight(35);
 //    connect(MemoryHandler::sGetInstance(), &MemoryHandler::memoryFreed,
 //            frameScrollBar,
 //            qOverload<>(&FrameScrollBar::update));

src/ui/widgets/framescrollbar.cpp

@@ -105,20 +105,10 @@ void FrameScrollBar::paintEvent(QPaintEvent *) {
     const qreal inc = mDrawFrameInc*pixPerFrame;
     const int minMod = minFrame%mDrawFrameInc;
     qreal xL = (-minMod + (mRange ? 0. : 0.5))*pixPerFrame + x0;
-    qreal xxL = xL;
     int currentFrame = minFrame - minMod;
     const qreal threeFourthsHeight = height()*0.75;
     const qreal maxX = width() + eSizesUI::widget;
 
-    // draw minor ticks
-    if (!mRange) {
-        p.setPen(QPen(Qt::white, 2));
-        while (xxL < maxX) {
-            p.drawLine(QPointF(xxL, threeFourthsHeight + 2), QPointF(xxL, height()));
-            xxL += inc/5;
-        }
-    }
-
     // draw handle
     QRectF handleRect;
     const int hLeftFrames = mFirstViewedFrame - minFrame;
@@ -129,7 +119,7 @@ void FrameScrollBar::paintEvent(QPaintEvent *) {
     handleRect.setLeft(handleLeft);
     handleRect.setTop(mBottom ? 2 : 0);
     handleRect.setWidth(mBottom ? handleWidth : handleFixedWidth);
-    handleRect.setBottom(mBottom ? 6 : height()/2);
+    handleRect.setBottom(mBottom ? 6 : height()/3);
     if (mRange) { p.fillRect(handleRect, col); }
     else { // triangle
         QPainterPath path;
@@ -140,11 +130,34 @@ void FrameScrollBar::paintEvent(QPaintEvent *) {
         p.fillPath(path, QColor(180, 0, 0));
     }
 
-    p.setPen(QPen(Qt::white, 2));
-
-    // draw main ticks
+    // ticks
     if (!mRange) {
-        while(xL < maxX) {
+        // draw minor
+        // copy pasta (ish) from keysview.cpp
+        // in order to line up ticks properly
+        p.setPen(QPen(Qt::darkGray, 2));
+        p.translate(eSizesUI::widget/2, 0);
+        qreal xT = pixPerFrame*0.5;
+        int iInc = 1;
+        bool mult5 = true;
+        while (iInc*pixPerFrame < eSizesUI::widget/2) {
+            if (mult5) { iInc *= 5; }
+            else { iInc *= 2; }
+        }
+        int mMinFrame = mFrameRange.fMin;
+        int mMaxFrame = mFrameRange.fMax;
+        mMinFrame += qCeil((-xT)/pixPerFrame);
+        mMinFrame = mMinFrame - mMinFrame%iInc - 1;
+        mMaxFrame += qFloor((width() - 40 - xT)/pixPerFrame) - mMaxFrame%iInc;
+        for (int i = mMinFrame; i <= mMaxFrame; i += iInc) {
+            const qreal xTT = xT + (i - mFrameRange.fMin + 1)*pixPerFrame;
+            p.drawLine(QPointF(xTT, threeFourthsHeight + 4), QPointF(xTT, height()));
+        }
+
+        // draw main
+        p.setPen(QPen(Qt::white, 2));
+        p.translate(-(eSizesUI::widget/2), 0);
+        while (xL < maxX) {
             p.drawLine(QPointF(xL, threeFourthsHeight + 2), QPointF(xL, height()));
             QString drawValue = QString::number(currentFrame);
             if (mDisplayTime && mFps > 0) {