RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 08:47:34 +00:00
Code Issues Activity Actions

LibGUI: Implement vertical orientation for OpacitySlider

Browse source
This commit is contained in:
FrHun 2022-12-07 23:38:36 +01:00 • committed by Andreas Kling
parent 42feb0233a
commit 99624a8df4
2 changed files with 84 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

121
Userland/Libraries/LibGUI/OpacitySlider.cpp
View file

@ -17,9 +17,6 @@ namespace GUI {
OpacitySlider::OpacitySlider(Gfx::Orientation orientation) OpacitySlider::OpacitySlider(Gfx::Orientation orientation)
: AbstractSlider(orientation) : AbstractSlider(orientation)
{ {
// FIXME: Implement vertical mode.
VERIFY(orientation == Gfx::Orientation::Horizontal);
set_min(0); set_min(0);
set_max(100); set_max(100);
set_value(100); set_value(100);
@ -42,51 +39,92 @@ void OpacitySlider::paint_event(PaintEvent& event)
Gfx::StylePainter::paint_transparency_grid(painter, inner_rect, palette()); Gfx::StylePainter::paint_transparency_grid(painter, inner_rect, palette());
// Alpha gradient // Alpha gradient
for (int x = inner_rect.left(); x <= inner_rect.right(); ++x) { for (int pos = inner_rect.first_edge_for_orientation(orientation()); pos <= inner_rect.last_edge_for_orientation(orientation()); ++pos) {
float relative_offset = (float)x / (float)width(); float relative_offset = (float)pos / (float)inner_rect.primary_size_for_orientation(orientation());
float alpha = relative_offset * 255.0f; float alpha = relative_offset * 255.0f;
Color color { 0, 0, 0, (u8)alpha }; Color color { 0, 0, 0, static_cast<u8>(AK::min(alpha, UINT8_MAX)) };
painter.fill_rect({ x, inner_rect.y(), 1, inner_rect.height() }, color); if (orientation() == Gfx::Orientation::Horizontal) {
painter.fill_rect({ pos, inner_rect.top(), 1, inner_rect.height() }, color);
} else {
painter.fill_rect({ inner_rect.left(), pos, inner_rect.right(), 1 }, color);
}
} }
constexpr int notch_size = 3; constexpr int notch_size = 3;
int notch_y_top = inner_rect.top() + notch_size; if (orientation() == Gfx::Orientation::Horizontal) {
int notch_y_bottom = inner_rect.bottom() - notch_size; int notch_y_top = inner_rect.top() + notch_size;
int notch_x = inner_rect.left() + ((float)value() / (float)max() * (float)inner_rect.width()); int notch_y_bottom = inner_rect.bottom() - notch_size;
int notch_x = inner_rect.left() + ((float)value() / (float)max() * (float)inner_rect.width());
// Top notch // Top notch
painter.set_pixel(notch_x, notch_y_top, palette().threed_shadow2()); painter.set_pixel(notch_x, notch_y_top, palette().threed_shadow2());
for (int i = notch_size; i >= 0; --i) { for (int i = notch_size; i >= 0; --i) {
painter.set_pixel(notch_x - (i + 1), notch_y_top - i - 1, palette().threed_highlight()); painter.set_pixel(notch_x - (i + 1), notch_y_top - i - 1, palette().threed_highlight());
for (int j = 0; j < i * 2; ++j) { for (int j = 0; j < i * 2; ++j) {
painter.set_pixel(notch_x - (i + 1) + j + 1, notch_y_top - i - 1, palette().button()); painter.set_pixel(notch_x - (i + 1) + j + 1, notch_y_top - i - 1, palette().button());
}
painter.set_pixel(notch_x + (i + 0), notch_y_top - i - 1, palette().threed_shadow1());
painter.set_pixel(notch_x + (i + 1), notch_y_top - i - 1, palette().threed_shadow2());
} }
painter.set_pixel(notch_x + (i + 0), notch_y_top - i - 1, palette().threed_shadow1());
painter.set_pixel(notch_x + (i + 1), notch_y_top - i - 1, palette().threed_shadow2());
}
// Bottom notch // Bottom notch
painter.set_pixel(notch_x, notch_y_bottom, palette().threed_shadow2()); painter.set_pixel(notch_x, notch_y_bottom, palette().threed_shadow2());
for (int i = 0; i < notch_size; ++i) { for (int i = 0; i < notch_size; ++i) {
painter.set_pixel(notch_x - (i + 1), notch_y_bottom + i + 1, palette().threed_highlight()); painter.set_pixel(notch_x - (i + 1), notch_y_bottom + i + 1, palette().threed_highlight());
for (int j = 0; j < i * 2; ++j) { for (int j = 0; j < i * 2; ++j) {
painter.set_pixel(notch_x - (i + 1) + j + 1, notch_y_bottom + i + 1, palette().button()); painter.set_pixel(notch_x - (i + 1) + j + 1, notch_y_bottom + i + 1, palette().button());
}
painter.set_pixel(notch_x + (i + 0), notch_y_bottom + i + 1, palette().threed_shadow1());
painter.set_pixel(notch_x + (i + 1), notch_y_bottom + i + 1, palette().threed_shadow2());
} }
painter.set_pixel(notch_x + (i + 0), notch_y_bottom + i + 1, palette().threed_shadow1());
painter.set_pixel(notch_x + (i + 1), notch_y_bottom + i + 1, palette().threed_shadow2());
}
// Hairline // Hairline
// NOTE: If we're in the whiter part of the gradient, the notch is painted as shadow between the notches. // NOTE: If we're in the whiter part of the gradient, the notch is painted as shadow between the notches.
// If we're in the darker part, the notch is painted as highlight. // If we're in the darker part, the notch is painted as highlight.
// We adjust the hairline's x position so it lines up with the shadow/highlight of the notches. // We adjust the hairline's x position so it lines up with the shadow/highlight of the notches.
u8 h = ((float)value() / (float)max()) * 255.0f; u8 h = ((float)value() / (float)max()) * 255.0f;
if (h < 128) if (h < 128)
painter.draw_line({ notch_x, notch_y_top }, { notch_x, notch_y_bottom }, Color(h, h, h, 255)); painter.draw_line({ notch_x, notch_y_top }, { notch_x, notch_y_bottom }, Color(h, h, h, 255));
else else
painter.draw_line({ notch_x - 1, notch_y_top }, { notch_x - 1, notch_y_bottom }, Color(h, h, h, 255)); painter.draw_line({ notch_x - 1, notch_y_top }, { notch_x - 1, notch_y_bottom }, Color(h, h, h, 255));
} else {
int notch_x_left = inner_rect.left() + notch_size;
int notch_x_right = inner_rect.right() - notch_size;
int notch_y = inner_rect.top() + ((float)value() / (float)max() * (float)inner_rect.height());
// Left notch
painter.set_pixel(notch_x_left, notch_y, palette().threed_shadow2());
for (int i = notch_size; i >= 0; --i) {
painter.set_pixel(notch_x_left - i - 1, notch_y - (i + 1), palette().threed_highlight());
for (int j = 0; j < i * 2; ++j) {
painter.set_pixel(notch_x_left - i - 1, notch_y - (i + 1) + j + 1, palette().button());
}
painter.set_pixel(notch_x_left - i - 1, notch_y + (i + 0), palette().threed_shadow1());
painter.set_pixel(notch_x_left - i - 1, notch_y + (i + 1), palette().threed_shadow2());
}
// Bottom notch
painter.set_pixel(notch_x_right, notch_y, palette().threed_shadow2());
for (int i = 0; i < notch_size; ++i) {
painter.set_pixel(notch_x_right + i + 1, notch_y - (i + 1), palette().threed_highlight());
for (int j = 0; j < i * 2; ++j) {
painter.set_pixel(notch_x_right + i + 1, notch_y - (i + 1) + j + 1, palette().button());
}
painter.set_pixel(notch_x_right + i + 1, notch_y + (i + 0), palette().threed_shadow1());
painter.set_pixel(notch_x_right + i + 1, notch_y + (i + 1), palette().threed_shadow2());
}
// Hairline
// NOTE: See above
u8 h = ((float)value() / (float)max()) * 255.0f;
if (h < 128)
painter.draw_line({ notch_x_left, notch_y }, { notch_x_right, notch_y }, Color(h, h, h, 255));
else
painter.draw_line({ notch_x_left, notch_y - 1 }, { notch_x_right, notch_y - 1 }, Color(h, h, h, 255));
}
// Text label // Text label
// FIXME: better support text in vertical orientation, either by having a vertical option for draw_text, or only showing when there is enough space
auto percent_text = DeprecatedString::formatted("{}%", (int)((float)value() / (float)max() * 100.0f)); auto percent_text = DeprecatedString::formatted("{}%", (int)((float)value() / (float)max() * 100.0f));
painter.draw_text(inner_rect.translated(1, 1), percent_text, Gfx::TextAlignment::Center, Color::Black); painter.draw_text(inner_rect.translated(1, 1), percent_text, Gfx::TextAlignment::Center, Color::Black);
painter.draw_text(inner_rect, percent_text, Gfx::TextAlignment::Center, Color::White); painter.draw_text(inner_rect, percent_text, Gfx::TextAlignment::Center, Color::White);
@ -98,11 +136,14 @@ void OpacitySlider::paint_event(PaintEvent& event)
int OpacitySlider::value_at(Gfx::IntPoint position) const int OpacitySlider::value_at(Gfx::IntPoint position) const
{ {
auto inner_rect = frame_inner_rect(); auto inner_rect = frame_inner_rect();
if (position.x() < inner_rect.left()) auto relevant_position = position.primary_offset_for_orientation(orientation()),
begin_position = inner_rect.first_edge_for_orientation(orientation()),
end_position = inner_rect.last_edge_for_orientation(orientation());
if (relevant_position < begin_position)
return min(); return min();
if (position.x() > inner_rect.right()) if (relevant_position > end_position)
return max(); return max();
float relative_offset = (float)(position.x() - inner_rect.x()) / (float)inner_rect.width(); float relative_offset = (float)(relevant_position - begin_position) / (float)inner_rect.primary_size_for_orientation(orientation());
int range = max() - min(); int range = max() - min();
return min() + (int)(relative_offset * (float)range); return min() + (int)(relative_offset * (float)range);

3
Userland/Libraries/LibGUI/OpacitySlider.h
View file

@ -29,6 +29,9 @@ private:
Gfx::IntRect frame_inner_rect() const; Gfx::IntRect frame_inner_rect() const;
virtual Optional<UISize> calculated_min_size() const override;
virtual Optional<UISize> calculated_preferred_size() const override;
int value_at(Gfx::IntPoint) const; int value_at(Gfx::IntPoint) const;
bool m_dragging { false }; bool m_dragging { false };