diff --git a/docs/tips.md b/docs/tips.md index d4f8dcf76..7eec43aab 100644 --- a/docs/tips.md +++ b/docs/tips.md @@ -28,7 +28,7 @@ Copy the preset [`manager` component](https://github.com/sxyazi/yazi/blob/main/y - -- Borders - ui.Bar(chunks[1], ui.Position.RIGHT):symbol(THEME.manager.border_symbol):style(THEME.manager.border_style), - ui.Bar(chunks[3], ui.Position.LEFT):symbol(THEME.manager.border_symbol):style(THEME.manager.border_style), -+ ui.Border(area, ui.Position.ALL), ++ ui.Border(area, ui.Position.ALL):type(ui.Border.ROUNDED), + ui.Bar(chunks[1], ui.Position.RIGHT), + ui.Bar(chunks[3], ui.Position.LEFT), + @@ -50,70 +50,7 @@ Copy the preset [`manager` component](https://github.com/sxyazi/yazi/blob/main/y end ``` -Finally include it and adjust the manager layout offset: - -```toml -# yazi.toml -[plugins] -preload = [ - "~/.config/yazi/ui.lua" -] - -# theme.toml -[manager] -folder_offset = [ 2, 0, 2, 0 ] -preview_offset = [ 2, 1, 2, 1 ] -``` - -## Full border customization - -You can fully customize the border for Yazi via the UI plugin - - - -Copy the preset [`manager` component](https://github.com/sxyazi/yazi/blob/main/yazi-plugin/preset/components/manager.lua) to any place, for example `~/.config/yazi/ui.lua`, then apply the following patch: - -```diff - -@@ -10,16 +10,26 @@ function Manager:render(area) - }) - :split(area) - -+ local bar = function(c, x, y) -+ return ui.Bar(ui.Rect { x = math.max(0, x), y = math.max(0, y), w = 1, h = 1 }, ui.Position.TOP):symbol(c) -+ end -+ - return utils.flat { -- -- Borders -- ui.Bar(chunks[1], ui.Position.RIGHT):symbol(THEME.manager.border_symbol):style(THEME.manager.border_style), -- ui.Bar(chunks[3], ui.Position.LEFT):symbol(THEME.manager.border_symbol):style(THEME.manager.border_style), -+ ui.Border(area, ui.Position.ALL), -+ ui.Bar(chunks[1], ui.Position.RIGHT), -+ ui.Bar(chunks[3], ui.Position.LEFT), -+ -+ ---those are the border chars, change them to your liking -+ bar("╰", chunks[1].left, chunks[1].bottom - 1), -+ bar("╭", chunks[1].left, chunks[1].top), -+ bar("╮", chunks[3].right - 1, chunks[1].top), -+ bar("╯", chunks[3].right - 1, chunks[1].bottom - 1), -+ -+ bar("┬", chunks[1].right - 1, chunks[1].y), -+ bar("┴", chunks[1].right - 1, chunks[1].bottom - 1), -+ bar("┬", chunks[2].right, chunks[2].y), -+ bar("┴", chunks[2].right, chunks[1].bottom - 1), - - -- Parent -- Folder:render(chunks[1]:padding(ui.Padding.x(1)), { kind = Folder.PARENT }), -+ Folder:render(chunks[1]:padding(ui.Padding.xy(1)), { kind = Folder.PARENT }), - -- Current -- Folder:render(chunks[2], { kind = Folder.CURRENT }), -+ Folder:render(chunks[2]:padding(ui.Padding.y(1)), { kind = Folder.CURRENT }), - -- Preview -- ui.Base(chunks[3]:padding(ui.Padding.x(1)), ui.Base.PREVIEW), -+ ui.Base(chunks[3]:padding(ui.Padding.xy(1)), ui.Base.PREVIEW), - } - end -``` +If you prefer sharp corners for the border, you can remove `:type(ui.Border.ROUNDED)`. Finally include it and adjust the manager layout offset: @@ -130,7 +67,6 @@ folder_offset = [ 2, 0, 2, 0 ] preview_offset = [ 2, 1, 2, 1 ] ``` - ## Show symlink in status bar diff --git a/static/img/full-border.png b/static/img/full-border.png index 96a6e110d..7a834ace0 100644 Binary files a/static/img/full-border.png and b/static/img/full-border.png differ diff --git a/static/img/full-custom-border.png b/static/img/full-custom-border.png deleted file mode 100644 index cf05435d8..000000000 Binary files a/static/img/full-custom-border.png and /dev/null differ