Use ACE for badge queries

When editing the query for a badge (if it’s enabled), it’d be great if the editor used was ACE, rather than a plain old textarea. At present I tend to write my queries in a different app and copy-paste them across so that I can make sure they’re nicely formatted and readable, but that’s a little arduous. :slight_smile:

2 Likes

I took a quick look at this and it wasn’t a drop in replacement because the CSS for that component is designed to be much larger than the SQL badges. It’s totally doable, it’ll just take more than the 5 minutes I was hoping. Maybe someone can contribute a pr?

6 Likes

I decided to give this pr-welcome a shot this weekend and so far I’ve managed to replace the textarea with ACE (screenshot with minimal/required CSS changes to display ACE):

To me it feels like it’s not quite there yet design-wise. Perhaps it should be a bit shorter with 1px bright border around it? like so:

What do you guys think?

9 Likes

Ok here is my PR:

https://github.com/discourse/discourse/pull/5269

And this is what I settled on:

  • rounded corners
  • lighter shade of grey for the left gutter
  • and 270px height (above screenshot was 250)

Screenshot:

Thoughts? :grin:

5 Likes

Seems ok this area is up to @sam.

2 Likes

The PR was merged on Oct 30 :raised_hands:t2:

4 Likes