StyleManager plugin: an CSS editor for Xinha

[guest]

I just finished a plugin to manage CSS in Xinha... It's just a child.

StyleManager? allow you to edit the page style sheets, modifying the existent CSS in edited document. You can to create, edit or remove rules (classes, tags, ids and complex selectors) or style elements (link/style), not just the className property. Besides that, a dropdown to apply or remove classes, like in others plugins.

Some problems...

• the system works only with single properties For example: 'margin:0 auto' or 'padding: 0 0 1px 3em' or 'border-top:1px solid #333' can not be read by the system
• for some actions, we need lots of clicks... the system should have a little help text
• I think the window interface can be better, more usable
• the dropdown feature works only with elements, selecting text fragments you maybe cause unexpected effects..
• when two rules are defined in the same selectorText, like in 'div.a, p { ... }' it will be readed as two different rules... (is a bug)

StyleManager? is avaiable for teste and download here: http://cauguanabara.jsbrasil.com/xinha/examples/stylemanager.html

Regards, Cau Guanabara

[ray]

First of all this looks like great work!

First impressions I had when trying it:

• you should use editor.outwardHTML(editor.getHTML()) on line 65. This way you exclude the Xinha internal css (the .htmtableborders,... stuff) as it's of interest for the user, it is stripped on saving anyway, and if a user would edit it it could break functions
• a php backend for editing external sheet + the ability to work in non-FullPage? mode would be great
• what does the countdown after each action mean?
• everything could be a bit more intuitive (honestly I don't know if it does at all work, I wasn't able to create a selector, the radio buttons were all greyed out)

[guest]

with a new select color window

[guest]

Thank you, Ray

• editor.outwardHTML is new for me... looks realy better, but I don't has any problems with Xinha internal CSS in my tests... do you?. But i will use it.
• to work with external css files is a great idea. I can do it in PHP
• what countdown? _changed ?? i don't understand it... (oh my poor english...)
• you are right, the interface is confuse, can be better...
• the last attached file (1.01) contains a new select color window that allows to work with literal values like 'transparent', 'red' or 'buttonface'

This will be better...

[guest]

Forgot this...

"when two rules are defined in the same selectorText, like in 'div.a, p { ... }' it will be readed as two different rules... (is a bug)"

I were spliting the selectors by the commas, but FF work with original selectorText, while IE splits it automatically. Now let each browser work in it's own mode. The rule 'div.a, p { ... }' in IE will appears like two different rules 'dic.a' and 'p'. In Mozilla, only one: 'div.a, p'. I it is not a problem...

PS. how do i get my own login and password?

Thanks, Cau Guanabara

[ray]

what countdown? 

Each time I do something there appears a red text in the upper right corner counting down from 10 or so. This is really confusing, it looks so alarming like "In ten seconds the bomb explodes" :)

You have to mail James (james@…) for a password

[ray]

Just to make it clear when I seem to critical: I think this has high potential, and I'd like it to become a really good piece of software! That involves a really good (that means easy) UI.

This could be a killer feature for Xinha :)

Thumbs up

[guest]

• Interesting... I made the message (with contdown) to give to user some confirmations, thinking in make it more clear, not more complicated... rsrsrsrs... there is no bomb! I can to create an configuration variable to control it - on/off.

• I think about this plugin for a long time, and I had only 2 free weeks to do that. There's no sponsor... because of this i will need some time, but i wish to see StyleManager? working beautiful. Today, in the age of web 2.0, people talks about semantic in everywhere - and the result contents of most (or all) WYSIWYG editors causes a really semantic mess... I think it can be a contribution to make the editor results more semantic (how to eliminate the FONT tag?).

I share with your enthusiasm, let's do that! just give me some time.

Any ideas or sugestions about how to organize properties in UI?

Cau

[caugb]

I'm making some radical changes in this project, and after lots of tests i have concluded that the cssapi.js (manipulate the styleSheets object) have various problems.. is still too inconsistent. Is premature...

When i have good news, you will know.

[caugb]

Some radical changes was made:

• The new select color window width was changed to respect the minimum width in IE7 (250px)
• Some functions in cssapi.js was changed and some unnecessary variables was eliminated
• Added a new feature to edit inline styles in selected element directly
• The UI was changed in the styleSheets edit window
• The ability to work with external files will be forgotten for a while... I don't found a way to reload the external CSS without reload entire page.

See it here: http://cauguanabara.jsbrasil.com/xinha/examples/stylemanager.html