If I have a vue-router 'router-view' element defined like this:
<router-view transition="slide">
Is there a way to change the transition to a 'fade' when a specific route is called?
Use a dynamic binding fopr transition:
<router-view :transition="$route.transition">
And set the data of transition from your route data
router.map({
'/specialroute': {
component: { ... },
transition: 'fade'
}
})
Related
Having two appBars components in the same page is a good approach (one as header and the other one as footer)? Besides, I am using the MUI createTheme to override some styles. I am doing this to override the appBar component.
components: { ...
MuiAppBar: {
styleOverrides: {
root: {
minHeight: '4.375rem',
backgroundColor: appColors.aqua600,
},
},
}, ...
This works fine, but as was wondering how could I override the style of an AppBar that is renders as 'header' and style the other appBar that is rendered as 'footer'
The component usage:
<AppBar
component="header | footer" ...
</AppBar>
I know that can be easily done with CSS, but I was wondering if this can be done using the createTheme from MUI?
It can be done by overriding styles based on props using ownerState.
Overrides based on props
You can pass a callback as a value in each slot of the component's styleOverrides to apply styles based on props.
The ownerState prop is a combination of public props that you pass to the component + internal state of the component.
You can check more on docs.
So, the custom theme for MuiAppBar should be something like this:
components: {
MuiAppBar: {
styleOverrides: {
root: ({ ownerState }) => {
return {
...(ownerState.component === "header" && {
backgroundColor: "#202020"
})
};
}
}
}
}
We have multiple charts with zoom. Is there a way to link all this charts so they always have the same zoom factor when the user zoom in one of the charts?
When having multiple grids in the same chart is not a possibility, I use this trick to do the job:
myChart.on('datazoom', function (evt) {
var zoom = myChart.getOption().dataZoom[0];
myOtherChart.dispatchAction({
type: 'dataZoom',
dataZoomIndex: 0,
startValue: zoom.startValue,
endValue: zoom.endValue
});
});
Both charts have dataZoom, in my case I hide the one in myOtherChart.
If you've got more events to track, creating the action can be simplified by letting echarts create it:
["datazoom", "legendselectchanged", /* more events*/].forEach((eventType: string) => {
this.chartInstance1.on(eventType, (event) => {
// Automatically create an action from the event
let newEvent = this.chartInstance1.makeActionFromEvent(event);
// Dispatch it directly
this.chartInstance2.dispatchAction(newEvent);
});
})
For everyone who wants to go further, also synchronizing mouse, legend and magic events, its easier to use the connect function.
Template:
// chart 1
<div echarts (chartInit)="onChartInit($event)"></div>
// chart 2
<div echarts (chartInit)="onChartInit($event)"></div>
Typescript:
import { connect, ECharts } from "echarts";
// ...
onChartInit(chart: ECharts) {
this.charts.push(chart);
if (this.charts.length === 2)
// This will do the magic out of the box
connect([charts[0], charts[1]]);
}
The control sap.m.MessagePopover has an attribute _oPopover (containing sap.m.Popover inside).
Using this attribute, I could set the popover width:
messagePopover._oPopover.setContentWidth("450px");
However, as SAP attributes starting from _ should not be used, does anybody know a cleaner way?
As of UI5 version 1.46, a more flexible control sap.m.MessageView can be used instead of the old sap.m.MessagePopover.
There is no need to access internal properties or apply custom CSS style classes to manipulate the width as you can put MessageView anywhere you want (Still, Fiori Guideline recommends to use it only within a responsive popover or a dialog).
const popover = new ResponsivePopover({
contentWidth: "450px",
contentHeight: "450px",
content: [
/*myMessageView*/
],
});
// ...
popover.openBy(...);
Compared to MessagePopover, MessageView can group items and more.
Internally, MessagePopover uses MessageView too.
Another solution would be to use CSS class. However, there is a catch. As you can see from below generated DOM of the message popover, inline styling has been used :( .
Only way to override inline-style is by using !important in CSS which is again not recommended approach. However, considering inline CSS has been used, I would go with using !important keyword. Below is the working code:
XML Code ( for adding Class):
<MessagePopover id='myMP' class='myPopoverClass'>
<items>
<MessagePopoverItem title='Title' subTitle='SubTitle'></MessagePopoverItem>
</items>
</MessagePopover>
CSS:
.myPopoverClass {
width:100rem;
}
.myPopoverClass .sapMPopoverCont {
width:100% !important;
}
You can play around with how much width you need for message Popover.
EDIT: This is from the source code:
MessagePopover.prototype.init = function () {
var that = this;
var oPopupControl;
this._oResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.m");
this._oPopover = new ResponsivePopover(this.getId() + "-messagePopover", {
showHeader: false,
contentWidth: "440px",
placement: this.getPlacement(),
showCloseButton: false,
modal: false,
afterOpen: function (oEvent) {
that.fireAfterOpen({openBy: oEvent.getParameter("openBy")});
},
afterClose: function (oEvent) {
that._navContainer.backToTop();
that.fireAfterClose({openBy: oEvent.getParameter("openBy")});
},
beforeOpen: function (oEvent) {
that.fireBeforeOpen({openBy: oEvent.getParameter("openBy")});
},
beforeClose: function (oEvent) {
that.fireBeforeClose({openBy: oEvent.getParameter("openBy")});
}
}).addStyleClass(CSS_CLASS);
Is it possible to disable the popup backfade?
I tried this:
My popup controller:
var popupInvalid = $ionicPopup.alert({
templateUrl: 'templates/popup-template-invalid.html',
cssClass: 'success-popup',
scope: $scope
})
Sass:
.success-popup{
.backdrop {
opacity: 0 !important;
}
}
But I did not succeed
Thanks
Unfortunately the backdrop is a sibling of .popup-container, which then contains your popup. So the only option you have is to globally modify the .backdrop class, e.g.:
.backdrop
{
background-color: transparent;
}
Check this example: http://play.ionic.io/app/8f14ab72d922
Unfortunately this influences all other popups in your application as well.
I would like to know how to add itemmouseup listener of an chart's series into controller?
My controller's init method is as follows :
init: function() {
this.control({
'candidateDistribution > treepanel' : {
itemclick: this.treeStoreItemClickHandler
},
'#candidateDistributionButton' : {
click: this.candidateDistributionButton_ClickHandler
},
'competitorAnalysis #slaWiseEmprDistriGrid series': {
itemmouseup: this.sLA_ItemMouseUpEventHandler
}
});
},
In this case, itemmouseup event handler of organizationAnalysis #sLAWiseEmprDistriGrid series is not working but event handlers for rest of the things are working fine.
I tried to change Component Query to competitorAnalysis > #slaWiseEmprDistriGrid series or to competitorAnalysis > #slaWiseEmprDistriGrid[series] but its not working.
I had to add this itemmouseup event handler into code of chart's series which is working just fine but I think its breaking MVC pattern.
Code for my chart is as follows :
xtype: 'chart',
itemId: 'slaWiseEmprDistriGrid',
store: 'SLAWiseCompetitorDistribution',
flex: 2,
animate: true,
legend: {
position: 'right'
},
insetPadding: 25,
series: [{
type: 'pie',
field: 'empCount',
showInLegend: true,
listeners: {
'itemmouseup': function(item) {
var record = item.storeItem;
var slaWiseEmpListStore = Ext.data.StoreManager.lookup('SLAEmployerList');
slaWiseEmpListStore.proxy.extraParams['paramFirstDimensionValue']= record.get('name');
serviceLineWiseEmpListStore.load();
}
}
}] // end of series configuration
So I would like to know why this itemmouseup event handler is not working in controller?
Also in future I want to convert this app into web desktop like application, but I am not able to find information/documentation/tutorial on extjs documentation site. Where can I get tutorial/documentation about developing web desktop application?
Thanks in Advance !
You could setup this event in controller in 2 steps.
Add listener to your chart render event
In this listener setup your series events.
Regarding desktop application - I only can suggest looking into this example: http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/desktop/desktop.html