dmaax/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI/Qt: Refine chrome layout spacing

Browse source 
Keep active and hovered tabs on the same geometry while tightening the
surrounding chrome rhythm. Reduce tab and toolbar padding, shorten the
navigation toolbar and omnibox, center the new tab button, and enlarge
tab close buttons to match the refined tab sizing.
This commit is contained in:
Andreas Kling 2026-05-26 14:17:10 +02:00 committed by Andreas Kling
parent b8e266c631
commit 14ac01b0ce
4 changed files with 26 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
UI/Qt/ChromeStyle.cpp
View file

@ -314,7 +314,7 @@ QLineEdit#LadybirdLocationEdit {
background: %1;
border: 1px solid %3;
border-radius: 19px;
min-height: 38px;
min-height: 36px;
padding: 0 16px;
selection-background-color: %7;
selection-color: %8;
@ -483,8 +483,8 @@ QPushButton#LadybirdTabButton {
}
QToolButton#LadybirdNewTabButton {
min-width: 32px;
min-height: 32px;
min-width: 30px;
min-height: 30px;
border-radius: 16px;
}

8
UI/Qt/LocationEdit.cpp
View file

@ -151,8 +151,8 @@ LocationEdit::LocationEdit(QWidget* parent)
, m_autocomplete(new Autocomplete(this))
{
setObjectName("LadybirdLocationEdit");
setMinimumHeight(41);
setTextMargins(40, 0, 40, 0);
setMinimumHeight(37);
setTextMargins(38, 0, 40, 0);
update_chrome_style();
m_focus_glow_effect = new QGraphicsDropShadowEffect(this);
@ -392,11 +392,11 @@ void LocationEdit::resizeEvent(QResizeEvent* event)
QLineEdit::resizeEvent(event);
auto button_size = m_leading_icon_button->sizeHint();
auto y = (height() - button_size.height()) / 2 + 2;
auto y = (height() - button_size.height()) / 2 + 1;
m_leading_icon_button->move(12, y);
auto trailing_button_size = m_trailing_action_button->sizeHint();
auto trailing_y = (height() - trailing_button_size.height()) / 2 + 2;
auto trailing_y = (height() - trailing_button_size.height()) / 2 + 1;
m_trailing_action_button->move(width() - trailing_button_size.width() - 12, trailing_y);
}

6
UI/Qt/Tab.cpp
View file

@ -102,12 +102,12 @@ Tab::Tab(BrowserWindow* window, RefPtr<WebView::WebContentClient> parent_client,
m_find_in_page->setVisible(false);
m_toolbar = new QWidget(this);
m_toolbar->setObjectName("LadybirdNavigationToolbar");
m_toolbar->setFixedHeight(54);
m_toolbar->setFixedHeight(47);
m_toolbar->setSizePolicy(QSizePolicy::MinimumExpanding, QSizePolicy::Fixed);
auto* toolbar_layout = new QHBoxLayout(m_toolbar);
toolbar_layout->setSpacing(8);
toolbar_layout->setContentsMargins(18, 4, 18, 6);
toolbar_layout->setSpacing(6);
toolbar_layout->setContentsMargins(12, 3, 12, 3);
m_location_edit = new LocationEdit(this);
m_bookmarks_bar = new BookmarksBar(this);

59
UI/Qt/TabBar.cpp
View file

@ -74,7 +74,7 @@ TabBar::TabBar(TabWidget* tab_widget)
setAcceptDrops(true);
setFocusPolicy(Qt::NoFocus);
setIconSize({ 16, 16 });
setMinimumHeight(44);
setMinimumHeight(42);
m_hover_animation = new QVariantAnimation(this);
m_hover_animation->setDuration(120);
@ -122,20 +122,8 @@ void TabBar::paintEvent(QPaintEvent* event)
auto border = ChromeStyle::chrome_border(palette());
auto dark = ChromeStyle::is_dark(palette());
auto background = ChromeStyle::chrome_background(palette());
auto background_gradient = QLinearGradient(rect().topLeft(), rect().bottomLeft());
if (dark) {
background_gradient.setColorAt(0.0, background.lighter(118));
background_gradient.setColorAt(1.0, background.darker(116));
} else {
auto tab_strip_background = ChromeStyle::mix(background, QColor(224, 229, 236), 0.18);
background_gradient.setColorAt(0.0, ChromeStyle::mix(tab_strip_background, QColor(255, 255, 255), 0.015));
background_gradient.setColorAt(1.0, ChromeStyle::mix(tab_strip_background, QColor(210, 216, 224), 0.025));
}
painter.fillRect(rect(), background_gradient);
auto text_color = palette().color(QPalette::Text);
auto muted_text_color = ChromeStyle::chrome_muted_text(palette());
for (int index = 0; index < count(); ++index) {
auto tab_rect = tabRect(index);
@ -146,40 +134,30 @@ void TabBar::paintEvent(QPaintEvent* event)
auto hover_progress = index == m_hover_animation_tab_index ? m_hover_progress : (index == m_hovered_tab_index ? 1.0 : 0.0);
bool is_hovered = hover_progress > 0.0;
auto shape_rect = QRectF(tab_rect).adjusted(4.0, 1.0, -4.0, is_selected ? 6.0 : -1.0);
auto tab_path = tab_shape_path(shape_rect, 10.0, is_selected ? 1.0 : 9.0);
auto shape_rect = QRectF(tab_rect).adjusted(3.0, 1.5, -3.0, 0.5);
auto tab_path = tab_shape_path(shape_rect, 10.0, 9.0);
auto surface = ChromeStyle::chrome_surface(palette());
if (is_selected) {
auto shadow_path = tab_shape_path(shape_rect.translated(0, 1), 11.0, 2.0);
painter.setBrush(QColor(0, 0, 0, 22));
painter.setPen(Qt::NoPen);
painter.drawPath(shadow_path);
auto selected_gradient = QLinearGradient(shape_rect.topLeft(), shape_rect.bottomLeft());
selected_gradient.setColorAt(0.0, dark ? surface.lighter(108) : ChromeStyle::mix(surface, QColor(255, 255, 255), 0.18));
selected_gradient.setColorAt(1.0, surface);
selected_gradient.setColorAt(0.0, ChromeStyle::chrome_active_tab_surface_top(palette()));
selected_gradient.setColorAt(1.0, ChromeStyle::chrome_active_tab_surface_bottom(palette()));
auto active_border = border;
active_border.setAlpha(62);
active_border.setAlpha(38);
painter.setBrush(selected_gradient);
painter.setPen(QPen(active_border, 1));
painter.drawPath(tab_path);
auto highlight = QColor(255, 255, 255, 16);
painter.setPen(QPen(highlight, 1));
painter.drawLine(QPointF(shape_rect.left() + 14.0, shape_rect.top() + 1.0),
QPointF(shape_rect.right() - 14.0, shape_rect.top() + 1.0));
} else if (is_hovered) {
auto hover = ChromeStyle::chrome_surface_hover(palette());
hover.setAlpha(static_cast<int>(120 * hover_progress));
auto hover = dark ? ChromeStyle::chrome_surface_hover(palette()) : ChromeStyle::mix(surface, ChromeStyle::chrome_surface_hover(palette()), 0.28);
hover.setAlpha(static_cast<int>((dark ? 120 : 136) * hover_progress));
auto hover_border = border;
hover_border.setAlpha(static_cast<int>(44 * hover_progress));
painter.setBrush(hover);
painter.setPen(QPen(hover_border, 1));
painter.drawPath(tab_path);
} else {
auto inactive = background.lighter(108);
inactive.setAlpha(48);
auto inactive = ChromeStyle::chrome_surface_recessed(palette());
inactive.setAlpha(dark ? 48 : 118);
auto inactive_border = border;
inactive_border.setAlpha(14);
painter.setBrush(inactive);
@ -220,12 +198,7 @@ void TabBar::paintEvent(QPaintEvent* event)
QFontMetrics font_metrics(tab_font);
auto title = font_metrics.elidedText(tabText(index), Qt::ElideRight, max(0, contents_rect.width()));
auto tab_text_color = is_selected ? text_color : muted_text_color;
if (is_hovered)
tab_text_color.setAlpha(static_cast<int>(160 + 54 * hover_progress));
else if (!is_selected)
tab_text_color.setAlpha(154);
painter.setPen(tab_text_color);
painter.setPen(text_color);
painter.drawText(contents_rect, Qt::AlignLeft | Qt::AlignVCenter, title);
}
@ -545,9 +518,9 @@ TabWidget::TabWidget(QWidget* parent)
auto* tab_bar_row_layout = new QHBoxLayout();
tab_bar_row_layout->setSpacing(4);
tab_bar_row_layout->setContentsMargins(12, 4, 8, 0);
tab_bar_row_layout->setContentsMargins(12, 3, 8, 1);
tab_bar_row_layout->addWidget(m_tab_bar);
tab_bar_row_layout->addWidget(m_new_tab_button);
tab_bar_row_layout->addWidget(m_new_tab_button, 0, Qt::AlignVCenter);
tab_bar_row_layout->addStretch(1);
tab_bar_row_layout->addWidget(m_minimize_window_button);
tab_bar_row_layout->addWidget(m_maximize_window_button);
@ -555,7 +528,7 @@ TabWidget::TabWidget(QWidget* parent)
m_tab_bar_row = new QWidget(this);
m_tab_bar_row->setObjectName("LadybirdTabStrip");
m_tab_bar_row->setMinimumHeight(50);
m_tab_bar_row->setMinimumHeight(46);
m_tab_bar_row->setLayout(tab_bar_row_layout);
m_tab_bar_row->installEventFilter(this);
@ -804,8 +777,8 @@ TabBarButton::TabBarButton(QIcon const& icon, QWidget* parent)
: QPushButton(icon, {}, parent)
{
setObjectName("LadybirdTabButton");
setFixedSize({ 20, 20 });
setIconSize({ 12, 12 });
setFixedSize({ 22, 22 });
setIconSize({ 14, 14 });
setFocusPolicy(Qt::NoFocus);
setFlat(true);
}