outsource note styles to css

[julkue]

The documentation shows how to style a note:

    //Config note style
    style : {
        tresd           : true,                 //General style in 3d format
        backgroundcolor : '#FFFA3C',            //Background color in new postits when randomColor = false
        textcolor       : '#333333',            //Text color
        textshadow      : true,                 //Shadow in the text
        fontfamily      : 'verdana',            //Default font
        fontsize        : 'small',              //Default font size
        arrow           : 'none',               //Default arrow : none, top, right, bottom, left
    }

However, this seems to be not really modern. If you want to style your note you will come to a point, where things like that aren't enough (e.g. you could need a box-shadow).
The way a note looks should be defined in a CSS class instead of a JS configuration.

[txusko]

But these variables can be configured on the fly from the back-panel configuration. Some are embebed in the style attribute of the element, and others are adding or removing css classes, for example the "3d" style, the textshadow, etc. Do you have any idea about it?

[julkue]

Basically you should not define CSS in the plugin. Instead, just add CSS classes to an element. That allows designers to style notes with pure CSS, they just need to know what class will be added to what element.

Take this project as an example. It highlights keywords. Now in your way this plugin would just offer to change e.g. the color with an option. But this will mix up styling and scripting, which is bad. Also it makes it harder to maintain and integration can be difficult. On top, as I already said, when designers want to add CSS that your plugin doesn't provide, they would have to adjust the plugin. This is why this project simply allows to pass a class name. Then styling is a completely separate thing and nothing is mixed together.

The plugin should allow users to define there own CSS for the look and feel of notes. This includes options like position, posX, posY, right, height, width, minHeight, minWidth, style.

[julkue]

For me, this is the most fundamental issue. Customers expect a feature to look like their StyleGuide and styling a note with the current implementation seems to be expensive and cumbersome, functions and styles should be splitted (JS, CSS) as long as possible.

[txusko]

Sorry, I was working to outsource the note style to a css class. Still much work to be done, but when you can, If you take a look at this branch and tell me if I'm in the right direction.

https://github.com/txusko/PostItAll/tree/Outsource-note-styles-to-css
Examples in https://github.com/txusko/PostItAll/blob/Outsource-note-styles-to-css/examples/cssnote.html

[julkue]

@txusko Thank you for your work! I've seen there's a great progress. Unfortunately I'm currently not able to review the things due to lack of time.

[txusko]

Don't worry @julmot I'll continue working and try to do my best. 👍

[txusko]

Branch d6a7a82 merged & new version published.
Regards!