I would like to change the standard "pen" icon of the
StandardListItem of type DetailAndActive
. Is there a way to do so?
my XML so far:
<List
id="master1List"
items="{/path}"
mode="{device>/listMode}"
select="onSelect"
itemPress="showDetail"
growing="true"
growingScrollToLoad="true">
<items>
<StandardListItem
type="DetailAndActive"
activeIcon="sap-icon://message-information"
id="master1ListItem"
press="onSelect"
title="{title}">
</StandardListItem>
</items>
</List>
As far as I know there are only properties "icon" (which I do not need) and "activeIcon" (which I set but which is also not shown on itemPress/tab). I thought I might change it via css, but it is set in a data-attribute (Icon font, not a uri I could overwrite) and then applied:
.sapUiIcon:before {
content: attr(data-sap-ui-icon-content);
...
Thanks..
[EDIT:]
I accepted the below answer as correct because it works. BUT as you can read in my comment, I'd like to make it possible to accept Controls by using the aggregations metadata like described here:
metadata: {
aggregations: {
"Button" : {type : "sap.m.Button", multiple : false, visibility: "public"}
},
defaultAggregation: "Button"
},
This works so far that that I am now allowed to add a Button control to the ListItem in my XML view, but it is not rendered :-) Any ideas what I miss here additionally?
The icon is hardcoded deep in the control. I found I can extend the StandardListItem to get the result you want like this.
sap.m.StandardListItem.extend('my.StandardListItem', {
renderer: {},
constructor: function(sId, mProperties) {
sap.m.StandardListItem.prototype.constructor.apply(this, arguments);
var sURI = sap.ui.core.IconPool.getIconURI("action");
this._detailIcon =
new sap.ui.core.Icon({
src:sURI})
.setParent(this, null, true)
.addStyleClass("sapMLIBIconDet");
}
});
There is a working example at http://jsbin.com/tuqufe/1/edit?js,output
The bad news is that in the next release (1.28.?) the way that this is done changes significantly so you will need to redo the extended control.
[EDIT:] Sorry I forgot about this one. I just built a quick sample with the OpenUI5 V1.30 beta library. Now the key code looks like this...
sap.m.StandardListItem.extend('my.StandardListItem', {
metadata: {
properties: {
"detailIcon": "string"
}
},
renderer: {},
setDetailIcon: function(icon) {
this.DetailIconURI = sap.ui.core.IconPool.getIconURI(icon);
}
});
There is a sample at http://jsbin.com/bayeje/1/edit?js,output
Related
I'm developing a new tab replacement extension for Google Chrome and I'd like to allow the user to customize the background, to do so I'm using the storage.sync API as suggested by this page.
The problem is that the style changes are applied asynchronously, so the default background (white) is briefly used during the page load resulting in unpleasing flashes.
Possible (unsatisfying) solutions are:
do not allow to change the background;
hard code a black background in the CSS (and move the problem to custom light backgrounds);
use a CSS transition (still super-ugly).
What could be an alternative approach?
Follows a minimal example.
manifest.json
{
"manifest_version": 2,
"name": "Dummy",
"version": "0.1.0",
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"permissions": [
"storage"
]
}
newtab.html
<script src="/newtab.js"></script>
newtab.js
chrome.storage.sync.get({background: 'black'}, ({background}) => {
document.body.style.background = background;
});
I come up with a reasonable solution. Basically since the localStorage API is synchronous we can use it as a cache for storage.sync.
Something like this:
newtab.js
// use the value from cache
document.body.style.background = localStorage.getItem('background') || 'black';
// update the cache if the value changes from the outside (will be used the next time)
chrome.storage.sync.get({background: 'black'}, ({background}) => {
localStorage.setItem('background', background);
});
// this represents the user changing the option
function setBackground(background) {
// save to storage.sync
chrome.storage.sync.set({background}, () => {
// TODO handle error
// update the cache
localStorage.setItem('background', background);
});
}
This doesn't work 100% of the times but neither do the simple:
document.body.style.background = 'black';
So it's good enough.¹
¹ In the real extension I change the CSS variables directly and I obtain much better results than setting the element style.
I am using related Shield UI ASP.NET Charts on a web page. What I need is to be able to provide the user the option to choose whether to show the dataPointText or not. For that purpose I have put a checkbox below the second grid and am trying to use the following code:
detailChartElement.shieldChart($.extend(initialOptions, {
primaryHeader: {
text: headerText
},
if (document.getElementById("CheckBox1").checked == true){
seriesSettings: {
line: {
dataPointText: {
enabled: true,
borderColor: 'red',
borderWidth:3
}
}
},
},
but when I put the code and none of the grids on the page shows. I checked quite carefully the code but don’t see any missed out commas or anything that should prevent it from working.
The mistake you are making is not syntactical but conceptual. Within the code that creates the chart:
detailChartElement.shieldChart($.extend(initialOptions, {
}));
you may place nothing but the properties of the Shield UI ASP.NET chart and their properties. You may not have any logical checks like IF(). However you may have additional variables and their values.
With this in mind you could use the following workaround:
In the function you use to recreate the chart you place the following code:
var showlabels = document.getElementById("CheckBox1").checked;
Than, you put the series settings code in the chart creation routine:
seriesSettings: {
line: {
dataPointText: {
enabled: showlabels,
borderColor: 'red',
borderWidth:bordersize
}
}
},
The properties and values will be always there, however they will be enabled only when the checkbox is checked.
I have just recently made a move from Adobe Flex to Sencha ExtJs.
I can't seem to find an equivalent of data binding in ExtJs where a form value depends on another form value.
e.g. I am creating an SMS window where i show the count of characters entered in a message field.
This is how i am doing in ExtJS. Also, the fiddle - http://jsfiddle.net/xxB4J/
Ext.create('Ext.window.Window',{
items: [
{
xtype: 'textarea',
fieldLabel: 'Message',
listeners: {
change: function() {
var countLabel = this.up('window').down('#lbCharacterCount');
countLabel.setText(this.getValue().length + '/160 Characters');
}
}
},
{
xtype: 'label',
itemId: 'lbCharacterCount',
text: '0/160 Characters'
}
]
}).show();
Now, in Flex this was as simple as doing
<mx:Text text="{message.text.length.toString()}/160 Characters}" />
So, just want to know if there is some sort of similar data binding in ExtJS? or the way i am doing is the only way of doing it?
Thank you
Maybe, you could use a textarea configuration:
Sencha:
maxLength and maxLengthText
or is the control field editable ?
I'm wondering if it's possible to add custom formatting to redactor? I created a custom button, and I'm able to change the formatting of text, but only using certain elements:
['p', 'blockquote', 'pre', 'h3', 'h4', 'h5']
However, I'm not able to add any of the following:
['small', 'figcaption']
I followed the Redactor docs to set up the button, and here is my function that is being called:
var selected_html = $('#redactor_content').getSelected();
$('#redactor_content').execCommand('formatblock', '<small>');
I also tried adding elements to my 'formattingTags' array, but it didn't seem to have any affect.
formattingTags: ['p', 'blockquote', 'small', 'pre', 'h3', 'h4']
Thank you in advance.
I think I figured it out.
I added the following to my button function:
var $selected_html = $('#redactor_content').getSelected();
$('#redactor_content').execCommand('inserthtml', '<small>' + $selected_html + '</small>');
However, this is not perfect as it does not replace the parent tag, and you can keep adding elements within elements.
Something like that:
redactorOptionsDefaults = {
buttonsAdd: {},
activeButtonsAdd: {},
buttonsCustom: {}
};
redactorOptionsDefaults.buttonsCustom.small = {
title: 'small Header',
callback: function () {
this.formatBlocks('small');
}
}
redactorOptionsDefaults.activeButtonsAdd.small = 'small';
It formatting block, highlight button if needed while selecting block. But don't remove style while repeat button click
The Mystique theme includes two files that need to be updated to allow a custom styles section. The addition of a "small caps" style for use in the correct formatting of law journal citations. What is the steps to add a "small caps" style for the TinyMCE Advanced editor to use the style in the "Styles" dropdown tool in WordPress.
Using TinyMCE 4, the following custom setup function will add a SmallCaps control:
setup: function (ed) {
//Adds smallcaps button to the toolbar
ed.addButton('smallcaps', {
title: 'Smallcaps',
icon: 'forecolor',
onclick: function (evt) {
ed.focus();
ed.undoManager.beforeChange();//Preserve highlighted area for undo
ed.formatter.toggle('smallcaps');
ed.undoManager.add();//Add an undo point
},
onPostRender: function () {
var ctrl = this;
ed.on('NodeChange', function (e) {
//Set the state of the smallcaps button to match the state of the selected text.
ctrl.active(ed.formatter.match('smallcaps'));
});
}
});
}
The answer given by Goetz is not complete, since TinyMCE does not know about your "user defined format" if you don't define it explicitly. Maybe it did some years ago, but version 4.7.x doesn't seem to do so. Add the code below in addition to his answer (it maybe needs to be bevore setup):
formats: {
smallcaps: {
inline: 'span',
styles: {
'font-variant': 'small-caps'
},
attributes: {
title: 'smallcaps'
}
},
},
toolbar: 'smallcaps_button'
I prefer naming the formats and buttons slightly differently by suffixes like _button or _format, but that actually should not be a problem. Hence it avoids forgetting about to correctly define all needed parts here (format, toolbar, ed.addButton()). So, my toolbar contains the button smallcaps_button and the function is ed.addButton('smallcaps_button')
That's it.