gizak / gizak/termui

Feature Request: add containers for widgets

Open
#320 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Go
Stars
13.6k
Forks
819
PR merge metrics
No merged PRs in 30d

Description

The way to set the positions of widgets is through the x1 y1 coordinates in func (*Block) [SetRect](https://github.com/gizak/termui/blob/v3.1.0/v3/block.go#L92):
```go
p := widgets.NewParagraph()
p.Title = "Lunar"
p.Text = selectedAudio
p.SetRect(0, 0, 40, 3)
p.TitleStyle.Fg = ui.ColorYellow
p.BorderStyle.Fg = ui.ColorCyan

c := widgets.NewParagraph()
c.Title = "Audio Controls"
c.Text = `Pause and play music: [ENTER]
Volume: [↓ ↑]
Speed: [← →]
Normal Speed: [Ctrl + N]
Back to menu: [BACKSPACE]
Quit Lunar: [ESC]
`
c.SetRect(0, 4, 40, 12)
c.TitleStyle.Fg = ui.ColorYellow
c.BorderStyle.Fg = ui.ColorCyan

ui.Render(p, c)

```
But this can create overlap over widgets:
```power shell
+-Lunar--------------------------------+
|Playing Charlie Puth |
+--------------------------------------+
|Normal Speed: [Ctrl + N] |
|Back to menu: [BACKSPACE] |
|Quit Lunar: [ESC] |
+--------------------------------------+
```
Preferred output:
```powershell
+-Lunar--------------------------------+
|Playing Charlie Puth |
+--------------------------------------+

+-Audio Controls-----------------------+
|Pause and play music: [ENTER] |
|Volume: [↓ ↑] |
|Speed: [← →] |
|Normal Speed: [Ctrl + N] |
|Back to menu: [BACKSPACE] |
|Quit Lunar: [ESC] |
+--------------------------------------+
```

My idea is to create a container for the widgets like in the [Fyne GUI](https://developer.fyne.io/container/box) to position
the widgets and avoid widget overlap:

```
SetContent(NewVericalBox(c, p))
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with v3/block.go at Block.SetRect and the rendering path used by ui.Render, then inspect how widgets.NewParagraph currently receive and retain positions. Compare the requested container behavior with the existing widget APIs and determine how layout should be specified. Done means a container can position multiple widgets without overlap, with behavior demonstrated by suitable tests or examples.

Written by the indexing model from the issue text.

Assessment

Tech stack
go
Domain
cli
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.