RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 08:18:11 +00:00
Code Issues Activity Actions

Tweak the look of various UI surfaces and buttons.

Browse source
This commit is contained in:
Andreas Kling 2019-03-27 20:48:23 +01:00
parent d71820a382
commit 670e376e27
10 changed files with 65 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

8
Applications/FileManager/main.cpp
View file

@ -40,8 +40,8 @@ int main(int argc, char** argv)
auto* main_toolbar = new GToolBar(widget);
auto* location_toolbar = new GToolBar(widget);
location_toolbar->layout()->set_margins({ 8, 3, 8, 3 });
location_toolbar->set_preferred_size({ 0, 21 });
location_toolbar->layout()->set_margins({ 6, 3, 6, 3 });
location_toolbar->set_preferred_size({ 0, 23 });
auto* location_label = new GLabel("Location: ", location_toolbar);
location_label->size_to_fit();
@ -60,7 +60,7 @@ int main(int argc, char** argv)
directory_view->open(editor.text());
};
auto open_parent_directory_action = GAction::create("Open parent directory", { Mod_Alt, Key_Up }, GraphicsBitmap::load_from_file("/res/icons/parentdirectory16.png"), [directory_view] (const GAction&) {
auto open_parent_directory_action = GAction::create("Open parent directory", { Mod_Alt, Key_Up }, GraphicsBitmap::load_from_file("/res/icons/16x16/open-parent-directory.png"), [directory_view] (const GAction&) {
directory_view->open_parent_directory();
});
@ -89,7 +89,7 @@ int main(int argc, char** argv)
directory_view->set_view_mode(DirectoryView::ViewMode::Icon);
});
auto copy_action = GAction::create("Copy", GraphicsBitmap::load_from_file("/res/icons/copyfile16.png"), [] (const GAction&) {
auto copy_action = GAction::create("Copy", GraphicsBitmap::load_from_file("/res/icons/16x16/edit-copy.png"), [] (const GAction&) {
dbgprintf("'Copy' action activated!\n");
});

2
Applications/TextEditor/main.cpp
View file

@ -69,7 +69,7 @@ int main(int argc, char** argv)
text_editor->cut();
});
auto copy_action = GAction::create("Copy", { Mod_Ctrl, Key_C }, GraphicsBitmap::load_from_file("/res/icons/copyfile16.png"), [&] (const GAction&) {
auto copy_action = GAction::create("Copy", { Mod_Ctrl, Key_C }, GraphicsBitmap::load_from_file("/res/icons/16x16/edit-copy.png"), [&] (const GAction&) {
text_editor->copy();
});

2
LibGUI/GScrollBar.cpp
View file

@ -167,7 +167,7 @@ Rect GScrollBar::scrubber_rect() const
return { };
float x_or_y;
if (m_value == m_min)
x_or_y = button_size() - 1;
x_or_y = button_size();
else if (m_value == m_max)
x_or_y = ((orientation() == Orientation::Vertical ? height() : width()) - (button_size() * 2)) + 1;
else {

53
LibGUI/GStyle.cpp
View file

@ -14,13 +14,58 @@ GStyle::GStyle()
{
}
static void paint_button_new(Painter& painter, const Rect& rect, bool pressed)
{
Color button_color = Color::from_rgb(0xc0c0c0);
Color highlight_color1 = Color::from_rgb(0xffffff);
Color highlight_color2 = Color::from_rgb(0xdfdfdf);
Color shadow_color1 = Color::from_rgb(0x808080);
Color shadow_color2 = Color::from_rgb(0x404040);
PainterStateSaver saver(painter);
painter.translate(rect.location());
if (pressed) {
// Base
painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 2 }, button_color);
painter.draw_rect(rect, shadow_color2);
// Sunken shadow
painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, shadow_color1);
painter.draw_line({ 1, 2 }, {1, rect.height() - 2 }, shadow_color1);
} else {
// Base
painter.fill_rect({ 2, 2, rect.width() - 4, rect.height() - 4 }, button_color);
// Outer highlight
painter.draw_line({ 0, 0 }, { rect.width() - 2, 0 }, highlight_color2);
painter.draw_line({ 0, 1 }, { 0, rect.height() - 2 }, highlight_color2);
// Inner highlight
painter.draw_line({ 1, 1 }, { rect.width() - 3, 1 }, highlight_color1);
painter.draw_line({ 1, 2 }, { 1, rect.height() - 3 }, highlight_color1);
// Outer shadow
painter.draw_line({ 0, rect.height() - 1 }, { rect.width() - 1, rect.height() - 1 }, shadow_color2);
painter.draw_line({ rect.width() - 1, 0 }, { rect.width() - 1, rect.height() - 2 }, shadow_color2);
// Inner shadow
painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, shadow_color1);
painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, shadow_color1);
}
}
void GStyle::paint_button(Painter& painter, const Rect& rect, GButtonStyle button_style, bool pressed, bool hovered)
{
if (button_style == GButtonStyle::Normal)
return paint_button_new(painter, rect, pressed);
Color button_color = Color::LightGray;
Color highlight_color = Color::White;
Color shadow_color = Color(96, 96, 96);
if (button_style == GButtonStyle::Normal)
if (button_style == GButtonStyle::OldNormal)
painter.draw_rect(rect, Color::Black);
PainterStateSaver saver(painter);
@ -37,7 +82,7 @@ void GStyle::paint_button(Painter& painter, const Rect& rect, GButtonStyle butto
// Bottom highlight
painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, highlight_color);
painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, highlight_color);
} else if (button_style == GButtonStyle::Normal || (button_style == GButtonStyle::CoolBar && hovered)) {
} else if (button_style == GButtonStyle::OldNormal || (button_style == GButtonStyle::CoolBar && hovered)) {
// Base
painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 2 }, button_color);
@ -55,7 +100,7 @@ void GStyle::paint_surface(Painter& painter, const Rect& rect)
{
painter.fill_rect({ rect.x(), rect.y() + 1, rect.width(), rect.height() - 2 }, Color::LightGray);
painter.draw_line(rect.top_left(), rect.top_right(), Color::White);
painter.draw_line(rect.bottom_left(), rect.bottom_right(), Color::DarkGray);
painter.draw_line(rect.bottom_left(), rect.bottom_right(), Color::MidGray);
painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left().translated(0, -1), Color::White);
painter.draw_line(rect.top_right(), rect.bottom_right().translated(0, -1), Color::DarkGray);
painter.draw_line(rect.top_right(), rect.bottom_right().translated(0, -1), Color::MidGray);
}

2
LibGUI/GStyle.h
View file

@ -3,7 +3,7 @@
class Painter;
class Rect;
enum class GButtonStyle { Normal, CoolBar };
enum class GButtonStyle { Normal, CoolBar, OldNormal };
class GStyle {
public:

4
LibGUI/GTableView.cpp
View file

@ -183,7 +183,7 @@ void GTableView::paint_headers(Painter& painter)
int exposed_width = max(content_size().width(), width());
painter.fill_rect({ 0, 0, exposed_width, header_height() }, Color::LightGray);
painter.draw_line({ 0, 0 }, { exposed_width - 1, 0 }, Color::White);
painter.draw_line({ 0, header_height() - 1 }, { exposed_width - 1, header_height() - 1 }, Color::DarkGray);
painter.draw_line({ 0, header_height() - 1 }, { exposed_width - 1, header_height() - 1 }, Color::MidGray);
int x_offset = 0;
for (int column_index = 0; column_index < model()->column_count(); ++column_index) {
if (is_column_hidden(column_index))
@ -199,7 +199,7 @@ void GTableView::paint_headers(Painter& painter)
x_offset += column_width + horizontal_padding() * 2;
// Draw column separator.
painter.draw_line(cell_rect.top_left().translated(0, 1), cell_rect.bottom_left().translated(0, -1), Color::White);
painter.draw_line(cell_rect.top_right(), cell_rect.bottom_right().translated(0, -1), Color::DarkGray);
painter.draw_line(cell_rect.top_right(), cell_rect.bottom_right().translated(0, -1), Color::MidGray);
}
// Draw the "start" of a new column to make the last separator look right.
painter.draw_line({ x_offset, 1 }, { x_offset, header_height() - 2 }, Color::White);

2
LibGUI/GTextEditor.cpp
View file

@ -216,7 +216,7 @@ void GTextEditor::paint_event(GPaintEvent& event)
if (is_focused())
painter.draw_rect(item_area_rect, Color::from_rgb(0x84351a));
else if (is_single_line())
painter.draw_rect(item_area_rect, Color::DarkGray);
painter.draw_rect(item_area_rect, Color::MidGray);
}
void GTextEditor::toggle_selection_if_needed_for_event(const GKeyEvent& event)

8
LibGUI/GToolBar.cpp
View file

@ -8,10 +8,10 @@ GToolBar::GToolBar(GWidget* parent)
: GWidget(parent)
{
set_size_policy(SizePolicy::Fill, SizePolicy::Fixed);
set_preferred_size({ 0, 30 });
set_preferred_size({ 0, 28 });
set_layout(make<GBoxLayout>(Orientation::Horizontal));
layout()->set_spacing(0);
layout()->set_margins({ 3, 3, 3, 3 });
layout()->set_margins({ 2, 2, 2, 2 });
}
GToolBar::~GToolBar()
@ -50,7 +50,7 @@ public:
{
set_size_policy(SizePolicy::Fixed, SizePolicy::Fixed);
set_background_color(Color::White);
set_preferred_size({ 8, 20 });
set_preferred_size({ 8, 22 });
}
virtual ~SeparatorWidget() override { }
@ -59,7 +59,7 @@ public:
Painter painter(*this);
painter.set_clip_rect(event.rect());
painter.translate(rect().center().x() - 1, 0);
painter.draw_line({ 0, 0 }, { 0, rect().bottom() }, Color::DarkGray);
painter.draw_line({ 0, 0 }, { 0, rect().bottom() }, Color::MidGray);
painter.draw_line({ 1, 0 }, { 1, rect().bottom() }, Color::White);
}

2
Servers/WindowServer/WSWindowManager.cpp
View file

@ -507,7 +507,7 @@ void WSWindowManager::paint_window_frame(WSWindow& window)
m_back_painter->blit(titlebar_icon_rect.location(), window.icon(), window.icon().rect());
m_back_painter->draw_rect(close_button_rect, Color::DarkGray);
m_back_painter->draw_rect(close_button_rect, Color::MidGray);
auto x_location = close_button_rect.center();
x_location.move_by(-(s_close_button_bitmap_width / 2), -(s_close_button_bitmap_height / 2));
m_back_painter->draw_bitmap(x_location, *s_close_button_bitmap, Color::Black);

2
Servers/WindowServer/WSWindowSwitcher.cpp
View file

@ -77,7 +77,7 @@ void WSWindowSwitcher::draw()
rect_text_color = Color::LightGray;
} else {
text_color = Color::Black;
rect_text_color = Color::DarkGray;
rect_text_color = Color::MidGray;
}
painter.blit(item_rect.location().translated(0, (item_rect.height() - window.icon().height()) / 2), window.icon(), window.icon().rect());
painter.draw_text(item_rect.translated(window.icon().width() + 4, 0), window.title(), WSWindowManager::the().window_title_font(), TextAlignment::CenterLeft, text_color);