I'm new to Electron, and have basic knowledge of JavaScript, how does one completely remove the menu bar from Electron apps?
When you want to make a BrowserWindow you could make it FrameLess by -> frame: false
mainWindow = new BrowserWindow({width: 800, height: 600, frame: false});
you could try this function: setMenuBarVisibility
refer to: https://www.electronjs.org/docs/latest/api/browser-window#winsetmenubarvisibilityvisible-windows-linux
Related
I also looked for solutions to other problems, but they did not turn out as I wanted. How can I delete the top bar of the window, as I marked in the photo?
[photo]
native APIs directly supports frameless windows. You need to pass the frame option false while creating new window. Here is the example.
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600, frame: false })
win.show()
You can read more at official docs
This is my createWindow function that I pass to app.on('ready')
function createWindow () {
const startUrl = process.env.ELECTRON_START_URL || url.format({
pathname: path.join(__dirname, '../index.html'),
protocol: 'file:',
slashes: true,
})
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
devTools: true,
preload: path.join(__dirname, 'preload.js')
},
})
mainWindow.loadURL(startUrl)
mainWindow.removeMenu() // <----------------- HERE!
mainWindow.on('closed', function () {
mainWindow = null
})
}
Pretty boiler plate the issue is that the mainWindow.removeMenu() does not work and it leaves it in places.
I've also tried setMenu(null) and the menu is still there.
Is the menu only removed in production, or am I doing something wrong?
Edit
I've also tried mainWindow.setMenuBarVisibility(false), and it does not work as well.
Chances are that you are still using an old version of Electron. There has been a bug preventing the removal of the menu bar for a long time. It has been fixed in Electron 7.1.5:
Release Notes for v7.1.5
Fixes
Fixed window menu unable to hide on startup. #21449
So, mainWindow.removeMenu() should work fine once you upgrade Electron to its latest version, or at least a version greater than or equal to 7.1.5.
I've got an electron app, below is the main.js file:
var app = require('electron').app;
var BrowserWindow = require('electron').BrowserWindow;
app.on('ready', function() {
mainWindow = new BrowserWindow({
height: 715,
width: 1200,
minWidth: 600,
minHeight: 200,
center: true
});
mainWindow.loadURL('file://' + __dirname + '/index.html');
});
As you can see, the width and height are specified. What I want is for the app to open, but take up all of the available screen (but NOT to be in full screen, such that the dock and tool bar of the OS are hidden).
In simple CSS this is done by using
width:100%;
height:100%;
I want to be able to reproduce this in my electron app, although cannot seem to find any details on how to do it
Note: fullscreen: true is not what I am looking for, as that makes the app open so that the dock and toolbar are hidden
Can anyone help?
use this!
win = new BrowserWindow({show: false});
win.maximize();
win.show();
Call mainWindow.maximize() to maximize the window after you create it.
Use this:
const electron = require('electron')
const { app, BrowserWindow } = electron
let win
app.on('ready', () => {
const {width, height} = electron.screen.getPrimaryDisplay().workAreaSize
win = new BrowserWindow({width, height})
win.loadURL('https://github.com')
})
try this code after your mainWindow declaration
mainWindow.once('ready-to-show', () => {
mainWindow.maximize()
})
It worked for me
The solution is simple, only add titleBarStyle: 'hidden' to declaration of your window.
const mainWindow = new BrowserWindow({
movable: false,
resizable: false,
maximizable: false,
minimizable: false,
titleBarStyle: 'hidden', // watch this line
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
DevTools: false,
}
});
note that I only have tested on Windows OS and it can be change in other OS like Mac.
I have a function that is being called once the user hover the window. Is it possible to change the width of the window? this is my function:
function resize() {
console.log('resize');
}
Yes, it's possible to get access to the renderers BrowserWindow API. Simply include the remote module and get the current window, this will allow you to do everything you can from the main process.
Example:
let { remote } = require('electron')
let win = remote.getCurrentWindow()
// Access to the renderers BrowserWindow API
win.setBounds({
width: 1000
})
win.getBounds()
// Object {x: 240, y: 192, width: 800, height: 600}
Reference: BrowserWindow API documentation
I am designing a flashcard app using titanium appcelerator, the final aim is to use a scrollable view to display each card in the 'pack' and then on tapping a single card (i.e. the card in view) this should rotate about it's axis (i.e. flip over) to reveal the reverse.
You can see from the diagram below what I am hoping to achieve.
Unfortunately when tap one of the panels, instead of it's child view animating, instead the last child in the scrollableview animates.
I understand this is something to do with the fact that I am assigning variables in a loop but if someone can look at my code and tell me what I am doing wrong that would be great.
In JQuery it would look something like this
$(FrontView).click(function(){
$(this).parent().flip() //how do I access $(this) and $(this).parent() in Appcelerator?
});
Here is my appcelerator code:
while(rows.isValidRow()){
var FrontView = Ti.UI.createView({
backgroundImage: '/global/card_bg.png',
width: 295,
height:297
});
var BackView = Ti.UI.createView({
backgroundImage: '/global/card_bg.png',
width: 295,
height:297
});
var ControlView = Titanium.UI.createView({
backgroundColor:"#333",
bubbleParent : false,
width: 295,
height:297,
top : 100
});
FrontView.addEventListener('singletap', function() {
Ti.API.info('singletap');
ControlView.animate({view:BackView,transition:Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT});
});
BackView.addEventListener('singletap', function() {
Ti.API.info('singletap');
ControlView.animate({view:FrontView,transition:Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT});
});
$.scrollable_view.addView(ControlView);
ControlView.add(BackView);
ControlView.add(FrontView);
rows.next();
} //endwhile
Can anybody help?
If you put a return variable in your event callbacks, you can get access to the source of the tap. Try this and see if it works:
FrontView.addEventListener('singletap', function(e) {
Ti.API.info('singletap');
e.source.animate({view:BackView,transition:Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT});
});
BackView.addEventListener('singletap', function(e) {
Ti.API.info('singletap');
e.source.animate({view:FrontView,transition:Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT});
});
I found out that it works when you flip the card in the EventListener of your Scrollable View.
Check this out: https://gist.github.com/4683264