images list now vertical on the left

reworked scaling to respect aspect ratio and not exceed original size

3 files changed, 141 insertions, 102 deletions

diff --git a/src/modinfodialog.ui b/src/modinfodialog.ui
index ba670ef3..c1dba1c7 100644
--- a/src/modinfodialog.ui
+++ b/src/modinfodialog.ui
@@ -150,68 +150,14 @@
       <attribute name="title">

        <string>Images</string>

       </attribute>

-      <layout class="QVBoxLayout" name="verticalLayout_2">

+      <layout class="QVBoxLayout" name="verticalLayout_19">

        <item>

-        <widget class="QLabel" name="imageLabel">

-         <property name="sizePolicy">

-          <sizepolicy hsizetype="Ignored" vsizetype="Ignored">

-           <horstretch>0</horstretch>

-           <verstretch>0</verstretch>

-          </sizepolicy>

-         </property>

-         <property name="minimumSize">

-          <size>

-           <width>0</width>

-           <height>0</height>

-          </size>

-         </property>

-         <property name="maximumSize">

-          <size>

-           <width>16777215</width>

-           <height>16777215</height>

-          </size>

-         </property>

-         <property name="layoutDirection">

-          <enum>Qt::LeftToRight</enum>

-         </property>

-         <property name="text">

-          <string/>

-         </property>

-         <property name="alignment">

-          <set>Qt::AlignCenter</set>

-         </property>

-        </widget>

-       </item>

-       <item>

-        <widget class="QScrollArea" name="imageScrollArea">

-         <property name="maximumSize">

-          <size>

-           <width>16777215</width>

-           <height>128</height>

-          </size>

-         </property>

-         <property name="widgetResizable">

-          <bool>true</bool>

+        <widget class="QSplitter" name="tabImagesSplitter">

+         <property name="orientation">

+          <enum>Qt::Horizontal</enum>

          </property>

-         <widget class="QWidget" name="imageScrollAreaContent">

-          <property name="geometry">

-           <rect>

-            <x>0</x>

-            <y>0</y>

-            <width>746</width>

-            <height>126</height>

-           </rect>

-          </property>

-          <property name="toolTip">

-           <string>Images located in the mod.</string>

-          </property>

-          <property name="whatsThis">

-           <string>This lists all the images (.jpg and .png) in the mod directory, like screenshots and such. Click one to get a larger view.</string>

-          </property>

-          <layout class="QHBoxLayout" name="horizontalLayout_2">

-           <property name="spacing">

-            <number>0</number>

-           </property>

+         <widget class="QWidget" name="widget_8" native="true">

+          <layout class="QVBoxLayout" name="verticalLayout_2">

            <property name="leftMargin">

             <number>0</number>

            </property>

@@ -225,14 +171,40 @@
             <number>0</number>

            </property>

            <item>

-            <layout class="QHBoxLayout" name="imageThumbnails">

-             <property name="spacing">

-              <number>0</number>

+            <widget class="QScrollArea" name="imagesScrollArea">

+             <property name="widgetResizable">

+              <bool>true</bool>

              </property>

-            </layout>

+             <widget class="QWidget" name="imagesThumbnails">

+              <property name="geometry">

+               <rect>

+                <x>0</x>

+                <y>0</y>

+                <width>604</width>

+                <height>436</height>

+               </rect>

+              </property>

+             </widget>

+            </widget>

            </item>

           </layout>

          </widget>

+         <widget class="QWidget" name="imagesImage" native="true">

+          <layout class="QVBoxLayout" name="verticalLayout_18">

+           <property name="leftMargin">

+            <number>0</number>

+           </property>

+           <property name="topMargin">

+            <number>0</number>

+           </property>

+           <property name="rightMargin">

+            <number>0</number>

+           </property>

+           <property name="bottomMargin">

+            <number>0</number>

+           </property>

+          </layout>

+         </widget>

         </widget>

        </item>

       </layout>

diff --git a/src/modinfodialogimages.cpp b/src/modinfodialogimages.cpp
index 4f2ee78c..fb2ad1fe 100644
--- a/src/modinfodialogimages.cpp
+++ b/src/modinfodialogimages.cpp
@@ -1,44 +1,109 @@
 #include "modinfodialogimages.h"
 #include "ui_modinfodialog.h"
 
-ThumbnailButton::ThumbnailButton(const QString& fullPath, QImage original)
-  : m_original(std::move(original))
+ScalableImage::ScalableImage(QImage original)
+  : m_original(std::move(original)), m_border(1)
 {
-  const auto ratio = static_cast<double>(m_original.width()) / m_original.height();
+  auto sp = sizePolicy();
+  sp.setHeightForWidth(true);
+  setSizePolicy(sp);
+}
+
+void ScalableImage::setImage(QImage image)
+{
+  m_original = std::move(image);
+  m_scaled = {};
+
+  update();
+}
+
+const QImage& ScalableImage::image() const
+{
+  return m_original;
+}
+
+bool ScalableImage::hasHeightForWidth() const
+{
+  return true;
+}
+
+int ScalableImage::heightForWidth(int w) const
+{
+  return w;
+}
+
+void ScalableImage::paintEvent(QPaintEvent* e)
+{
+  if (m_original.isNull()) {
+    return;
+  }
+
+  const QRect widgetRect = rect();
+  const QRect imageRect = widgetRect.adjusted(
+    m_border, m_border, -m_border, -m_border);
+
+  const auto ratio = std::min({
+    1.0,
+    static_cast<double>(imageRect.width()) / m_original.width(),
+    static_cast<double>(imageRect.height()) / m_original.height()});
+
+  const QSize scaledSize(
+    static_cast<int>(std::round(m_original.width() * ratio)),
+    static_cast<int>(std::round(m_original.height() * ratio)));
 
-  QImage thumbnail;
-  if (ratio > 1.34) {
-    thumbnail = m_original.scaledToWidth(128);
-  } else {
-    thumbnail = m_original.scaledToHeight(96);
+  if (m_scaled.isNull() || m_scaled.size() != scaledSize) {
+    qDebug() << "scaled to " << scaledSize;
+
+    m_scaled = m_original.scaled(
+      scaledSize.width(), scaledSize.height(),
+      Qt::IgnoreAspectRatio, Qt::SmoothTransformation);
   }
 
-  setIcon(QPixmap::fromImage(thumbnail));
-  setIconSize(QSize(thumbnail.width(), thumbnail.height()));
+  const QRect drawBorderRect = widgetRect.adjusted(0, 0, -1, -1);
+
+  const QRect drawImageRect(
+    (imageRect.left()+imageRect.width()/2) - m_scaled.width()/2,
+    (imageRect.top()+imageRect.height()/2) - m_scaled.height()/2,
+    m_scaled.width(), m_scaled.height());
+
+
+  QPainter painter(this);
 
-  connect(this, &QPushButton::clicked, [&]{ emit open(m_original); });
+  painter.setPen(QColor(Qt::black));
+  painter.drawRect(drawBorderRect);
+  painter.drawImage(drawImageRect, m_scaled);
 }
 
-const QImage& ThumbnailButton::image() const
+void ScalableImage::mousePressEvent(QMouseEvent* e)
 {
-  return m_original;
+  if (e->button() == Qt::LeftButton) {
+    emit clicked(m_original);
+  }
 }
 
 
 ImagesTab::ImagesTab(Ui::ModInfoDialog* ui)
-  : ui(ui)
+  : ui(ui), m_image(new ScalableImage)
 {
+  ui->imagesImage->layout()->addWidget(m_image);
+  ui->imagesThumbnails->setLayout(new QVBoxLayout);
+
+  ui->tabImagesSplitter->setSizes({128, 1});
+  ui->tabImagesSplitter->setStretchFactor(0, 0);
+  ui->tabImagesSplitter->setStretchFactor(1, 1);
 }
 
 void ImagesTab::clear()
 {
-  ui->imageLabel->setPixmap({});
+  m_image->setImage({});
 
-  while (ui->imageThumbnails->count() > 0) {
-    auto* item = ui->imageThumbnails->takeAt(0);
+  while (ui->imagesThumbnails->layout()->count() > 0) {
+    auto* item = ui->imagesThumbnails->layout()->takeAt(0);
     delete item->widget();
     delete item;
   }
+
+  static_cast<QVBoxLayout*>(ui->imagesThumbnails->layout())->addStretch(1);
 }
 
 bool ImagesTab::feedFile(const QString& rootPath, const QString& fullPath)
@@ -66,26 +131,17 @@ void ImagesTab::add(const QString& fullPath)
     return;
   }
 
-  auto* button = new ThumbnailButton(fullPath, std::move(image));
+  auto* thumbnail = new ScalableImage(std::move(image));
 
   QObject::connect(
-    button, &ThumbnailButton::open,
-    [&](const QImage& image){ onOpen(image); });
+    thumbnail, &ScalableImage::clicked,
+    [&](const QImage& image){ onClicked(image); });
 
-  ui->imageThumbnails->addWidget(button);
+  static_cast<QVBoxLayout*>(ui->imagesThumbnails->layout())->insertWidget(
+    ui->imagesThumbnails->layout()->count() - 1, thumbnail);
 }
 
-void ImagesTab::onOpen(const QImage& original)
+void ImagesTab::onClicked(const QImage& original)
 {
-  QImage image;
-
-  const auto ratio = static_cast<double>(original.width()) / original.height();
-
-  if (ratio > 1.34) {
-    image = original.scaledToWidth(ui->imageLabel->geometry().width());
-  } else {
-    image = original.scaledToHeight(ui->imageLabel->geometry().height());
-  }
-
-  ui->imageLabel->setPixmap(QPixmap::fromImage(image));
+  m_image->setImage(original);
 }
diff --git a/src/modinfodialogimages.h b/src/modinfodialogimages.h
index 3c492e77..73fb5936 100644
--- a/src/modinfodialogimages.h
+++ b/src/modinfodialogimages.h
@@ -3,19 +3,29 @@
 
 #include "modinfodialog.h"
 
-class ThumbnailButton : public QPushButton
+class ScalableImage : public QWidget
 {
   Q_OBJECT;
 
 public:
-  ThumbnailButton(const QString& fullPath, QImage image);
+  ScalableImage(QImage image={});
+
+  void setImage(QImage image);
   const QImage& image() const;
 
+  bool hasHeightForWidth() const;
+  int heightForWidth(int w) const;
+
 signals:
-    void open(const QImage& image);
+    void clicked(const QImage& image);
+
+protected:
+  void paintEvent(QPaintEvent* e) override;
+  void mousePressEvent(QMouseEvent* e) override;
 
 private:
-  const QImage m_original;
+  QImage m_original, m_scaled;
+  int m_border;
 };
 
 
@@ -29,9 +39,10 @@ public:
 
 private:
   Ui::ModInfoDialog* ui;
+  ScalableImage* m_image;
 
   void add(const QString& fullPath);
-  void onOpen(const QImage& image);
+  void onClicked(const QImage& image);
 };
 
 #endif // MODINFODIALOGIMAGES_H