Improve manual port input UI styling
- Enhanced visual styling for port number input box - Added proper border and padding with consistent colors - Improved label positioning and typography - Added placeholder text when input is empty - Better visual cursor indication - More detailed control instructions - Consistent color scheme with rest of the application The port input box now has better visual hierarchy and is easier to use. Co-authored-by: Ona <no-reply@ona.com>
This commit is contained in:
48
tui.go
48
tui.go
@@ -357,19 +357,53 @@ func (m *Model) renderManualPort() string {
|
|||||||
var s strings.Builder
|
var s strings.Builder
|
||||||
|
|
||||||
host := m.hosts[m.selectedHost]
|
host := m.hosts[m.selectedHost]
|
||||||
s.WriteString(fmt.Sprintf("Manual port forwarding for %s:\n\n", host.Name))
|
hostStyle := lipgloss.NewStyle().
|
||||||
|
Foreground(lipgloss.Color("#7D56F4")).
|
||||||
|
Bold(true)
|
||||||
|
|
||||||
s.WriteString("Enter remote port number: ")
|
s.WriteString(fmt.Sprintf("Manual port forwarding for %s:\n\n", hostStyle.Render(host.Name)))
|
||||||
|
|
||||||
inputStyle := lipgloss.NewStyle().
|
// Label for the input
|
||||||
Border(lipgloss.RoundedBorder()).
|
labelStyle := lipgloss.NewStyle().
|
||||||
Padding(0, 1)
|
Foreground(lipgloss.Color("#FAFAFA")).
|
||||||
|
Bold(true)
|
||||||
|
|
||||||
s.WriteString(inputStyle.Render(m.manualPort))
|
s.WriteString(labelStyle.Render("Remote port number:"))
|
||||||
s.WriteString("\n\n")
|
s.WriteString("\n\n")
|
||||||
|
|
||||||
|
// Input box styling
|
||||||
|
inputStyle := lipgloss.NewStyle().
|
||||||
|
Border(lipgloss.RoundedBorder()).
|
||||||
|
BorderForeground(lipgloss.Color("#7D56F4")).
|
||||||
|
Padding(0, 1).
|
||||||
|
Width(20).
|
||||||
|
Align(lipgloss.Left)
|
||||||
|
|
||||||
|
// Show placeholder or current input
|
||||||
|
displayText := m.manualPort
|
||||||
|
if displayText == "" {
|
||||||
|
placeholderStyle := lipgloss.NewStyle().
|
||||||
|
Foreground(lipgloss.Color("#666666")).
|
||||||
|
Italic(true)
|
||||||
|
displayText = placeholderStyle.Render("e.g., 3000")
|
||||||
|
}
|
||||||
|
|
||||||
|
s.WriteString(inputStyle.Render(displayText))
|
||||||
|
s.WriteString("\n\n")
|
||||||
|
|
||||||
|
// Add cursor indicator
|
||||||
|
if m.manualPort != "" {
|
||||||
|
cursorStyle := lipgloss.NewStyle().
|
||||||
|
Foreground(lipgloss.Color("#FF75B7"))
|
||||||
|
s.WriteString(cursorStyle.Render("│"))
|
||||||
|
s.WriteString("\n\n")
|
||||||
|
} else {
|
||||||
|
s.WriteString("\n")
|
||||||
|
}
|
||||||
|
|
||||||
s.WriteString("Controls:\n")
|
s.WriteString("Controls:\n")
|
||||||
s.WriteString(" Enter: Start forwarding Esc: Back q: Quit\n")
|
s.WriteString(" 0-9: Enter digits Backspace: Delete Enter: Start forwarding\n")
|
||||||
|
s.WriteString(" Esc: Back q: Quit\n")
|
||||||
|
|
||||||
return s.String()
|
return s.String()
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user