[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>
This commit is contained in:
crueter 2026-02-06 18:58:20 -05:00
parent b9e052b3a7
commit 8076c3814e
No known key found for this signature in database
GPG Key ID: 425ACD2D4830EBC6
8 changed files with 184 additions and 84 deletions

View File

@ -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};

View File

@ -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);

View File

@ -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>

View File

@ -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,6 +74,7 @@ void GameCard::paint(QPainter* painter, const QStyleOptionViewItem& option,
_iconsize, _iconsize);
}
if (UISettings::values.show_game_name) {
// if "none" is selected, pretend there's a
_iconsize = _iconsize ? _iconsize : 96;
@ -91,6 +100,7 @@ void GameCard::paint(QPainter* painter, const QStyleOptionViewItem& option,
painter->setFont(font);
painter->drawText(textRect, Qt::AlignHCenter | Qt::AlignTop | Qt::TextWordWrap, title);
}
painter->restore();
}

View File

@ -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,10 +1013,12 @@ 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;
if (UISettings::values.show_game_name) {
// the scaling on the card is kinda abysmal.
// TODO(crueter): refactor
switch (icon_size) {
case 128:
heightMargin = 70;
@ -1027,6 +1035,10 @@ void GameList::UpdateIconSize() {
heightMargin = 81;
break;
}
} else {
widthMargin = 24;
heightMargin = 24;
}
// TODO(crueter): Auto size
list_view->setGridSize(QSize(icon_size + widthMargin, icon_size + heightMargin));

View File

@ -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"/>

View File

@ -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);

View File

@ -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;