diff options
author | Canop <cano.petrole@gmail.com> | 2021-04-24 14:59:23 +0200 |
---|---|---|
committer | Canop <cano.petrole@gmail.com> | 2021-04-24 14:59:23 +0200 |
commit | 2ee78efc7734c4488eac61a3934178680c544380 (patch) | |
tree | d594fd8925f17cd7609b45e09918c98853a9e47a /website/docs | |
parent | e09bb4b283e4dd808133167d107fad50a70cceb9 (diff) |
fix/improve skins in website
add the hjson parts. Add the missing styles for
preview and stage
Diffstat (limited to 'website/docs')
-rw-r--r-- | website/docs/img/20210424-gruvbox-sdp.png | bin | 0 -> 123725 bytes | |||
-rw-r--r-- | website/docs/img/20210424-mycnf.png | bin | 0 -> 51959 bytes | |||
-rw-r--r-- | website/docs/index.md | 4 | ||||
-rw-r--r-- | website/docs/skins.md | 235 | ||||
-rw-r--r-- | website/docs/vim_mode.md | 16 |
5 files changed, 218 insertions, 37 deletions
diff --git a/website/docs/img/20210424-gruvbox-sdp.png b/website/docs/img/20210424-gruvbox-sdp.png Binary files differnew file mode 100644 index 0000000..e34e021 --- /dev/null +++ b/website/docs/img/20210424-gruvbox-sdp.png diff --git a/website/docs/img/20210424-mycnf.png b/website/docs/img/20210424-mycnf.png Binary files differnew file mode 100644 index 0000000..b981f66 --- /dev/null +++ b/website/docs/img/20210424-mycnf.png diff --git a/website/docs/index.md b/website/docs/index.md index 1cc833b..3337b0f 100644 --- a/website/docs/index.md +++ b/website/docs/index.md @@ -42,7 +42,7 @@ Most useful keys for this: # Never lose track of file hierarchy while you search -![search](img/20210204-mycnf.png) +![search](img/20210424-mycnf.png) broot tries to select the most relevant file. You can still go from one match to another one using <kbd>tab</kbd> or arrow keys. @@ -105,7 +105,7 @@ If your terminal is [kitty](https://sw.kovidgoyal.net/kitty/index.html), then th ![kitty preview](img/20201127-kitty-preview.png) -# Apply a standard or personal shortcut to a file +# Apply a standard or personal command to a file ![size](img/20191112-edit.png) diff --git a/website/docs/skins.md b/website/docs/skins.md index 8cd7539..846b313 100644 --- a/website/docs/skins.md +++ b/website/docs/skins.md @@ -30,6 +30,73 @@ From there, keeping or not the default colors, you may define a whole skin. For example: +```Hjson +skin: { + default: gray(23) none / gray(20) none + tree: ansi(94) None / gray(3) None + file: gray(20) None / gray(15) None + directory: ansi(208) None Bold / ansi(172) None bold + exe: Cyan None + link: Magenta None + pruning: gray(12) None Italic + perm__: gray(5) None + perm_r: ansi(94) None + perm_w: ansi(132) None + perm_x: ansi(65) None + owner: ansi(138) None + group: ansi(131) None + count: ansi(136) gray(3) + dates: ansi(66) None + sparse: ansi(214) None + content_extract: ansi(29) None + content_match: ansi(34) None + git_branch: ansi(229) None + git_insertions: ansi(28) None + git_deletions: ansi(160) None + git_status_current: gray(5) None + git_status_modified: ansi(28) None + git_status_new: ansi(94) None Bold + git_status_ignored: gray(17) None + git_status_conflicted: ansi(88) None + git_status_other: ansi(88) None + selected_line: None gray(5) / None gray(4) + char_match: Yellow None + file_error: Red None + flag_label: gray(15) None + flag_value: ansi(208) None Bold + input: White None / gray(15) gray(2) + status_error: gray(22) ansi(124) + status_job: ansi(220) gray(5) + status_normal: gray(20) gray(3) / gray(2) gray(2) + status_italic: ansi(208) gray(3) / gray(2) gray(2) + status_bold: ansi(208) gray(3) Bold / gray(2) gray(2) + status_code: ansi(229) gray(3) / gray(2) gray(2) + status_ellipsis: gray(19) gray(1) / gray(2) gray(2) + purpose_normal: gray(20) gray(2) + purpose_italic: ansi(178) gray(2) + purpose_bold: ansi(178) gray(2) Bold + purpose_ellipsis: gray(20) gray(2) + scrollbar_track: gray(7) None / gray(4) None + scrollbar_thumb: gray(22) None / gray(14) None + help_paragraph: gray(20) None + help_bold: ansi(208) None Bold + help_italic: ansi(166) None + help_code: gray(21) gray(3) + help_headers: ansi(208) None + help_table_border: ansi(239) None + preview_title: gray(23) None / gray(21) None + preview: gray(20) gray(1) / gray(18) gray(2) + preview_line_number: gray(12) gray(3) + preview_match: None ansi(29) + hex_null: gray(11) None + hex_ascii_graphic: gray(18) None + hex_ascii_whitespace: ansi(143) None + hex_ascii_other: ansi(215) None + hex_non_ascii: ansi(167) None + staging_area_title: gray(22) None / gray(20) None + mode_command_mark: gray(5) ansi(204) Bold +} +``` ```toml [skin] default = "gray(23) none / gray(20) none" @@ -84,14 +151,17 @@ help_italic = "ansi(166) None" help_code = "gray(21) gray(3)" help_headers = "ansi(208) None" help_table_border = "ansi(239) None" +preview_title = "gray(23) None / gray(21) None" preview = "gray(20) gray(1) / gray(18) gray(2)" preview_line_number = "gray(12) gray(3)" -preview_match = "None ansi(29) Underlined" -hex_null = "gray(10) None" +preview_match = "None ansi(29)" +hex_null = "gray(11) None" hex_ascii_graphic = "gray(18) None" hex_ascii_whitespace = "ansi(143) None" hex_ascii_other = "ansi(215) None" hex_non_ascii = "ansi(167) None" +staging_area_title = "gray(22) None / gray(20) None" +mode_command_mark = "gray(5) ansi(204) Bold" ``` This would look like this: @@ -156,6 +226,70 @@ This skin has a transparent main background and dark foreground colors. It is suitable if your terminal has a clear background. +```Hjson +skin: { + default: gray(1) None + tree: gray(7) None / gray(18) None + file: gray(3) None / gray(8) None + directory: ansi(25) None Bold / ansi(25) None + exe: ansi(130) None + link: Magenta None + pruning: gray(12) None Italic + perm__: gray(5) None + perm_r: ansi(94) None + perm_w: ansi(132) None + perm_x: ansi(65) None + owner: ansi(138) None + group: ansi(131) None + dates: ansi(66) None + sparse: ansi(214) None + git_branch: ansi(229) None + git_insertions: ansi(28) None + git_deletions: ansi(160) None + git_status_current: gray(5) None + git_status_modified: ansi(28) None + git_status_new: ansi(94) None Bold + git_status_ignored: gray(17) None + git_status_conflicted: ansi(88) None + git_status_other: ansi(88) None + selected_line: None gray(19) / None gray(21) + char_match: ansi(22) None + file_error: Red None + flag_label: gray(9) None + flag_value: ansi(166) None Bold + input: gray(1) None / gray(4) gray(20) + status_error: gray(22) ansi(124) + status_normal: gray(2) gray(20) + status_job: ansi(220) gray(5) + status_italic: ansi(166) gray(20) + status_bold: ansi(166) gray(20) + status_code: ansi(17) gray(20) + status_ellipsis: gray(19) gray(15) + purpose_normal: gray(20) gray(2) + purpose_italic: ansi(178) gray(2) + purpose_bold: ansi(178) gray(2) Bold + purpose_ellipsis: gray(20) gray(2) + scrollbar_track: gray(20) none + scrollbar_thumb: ansi(238) none + help_paragraph: gray(2) none + help_bold: ansi(202) none bold + help_italic: ansi(202) none italic + help_code: gray(5) gray(22) + help_headers: ansi(202) none + help_table_border: ansi(239) None + preview_title: gray(3) None / gray(5) None + preview: gray(5) gray(23) / gray(7) gray(23) + preview_line_number: gray(6) gray(20) + preview_match: None ansi(29) Underlined + hex_null: gray(15) None + hex_ascii_graphic: gray(2) None + hex_ascii_whitespace: ansi(143) None + hex_ascii_other: ansi(215) None + hex_non_ascii: ansi(167) None + staging_area_title: gray(8) None / gray(13) None + mode_command_mark: gray(15) ansi(204) Bold +} +``` ```toml [skin] default = "gray(1) None" @@ -207,6 +341,7 @@ help_italic = "ansi(202) none italic" help_code = "gray(5) gray(22)" help_headers = "ansi(202) none" help_table_border = "ansi(239) None" +preview_title = "gray(3) None / gray(5) None" preview = "gray(5) gray(23) / gray(7) gray(23)" preview_line_number = "gray(6) gray(20)" preview_match = "None ansi(29) Underlined" @@ -215,21 +350,31 @@ hex_ascii_graphic = "gray(2) None" hex_ascii_whitespace = "ansi(143) None" hex_ascii_other = "ansi(215) None" hex_non_ascii = "ansi(167) None" +staging_area_title = "gray(8) None / gray(13) None" +mode_command_mark = "gray(15) ansi(204) Bold" ``` ![light skin](img/20200526-light-skin.png) -When using this skin in a light terminal, it's recommended to also use a light syntax theme in previews, which can be done by uncommenting this line at the top of the config file: +When using this skin in a light terminal, it's recommended to also use a light syntax theme in previews, for example: +```Hjson +syntax_theme: base16-ocean.light ``` +```TOML +# be careful that in TOML this can't be put after the skin, +# it should be near the start of the file syntax_theme = "base16-ocean.light" ``` - # Solarized Dark *contributed by [@danieltrautmann](https://github.com/danieltrautmann)* +![default](img/skins/solarized_dark/default.png) + +![default](img/skins/solarized_dark/panels.png) + The Solarized Dark skin uses RGB values, so it might not work well with some terminals. It was tested with iTerm2 3.3 on macOS Catalina with the reported terminal type `xterm-256color`. This can be set via: @@ -241,6 +386,56 @@ Dark color scheme. The values are taken from [here](https://github.com/altercation/solarized#the-values). The term `default` in the comment refers to the skins default setting. +```Hjson +skin: { + default: "rgb(131, 148, 150) rgb(0, 43, 54) / rgb(131, 148, 150) rgb(7, 54, 66)" // base0 base03 / base01 base02 + tree: "rgb(88, 110, 117) none" // base01 default + file: "none none" // default default + directory: "rgb(38, 139, 210) none bold" // blue default bold + exe: "rgb(211, 1, 2) none" // red default + link: "rgb(211, 54, 130) none" // magenta default + pruning: "rgb(88, 110, 117) none italic" // base01 default italic + perm__: "rgb(88, 110, 117) none" // base01 default + perm_r: "none none" // default default + perm_w: "none none" // default default + perm_x: "none none" // default default + owner: "rgb(88, 110, 117) none" // base01 default + group: "rgb(88, 110, 117) none" // base01 default + sparse: "none none" // default default + git_branch: "rgb(147, 161, 161) none" // base1 default + git_insertions: "rgb(133, 153, 0) none" // green default + git_deletions: "rgb(211, 1, 2) none" // red default + git_status_current: "none none" // default default + git_status_modified: "rgb(181, 137, 0) none" // yellow default + git_status_new: "rgb(133, 153, 0) none" // green default + git_status_ignored: "rgb(88, 110, 117) none" // base01 default + git_status_conflicted: "rgb(211, 1, 2) none" // red default + git_status_other: "rgb(211, 1, 2) none" // red default + selected_line: "none rgb(7, 54, 66)" // default base02 + char_match: "rgb(133, 153, 0) none underlined" // green default underlined + file_error: "rgb(203, 75, 22) none italic" // orange default italic + flag_label: "none none" // default default + flag_value: "rgb(181, 137, 0) none bold" // yellow default bold + input: "none none" // default default + status_error: "rgb(203, 75, 22) rgb(7, 54, 66)" // orange base02 + status_job: "rgb(108, 113, 196) rgb(7, 54, 66) bold" // violet base02 bold + status_normal: "none rgb(7, 54, 66)" // default base02 + status_italic: "rgb(181, 137, 0) rgb(7, 54, 66)" // yellow base02 + status_bold: "rgb(147, 161, 161) rgb(7, 54, 66) bold" // base1 base02 bold + status_code: "rgb(108, 113, 196) rgb(7, 54, 66)" // violet base02 + status_ellipsis: "none rgb(7, 54, 66)" // default base02 + scrollbar_track: "rgb(7, 54, 66) none" // base02 default + scrollbar_thumb: "none none" // default default + help_paragraph: "none none" // default default + help_bold: "rgb(147, 161, 161) none bold" // base1 default bold + help_italic: "rgb(147, 161, 161) none italic" // base1 default italic + help_code: "rgb(147, 161, 161) rgb(7, 54, 66)" // base1 base02 + help_headers: "rgb(181, 137, 0) none" // yellow default + help_table_border: "none none" // default default + preview_title: "gray(20) rgb(0, 43, 54)" + staging_area_title: "gray(22) rgb(0, 43, 54)" +} +``` ```toml [skin] default = "rgb(131, 148, 150) rgb(0, 43, 54) / rgb(131, 148, 150) rgb(7, 54, 66)" # base0 base03 / base01 base02 @@ -287,35 +482,18 @@ help_italic = "rgb(147, 161, 161) none italic" help_code = "rgb(147, 161, 161) rgb(7, 54, 66)" # base1 base02 help_headers = "rgb(181, 137, 0) none" # yellow default help_table_border = "none none" # default default +preview_title = "gray(20) rgb(0, 43, 54)" +staging_area_title = "gray(22) rgb(0, 43, 54)" ``` -**Default View** - -![default](img/skins/solarized_dark/default.png) - -**Search** - -![default](img/skins/solarized_dark/search.png) - -**Permissions** - -![default](img/skins/solarized_dark/perms.png) - -**Sizes** - -![default](img/skins/solarized_dark/sizes.png) - -**Panels** - -![default](img/skins/solarized_dark/panels.png) # Gruvbox -*contributed by @basbebe and discussed [on this GitHub issue](https://github.com/Canop/broot/issues/335)* +*Initially contributed by @basbebe* -![gruvbox-search](img/20210204-mycnf.png) +![gruvbox-search](img/20210424-mycnf.png) -![Gruvbox-sdp](img/20210204-gruvbox-sdp.png) +![Gruvbox-sdp](img/20210424-gruvbox-sdp.png) The Gruvbox skin uses RGB values, so it might not work well with some terminals. @@ -325,7 +503,7 @@ skin: { default: rgb(235, 219, 178) rgb(40, 40, 40) / rgb(189, 174, 147) rgb(40, 40, 40) tree: rgb(168, 153, 132) None / rgb(102, 92, 84) None file: None None / None None Italic - directory: rgb(69, 133, 136) None Bold / rgb(131, 165, 152) None + directory: rgb(131, 165, 152) None Bold / rgb(131, 165, 152) None exe: rgb(184, 187, 38) None link: rgb(104, 157, 106) None pruning: rgb(124, 111, 100) None Italic @@ -374,6 +552,7 @@ skin: { help_code: rgb(142, 192, 124) rgb(50, 48, 47) help_headers: rgb(254, 128, 25) None Bold help_table_border: rgb(80, 73, 69) None + preview_title: rgb(235, 219, 178) rgb(40, 40, 40) / rgb(189, 174, 147) rgb(40, 40, 40) preview: rgb(235, 219, 178) rgb(40, 40, 40) / rgb(235, 219, 178) rgb(40, 40, 40) preview_line_number: rgb(124, 111, 100) None / rgb(124, 111, 100) rgb(40, 40, 40) preview_match: None rgb(80, 73, 69) Bold @@ -382,6 +561,8 @@ skin: { hex_ascii_whitespace: rgb(152, 151, 26) None hex_ascii_other: rgb(254, 128, 25) None hex_non_ascii: rgb(214, 93, 14) None + staging_area_title: rgb(235, 219, 178) rgb(40, 40, 40) / rgb(189, 174, 147) rgb(40, 40, 40) + mode_command_mark: gray(5) ansi(204) Bold } ``` diff --git a/website/docs/vim_mode.md b/website/docs/vim_mode.md index 140d8cf..7736193 100644 --- a/website/docs/vim_mode.md +++ b/website/docs/vim_mode.md @@ -1,10 +1,14 @@ +# Why -# Warnings +The "modal mode", which may be familiar to vim users, changes a little the way you interact with broot: -1. DON'T activate this mode until you really tried broot. Broot isn't a text editor and can't be confused with one. This mode may be more comfortable when you constantly jump from vim to broot but only after you understood how broot works. -1. This isn't really about a "vim mode". This is about a "modal mode" in which single letter key shortcuts are possible because the input at the bottom isn't always focused. You may devise single letter shortcuts without taking inspiration in vim -1. You may be an avid vim user, as I am, and still prefer not to use modality in broot. Starting in *command* mode means you have one more letter to type before searching, because search is done in *input* mode. And broot is search oriented and often used in very short sessions (less than 5 seconds from intent to launch to being back in the shell in the right directory or editing the right file in your favorite editor) +- The input at the bottom isn't immediately focused, you must type a space, a `:`, or a `/` to focus it. And you unfocus it with the escape key. +- The upside is you can use keyboard shortcuts without <kbd>ctrl</kbd>, for example you may move the selection with <kbd>j</kbd> and <kbd>k</kbd>. +- The downside is you have one letter more to type to start searching, which isn't to dismiss as searching is usually the first thing you do in broot. + +I recommand you **don't** activate this mode until you really tried broot. Broot isn't a text editor and can't be confused with one. This mode may be more comfortable when you constantly jump from vim to broot but only after you understood how broot works. +You may be an avid vim user, as I am, and still prefer not to use modality in broot. Starting in *command* mode means you have one more letter to type before searching, because search is done in *input* mode. And broot is search oriented and often used in very short sessions (less than 5 seconds from intent to launch to being back in the shell in the right directory or editing the right file in your favorite editor) # Configuration @@ -34,7 +38,3 @@ In *command* mode, you'll find those keys already configured: You enter *input* mode by typing one of those letters: ` ` (space), `:`, or `/`. You leave it with the `escape` key. You may add other bindings to the `:mode_input` and `:mode_command` verbs. - -# Experimentation - -This "modal mode" is still experimental. If you tried it, or use it, I'd like your feedback on [Miaou](https://miaou.dystroy.org/3490). |