mockup (WIP)

src/chatlog/content/filetransferwidget.cpp

@@ -34,7 +34,8 @@ FileTransferWidget::FileTransferWidget(QWidget *parent, ToxFile file)
     , ui(new Ui::FileTransferWidget)
     , fileInfo(file)
     , lastTick(QTime::currentTime())
-    , color(Style::getColor(Style::LightGrey))
+    , backgroundColor(Style::getColor(Style::LightGrey))
+    , buttonColor(Style::getColor(Style::Yellow))
 {
     ui->setupUi(this);
 
@@ -48,11 +49,11 @@ FileTransferWidget::FileTransferWidget(QWidget *parent, ToxFile file)
     ui->progressLabel->setText("0kiB/s");
     ui->etaLabel->setText("");
 
-    colorAnimation = new QVariantAnimation(this);
+    backgroundColorAnimation = new QVariantAnimation(this);
-    colorAnimation->setDuration(500);
+    backgroundColorAnimation->setDuration(500);
-    colorAnimation->setEasingCurve(QEasingCurve::OutCubic);
+    backgroundColorAnimation->setEasingCurve(QEasingCurve::OutCubic);
-    connect(colorAnimation, &QVariantAnimation::valueChanged, this, [this](const QVariant& val) {
+    connect(backgroundColorAnimation, &QVariantAnimation::valueChanged, this, [this](const QVariant& val) {
-        color = val.value<QColor>();
+        backgroundColor = val.value<QColor>();
         update();
     });
 
@@ -121,11 +122,11 @@ void FileTransferWidget::acceptTransfer(const QString &filepath)
 
 void FileTransferWidget::setColor(const QColor &c, bool whiteFont)
 {
-    if(c != color)
+    if(c != backgroundColor)
     {
-        colorAnimation->setStartValue(color);
+        backgroundColorAnimation->setStartValue(backgroundColor);
-        colorAnimation->setEndValue(c);
+        backgroundColorAnimation->setEndValue(c);
-        colorAnimation->start();
+        backgroundColorAnimation->start();
     }
 
     setProperty("fontColor", whiteFont ? "white" : "black");
@@ -149,13 +150,27 @@ void FileTransferWidget::paintEvent(QPaintEvent *)
     // required by Hi-DPI support as border-image doesn't work.
     QPainter painter(this);
     painter.setRenderHint(QPainter::Antialiasing);
-    painter.setBrush(QBrush(color));
     painter.setPen(Qt::NoPen);
 
-    qreal s = static_cast<qreal>(geometry().height()) / static_cast<qreal>(geometry().width());
+    qreal ratio = static_cast<qreal>(geometry().height()) / static_cast<qreal>(geometry().width());
-    int r = 20;
+    const int r = 20;
+    const int buttonFieldWidth = 34;
+    const int lineWidth = 2;
 
-    painter.drawRoundRect(geometry(), r * s, r);
+    // draw background
+    painter.setBrush(QBrush(backgroundColor));
+    painter.setClipRect(QRect(0,0,width()-buttonFieldWidth,height()));
+    painter.drawRoundRect(geometry(), r * ratio, r);
+
+    // draw button background (top)
+    painter.setBrush(QBrush(buttonColor));
+    painter.setClipRect(QRect(width()-buttonFieldWidth+lineWidth,0,buttonFieldWidth,height()/2-lineWidth/2));
+    painter.drawRoundRect(geometry(), r * ratio, r);
+
+    // draw button background (bottom)
+    painter.setBrush(QBrush(buttonColor));
+    painter.setClipRect(QRect(width()-buttonFieldWidth+lineWidth,height()/2+lineWidth/2,buttonFieldWidth,height()/2));
+    painter.drawRoundRect(geometry(), r * ratio, r);
 }
 
 void FileTransferWidget::onFileTransferInfo(ToxFile file)

src/chatlog/content/filetransferwidget.h

@@ -69,8 +69,9 @@ private:
     ToxFile fileInfo;
     QTime lastTick;
     qint64 lastBytesSent = 0;
-    QVariantAnimation* colorAnimation = nullptr;
+    QVariantAnimation* backgroundColorAnimation = nullptr;
-    QColor color;
+    QColor backgroundColor;
+    QColor buttonColor;
 
     static const uint8_t TRANSFER_ROLLING_AVG_COUNT = 4;
     uint8_t meanIndex = 0;

src/chatlog/content/filetransferwidget.ui

@@ -7,7 +7,7 @@
     <x>0</x>
     <y>0</y>
     <width>532</width>
-    <height>90</height>
+    <height>238</height>
    </rect>
   </property>
   <property name="windowTitle">
@@ -79,6 +79,12 @@
           <height>16777215</height>
          </size>
         </property>
+        <property name="frameShape">
+         <enum>QFrame::Box</enum>
+        </property>
+        <property name="lineWidth">
+         <number>2</number>
+        </property>
         <property name="text">
          <string>[preview]</string>
         </property>
@@ -251,8 +257,8 @@
            </property>
            <property name="iconSize">
             <size>
-             <width>25</width>
+             <width>32</width>
-             <height>28</height>
+             <height>32</height>
             </size>
            </property>
            <property name="flat">
@@ -260,19 +266,6 @@
            </property>
           </widget>
          </item>
-         <item>
-          <spacer name="verticalSpacer">
-           <property name="orientation">
-            <enum>Qt::Vertical</enum>
-           </property>
-           <property name="sizeHint" stdset="0">
-            <size>
-             <width>20</width>
-             <height>92</height>
-            </size>
-           </property>
-          </spacer>
-         </item>
          <item>
           <widget class="QPushButton" name="bottomButton">
            <property name="sizePolicy">
@@ -286,8 +279,8 @@
            </property>
            <property name="iconSize">
             <size>
-             <width>25</width>
+             <width>32</width>
-             <height>28</height>
+             <height>32</height>
             </size>
            </property>
            <property name="flat">
@@ -295,6 +288,19 @@
            </property>
           </widget>
          </item>
+         <item>
+          <spacer name="verticalSpacer_4">
+           <property name="orientation">
+            <enum>Qt::Vertical</enum>
+           </property>
+           <property name="sizeHint" stdset="0">
+            <size>
+             <width>20</width>
+             <height>40</height>
+            </size>
+           </property>
+          </spacer>
+         </item>
         </layout>
        </widget>
       </item>