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

Add an optional header to the application shell #5936

Merged
merged 5 commits into from Feb 14, 2019

Conversation

@commandlinegirl
Copy link
Member

@commandlinegirl commandlinegirl commented Feb 2, 2019

This commit adds the ability to show and add widgets to a custom header above the top (menu) panel, similarly to the bottom panel. It will allow extension authors to add their own customizations, menus, etc. By default, i.e. when it contains no widgets, the header is hidden.

This is an example of how it could be used in an extension:

function addHeader(app: JupyterLab) {
  let widget: Widget = new Widget();
  widget.id = 'myheader';
  widget.title.label = 'My Header';
  widget.title.closable = false;

  var main_strip = document.createElement("div");
  main_strip.id = "header_main_strip";
  var navbar = document.createElement("div");
          var left = document.createElement("ul");
          left.id = "header_navbar_left";
                  var projects = document.createElement("li");
                  ...
          left.appendChild(projects);
                  var commit_button = document.createElement("li");
                  ...
          left.appendChild(commit_button);
  navbar.appendChild(left);
  main_strip.appendChild(navbar);
  widget.node.appendChild(main_strip);

  app.shell.add(widget, 'header');
}

The feature works well for us and makes the extension code a lot simpler, so we’d like to contribute it back for the community.

@jtpio
Copy link
Member

@jtpio jtpio commented Feb 8, 2019

@commandlinegirl this looks interesting. Do you mind posting a screenshot to see what it looks like when enabled?

@commandlinegirl
Copy link
Member Author

@commandlinegirl commandlinegirl commented Feb 8, 2019

Sure, I'm attaching a screenshot showing an enabled header. In this example I added some elements that pertain to the whole JupyterLab session, like timeout control (top right corner).

header_example

@afshin afshin requested a review from tgeorgeux Feb 9, 2019
@afshin
Copy link
Member

@afshin afshin commented Feb 9, 2019

Thanks for the PR! I requested a review from @tgeorgeux from a design and UX point of view.

@commandlinegirl
Copy link
Member Author

@commandlinegirl commandlinegirl commented Feb 9, 2019

Great, thanks a lot!

@afshin
Copy link
Member

@afshin afshin commented Feb 13, 2019

FYI, we are having the JupyterLab dev team meeting today at 9AM Pacific time: https://calpoly.zoom.us/join (join with the meeting name: jupyter). Feel free to join! I'll raise this PR at that meeting.

@commandlinegirl
Copy link
Member Author

@commandlinegirl commandlinegirl commented Feb 13, 2019

Great, thanks for the heads-up! I'll be there.

@afshin afshin requested review from afshin and removed request for tgeorgeux Feb 13, 2019
@jasongrout
Copy link
Contributor

@jasongrout jasongrout commented Feb 13, 2019

+1 from me for the idea of having a header.

@jasongrout jasongrout added this to the 1.0 milestone Feb 13, 2019
@commandlinegirl
Copy link
Member Author

@commandlinegirl commandlinegirl commented Feb 14, 2019

Merged master, two checks fail (previously three).

afshin
afshin approved these changes Feb 14, 2019
Copy link
Member

@afshin afshin left a comment

Thank you, @commandlinegirl!

👍

@afshin afshin merged commit 52acf3e into jupyterlab:master Feb 14, 2019
9 checks passed
@lock lock bot locked as resolved and limited conversation to collaborators Aug 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants