Use ACE for badge queries

AI-generated summary

The discussion revolves around using ACE for badge queries. barryvan suggested using ACE to replace the plain textarea for editing badge queries, citing the need for better formatting and readability. eviltrout noted that it wasn’t a straightforward replacement due to CSS design differences, but encouraged a pull request contribution. Osama took on the task and managed to replace the textarea with ACE, sharing screenshots of the progress. Osama later shared the PR link and a final screenshot, seeking feedback on the design. codinghorror assigned the area to @sam for review, and coderberry announced that the PR was merged on October 30.

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 лайка

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 лайков

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 лайков

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 лайков

Seems ok this area is up to @sam.

2 лайка

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

4 лайка