Stylable items by @tag

[absolutejam]

Hi,

Brilliant work on this plugin, I use it all the time to coincide with the 'Editorial' app on iOS, and sync my .taskpaper files between my devices with Dropbox. It makes tracking tasks so simple.

However, I've been craving a feature I'm used to in the Editorial app, which is the ability to colour items depending upon their tags.

Basically, within the app there are 8 assignable colours available in the preferences (Red, Orange, Yellow, Green, Blue, Purple, Gray, None). You assign a list of tags to them (Eg. I assign @urgent to Red) and when you add this tag to a task, (Eg. - Call client A @urgent) the entire line is hilighted red.

Example usage:
http://puu.sh/gNtim/a9ac5f0022.PNG

Another example which is similar:
http://www.macdrifter.com/uploads/2014/01/Screen%20Shot%2020140127_184948_450px.jpg

Since Atom is so hackable, I thought it would be possible to go a step further and allow us to assign classes/styles to items with certain tags (So we're not just limited to applying background colours and we could mix and match styles!). Ideally, it would be available in the plugin's preferences (eg. a list of tags and the CSS styling that would apply to them), but I would appreciate it even if you could point me in the right direction. I did spend a bit of time trying to figure it out, but inexperience with both CoffeeScript an Atom meant I was quickly overwhelmed.

Thanks again for your work on this awesome plugin.

[irrationalistic]

Thanks!

This is a pretty cool idea. You can sort of get some of this working right now as I am already adding the tag name as a class name to the element that contains the tag, so it'll only colorize @urgent instead of the whole line. The tough part will be adding the classes to the entire line that contains the tags instead of targeting only the specific tag part.

Try this in your atom stylesheet (found under settings/themes via link at top)

atom-text-editor::shadow, atom-text-editor {
  .source.todo {
    .attribute.urgent &{
      color: red;
    }
  }
}

I'll have to see if there's a good way to better control where the classes go in the grammar output.

[irrationalistic]

I don't know if this is going to be possible with the current codebase because of the way scopes are handled in the final html output of the editor! I am slowly working on an alternative version that may or may not be successful where I'd be rendering my own view and would have complete control over the html output. In this case, I'd have control over the classes on each line and that would give you the ability to style just about anything. It's a bit far-off though!

[willfanguy]

Is it possible to add additional tags to the list of those that are colorized (i.e. @timestamp, @done, @project)? I've searched around and can't find out how to do that. Thanks!

[irrationalistic]

@willfanguy: are you hoping to change the color of those tags specifically? They should already be highlighted with a specific default color that you can override in your own stylesheet!