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

Border around the input section #4154

Closed
junegunn opened this issue Jan 2, 2025 · 0 comments
Closed

Border around the input section #4154

junegunn opened this issue Jan 2, 2025 · 0 comments
Assignees
Labels

Comments

@junegunn
Copy link
Owner

junegunn commented Jan 2, 2025

Summary

In addition to the recent --list-border (#4148), add options to draw border around the input section of the UI (prompt + info).

  • Add --input-border option to draw additional border around the input section
  • Also add --input-label and --input-label-pos, similar to --border-label and --border-label-pos, for placing label on the new border

Objective

  • Even more flexibility for UI customization

Examples

Basic usage

git ls-files | fzf \
    --preview 'bat --color=always {} --style=numbers' \
    --input-border --input-label ' Input ' --preview-label ' Preview '
image
  • Separator is disabled by default if --input-border is used
  • --header-first is ignored when --input-border is used

With list border

git ls-files | fzf \
    --border --padding 1,2 --input-border --list-border --info inline-right \
    --border-label ' Demo ' --input-label ' Input ' \
    --preview 'bat --color=always {} --style=numbers' \
    --bind 'result:transform-list-label:
        if [[ -z $FZF_QUERY ]]; then
          echo " $FZF_MATCH_COUNT items "
        else
          echo " $FZF_MATCH_COUNT matches for [$FZF_QUERY] "
        fi
        ' \
    --bind 'focus:transform-preview-label:[[ -n {} ]] && printf " Previewing [%s] " {}' \
    --bind 'ctrl-r:change-list-label( Reloading the list )+reload(sleep 2; git ls-files)' \
    --color 'border:#cccccc,label:#ffffff'
image

thinblock style with different background colors

git ls-files | fzf \
    --border thinblock --padding 1,2 --input-border thinblock \
    --list-border thinblock --info inline-right \
    --preview-border thinblock \
    --border-label ' Demo ' --input-label ' Input ' \
    --border-label-pos bottom --input-label-pos bottom \
    --list-label-pos bottom --preview-label-pos bottom \
    --preview 'bat --color=always {} --style=numbers' \
    --bind 'result:transform-list-label:
        if [[ -z $FZF_QUERY ]]; then
          echo " $FZF_MATCH_COUNT items "
        else
          echo " $FZF_MATCH_COUNT matches for [$FZF_QUERY] "
        fi
        ' \
    --bind 'focus:transform-preview-label:[[ -n {} ]] && printf " Previewing [%s] " {}' \
    --bind 'ctrl-r:change-list-label( Reloading the list )+reload(sleep 2; git ls-files)' \
    --color 'bg:#222222,border:#aaaaaa' \
    --color 'preview-bg:#333344,preview-border:#9999cc,preview-label:#ccccff' \
    --color 'list-bg:#334433,list-border:#669966,list-label:#99cc99' \
    --color 'input-bg:#443333,input-border:#996666,input-label:#ffcccc'
image
@junegunn junegunn self-assigned this Jan 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant