Hi Libing,
thanks for the new section. I’m using the requirejs loader, btw.
As I mentioned in my last mail, the solution doesn’t quite work, as the original theme (prospecto in my case) gets removed. I fiddled with this a little further today and came up with a two part solution for this: 1. In my setup I had to use an absolute path to the prospecto.css file. This way, the _load function in orion/editor/textTheme creates a link element instead of inlining the file in a style tag. 2. I then got null reference exceptions in the _createStyle function when changing the font size because of the node.firstChild.data check (firstChild was null). So I changed the function slightly, such that it only gives IDs to style tags but not link tags (see below).
This way the original theme is inserted as a link tag and all dynamic changes to the font are additionally inserted as a style tag. It works for my needs, but let me know if I am doing something stupid here :D
_createStyle: function(className, styleSheet, callback, link) { var document = this._document; var id = THEME_PREFIX + className; var node = document.getElementById(id); if (node) { if (link || node.firstChild.data ="" styleSheet) { return; } node.removeChild(node.firstChild); node.appendChild(document.createTextNode(styleSheet)); } else { if (link) { node = util.createElement(document, "link"); //$NON-NLS-0$ node.rel = "stylesheet"; //$NON-NLS-0$ node.type = "text/css"; //$NON-NLS-0$ node.href = ""> node.addEventListener("load", function() { //$NON-NLS-0$ callback(); }); } else { node = util.createElement(document, "style"); //$NON-NLS-0$ node.appendChild(document.createTextNode(styleSheet)); node.id = id; // I moved this up into the else <================================================= } var head = document.getElementsByTagName("head")[0] || document.documentElement; //$NON-NLS-0$ head.appendChild(node); } if (!link) { callback(); } }
Hi Sebastian:Please refer to a new wiki section https://wiki.eclipse.org/Orion/How_Tos/Code_Edit#How_to_change_the_editor.27s_font_dynamically.By the way, are you using requirejs
loader?LibingFrom:
Sebastian Pahnke <pahnke.sebastian@xxxxxxxxx>To:
Orion developer discussions
<orion-dev@xxxxxxxxxxx>Date:
12/01/2015 06:10 AMSubject:
Re: [orion-dev]
CodeEdit change font sizeSent by:
orion-dev-bounces@xxxxxxxxxxx Hi Libing,your proposed solution didn't work for me as I don’t
use the "themeClass" but the "theme" attribute (FYI:
it did work when using the themeClass attribute, but that would mean I
have to include the corresponding CSS file on all of my editor pages) and
it is not dynamic enough for my needs. However, I did some experimenting
and came up with the following idea (but with a catch):// setup (same as before) function loadTheme(themeName) { var theme = mTextTheme.TextTheme.getTheme(themeName); if (!theme.getThemeClass()) { theme.setThemeClass(themeName, { href: 'CodeEditWidget/themes/' + themeName
}); } return theme; }
var theme = loadTheme('prospecto');
codeEdit.create({ parent: 'editor' }).then(function(editorViewer) { editorViewer.editor.getTextView().setOptions({ theme: theme }); });
// on zoom value change var stylesheet = theme.buildStyleSheet('prospecto', { className: 'prospecto',
styles: { 'font-size': fontSize + 'px' } }); theme.setThemeClass('prospecto', stylesheet);Although this works for setting the font size (without
artifacts), the Prospecto theme is lost after the call to setThemeClass
and the editor falls back to the default theme. Any suggestions for that?Thanks and regards,SebastianAm 27.11.2015 um 16:00 schrieb Libing Wang <Libing_Wang@xxxxxxxxxx>:Hi Sebastian: You can use editorViewer.editor.getTextView().setOptions({themeClass:
"editorTheme"}) any
time you want as mentioned in https://wiki.eclipse.org/Orion/How_Tos/Code_Edit#Theming_your_editor. For example if you ONLY want to change the font size you can trim the css
file as below: .editorTheme.textview { font-size: 14px; } You then need to dynamically manipulate that css class.
In Orion IDE editor style settings page, by the way, we are using a theme
builder to change the css from a complex object and apply that css to the
editor. The Code edit build is not exporting that capability but if you
really want a complex theme builder, please open a bug describing what
you need. Hope this will help you understanding what happened in Orion IDE.
Thanks, Libing
From: Sebastian
Pahnke <pahnke.sebastian@xxxxxxxxx> To: Orion
developer discussions <orion-dev@xxxxxxxxxxx> Date: 11/26/2015
11:23 AM Subject: Re:
[orion-dev] CodeEdit change font size Sent by: orion-dev-bounces@xxxxxxxxxxx
Hi,
yeah, I forgot to mention that I like to change the font dynamically and
not necessarily on startup. My bad :D The use case is a „zoom“ control for the editor text, similar to ones
found in IDEs like Visual Studio. What happens in the full Orion IDE when
the user changes the font size in the settings?
Regards, Sebastian
Am 26.11.2015 um 17:15 schrieb Libing Wang <Libing_Wang@xxxxxxxxxx>:
Hi Sebastian: Have you tried https://wiki.eclipse.org/Orion/How_Tos/Code_Edit#Theming_your_editor?
Thanks, Libing
From: Sebastian
Pahnke <pahnke.sebastian@xxxxxxxxx> To: orion-dev@xxxxxxxxxxx Date: 11/26/2015
04:49 AM Subject: [orion-dev]
CodeEdit change font size Sent by: orion-dev-bounces@xxxxxxxxxxx
Hi,
I’d like to change the font size in the codeEdit widget. Is there a central
function to do that properly? Right now I’m working around that by changing
the style settings by jQuery:
$('.textview, .textviewTooltip, .contentassist').css('font-size', fontSize
+ 'px'); $('.textview').css('line-height', (fontSize*1.2) + 'px‘); $('.contentassist').css('line-height', lineHeight + 'px'); $('.contentassist').css('width', width + 'px'); $('.contentassist').css('height', height + 'px');
and then ‚refreshing‘ the editor using editor.setText(editor.getText()).
However, this results in some ugly artifacts. Especially the second line
breaks the zoom ruler, but without it, the lines get smushed in IE11. For
the refresh I also tried using editor.getTextView().redraw(), but that
causes the line numbers to look ugly.
Thanks and regards, Sebastian
_______________________________________________ orion-dev mailing list orion-dev@xxxxxxxxxxx To change your delivery options, retrieve your password, or unsubscribe
from this list, visit https://dev.eclipse.org/mailman/listinfo/orion-dev
_______________________________________________ orion-dev mailing list orion-dev@xxxxxxxxxxx To change your delivery options, retrieve your password, or unsubscribe
from this list, visit https://dev.eclipse.org/mailman/listinfo/orion-dev _______________________________________________ orion-dev mailing list orion-dev@xxxxxxxxxxx To change your delivery options, retrieve your password, or unsubscribe
from this list, visit https://dev.eclipse.org/mailman/listinfo/orion-dev
_______________________________________________ orion-dev mailing list orion-dev@xxxxxxxxxxx To change your delivery options, retrieve your password, or unsubscribe
from this list, visit https://dev.eclipse.org/mailman/listinfo/orion-dev_______________________________________________ orion-dev mailing list orion-dev@xxxxxxxxxxx To change your delivery options, retrieve your password, or unsubscribe
from this list, visit https://dev.eclipse.org/mailman/listinfo/orion-dev
_______________________________________________ orion-dev mailing list orion-dev@xxxxxxxxxxxTo change your delivery options, retrieve your password, or unsubscribe from this list, visit https://dev.eclipse.org/mailman/listinfo/orion-dev
|