mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-17 16:28:06 +03:00
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:
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
@ -73,7 +73,7 @@ add_compile_options(-Wno-user-defined-literals)
|
|||||||
set(CMAKE_AUTOMOC ON)
|
set(CMAKE_AUTOMOC ON)
|
||||||
set(CMAKE_AUTORCC ON)
|
set(CMAKE_AUTORCC ON)
|
||||||
set(CMAKE_AUTOUIC 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/)
|
set(BROWSER_SOURCE_DIR ${SERENITY_SOURCE_DIR}/Userland/Applications/Browser/)
|
||||||
|
|
||||||
@ -93,13 +93,14 @@ set(SOURCES
|
|||||||
Tab.cpp
|
Tab.cpp
|
||||||
Utilities.cpp
|
Utilities.cpp
|
||||||
WebContentView.cpp
|
WebContentView.cpp
|
||||||
|
ladybird.qrc
|
||||||
main.cpp
|
main.cpp
|
||||||
)
|
)
|
||||||
|
|
||||||
qt_add_executable(ladybird ${SOURCES}
|
qt_add_executable(ladybird ${SOURCES}
|
||||||
MANUAL_FINALIZATION
|
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 ${CMAKE_CURRENT_BINARY_DIR})
|
||||||
target_include_directories(ladybird PRIVATE ${SERENITY_SOURCE_DIR}/Userland/Applications/)
|
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 <QCoreApplication>
|
||||||
#include <QFont>
|
#include <QFont>
|
||||||
#include <QFontMetrics>
|
#include <QFontMetrics>
|
||||||
|
#include <QPainter>
|
||||||
#include <QPlainTextEdit>
|
#include <QPlainTextEdit>
|
||||||
#include <QPoint>
|
#include <QPoint>
|
||||||
#include <QResizeEvent>
|
#include <QResizeEvent>
|
||||||
|
#include <QSvgRenderer>
|
||||||
|
|
||||||
extern DeprecatedString s_serenity_resource_root;
|
extern DeprecatedString s_serenity_resource_root;
|
||||||
extern Browser::Settings* s_settings;
|
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)
|
Tab::Tab(BrowserWindow* window, StringView webdriver_content_ipc_path, WebView::EnableCallgrindProfiling enable_callgrind_profiling)
|
||||||
: QWidget(window)
|
: QWidget(window)
|
||||||
, m_window(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_toolbar);
|
||||||
m_layout->addWidget(m_view);
|
m_layout->addWidget(m_view);
|
||||||
|
|
||||||
auto back_icon_path = QString("%1/res/icons/16x16/go-back.png").arg(s_serenity_resource_root.characters());
|
m_back_action = make<QAction>("Back");
|
||||||
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->setEnabled(false);
|
m_back_action->setEnabled(false);
|
||||||
m_back_action->setShortcuts(QKeySequence::keyBindings(QKeySequence::StandardKey::Back));
|
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->setEnabled(false);
|
||||||
m_forward_action->setShortcuts(QKeySequence::keyBindings(QKeySequence::StandardKey::Forward));
|
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));
|
m_reload_action->setShortcuts(QKeySequence::keyBindings(QKeySequence::StandardKey::Refresh));
|
||||||
|
|
||||||
|
rerender_toolbar_icons();
|
||||||
|
|
||||||
m_toolbar->addAction(m_back_action);
|
m_toolbar->addAction(m_back_action);
|
||||||
m_toolbar->addAction(m_forward_action);
|
m_toolbar->addAction(m_forward_action);
|
||||||
m_toolbar->addAction(m_reload_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->move(6, height() - m_hover_label->height() - 8);
|
||||||
m_hover_label->raise();
|
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:
|
private:
|
||||||
virtual void resizeEvent(QResizeEvent*) override;
|
virtual void resizeEvent(QResizeEvent*) override;
|
||||||
|
virtual bool event(QEvent*) override;
|
||||||
|
|
||||||
|
void rerender_toolbar_icons();
|
||||||
void update_hover_label();
|
void update_hover_label();
|
||||||
|
|
||||||
QBoxLayout* m_layout;
|
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 -
|
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 add-apt-repository 'deb http://apt.llvm.org/jammy/ llvm-toolchain-jammy-15 main'
|
||||||
sudo apt-get update
|
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
|
||||||
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…
Reference in New Issue
Block a user