tcarlsen / atom-message-panel

An easy way to display your messages in Atom

The Atom Message Panel

The easy way to display your messages in Atom.

Why!?

To streamline how plugin messages are displayed in Atom! ✊

Checkout this list of packages already using Atom Message Panel.

Usage

JavaScript:

var MessagePanelView = require('atom-message-panel').MessagePanelView,
    PlainMessageView = require('atom-message-panel').PlainMessageView;

var messages = new MessagePanelView({
  title: 'It\'s alive..... IT\'S ALIIIIIVE!!!!'
});

messages.attach();

messages.add(new PlainMessageView({
  message: 'I did it mommy, I made my first Atom Message Panel!',
  className: 'text-success'
}));

CoffeeScript:

{MessagePanelView, LineMessageView} = require 'atom-message-panel'

messages = new MessagePanelView
    title: 'Remember your Coffee!'

messages.attach()

messages.add new LineMessageView
    line: 1
    character: 4
    message: 'You haven\'t had a single drop of coffee since this character'

API

MessagePanelView:

It all depends on this guy, this is your init function and you will need it 😎

• new MessagePanelView(params):

• title: the title of your panel
• rawTitle: sat to true will allow the title to contains HTML (default is false)
• closeMethod: What should the close button do? hide (default) or destroy.
• speed: how fast you what the fold/unfold function to run (default is fast)
• recentMessagesAtTop: should new messages be added at the top? (default is false)
• position: should the panel attach to the "top", "bottom", "left" or "right" (default is bottom)
• maxHeight: set a max-height of the panel body (default is 170px)

• attach(): append the panel to the Atom view
• close(): closes the panel
• setTitle(title:string,raw?:boolean): change the panel title
• toggle(): fold/unfold the panel
• unfold(): unfold the panel
• clear(): clear the body
• add(): add a view to the panel
• remove(index): remove a view from the panel
• state(): get current state informations about your panel

PlainMessageView:

Lets you add a simple message 💬

• PlainMessageView(params):

• message: your message to the people
• raw: sat to true will allow the mesage to contains HTML (default is false)
• className: adding css classes to your message (this is optional)

LineMessageView:

Lets you add messages for a specific line and character, and it will even navigate the user to that position with a single click 💥

• LineMessageView(params):

• message: your message to the people
• line: what line are we talking about?
• file: so, was that in some other file? (this is optional)
• character: lets be more specific of what we are talking about (this is optional)
• preview: lets you display a code snippet inside a pre tag (this is optional)
• className: adding css classes to your message (this is optional)

License

MIT © tcarlsen

atom-message-panel's Issues

closing the panel is throwing an error

Uncaught TypeError: Cannot read property 'data' of undefined/Users/tcarlsen/github/jslint/node_modules/atom-message-panel/lib/MessagePanelView.js:207
MessagePanelView.resizeStopped/Users/tcarlsen/github/jslint/node_modules/atom-message-panel/lib/MessagePanelView.js:108 
MessagePanelView.close/Users/tcarlsen/github/jslint/node_modules/atom-message-panel/node_modules/space-pen/lib/space-pen.…:214
(anonymous function)/Users/tcarlsen/github/jslint/node_modules/atom-message-panel/node_modules/space-pen/vendor/jquery.…:4676
jQuery.event.dispatch/Users/tcarlsen/github/jslint/node_modules/atom-message-panel/node_modules/space-pen/vendor/jquery.…:4360 
jQuery.event.add.elemData.handle

Message gets emptied after getSummary

MessagePanelView.prototype.add = function (view) {
  console.log(view.html()) // <-- it has a valid html here
  if (this.messages.length === 0 && view.getSummary) {
    this.setSummary(view.getSummary());
  }
  console.log(view.html()) // <-- it's now empty >_<
  if (this.recentMessagesAtTop) {
    this.body.prepend(view);
  } else {
    this.body.append(view);
  }
  this.messages.push(view);
};

Note: I worked around this issue by creating a dummy first message and then appending real messages.

Navigate to line on a unsaved file does not work

see tcarlsen/atom-jsonlint#8 for example

How do I find if the MessagePanelView is shown

I can toggle it, but I need to know its current state before I toggle.

Side panel

Using this package in; https://github.com/tokejepsen/atom-foundry-nuke. Thanks for the great contribution:)

I was wondering if a side panel option is possible? Similarly to how the markdown toggle works.

Enable text selection in the message panel

Currently, It's not possible to select text from the message panel. This would be very useful to select and copy messages from the panel.

write some test cases

we need to do this at some point

fixed height of message panel ?

Just like output panel in visual studio
Can message panel have an option to disable automatic height growth ? and leave an default-height in this new mode ?
Please let me resize it by dragging the message panel border up and down.
auto growth is very annoy for many people.

I have tried a lot to modify source code of atom-message-panel to achieve this, but I failed.
Fortunately, I find here

focus panel when it show, and then can press 'esc' to close panel

Fixed atom script error #90 This fixes the error on the first run. Cannot run again

This fixes the error on the first run. But Script fails to run afterwards.

add ability to make tabs?

an example of this can be seen in this package https://atom.io/packages/ide-haskell

Clicking on line/column in LineMessageView doesn't return focus to the editor.

Clicking on the line and column info on a LineMessageView entry takes me to the correct location in the document, but doesn't return focus to the editor, so I need to click with the mouse to get back.

Any reason focus shouldn't jump back to the editor?

summary is too long

Message panel won't open again after being closed

@tcarlsen any chance to see this fixed?

atom-community/atom-script#2006 (comment)

Thx!

would be great if the title toggled the panel

Would be awesome if I could click this :

Cause clicking this is a bit frustrating:

Or even just title would be great.

upgrade space-pen (dependency)

we are using ^4 but the latest version is 5.1.1

Tasks:

• Update package.json
• Test that all space-pen related is still working

Find in panel

Is it possible to search/find a specified text in panel ?

Resize works incorrectly if I have multiple bottom panels

Resize works incorrectly if I have multiple bottom panels. I see hardcoded value '30', so when I have multiple panels, it starts working wrong.

Switch To Panel API, Fix Deprecation Warning

Please use Workspace::addBottomPanel() instead
at WorkspaceView.prependToBottom (/Applications/Atom.app/Contents/Resources/app/src/workspace-view.js:139:7)
at [object Object].attach (/Users/jfitzgerald/github/go-plus/node_modules/atom-message-panel/lib/MessagePanelView.js:65:24)

Workspace::addBottomPanel() has been added to the Atom API to add a panel to the Workspace. We should switch atom-message-panel to use this API so that we can get rid of deprecation warnings and guard against prependToBottom going away.

Show wrong as PlainMessageView.raw

Replace last message

It would be awesome to replace the last message or maybe to add a parameter to the clear command to clear only the n number of messages.

I need this for download indication in my version of the composer package, which will hopefully replace the current one.

Right now i check if the message starts with downloading: and if so I just clear but that clears everything, when I really just need to replace the previous message if that also contains downloading:

setTitle() does not respect `rawTitle`

Start with panel with rawTitle set to true. Its all good. Now call setTitle(someHtml) and html will show as text.

add the ability for the user to resize the panel height

at the moment we only have a max-height, It would be nice if the user had the ability to resize the panel by dragging the top

Uncaught TypeError: Cannot read property 'path' of undefined

[Enter steps to reproduce below:]

1. show atom-message-panel with LineMessageView
2. click preview

I think there is not atom.project.rootDirectory now.

Atom Version: 0.180.0
System: Mac OS X 10.10.2
Thrown From: redpen package, v0.2.1

Stack Trace

Uncaught TypeError: Cannot read property 'path' of undefined

At /Users/foo/foo_dev/Atom/redpen-atom/node_modules/atom-message-panel/lib/LineMessageView.js:51

TypeError: Cannot read property 'path' of undefined
  at [object Object].LineMessageView.goToLine (/Users/foo/foo_dev/Atom/redpen-atom/node_modules/atom-message-panel/lib/LineMessageView.js:51:58)
  at HTMLPreElement.<anonymous> (/Users/foo/foo_dev/Atom/redpen-atom/node_modules/atom-message-panel/node_modules/space-pen/lib/space-pen.js:214:36)
  at HTMLPreElement.jQuery.event.dispatch (/Users/foo/foo_dev/Atom/redpen-atom/node_modules/atom-message-panel/node_modules/space-pen/vendor/jquery.js:4676:9)
  at HTMLPreElement.elemData.handle (/Users/foo/foo_dev/Atom/redpen-atom/node_modules/atom-message-panel/node_modules/space-pen/vendor/jquery.js:4360:46)

Commands

     -0:04.0 redpen:validate (atom-text-editor.editor)

Config

{
  "core": {
    "ignoredNames": [
      ".git",
      ".svn",
      ".DS_Store"
    ],
    "disabledPackages": [
      "term",
      "markdown-table-formatter",
      "markdown-pdf",
      "plantuml-preview",
      "autocomplete-plus"
    ],
    "themes": [
      "atom-dark-ui",
      "base16-tomorrow-dark-theme"
    ]
  },
  "redpen": {
    "pathForRedPen": "/usr/local/bin/redpen",
    "JAVA_HOME": "/Library/Java/JavaVirtualMachines/jdk1.8.0_25.jdk/Contents/Home"
  }
}

Installed Packages

# User
Sublime-Style-Column-Selection, v1.2.3
asciidoc-preview, v0.4.2
asciidoctor-preview, v0.1.0
atom-color-highlight, v3.0.8
bracket-matcher, v0.71.0
file-icons, v1.4.11
git-log, v0.2.0
go-plus, v3.2.2
japanese-wrap, v0.2.3
jsonlint, v1.0.1
language-asciidoc, v0.11.1
language-lua, v0.9.0
linter-coffeelint, v0.1.7
linter-lua, v0.1.3
linter-shellcheck, v0.0.6
pretty-json, v0.3.2
recent-files, v0.3.0
redpen, v0.2.1
regex-railroad-diagram, v0.6.3
save-session, vundefined
svg-preview, v0.5.1
tabs-to-spaces, v0.8.1

# Dev
No dev packages

Option to add message to top (instead of default at bottom)

For atom-gitter I wanted to add new messages at the top of the message panel.

I accomplished that with https://github.com/Glavin001/atom-gitter/blob/dee1a85456991e104f7fd743a186d2c234cffa57/lib/atom-gitter.js#L31-L43

function addMessage(msgView) {
      var recentMessagesAtTop = atom.config.get('gitter.recentMessagesAtTop');
      // Add Message
      messages.messages.push(msgView);
      if (recentMessagesAtTop) {
        // Add msgView to top
        messages.body.prepend(msgView);
      } else {
        messages.body.append(msgView);
      }
      // Force the summary to be recent
      messages.setSummary(msgView.getSummary());
    }

Auto-scroll to bottom

Hiya,

I'm using your message panel package in my upcoming atom package, which basically consists out of running a command line tool. However, the output of the BufferedProcess stdout is rather large and when I dump it in a plainmessageview it doesn't fit into the message pane entirely. By default the message pane shows the beginning of the message, but since this is output generated from a process, it is more intuitive and user-friendly that the last line of the output is shown, since that's where the process success status is printed. Would it be feasible you think to have a 'autoscroll' property or something, which will automatically scroll the message pane to the end of the message?

I hope you understand what I'm trying to achieve here, if not please let me know!

Issue links in message panel do not work with several project folders

See joefitzgerald/go-plus#224 fo an example

LineMessageView should support raw option

Like the other views the LineMessageView should support an option to support raw HTML to the message or preview element.

Calling `clear()` still shows contents in title when collapsed

I apologize if the title is confusing. Pictures probably explain this best. With the following code, when the body is cleared and the panel is toggled up I still see old messages that should have been cleared.

fs = require 'fs'
path = require 'path'
{MessagePanelView, LineMessageView, PlainMessageView} = require('atom-message-panel')

module.exports =
class MessageView

  constructor: ->
    @messagepanel = new MessagePanelView({title: 'TeXlicious: '}) unless @messagepanel?

  update: (errors) ->
    @messagepanel.clear()
    if errors == null
      @messagepanel.toggle()
      return

    for error in errors
      @messagepanel.add(new LineMessageView({file: error.file , line: error.line, character: 0, message: error.message}))

    @messagepanel.attach()

  destroy: =>
    @messagepanel?.remove()
    @messagepanel = null

Here is what the message panel looks like after clearing and toggling down:

Here is what the message panel looks like after clearing and toggling up:

should we support split pane?

should the message panel only show inside the pane its executed from in split pane mode

update the README

The readme have to match the new API and should be rename to README.md (uppercase)

We should add a USE EXAMPLES.md file

Lets make a USE EXAMPLES.md file with alot of examples of all the cool stuff amp can do and then link to this file in the README.md under the small quick examples

Taking input in panel

Is there a way to take in input from the panel? I.e so there is a cursor at the next line and anything typed will be sent back to a callback function?

add state getter

@joefitzgerald writes:

I think it'd also be nice to track the current state of the message panel:

• Attached / detached
• Hidden / visible
• Folded / unfolded (Collapsed / expanded)

Add link to "They use it!" wiki page in README

See https://github.com/tcarlsen/atom-message-panel/wiki/They-use-it!

I believe that the missing clipboard functionality of "script" plugin needs to be fixed here.

Please see this issue: atom-community/atom-script#642

Mac Users seem to have a problem with the clipboard copy/paste functionality. As I believe that the current Script version uses atom-message-panel I think that problem could originate from here.

Ideas?

Custom buttons?

It would be great to have the ability to create custom buttons on the titlebar. Maybe with an API like:

var MessagePanelView = require('atom-message-panel').MessagePanelView,
    PlainMessageView = require('atom-message-panel').PlainMessageView,
    ButtonView = require('atom-message-panel').ButtonView;

var messages = new MessagePanelView({
    title: 'It\'s alive..... IT\'S ALIIIIIVE!!!!',
    buttons: [
        new ButtonView({
            text: '✓',
            class: ['pause'], // could be string too
            action: 'close', // either function name or actual closure,
            context: someObject // would default to the message panel?
        )},
        ButtonView.TOGGLE // easy way to add default buttons as constants
    ]
});

If buttons were left blank, it could default to:

buttons: [  // maintain backwards compatability
    ButtonView.TOGGLE,
    ButtonView.CLOSE
]

If there's interest, I could make an attempt at implementing this myself. Just let me know!