Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[NEW] Support for MacBooks Touch Bar #1044

Merged
merged 3 commits into from
Dec 18, 2018

Conversation

abicur
Copy link
Contributor

@abicur abicur commented Dec 14, 2018

@RocketChat/electron

Closes #918

There are two panels:

  1. Formatting panel. This panel is equivalent of markdown toolbar. Touches a panel button emits click event for corresponding button in markdown toolbar.
  2. Select server panel. This panel may be based on TouchBarSegmentedControl or TouchBarScrubber. There is some limits on available space in Touch Bar. If the for displaying of panel elements requires more space than is possible, the entire panel is not displayed. There are two suitable elements in the API for displaying a list of servers. TouchBarSegmentedControl and TouchBarScrubber. TouchBarSegmentedControl is more convenient and allows to set the index of the selected object, but it suffers from the limitations described above. TouchBarScrubber is less convenient to use and does not allow to set the index of the selected item. But TouchBarScrubber allows you to display more information.
    I decided to use TouchBarSegmentedControl if it is possible or there is an opportunity to shorten the names of servers. Otherwise, a TouchBarScrubber is used.

I am not very familiar with ElectronJS, so maybe i did something inefficiently but I am ready to refactor if you point out the shortcomings.

There is a demonstration video.

Copy link
Collaborator

@tassoevan tassoevan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome, thank you so much!
I've added a few suggestions while I'm away from a MacBook to test it.

src/scripts/events.js Outdated Show resolved Hide resolved
src/scripts/touchBar.js Outdated Show resolved Hide resolved
src/scripts/touchBar.js Outdated Show resolved Hide resolved
src/scripts/touchBar.js Outdated Show resolved Hide resolved
this.control = new TouchBarSegmentedControl({
segmentStyle: 'separated',
selectedIndex: this._getActiveServerIndex(),
segments: this._hosts,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about mapping the hosts with their respective favicons?

Copy link
Contributor Author

@abicur abicur Dec 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I understand, TouchBarScrubber and TouchBarSegmentedControl allow you to display either an icon or a label. In my experience, the default icon often does not change. I thought it was therefore better to display the label.

If we want to display both Icon and label, then may be we must use a group of buttons (TouchBarButton can display both icon and label) but the buttons are not related to each other. Therefore, we need more logic to color the selected server. I can look into it.

src/scripts/touchBar.js Outdated Show resolved Hide resolved
src/scripts/touchBar.js Outdated Show resolved Hide resolved
@tassoevan tassoevan changed the title [New] add support of MacBooks Touch Bar [NEW] Support for MacBooks Touch Bar Dec 15, 2018
@tassoevan tassoevan added this to the 2.15.0 milestone Dec 15, 2018
Copy link
Collaborator

@tassoevan tassoevan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested it, and I loved it.
I think some minor changes can make it even better, like showing the formatting panel only when the message box is focused and adding the servers favicons, but this can be added later.

@tassoevan tassoevan merged commit c4cb148 into RocketChat:develop Dec 18, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add Support for Mac Laptop Touchbar
2 participants