[Feature] Added a Custom Titlebar #1140
Conversation
|
@ParamBirje Sorry for the delayed response, can you please try some subtle color for the background instead of the brand green? |
|
Hey @manojVivek , I have made the required changes to the titlebar making it's background color subtle and feel default. Here's how it looks.
|
|
Looks goods, also, is it possible to make this a user preference? So that it doesn't affect users who like it the current way. |
|
The custom titlebar actually builds itself during the creation of BrowserWindow, I don't think we can change it in realtime. We could probably save the user preference and on the next restart, load the preferred titlebar. I'll open a new issue/feature for changing the titlebar preferences, if that sounds good? |
|
Yes, applying the change on restart sounds good (we can add a not below the user preference option indicating that). Yes, a new issue is fine, but I would like to merge both of these together, as we wouldn't want to surprise the users with something they didn't expect. |
|
Could you please give me some pointers to how the storage part be implemented? We can't use Edit: I just found a package which helps with storing electron config data. I'll try that and revert. |
|
@ParamBirje You don't need any extra package for this. You can directly access the user preferences in the main process like this: responsively-app/desktop-app/src/main/main.ts Line 261 in 34c3b90 |
|
Hey @manojVivek , Thank you for the assist on electron store, saved a lot of time. Coincidently the package that I had found was Custom Titlebar (default preference)
Default Titlebar
Let me know if there are any changes required. |
|
This is looking great! Just a minor comment in terms of UI: |
desktop-app/src/main/main.ts
Outdated
| webPreferences: { | ||
| sandbox: false, |
There was a problem hiding this comment.
Why do we want to disable the sandbox option?
There was a problem hiding this comment.
The custom-electron-titlebar mentioned it in their documentation, for the library to function properly, sandbox should be false.
However, I tested the functionality by omitting the sandbox line, and found out, the custom titlebar works just fine and encountered no issues yet.
Should I keep this line anyways?
There was a problem hiding this comment.
If it works without this, then I would suggest we remove this, as this is option is a compromise on security.
desktop-app/src/main/main.ts
Outdated
| @@ -119,7 +125,9 @@ const createWindow = async () => { | |||
| width, | |||
| height, | |||
| icon: getAssetPath('icon.png'), | |||
| titleBarStyle: 'hidden', | |||
There was a problem hiding this comment.
Also, we want to ensure this doesn't affect Mac and Linux versions of the app, do you have any ideas how it works there after this change?
There was a problem hiding this comment.
I don't think this would affect Mac/Linux versions, as that option disables default taskbar styles and results in a full-size content window according to the ElectronJS docs.
There was a problem hiding this comment.
I just tried this code on Mac and it affects the title bar color.
Preference disabled(default):
Preference enabled:
Is it possible to selectively apply this by checking, only when the platform is windows?
There was a problem hiding this comment.
Try moving the styles to a new css file and optionally import based on UA data?
|
Hey @manojVivek , Here's the toggle implemented in the Settings panel.
|
|
Hey @manojVivek , I have made changes to the custom titlebar's implementation such that only if the platform is Windows, the feature can be used. The UI which toggles the custom titlebar in the Settings, is now only visible to Windows users. I have also moved the custom titlebar CSS to a new file as directed. Here's how I am checking platforms in
And in the React files (process is not exposed here)
[The |
|
It's been great dealing with issues and solutions back and forth. Thank you for letting me have a chance at contributing to a great project, with you and fellow maintainers doing a great job at keeping it that way! 😄 |
✨ Pull Request
📓 Referenced Issue
Fixes #189
ℹ️ About the PR
As suggested by @Kidcredo , The custom-electron-toolbar package was added to the project to tweak the default toolbar. This made it possible to make the File menu and the Title be in the same space which optimizes the screen space available and more accessible for devices with smaller screen.
The app's brand color is now used by the custom titlebar.
🖼️ Testing Scenarios / Screenshots
Previous titlebar
Custom titlebar