feat(element/scrollable): background configuration
Some checks failed
Zig Project Action / Lint, Spell-check and test zig project (push) Failing after 1m30s

This commit is contained in:
2025-11-02 21:00:17 +01:00
parent 4567963ff2
commit a83e86f8d9
2 changed files with 17 additions and 8 deletions

View File

@@ -148,10 +148,10 @@ pub fn main() !void {
defer container.deinit(); defer container.deinit();
// place empty container containing the element of the scrollable Container. // place empty container containing the element of the scrollable Container.
var scrollable_top: App.Scrollable = .init(top_box, .enabled(.grey)); var scrollable_top: App.Scrollable = .init(top_box, .enabled(.default, false));
try container.append(try App.Container.init(allocator, .{}, scrollable_top.element())); try container.append(try App.Container.init(allocator, .{}, scrollable_top.element()));
var scrollable_bottom: App.Scrollable = .init(bottom_box, .enabled(.white)); var scrollable_bottom: App.Scrollable = .init(bottom_box, .enabled(.white, true));
try container.append(try App.Container.init(allocator, .{}, scrollable_bottom.element())); try container.append(try App.Container.init(allocator, .{}, scrollable_bottom.element()));
try app.start(); try app.start();

View File

@@ -231,13 +231,18 @@ pub fn Scrollable(Model: type, Event: type) type {
// TODO the scrollbar bool and the color should be in their own struct using `enabled` and `color` inside of the struct to be more consistent with other `Configuration` structs // TODO the scrollbar bool and the color should be in their own struct using `enabled` and `color` inside of the struct to be more consistent with other `Configuration` structs
scrollbar: bool, scrollbar: bool,
color: Color = .default, color: Color = .default,
show_background: bool = false,
x_axis: bool = false, x_axis: bool = false,
y_axis: bool = false, y_axis: bool = false,
pub const disabled: @This() = .{ .scrollbar = false }; pub const disabled: @This() = .{ .scrollbar = false };
pub fn enabled(color: Color) @This() { pub fn enabled(color: Color, show_background: bool) @This() {
return .{ .scrollbar = true, .color = color }; return .{
.scrollbar = true,
.color = color,
.show_background = show_background,
};
} }
}; };
@@ -412,8 +417,10 @@ pub fn Scrollable(Model: type, Event: type) type {
.fg = this.configuration.color, .fg = this.configuration.color,
.emphasis = if (row >= scrollbar_starting_pos and row <= scrollbar_starting_pos + scrollbar_size) .emphasis = if (row >= scrollbar_starting_pos and row <= scrollbar_starting_pos + scrollbar_size)
&.{} // scrollbar itself &.{} // scrollbar itself
else if (this.configuration.show_background)
&.{.dim} // background (around scrollbar)
else else
&.{.dim}, // background (around scrollbar) &.{.hidden}, // hide background
}, },
.cp = '🮋', // 7/8 block right .cp = '🮋', // 7/8 block right
}; };
@@ -430,8 +437,10 @@ pub fn Scrollable(Model: type, Event: type) type {
.fg = this.configuration.color, .fg = this.configuration.color,
.emphasis = if (col >= scrollbar_starting_pos and col <= scrollbar_starting_pos + scrollbar_size) .emphasis = if (col >= scrollbar_starting_pos and col <= scrollbar_starting_pos + scrollbar_size)
&.{} // scrollbar itself &.{} // scrollbar itself
else if (this.configuration.show_background)
&.{.dim} // background (around scrollbar)
else else
&.{.dim}, // background (around scrollbar) &.{.hidden}, // hide background
}, },
.cp = '🮄', // 5/8 block top (to make it look more equivalent to the vertical scrollbar) .cp = '🮄', // 5/8 block top (to make it look more equivalent to the vertical scrollbar)
}; };
@@ -1208,7 +1217,7 @@ test "scrollable vertical with scrollbar" {
}, .{})); }, .{}));
defer box.deinit(); defer box.deinit();
var scrollable: Scrollable(Model, event.SystemEvent) = .init(box, .enabled(.white)); var scrollable: Scrollable(Model, event.SystemEvent) = .init(box, .enabled(.white, true));
var container: Container(Model, event.SystemEvent) = try .init(allocator, .{ var container: Container(Model, event.SystemEvent) = try .init(allocator, .{
.border = .{ .border = .{
@@ -1368,7 +1377,7 @@ test "scrollable horizontal with scrollbar" {
}, .{})); }, .{}));
defer box.deinit(); defer box.deinit();
var scrollable: Scrollable(Model, event.SystemEvent) = .init(box, .enabled(.white)); var scrollable: Scrollable(Model, event.SystemEvent) = .init(box, .enabled(.white, true));
var container: Container(Model, event.SystemEvent) = try .init(allocator, .{ var container: Container(Model, event.SystemEvent) = try .init(allocator, .{
.border = .{ .border = .{