I'm looking for a way to separate custom created context menu visually (like background color etc.) from the default menu options like (Show properties, Isolate, etc.)
I've seen this example:
menu.push({
title: 'Show details',
className: 'fa fa-share',
target: [{
title: 'Hub details',
className: 'fa fa-cloud',
target: () => {
this.emit('context.details', {
event, node, type: 'hubs'
})
}
}]
})
but it seems className key doesn't work here. Is there a way to style context menu ?
The class name for your custom icon must be set to a property called icon, not className. Running the following code snippet works as expected:
NOP_VIEWER.registerContextMenuCallback('test', (menu, status) => {
menu.push({
title: 'Test',
icon: 'adsk-icon-first-person',
target: () => { console.log('It works!'); }
});
});
Related
I am new to React-Quill and I am using it to edit an HTML template. I already have custom API which I created using spark post. Now I need to get that HTML file into this editor and then user can edit the template and save it.
When I get the HTML data and pass it into editor, some of the alignments, background colors and image size are different than the original HTML.
Can anyone please provide me a solution how I can improve this?
This is my expected HTML template.
.
.
.
This is what I got from React-Quill.
I want to get the preview as the first image.
This is my current code.
import ReactQuill from 'react-quill';
import { PreviewProps } from 'app/event/emails/emailModal/preview/Preview.types';
import { useLocale } from 'hooks/useLocale/useLocale';
import { Heading, Loader, Typography } from 'ui/atoms';
import 'react-quill/dist/quill.snow.css';
import { useStyles } from './Preview.styles';
export const Preview = ({ title, previewData }: PreviewProps) => {
const classes = useStyles();
const { formatMessage } = useLocale();
if (!previewData) {
return <Loader className={classes.loader} />;
}
const modules = {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
['link', 'image'],
],
};
const formats = [
'header',
'font',
'size',
'bold',
'italic',
'underline',
'strike',
'blockquote',
'list',
'bullet',
'indent',
'link',
'image',
'color',
'size',
'video',
'align',
'background',
'direction',
'code-block',
'code',
];
return (
<>
<div className={classes.container}>
<Heading variant="h4" bold className={classes.title}>
{formatMessage({ id: 'event.emails.preview.title' })}
</Heading>
<Typography variant="h5" className={classes.subtitle}>
{title}
</Typography>
</div>
<ReactQuill theme="snow" modules={modules} formats={formats} value={previewData.html || ''}>
<div className="text-editor" />
</ReactQuill>
</>
);
};
Anyone please help me to get this correctly. Thank you in advance.
How to add listeners to components that are defined within itemTpl? For example, if I have a dataview (Ext.view.View) that is bound to a store, and I have defined itempTpl that includes a button and an image, like:
itemTpl: ['<div class="card" style="padding-left: 32px;">',
'<div><button type="button" class="btn"><span>Button</span></button></div>',
'<div class="img"><img src="https://www.w3schools.com/css/paris.jpg"></div>',
'</div>']
how can I detect that button or image of an item is clicked? I know ho to add listeners to the item, but I would like to detect click event on some inner div or span element of an item.
In addition, I found writing these templates with html very difficult. One of the main advantages of extjs framework is claimed to be exactly hiding html part from the developer. So, I am wondering if there is some better way to display these information with dataview, like including panel or container component as an dataview item.
You can use element delegation:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [{
name: 'src',
type: 'string'
}, {
name: 'caption',
type: 'string'
}]
});
Ext.create('Ext.data.Store', {
id: 'imagesStore',
model: 'Image',
data: [{
src: 'http://www.sencha.com/img/20110215-feat-drawing.png',
caption: 'Drawing & Charts'
}, {
src: 'http://www.sencha.com/img/20110215-feat-data.png',
caption: 'Advanced Data'
}, {
src: 'http://www.sencha.com/img/20110215-feat-html5.png',
caption: 'Overhauled Theme'
}, {
src: 'http://www.sencha.com/img/20110215-feat-perf.png',
caption: 'Performance Tuned'
}]
});
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
itemTpl: new Ext.XTemplate(
'<div class="card" style="padding-left: 32px;">',
'<div><button type="button" class="btn"><span class="btnSpan">Button</span></button></div>',
'<div class="img"><img src="https://www.w3schools.com/css/paris.jpg" class="imgClass"></div>',
'</div>',
),
itemSelector: 'div.card',
emptyText: 'No images available',
listeners: {
itemClick: function (view, record, item, index, e, eOpts) {
console.log(e.target);
const classList = e.target.classList;
if (classList.contains('btn')) {
console.log('btn is clicked');
} else if (classList.contains('btnSpan')) {
console.log('Span in Button is clicked');
} else if (classList.contains('imgClass')) {
console.log('ImgClass is clicked');
}
}
},
renderTo: Ext.getBody(),
});
}
});
I'm using ionic 4 and I want to set custom buttons on ion-select through interfaceOptions
HTML
<ion-item>
<ion-label>Lines</ion-label>
<ion-select multiple="true" [(ngModel)]="SelectedLines" [interfaceOptions]="customAlertOptions">
<ion-select-option [value]="line" *ngFor="let line of Lines">{{linea.Name}}</ion-select-option>
</ion-select>
</ion-item>
TS
customAlertOptions: any = {
buttons: [
{
text: 'Select All',
handler: (blah) => {
console.log('Select All Clicked');
},
{
text: 'No',
handler: (blah) => {
console.log('Confirm Cancel: blah');
}
}, {
text: 'Okay',
handler: () => {
console.log('Confirm Okay');
}
}
]
};
However, only the default buttons are showing (Ok and Cancel)
Docs say it should be possible
https://ionicframework.com/docs/api/select
I can see this has been reported for previous versions of Ionic
https://forum.ionicframework.com/t/custom-button-for-ion-select-through-selectoptions-not-working/157305
Is it possible to make this work on Ionic 4? Is there a workaround?
EDIT: I tried with the PopOver interface with the same results
What you are trying to do isn't possible from what I can see.
The documentation actually only says you can set the buttons text:
ion-select#select-buttons - Ionic Documentation
By default, the alert has two buttons: Cancel and OK. Each button's text can be customized using the cancelText and okText properties.
It doesn't say that the buttons can be customised.
You can pass in the interfaceOptions but its overridden later by the default button set:
https://github.com/ionic-team/ionic/blob/master/core/src/components/select/select.tsx#L339
The code looks like this:
const alertOpts: AlertOptions = {
mode,
...interfaceOptions,
header: interfaceOptions.header ? interfaceOptions.header : labelText,
inputs: this.createAlertInputs(this.childOpts, inputType),
buttons: [
{
text: this.cancelText,
role: 'cancel',
handler: () => {
this.ionCancel.emit();
}
},
{
text: this.okText,
handler: (selectedValues: any) => {
this.value = selectedValues;
}
}
],
cssClass: ['select-alert', interfaceOptions.cssClass,
(this.multiple ? 'multiple-select-alert' : 'single-select-alert')]
};
return alertController.create(alertOpts);
So as you can see the ...interfaceOptions, is passed in at the start, then the buttons are set to the defaults, with the only customisation options being the ok or cancel text.
i am working with AlertController from ionic and i can custom it, just take a look at my screen .
You just need to import AlertController and after you can do something like this for exemple :
home.page.ts
async addAlertHome(adresse: string, lat: string, lon: string) {
const alert = await this.alertController.create({
header: 'Ajouter aux favoris',
message: 'Êtes vous sûr de vouloir ajouter cette adresse à vos favoris ?',
buttons: [
{
text: 'Non',
role: 'cancel',
cssClass: 'secondary'
}, {
text: 'Oui',
handler: () => {
alert.dismiss().then(() => {
this.addFavoriteHome(adresse, lat, lon);
});
console.log('Confirm Okay');
}
}
]
});
await alert.present();
}
And use it where you want on html :
home.page.html
<ion-icon name="heart-empty" (click)="addAlert(location.display_name, location.lat, location.lon)" end>
</ion-icon>
And don't forget on your constructor :
public alertController: AlertController
I want to have an editor, that only allows bulleted "disc" lists. Since I only need a single list type, the button should not be a dropdown. How do I specify, that the list button should be a button, not a dropdown?
Current code:
<script>
tinyMCE.PluginManager.add('stylebuttons', function (editor, url) {
['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function (name) {
editor.addButton("style-" + name, {
tooltip: "Toggle " + name,
text: name.toUpperCase(),
onClick: function () { editor.execCommand('mceToggleFormat', false, name); },
onPostRender: function () {
var self = this, setup = function () {
editor.formatter.formatChanged(name, function (state) {
self.active(state);
});
};
editor.formatter ? setup() : editor.on('init', setup);
}
})
});
});
tinymce.init({
selector: 'textarea',
plugins: "link advlist code stylebuttons",
advlist_bullet_styles: "disc",
target_list: false,
link_title: false,
menubar: false,
statusbar: false,
height: 600,
valid_elements: "p,br,b,i,a,h1,ul,li",
toolbar: 'undo redo | bold, italic | style-h1, bullist | link | code'
});
</script>
I hope someone can explain this to me. I have built a sencha touch 2.2.1 app and converted it to a native android app.
I have a map view that extends Ext.Map as shown below. When I remove that view, the app loads successfully on my mobile. When I integrate the view again, the mobile app first displays a white screen, then it displays the default sencha theme blue screen and stays there. Not even the loading indicator appears.
When the apk was tested in the emulator, everything works fine.
I included this line in index.html before using the map. I included it in the HEAD section. However in the sencha examples provided, it is included in the BODY section. Does it make any difference?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Here are my files:
Controller:
Ext.define('EntityApp.controller.Map', {
extend : 'Ext.app.Controller',
requires : 'Ext.device.Connection',
config : {
refs : {
map : '.mappanel'
},
control : {
map: {
initialize: 'initMap'
}
}
},
initMap: function () {
var me = this;
var gMap = me.getMap();
gMap.on('maprender', this.onMapRender, this, {single : true});
},
onMapRender: function(e) {
if (Ext.device.Connection.isOnline()) {
var latLngCoordinates = new google.maps.LatLng(<value>, <value>);
marker = new google.maps.Marker({
position: latLngCoordinates,
animation: google.maps.Animation.DROP,
map: this.getMap().getMap()
});
this.getMap().getMap().setMapTypeId(google.maps.MapTypeId.ROADMAP);
this.getMap().setMapCenter(latLngCoordinates);
this.getMap().getMap().setZoom(17);
}
}
});
View:
Ext.define('EntityApp.view.Map', {
extend: 'Ext.Map',
xtype: 'mappanel',
config: {
layout: 'fit',
iconCls: 'icon-location',
title: 'Location',
useCurrentLocation: false,
styleHtmlContent: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Location'
},
mapOptions: {
center: !(window.google || {}).maps ? null : new google.maps.LatLng(<value>, <value>),
zoom: 17
}
},
constructor: function(config) {
this.callParent(config);
if (!(window.google || {}).maps) {
this.setHtml('<p id="maperror">Internet Connection Required!</p>');
}
}
});
Even I'm also getting same error, I just add
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
tag after
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
in my index.html. It works fine. Try this.
I managed to solve the above by overriding the Ext.Map with my own data.
I also assigned a custom xtype called mymap and now I just do xtype:'mymap' and a map component loads with my custom data, as shown below:
Ext.define('App.view.Map', {
extend: 'Ext.Panel',
xtype: 'mappanel',
config: {
layout: 'fit',
iconCls: 'icon-location',
title: 'Location',
useCurrentLocation: false,
styleHtmlContent: true,
items: [
{ docked: 'top', xtype: 'titlebar', title: 'Location' },
{ xtype: 'mymap' }
]
}
});
It seems that sencha processes the views data before the script tags in index.html. Correct me if I am wrong...