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();
// 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()));
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 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
scrollbar: bool,
color: Color = .default,
show_background: bool = false,
x_axis: bool = false,
y_axis: bool = false,
pub const disabled: @This() = .{ .scrollbar = false };
pub fn enabled(color: Color) @This() {
return .{ .scrollbar = true, .color = color };
pub fn enabled(color: Color, show_background: bool) @This() {
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,
.emphasis = if (row >= scrollbar_starting_pos and row <= scrollbar_starting_pos + scrollbar_size)
&.{} // scrollbar itself
else if (this.configuration.show_background)
&.{.dim} // background (around scrollbar)
else
&.{.dim}, // background (around scrollbar)
&.{.hidden}, // hide background
},
.cp = '🮋', // 7/8 block right
};
@@ -430,8 +437,10 @@ pub fn Scrollable(Model: type, Event: type) type {
.fg = this.configuration.color,
.emphasis = if (col >= scrollbar_starting_pos and col <= scrollbar_starting_pos + scrollbar_size)
&.{} // scrollbar itself
else if (this.configuration.show_background)
&.{.dim} // background (around scrollbar)
else
&.{.dim}, // background (around scrollbar)
&.{.hidden}, // hide background
},
.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();
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, .{
.border = .{
@@ -1368,7 +1377,7 @@ test "scrollable horizontal with scrollbar" {
}, .{}));
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, .{
.border = .{