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

docs(examples): Add color and modifiers examples #345

Merged
merged 1 commit into from
Aug 11, 2023

Conversation

joshka
Copy link
Member

@joshka joshka commented Jul 24, 2023

The intent of these examples is to show the available colors and
modifiers.

  • added impl Display for Color

colors
modifiers

@joshka joshka force-pushed the docs-examples branch 2 times, most recently from 8f62e5e to 01ed73c Compare July 24, 2023 22:10
examples/style.rs Outdated Show resolved Hide resolved
examples/style.rs Outdated Show resolved Hide resolved
examples/style.rs Outdated Show resolved Hide resolved
Copy link
Collaborator

@kdheepak kdheepak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the impl Display for Color part of this PR is great, and the example you've added is good for that. I think most of my comments are about improving the screenshot for making it easier for beginners to grok and I imagine we can lump those changes into a separate discussion / PR where we modify all the examples.

@joshka
Copy link
Member Author

joshka commented Jul 25, 2023

Ignore the push just now - I just saw the comments.

@joshka joshka marked this pull request as draft July 25, 2023 03:30
@joshka joshka force-pushed the docs-examples branch 2 times, most recently from 4e316de to fc01253 Compare August 5, 2023 13:25
@codecov
Copy link

codecov bot commented Aug 5, 2023

Codecov Report

Merging #345 (0e1128e) into main (37fa6ab) will increase coverage by 0.07%.
The diff coverage is 100.00%.

❗ Current head 0e1128e differs from pull request most recent head 90b196f. Consider uploading reports for the commit 90b196f to get more accurate results

@@            Coverage Diff             @@
##             main     #345      +/-   ##
==========================================
+ Coverage   85.02%   85.10%   +0.07%     
==========================================
  Files          40       40              
  Lines        8683     8727      +44     
==========================================
+ Hits         7383     7427      +44     
  Misses       1300     1300              
Files Changed Coverage Δ
src/style.rs 93.38% <100.00%> (+0.63%) ⬆️

@joshka
Copy link
Member Author

joshka commented Aug 5, 2023

I split the style example in two (colors and modifiers) and addressed the comments.
Switched to using layout rather than manually calculating the columns (note that this highlights bug #367)

colors.gif

I added a color to the example to make this useful to see non-grayscale interactions.

modifiers.gif

@joshka joshka changed the title docs(examples): Add style example docs(examples): Add color and modifiers examples Aug 5, 2023
@kdheepak
Copy link
Collaborator

kdheepak commented Aug 5, 2023

That visually looks awesome now!

Is the RGB section missing a section title?

@joshka
Copy link
Member Author

joshka commented Aug 5, 2023

Is the RGB section missing a section title?

Nope - it's all indexed colors 0-255. The gaps are there because there's sort of 3 groups of colors.

@joshka joshka marked this pull request as ready for review August 5, 2023 14:08
@joshka joshka enabled auto-merge August 5, 2023 14:09
@joshka joshka mentioned this pull request Aug 5, 2023
@joshka
Copy link
Member Author

joshka commented Aug 6, 2023

Bumped this with some light changes:

  • Added Color::Reset to the colors to be shown so that terminals that distinguish the default background from black will be more obvious
  • Render the titles centered with a top border to make it a little more obvious that they apply to the colors below
  • simplify some of the layout calls
  • Fixed the GIF height to remove the space at the end
  • Chose a theme (OceanicMaterial) that makes the background, foreground, black, white, dark gray, gray, and light vs normal colors distinct.
  • Updated the readme with the new GIFs

colors
modifiers

@joshka joshka requested a review from kdheepak August 7, 2023 08:50
@joshka
Copy link
Member Author

joshka commented Aug 7, 2023

Rebased on main to check that the codecov setup should ignore changes to examples.

@joshka
Copy link
Member Author

joshka commented Aug 9, 2023

Rebased on main and added tests for impl Display for Color and capitalized the color names.

@kdheepak
Copy link
Collaborator

I have a minor preference for using reset for the background.

The top part of the screenshot is the PR unchanged:

image

And the bottom is when I use Reset for the indexed part of the demo.

This is with this colorscheme: https://github.com/catppuccin/iterm

@joshka
Copy link
Member Author

joshka commented Aug 10, 2023

How does the VHS output look?

@kdheepak
Copy link
Collaborator

kdheepak commented Aug 10, 2023

The VHS output should remain unchanged compared to your screenshot, right? I can try it when I'm back at my personal computer.

I think the screenshot looks great if people are just viewing it online (probably like 95% of folk). There's probably a handful of people that might try to run it. I don't think we should optimize for that use case, but if it is low effort it would be nice to accommodate that as well.

The intent of these examples is to show the available colors and
modifiers.

- added impl Display for Color

![colors](https://vhs.charm.sh/vhs-2ZCqYbTbXAaASncUeWkt1z.gif)
![modifiers](https://vhs.charm.sh/vhs-2ovGBz5l3tfRGdZ7FCw0am.gif)
@joshka
Copy link
Member Author

joshka commented Aug 11, 2023

(My concern was around the background bleed issue in VHS - it should render the same, but that bug is annoying). Changing to Reset works fine, and I managed to fix up the background problem by using a full block character.

Made with VHS

Catppuccin Mocha version

Made with VHS

@kdheepak
Copy link
Collaborator

Neat!

@joshka joshka added this pull request to the merge queue Aug 11, 2023
Merged via the queue into ratatui:main with commit 6ad4bd4 Aug 11, 2023
@joshka joshka deleted the docs-examples branch August 11, 2023 01:44
@joshka
Copy link
Member Author

joshka commented Aug 11, 2023

Thanks for the review @kdheepak :)

@joshka joshka added this to the v0.23.0 milestone Aug 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants