I am using less.js (1.5.0, 1.6.0, 2.1.1 tested) and don't seem to be able to override a selector with a specific context. I would be grateful for shedding light on me whether my less is less-compatible or not
Version 1:
.icon.icon-text {
&.icon-save { background-image: url('patth/to/file.svg'); }
#specific-grid &.icon-save { background-image: url('patth/to/file.svg') }
}
Version 2:
.icon.icon-text {
&.icon-save {
background-image: url('patth/to/file.svg');
#specific-grid & { background-image: url('patth/to/file.svg') }
}
}
Both versions do not generate the contextualized selector. How should I go about it?
Related
I want to use Quill with bootstrap.
I need to add class="img-fluid" attribute to image tags in the editor.
I would try changing the selector on your css first:
.ql-snow .ql-editor img {
max-width: 100%;
display: block;
height: auto;
}
/* If your theme is different just change the selector */
If that doesn't work I think you can do it by extending the img embed blot, but it might be overkill.
Here is some sample code that extends the imageBlot, and adds your class to it. It should be fairly easy to adjust if you need something more specific.
class ImageBlot extends BlockEmbed {
static create(value) {
let node = super.create();
node.setAttribute('alt', value.alt);
node.setAttribute('src', value.url);
node.setAttribute('class', "img-fluid");
return node;
}
static value(node) {
return {
alt: node.getAttribute('alt'),
url: node.getAttribute('src')
};
}
}
ImageBlot.blotName = 'image';
ImageBlot.tagName = 'img';
Quill.register(ImageBlot);
You can use this code to add a custom class on each img tag:
var Image = Quill.import('formats/image');
Image.className = 'img-fluid';
Quill.register(Image, true);
https://github.com/quilljs/quill/issues/1728#issuecomment-333064787
I'm using Extjs 4.2.5 datepicker for Rooms management, when user select a date I add it to an array and then call 'setdisableDates':
sender.DisabledDates.push(date);
sender.setDisabledDates(sender.DisabledDates);
after user select a date it becomes disable and with css I change the background color to RED.
How can I enable click or Select on those dates that already disabled just in case the user made a mistake and want to cancel?
Thank you in advice
I manage to do so by overriding "handleDateClick":
function picker.beforeInit(sender, config)
{
config.cls='room_clndr';
config.DisabledDates=[];
config.disabledDaysText='חסום';
config.handleDateClick = function(e, t){
var me = this,
handler = me.handler;
e.stopEvent();
if(!me.disabled && t.dateValue){//<---------
me.doCancelFocus = me.focusOnSelect === false;
me.setValue(new Date(t.dateValue));
delete me.doCancelFocus;
me.fireEvent('select', me, me.value);
if (handler) {
handler.call(me.scope || me, me, me.value);
}
me.onSelect();
}
}
}
And:
function picker.select(sender, date, eOpts)
{
if(jQuery.inArray( Ext.Date.format(date, 'd/m/Y'), sender.DisabledDates )>=0) {
sender.DisabledDates.splice( $.inArray(Ext.Date.format(date, 'd/m/Y'), sender.DisabledDates), 1 );
if(sender.DisabledDates.length>0) {
sender.setDisabledDates(sender.DisabledDates);
}
else {
sender.setDisabledDates([null]);
}
}
else {
sender.DisabledDates.push(Ext.Date.format(date, 'd/m/Y'));
sender.setDisabledDates(sender.DisabledDates);
}
}
And here the css:
.room_clndr .x-datepicker-disabled .x-datepicker-date
{
background-color:#fe5757 !important;
color: #fff !important;
}
When I change the inline style of a component depending on the state, I get this error.
Warning: `div` was passed a style object that has previously been mutated. Mutating `style` is deprecated.
In my render function, I'm calling this function before the return, to check a property.
this._isGameOver();
_isGameOver:
_isGameOver()
{
if (this.props.gameOver === false)
{
style.well.backgound = '#f5f5f5';
style.h1.color = '#32936F';
}
else
{
style.well.background = 'red';
style.h1.color = 'white';
}
}
So where and how do I use this clone? The documentation doesn't give any solid examples.
Sean
No need for cloneElement in your example, simply return a new style object instead of mutating the existing one.
_isGameOver() {
if (this.props.gameOver === false) {
return {
well: { background: '#f5f5f5' },
h1: { color: '#32936F' }
}
}
else return {
well: { background: 'red' },
h1: { color: 'white' }
}
}
Then you can merge the new styles with the old styles wherever you need using something like Object.assign
var newStyle = this._isGameOver()
return <h1 style={Object.assign({}, style.h1, newStyle.h1)} />
I'm guessing that you're defining that style object outside of your component (perhaps importing it?). So wherever you're going to modify that style you need to make a clone of it.
I always import as baseStyles (to indicate it shouldn't be mutated) and use lodash.cloneDeep() (because cloning deep objects is fiddly to do yourself).
So your function becomes
import cloneDeep from 'lodash/cloneDeep';
import baseStyle from '../blah/yourStyle.js';
_isGameOver()
{
const style = cloneDeep(baseStyle);
if (this.props.gameOver === false)
{
style.well.backgound = '#f5f5f5';
style.h1.color = '#32936F';
}
else
{
style.well.background = 'red';
style.h1.color = 'white';
}
}
You could also do something like:
const wellStyle = {
...style.well,
background: '$f5f5f5',
}
and then pass wellStyle to your component rather than style.well.
It might not suit your situation, but I only change styles inside the actual render method. It keeps everything in the one place (cloning your import in more than one place won't work).
This is a question about Paged Media.
I want to mix a string-set with running elements. It works in PrinceXML but not in PDFReactor. My question, is this possible in PDFReactor?
HTML
<p class="head">
<span class="first">Repeatable title</span>
<span class="divider">|</span>
<span class="last"></span>
</p>
CSS
p.head {
position: running(heading);
font-size: 8pt;
margin: 0;
padding: 0;
}
#page {
size: A4;
#top-left {
content: element(heading);
}
}
So far everything is peachy. But when I try to define a string-set from a H1 and try to write this into span.last this isn't working.
h1 {
string-set: doctitle content();
}
p.head span.last {
content: string(doctitle);
}
This is possible with PDFreactor as well. Just the syntax is a bit different. PDFreactor does not support the content() function for the string-set property with Named Strings. Instead it uses the self value which works like content() or content(text) (see http://www.pdfreactor.com/product/doc_html/index.html#NamedStrings )
There is a second issue. You are setting the content property on the span element itself. Usually in CSS, creating generated content with the content property is actually only allowed for page margin boxes and pseudo elements such as ::before and ::after. This is also how browsers support it. Not sure why this works in Prince.
So basically you just have to make 2 minor adjustments to your style sheet to make this work in PDFreactor:
h1 {
string-set: doctitle self;
}
p.head span.last::before {
content: string(doctitle);
}
I need to be able to change the color of a node in a treepanel. I thought this would be pretty simple, but i am having a heck of a time finding anything.
Thanks
of course, 5 minutes after I ask, I find the solution....
It does work without removing the current class, but I left the line there just because I don't know if it might cause problems later if its not there.
<style>
.RedText a span
{
color: Red;
}
</style>
var currentClass = opNode.attributes.cls;
opNode.ui.removeClass(currentClass);
opNode.ui.addClass('RedText');
opNode.attributes.cls = 'RedText';
this didn't work for me. I wanted to change the style of a double clicked treeNode. Here is my solution with extjs 4.2:
…
CSS
.treeNode-selected {
font-weight: bold;
}
js e.g. itemdblclick event binding
onFilterTreeItemDblClick: function(dataview, record, item, index, e, eOpts) {
var me = this;
this.store.getRootNode().cascadeBy(function(node) {
// if your root node is not visible
if (node.getId() === "root") { return; }
var nodeView = me.getView().getNodeById(node.getId());
var td = nodeView.childNodes[0];
if (node.getId() === record.getId()) {
td.classList.add("treeNode-selected");
} else {
td.classList.remove("treeNode-selected");
}
}
}
I hope this safes somebody some time.