Skip to content

Commit

Permalink
new visual theme for the Qt wallet
Browse files Browse the repository at this point in the history
  • Loading branch information
@drmancini
drmancini committed Aug 12, 2024
1 parent b9da922 commit 5f2d1dc
Show file tree
Hide file tree
Showing 159 changed files with 787 additions and 566 deletions.
86 changes: 55 additions & 31 deletions src/Makefile.qt.include
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,37 +190,39 @@ QT_RES_ICONS = \
qt/res/icons/about_qt.png \
qt/res/icons/add.png \
qt/res/icons/address-book.png \
qt/res/icons/arrow_left.png \
qt/res/icons/arrow_right.png \
qt/res/icons/browse.png \
qt/res/icons/clock0.png \
qt/res/icons/clock1.png \
qt/res/icons/clock2.png \
qt/res/icons/clock3.png \
qt/res/icons/clock4.png \
qt/res/icons/clock5.png \
qt/res/icons/clock6.png \
qt/res/icons/configure.png \
qt/res/icons/connect0_16.png \
qt/res/icons/connect1_16.png \
qt/res/icons/connect2_16.png \
qt/res/icons/connect3_16.png \
qt/res/icons/connect4_16.png \
qt/res/icons/console_remove.png \
qt/res/icons/debugwindow.png \
qt/res/icons/connect_0.png \
qt/res/icons/connect_1.png \
qt/res/icons/connect_2.png \
qt/res/icons/connect_3.png \
qt/res/icons/connect_4.png \
qt/res/icons/editcopy.png \
qt/res/icons/editpaste.png \
qt/res/icons/edit.png \
qt/res/icons/export.png \
qt/res/icons/eye_minus.png \
qt/res/icons/eye_plus.png \
qt/res/icons/eye.png \
qt/res/icons/filesave.png \
qt/res/icons/fontbigger.png \
qt/res/icons/fontsmaller.png \
qt/res/icons/hd_enabled.png \
qt/res/icons/key.png \
qt/res/icons/lock_closed.png \
qt/res/icons/lock_open.png \
qt/res/icons/menu_assets.png \
qt/res/icons/menu_coinjoin.png \
qt/res/icons/menu_create_asset.png \
qt/res/icons/menu_overview.png \
qt/res/icons/menu_receive.png \
qt/res/icons/menu_send_asset.png \
qt/res/icons/menu_send.png \
qt/res/icons/menu_smartnodes.png \
qt/res/icons/menu_transactions.png \
qt/res/icons/menu_update_asset.png \
qt/res/icons/proxy.png \
qt/res/icons/quit.png \
qt/res/icons/raptoreum.ico \
Expand All @@ -230,13 +232,8 @@ QT_RES_ICONS = \
qt/res/icons/remove.png \
qt/res/icons/send.png \
qt/res/icons/synced.png \
qt/res/icons/transaction0.png \
qt/res/icons/transaction2.png \
qt/res/icons/transaction_abandoned.png \
qt/res/icons/transaction_locked.png \
qt/res/icons/tx_inout.png \
qt/res/icons/tx_input.png \
qt/res/icons/tx_output.png \
qt/res/icons/warning.png

BITCOIN_QT_BASE_CPP = \
Expand Down Expand Up @@ -318,21 +315,29 @@ endif

QT_RES_IMAGES = \
qt/res/images/arrow_down_dark.png \
qt/res/images/arrow_down_dark_disabled.png \
qt/res/images/arrow_down_dark_hover.png \
qt/res/images/arrow_down_light.png \
qt/res/images/arrow_down_light_disabled.png \
qt/res/images/arrow_down_light_hover.png \
qt/res/images/arrow_left_dark.png \
qt/res/images/arrow_left_dark_disabled.png \
qt/res/images/arrow_left_dark_hover.png \
qt/res/images/arrow_left_light.png \
qt/res/images/arrow_left_light_disabled.png \
qt/res/images/arrow_left_light_hover.png \
qt/res/images/arrow_right_dark.png \
qt/res/images/arrow_right_dark_disabled.png \
qt/res/images/arrow_right_dark_hover.png \
qt/res/images/arrow_right_light.png \
qt/res/images/arrow_right_light_disabled.png \
qt/res/images/arrow_right_light_hover.png \
qt/res/images/arrow_up_dark.png \
qt/res/images/arrow_up_dark_disabled.png \
qt/res/images/arrow_up_dark_hover.png \
qt/res/images/arrow_up_light.png \
qt/res/images/arrow_light_down_normal.png \
qt/res/images/arrow_light_down_hover.png \
qt/res/images/arrow_light_left_normal.png \
qt/res/images/arrow_light_left_hover.png \
qt/res/images/arrow_light_right_normal.png \
qt/res/images/arrow_light_right_hover.png \
qt/res/images/arrow_light_up_normal.png \
qt/res/images/arrow_light_up_hover.png \
qt/res/images/arrow_up_light_disabled.png \
qt/res/images/arrow_up_light_hover.png \
qt/res/images/checkbox_normal_dark.png \
qt/res/images/checkbox_normal_hover_dark.png \
qt/res/images/checkbox_normal_disabled_dark.png \
Expand All @@ -351,8 +356,8 @@ QT_RES_IMAGES = \
qt/res/images/checkbox_partly_checked_light.png \
qt/res/images/checkbox_partly_checked_hover_light.png \
qt/res/images/checkbox_partly_checked_disabled_light.png \
qt/res/images/raptoreum_logo_toolbar.png \
qt/res/images/raptoreum_logo_toolbar_blue.png \
qt/res/images/raptoreum_logo_toolbar_dark.png \
qt/res/images/raptoreum_logo_toolbar_light.png \
qt/res/images/radio_normal_dark.png \
qt/res/images/radio_normal_hover_dark.png \
qt/res/images/radio_checked_dark.png \
Expand All @@ -365,7 +370,8 @@ QT_RES_IMAGES = \
qt/res/images/radio_checked_hover_light.png \
qt/res/images/radio_normal_disabled_light.png \
qt/res/images/radio_checked_disabled_light.png \
qt/res/images/splash.png
qt/res/images/splash_dark.png \
qt/res/images/splash_light.png

QT_RES_CSS = \
qt/res/css/dark.css \
Expand All @@ -391,7 +397,25 @@ QT_RES_FONTS = \
qt/res/fonts/Montserrat/Montserrat-SemiBold.otf \
qt/res/fonts/Montserrat/Montserrat-SemiBoldItalic.otf \
qt/res/fonts/Montserrat/Montserrat-Thin.otf \
qt/res/fonts/Montserrat/Montserrat-ThinItalic.otf
qt/res/fonts/Montserrat/Montserrat-ThinItalic.otf \
qt/res/fonts/Manrope/Manrope-Black.otf \
qt/res/fonts/Manrope/Manrope-BlackItalic.otf \
qt/res/fonts/Manrope/Manrope-Bold.otf \
qt/res/fonts/Manrope/Manrope-BoldItalic.otf \
qt/res/fonts/Manrope/Manrope-ExtraBold.otf \
qt/res/fonts/Manrope/Manrope-ExtraBoldItalic.otf \
qt/res/fonts/Manrope/Manrope-ExtraLight.otf \
qt/res/fonts/Manrope/Manrope-ExtraLightItalic.otf \
qt/res/fonts/Manrope/Manrope-Italic.otf \
qt/res/fonts/Manrope/Manrope-Light.otf \
qt/res/fonts/Manrope/Manrope-LightItalic.otf \
qt/res/fonts/Manrope/Manrope-Medium.otf \
qt/res/fonts/Manrope/Manrope-MediumItalic.otf \
qt/res/fonts/Manrope/Manrope-Regular.otf \
qt/res/fonts/Manrope/Manrope-SemiBold.otf \
qt/res/fonts/Manrope/Manrope-SemiBoldItalic.otf \
qt/res/fonts/Manrope/Manrope-Thin.otf \
qt/res/fonts/Manrope/Manrope-ThinItalic.otf

QT_RES_MOVIES = $(wildcard $(srcdir)/qt/res/movies/spinner-*.png)

Expand Down
2 changes: 2 additions & 0 deletions src/qt/appearancewidget.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,11 @@ AppearanceWidget::AppearanceWidget(QWidget *parent) :

GUIUtil::FontFamily fontSystem = GUIUtil::FontFamily::SystemDefault;
GUIUtil::FontFamily fontMontserrat = GUIUtil::FontFamily::Montserrat;
GUIUtil::FontFamily fontManrope = GUIUtil::FontFamily::Manrope;

ui->fontFamily->addItem(GUIUtil::fontFamilyToString(fontSystem), QVariant(static_cast<int>(fontSystem)));
ui->fontFamily->addItem(GUIUtil::fontFamilyToString(fontMontserrat), QVariant(static_cast<int>(fontMontserrat)));
ui->fontFamily->addItem(GUIUtil::fontFamilyToString(fontManrope), QVariant(static_cast<int>(fontManrope)));

updateWeightSlider();

Expand Down
73 changes: 45 additions & 28 deletions src/qt/bitcoingui.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -397,28 +397,28 @@ void BitcoinGUI::stopConnectingAnimation() {
}

void BitcoinGUI::createActions() {
sendCoinsMenuAction = new QAction(tr("&Send"), this);
sendCoinsMenuAction = new QAction(tr(" Send"), this);
sendCoinsMenuAction->setStatusTip(tr("Send coins to a Raptoreum address"));
sendCoinsMenuAction->setToolTip(sendCoinsMenuAction->statusTip());

QString strCoinJoinName = QString::fromStdString(gCoinJoinName);
coinJoinCoinsMenuAction = new QAction(QString("&%1").arg(strCoinJoinName), this);
coinJoinCoinsMenuAction = new QAction(QString(" %1").arg(strCoinJoinName), this);
coinJoinCoinsMenuAction->setStatusTip(tr("Send %1 funds to a Raptoreum address").arg(strCoinJoinName));
coinJoinCoinsMenuAction->setToolTip(coinJoinCoinsMenuAction->statusTip());

receiveCoinsMenuAction = new QAction(tr("&Receive"), this);
receiveCoinsMenuAction = new QAction(tr(" Receive"), this);
receiveCoinsMenuAction->setStatusTip(tr("Request payments (generates QR codes and raptoreum: URIs)"));
receiveCoinsMenuAction->setToolTip(receiveCoinsMenuAction->statusTip());

sendAssetsMenuAction = new QAction(tr("&Send Asset"), this);
sendAssetsMenuAction = new QAction(tr(" Send Asset"), this);
sendAssetsMenuAction->setStatusTip(tr("Send assets to a Raptoreum address"));
sendAssetsMenuAction->setToolTip(sendAssetsMenuAction->statusTip());

createAssetsMenuAction = new QAction(tr("&Create Asset"), this);
createAssetsMenuAction = new QAction(tr(" Create Asset"), this);
createAssetsMenuAction->setStatusTip(tr("Create a new asset"));
createAssetsMenuAction->setToolTip(createAssetsMenuAction->statusTip());

updateAssetsMenuAction = new QAction(tr("&Update Asset"), this);
updateAssetsMenuAction = new QAction(tr(" Update Asset"), this);
updateAssetsMenuAction->setStatusTip(tr("Update asset"));
updateAssetsMenuAction->setToolTip(updateAssetsMenuAction->statusTip());

Expand Down Expand Up @@ -714,59 +714,84 @@ void BitcoinGUI::createToolBars() {
toolbar->setToolButtonStyle(Qt::ToolButtonTextOnly);
toolbar->setMovable(false); // remove unused icon in upper left corner

QLabel *logoLabel = new QLabel();
logoLabel->setObjectName("lblToolbarLogo");
logoLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Minimum);
appToolBarLogoAction = toolbar->addWidget(logoLabel);

tabGroup = new QButtonGroup(this);

overviewButton = new QToolButton(this);
overviewButton->setText(tr("&Overview"));
overviewButton->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
overviewButton->setIcon(GUIUtil::getIcon("menu_overview", GUIUtil::ThemedColor::PRIMARY));
overviewButton->setText(tr(" Overview"));
overviewButton->setStatusTip(tr("Show general overview of wallet"));
tabGroup->addButton(overviewButton);

sendCoinsButton = new QToolButton(this);
sendCoinsButton->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
sendCoinsButton->setIcon(GUIUtil::getIcon("menu_send", GUIUtil::ThemedColor::PRIMARY));
sendCoinsButton->setText(sendCoinsMenuAction->text());
sendCoinsButton->setStatusTip(sendCoinsMenuAction->statusTip());
tabGroup->addButton(sendCoinsButton);

receiveCoinsButton = new QToolButton(this);
receiveCoinsButton->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
receiveCoinsButton->setIcon(GUIUtil::getIcon("menu_receive", GUIUtil::ThemedColor::PRIMARY));
receiveCoinsButton->setText(receiveCoinsMenuAction->text());
receiveCoinsButton->setStatusTip(receiveCoinsMenuAction->statusTip());
tabGroup->addButton(receiveCoinsButton);

historyButton = new QToolButton(this);
historyButton->setText(tr("&Transactions"));
historyButton->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
historyButton->setIcon(GUIUtil::getIcon("menu_transactions", GUIUtil::ThemedColor::PRIMARY));
historyButton->setText(tr(" Transactions"));
historyButton->setStatusTip(tr("Browse transaction history"));
tabGroup->addButton(historyButton);

coinJoinCoinsButton = new QToolButton(this);
coinJoinCoinsButton->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
coinJoinCoinsButton->setIcon(GUIUtil::getIcon("menu_coinjoin", GUIUtil::ThemedColor::PRIMARY));
coinJoinCoinsButton->setText(coinJoinCoinsMenuAction->text());
coinJoinCoinsButton->setStatusTip(coinJoinCoinsMenuAction->statusTip());
tabGroup->addButton(coinJoinCoinsButton);

QSettings settings;
if (settings.value("fShowSmartnodesTab").toBool()) {
smartnodeButton = new QToolButton(this);
smartnodeButton->setText(tr("&Smartnodes"));
smartnodeButton->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
smartnodeButton->setIcon(GUIUtil::getIcon("menu_smartnodes", GUIUtil::ThemedColor::PRIMARY));
smartnodeButton->setText(tr(" Smartnodes"));
smartnodeButton->setStatusTip(tr("Browse smartnodes"));
tabGroup->addButton(smartnodeButton);
connect(smartnodeButton, &QToolButton::clicked, this, &BitcoinGUI::gotoSmartnodePage);
smartnodeButton->setEnabled(true);
}

myAssetsButton = new QToolButton(this);
myAssetsButton->setText("&Assets");
myAssetsButton->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
myAssetsButton->setIcon(GUIUtil::getIcon("menu_assets", GUIUtil::ThemedColor::PRIMARY));
myAssetsButton->setText(" Assets");
myAssetsButton->setStatusTip("Show general overview of assets");
tabGroup->addButton(myAssetsButton);

sendAssetsButton = new QToolButton(this);
sendAssetsButton->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
sendAssetsButton->setIcon(GUIUtil::getIcon("menu_send_asset", GUIUtil::ThemedColor::PRIMARY));
sendAssetsButton->setText(sendAssetsMenuAction->text());
sendAssetsButton->setStatusTip(sendAssetsMenuAction->statusTip());
tabGroup->addButton(sendAssetsButton);

createAssetsButton = new QToolButton(this);
createAssetsButton->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
createAssetsButton->setIcon(GUIUtil::getIcon("menu_create_asset", GUIUtil::ThemedColor::PRIMARY));
createAssetsButton->setText(createAssetsMenuAction->text());
createAssetsButton->setStatusTip(createAssetsMenuAction->statusTip());
tabGroup->addButton(createAssetsButton);

updateAssetsButton = new QToolButton(this);
updateAssetsButton->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
updateAssetsButton->setIcon(GUIUtil::getIcon("menu_update_asset", GUIUtil::ThemedColor::PRIMARY));
updateAssetsButton->setText(updateAssetsMenuAction->text());
updateAssetsButton->setStatusTip(updateAssetsMenuAction->statusTip());
tabGroup->addButton(updateAssetsButton);
Expand All @@ -781,9 +806,6 @@ void BitcoinGUI::createToolBars() {
connect(receiveCoinsButton, &QToolButton::clicked, this, &BitcoinGUI::gotoReceiveCoinsPage);
connect(historyButton, &QToolButton::clicked, this, &BitcoinGUI::gotoHistoryPage);

// Give the selected tab button a bolder font.
connect(tabGroup, static_cast<void (QButtonGroup::*)(QAbstractButton *, bool)>(&QButtonGroup::buttonToggled), this, &BitcoinGUI::highlightTabButton);

for (auto button : tabGroup->buttons()) {
GUIUtil::setFont({button}, GUIUtil::FontWeight::Normal, 16);
button->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred);
Expand All @@ -797,16 +819,16 @@ void BitcoinGUI::createToolBars() {

#ifdef ENABLE_WALLET
m_wallet_selector = new QComboBox(this);
m_wallet_selector->setSizeAdjustPolicy(QComboBox::AdjustToContents);
m_wallet_selector->setMinimumContentsLength(200);
connect(m_wallet_selector, static_cast<void (QComboBox::*)(int)>(&QComboBox::currentIndexChanged), this, &BitcoinGUI::setCurrentWalletBySelectorIndex);

QVBoxLayout* walletSelectorLayout = new QVBoxLayout(this);
walletSelectorLayout->addWidget(m_wallet_selector);
walletSelectorLayout->setSpacing(0);
walletSelectorLayout->setMargin(0);
walletSelectorLayout->setContentsMargins(5, 0, 5, 0);
walletSelectorLayout->setContentsMargins(15, 7, 15, 0);
QWidget* walletSelector = new QWidget(this);
walletSelector->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Preferred);
walletSelector->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred);
walletSelector->setObjectName("walletSelector");
walletSelector->setLayout(walletSelectorLayout);
m_wallet_selector_action = appToolBar->insertWidget(appToolBarLogoAction, walletSelector);
Expand All @@ -817,18 +839,12 @@ void BitcoinGUI::createToolBars() {
spacer->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
toolbar->addWidget(spacer);

QLabel *logoLabel = new QLabel();
logoLabel->setObjectName("lblToolbarLogo");
logoLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred);

appToolBarLogoAction = toolbar->addWidget(logoLabel);

/** Create additional container for toolbar and walletFrame and make it the central widget.
This is a workaround mostly for toolbar styling on Mac OS but should work fine for every other OSes too.
*/
QHBoxLayout *layout = new QHBoxLayout;
if (!settings.value("fHideToolbar").toBool())
layout->addWidget(toolbar);
layout->addWidget(toolbar);
layout->addWidget(walletFrame);
layout->setSpacing(0);
layout->setContentsMargins(QMargins());
Expand Down Expand Up @@ -1270,7 +1286,7 @@ void BitcoinGUI::updateNetworkState() {
int count = clientModel->getNumConnections();
bool fNetworkActive = m_node.getNetworkActive();
QString icon;
GUIUtil::ThemedColor color = GUIUtil::ThemedColor::ORANGE;
GUIUtil::ThemedColor color = GUIUtil::ThemedColor::BLUE;
switch (count) {
case 0:
icon = "connect_4";
Expand All @@ -1279,6 +1295,7 @@ void BitcoinGUI::updateNetworkState() {
case 1:
case 2:
icon = "connect_1";
color = GUIUtil::ThemedColor::ORANGE;
break;
case 3:
case 4:
Expand Down Expand Up @@ -1328,7 +1345,7 @@ void BitcoinGUI::updateNetworkState() {
labelConnectionsIcon->setToolTip(tr("%n active connection(s) to Raptoreum network", "", count));
} else {
labelConnectionsIcon->setToolTip(tr("Network activity disabled"));
icon = "connect_4";
icon = "connect_0";
color = GUIUtil::ThemedColor::RED;
}

Expand All @@ -1337,7 +1354,7 @@ void BitcoinGUI::updateNetworkState() {
}
if (!fNetworkActive || count > 0) {
stopConnectingAnimation();
labelConnectionsIcon->setPixmap(GUIUtil::getIcon(icon, color).pixmap(STATUSBAR_ICONSIZE, STATUSBAR_ICONSIZE));
labelConnectionsIcon->setPixmap(GUIUtil::getIcon(icon, color).pixmap(STATUSBAR_ICONSIZE * 1.2, STATUSBAR_ICONSIZE * 1.2));
}
}

Expand Down Expand Up @@ -1399,7 +1416,7 @@ void BitcoinGUI::updateCoinJoinVisibility() {
// Hiding the QToolButton itself doesn't work for the GUI part
// but is still needed for shortcuts to work properly.
if (appToolBar != nullptr) {
appToolBar->actions()[4]->setVisible(fEnabled);
appToolBar->actions()[6]->setVisible(fEnabled);
coinJoinCoinsButton->setVisible(fEnabled);
GUIUtil::updateButtonGroupShortcuts(tabGroup);
}
Expand All @@ -1422,7 +1439,7 @@ void BitcoinGUI::updateWidth() {
nWidthWidestButton = std::max<int>(nWidthWidestButton, GUIUtil::TextWidth(fm, button->text()));
}

nWidth = nWidthWidestButton + 50;
nWidth = nWidthWidestButton + 65;
appToolBar->setMaximumWidth(nWidth);
// 980 is the minimum required to show all tab's contents
int minWidth = 980;
Expand Down
Loading

0 comments on commit 5f2d1dc

Please sign in to comment.