Sublime Forum

(ST3) ColorHelper

#15

Although I’m not too sure (yet) how i can set multiple colors for a project, this looks great!

0 Likes

#16

Thanks! Make sure if there are things you want in this plugin, or ideas on how you think it should change, to make sure you elaborate here. This was mainly a fun experiment, so I haven’t thought everything out yet. And keep in mind, I am not a web developer (I just goof around with some web stuff on occasions), so I very likely haven’t looked at this from that kind of an angle, so hearing how a web developer may actually use this will give me insight. I obviously won’t promise everything suggested here will make it in, but I am open to suggestions for the future of this.

0 Likes

#17

In one of your first pics posted on this thread, you had some kind of color picker (image 2 & 3), which i’m not sure how i can replicate.

However, in terms of functionality, would be nice to:

  • scan project for all colors (and provide an option to re-scan at any time)
  • specify a prefered color format (e.g. hex, rgb/a) per project
  • be able to insert an existing color
  • group colors by usage rates, nuances, etc
  • suggest replacing similar colors (e.g. if you have 5 #fffffe and one #ffffff, suggest to replace the later)
  • provide links to where the same color was used on the project before (would be even nicer to be context-aware; i.e. if i’m inserting a text color, don’t display border-color or background)
0 Likes

#18

Click the colorbox of the preview panel. I think I mention it on the OP. Also, it should, when you are typing things like #, rgb(, rgba(, hsl(, or hsl(, show the panel to select pallets/colors from.

FWIW, functionality is the first priority, so thinks like this will be fast-tracked:

I think I will be adding a general bookmark system for colors, where you can click a bookmark icon on the preview and it will add the color to a global bookmark palette, maybe project specific if/when I get that far.

I think I want to address how we can handle replace multiple colors, maybe show tooltip of first color in visible region. ColorHelp doesn’t necessarily care that cursors are placed proper for replace; only the auto show tooltip cares. So maybe I can just adjust the logic of the auto tooltip to show with multi-cursors, but focus on the first visible cursor. And on replace, you just need to make sure your cursors are where they need to be. I may even expose a limit to how many colors it will replace as I do calculate how I should replace.

Project stuff will probably come last as I first want to make the interface as good as possible, and I need time to think about a good indexer (@huot25 ran into performance issues which I would like to avoid if I go down that route), but I think so far I am on board with these for the future:

This would obviously come when I am aware of exiting colors in the project:

Here we are getting real fancy, so I will have to see how well things go and how motivated I am when I get to this point :wink::

[quote=“facelessuser”]- group colors by usage rates, nuances, etc

  • suggest replacing similar colors (e.g. if you have 5 #fffffe and one #ffffff, suggest to replace the later)
  • provide links to where the same color was used on the project before (would be even nicer to be context-aware; i.e. if i’m inserting a text color, don’t display border-color or background)[/quote]
0 Likes

#19

Had some bugs in color insertion (really hadn’t tested it that well), but that should be resolved now.

0 Likes

#20

You can now set your preferences of what is used for color and alpha colors globally in the settings. You can also specify whether you want to use webcolor names if available.

Will probably add the option to specify case of hex colors soon 'cause I know I’m going to get that request later :wink: .

0 Likes

#21

Now indexes colors in CSS, HTML, or PHP file when it is opened or saved. This is currently done by file extension.

Current colors are shown as a palette in the palette panel which you can select colors from. On demand, manual index command is provided.

0 Likes

#22

Some small bug fixes and improvements have made it in, and also a new feature allowing the colors to be bookmarked in a special palette called Favorites. I plan on adding a way to add colors to other palettes through the UI , but the bookmark feature allows you to add colors real quick clicking the bookmark icon on the color info panel.

So give it a try and let me know if it is something that should stay. By the way, palettes are now split out into a separate file now: color_helpers.palettes.

0 Likes

#23

I added a way that other plugins can call @weslly’s ColorPicker plugin (though it hasn’t been released yet, I but probably soon) and added support to call it from ColorHelper. To make things more obvious, I have added a palette icon, a dropper icon, and the bookmark/fav icon for opening the palette panel, opening the color picker, or bookmarking the current color respectively. I know the icons rendering is not the best, but that is because of Sublime HTML renderier. I still think meh icons are better than verbose links. Anyways, feedback is welcome, and hope everyone likes the recent changes.

I think the next step is creating a way to add colors or remove colors from palettes and even create new palettes or delete existing ones. I think after that, I can think more about how colors would be managed in a per project way and how they may or may existing along side global ones.

After all that, I may start thinking about project scanning, but I make no promises. I’m going to need to think how I can do it without impacting performance, and probably implement a simple caching system to keep from scanning stuff that doesn’t need scanning again…I don’t really care to think about all of that now.

0 Likes

#24

A number of new things have been added:

  • Now can delete colors from a palette via the UI
  • Now can delete whole palettes via the UI
  • Can now add a color to an existing palette via the UI
  • Somewhere I along the line I broke color indexing of the current file; this is fixed again
  • weslley released a new Colorpicker version which should now work with ColorHelper
  • Evan better color detection in files. Please see settings file to tweak behavior

So I still need a way to add a color to a non-existent palette (create new palette). That should be coming soon. I think I am also going to offer a way to convert colors to different formats; need to think about how to work that in the UI.

I think after that, I am ready to think about per project stuff. Along the way I need to figure out a flow for importing ASE palettes.

0 Likes

#25

ColorHelper has some new features

  • Color info panel now shows css style conversions, and should replace current syntax with chosen conversion when clicked.
  • Now scans projects for colors. Will scan CSS source and html CSS style blocks and style attributes. These colors will be available via the palette panel.
  • Can now define color palettes at the project level as well as the global level.
  • Will scan ASE binaries for colors in a project (this will be optional in the future).

Maybe other things that I have forgotten. I need expose more control over what gets displayed and what gets scanned, but now is the time feedback will help. So if your using this, feel free to let me know what you like and don’t like, or what you would like to see (keeping in mind that I may or may not implement it).

Please do report bugs as well.

0 Likes

#26

Looks nicer and nicer!

There is a way to automagically show the color picker when the text cursor gets into a color? (after x ms)

0 Likes

#27

Is it not popping up for your? Or are you just wanting to tweak the timing of the popup? It should pop up on its own when you are either in a CSS color or in an HTML attribute with a color. If it isn’t popping up, let me know what syntax languages you use. If you want to tweak, I would be interested to hear what you don’t like about the current timing.

0 Likes

#28

Well, yeah, that’s it! I’m using SCSS syntax (on plain CSS works wonderful and the timing is just right!).

And i think why. Here are the scopes for exactly same cursor position for css vs sass:

*(http://i.imgur.com/rl58vFe.png)
*(http://i.imgur.com/BTcCIa6.png)

long story short, property-value is not a thing on sass syntax (i also have an ancient version of sass; let’s see if i can update)**

0 Likes

#29

Hmm. Well that is the down side of these types of projects, you spend most of your time processing more and more variants. So are SCSS and SASS the same thing?

Anyways, I can probably take a look at the SCSS and/or SASS. if I can’t refine the scope search, I can probably relax detection for that/those syntax(s). What gets more annoying is indexing the file’s and project colors. I index the file colors by using the scope to make it quick to make it so I search less code and get more relevant results. I guess I could run it through the project indexer which just parses plain text. But then I also have to support more syntax. The current CSS indexer is really basic an probably doens’t handle a couple of corner cases ideally yet, but it is so far good enough. But now I would have to parse more style variants ughhh. Hopefully there is a good python library with a compatible license that I can just convert it to CSS.

0 Likes

#30

Well, not really. Even i’m using one of these on a daily basis, i’m not sure which is which, but the main difference is that one it looks like a plain CSS, the other one doesn’t need curly braces and semicolon at the end (other than that, they both work the same).

I’ve tested a couple of other packages and none of them doesn’t provide a compatible scope. The variant i use provide a color.rgb-value.css scope on #hexcolors but nothing for rgb or rgba.

So most likely I will start digging into the tmLanguage file and see how i could add these extra scopes.

Thanks!

0 Likes

#31

Scopes would make it work the best for auto popup and current file color indexing. Worst case scenario, I can still filter out comments and strings, but you could possibly get a false positive if you use a hex color as a class name or id or used a web color name in a class name etc. It would also probably pick up things like css attribute nameswhite-space but I could probably tweak the regex to avoid stuff like that by avoiding colors preceded or followed by dashes.

The biggest hurdle is providing a way to index a SCSS and SASS without scopes for project indexing. I would have to build up some kind of sass and scss parser. CSS is pretty basic, so it is easiest to parse as plain text, though I think I will need to tweak things for @media etc.; it will handle the nesting, just no ideally like it should, and false positives are possible., but SCSS and Sass make things more complicated for accurate color detection via this simplistic approach. I will almost have to write up a simple lexer…ughh. I guess if I am just lazy I could just parse search for colors and ignore the nuances of the language.

0 Likes

#32

@iamntz, you can try this which should get scss and sass working if you are using this package: packagecontrol.io/packages/Synt … for%20Sass. The scoping was unique enough that I think this works. You should get auto pop ups and indexing of current file colors on save and such. Other sass, sccs syntaxes may not work, but they may very likely be resolved in a similar way, or better scoping would have to be added to them. So I would currently recommend the package above.

The only problem is going to be with certain sass/scss variables as the current regex and code doesn’t filter out color names that might start with $ or have dashes in front of them. I will tweak that stuff later, and I think we can overcome that. Now project indexing is going to be a bit tougher as I have to come up with a way to parse this stuff, so that is going to be put on hold.

Anyways, here is the new rules. I will commit these later today along with some better regex and such.
[pre=#FAFDFF] // File syntaxes that will be scanned on file open, save.
// These are the syntaxes in which the auto popup tooltip uses as well.
“supported_syntax”:
“meta.property-value.css -comment -string”, // CSS, CSS in HTML etc.
“meta.value.css -comment -string”, // CSS3, CSS3 in HTML etc.
“meta.property-list.css.sass -comment -string”, // sass and scss
“sass-script-maps -variable.other -comment -string”, // sass script maps
“meta.tag.inline.any.html string.quoted” // HTML attributes
][/pre]

0 Likes

#33

Works great! Thanks!

0 Likes

#34

Thinking about this more, if my regex is good enough, I may be able to just strip out comments and strings when scanning project files, and successfully scan CSS, SCSS, and Sass without having any additional special parsers. All I care about is the colors, so if I can isolate them well enough with solid regex, I may be able to get this working. I may give it a shot tonight.

0 Likes