In my electron app, a user can open different windows.
I have the menu initialized when the main window is created like so:
const menuContents = Menu.buildFromTemplate(menuTemplate(mainWindow))
Menu.setApplicationMenu(menuContents)
However, when a user clicks a link and opens a new window, this same menu bar still appears in that window. I would like to change it and/or completely remove it.
How would I do that?
It's possible:
Example for Menus
In Renderer or Main Proccess make two functions with menu templates like this:
main menu
function createMenu(){
var menu = Menu.buildFromTemplate([
{
//your menu items
}
])
Menu.setApplicationMenu(menu);
}
second menu
function createMenuwin(){
var menu = Menu.buildFromTemplate([
{
//your other window menu items
}
])
Menu.setApplicationMenu(menu);
}
when you call the second window : Example open an image
function openIMG(path){
win = new BrowserWindow({
width: 800,
height: 550,
frame: true,
vibrancy: 'medium-light',
});
win.loadFile(path);
createMenuwin();
win.on('close', () =>{
createMenu();
})
}
when the second window is open create an app menu with
createmenuwin()
when the second window is closed call the event:
win.on('close', () =>{})
inside the close event of the second window, call:
createMenu();
Related
I developed an app using Xamarin forms that has side menu see this url.
But I couldn't use this in my current project, so I made my custom component for side menu.
How to implementing feature that hide menu when I tap range out of side menu?
It is hard to give you any help without seeing your code, but generally I tackle this issue by adding a ContentView that covers the screen when ever your menu opens. The menu would be displayed on top of the ContentView. Then you add a TapGestureRecognizer to the ContentView which closes the menu when clicked.
You could add some color to the ContentView but make it opaque so it is see-through, something like this color: #74787878
ContentView backgroundView = new ContentView {
BackgroundColor = Color.FromHex("#74787878"),
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Content = //Your menu
}
backgroundView.GestureRecognizers.Add(new TapGestureRecognizer {
Command = new Command(() => {
//Remove the background and hide the menu
})
});
Let's take a TODO app as example, there is a Main window - A, that will list all of the TODO items and a button 'Add Item'. So when click on the 'Add Item' , it will open up a second window - B, where there is a form for adding item. After the form is submitted, the newly added item will be append to the list in WIndow A.
So the problem here is, how can I update the Item list in WIndow A when when WIndow B form is submitted? I am using react js for the renderer. So, how can react component listen to the changes?
Ok, got the answer.
Turn out we can use webContents to send the message to the desired window. And that message can be listened in the window.
#main.js
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.webContents.send('addingitem','...blahblah balh ');
and in render
ipc.on("addingitem", (event, arg)=>{
//doing the update DOM here.
}
How do you add a navigation menu bar which is positioned on the left side of the home page of a Vcl.js application?
How do you create sub menu items to the top menu navigation bar on the home page?
I am looking at the sample Customer Center example that was provided for the vcl.js framework.
menu handling is done on main.ts at the application level
var item = V.Application.addNavbarItem("HOME2", "icon-home icon-white", () => {
V.Application.navigateToPage("PageHome2", []); //this is the default click event
});
var subitem = b.addMenuItem('submenu');
subitem.onClicked = () => {
//on click
}
I'm using Dojo version 1.6.1. I'm building a menu that has a Dialog dijit as a popup from a PopupMenuItem. This works, however, if the menu is docked on the right-hand side of the application I need the popup to display to the left of the menu. I can't seem to get this to work. If I use another type of widget (like a ColorPalette), this works fine. With popup submenus and a popup ColorPalette, everything opens to the left if the menu is on the right-hand side of the screen, and everything opens to the right if the menu is on the left-hand side of the screen. Dojo just handles this automatically. But with any Dialog widget, even an empty one, it always pops out to the right of the PopupMenuItem regardless of where the menu is on the screen. I thought that perhaps specifying height and width of the div that is the dijit.Dialog would resolve this, but it did not.
Here's a simplified version of the code:
<div data-dojo-type="dijit.Menu" id="toolPalette" style="position:absolute; right:0; top:0; z-index: 999;">
</div>
<script>
// Grab the div for the menu, declared in the HTML above.
var toolPalette = dijit.byId("toolPalette");
// This tool button has a popup
var menuItem1 = new dijit.PopupMenuItem({
id: "menuItem1",
iconClass: "shelterIcon",
popup: new dijit.Dialog()
});
toolPalette.addChild(menuItem1);
// This tool button does not have a popup
var menuItem2 = new dijit.MenuItem({
id: "menuItem2",
iconClass: "shelterIcon"
});
toolPalette.addChild(menuItem2);
toolPalette.startup();
</script>
Any help is greatly appreciated! I've tried everything I can think of.
Way to find your current Cursor location
document.onmouseup = getXY;
var mouseX, mouseY;
function getXY(e) {
mouseX= (e || event).clientX;
mouseY= (e || event).clientY;
if (document.documentElement.scrollTop > 0) {
mouseY= mouseY+ document.documentElement.scrollTop;
}
}
Your Code here .
var myDialog = new dijit.Dialog();
var menuItem1 = new dijit.PopupMenuItem({
id: "menuItem1",
iconClass: "shelterIcon",
popup: myDialog
});
Now apply the X and Y to your Dialog.
dijit.popup.open({
x: mouseX,
y : mouseY,
popup: myDialog
});
I am using menu using dijit.menu and Its work with right click and left click.
How I open the menu on mouse over and close on onmouseout?
dijitActionMenu = new dijit.Menu({
targetNodeIds:[actionMenuId],
leftClickToOpen:"true"
});
Have you tried something like
// Create a new Tooltip
var tip = new dijit.Tooltip({
// Label - the HTML or text to be placed within the Tooltip
label: '<div class="myTipType">This is the content of my Tooltip!</div>',
// Delay before showing the Tooltip (in milliseconds)
showDelay: 250,
// The nodes to attach the Tooltip to
// Can be an array of strings or domNodes
connectId: ["myElement1","myElement2"]
});
More details are here dialogs_tooltips.Even dijit.Menu have onMouseOver even.
onMouseOver Event
I am able to get the dijit/Menu onmouseover.
Create an element which will invoke onmouseover event.
Element
show() will call custom widget which will create menu for you.
E.g.,
show = function() {
var roll = new rollover()
}
And rollover.js will be the custom widget.
From the constructor of it, you can invoke the function and create the menu.
pMenu = new Menu({ class: "rollovermenu", id: "rolloverid" });