In CKeditor4, I have tried to show a notification when the dialog is opened at first time but the notification is displayed behind the dialog box. Is-there a way to show the notification at foreground ?
This is my code in the dialog part :
CKEDITOR.dialog.add( 'MypluginDialog', function( editor ) {
return {
title: 'my plugin title,
minWidth: 400,
minHeight: 200,
contents:
[
{
id: 'tab-basic',
label: 'Dialog settings',
elements:
[
{
type: 'text',
id: 'title',
label: 'My title',
default: ''
}
]
}
],
onOk: function() {
},
onShow: function() {
var notification1 = new CKEDITOR.plugins.notification( editor, {
message: 'Error occurred',
type: 'warning'
} );
notification1.show();
}
};
});
So how to display the notification not behind the dialog box ?
Thanks by advance
Notifications can be displayed in front of any dialog after adjusting their z-index CSS property, for example (!important needed since it has inline z-index style already):
.cke_notifications_area {
z-index: 10050 !important;
}
Keep in mind that dialogs and notifications z-index value depends on CKEditor 4 baseFloatZIndex configuration option (which is 10000 by default) so if this configuration option was changed you need to adjust CSS accordingly.
Please also keep in mind that Notification plugin is not really intended to be displayed over dialogs since it works in a way that it's positioned related to editor editable area (and dialog is not) and may display on the bottom part of a dialog or some more unexpected places (depending on editor position).
See this codepen demo.
My helper window is implemented like that:
updWindow = new BrowserWindow({
width: 400,
height: 200,
resizable: false,
show: false,
center: true,
maximizable: false,
minimizable: false,
title: 'Apdate Available'
});
updWindow.on('close', function () {
});
updWindow.loadURL(url.format({
pathname: path.join(__dirname, 'updateAvailable.html'),
protocol: 'file:',
slashes: true
}));
updWindow.setMenuBarVisibility(false);
When I click "x" button at window header the window will be closed and destroyed. So I will not be able to open it again using updWindow variable. Is there a way to keep window object for new opennings without reinitializations? I still want to use "x" button for this purpose.
My app is targeted to Mac OS.
You can use the function preventDefault on the event Electron will hand your handler over, i.e. like this:
updWindow.on("close", (evt) => {
evt.preventDefault(); // This will cancel the close
updWindow.hide();
});
This is mentioned in the Electron documentation, namely here.
Using this solution, you will later be able to un-hide the window by calling updWindow.show();.
How to change the direction of the animation in StackNavigator?
Current Behavior
When user goes to another screen, the screen flies from bottom to top.
Expected Behavior
When user goes to another screen, the screen flies from right to left. (Like Facebook or Instagram!)
StackNavigator Code
export default StackNavigator ({
Main: {
screen: MainScreen,
},
...
}, {
navigationOptions: ({navigation, screenProps}) => ({
tabBarOnPress: blahblaj
}),
lazy: true
// I guess we can do something here
});
If we can set the animation time, it will be even better! Currently it looks like the screen flies from middle of the screen to top. I want natural animation like Facebook or Instagram :)
Thanks in advance,
For react navigation > 5.0:
import {
CardStyleInterpolators,
createStackNavigator,
} from '#react-navigation/stack';
const Stack = createStackNavigator();
export default () => (
<Stack.Navigator
screenOptions={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
}}
>
<Stack.Screen name="Screen 1" component={ScreenComponent1} />
<Stack.Screen name="Screen 2" component={ScreenComponent2} />
</Stack.Navigator>
);
You may also want to use headerStyleInterpolator: HeaderStyleInterpolators.forUIKit
More info here: https://reactnavigation.org/docs/stack-navigator/#pre-made-configs
For react navigation < 5.0
On iOS it's standard behavior. Android requires a little bit of configuration. There are two options you can use to set screen transitions: mode and transitionConfig. In this case transitionConfig will work:
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
// this path can be different depending on react-navigation version, this one is for #1.0.0-beta.15
export default StackNavigator ({
Main: {
screen: MainScreen,
},
...
}, {
transitionConfig: () => ({
screenInterpolator: CardStackStyleInterpolator.forHorizontal,
}),
})
We use CardStackStyleInterpolator from react-navigation source, but you can provide custom transition if you want, here is how to make one or here or this article.
mode is more for default behavior:
export default StackNavigator ({
Main: {
screen: MainScreen,
},
...
}, {
mode: 'card',
navigationOptions: ({navigation, screenProps}) => ({
tabBarOnPress: blahblaj
}),
lazy: true
});
mode can have only two values:
card - Use the standard iOS (right to left) and Android (bottom to
top) screen transitions. This is the default.
modal - Make the screens slide in from the bottom which is a common
iOS pattern. Only works on iOS, has no effect on Android.
For react navigation >= 5.0:
import {
CardStyleInterpolators,
createStackNavigator,
} from '#react-navigation/stack';
const Stack = createStackNavigator();
export default () => (
<Stack.Navigator
screenOptions={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
}}
>
<Stack.Screen name="Screen 1" component={ScreenComponent1} />
<Stack.Screen name="Screen 2" component={ScreenComponent2} />
</Stack.Navigator>
);
You may also want to use headerStyleInterpolator: HeaderStyleInterpolators.forUIKit
More info here: https://reactnavigation.org/docs/stack-navigator/#pre-made-configs
Updated answer:
import ReactNavigation from "react-navigation";
createStackNavigator({...},{
transitionConfig: () =>
ReactNavigation.StackViewTransitionConfigs.SlideFromRightIOS
})
Here,I just post my answer so that you can change the direction of the animation! That's all! The answer you have accepted is just default!
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
export default StackNavigator ({
Main: {
screen: MainScreen,
},
...
}, {
transitionConfig: () => ({
screenInterpolator: CardStackStyleInterpolator.forHorizontal,
}),
});
In this way, the screen transitions will become right to left on both two platforms!
What you need to pay more attention to is you can set any screen transitions whatever you want by using transitionConfig props!
The solution is very simple. In React navigation 4.x you can do like this
import { createAppContainer } from 'react-navigation'
import { createStackNavigator, StackViewTransitionConfigs } from 'react-navigation-stack';
const Navigation = createStackNavigator({
screenA: ComponentA,
screenB: ComponentB,
}, {
mode: 'card',
transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS,
}
export const AppNavigation = createAppContainer(Navigation)
Note: You can achieve like this transition in previous react navigation versions also, but you have to change the import
animation​
How the screen should animate when pushed or popped.
Supported values:
default: use the platform default animation
fade: fade screen in or out
fade_from_bottom: fade the new screen from bottom
flip: flip the screen, requires stackPresentation: "modal" (iOS only)
simple_push: default animation, but without shadow and native header transition (iOS only, uses default animation on Android)
slide_from_bottom: slide in the new screen from bottom
slide_from_right: slide in the new screen from right (Android only, uses default animation on iOS)
slide_from_left: slide in the new screen from left (Android only, uses default animation on iOS)
none: don't animate the screen
Only supported on Android and iOS.
My placeholder string is partially visible in angular js.
var select2BaseOpts = {
openOnEnter: true,
allowClear: true,
closeOnSelect: false,
dropdownAutoWidth: true,
width: '100%'
};
If I dont include
dropdownAutoWidth: true,
width: '100%'
then the dropdown list width goes out of the current window but placeholder string is fully visible. If I include them, then dropdown list width is proper but placeholder string in not completely visible.
we are using the Flowplayer (Documentation) in one of our webprojects.
I want to change (or hide) the canvas after the video has started. I can hook it to the clip-event "onStart", but I can't access the canvas object/plugin.
I already tried:
$f('playerid').getPlugin('canvas').hide()
$f('playerid').getCanvas().hide()
My player settings are:
var player_settings = {
key: '...',
logo: {
url: '',
fullscreenOnly: false,
displayTime: 0
},
clip: {
url: '...',
autoPlay: false,
scaling: 'orig'
},
canvas:{
background: 'url(...) center center no-repeat',
backgroundGradient: 'none'
}
};
But nothing seems to work. Any ideas?
getPlugin('canvas') is definitely a right way to get the canvas handler, and you can manipulate its appearance via call like:
getPlugin('canvas').css('', '');
In your case to hide the canvas, may be you can try getPlugin("canvas").css({backgroundImage: ""});.
See more ref in this post