diff --git a/examples/elements/input.zig b/examples/elements/input.zig index 7a649a3..090a61a 100644 --- a/examples/elements/input.zig +++ b/examples/elements/input.zig @@ -166,17 +166,24 @@ const InputField = struct { const this: *@This() = @ptrCast(@alignCast(ctx)); assert(cells.len == @as(usize, size.x) * @as(usize, size.y)); - // TODO add configuration for coloring the text! - for (this.input.items, 0..) |cp, idx| { - cells[idx].style.fg = .black; + const offset = if (this.input.items.len - this.cursor_offset + 1 >= cells.len) this.input.items.len + 1 - cells.len else 0; + for (this.input.items[offset..], 0..) |cp, idx| { + cells[idx].style.fg = this.configuration.color; cells[idx].cp = cp; + // display ellipse at the beginning + if (offset > 0 and idx == 0) cells[idx].cp = '…'; // NOTE do not write over the contents of this `Container`'s `Size` - if (idx == cells.len - 1) break; + if (idx == cells.len - 1) { + // display ellipse at the end + if (this.input.items.len >= cells.len and this.cursor_offset > 0) cells[idx].cp = '…'; + break; + } } - // TODO show ellipse `..` (maybe with configuration where - start, middle, end) - // show cursor after text (if there is still space available) - if (this.input.items.len < cells.len) cells[this.input.items.len - this.cursor_offset].style.cursor = true; + if (this.input.items.len < cells.len) + cells[this.input.items.len - this.cursor_offset].style.cursor = true + else + cells[this.input.items.len - offset - this.cursor_offset].style.cursor = true; } }; @@ -247,7 +254,7 @@ pub fn main() !void { .rectangle = .{ .fill = .light_grey }, .size = .{ .grow = .horizontal, - .dim = .{ .y = 10 }, + .dim = .{ .y = 1 }, }, }, input_field.element()));