Hide title bar on mac, and change style with theme. Fixes Issue #1055 #1972

StormBurpee · 2018-05-24T20:31:52Z

Hi, thought I'd take a go at this.

Haven't got a windows machine near me to test it there, however you might want to look at making it a frameless window for windows. Then just add in custom close, max and minimise buttons. (Pretty easy, I can look at doing it for you if you like the look of this commit.)
Also, if you went down this route, we could look at hiding the minimise and maximise buttons when the sidebar is folded (I think that's what you guys call it.), so it just shows the close button, and doesn't overlap. Again this is all personal preference, but it would look nice.

Had to do a few style changes with the modal for preferences, other things where just personal preference to make it align and look how I thought it looked best. However you might want to make some small changes to some of the positioning of the elements. (I'd probably move the preferences button into the top bar)

Other than that, this should achieve what is brought up in issue #1055
The top bar is draggable and also changes with each style. :) Let me know what you guys think, or if you need me to change anything! It's pretty self explanatory however.

…1055

ZeroX-DG · 2018-05-25T02:37:05Z

@StormBurpee Wow, it look nice! But if you switch to the frameless window, how do you access the old window menu on top?

StormBurpee · 2018-05-25T03:48:58Z

Hi @ZeroX-DG I'll take a look at this now. If we want to go with the frameless window it might be a matter of creating a custom menu bar. Which I'm happy to look into right now. Other than that the other option is to just have this style on OSX, but for continuity it would look better if we had it on windows as well. The only thing is I don't have a windows machine for a few days to test on, so if someone could when I make the next commit that would be great!

StormBurpee · 2018-05-25T07:34:01Z

Hey @ZeroX-DG and everyone else. I've made it so it works with windows now and has the menu bar. I was still testing this on a mac, hence why it has the extra menu options. But it will adapt to all the menus for the specified operating system. Here are a few images, let me know what you guys think.

So the mac version looks like this

And now the windows version will look like this

You might want to play with the svg icons for min/max/close and make them suit your style a bit better. However I did what I could to make it look neat.

On windows this also works with themes, so it follows along with the same style as mac! Just it's a solid colour this way.

Themes

sosukesuzuki

please confirm my reviews!

and please fix from eslint!!

sosukesuzuki · 2018-05-28T03:03:12Z

browser/main/Main.js

+            styleName='toolbar-controls'>
+            <ul className="menubar-list" styleName="menubar-list">
+              {Object.keys(this.state.menu).map(key => {
+                return <li className="menuItem" styleName="menu-item" onBlur={this.closemenu} onClick={() => this.openSubmenu(key)}>{this.state.menu[key].label}<ApplicationMenuDropdown menu={this.state.menu[key].submenu} open={this.state.openmenu == key ? true : false}></ApplicationMenuDropdown></li>;


This line is so long! please indention!

sosukesuzuki · 2018-05-28T03:09:19Z

browser/main/Main.js

+            styleName='toolbar-controls'>
+            <ul className="menubar-list" styleName="menubar-list">
+              {Object.keys(this.state.menu).map(key => {
+                return <li className="menuItem" styleName="menu-item" onBlur={this.closemenu} onClick={() => this.openSubmenu(key)}>{this.state.menu[key].label}<ApplicationMenuDropdown menu={this.state.menu[key].submenu} open={this.state.openmenu == key ? true : false}></ApplicationMenuDropdown></li>;


please write like below(and fix from eslint):

Object.keys(this.state.menu).map(key => <li className="menuItem" styleName="menu-item" onBlur={this.closemenu} onClick={() => this.openSubmenu(key)}> {this.state.menu[key].label} <ApplicationMenuDropdown menu={this.state.menu[key].submenu} open={this.state.openmenu == key ? true : false} /> </li>)

sosukesuzuki · 2018-05-28T03:10:59Z

browser/main/Main.js

        onMouseMove={(e) => this.handleMouseMove(e)}
        onMouseUp={(e) => this.handleMouseUp(e)}
      >
+      <div className={config.is_win ? 'windows-app-header' : 'mac-app-header'} styleName={config.is_win ? 'windows-app-header' : 'mac-app-header'}>


why did you writer both className and styleName?
I think className is unnecessary.

The same applies to other components.

sosukesuzuki · 2018-05-28T03:14:13Z

browser/main/Detail/ApplicationMenuDropdown.js

+        styleName={this.state.open == true ? "root" : "root-hidden"}>
+        <ul className="dropdown-items"
+          styleName="dropdown-items">
+          {Object.keys(this.state.menu).map(key => {


please remove {} and return.

sosukesuzuki · 2018-05-28T03:19:33Z

please use yarn instead of npm.

StormBurpee · 2018-05-28T11:17:05Z

Hi, @sosukesuzuki
I've made all the changes requested in the review. Let me know if I need to do anything else.

Regards

Rokt33r · 2018-06-05T09:19:16Z

@StormBurpee Please remove package-lock.json. It generates too many changes. And, could you fix the conflict?

Rokt33r · 2018-06-05T09:20:05Z

Anyway, nice work! 😃 💯

sosukesuzuki

please use yarn instead of npm.

please confirm my reviews:pray:

sosukesuzuki · 2018-06-05T09:12:16Z

browser/main/Detail/ApplicationMenuDropdown.js

+      open: props.open
+    }
+
+    console.log(this.state.menu, 'submenu')


Why console?
I want you to remove console.log.

sosukesuzuki · 2018-06-05T09:14:32Z

browser/main/Detail/ApplicationMenuDropdown.js

+    this.state = {
+      isActive: false,
+      menu: props.menu.items,
+      open: props.open


I want you to don't use state in this case.
please use props.

sosukesuzuki · 2018-06-05T09:18:54Z

browser/main/Detail/ApplicationMenuDropdown.js

+
+    return (
+      <div className='ApplicationMenuDropdown'
+        styleName={this.state.open === true ? 'root' : 'root-hidden'}>


please write like below:

render () { const { className, open, menu } = this.props const menuItems = menu.items return ( ~~~~~~~ styleName={open ? 'root' : 'root-hidden'} ~~~~~~~ onClick={() => menuItems[key].click()}> ~~~~~~~ ) }

sosukesuzuki · 2018-06-05T09:20:56Z

browser/main/Main.js


    this.toggleFullScreen = () => this.handleFullScreenButton()
+    const isWin = global.process.platform === 'win32'
+    ConfigManager.set({isWin: isWin})


please write like below:

ConfigManager.set({isWin})

sosukesuzuki · 2018-06-05T09:24:06Z

browser/main/Main.js


    this.toggleFullScreen = () => this.handleFullScreenButton()
+    const isWin = global.process.platform === 'win32'
+    ConfigManager.set({isWin: isWin})


ConfigManager.set({isWin})

sosukesuzuki · 2018-06-12T08:17:17Z

@StormBurpee please confirm my review!

kazup01 · 2018-07-17T02:48:43Z

How is the current state?

Rokt33r · 2018-07-17T04:56:47Z

Close this pr now because it seems to be abandoned. If anyone is interested in this issue, please create another one.

mikaoelitiana · 2018-08-21T07:17:33Z

I have created a new PR from this one and will fix issues from there #2318

BoostIO#1972 (review)

Made top bar draggable, and change based on the theme. Issue BoostIO#…

0ddafe0

…1055

IssueHuntBot mentioned this pull request May 24, 2018

Feature Request: macOS - Title Bar & Dark Color Theme #1055

Closed

made it so windows works with the new menu bar

9613d0e

kazup01 added the awaiting review ❇️ Pull request is awaiting a review. label May 25, 2018

sosukesuzuki requested changes May 28, 2018

View reviewed changes

kazup01 added awaiting changes 🖊️ Pull request has been reviewed, but contributor needs to make changes. and removed awaiting review ❇️ Pull request is awaiting a review. labels May 28, 2018

kazup01 mentioned this pull request May 28, 2018

Change titlebarstyle to hidden #1958

Closed

StormBurpee added 2 commits May 28, 2018 19:56

Made changes according to review

16157f1

made all changes according to review

f3fe397

removed the windows test for mac

03a1283

sosukesuzuki requested changes Jun 5, 2018

View reviewed changes

Rokt33r closed this Jul 17, 2018

mikaoelitiana added a commit to mikaoelitiana/Boostnote that referenced this pull request Aug 21, 2018

make changes required by @sosukesuzuki

2bf8732

BoostIO#1972 (review)

mikaoelitiana added a commit to mikaoelitiana/Boostnote that referenced this pull request Oct 8, 2018

make changes required by @sosukesuzuki

196ce93

BoostIO#1972 (review)

Uh oh!

Hide title bar on mac, and change style with theme. Fixes Issue #1055 #1972

Hide title bar on mac, and change style with theme. Fixes Issue #1055 #1972

Uh oh!

Conversation

StormBurpee commented May 24, 2018

Uh oh!

ZeroX-DG commented May 25, 2018

Uh oh!

StormBurpee commented May 25, 2018

Uh oh!

StormBurpee commented May 25, 2018

Uh oh!

sosukesuzuki left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sosukesuzuki commented May 28, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

StormBurpee commented May 28, 2018

Uh oh!

Rokt33r commented Jun 5, 2018

Uh oh!

Rokt33r commented Jun 5, 2018

Uh oh!

sosukesuzuki left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sosukesuzuki commented Jun 12, 2018

Uh oh!

kazup01 commented Jul 17, 2018

Uh oh!

Rokt33r commented Jul 17, 2018

Uh oh!

mikaoelitiana commented Aug 21, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

sosukesuzuki commented May 28, 2018 •

edited

Loading

sosukesuzuki left a comment •

edited

Loading