Panel visual improvements (#2261)

* Remove stroke around panels and replace with separator single line

* Remove item_spacing between panels

* Update changelog

CHANGELOG.md

@@ -18,6 +18,9 @@ NOTE: [`epaint`](crates/epaint/CHANGELOG.md), [`eframe`](crates/eframe/CHANGELOG
 * Added `egui::gui_zoom` module with helpers for scaling the whole GUI of an app ([#2239](https://github.com/emilk/egui/pull/2239)).
 * You can now put one interactive widget on top of another, and only one will get interaction at a time ([#2244](https://github.com/emilk/egui/pull/2244)).
 
+### Changed 🔧
+* Panels always have a separator line, but no stroke on other sides. Their spacing has also changed slightly ([#2261](https://github.com/emilk/egui/pull/2261)).
+
 ### Fixed 🐛
 * ⚠️ BREAKING: Fix text being too small ([#2069](https://github.com/emilk/egui/pull/2069)).
 * Improved text rendering ([#2071](https://github.com/emilk/egui/pull/2071)).
@@ -42,7 +45,7 @@ NOTE: [`epaint`](crates/epaint/CHANGELOG.md), [`eframe`](crates/eframe/CHANGELOG
 * Added `PointerState::button_double_clicked()` and `PointerState::button_triple_clicked()` ([#1906](https://github.com/emilk/egui/issues/1906)).
 * Added `custom_formatter`, `binary`, `octal`, and `hexadecimal` to `DragValue` and `Slider` ([#1953](https://github.com/emilk/egui/issues/1953))
 
-### Changed
+### Changed 🔧
 * MSRV (Minimum Supported Rust Version) is now `1.61.0` ([#1846](https://github.com/emilk/egui/pull/1846)).
 * `PaintCallback` shapes now require the whole callback to be put in an `Arc<dyn Any>` with the value being a backend-specific callback type ([#1684](https://github.com/emilk/egui/pull/1684)).
 * Replaced `needs_repaint` in `FullOutput` with `repaint_after`. Used to force repaint after the set duration in reactive mode ([#1694](https://github.com/emilk/egui/pull/1694)).

crates/egui/src/containers/frame.rs

@@ -45,9 +45,7 @@ impl Frame {
     pub(crate) fn side_top_panel(style: &Style) -> Self {
         Self {
             inner_margin: Margin::symmetric(8.0, 2.0),
-            rounding: Rounding::none(),
             fill: style.visuals.window_fill(),
-            stroke: style.visuals.window_stroke(),
             ..Default::default()
         }
     }
@@ -55,9 +53,7 @@ impl Frame {
     pub(crate) fn central_panel(style: &Style) -> Self {
         Self {
             inner_margin: Margin::same(8.0),
-            rounding: Rounding::none(),
             fill: style.visuals.window_fill(),
-            stroke: Default::default(),
             ..Default::default()
         }
     }

crates/egui/src/containers/panel.rs

@@ -249,7 +249,7 @@ impl SidePanel {
                 let dragging_something_else = any_down || ui.input().pointer.any_pressed();
                 resize_hover = mouse_over_resize_line && !dragging_something_else;
 
-                if resize_hover || is_resizing {
+                {
                     ui.output().cursor_icon = CursorIcon::ResizeHorizontal;
                 }
             }
@@ -270,10 +270,10 @@ impl SidePanel {
             let mut cursor = ui.cursor();
             match side {
                 Side::Left => {
-                    cursor.min.x = rect.max.x + ui.spacing().item_spacing.x;
+                    cursor.min.x = rect.max.x;
                 }
                 Side::Right => {
-                    cursor.max.x = rect.min.x - ui.spacing().item_spacing.x;
+                    cursor.max.x = rect.min.x;
                 }
             }
             ui.set_cursor(cursor);
@@ -282,11 +282,14 @@ impl SidePanel {
 
         PanelState { rect }.store(ui.ctx(), id);
 
-        if resize_hover || is_resizing {
+        {
             let stroke = if is_resizing {
                 ui.style().visuals.widgets.active.bg_stroke
-            } else {
+            } else if resize_hover {
                 ui.style().visuals.widgets.hovered.bg_stroke
+            } else {
+                // TOOD(emilk): distinguish resizable from non-resizable
+                ui.style().visuals.widgets.noninteractive.bg_stroke
             };
             // draw on top of ALL panels so that the resize line won't be covered by subsequent panels
             let resize_layer = LayerId::new(Order::Foreground, Id::new("panel_resize"));
@@ -679,7 +682,7 @@ impl TopBottomPanel {
                 let dragging_something_else = any_down || ui.input().pointer.any_pressed();
                 resize_hover = mouse_over_resize_line && !dragging_something_else;
 
-                if resize_hover || is_resizing {
+                {
                     ui.output().cursor_icon = CursorIcon::ResizeVertical;
                 }
             }
@@ -700,10 +703,10 @@ impl TopBottomPanel {
             let mut cursor = ui.cursor();
             match side {
                 TopBottomSide::Top => {
-                    cursor.min.y = rect.max.y + ui.spacing().item_spacing.y;
+                    cursor.min.y = rect.max.y;
                 }
                 TopBottomSide::Bottom => {
-                    cursor.max.y = rect.min.y - ui.spacing().item_spacing.y;
+                    cursor.max.y = rect.min.y;
                 }
             }
             ui.set_cursor(cursor);
@@ -712,11 +715,14 @@ impl TopBottomPanel {
 
         PanelState { rect }.store(ui.ctx(), id);
 
-        if resize_hover || is_resizing {
+        {
             let stroke = if is_resizing {
                 ui.style().visuals.widgets.active.bg_stroke
-            } else {
+            } else if resize_hover {
                 ui.style().visuals.widgets.hovered.bg_stroke
+            } else {
+                // TOOD(emilk): distinguish resizable from non-resizable
+                ui.style().visuals.widgets.noninteractive.bg_stroke
             };
             // draw on top of ALL panels so that the resize line won't be covered by subsequent panels
             let resize_layer = LayerId::new(Order::Foreground, Id::new("panel_resize"));