I am currently trying to implement a
CLKComplicationTemplateGraphicCircularClosedGaugeImage
but for some reason my icon keeps getting tinted blue.
When I change the tintColor of the WatchFace everything seems to be tinted the right way. But when I disable tinting on the WatchFace my Image will be colored blue for some reason.
I enabled the rendering Mode: alwaystemplate inside the asset catalog because my image is just black in the original version and I tint it in other parts of my app.
let gaugeProvider = CLKSimpleGaugeProvider(style: .fill, gaugeColor: color, fillFraction: progress)
let template = CLKComplicationTemplateGraphicCircularClosedGaugeImage(gaugeProvider: gaugeProvider, imageProvider: CLKFullColorImageProvider(fullColorImage: image))
I tried to apply a tintColor on the template and I also tried to apply a tintColor direclty to the image before passing it to the ImageProvider. Both Ideas doesnt result in the expected output.
let gaugeProvider = CLKSimpleGaugeProvider(style: .fill, gaugeColor: color, fillFraction: progress)
let imageProvider = CLKFullColorImageProvider(fullColorImage: image)
let template = CLKComplicationTemplateGraphicCircularClosedGaugeImage(gaugeProvider: gaugeProvider, imageProvider: imageProvider)
template.tintColor = .white // this has no effect
How can I set a default tint color when using alwaysTemplate as the rendering mode?
I found a Solution by myself.
I am now tinting the Image white and also rerendering it as a originalImage.
let imageProvider = CLKFullColorImageProvider(fullColorImage: image.withTintColor(.white, renderingMode: .alwaysTemplate).withRenderingMode(.alwaysOriginal))
Related
I have a website where I post articles. It's made up of Jekyll, and deployed by GitHub. The site has a button which switches light mode to dark mode and vice versa without any page refresh.
Today I have installed disqus code to it. And It comes with either dark or light mode. So I just added this to my toggler function:
const disqusThread = $('#disqus_thread')
const ps = $('#disqus_thread *')
tdm.onclick = function() {
disqusThread.css('background-color', '#111')
ps.attr('style', 'color: #fff !important')
.
.
.
Which does actually change the background, but in no way I can change the text colour. If I try filter: invert(100%) everything is nice, but the images are also looking inverted. Using #disqus_thread *:not(img) isn't working either.
If I open firefox's inspector tool, I see the properties has !important in them. So I can't change the style anymore. And switching back and forth isn't actually working even in basic CSS.
Is there any way to flip the colour without using filter?
I was also having this problem and my workaround on this was first, the toggle button will remove all the elements inside the disqus_thread div using the code:
mydiv = document.getElementById('disqus_thread');
while (mydiv.firstChild) {
mydiv.removeChild(mydiv.firstChild);
}
Then, the button will reload the Disqus comment section using the function:
var disqus_shortname = "sample-shortname";
var disqus_url = "sample-url";
var disqus_identifier = "sample-identifier";
var disqus_loaded = false;
function disqus() {
if (!disqus_loaded) {
disqus_loaded = true;
var e = document.createElement("script");
e.type = "text/javascript";
e.async = true;
e.src = "//" + disqus_shortname + ".disqus.com/embed.js";
(document.getElementsByTagName("head")[0]
||document.getElementsByTagName("body")[0]).appendChild(e);
}
}
Lastly, since Disqus comment section was on auto, it would check the inherited color and decide if it was gonna be light or dark mode which I read from https://help.disqus.com/en/articles/1717201-disqus-appearance-customizations.
How is the color scheme determined?
- The light scheme is loaded when the text color Disqus inherits from your site has >= 50% gray contrast: between color: #000000; and color: #787878;
- The dark scheme is loaded in all other instances.
Since, by toggling the button, the website would turn the color of the body to a darker color anyway, Disqus automatically inherits this and reloads to its dark mode with just the click of the toggle button.
I don't know if this will cause lags as I was experimenting on localhost and so far it wasn't lagging for me.
References:
https://css-tricks.com/snippets/javascript/remove-element/
https://help.disqus.com/en/articles/1717201-disqus-appearance-customizations.
https://www.labnol.org/internet/load-disqus-comments-on-click/28653/
I have created an application to test the new CN1 CSS support.
The plugin is great and everything works fine and out-of-the-box, except that the material icon on a button does not change its color with the button's text color. It just stays always the same (black) color.
Before using the CSS support, I changed the theme editor's default foreground color setting to reach the material icon, but now the theme editor seems to be dis-attached from the styling and it does not have any effect anymore.
Is there a UIID for the icon or any other way to change the color of the material icon?
Here is my code:
FontImage icon = FontImage.createMaterial(FontImage.MATERIAL_CHECK, "TitleCommand", 3);
Button buttonTest = new Button("Test css");
buttonTest.setUIID("ButtonTest");
buttonTest.setIcon(icon);
And the CSS:
ButtonTest {
color: red;
}
try it
FontImage img = FontImage.createMaterial(FontImage.MATERIAL_THUMB_UP, style);
Just to post a complete answer that might be able to guide someone:
Style style = new Style();
style.setBgColor(ColorUtil.GREEN);
style.setFgColor(ColorUtil.WHITE);
style.setBgTransparency(255);
FontImage imageBack = FontImage.createMaterial(FontImage.MATERIAL_NEXT_WEEK, style);
I'm trying to implement a TinyMCE button that will apply the style of the selection to the entire box. I'm having trouble, though, reading the style of the selection when the selection is buried in a span in a span in a paragraph. Let's consider 'color' for example. Below I have a box with some text and I've selected "here" in the paragraph and made it red.
The HTML for the paragraph is now:
The code behind my button to apply the style of the selection to the box is
var selected_color = $(ed.selection.getNode()).css('color');
console.log("color pulled is ", selected_color);
$(ed.bodyElement).css('color', selected_color);
It doesn't work because the color pulled is black, not red, so the third line just re-applies the black that's already there. (If I replace selected_color in the third line with 'blue' everything goes blue.) So the problem is pulling the color of the current selection.
Does anyone know how I can do this reliably, no matter how buried the selection is?
Thanks for any help.
I also noticed somewhat a strange behavior up and there, with selections of nested span's and div's, but honestly i'm not able to recognize if this is a bug of TinyMCE, a browser issue or a combination of both (most probably).
So, waiting for some more information from you (maybe also your plugin code) in the meanwhile i realized two proposal to achieve what you want: the first plugin behaves like the format painter in word, the second is simply applying the current detected foreground color to the whole paragraph.
As you move throug the editor with the keyboard or mouse, you will see the current detected foreground color highlighted and applied as background to the second plugin button.
Key point here are two functions to get the styles back from the cursor position:
function findStyle(el, attr) {
var styles, style, color;
try {
styles = $(el).attr('style');
if(typeof styles !== typeof undefined && styles !== false) {
styles.split(";").forEach(function(e) {
style = e.split(":");
if($.trim(style[0]) === attr) {
color = $(el).css(attr);
}
});
}
} catch (err) {}
return color;
}
function findForeColor(node) {
var $el = $(node), color;
while ($el.prop("tagName").toUpperCase() != "BODY") {
color = findStyle($el, "color");
if (color) break;
$el = $el.parent();
}
return color;
}
The try...catch block is needed to avoid some occasional errors when a selected text is restyled. If you look at the TinyMCE sorce code you will notice a plenty of timing events, this is a unavoidable and common practice when dealing with styles and css, even more with user interaction. There was a great job done by the authors of TinyMCE to make the editor cross-browser.
You can try out the first plugin in the Fiddle below. The second plugin is simpler as the first one. lastForeColor is determined in ed.on('NodeChange'), so the code in button click is very easy.
tinymce.PluginManager.add('example2', function(ed, url) {
// Add a button that opens a window
ed.addButton('example2', {
text: '',
icon: "apply-forecolor",
onclick: function() {
if(lastForeColor) {
var applyColor = lastForeColor;
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
ed.selection.collapse(false);
ed.fire('SelectionChange');
}
return false;
}
});
});
Moreover: i think there is a potential issue with your piece of code here:
$(ed.bodyElement).css('color', selected_color);
i guess the style should be applied in a different way, so in my example i'm using standard TinyMCE commands to apply the foreground color to all, as i wasn't able to exactly convert your screenshot to code. Please share your thoughts in a comment.
Fiddle with both plugins: https://jsfiddle.net/ufp0Lvow/
deblocker,
Amazing work! Thank you!
Your jsfiddle did the trick. I replaced the HTML with what was in my example and changed the selector in tinymce.init from a textarea to a div and it pulls the color out perfectly from my example. The modified jsfiddle is at https://jsfiddle.net/79r3vkyq/3/ . I'll be studying and learning from your code for a long time.
Regarding your question about
$(ed.bodyElement).css('color', selected_color);
the divs I attach tinymce to all have ids and the one the editor is currently attached to is reported in ed.bodyElement. I haven't had any trouble using this but I have no problem using your
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
Thanks again! Great job!
Using a dark theme, the caret in Evince (press F7 to get to caret mode) is a very light colour and therefore doesn't show up well against the usual white background of a document.
I'd like to fix this, and I was going to hack a theme to do it, but on digging, it seems evince is using a deprecated property: cursor-color (at ev-view.c:4260):
gtk_style_context_get_style (context,
"cursor-color",
&style_color,
NULL);
The fallback is:
gtk_style_context_save (context);
gtk_style_context_get_color (context, GTK_STATE_FLAG_NORMAL, color);
gtk_style_context_restore (context);
The deprecation was done here. So I want to try to update evince to use the CSS property, and then update my theme to set this for EvView objects to apply it to evince's main document view:
I set the following CSS in ~/.config/gtk-3.0/gtk.css as a test:
* {
caret-color: rgba(0,255,0,1.0);
}
This does work for gedit, for example - the caret in the main editor and the dialogs are all green.
I then tried to read this out, using similar logic to the used internally by GTK for the caret colour (c.f. gtk/gtkstylecontext.c # 9b86d6da2)
gtk_style_context_get (context,
gtk_style_context_get_state (context),
"caret-color", color,
NULL);
However, this doesn't work and my colour is transparent black, not opaque green as expected. However, the call to gtk_style_context_get() is actually setting the colour to transparent black, not just leaving it alone.
Using just GTK_STATE_FLAG_NORMAL instead of gtk_style_context_get_state (context) as the fallback used to doesn't work either.
What is the correct way to read this property such that I can set it in my theme and have it picked up?
To obtain the caret color, you should do something like:
GdkRGBA *caret_color;
gtk_style_context_get (context,
gtk_style_context_get_state (context),
"caret-color",
&caret_color,
NULL);
Later in the code, in Evince you had:
if (style_color) {
color->red = style_color->red / 65535.0;
color->green = style_color->green / 65535.0;
color->blue = style_color->blue / 65535.0;
color->alpha = 1;
Where the color values were converted from GdkColor to GdkRGBA. That conversion is not needed once you obtain "caret-color", and I guess that may have changed the color as you expected.
I'd like an option with the TinyMCE color picker to choose transparent as the color so a character (a "bullet") will still be there and take up space but will not be visible if it's color is transparent.
There's an "X" box option that says "No color" but this seems to make the color black, not transparent.
Does anyone know how to add a transparent color option to this color picker, or even make the "X" box implement transparent instead of black?
Thanks for any ideas.
I believe I was able to do that, I did some quick tests and it appears to be working fine.
I got the latest version of TinyMCE (4.1.10_dev) to access the textcolor plugin's non minified javascript there's this instruction:
if (value == 'transparent') {
resetColor();
} else {
selectColor(value);
}
What happens here? When you choose a color it runs the selectColor, which wraps the selected text in a span with the selected color. However, when you select the no color it removes this color span (that's why it goes back to black which is the default color) instead of setting it to transparent.
So if you do this:
//if (value == 'transparent') {
// resetColor();
//} else {
selectColor(value);
//}
Instead of removing the span it will change it to 'transparent' instead.
One important thing is that tinyMCE gets the plugin scripts automatically, so it only works with the minified versions, so after you do these changes you'll have to minify the script to the plugin.min.js and put it on the textcolro plugin's folder overwriting the one there.
I hope it helps.
The × button in the colorpicker removes any custom colours, it does not add a zero-opacity colour.
As you can see when looking at the source code or trying the full example there is no support for rgba() or opacity in the included colorpicker plugin. Only rgb() and hex unfortunately.
You may need to create your own small plugin to add the ability. There are a number of alternatives, for example:
Create a CSS class which you can add to elements in the editor. Then do your colour magic in your own CSS file.
Create a new button in the toolbar which makes the element transparent.
I would personally go with option two, something like this:
tinymce.init({
selector: 'textarea',
plugins: 'nocolour',
toolbar: 'nocolour',
external_plugins: {
"nocolour": "url_to_your/nocolour.js"
}
});
And nocolour.js:
tinymce.PluginManager.add('nocolour', function(editor, url) {
// Add a button that opens a window
editor.addButton('nocolour', {
text: 'Remove Colour',
icon: false,
onclick: function() {
editor.undoManager.transact(function() {
editor.focus();
// Here is where you add code to remove the colour
editor.nodeChanged();
});
}
});
});
Rafael's solution worked for me. I just wanted to document it a bit more and show what it looks like for TinyMCE 4.1.7.
When you click the "X" in the textcolor grid the "value" variable gets "transparent," rather than a hex value from the colorMap.
The relevant code in the textcolor plugin is:
value = e.target.getAttribute('data-mce-color'); // the hex color from the colorMap square that was clicked. "transparent" if X was clicked
if (value) {
if (this.lastId) {
document.getElementById(this.lastId).setAttribute('aria-selected', false);
}
e.target.setAttribute('aria-selected', true);
this.lastId = e.target.id;
// if (value == 'transparent') { // occurs if you select the "X" square
// removeFormat(buttonCtrl.settings.format);
// buttonCtrl.hidePanel();
// return;
// }
selectColor(value);
The five lines I've commented out remove formatting for the selected text, leaving it black, which doesn't seem useful. If you wanted the text black you could select the black square in the colorMap. Falling through to selectColor(value) with value = "transparent" sets transparent as the color.