Skip to content
New issue

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

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

Already on GitHub? Sign in 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
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants