cristian006 / frameless-titlebar Goto Github PK

When I change the window state from normal to maximized the middle icon (maximize) on title bar didn't changes. I mean that RestoreIcon component should replace MaximizeIcon if state is maximized. It's good for the TitleBar component if it will have a boolean prop "isMaximized", where we can put current window state.

Here is the error log:

yarn run v1.13.0
$ webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js
The setup option is deprecated and will be removed in v3. Please update your config to use before
Project is running at http://0.0.0.0:8080/
webpack output is served from /
Content not from webpack is served from D:\workspaces-test\frameless-titlebar-master\example\dist

Hash: 1caf05bacc4337ba547c
Version: webpack 3.12.0
Time: 861ms
Asset Size Chunks Chunk Names
bundle.js 301 kB 0 [emitted] [big] main
bundle.js.map 347 kB 0 [emitted] main
index.html 183 bytes [emitted]
[0] (webpack)/hot/log.js 1.04 kB {0} [built]
[2] (webpack)/hot/emitter.js 77 bytes {0} [built]
[3] multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/index.js 52 bytes {0} [built]
[4] (webpack)-dev-server/client?http://0.0.0.0:8080 7.93 kB {0} [built]
[5] external "url" 42 bytes {0} [not cacheable]
[6] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[8] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
[9] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
[11] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
[12] ./node_modules/ansi-html/index.js 4.26 kB {0} [built]
[13] ./node_modules/html-entities/index.js 231 bytes {0} [built]
[16] (webpack)/hot nonrecursive ^./log$ 170 bytes {0} [built]
[18] (webpack)/hot/dev-server.js 1.61 kB {0} [built]
[19] (webpack)/hot/log-apply-result.js 1.31 kB {0} [built]
[20] ./src/index.js 1.64 kB {0} [not cacheable] [built] [failed] [1 error]
+ 6 hidden modules

ERROR in ./src/index.js
Module build failed: Error: Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)

After upgrading to 2.1.3, I can no longer unmaximise the window in an Electron app. This worked in version 1.0.8.

To Reproduce

1. Instantiate a TitleBar with prop: onMaximize={ () => remote.getCurrentWindow().maximize() }
2. Run app and click on the Maximise button.
3. Click Maximise button again.
4. Nothing happens.

Expected behavior
After maximising, the button should change appearance, and clicking again should revert the window to its previous dimensions.

I could of course write my own logic in the onMaximize handler, but I still wouldn't get the right icon shown in the maximised state.

Desktop (please complete the following information):

• OS: Windows 10

So I haven't done anything, no configuration, not even use the Component - just import the package, and i get an error from React saying fs.existsSync does not exist. And it points to electron's install script!

TypeError: fs.existsSync is not a function
C:/path/to/react/and/electron/project/node_modules/electron/index.js:8

Everything is up to date, including windows, and I have no Idea what's wrong!

If specifying accelerators in a menu template using the cross-platform syntax, i.e.

accelerator: "CmdOrCtrl+Z"

these strings get printed verbatim in the menus. However, in the native menus, they get translated to the appropriate shortcut for the platform, i.e. for Windows:

Ctrl+Z

And for Mac:

⌘Z

Describe the bug
I don't know why this ResizeHandle exists in the first place, but on Windows the two Resize handles are making is much harder to drag and resize.

Normally on Windows you can grab a window anyone on the title bar and start dragging. One common action is to drag the window to the top of the screen and it will turn into a full screen window. The inverse is also common, grab a window by the title bar and drag it down to pop it out of full screen back into windowed mode.

Actual Result:

If a Windows user has an electron app with frameless-titlebar in full screen and moves their mouse cursor all the way up, and click hold to start dragging, he will find out he can't drag this app.

Expected Result:

If a Windows user has an electron app with frameless-titlebar in full screen and moves their mouse cursor all the way up, and click hold to start dragging, he should be able to drag this app anywhere he likes.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Signal Desktop app https://signal.org/download/windows/
• Version Signal Desktop app https://signal.org/download/windows/

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Whenever I double click on the menu, it will lead to this error. I tried to hide the menu as solution, however there is a small div portion of the menu will always be there (beside the app title), when you double click there will get this error as well. The frameless-titlebar example app don't have this issue though.

I'm looking for MainMenuBar component only, and your MenuBar looks very solid from all other I can find on gihub.

Can you expose MenuBar in your library?

Context: I have electron app with native MainManu for stanalone app and I whant to migrate it to browser target

I like the look of this library but when I try to add it to my application, the title bar is always taking up the full height of the whole application window.

I tracked it down in the debugger to some elements within the title bar having height: 100% set, while the top-level div has no explicit height set. If I manually set height: 28px to the top-level div in the debugger, everything looks fine.

I then figured maybe I needed to manually set the height in the theme, but that didn't work either:

<TitleBar
  app="Filur"
  menu={menuTemplate}
  theme={{
    barHeight: "28px",
    winBarHeight: "28px",
  }}
/>

What am I doing wrong? This is on Windows btw.

UPDATE: Just tried using plain numbers (e.g. 28 instead of "28px") in the theme object but it made no difference.

Right now, I'm able to set the font of the title string via titleFontFamily in the theme, but it doesn't seem to affect the font of the menus.

It would be good to be able to set the font of both title and all menu strings to my application font.

Even if setting the following two (documented) properties in the theme, the box shadow for a menu doesn't show up:

menuShowBoxShadow: true,
menuBoxShadow: 0px 8px 14px 3px rgba(0, 0, 0, 0.5)

By stepping through the code, I noticed that it checks for showBoxShadow instead. By adding that to the theme, it works:

showBoxShadow: true,
menuShowBoxShadow: true,
menuBoxShadow: 0px 8px 14px 3px rgba(0, 0, 0, 0.5)

I would love to update to the 2x version, however the addition of accessibility shortcuts effectively prevents me from doing this.

The problem is that they will consume any existing shortcuts in my application that happens to be using the alt modifier as well.

I guess the easiest solution by far is to have a flag that specifies whether the accessibility shortcuts are registered or not.

The next solution I can think of will allow my application to process key events after they have been handled by this component. E.g. to allow a relatively common shortcut such as alt+arrow key to coexist with this menu (I would personally prefer this solution).

I could open a PR for but would like to hear your opinion first.
Thanks!

Is there any way to enable or disable menu items after the title bar has been created like we can with an Electron menu:

Menu.getApplicationMenu().getMenuItemByID("undo").enabled = false

Or do I simply have to recreate menuTemplate and the TitleBar?

• i cloned the repo, cd'd into the examples folder, and ran npm i which reuslts in errors because of the 'link' elements in package.json (i am running on windows subsystem linux) if i remove the 'link' lines, running the app with 'npm start' just errors out.
• I have a pre-existing electron react app here: https://github.com/MartinBarker/electron-react
  i tried following the instructions in this repo's readme to install the package, add it to my electron.js file, and add the frameless window into my App.js file, with some minor edits, but it has been failing with different errors such as this:

[0] ERROR in ./node_modules/electron/index.js 1:11-24
[0] Module not found: Error: Can't resolve 'fs' in 'C:\Users\martin\Documents\projects\electron-react\node_modules\electron'
[0] resolve 'fs' in 'C:\Users\martin\Documents\projects\electron-react\node_modules\electron'
[0]   Parsed request is a module
[0]   using description file: C:\Users\martin\Documents\projects\electron-react\node_modules\electron\package.json (relative path: .)
[0]     Field 'browser' doesn't contain a valid alias configuration
[0]     resolve as module
[0]       looking for modules in C:\Users\martin\Documents\projects\electron-react\node_modules\electron\node_modules
[0]         single file module
[0]           using description file: C:\Users\martin\Documents\projects\electron-react\node_modules\electron\package.json (relative path: ./node_modules/fs)        
[0]             no extension
[0]               Field 'browser' doesn't contain a valid alias configuration
[0]               C:\Users\martin\Documents\projects\electron-react\node_modules\electron\node_modules\fs doesn't exist
[0]             .web.mjs
[0]               Field 'browser' doesn't contain a valid alias configuration
[0]               C:\Users\martin\Documents\projects\electron-react\node_modules\electron\node_modules\fs.web.mjs doesn't exist
[0]             .mjs

Could you help me add this frameless window feature to my app https://github.com/MartinBarker/electron-react ? I would really love to see it in action

MacOS related bug: double clicking the frameless-titlebar to maximize window to the relative display work area only expands to fill the main display's work area.

Fix: should maximize window to fill nearest display's work area.

I have build a menu bar on window and it works very good. But when i run my app on mac os the default menu of electron instead of my menu. How do fix it or build a menu for macOS

I have two problems

1. When I double click the title bar, the onDoubleClick cannot be triggered.
2. Sometimes onDoubleClick can work normally, but maximizing will cause a white bar at the top of the window

Can this only work with 16.6.3 or up? Or can people with earlier React versions use this? If so I'd recommend changing the React version in package.json for developers who, for legacy reasons or otherwise, cannot upgrade their version of React.

If you use Electron MenuItem role option the error Uncaught TypeError: MenuItem must have at least one of label, role or type is thrown.

To reproduce inside the example instead of using the defaultMenu with TitleBar menu option use the following code

[
    {
      label: 'Menu',
      submenu: [
        {
          id: 'file',
          label: 'File',
          click: () => console.log("File"),
        },{
          role: "editMenu"
        }
      ],
    },
  ]

I think the role needs adding to the MenuItem type along with check the inside validate() not sure what else would be required though

There should be an option to pass disableMaximize or disableMinimize to disable certain control buttons

Describe the bug
unable to use with next js starter electron app
To Reproduce
Steps to reproduce the behavior:

1. create a application using yarn create next-app --example with-electron frameless
2. now try to integrate as per documentation
3. It will throw exception
4. By disabling SSR also no luck

Expected behavior
Custom titlebar should come

Describe the bug
If you add the below code as a child of the Titlebar it is unable to detect hover or clicks. If i am in full screen mode then i can move the mouse to the very top off the titlebar and can see the hover and click. If i use top: 25px; on the button and hover over the half not inside the titlebar i can click if inside it's unable to click.

<div className="web_action_buttons">
          <Row className="align-items-center m-0" >
            <Button bsPrefix="btn-block" className="web_action_btn m-0 btn-border" onClick={() => console.log("Back")}><FontAwesomeIcon icon={faAngleLeft} size="2x"/></Button>
            <Button bsPrefix="btn-block" className="web_action_btn m-0"  onClick={() => console.log("Forward")}><FontAwesomeIcon icon={faAngleRight} size="2x"/></Button>
            <Button bsPrefix="btn-block" className="web_action_btn m-0 btn-border" onClick={() => console.log("Refresh")}><FontAwesomeIcon icon={faRedoAlt} size="lg"/></Button>
          </Row>
        </div>

Expected behavior
Be able to hover and click on components added to the titlebar as children

Desktop (please complete the following information):

• OS: [Ubuntu

The menuMaxWidth property doesn't seem to be applied when defining a theme?
Perhaps it's simply a typo because menuWidth seems to work fine.

Describe the bug
TitleBar platform type is set as "darwin" | "linux" | "win32" | undefined but process.platform type is NodeJS.Platform and both are not compatible so casting is required:

Does not work:

<TitleBar
    platform={process.platform}
> </TitleBar>

Work:

<TitleBar
    platform={process.platform as "darwin" | "linux" | "win32" | undefined}
> </TitleBar>

I think that the type should be accepted and an error should occur if the platform is not supported.

To Reproduce
Steps to reproduce the behavior:

1. Use typescript
2. Use TitleBar component with platform property set as process.platform.
3. See typescript error

Expected behavior
process.platform type accepted by the property.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: ubuntu
• Version: v2.1.4

can i install with npm?
I like this, can I install my project with npm?

Are there any plans to support typscript?

I have installed node.js and electron (all latest versions) and then I installed your frameless titlebar

But the project did not contain a "renderer" file so I created a renderer.js and added the portion:

import TitleBar from 'frameless-titlebar';
import menu from './AppMenu';

    export default class App extends React.Component
    {
        render()
        {
            return (
      <div>
        <TitleBar
          icon={codeIcon}
          app="Code"
          title="index.js - frameless-titlebar"
          menu={defaultTemplate}
          theme={{
            barTheme: 'dark',
            barBackgroundColor: 'rgb(36, 37, 38)',
            barColor: 'rgb(230, 230, 230)',
            menuHighlightColor: '#373277',
            menuDimItems: false,
            showIconDarLin: false
          }}
        />
      </div>
    );
        }
    }

How ever despite this the title bar still did not load and I have followed the instructions to set the browserwindow frame component to false. As in your documentation, my app does net yet have a native root container and therefore the app crashes when I put this block of code in my mainWIndow.js

Perhaps I need guidance on what I have done wrong and how to get back on the right track. I am a beginner to electron and node.js

According to the docs, the menu should display on Linux. Currently only win32 gets that treatment. Perhaps this is desired, but should be configurable.

Describe the bug
In my app, the menu show up. I have a menu item with configuration: accelerator: 'CmdOrCtrl+S',
When I press "Ctrl+S" on Windows, nothing happens. The menu works fine if I click on it.

Is it a bug or what I need to do to make the accelerator keys combination work?

The BrowserWindow already have the necessary events
Docs / API / BrowserWindow#event-maximize
Docs / API / BrowserWindow#event-unmaximize

This should do the trick and prevent MaxListenersExceededWarning

componentDidMount() {
    currentWindow.on('maximize', () => this.setState({ isMaximized: true }));
    currentWindow.on('unmaximize', () => this.setState({ isMaximized: false }));
}

And this can be removed too due to it being controlled by the BrowserWindow

componentWillUnmount() {
    currentWindow.removeListener('maximize', () => this.setState({ isMaximized: true }));
    currentWindow.removeListener('unmaximize', () => this.setState({ isMaximized: false }));
}