Skip to content

feat(quickinput): support codicons in prompt#102898

Closed
devanshj wants to merge 1 commit intomicrosoft:masterfrom
devanshj:quick-input-codicon
Closed

feat(quickinput): support codicons in prompt#102898
devanshj wants to merge 1 commit intomicrosoft:masterfrom
devanshj:quick-input-codicon

Conversation

@devanshj
Copy link
Contributor

@devanshj devanshj commented Jul 19, 2020

Closes #96430

Just to be clear the issue title starts with InputBox which might mean the generic InputBox although that's not directly used in showInputBox, quickinput's InputBox (ui.inputBox) along with a message dom node (ui.message) exclusive to quickinput is used instead. So this PR adds support of codicons for quick input's prompt and not for generic InputBox.

I think it's worth mentioning that quickinput should (afaict) use generic InputBox's message for prompt which would also solve #82112, because the generic already supports rich text message. I might look into fixing this as well.

How to test:

  1. Make a temporary extension and execute
vscode.window.showInputBox({
	// using bigger prompt to check alignment when text gets wrapped into lines as well
	prompt: "$(add) Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni odio $(wrench) quisquam illo ea nobis provident laborum nam nostrum voluptatibus ullam ratione, eligendi rerum."
});
  1. Check if you see the codicons.
  2. Check if they're properly aligned.


.quick-input-message > .codicon {
margin: 0 0.2em;
vertical-align: text-bottom;
Copy link
Contributor Author

@devanshj devanshj Jul 19, 2020

Choose a reason for hiding this comment

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

Why text-bottom:

vertical-align: text-bottom
image

vertical-align: middle (doesn't align nicely with running text)
image

display: flex; align-items: center on parent (works only for singleline)
image

}

.quick-input-message > .codicon {
margin: 0 0.2em;
Copy link
Contributor Author

@devanshj devanshj Jul 19, 2020

Choose a reason for hiding this comment

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

Taken from here

@devanshj devanshj force-pushed the quick-input-codicon branch from 9fc89e6 to 2827c98 Compare July 19, 2020 20:16
@chrmarti chrmarti modified the milestones: July 2020, August 2020 Jul 30, 2020
@chrmarti chrmarti modified the milestones: August 2020, September 2020 Sep 3, 2020
@chrmarti chrmarti modified the milestones: September 2020, October 2020 Oct 1, 2020
@chrmarti chrmarti modified the milestones: October 2020, November 2020 Oct 30, 2020
@chrmarti
Copy link
Collaborator

Merged manually, thanks @devanshj!

@chrmarti chrmarti closed this Nov 18, 2020
@devanshj
Copy link
Contributor Author

No problems!

@github-actions github-actions bot locked and limited conversation to collaborators Jan 2, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

InputBox: prompt should support codicons

2 participants