ibhagwan / fzf-lua

Improved fzf.vim written in lua
MIT License
2.31k stars 150 forks source link

Making fzf window more "prettier" #760

Closed RayZ0rr closed 1 year ago

RayZ0rr commented 1 year ago

Sorry if this is a stupid question but I am trying to customize the way that fzf looks.

My goal is something similar to https://github.com/olimorris/onedarkpro.nvim/issues/31 (which is for telescope but I want to see if I can achieve something similar to fzf.

My current one looks like this:

2023-05-18_02-50

I have created a config file based on Conscious

local function hl(highlight, fg, bg, link)
  if fg == nil then fg = "none" end
  if bg == nil then bg = "none" end
  vim.api.nvim_set_hl(0, highlight, { fg = fg, bg = bg, link = link })
  if link ~= nil then
    vim.api.nvim_set_hl(0, highlight, { link = link })
  end
end

local colors = {
  fg = "#BBB6B6",
  bg = "#1F1F1F",
  black = "#151515",
  darkgrey = "#2E2E2E",
  grey = "#424242",
  darkwhite = "#E8E3E3",
  white = "#E8E3E3",
  red = "#B66467",
  yellow = "#D9BC8C",
  green = "#8C977D",
  teal = "#8AA6A2",
  blue = "#8DA3B9",
  purple = "#A988B0",
  ash = "#BBB6B6",
}

hl("FzfLuaNormal", colors.darkwhite, colors.bg)
hl("FzfLuaBorder", colors.red, colors.bg)
hl("FzfLuaCursorLine", colors.green, colors.bg)
hl("FzfLuaCursorLineNr", colors.yellow, colors.bg)
hl("FzfLuaSearch", colors.yellow, colors.green)
hl("FzfLuaTitle", colors.black, colors.red)
hl("FzfLuaScrollBorderEmpty", nil, colors.red)
hl("FzfLuaScrollBorderFull", nil, colors.red)
hl("FzfLuaScrollFloatEmpty", nil, colors.red)
hl("FzfLuaScrollFloatFull", nil, colors.red)
hl("FzfLuaHelpNormal", colors.darkgrey, colors.green)
hl("FzfLuaHelpBorder", colors.green, colors.red)
ibhagwan commented 1 year ago

@RayZ0rrm, the highlights you posted are the neovim part of the customization, while I'm not sure if you can get to the exact look and feel as the one you linked you can probably get close, read man fzf to understand the border and spacing options and set fzf's highlights via fzf_colors.

The only thing I think you cannot do rn is the zero spacing between the main fzf window and the preview window when using the default ("builtin") previwer, however, if you use bat previewer you can remove the preview border and set the bat colorscheme to something that would be close to what you wanted.

RayZ0rr commented 1 year ago

@ibhagwan thank you for the quick response as always. I'll look into fzf_colors. I see that you have set it up in your nvim config. But it seems to be dependent on your colorscheme. Let me look into it more.

ibhagwan commented 1 year ago

@ibhagwan thank you for the quick response as always. I'll look into fzf_colors. I see that you have set it up in your nvim config. But it seems to be dependent on your colorscheme. Let me look into it more.

You can always use fzf_cli_args to send flags directly to fzf without fzf-lua transforming any of them.

ibhagwan commented 1 year ago

@RayZ0rr, when you're done if you don't mind please share your customization, I'd love to see what you made of it :-)

RayZ0rr commented 1 year ago

@ibhagwan I don't think I was capable of reproducing telescope's design. I am currently using the one from my dots, specifically here

It looks like this in the terminal (wezterm)

image

And like this in nvim

image

The only problem is the help window with green background which seems not that clear

image

Except for that I really like the current look and it feels more refreshing to use fzf :heart:

ibhagwan commented 1 year ago

Looks great, ty @RayZ0rr :)

0xcharly commented 1 year ago

Here's the settings I use to achieve something similar to what's shown in the first comment. Hope this helps!

Relevant fzf-lua configuration

init.lua ```lua local opts = { winopts = { preview = { title_align = 'center', scrollbar = 'float', }, }, fzf_opts = { ['--ansi'] = '', ['--info'] = 'inline', ['--height'] = '100%', ['--layout'] = 'reverse', ['--border'] = 'none', ['--prompt'] = '❯', ['--pointer'] = '❯', ['--marker'] = '❯', ['--no-scrollbar'] = '', }, fzf_colors = { ['fg'] = { 'fg', 'FzfLuaColorsFg' }, ['fg+'] = { 'fg', 'FzfLuaColorsFgSel', 'reverse:-1' }, ['bg'] = { 'fg', 'FzfLuaColorsBg' }, ['bg+'] = { 'fg', 'FzfLuaColorsBgSel' }, ['hl'] = { 'fg', 'FzfLuaColorsHl' }, ['hl+'] = { 'fg', 'FzfLuaColorsHlSel', 'underline:reverse:-1' }, ['info'] = { 'fg', 'FzfLuaColorsInfo' }, ['prompt'] = { 'fg', 'FzfLuaColorsPrompt' }, ['pointer'] = { 'fg', 'FzfLuaColorsPointer' }, ['marker'] = { 'fg', 'FzfLuaColorsMarker' }, ['spinner'] = { 'fg', 'FzfLuaColorsSpinner' }, ['header'] = { 'fg', 'FzfLuaColorsHeader' }, }, } -- Disable icons, improve performances drastically. local noicon = { git_icons = false, file_icons = false, color_icons = false, } opts['btags'] = noicon opts['buffers'] = noicon opts['complete_file'] = noicon opts['diagnostics'] = noicon opts['files'] = noicon opts['finder'] = noicon opts['git'] = { files = noicon, status = noicon, } opts['grep'] = noicon opts['lsp'] = noicon opts['quickfix'] = noicon opts['tabs'] = noicon opts['tags'] = noicon require 'fzf-lua'.setup(opts) ```

Theme overrides (with Lush)

theme.lua ```lua FzfLuaNormal { Normal, bg = T.surface0 }, FzfLuaBorder { fg = T.overlay0, bg = T.overlay0 }, FzfLuaTitle { fg = T.surface0, bg = T.blue, gui = 'bold' }, FzfLuaScrollFloatEmpty { bg = T.surface0 }, -- fzf-lua is configured to only pass down the .fg attribute. FzfLuaColorsFg { fg = T.text0 }, FzfLuaColorsFgSel { FzfLuaColorsFg }, FzfLuaColorsBg { fg = T.overlay0 }, FzfLuaColorsBgSel { FzfLuaColorsBg }, FzfLuaColorsHl { fg = T.blue }, FzfLuaColorsHlSel { FzfLuaColorsHl }, FzfLuaColorsInfo { fg = T.subtext1 }, FzfLuaColorsPrompt { fg = T.purple }, FzfLuaColorsPointer { fg = T.blue }, FzfLuaColorsMarker { fg = T.green }, FzfLuaColorsSpinner { FzfLuaColorsInfo }, FzfLuaColorsHeader { FzfLuaColorsInfo }, ```

Screenshot

This achieves the following results (I'm still iterating on the theme, so colors are not final, but that should be irrelevant to configuration of fzf-lua):

Screenshot 2023-06-25 at 7 26 30 PM
ibhagwan commented 1 year ago

Looks amazing @0xcharly!

ibhagwan commented 1 year ago

@0xcharly, I’m thinking it might be worthwhile to add a new border style with the same “fat” characters so this would be made possible without having to use a custom colorscheme, something akin to the thicc style: https://github.com/ibhagwan/fzf-lua/blob/7aff4a3a089c65c6e60646945d8a5c8116078061/lua/fzf-lua/defaults.lua#L76-L82

Would love to create a profile that demonstrates this style that can work with or without a custom colorscheme.

ibhagwan commented 1 year ago

https://github.com/ibhagwan/fzf-lua/commit/ca3757661d6575bd7a4e28177081351a36732dff

Update and try :FzfLua profiles and select borderless.

image

image

0xcharly commented 1 year ago

Thanks for this new profile! It's looking good out of the box. I only have 2 comments:

This is, of course, only my personal opinion. Feel free to choose whatever works best for you.

ibhagwan commented 1 year ago

ty @0xcharly for the comments!

ReverseDirectory

Unlike the PmenuXXX highlights, IMHO Directory is not consistent between colorschemes and can vary greatly in color, while it looks great in your screenshot it will vary greatly for users.

I think PmenuThumb might be more appropriate for the scrollbar thumb

I tried it and it seems PmenuThumb is consitently brighter on all of my colorschemes which made it harder to determine which part is full vs empty, I somewhat like the cleaner look with equal background but not opposed to testing with a darker color or no color (see below) for empty.

Thankfully, it's very easy to set customization overrides, like this:

:lua require"fzf-lua".setup({"borderless",winopts={hl={scrollfloat_e="PmenuThumb"}}})

Try this for an empty background, also interesting:

:lua require"fzf-lua".setup({"borderless",winopts={hl={scrollfloat_e=""}}})

image

There is an extra blank character at the beginning of the title box (see your screenshots and my attachment below)

Fixed in https://github.com/ibhagwan/fzf-lua/commit/3115ed3d1be551e463f1639d6225d2fc2669ab70.

One more thing, this part in your config:

     -- Disable icons, improve performances drastically.
      local noicon = {
        git_icons = false,
        file_icons = false,
        color_icons = false,
      }
      opts['btags'] = noicon
      opts['buffers'] = noicon
     ...

Can be reduced to:

  global_git_icons = false,
  global_file_icons = false,
ibhagwan commented 1 year ago

@0xcharly, I forgot to mention one more thing, the current profile defines the border as an array of empty strings which adds padding around the main terminal window, it's worth noting that if you set winopts.border = "none" you can drop the main window border completely, try it out and see which one you like more:

:lua require"fzf-lua".setup({"borderless",winopts={border="none"}})

Notice the zero-padding of the fzf terminal: image

ibhagwan commented 1 year ago

@RayZ0rr, I was able to achieve something very similar to what you're after with the addition of the title to the main window, modified borderless theme below:

use the title function to add titles to other providers (git, etc)

local function title(str)
return {
winopts = {
-- passthrough options to main window's `nvim_open_win`
title = { { " " .. str .. " ", "IncSearch" } },
title_pos = "center",
}
}
local hls = {
bg  = "PmenuSbar",
sel = "PmenuSel",
}
end
require("fzf-lua").setup {
global_git_icons = false,
global_file_icons = false,
winopts = {
border  = { " ", " ", " ", " ", " ", " ", " ", " " },
preview = {
scrollbar   = "float",
scrolloff   = "-2",
title_align = "center",
},
hl      = {
title          = "IncSearch",
border         = hls.bg,
preview_border = hls.bg,
scrollfloat_e  = "",
scrollfloat_f  = hls.sel,
},
},
fzf_colors = {
["gutter"] = { "bg", hls.bg },
["bg"]     = { "bg", hls.bg },
["bg+"]    = { "bg", hls.sel },
["fg+"]    = { "fg", hls.sel },
},
files = title("Find Files"),
grep = title("Search"),
}

image

0xcharly commented 1 year ago

ty @0xcharly for the comments!

ReverseDirectory

Unlike the PmenuXXX highlights, IMHO Directory is not consistent between colorschemes and can vary greatly in color, while it looks great in your screenshot it will vary greatly for users.

Fair enough, I haven't tested with other themes, but was just looking for something that would make sense from a highlight naming convention point of view. I guess File would be even closer, but it also makes sense to take something that works with most themes out of the box.

I think PmenuThumb might be more appropriate for the scrollbar thumb

I tried it and it seems PmenuThumb is consitently brighter on all of my colorschemes which made it harder to determine which part is full vs empty, I somewhat like the cleaner look with equal background but not opposed to testing with a darker color or no color (see below) for empty.

Yeah, same comment as above, it makes sense to use something that looks good out of the box over something that is more semantically correct. Even though it's a bit of a shame, presets do need to work out of the box to be relevant.

Thankfully, it's very easy to set customization overrides, like this:

:lua require"fzf-lua".setup({"borderless",winopts={hl={scrollfloat_e="PmenuThumb"}}})

Try this for an empty background, also interesting:

:lua require"fzf-lua".setup({"borderless",winopts={hl={scrollfloat_e=""}}})

Yeah, thanks for the flexibility here. I'm going to keep my config as-is anyway, since I like where I landed. The only thing that I'll change is to use blanks for border characters.

Working great now:

Screenshot 2023-06-26 at 15 30 49

There is an extra blank character at the beginning of the title box (see your screenshots and my attachment below)

Fixed in 3115ed3.

Thanks for the quick fix!

One more thing, this part in your config:

     -- Disable icons, improve performances drastically.
      local noicon = {
        git_icons = false,
        file_icons = false,
        color_icons = false,
      }
      opts['btags'] = noicon
      opts['buffers'] = noicon
     ...

Can be reduced to:

  global_git_icons = false,
  global_file_icons = false,

I had noticed that from the profile's configs and promptly updated mine to take advantage of that! Much cleaner.

0xcharly commented 1 year ago

@0xcharly, I forgot to mention one more thing, the current profile defines the border as an array of empty strings which adds padding around the main terminal window, it's worth noting that if you set winopts.border = "none" you can drop the main window border completely, try it out and see which one you like more:

I did try that to begin with, but I personally prefer the look of the window with the extra padding. Thanks for the pointer though, might be useful for someone else that lands on this issue.

ibhagwan commented 1 year ago

https://github.com/ibhagwan/fzf-lua/commit/577f2a74c6914515d45a4c1f390978c18d9cd3cb

Ok final update to this (hopefully :smile:), new "quickstart" profile borderless_full that hopefully answers the design question in the OP.

Left most of terminal fzf's colors as default, probably room for improvement via fzf_colors but I'll leave that for incoming PRs.

image

Tysm @0xcharly for opening my eyes to the new design, your final setup looks amazing!

0xcharly commented 1 year ago

My pleasure! And thank you for all the work on this issue, for all the commits you've sent since yesterday, and in general for bringing fzf-lua into the world: I'm a big fan of Telescope, but fzf-lua answers my need for performances.

GreenSleeper commented 1 year ago

image

I've noticed that in the leftside results window, if a result is too long, it eats the file icon. How can I make it always show up to get a more uniform look.

And can the preview title only shows filename not a long path?

ibhagwan commented 1 year ago

I've noticed that in the leftside results window, if a result is too long, it eats the file icon. How can I make it always show up to get a more uniform look.

That’s controlled by fzf (the binary, not Fzf-lua), I’m not aware of any option to keep the left side pinned, you can use :FzfLua files path_shorten=true will most likely help in this case.

And can the preview title only shows filename not a long path?

Currently no but it’s probably not a bad idea to shorten the path or use only the filename, I’ll add it to the feature list.

ibhagwan commented 1 year ago

https://github.com/ibhagwan/fzf-lua/commit/30bb3a64da164135097c9cac7c0fbeabc6aa0426

@GreenSleeper, def made more sense to have just the filename, this commit makes it the default (customizable).

GreenSleeper commented 1 year ago

30bb3a6

@GreenSleeper, def made more sense to have just the filename, this commit makes it the default (customizable).

I try to update, but why I'm I getting this error? image

ibhagwan commented 1 year ago

I try to update, but why I'm I getting this error?

This error isn’t from Fzf-lua, looks like the lazy.nvim updater, I would try to uninstall and reinstall the plug-in, perhaps also open an issue with lazy if you’d like this solved for the future?

0xcharly commented 1 year ago

I can reproduce the issue on my end. It seems to be due to the vimdoc plugin generating another fzf-lua-table-of-contents vimdoc tag because of the recent addition of "Table of Contents" in the readme.

0xcharly commented 1 year ago

Oh, I see that our messages crossed: https://github.com/ibhagwan/fzf-lua/commit/6171eee035ce47319e81a784453017d7eab18ea4

ibhagwan commented 1 year ago

Oh, I see that our messages crossed: 6171eee

Yap, should be ok now, I forgot the README to vimdoc plugin already generates a fzf-lua-table-of-contents tag.

@GreenSleeper update to https://github.com/ibhagwan/fzf-lua/commit/b1ee200e50f11506be7dcb9c529ce091b375dc6a and the message should disappear.

0xcharly commented 1 year ago

I can confirm that https://github.com/ibhagwan/fzf-lua/commit/6171eee035ce47319e81a784453017d7eab18ea4 fixed the issue. Thanks for the quick fix!

ibhagwan commented 1 year ago

I can confirm that 6171eee fixed the issue. Thanks for the quick fix!

Techincally you need https://github.com/ibhagwan/fzf-lua/commit/b1ee200e50f11506be7dcb9c529ce091b375dc6a, post the vimdoc generator step :-)

0xcharly commented 1 year ago

Fair, I guess the CI was fast enough!