Add support for adding icons to the CommandList. #23
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 4 commits
February 3, 2023 02:46
This adds support for placing icons to the left of the commands.
5 cases are supported:
1. if icon is not defined, it inserts an empty svg that holds 24px of
space on the left of the label
2. if icon is null, the space is not held and the label smooshes to
the left
3. if icon is a character (in span class="icon"), the character is used.
If the string is longer than 24 px, it's cut off.
4. the icon can be an image, css sized to 24x24px.
5. the icon can be an svg, css sized to 24x24px fill set to currentColor.
in each case the icon is a string "<img ...>" "<svg ...>...</svg>" etc see:
benwinding#22
for details and examples
add the class cp-placeholder to the svg placeholder inserted when the icon property is not defined. This allows commands without icon properties to be flush left in the listbox. Just like using icon: null on every command, but without having to do all the extra typing. Added documentation for using icon. Also updated code to use the "if ( !!var)" idiom.
Changed the height: 36px of the command list item paragraph to be a min-height: 36px. If the command text gets too long, it is bleeding over into the other command list rows. I also set overflow-y: hidden in case somebody adds a max-height or height to it again. This will stop the bleed over. Also set flex-shrink:0 on the things that we expect in the icon area. Also explicity target '.item :first-child' to prevent flex shrinkage (a bit of defensive css):. Otherwise large command strings squish the icons in column 1.
… none If you use icon:none in the command array, the :first-child is the command name text span. Setting flex-shrink: 0 on it makes it misbhave and push the displayed hotkey away/not wrap command text etc.
Contributor
Author
|
Don't merge this. I am having a wierd issue where the output html is being shifted. e.g. rather than I see: I have no idea what happens here. Sometimes the html is messed up on initial display, sometimes after a search and sometime continuing to search corrects the layout. I'll reopen it if I can figure out what's happening here. |
Contributor
Author
|
Upgrading to [email protected] has fixed the issue for me. updates package.json. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This adds support for placing icons to the left of the commands.
5 cases are supported:
if icon is not defined, it inserts an empty svg that holds 24px of space on the left of the label
if icon is null, the space is not held and the label smooshes to the left
if icon is a character (in span class="icon"), the character is used. If the string is longer than 24 px, it's cut off.
the icon can be an image, css sized to 24x24px.
the icon can be an svg, css sized to 24x24px fill set to currentColor.
in each case the icon is a string "<img ...>" "<svg ...>..." etc see:
#22
for details and examples