Qt: Show flags for region instead of text

src/duckstation-qt/consolesettingswidget.ui

@@ -109,6 +109,8 @@
    </item>
   </layout>
  </widget>
- <resources/>
+ <resources>
+  <include location="resources/icons.qrc"/>
+ </resources>
  <connections/>
 </ui>

src/duckstation-qt/duckstation-qt.vcxproj.filters

@@ -31,13 +31,13 @@
     <ClCompile Include="$(IntDir)moc_inputbindingwidgets.cpp" />
     <ClCompile Include="qtaudiostream.cpp" />
     <ClCompile Include="d3d11displaywindow.cpp" />
+    <ClCompile Include="$(IntDir)moc_d3d11displaywindow.cpp" />
   </ItemGroup>
   <ItemGroup>
     <ClInclude Include="qtsettingsinterface.h" />
     <ClInclude Include="qtutils.h" />
     <ClInclude Include="settingwidgetbinder.h" />
     <ClInclude Include="qtaudiostream.h" />
-    <ClInclude Include="d3d11displaywindow.h" />
   </ItemGroup>
   <ItemGroup>
     <Filter Include="resources">
@@ -60,6 +60,7 @@
     <QtMoc Include="gpusettingswidget.h" />
     <QtMoc Include="hotkeysettingswidget.h" />
     <QtMoc Include="inputbindingwidgets.h" />
+    <QtMoc Include="d3d11displaywindow.h" />
   </ItemGroup>
   <ItemGroup>
     <QtUi Include="consolesettingswidget.ui" />

src/duckstation-qt/gamelistwidget.cpp

@@ -2,6 +2,7 @@
 #include "core/settings.h"
 #include "qthostinterface.h"
 #include "qtutils.h"
+#include <QtGui/QPixmap>
 #include <QtWidgets/QHeaderView>
 
 class GameListModel : public QAbstractTableModel
@@ -21,6 +22,7 @@ public:
   GameListModel(GameList* game_list, QObject* parent = nullptr)
     : QAbstractTableModel(parent), m_game_list(game_list), m_size(static_cast<int>(m_game_list->GetEntryCount()))
   {
+    loadCommonImages();
   }
   ~GameListModel() = default;
 
@@ -45,14 +47,16 @@ public:
     if (!index.isValid())
       return {};
 
-    if (role != Qt::DisplayRole)
-      return {};
-
     const int row = index.row();
     if (row < 0 || row >= static_cast<int>(m_game_list->GetEntryCount()))
       return {};
 
     const GameList::GameListEntry& ge = m_game_list->GetEntries()[row];
+
+    switch (role)
+    {
+      case Qt::DisplayRole:
+      {
         switch (index.column())
         {
           case Column_Code:
@@ -62,7 +66,8 @@ public:
             return QString::fromStdString(ge.title);
 
           case Column_Region:
-        return QString(Settings::GetConsoleRegionName(ge.region));
+            // return QString(Settings::GetConsoleRegionName(ge.region));
+            return {};
 
           case Column_Size:
             return QString("%1 MB").arg(static_cast<double>(ge.total_size) / 1048576.0, 0, 'f', 2);
@@ -72,6 +77,34 @@ public:
         }
       }
 
+      case Qt::DecorationRole:
+      {
+        switch (index.column())
+        {
+          case Column_Region:
+          {
+            switch (ge.region)
+            {
+              case ConsoleRegion::NTSC_J:
+                return m_region_jp_pixmap;
+              case ConsoleRegion::NTSC_U:
+                return m_region_us_pixmap;
+              case ConsoleRegion::PAL:
+              default:
+                return m_region_eu_pixmap;
+            }
+          }
+
+          default:
+            return {};
+        }
+
+        default:
+          return {};
+      }
+    }
+  }
+
   QVariant headerData(int section, Qt::Orientation orientation, int role = Qt::DisplayRole) const override
   {
     if (orientation != Qt::Horizontal || role != Qt::DisplayRole)
@@ -110,8 +143,20 @@ public:
   }
 
 private:
+  void loadCommonImages()
+  {
+    // TODO: Use svg instead of png
+    m_region_jp_pixmap.load(QStringLiteral(":/icons/flag-jp.png"));
+    m_region_us_pixmap.load(QStringLiteral(":/icons/flag-us.png"));
+    m_region_eu_pixmap.load(QStringLiteral(":/icons/flag-eu.png"));
+  }
+
   GameList* m_game_list;
   int m_size;
+
+  QPixmap m_region_jp_pixmap;
+  QPixmap m_region_eu_pixmap;
+  QPixmap m_region_us_pixmap;
 };
 
 GameListWidget::GameListWidget(QWidget* parent /* = nullptr */) : QStackedWidget(parent) {}
@@ -135,6 +180,7 @@ void GameListWidget::initialize(QtHostInterface* host_interface)
   m_table_view->setCurrentIndex({});
   m_table_view->horizontalHeader()->setHighlightSections(false);
   m_table_view->verticalHeader()->hide();
+  m_table_view->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
   m_table_view->resizeColumnsToContents();
 
   connect(m_table_view, &QTableView::doubleClicked, this, &GameListWidget::onTableViewItemDoubleClicked);
@@ -161,5 +207,5 @@ void GameListWidget::resizeEvent(QResizeEvent* event)
 {
   QStackedWidget::resizeEvent(event);
 
-  QtUtils::ResizeColumnsForTableView(m_table_view, {100, -1, 100, 100});
+  QtUtils::ResizeColumnsForTableView(m_table_view, {100, -1, 60, 100});
 }

src/duckstation-qt/qtutils.cpp

@@ -4,6 +4,8 @@
 #include <QtGui/QKeyEvent>
 #include <QtWidgets/QDialog>
 #include <QtWidgets/QMainWindow>
+#include <QtWidgets/QScrollBar>
+#include <QtWidgets/QStyle>
 #include <QtWidgets/QTableView>
 #include <algorithm>
 #include <array>
@@ -34,7 +36,12 @@ void ResizeColumnsForTableView(QTableView* view, const std::initializer_list<int
   const int total_width =
     std::accumulate(widths.begin(), widths.end(), 0, [](int a, int b) { return a + std::max(b, 0); });
 
-  const int flex_width = std::max(view->width() - total_width - 2, 1);
+  const int padding = 2;
+  const int scrollbar_width = ((view->verticalScrollBar() && view->verticalScrollBar()->isVisible()) ||
+                               view->verticalScrollBarPolicy() == Qt::ScrollBarAlwaysOn) ?
+                                view->style()->pixelMetric(QStyle::PM_ScrollBarExtent) :
+                                0;
+  const int flex_width = std::max(view->width() - total_width - scrollbar_width - padding, 1);
 
   int column_index = 0;
   for (const int spec_width : widths)

src/duckstation-qt/resources/icons.qrc

@@ -1,5 +1,11 @@
 <RCC>
   <qresource>
+    <file>icons/flag-eu.png</file>
+    <file>icons/flag-eu.svg</file>
+    <file>icons/flag-jp.png</file>
+    <file>icons/flag-jp.svg</file>
+    <file>icons/flag-us.png</file>
+    <file>icons/flag-us.svg</file>
     <file>icons/applications-internet.png</file>
     <file>icons/system-search.png</file>
     <file>icons/list-add.png</file>

src/duckstation-qt/resources/icons/flag-eu.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 810 540">
+<desc>European flag</desc>
+<defs>
+<g id="s">
+<g id="c">
+<path id="t" d="M0,0v1h0.5z" transform="translate(0,-1)rotate(18)"/>
+<use xlink:href="#t" transform="scale(-1,1)"/>
+</g>
+<g id="a">
+<use xlink:href="#c" transform="rotate(72)"/>
+<use xlink:href="#c" transform="rotate(144)"/>
+</g>
+<use xlink:href="#a" transform="scale(-1,1)"/>
+</g>
+</defs>
+<rect fill="#039" width="810" height="540"/>
+<g fill="#fc0" transform="scale(30)translate(13.5,9)">
+<use xlink:href="#s" y="-6"/>
+<use xlink:href="#s" y="6"/>
+<g id="l">
+<use xlink:href="#s" x="-6"/>
+<use xlink:href="#s" transform="rotate(150)translate(0,6)rotate(66)"/>
+<use xlink:href="#s" transform="rotate(120)translate(0,6)rotate(24)"/>
+<use xlink:href="#s" transform="rotate(60)translate(0,6)rotate(12)"/>
+<use xlink:href="#s" transform="rotate(30)translate(0,6)rotate(42)"/>
+</g>
+<use xlink:href="#l" transform="scale(-1,1)"/>
+</g>
+</svg>

src/duckstation-qt/resources/icons/flag-jp.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600">
+<rect fill="#fff" height="600" width="900"/>
+<circle fill="#bc002d" cx="450" cy="300" r="180"/>
+</svg>

src/duckstation-qt/resources/icons/flag-us.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1235" height="650">
+<defs>
+<polygon id="pt" points="-0.1624598481164531,0 0,-0.5 0.1624598481164531,0" transform="scale(0.0616)" fill="#FFF"/>
+<g id="star"><use xlink:href="#pt" transform="rotate(-144)"/><use xlink:href="#pt" transform="rotate(-72)"/><use xlink:href="#pt"/><use xlink:href="#pt" transform="rotate(72)"/><use xlink:href="#pt" transform="rotate(144)"/></g>
+<g id="s5"><use xlink:href="#star" x="-0.252"/><use xlink:href="#star" x="-0.126"/><use xlink:href="#star"/><use xlink:href="#star" x="0.126"/><use xlink:href="#star" x="0.252"/></g>
+<g id="s6"><use xlink:href="#s5" x="-0.063"/><use xlink:href="#star" x="0.315"/></g>
+<g id="x4"><use xlink:href="#s6"/><use xlink:href="#s5" y="0.054"/><use xlink:href="#s6" y="0.108"/><use xlink:href="#s5" y="0.162"/></g>
+<g id="u"><use xlink:href="#x4" y="-0.216"/><use xlink:href="#x4"/><use xlink:href="#s6" y="0.216"/></g>
+<rect id="stripe" width="1235" height="50" fill="#B22234"/>
+</defs>
+<rect width="1235" height="650" fill="#FFF"/><use xlink:href="#stripe"/><use xlink:href="#stripe" y="100"/><use xlink:href="#stripe" y="200"/><use xlink:href="#stripe" y="300"/><use xlink:href="#stripe" y="400"/><use xlink:href="#stripe" y="500"/><use xlink:href="#stripe" y="600"/><rect width="494" height="350" fill="#3C3B6E"/><use xlink:href="#u" transform="translate(247,175) scale(650)"/></svg>