Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(help): Fix help bubble not centering correctly #516

Merged
merged 1 commit into from
May 23, 2024

Conversation

gabe565
Copy link
Contributor

@gabe565 gabe565 commented Apr 28, 2024

The help bubble appends the separator after the final column, which results in it being shifted 4 cols to the left when centered. This PR removes the final separator column.

I don't know the reasoning for this decision, so feel free to close this if the final separator column is intended! If it is, maybe a bool should be added to toggle the behavior?

Fixes #415

Thank you!

Examples

ascii-movie

I built ascii-movie, and have seen this behavior. Here's a screenshot before and after the fix:

Before:
image

After:
image

simple repro

Before/After:
image

Code:

package main

import (
	"fmt"
	"os"

	"github.com/charmbracelet/bubbles/help"
	"github.com/charmbracelet/bubbles/key"
	tea "github.com/charmbracelet/bubbletea"
	"github.com/charmbracelet/lipgloss"
)

type keyMap struct {
	Up    key.Binding
	Down  key.Binding
	Left  key.Binding
	Right key.Binding
	Help  key.Binding
	Quit  key.Binding
}

func (k keyMap) ShortHelp() []key.Binding {
	return []key.Binding{k.Help, k.Quit}
}

func (k keyMap) FullHelp() [][]key.Binding {
	return [][]key.Binding{
		{k.Up, k.Down, k.Left, k.Right},
		{k.Help, k.Quit},
	}
}

var keys = keyMap{
	Up: key.NewBinding(
		key.WithKeys("up", "k"),
		key.WithHelp("↑/k", "move up"),
	),
	Down: key.NewBinding(
		key.WithKeys("down", "j"),
		key.WithHelp("↓/j", "move down"),
	),
	Left: key.NewBinding(
		key.WithKeys("left", "h"),
		key.WithHelp("←/h", "move left"),
	),
	Right: key.NewBinding(
		key.WithKeys("right", "l"),
		key.WithHelp("→/l", "move right"),
	),
	Help: key.NewBinding(
		key.WithKeys("?"),
		key.WithHelp("?", "toggle help"),
	),
	Quit: key.NewBinding(
		key.WithKeys("q", "esc", "ctrl+c"),
		key.WithHelp("q", "quit"),
	),
}

type model struct {
	keys          keyMap
	help          help.Model
	style         lipgloss.Style
	width, height int
}

func newModel() model {
	h := help.New()
	h.ShowAll = true
	return model{
		keys:  keys,
		help:  h,
		style: lipgloss.NewStyle().Margin(2),
	}
}

func (m model) Init() tea.Cmd {
	return nil
}

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) {
	case tea.WindowSizeMsg:
		m.width, m.height = msg.Width, msg.Height

	case tea.KeyMsg:
		switch {
		case key.Matches(msg, m.keys.Help):
			m.help.ShowAll = !m.help.ShowAll
		case key.Matches(msg, m.keys.Quit):
			return m, tea.Quit
		}
	}

	return m, nil
}

func (m model) View() string {
	text := "Example text to test alignment\n"
	helpView := m.help.View(m.keys)
	content := lipgloss.JoinVertical(lipgloss.Center, text, helpView)
	return m.style.Render(content)
}

func main() {
	if _, err := tea.NewProgram(newModel()).Run(); err != nil {
		fmt.Printf("Could not start program :(\n%v\n", err)
		os.Exit(1)
	}
}

@meowgorithm
Copy link
Member

Thank you for the extremely thorough PR (ascii-movie looks awesome, btw)!

@meowgorithm meowgorithm merged commit 613d1cb into charmbracelet:master May 23, 2024
8 of 9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Help bubble has an unwanted right padding
2 participants