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

Show Flutter icons in the editor gutter #807

Closed
suburbanworrier opened this issue Apr 16, 2018 · 14 comments · Fixed by #2040
Closed

Show Flutter icons in the editor gutter #807

suburbanworrier opened this issue Apr 16, 2018 · 14 comments · Fixed by #2040
Labels
in editor Relates to code editing or language features in flutter Relates to running Flutter apps is enhancement
Milestone

Comments

@suburbanworrier
Copy link

Hi,
Not an issue: a feature request.

I love the color and icon preview in intelliJ and Android Studio but prefer VS Code for almost everything else (Inspector etc notwithstanding).
Is this feature on the roadmap (or even possible in VS Code)?

@DanTup DanTup added this to the Backlog milestone Apr 17, 2018
@DanTup DanTup added is enhancement in editor Relates to code editing or language features labels Apr 17, 2018
@DanTup
Copy link
Member

DanTup commented Apr 17, 2018

I'm not sure if we have easy access to all the info we need for this (I guess we must have it in some form, since IntelliJ is doing it, but I haven't seen the implementation). For vNext we do show the icons in the tooltips which is a slight improvement (#638).

@DanTup DanTup added the good first issue :octocat: A relatively straight forward issue that could be done by a new contributor label Apr 19, 2018
@DanTup DanTup added blocked on dart / flutter Requires a change in Dart or Flutter to progress and removed good first issue :octocat: A relatively straight forward issue that could be done by a new contributor labels Aug 29, 2018
@wyattbiker
Copy link

Just adding my comment on this feature request improvement:

  • Colors.green preview works.
  • However Color.fromARGB(255, 66, 165, 245), does not.

child: Container(
color: Color.fromARGB(255, 66, 165, 245), // No Preview available
alignment: AlignmentDirectional(0.0, 0.0),
child: Container(
margin: new Constants()._edges,
padding: new EdgeInsets.all(40.0),
color: Colors.green, // Preview avail
child: Text("Flutter Cheatsheet"),
constraints: BoxConstraints.expand(),
),

@DanTup
Copy link
Member

DanTup commented Mar 25, 2019

I think what you're seeing is the images that are embedded in the docs (see https://docs.flutter.io/flutter/material/Colors-class.html). These work for the named colours because they can have images tags in the docs - it won't work for the fromARGB constructor as the docs for that can't take into account the params being passed.

@bwilkerson do you think it'd make sense to handle these in the server? Either as a colours/icons structure or maybe something in the (Flutter) Outline data? I don't know that the server currently has enough info to do this (esp. the icons), but it might be better-placed to have it than in the editor.

This is slightly related to flutter/flutter#11073 (for Icons, at least - colours, not so much).

@DanTup
Copy link
Member

DanTup commented Mar 25, 2019

(I forgot to mention, IntelliJ currently has scripts that are run to extract the info and ship it inside the plugin.. We could also do something similar here if we don't think it's a good fit for the server)

@bwilkerson
Copy link

It makes sense to me for server to send information to allow these icons to be displayed. It isn't clear what that information should be. One possibility is to define a JSON representation of an icon and just ship the whole icon over, but that seems a bit extreme. Another would be to send a "reference" (of a to-be-determined form) to allow the client to choose an icon from a known location.

@devoncarew probably has more visibility into some of the design constraints.

@DanTup
Copy link
Member

DanTup commented Mar 25, 2019

For icons in the tooltips, we regex out the material icon name and then construct our own image tag for it. Sending the material icon name would keep the server from being too specific about the image (eg. format, size, colour), however would also limit it to material-icons.

Colours are probably a bit simpler - I think we could just include a document range and a colour (eg. as hex or something fairly standard the editor could easily transform if required).

@wyattbiker
Copy link

Why does it have to be an icon? Just show the color at the top or bottom of the doc tooltip.

@DanTup
Copy link
Member

DanTup commented Mar 26, 2019

@wyattbiker this issue is about both colours and icons. IntelliJ shows both in the Gutter and this request was to support them both.

Perhaps surprisingly, it's not actually easy for us to display an arbitrary colour in the doc tooltip even if we knew what the colour was (which we don't currently, which is why I was asking about having the server supply it). The doc tooltips are a restricted set of Markdown. We can easily show images (which is how the named colours you see work), but we can't just put arbitrary CSS in - so in order to show a block of colour there, we'd need to generate/fetch an image of the colour we want to show.

@amorenew
Copy link

amorenew commented Aug 5, 2019

@maks
Copy link

maks commented Oct 4, 2019

Just FYI, there is already a VSCode plugin that works perfectly for me with for gutter image previews for image paths used in Flutter (dart) src.

On the colour preview side, unfortunately the pigments plugin doesn't suppor the typical format used in Flutter app source so I've opened an issue to request that.

@DanTup Not sure what the Flutter teams policy is about recommending third party plugins? But if it ok then I think this issue can be closed once the pigments plugin gets support added for Flutters format.

@DanTup DanTup modified the milestones: Backlog, v3.6.0 Oct 8, 2019
@DanTup DanTup added in flutter Relates to running Flutter apps and removed blocked on dart / flutter Requires a change in Dart or Flutter to progress labels Oct 8, 2019
@DanTup DanTup changed the title Gutter icons and color chips like intelliJ/AS Show Flutter icons in the editor gutter Oct 8, 2019
@DanTup
Copy link
Member

DanTup commented Oct 8, 2019

Splitting this into two issues, one for icons (this one) and another for colours (#2039) so they can be tracked separately.

@DanTup
Copy link
Member

DanTup commented Oct 8, 2019

@maks as far as I can tell, that extension is using urls from the editor to render icons. That part isn't what was holding this up - it was knowing where there are icons in the editor (without doing crude searches for Icon.xxx in the editor text).

I've managed to make this work on some situations by using outline data and looking for parameters where the value is Icon.foo (which is not perfect, but less dirty than just regexing the whole document).

Screenshot 2019-10-08 at 4 48 55 pm

@maks
Copy link

maks commented Oct 8, 2019

@DanTup oh my apologies! I completely missed that this was about the Material Icon constants. But wow, that would be fantastic to have support for them!

@DanTup
Copy link
Member

DanTup commented Oct 9, 2019

There's a preview build with this functionality here if you want to try it out:

https://github.com/Dart-Code/Dart-Code/releases/tag/v3.6.0-alpha.2

You'll need to enable dart.previewFlutterGutterIcons for them to show up (and Reload Window). More info on installing from vsix is here: https://dartcode.org/docs/installing-a-preview-release/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
in editor Relates to code editing or language features in flutter Relates to running Flutter apps is enhancement
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants