Hi Guillaume, I'm also +1 for A with the provision that you implement a feedback to the user when the browser is processing and the preview is not up to date. I was thinking about a gray transparent foreground over the preview for example, with may be a CSS based spinner. Moreover, for those having very slow computer, having a way to disable the automatic refresh will be nice to have. I really dislike B since it is "artificial" and will surely became out of sync. However, the features of editing properties in-place over the preview would be surely easier to do in B. This was a very interesting feature of the first theme editor. Do you think that we could find a way to do that with A for let say the most common style that is usually changed ? (By detection of style in the preview ?) Thanks, On Tue, Jun 3, 2014 at 6:06 PM, Guillaume "Louis-Marie" Delhumeau < [email protected]> wrote:
Good evening,
We have discussed recently about the necessity of having a new Color Theme Editor for Flamingo. Some of you have suggested to try to integrate in XWiki an existing Bootstrap Customizer such as FancyBoot: http://fancyboot.designspebam.com/
After looking on Google and Github, I could not find any that matches this criterias: - Bootstrap 3 support - active - compatible with an XWiki integration
That is why I propose to write our own, which could actually take some code from existing projects.
On my side, I have written 2 prototypes and I have pushed them in a new github repository: https://github.com/xwiki-contrib/bootstrap-customizer-prototypes
Prototype A ====
Demo: http://xwiki-contrib.github.io/bootstrap-customizer-prototypes/prototypeA/ (chrome users: please refresh the page if you do not see a color picker when you click on an input box)
This prototype opens a real web page inside an iframe, and use the LESS browser compiler to update the CSS.
Pros: - it uses LESS so it shows the **real** results - any wiki page can be seen in the preview frame - not so hard time to implement
Cons: - it is quite slow, and sometimes the browser gets frozen for a few seconds.
Prototype B ====
Demo: http://xwiki-contrib.github.io/bootstrap-customizer-prototypes/prototypeB/
This prototype emulates the behaviour of LESS when we change some variables. The results is displayed in a preview box, but it is a fake one.
Pros: - The prototype runs quickly in the browser because there is no LESS compiler involved.
Cons: - The preview box is not a real page and it cannot show all use-cases. - Will take more time to implement and to maintain because we have to manually emulate what LESS would do in the preview box.
I'm +1 for Prototype A.
What do you think?
Thanks, Guillaume _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- Denis Gervalle SOFTEC sa - CEO