[orion-dev] Orion Editor Themes

[lamine <laminba2003@xxxxxxxx>]

Hi Anton,

Thanks really for your feedback. And yes, I have discovered this morning the theme builder in the Orion's settings and that's really beautiful. And also thank you very much for pointing me to your blog post. My subconscious did take the idea there since it is one of the first posts I have read about Orion. Right now, I was trying to put things into their context by reading your las aventuras. And my sincere congratulations for your good writing. And with what I have read and with what I have played around with this morning, I can clearly make the distinction between the two theming concepts you have. Orion Editor Theming and Orion Theming do not definitely mean the same thing since the last one does determine the entire look of the application. And I have basically the same concept but it is called Multi-Templating ( look and feel + layout). Right now when you are using my application, you are in fact seeing the visual appearance of my first back-end template :

1) http://youcontrol.lamine.cloudbees.net/faces/admin/templates/edit.xhtml?id=bluestork

And the menus does come from the metadata of my pluggable modules. And maybe, this kind of system will remind you that of one IDE : 

<module>

<menus>

<menu label="Extensions">

<menuitem  label="Editors" view="/"/>

</menu>

</menus>

</module>

For more about the templating stuff, please read the Joomla docs :

2) http://docs.joomla.org/Introduction_to_Joomla!_templates


Now, what I want to do is to try to integrate your work as an Orion Theme Editor into my application and after I will give you my feedback. Basically I want to open a theme file, get its data and give it to your tool, do my job and after save back things. Hope things will be easy. I'm really crossing my fingers...

Best Regards
Lamine 

________________________________
De : Anton McConville <Anton.McConville@xxxxxxxxxx>
À : lamine <laminba2003@xxxxxxxx>; Orion developer discussions <orion-dev@xxxxxxxxxxx>
Envoyé le : Jeudi 15 novembre 2012 17h34
Objet : Re: [orion-dev] Orion Theming


Hi Lamine,

Thanks for the themes. Have you tried the theme builder in Orion's settings? Also you can take a look at this blog post:

http://goo.gl/oHNW1

Thanks,

Anton

lamine ---11/14/2012 05:51:00 PM---Hi Selenio,




lamine <laminba2003@xxxxxxxx>


Silenio Quarti/Ottawa/IBM@IBMCA, "orion-dev@xxxxxxxxxxx" <orion-dev@xxxxxxxxxxx>


11/14/2012 05:51 PM


[orion-dev] Orion Theming
________________________________




Hi Selenio,

Using your documentation, I have successfully created several themes for the Eclipse Orion Editor and they are derived from the CodeMirror ones.
Follow the link below, open the editor.js file, click on the config button and play around the themeClass option.

1) http://youcontrol.lamine.cloudbees.net/faces/admin/editors/edit.xhtml?id=Orion

After you can see how things are working by looking at the bottom of this file . You will see these settings :

settings:{

themeClass:["default","dark","orion","rubyblue","elegant",
"lesser-dark","ambiance","blackboard","monokai","neat"],
.....
}

and the default configuration is :

config:{

themeClass:"default"

}

The css files are loaded on demand via the injected loadStyle method :

tab.setConfig=function(key,value){

if(key=='themeClass') Orion.loadStyle(value+".css");
var options={};
options[key]=value;
editor.getTextView().setOptions(options);

}
};

You can perform a right click on the css folder + a click on the download item to get a zip file of the themes. And also, one thing that might be interesting would be to have an Orion web theme generator.

Thanks
Lamine

-----------------------------------------------------------------------------------------------------------------------------------------

Currently, the way we expect the font, color, background and a few other properties to change is by providing a style sheet and by setting the themeClass option of the text view. Sorry, the documentation in this area is not very clear yet.  The basic API (which should not change) are the CSS class names defined in textview.css These are:

textViewContainer     -> the whole editor including rulers and text area.
textview                         -> the scrollable portion of the editor
textviewContent         -> the contents of the editor - text area inside of scrollable area
textviewLeftRuler       -> left rulers area
textviewRightRuler    -> right rulers area


Take a look at "examples/textview/themes/orion.css" for an example:

-----------------------------------
.orion {
color: black;
}

.orion .textview {
background-color: #ffd400;
}

....
-----------------------------------

This style sheet specifies the ".orion .textview" selector which overwrites the background color of the scrollable area of the editor.  The style sheet is used by setting the themeClass option as follows:

textview.setOptions({themeClass: "orion"});


Silenio



_______________________________________________
orion-dev mailing list
orion-dev@xxxxxxxxxxx
https://dev.eclipse.org/mailman/listinfo/orion-dev