search

icecoder / ICEcoder

Browser code editor awesomeness
http://icecoder.net
Other
1.42k stars 347 forks source link

Previews for gradients and images #111

Open mattpass opened 11 years ago

mattpass commented 11 years ago

There are previews for flat colors but it would be great to also see this for gradients and images.

mattpass commented 11 years ago

Showing a preview for an image may be annoying and obscure code. Instead add a CTRL+Alt+mouse click to get text between double or single quotes and if it's an image file, open that image (which shows in the image viewer popup)

mattpass commented 11 years ago

Once we have the color picker for images we could have a full color palette PNG which could show when you CTRL+mouse click a value. Clicking a color then OK button sets that RGB or Hex color (radio buttons to select choice). Maybe also an alpha slider and make it RGBA.

mattpass commented 11 years ago

ActionScript example here which I may be able to recreate in JavaScript to save needing a PNG of a full color pallete: http://www.boostworthy.com/blog/?p=200

mattpass commented 11 years ago

Better idea, draw the color spectrum with CSS (example: http://indeziner.com/design/css/how-to-create-a-color-spectrum-with-css3-gradients/) then ovelay a white gradient fader and black gradient fader over the top half and bottom half.

mattpass commented 11 years ago

Also look at: http://csscolorpicker.com/

mattpass commented 11 years ago

Note csscolorpicker uses Farbtastic, the very well used color picker (used by Drupal, Twitter & more) but is no longer actively maintained. It does make use of jQuery but not much. Can fork its repo on Github and create a vanilla JS version.

mattpass commented 11 years ago

Forked Farbtastic, stripped out jQuery reliance and added to ICEcoder along with functions to set color and insert selected color value in the document. Looks and works beautifully.

Still need to look at previews for gradients & images tho ;-)

demolitions commented 7 years ago

Once you have a CSS rule written in the editor buffer, a simple JS hack should be sufficient to "copy" the CSS code from the editor buffer to a .css_gradient_nn rule in a <style> tag into the page's <head>, then apply that class to a little box in the gutter. How do you like this idea? jQuery could make this a bit easier.

mattpass commented 7 years ago

Having a box in the gutter sounds nice, tho different behaviour from the color picker box that appears when your cursor is on a color value. So maybe best to stick with doing it the same way:

image

We should really follow the same behaviour, especially as the gutter is already taken up by line numbers, fold marks and JS Hint errors if plugin installed.

So maybe if your cursor is on a gradient or image value, it displays a box to the bottom right of the cursor in the same way, showing the gradient, or an icon for the image. Clicking this will show a picker for gradient or the image viewer if an image (same as if you double click an image in file manager right now).

jQuery may make things easier, but it's not something I want in this repo due to filesize bloat.

mattpass commented 7 years ago

ie - for color gradients:

image

and for images:

image

demolitions commented 7 years ago

You're right, I was confusing ICEcoder's color display with NetBeans' one. The technique should however work if you put the css class on a tooltip. The picker would be a bit harder to implement.

mattpass commented 7 years ago

Yeah, having them in the gutter does look nice, but we already have gutter things so maybe would become cluttered.

You could put it in a tooltip, but CodeMirror provides a 'widget' system where you can add arbitrary DOM elems to the editor - so, HTML, an image, whatever. Probably easy enough to find the code I have for flat color boxes right now and make it display a gradient box or an image icon.

The trickiest bit as you say is implementing a picker. I wouldn't personally build one as it'd take ages, so happy to have a lib for that provided it's solid and v small (just a few kbs).

For instance, the color picker for flat colors I used a lib called Farbtastic. Shame that doesn't do gradients. :-) If you can find a lib, I'd happily vet it and then can be implemented?

demolitions commented 7 years ago

IIRC I should already have an image-based gradient picker written in pure JS, shouldn't be too much of a hassle to modify it to use farbtastic and update it to CSS3. I'll try to fetch it from one of my old servers and put it to good use.

mattpass commented 7 years ago

Nice! If we could use Farbtastic with it that'd be great. Look forward to seeing what you come up with,