Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Style tweaks #450

Merged
merged 6 commits into from
Jun 12, 2021
Merged

Style tweaks #450

merged 6 commits into from
Jun 12, 2021

Conversation

emilk
Copy link
Owner

@emilk emilk commented Jun 2, 2021

I've tweaked the visual style of egui a bit, making it more compact and less noisy.

  • Button text is now same size as body text
  • The rounder corners are now less rounded
  • Collapsing headers no longer have a frame around them
  • Combo-boxes looks better when opened
  • Slightly more muted colors
  • Remove extra line spacing after \n (i.e. between paragraphs)

Before:

before

After:

after

@emilk emilk marked this pull request as draft June 2, 2021 18:51
@emilk emilk marked this pull request as ready for review June 2, 2021 19:35
@emilk emilk force-pushed the style-tweaks branch 2 times, most recently from 8e6faa9 to 9c151fc Compare June 3, 2021 17:29
@parasyte
Copy link
Contributor

parasyte commented Jun 3, 2021

I think this branch looks even more amazing with this scroll bar tweak. 😉

diff --git a/egui/src/containers/scroll_area.rs b/egui/src/containers/scroll_area.rs
index a54c402..ba41233 100644
--- a/egui/src/containers/scroll_area.rs
+++ b/egui/src/containers/scroll_area.rs
@@ -259,7 +259,6 @@ impl Prepared {
             let margin = animation_t * ui.spacing().item_spacing.x;
             let left = inner_rect.right() + margin;
             let right = outer_rect.right();
-            let corner_radius = (right - left) / 2.0;
             let top = inner_rect.top();
             let bottom = inner_rect.bottom();

@@ -312,7 +311,7 @@ impl Prepared {
                 pos2(left, from_content(state.offset.y)),
                 pos2(right, from_content(state.offset.y + inner_rect.height())),
             );
-            let min_handle_height = (2.0 * corner_radius).max(8.0);
+            let min_handle_height = max_scroll_bar_width;
             if handle_rect.size().y < min_handle_height {
                 handle_rect = Rect::from_center_size(
                     handle_rect.center(),
@@ -324,18 +323,16 @@ impl Prepared {

             ui.painter().add(epaint::Shape::Rect {
                 rect: outer_scroll_rect,
-                corner_radius,
+                corner_radius: visuals.corner_radius,
                 fill: ui.visuals().extreme_bg_color,
                 stroke: Default::default(),
-                // fill: visuals.bg_fill,
-                // stroke: visuals.bg_stroke,
             });

             ui.painter().add(epaint::Shape::Rect {
-                rect: handle_rect.expand(-2.0),
-                corner_radius,
+                rect: handle_rect,
+                corner_radius: visuals.corner_radius,
                 fill: visuals.bg_fill,
-                stroke: visuals.bg_stroke,
+                stroke: Default::default(),
             });
         }

@@ -358,5 +355,5 @@ impl Prepared {
 }

 fn max_scroll_bar_width_with_margin(ui: &Ui) -> f32 {
-    ui.spacing().item_spacing.x + 16.0
+    ui.spacing().item_spacing.x + 8.0
 }

egui-scroll-bar-tweak

@emilk emilk force-pushed the style-tweaks branch 3 times, most recently from 40d5ec0 to 24fa6d8 Compare June 7, 2021 19:05
emilk added 6 commits June 12, 2021 15:38
More compact, less round, less noisy

* Button text is now same size as body text
* The rounder corners are now less rounded
* Collapsing headers no longer have a frame around them
* Combo-boxes looks better when opened
* Slightly more muted colors
* Remove extra line spacing after `\n` (i.e. between paragraphs)
@emilk emilk merged commit 778bcc1 into master Jun 12, 2021
@emilk emilk deleted the style-tweaks branch June 12, 2021 13:53
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants