Ladybird: Use vector icons in the browser toolbar
We now load SVG icons (via the Qt resource system) and render them into a QIcon (with normal and disabled variants) using system colors. We also re-render them if the system color theme changes. This instantly makes Ladybird look less foreign on my Linux box. I drew the icons myself, and they could definitely be more optimized, but this was my first time using Inkscape. :^)
This commit is contained in:
Andreas Kling
parent
60312f2c83
commit
4b5cbe7931
Notes:
sideshowbarker
2024-07-17 00:59:43 +09:00
Author: https://github.com/awesomekling Commit: https://github.com/SerenityOS/serenity/commit/4b5cbe7931 Pull-request: https://github.com/SerenityOS/serenity/pull/18655
8 changed files with 213 additions and 9 deletions
|
|
@ -73,7 +73,7 @@ add_compile_options(-Wno-user-defined-literals)
|
|||
set(CMAKE_AUTOMOC ON)
|
||||
set(CMAKE_AUTORCC ON)
|
||||
set(CMAKE_AUTOUIC ON)
|
||||
find_package(Qt6 REQUIRED COMPONENTS Core Widgets Network)
|
||||
find_package(Qt6 REQUIRED COMPONENTS Core Widgets Network Svg)
|
||||
|
||||
set(BROWSER_SOURCE_DIR ${SERENITY_SOURCE_DIR}/Userland/Applications/Browser/)
|
||||
|
||||
|
|
@ -93,13 +93,14 @@ set(SOURCES
|
|||
Tab.cpp
|
||||
Utilities.cpp
|
||||
WebContentView.cpp
|
||||
ladybird.qrc
|
||||
main.cpp
|
||||
)
|
||||
|
||||
qt_add_executable(ladybird ${SOURCES}
|
||||
MANUAL_FINALIZATION
|
||||
)
|
||||
target_link_libraries(ladybird PRIVATE Qt::Core Qt::Gui Qt::Network Qt::Widgets LibCore LibFileSystem LibGfx LibGUI LibIPC LibJS LibMain LibWeb LibWebView LibSQL)
|
||||
target_link_libraries(ladybird PRIVATE Qt::Core Qt::Gui Qt::Network Qt::Widgets Qt::Svg LibCore LibFileSystem LibGfx LibGUI LibIPC LibJS LibMain LibWeb LibWebView LibSQL)
|
||||
|
||||
target_include_directories(ladybird PRIVATE ${CMAKE_CURRENT_BINARY_DIR})
|
||||
target_include_directories(ladybird PRIVATE ${SERENITY_SOURCE_DIR}/Userland/Applications/)
|
||||
|
|
|
|||
44
Ladybird/Icons/back.svg
Normal file
44
Ladybird/Icons/back.svg
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
sodipodi:docname="back.svg"
|
||||
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:document-units="px"
|
||||
showgrid="false"
|
||||
inkscape:zoom="32"
|
||||
inkscape:cx="29.5625"
|
||||
inkscape:cy="16.484375"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1376"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
id="path859-3"
|
||||
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 1.5289043,7.2483442 4.640287,4.7137268 m -0.0094,-8.2921718 C 4.6606103,5.1690804 3.1614293,6.6682616 1.6622483,8.1674428 M 15.620723,7.8185797 c -4.501666,0 -9.003333,0 -13.5049997,0" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
53
Ladybird/Icons/forward.svg
Normal file
53
Ladybird/Icons/forward.svg
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
sodipodi:docname="forward.svg"
|
||||
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:document-units="px"
|
||||
showgrid="false"
|
||||
inkscape:zoom="32"
|
||||
inkscape:cx="29.5625"
|
||||
inkscape:cy="16.484375"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1376"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:bevel;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
d="m 0.99442699,7.8185797 c 4.50166671,0 9.00333331,0 13.50500001,0"
|
||||
id="path2176" />
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:bevel;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
d="m 10.455359,3.6698992 c 1.499181,1.4991812 2.998362,2.9983624 4.497543,4.4975436"
|
||||
id="path2174" />
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 15.086246,7.2483442 10.445959,11.962071"
|
||||
id="path859-3"
|
||||
sodipodi:nodetypes="cc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
52
Ladybird/Icons/reload.svg
Normal file
52
Ladybird/Icons/reload.svg
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
sodipodi:docname="reload.svg"
|
||||
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:document-units="px"
|
||||
showgrid="false"
|
||||
inkscape:zoom="11.313709"
|
||||
inkscape:cx="2.7400388"
|
||||
inkscape:cy="-0.13258252"
|
||||
inkscape:window-width="1540"
|
||||
inkscape:window-height="1088"
|
||||
inkscape:window-x="414"
|
||||
inkscape:window-y="121"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 13.864001,2.0313971 13.864,5.9645124"
|
||||
id="path3866" />
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 14.612807,5.2101315 -3.933116,1e-7"
|
||||
id="path859-3" />
|
||||
<path
|
||||
id="path3568"
|
||||
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
d="M 14.063077 9.0934891 A 6.1322012 6.1322012 0 0 1 8.0587416 13.979959 A 6.1322012 6.1322012 0 0 1 1.9265404 7.8477583 A 6.1322012 6.1322012 0 0 1 8.0587416 1.7155571 A 6.1322012 6.1322012 0 0 1 13.352215 4.7521116 " />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -13,13 +13,42 @@
|
|||
#include <QCoreApplication>
|
||||
#include <QFont>
|
||||
#include <QFontMetrics>
|
||||
#include <QPainter>
|
||||
#include <QPlainTextEdit>
|
||||
#include <QPoint>
|
||||
#include <QResizeEvent>
|
||||
#include <QSvgRenderer>
|
||||
|
||||
extern DeprecatedString s_serenity_resource_root;
|
||||
extern Browser::Settings* s_settings;
|
||||
|
||||
static QIcon render_svg_icon_with_theme_colors(QString name, QPalette const& palette)
|
||||
{
|
||||
auto path = QString(":/Icons/%1.svg").arg(name);
|
||||
|
||||
QSize icon_size(16, 16);
|
||||
|
||||
QIcon icon;
|
||||
|
||||
auto render = [&](QColor color) -> QPixmap {
|
||||
QImage image(icon_size, QImage::Format_ARGB32);
|
||||
image.fill(Qt::transparent);
|
||||
|
||||
QPainter painter(&image);
|
||||
QSvgRenderer renderer(path);
|
||||
renderer.render(&painter);
|
||||
painter.setBrush(color);
|
||||
painter.setCompositionMode(QPainter::CompositionMode_SourceAtop);
|
||||
painter.fillRect(image.rect(), color);
|
||||
return QPixmap::fromImage(image);
|
||||
};
|
||||
|
||||
icon.addPixmap(render(palette.color(QPalette::ColorGroup::Normal, QPalette::ColorRole::ButtonText)), QIcon::Mode::Normal);
|
||||
icon.addPixmap(render(palette.color(QPalette::ColorGroup::Disabled, QPalette::ColorRole::ButtonText)), QIcon::Mode::Disabled);
|
||||
|
||||
return icon;
|
||||
}
|
||||
|
||||
Tab::Tab(BrowserWindow* window, StringView webdriver_content_ipc_path, WebView::EnableCallgrindProfiling enable_callgrind_profiling)
|
||||
: QWidget(window)
|
||||
, m_window(window)
|
||||
|
|
@ -45,18 +74,17 @@ Tab::Tab(BrowserWindow* window, StringView webdriver_content_ipc_path, WebView::
|
|||
m_layout->addWidget(m_toolbar);
|
||||
m_layout->addWidget(m_view);
|
||||
|
||||
auto back_icon_path = QString("%1/res/icons/16x16/go-back.png").arg(s_serenity_resource_root.characters());
|
||||
auto forward_icon_path = QString("%1/res/icons/16x16/go-forward.png").arg(s_serenity_resource_root.characters());
|
||||
auto reload_icon_path = QString("%1/res/icons/16x16/reload.png").arg(s_serenity_resource_root.characters());
|
||||
m_back_action = make<QAction>(QIcon(back_icon_path), "Back");
|
||||
m_back_action = make<QAction>("Back");
|
||||
m_back_action->setEnabled(false);
|
||||
m_back_action->setShortcuts(QKeySequence::keyBindings(QKeySequence::StandardKey::Back));
|
||||
m_forward_action = make<QAction>(QIcon(forward_icon_path), "Forward");
|
||||
m_forward_action = make<QAction>("Forward");
|
||||
m_forward_action->setEnabled(false);
|
||||
m_forward_action->setShortcuts(QKeySequence::keyBindings(QKeySequence::StandardKey::Forward));
|
||||
m_reload_action = make<QAction>(QIcon(reload_icon_path), "Reload");
|
||||
m_reload_action = make<QAction>("Reload");
|
||||
m_reload_action->setShortcuts(QKeySequence::keyBindings(QKeySequence::StandardKey::Refresh));
|
||||
|
||||
rerender_toolbar_icons();
|
||||
|
||||
m_toolbar->addAction(m_back_action);
|
||||
m_toolbar->addAction(m_forward_action);
|
||||
m_toolbar->addAction(m_reload_action);
|
||||
|
|
@ -259,3 +287,20 @@ void Tab::update_hover_label()
|
|||
m_hover_label->move(6, height() - m_hover_label->height() - 8);
|
||||
m_hover_label->raise();
|
||||
}
|
||||
|
||||
bool Tab::event(QEvent* event)
|
||||
{
|
||||
if (event->type() == QEvent::PaletteChange) {
|
||||
rerender_toolbar_icons();
|
||||
return QWidget::event(event);
|
||||
}
|
||||
|
||||
return QWidget::event(event);
|
||||
}
|
||||
|
||||
void Tab::rerender_toolbar_icons()
|
||||
{
|
||||
m_back_action->setIcon(render_svg_icon_with_theme_colors("back", palette()));
|
||||
m_forward_action->setIcon(render_svg_icon_with_theme_colors("forward", palette()));
|
||||
m_reload_action->setIcon(render_svg_icon_with_theme_colors("reload", palette()));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,9 @@ signals:
|
|||
|
||||
private:
|
||||
virtual void resizeEvent(QResizeEvent*) override;
|
||||
virtual bool event(QEvent*) override;
|
||||
|
||||
void rerender_toolbar_icons();
|
||||
void update_hover_label();
|
||||
|
||||
QBoxLayout* m_layout;
|
||||
|
|
|
|||
7
Ladybird/ladybird.qrc
Normal file
7
Ladybird/ladybird.qrc
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE RCC><RCC version="1.0">
|
||||
<qresource>
|
||||
<file>Icons/back.svg</file>
|
||||
<file>Icons/forward.svg</file>
|
||||
<file>Icons/reload.svg</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
|
@ -21,7 +21,7 @@ steps:
|
|||
wget -O - https://apt.llvm.org/llvm-snapshot.gpg.key | sudo apt-key add -
|
||||
sudo add-apt-repository 'deb http://apt.llvm.org/jammy/ llvm-toolchain-jammy-15 main'
|
||||
sudo apt-get update
|
||||
sudo apt-get install ccache gcc-12 g++-12 clang-15 libstdc++-12-dev ninja-build unzip qt6-base-dev qt6-tools-dev-tools libgl1-mesa-dev
|
||||
sudo apt-get install ccache gcc-12 g++-12 clang-15 libstdc++-12-dev ninja-build unzip qt6-base-dev qt6-tools-dev-tools libqt6svg6-dev libgl1-mesa-dev
|
||||
|
||||
sudo update-alternatives --install /usr/bin/clang clang /usr/bin/clang-15 100
|
||||
sudo update-alternatives --install /usr/bin/clang++ clang++ /usr/bin/clang++-15 100
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue