Skip to content

Commit

Permalink
fix(completion/#2264): Overflow in the UI (#2329)
Browse files Browse the repository at this point in the history
Various UI fixes for the completion UI, including:
- Better handling of large font sizes
- Better handling of custom line heights (the height for suggestions was hardcoded previously; now it's in sync with the line height)
- The preview of the `detail` property from suggestion is inline with the completion item

This improves the look-and-feel of the completion UI, but there's still a few things I'd like to look at as next steps:
- Introducing a subtle enter/exit animation so it is not as 'jarring' when it pops open - help smooths out cases where it closes for a frame and comes back (ie, an incomplete completion provider)
- Add UX for the `documentation` property - this could show snippet or emmet expansions, or detailed documentation for properties. Need to experiment with the right experience here.

Fixes #2264
  • Loading branch information
bryphe authored Apr 15, 2021
1 parent b1b3d1f commit ec655e9
Show file tree
Hide file tree
Showing 4 changed files with 181 additions and 59 deletions.
1 change: 1 addition & 0 deletions CHANGES_CURRENT.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
- #3404 - UX - Explorer: Fix text overflow in explorer (fixes #3362)
- #3414 - Code Actions: Fix regression in control-p binding
- #3416 - Editor: Fix word-wrap calculation with tab characters (fixes #3372)
- #2329 - UX - Completion: Fix overflowing detail text (fixes #2264)

### Performance

Expand Down
5 changes: 4 additions & 1 deletion src/Feature/Editor/OverlaysView.re
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ let completionsView =
~buffer,
~cursor,
~languageSupport,
~lineHeight,
~cursorPixelX,
~cursorPixelY,
~theme,
Expand All @@ -40,7 +41,7 @@ let completionsView =
cursor
x=cursorPixelX
y=cursorPixelY
lineHeight={editorFont.measuredHeight}
lineHeight
theme
tokenTheme
editorFont
Expand Down Expand Up @@ -101,12 +102,14 @@ let make =

let cursorPixelY = pixelY |> int_of_float;
let cursorPixelX = pixelX +. gutterWidth |> int_of_float;
let lineHeight = Editor.lineHeightInPixels(editor);

isActiveSplit
? <View style=Styles.bufferViewOverlay>
<completionsView
cursor=cursorPosition
buffer
lineHeight
languageSupport
cursorPixelX
cursorPixelY
Expand Down
Loading

0 comments on commit ec655e9

Please sign in to comment.