Message/Loading Popup/Modal

[Glavin001]

Currently there is no way to display a message to the user, such as errors or warnings or deprecation notices (see #40). Let's put a little overlay on the top for displaying such information.

[Glavin001]

• Loading AKA "Beautification in progress..."
• Errors
• Unsupported language

[jamhall]

I was quickly looking into this.

Two options that I've found (many possibilities) and tested:

https://github.com/CodeSeven/toastr

Include toastr.js in the lib directory and toastr.css in the stylesheets directory. Add jquery as an npm dependency:

toastr = require "./toastr"
toastr.error "There was an error beautifying <b>/tmp/test/fixtures.sql</b>. The command <b>sqlformat</b> was not found.", "Atom beautifer"

Result:

Another more atom-integrated solution is to use: https://github.com/tcarlsen/atom-message-panel

    messages.add new PlainMessageView(
      message: "There was an error beautifying <b>/tmp/test/fixtures.sql</b>. The command <b>sqlformat</b> was not found."
      className: "text-error"
      raw: true
    )

Result:

Personally, I prefer the second solution; especially for error messages. I also don't think it's a nice idea to include jquery as a dependency (unnecessary bloat)

Anyway, some food for thought :-)

[Glavin001]

Thanks for doing some research, @Flukey.

I have not seen the Toastr before. Looks nice! How did you include a Bower dependencies? Normally Atom restricts access to client-side libraries.

I have used Atom Message Panel before and I'd prefer to have something a little nicer and more customizable for this.

Using SpacePen you can easily build nice panels, such as and append them to the top of the workspaceView, and for easier developing Atom Preview now supports SpacePen previewing.

Personally, I prefer the second solution; especially for error messages. I also don't think it's a nice idea to include jquery as a dependency (unnecessary bloat)

jQuery is at the core of Atom's SpacePen, so you should not have to include it. You should be able to use {$} = require 'atom'.

I will be throw some screenshots here when they're ready to get some feedback :).

[Glavin001]

I think you have a good idea with those because you could list off multiple errors and other messages, versus only one at a time. I'll keep that in mind when designing the Atom Beautify interface.

• Support listing multiple messages
• Clear messages on close view
• if the messages list is empty, view should be closed
• addMessage and clearMessages API

[Glavin001]

How about something like these?

[Glavin001]

• Change close button to clear, which will execute clearMessages and consequently close the view

[Glavin001]

I think I will go with Atom Message Panel for now, until we've fleshed out what features we want in the Message View. It can always be updated later, the important thing is having a view to better display these errors and other messages.

Current screenshot of work-in-progress:

[Glavin001]

For Beautification in progress message:

[Glavin001]

Published Beautification in progress message and Unsupported language messages (using Atom Message Panel) to v0.7.0

[Glavin001]

This can be deprecated in favour of Atom Notifications!

Update: Since I still want to see beautification progress (start and completion), the currently implemented UI for showing that a beautification is in progress can stay. Errors and other notifications can use Atom Notifications. This is already being done for deprecate method in Beautifier class (See #282).

Given that the beautification progress UI is already implemented and the Atom Notifications can be used for everything else, this issue can be closed.

[Glavin001]

Should go migrate off of Atom Message Panel to Atom Notifications.

[Glavin001]

Removed old Atom Message Panel related code with 1dfac5b