[orion-dev] Orion Theme Builder

[lamine <laminba2003@xxxxxxxx>]

Hi Anton,

First of all, let me share this experience with you : Dojo + Curl.js = HELL. Really, It was a tough day today but fortunately I have done a lot of things and I have integrated your tool into my application but at a little extent. 

You can try it here, Open a css file with Theme Builder (Open With Button) : 

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

Here is the source code 

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

And after having launched your tool , you will read this message : UNDER CONSTRUCTION which means we have some more work to do together

First of all :  Using ThemeData, how one can parse the content of a css theme file? And I know now where the Orion themes are located... 


Thanks
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