[desktop] Add icon-only mode to grid and improve design

- Move Game Icon Size to the main toolbar. It's cleaner that way
- Add a "Show Game Name" toggle that does as it says. Disabling it
  basically creates an "icons-only" mode. Useful for controller-only
  nav with big icons (TODO: maybe make a 192 size?)
- Fixed a crash with controller nav. Oops
- Rounded corners of the game icon in grid mode
- Fixed the scroll bar creating extra clamping range on the grid icons

TODOs for design:
- [ ] Row 1 type. Not sure what to do here tbh.
- [ ] Move around game list settings in configure_ui to make it clear
  that nothing there affects the grid view.
- [ ] 192x192 size? 256 feels too big on my 1440p screen whereas 128
  feels too small.

Signed-off-by: crueter <crueter@eden-emu.dev>

src/qt_common/config/uisettings.h

@@ -211,6 +211,7 @@ struct Values {
     Setting<u8> row_1_text_id{linkage, 3, "row_1_text_id", Category::UiGameList};
     Setting<u8> row_2_text_id{linkage, 2, "row_2_text_id", Category::UiGameList};
     Setting<Settings::GameListMode> game_list_mode{linkage, Settings::GameListMode::TreeView, "game_list_mode", Category::UiGameList};
+    Setting<bool> show_game_name{linkage, true, "show_game_name", Category::UiGameList};
 
     std::atomic_bool is_game_list_reload_pending{false};
     Setting<bool> cache_game_list{linkage, true, "cache_game_list", Category::UiGameList};

src/yuzu/configuration/configure_ui.cpp

@@ -6,7 +6,6 @@
 #include <array>
 #include <cstdlib>
 #include <set>
-#include <stdexcept>
 #include <string>
 #include <utility>
 
@@ -21,7 +20,6 @@
 
 #include "common/common_types.h"
 #include "common/fs/path_util.h"
-#include "common/logging/log.h"
 #include "common/settings.h"
 #include "common/settings_enums.h"
 #include "core/core.h"
@@ -32,13 +30,6 @@
 #include "qt_common/config/uisettings.h"
 
 namespace {
-constexpr std::array default_game_icon_sizes{
-    std::make_pair(0, QT_TRANSLATE_NOOP("ConfigureUI", "None")),
-    std::make_pair(32, QT_TRANSLATE_NOOP("ConfigureUI", "Small (32x32)")),
-    std::make_pair(64, QT_TRANSLATE_NOOP("ConfigureUI", "Standard (64x64)")),
-    std::make_pair(128, QT_TRANSLATE_NOOP("ConfigureUI", "Large (128x128)")),
-    std::make_pair(256, QT_TRANSLATE_NOOP("ConfigureUI", "Full Size (256x256)")),
-};
 
 constexpr std::array default_folder_icon_sizes{
     std::make_pair(0, QT_TRANSLATE_NOOP("ConfigureUI", "None")),
@@ -57,10 +48,6 @@ constexpr std::array row_text_names{
 };
 // clang-format on
 
-QString GetTranslatedGameIconSize(size_t index) {
-    return QCoreApplication::translate("ConfigureUI", default_game_icon_sizes[index].second);
-}
-
 QString GetTranslatedFolderIconSize(size_t index) {
     return QCoreApplication::translate("ConfigureUI", default_folder_icon_sizes[index].second);
 }
@@ -127,8 +114,6 @@ ConfigureUi::ConfigureUi(Core::System& system_, QWidget* parent)
     connect(ui->show_types, &QCheckBox::STATE_CHANGED, this, &ConfigureUi::RequestGameListUpdate);
     connect(ui->show_play_time, &QCheckBox::STATE_CHANGED, this,
             &ConfigureUi::RequestGameListUpdate);
-    connect(ui->game_icon_size_combobox, QOverload<int>::of(&QComboBox::currentIndexChanged), this,
-            &ConfigureUi::RequestGameListUpdate);
     connect(ui->folder_icon_size_combobox, QOverload<int>::of(&QComboBox::currentIndexChanged),
             this, &ConfigureUi::RequestGameListUpdate);
     connect(ui->row_1_text_combobox, QOverload<int>::of(&QComboBox::currentIndexChanged), this,
@@ -172,7 +157,6 @@ void ConfigureUi::ApplyConfiguration() {
     UISettings::values.show_size = ui->show_size->isChecked();
     UISettings::values.show_types = ui->show_types->isChecked();
     UISettings::values.show_play_time = ui->show_play_time->isChecked();
-    UISettings::values.game_icon_size = ui->game_icon_size_combobox->currentData().toUInt();
     UISettings::values.folder_icon_size = ui->folder_icon_size_combobox->currentData().toUInt();
     UISettings::values.row_1_text_id = ui->row_1_text_combobox->currentData().toUInt();
     UISettings::values.row_2_text_id = ui->row_2_text_combobox->currentData().toUInt();
@@ -202,8 +186,6 @@ void ConfigureUi::SetConfiguration() {
     ui->show_size->setChecked(UISettings::values.show_size.GetValue());
     ui->show_types->setChecked(UISettings::values.show_types.GetValue());
     ui->show_play_time->setChecked(UISettings::values.show_play_time.GetValue());
-    ui->game_icon_size_combobox->setCurrentIndex(
-        ui->game_icon_size_combobox->findData(UISettings::values.game_icon_size.GetValue()));
     ui->folder_icon_size_combobox->setCurrentIndex(
         ui->folder_icon_size_combobox->findData(UISettings::values.folder_icon_size.GetValue()));
 
@@ -231,11 +213,6 @@ void ConfigureUi::changeEvent(QEvent* event) {
 void ConfigureUi::RetranslateUI() {
     ui->retranslateUi(this);
 
-    for (int i = 0; i < ui->game_icon_size_combobox->count(); i++) {
-        ui->game_icon_size_combobox->setItemText(i,
-                                                 GetTranslatedGameIconSize(static_cast<size_t>(i)));
-    }
-
     for (int i = 0; i < ui->folder_icon_size_combobox->count(); i++) {
         ui->folder_icon_size_combobox->setItemText(
             i, GetTranslatedFolderIconSize(static_cast<size_t>(i)));
@@ -270,10 +247,6 @@ void ConfigureUi::InitializeLanguageComboBox() {
 }
 
 void ConfigureUi::InitializeIconSizeComboBox() {
-    for (size_t i = 0; i < default_game_icon_sizes.size(); i++) {
-        const auto size = default_game_icon_sizes[i].first;
-        ui->game_icon_size_combobox->addItem(GetTranslatedGameIconSize(i), size);
-    }
     for (size_t i = 0; i < default_folder_icon_sizes.size(); i++) {
         const auto size = default_folder_icon_sizes[i].first;
         ui->folder_icon_size_combobox->addItem(GetTranslatedFolderIconSize(i), size);

src/yuzu/configuration/configure_ui.ui

@@ -7,7 +7,7 @@
     <x>0</x>
     <y>0</y>
     <width>363</width>
-    <height>603</height>
+    <height>613</height>
    </rect>
   </property>
   <property name="windowTitle">
@@ -111,20 +111,6 @@
           </property>
          </widget>
         </item>
-        <item>
-         <layout class="QHBoxLayout" name="game_icon_size_qhbox_layout_2">
-          <item>
-           <widget class="QLabel" name="game_icon_size_label">
-            <property name="text">
-             <string>Game Icon Size:</string>
-            </property>
-           </widget>
-          </item>
-          <item>
-           <widget class="QComboBox" name="game_icon_size_combobox"/>
-          </item>
-         </layout>
-        </item>
         <item>
          <layout class="QHBoxLayout" name="folder_icon_size_qhbox_layout_2">
           <item>
@@ -221,7 +207,7 @@
                <string>TextLabel</string>
               </property>
               <property name="alignment">
-               <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
+               <set>Qt::AlignmentFlag::AlignRight|Qt::AlignmentFlag::AlignTrailing|Qt::AlignmentFlag::AlignVCenter</set>
               </property>
              </widget>
             </item>
@@ -251,7 +237,7 @@
    <item>
     <spacer name="verticalSpacer">
      <property name="orientation">
-      <enum>Qt::Vertical</enum>
+      <enum>Qt::Orientation::Vertical</enum>
      </property>
      <property name="sizeHint" stdset="0">
       <size>

src/yuzu/game/game_card.cpp

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-or-later
 
 #include <QPainter>
+#include <QPainterPath>
 #include "game_card.h"
 #include "qt_common/config/uisettings.h"
 
@@ -32,7 +33,7 @@ void GameCard::paint(QPainter* painter, const QStyleOptionViewItem& option,
         borderColor = palette.highlight().color().lighter(150);
         textColor = palette.highlightedText().color();
     } else if (option.state & QStyle::State_MouseOver) {
-        backgroundColor = backgroundColor.lighter(110);
+        backgroundColor = backgroundColor.lighter(120);
     }
 
     // bg
@@ -40,7 +41,7 @@ void GameCard::paint(QPainter* painter, const QStyleOptionViewItem& option,
     painter->setPen(QPen(borderColor, 1));
     painter->drawRoundedRect(cardRect, 10, 10);
 
-    static constexpr const int padding = 10;
+    static constexpr const int padding = 8;
 
     // icon
     int _iconsize = UISettings::values.game_icon_size.GetValue();
@@ -57,7 +58,14 @@ void GameCard::paint(QPainter* painter, const QStyleOptionViewItem& option,
 
         iconRect = QRect(x, y, scaledSize.width(), scaledSize.height());
 
+        painter->setRenderHint(QPainter::Antialiasing, true);
         painter->setRenderHint(QPainter::SmoothPixmapTransform, true);
+
+        // round image edges
+        QPainterPath path;
+        path.addRoundedRect(iconRect, 10, 10);
+        painter->setClipPath(path);
+
         painter->drawPixmap(iconRect, iconPixmap);
     } else {
         // if there is no icon just draw a blank rect
@@ -66,31 +74,33 @@ void GameCard::paint(QPainter* painter, const QStyleOptionViewItem& option,
                          _iconsize, _iconsize);
     }
 
-    // if "none" is selected, pretend there's a
+    if (UISettings::values.show_game_name) {
-    _iconsize = _iconsize ? _iconsize : 96;
+        // if "none" is selected, pretend there's a
+        _iconsize = _iconsize ? _iconsize : 96;
 
-    // padding + text
+        // padding + text
-    QRect textRect = cardRect;
+        QRect textRect = cardRect;
-    textRect.setTop(iconRect.bottom() + 8);
+        textRect.setTop(iconRect.bottom() + 8);
-    textRect.adjust(padding, 0, -padding, -padding);
+        textRect.adjust(padding, 0, -padding, -padding);
 
-    // We are already crammed on space, ignore the row 2
+        // We are already crammed on space, ignore the row 2
-    QString title = index.data(Qt::DisplayRole).toString();
+        QString title = index.data(Qt::DisplayRole).toString();
-    title = title.split(QLatin1Char('\n')).first();
+        title = title.split(QLatin1Char('\n')).first();
 
-    // now draw text
+        // now draw text
-    painter->setPen(textColor);
+        painter->setPen(textColor);
-    QFont font = option.font;
+        QFont font = option.font;
-    font.setBold(true);
+        font.setBold(true);
 
-    // TODO(crueter): fix this abysmal scaling
+        // TODO(crueter): fix this abysmal scaling
-    // If "none" is selected, then default to 8.5 point font.
+        // If "none" is selected, then default to 8.5 point font.
-    font.setPointSize(1 + std::max(7.0, _iconsize ? std::sqrt(_iconsize * 0.6) : 7.5));
+        font.setPointSize(1 + std::max(7.0, _iconsize ? std::sqrt(_iconsize * 0.6) : 7.5));
 
-    // TODO(crueter): elide mode
+        // TODO(crueter): elide mode
-    painter->setFont(font);
+        painter->setFont(font);
 
-    painter->drawText(textRect, Qt::AlignHCenter | Qt::AlignTop | Qt::TextWordWrap, title);
+        painter->drawText(textRect, Qt::AlignHCenter | Qt::AlignTop | Qt::TextWordWrap, title);
+    }
 
     painter->restore();
 }

src/yuzu/game/game_list.cpp

@@ -20,6 +20,7 @@
 #include <QAbstractItemView>
 #include <QScroller>
 #include <QScrollerProperties>
+#include <qnamespace.h>
 #include "common/common_types.h"
 #include "common/logging/log.h"
 #include "common/settings.h"
@@ -399,6 +400,11 @@ GameList::GameList(FileSys::VirtualFilesystem vfs_, FileSys::ManualContentProvid
     list_view->setSelectionMode(QAbstractItemView::SingleSelection);
     list_view->setVerticalScrollMode(QAbstractItemView::ScrollPerPixel);
     list_view->setHorizontalScrollMode(QAbstractItemView::ScrollPerPixel);
+
+    // Forcefully disable scroll bar, prevents thing where game list items
+    // will start clamping prematurely.
+    list_view->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+
     list_view->setEditTriggers(QAbstractItemView::NoEditTriggers);
     list_view->setContextMenuPolicy(Qt::CustomContextMenu);
     list_view->setGridSize(QSize(140, 160));
@@ -1007,25 +1013,31 @@ void GameList::UpdateIconSize() {
     // Update sizes and stuff for the list view
     const u32 icon_size = UISettings::values.game_icon_size.GetValue();
 
-    // the scaling on the card is kinda abysmal.
-    // TODO(crueter): refactor
     int heightMargin = 0;
     int widthMargin = 80;
-    switch (icon_size) {
+
-    case 128:
+    if (UISettings::values.show_game_name) {
-        heightMargin = 70;
+        // the scaling on the card is kinda abysmal.
-        break;
+        // TODO(crueter): refactor
-    case 0:
+        switch (icon_size) {
-        widthMargin = 120;
+        case 128:
-        heightMargin = 120;
+            heightMargin = 70;
-        break;
+            break;
-    case 64:
+        case 0:
-        heightMargin = 80;
+            widthMargin = 120;
-        break;
+            heightMargin = 120;
-    case 32:
+            break;
-    case 256:
+        case 64:
-        heightMargin = 81;
+            heightMargin = 80;
-        break;
+            break;
+        case 32:
+        case 256:
+            heightMargin = 81;
+            break;
+        }
+    } else {
+        widthMargin = 24;
+        heightMargin = 24;
     }
 
     // TODO(crueter): Auto size

src/yuzu/main.ui

@@ -112,6 +112,11 @@
      <addaction name="action_Tree_View"/>
      <addaction name="action_Grid_View"/>
     </widget>
+    <widget class="QMenu" name="menuGame_Icon_Size">
+     <property name="title">
+      <string>Game &amp;Icon Size</string>
+     </property>
+    </widget>
     <action name="action_Reset_Window_Size_720">
      <property name="text">
       <string>Reset Window Size to &amp;720p</string>
@@ -145,6 +150,8 @@
     <addaction name="menu_Reset_Window_Size"/>
     <addaction name="menu_View_Debugging"/>
     <addaction name="menu_Game_List_Mode"/>
+    <addaction name="menuGame_Icon_Size"/>
+    <addaction name="action_Show_Game_Name"/>
    </widget>
    <widget class="QMenu" name="menu_Multiplayer">
     <property name="enabled">
@@ -586,6 +593,24 @@
     <string>&amp;Grid View</string>
    </property>
   </action>
+  <action name="actionGame_Icon_Size">
+   <property name="text">
+    <string>Game Icon Size</string>
+   </property>
+  </action>
+  <action name="actionNone">
+   <property name="text">
+    <string>None</string>
+   </property>
+  </action>
+  <action name="action_Show_Game_Name">
+   <property name="checkable">
+    <bool>true</bool>
+   </property>
+   <property name="text">
+    <string>Show Game &amp;Name</string>
+   </property>
+  </action>
  </widget>
  <resources>
   <include location="yuzu.qrc"/>

src/yuzu/main_window.cpp

@@ -73,6 +73,7 @@
 #include <QStatusBar>
 #include <QtConcurrentRun>
 #include <QMimeData>
+#include <QActionGroup>
 
 // Qt Common //
 #include "qt_common/config/uisettings.h"
@@ -377,6 +378,22 @@ static QString PrettyProductName() {
     return QSysInfo::prettyProductName();
 }
 
+namespace {
+
+constexpr std::array<std::pair<u32, const char *>, 5> default_game_icon_sizes{
+    std::make_pair(0, QT_TRANSLATE_NOOP("MainWindow", "None")),
+    std::make_pair(32, QT_TRANSLATE_NOOP("MainWindow", "Small (32x32)")),
+    std::make_pair(64, QT_TRANSLATE_NOOP("MainWindow", "Standard (64x64)")),
+    std::make_pair(128, QT_TRANSLATE_NOOP("MainWindow", "Large (128x128)")),
+    std::make_pair(256, QT_TRANSLATE_NOOP("MainWindow", "Full Size (256x256)")),
+};
+
+QString GetTranslatedGameIconSize(size_t index) {
+    return QCoreApplication::translate("MainWindow", default_game_icon_sizes[index].second);
+}
+
+}
+
 #ifndef _WIN32
 // TODO(crueter): carboxyl does this, is it needed in qml?
 inline static bool isDarkMode() {
@@ -1607,6 +1624,33 @@ void MainWindow::ConnectMenuEvents() {
     connect_menu(ui->action_Grid_View, &MainWindow::SetGridView);
     connect_menu(ui->action_Tree_View, &MainWindow::SetTreeView);
 
+    game_size_actions = new QActionGroup(this);
+    game_size_actions->setExclusive(true);
+
+    for (size_t i = 0; i < default_game_icon_sizes.size(); i++) {
+        const auto current_size = UISettings::values.game_icon_size.GetValue();
+        const auto size = default_game_icon_sizes[i].first;
+        QAction *action = ui->menuGame_Icon_Size->addAction(GetTranslatedGameIconSize(i));
+        action->setCheckable(true);
+
+        if (current_size == size) action->setChecked(true);
+
+        game_size_actions->addAction(action);
+
+        connect(action, &QAction::triggered, this, [this, size](bool checked) {
+            if (checked) {
+                UISettings::values.game_icon_size.SetValue(size);
+                CheckIconSize();
+                game_list->RefreshGameDirectory();
+            }
+        });
+    }
+
+    CheckIconSize();
+
+    ui->action_Show_Game_Name->setChecked(UISettings::values.show_game_name.GetValue());
+    connect(ui->action_Show_Game_Name, &QAction::triggered, this, &MainWindow::ToggleShowGameName);
+
     // Multiplayer
     connect(ui->action_View_Lobby, &QAction::triggered, multiplayer_state,
             &MultiplayerState::OnViewLobby);
@@ -3385,6 +3429,9 @@ void MainWindow::SetGameListMode(Settings::GameListMode mode) {
     ui->action_Tree_View->setChecked(mode == Settings::GameListMode::TreeView);
 
     UISettings::values.game_list_mode = mode;
+    ui->action_Show_Game_Name->setEnabled(mode == Settings::GameListMode::GridView);
+
+    CheckIconSize();
     game_list->ResetViewMode();
 }
 
@@ -3396,6 +3443,43 @@ void MainWindow::SetTreeView() {
     SetGameListMode(Settings::GameListMode::TreeView);
 }
 
+void MainWindow::CheckIconSize() {
+    // When in grid view mode, with text off
+    // there is no point in having icons turned off..
+    auto actions = game_size_actions->actions();
+    if (UISettings::values.game_list_mode.GetValue() == Settings::GameListMode::GridView &&
+        !UISettings::values.show_game_name.GetValue()) {
+        u32 newSize = UISettings::values.game_icon_size.GetValue();
+        if (newSize == 0) {
+            newSize = 64;
+            UISettings::values.game_icon_size.SetValue(newSize);
+        }
+
+        // Then disable the "none" action and update that menu.
+        for (size_t i = 0; i < default_game_icon_sizes.size(); i++) {
+            const auto current_size = newSize;
+            const auto size = default_game_icon_sizes[i].first;
+            if (current_size == size) actions.at(i)->setChecked(true);
+        }
+
+        // Update this if you add anything before None.
+        actions.at(0)->setEnabled(false);
+    } else {
+        actions.at(0)->setEnabled(true);
+    }
+}
+
+void MainWindow::ToggleShowGameName() {
+    auto &setting = UISettings::values.show_game_name;
+    const bool newValue = !setting.GetValue();
+    ui->action_Show_Game_Name->setChecked(newValue);
+    setting.SetValue(newValue);
+
+    CheckIconSize();
+
+    game_list->RefreshGameDirectory();
+}
+
 void MainWindow::OnConfigure() {
     const auto old_theme = UISettings::values.theme;
     const bool old_discord_presence = UISettings::values.enable_discord_presence.GetValue();
@@ -3916,7 +4000,6 @@ void MainWindow::OnDataDialog() {
 
     // refresh stuff in case it was cleared
     OnGameListRefresh();
-
 }
 
 void MainWindow::OnToggleFilterBar() {
@@ -3939,7 +4022,6 @@ void MainWindow::OnGameListRefresh() {
     SetFirmwareVersion();
 }
 
-
 void MainWindow::LaunchFirmwareApplet(u64 raw_program_id, std::optional<Service::NFP::CabinetMode> cabinet_mode) {
     auto const program_id = Service::AM::AppletProgramId(raw_program_id);
     auto result = FirmwareManager::VerifyFirmware(*QtCommon::system.get());
@@ -4658,6 +4740,11 @@ void MainWindow::OnLanguageChanged(const QString& locale) {
         qApp->removeTranslator(&translator);
     }
 
+    QList<QAction *> actions = game_size_actions->actions();
+    for (size_t i = 0; i < default_game_icon_sizes.size(); i++) {
+        actions.at(i)->setText(GetTranslatedGameIconSize(i));
+    }
+
     UISettings::values.language = locale.toStdString();
     LoadTranslation();
     ui->retranslateUi(this);

src/yuzu/main_window.h

@@ -15,6 +15,7 @@
 #include <QPushButton>
 #include <QTimer>
 #include <QTranslator>
+#include <qaction.h>
 
 #include "common/common_types.h"
 #include "common/settings_enums.h"
@@ -407,6 +408,9 @@ private slots:
     void SetGridView();
     void SetTreeView();
 
+    void CheckIconSize();
+    void ToggleShowGameName();
+
     void LaunchFirmwareApplet(u64 program_id, std::optional<Service::NFP::CabinetMode> mode);
     void OnCreateHomeMenuDesktopShortcut();
     void OnCreateHomeMenuApplicationMenuShortcut();
@@ -532,6 +536,8 @@ private:
 
     QString startup_icon_theme;
 
+    QActionGroup *game_size_actions;
+
     // Debugger panes
     ControllerDialog* controller_dialog = nullptr;