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

[toc2] Support custom colors for navigation text and window #969

Merged
merged 4 commits into from Apr 25, 2017

Conversation

Projects
None yet
4 participants
@hiiwave
Copy link
Contributor

hiiwave commented Apr 23, 2017

It's a PR for toc2 (Table of Contents).
The colors for the navigation text and window were hard-coded.
I added some options to make those colors customizable,
which is especially useful for users using jupyter-notebook with a dark theme.

@hiiwave hiiwave changed the title Support custom color for toc2 (Table of Contents) Support custom colors for toc2 (Table of Contents) Apr 23, 2017

@hiiwave hiiwave changed the title Support custom colors for toc2 (Table of Contents) [toc2] Support custom colors for navigation text and window Apr 23, 2017

[toc2] Support custom colors for navigation text and window
Especially designed for users using jupyter-notebook with a dark theme.

@hiiwave hiiwave force-pushed the hiiwave:toc2-color branch from e651d18 to 0731847 Apr 23, 2017

@hiiwave

This comment has been minimized.

Copy link
Contributor

hiiwave commented Apr 24, 2017

Here is a demo using onedork theme from jupyter-themes:

Before

before

After

demo

@jcb91
Copy link
Member

jcb91 left a comment

Looks pretty much ready to go to me, with a few minor edits.

@@ -39,7 +39,7 @@ Parameters:
- name: toc2.moveMenuLeft
description: Move notebook's title and menu on the left instead of being centered -- This provides a better look when the toc/sidebar is present
input_type: checkbox
default: true
default: true

This comment has been minimized.

@jcb91

jcb91 Apr 24, 2017

Member

can we lose the trailing whitespace here please?
In fact, anywhere there is any, I guess 😉

- name: toc2.colors.wrapper_background
input_type: color
description: Color of wrapper window background
default: "#FFF"

This comment has been minimized.

@jcb91

jcb91 Apr 24, 2017

Member

I have a feeling that defaults specified as three-character codes don't load well in the configurator - could we use full six-char codes here?

- name: toc2.colors.navigate_num
input_type: color
description: Color of navigate number
default: "#000"

This comment has been minimized.

@jcb91

jcb91 Apr 24, 2017

Member

let's have a blank final line :)

@hiiwave

This comment has been minimized.

Copy link
Contributor

hiiwave commented Apr 24, 2017

Thanks for the suggestion. Please take a look for the new commit 😄

@jcb91

This comment has been minimized.

Copy link
Member

jcb91 commented Apr 24, 2017

👍 looks good to me!

@jfbercher

This comment has been minimized.

Copy link
Member

jfbercher commented Apr 24, 2017

Nice idea and well done! Thanks. 👍
Perhaps can you also edit the README.md to include a brief description of the new possibilities; something like
- Customization of background, fonts, border and highlighting colors in the toc window and navigation menus , perhaps also include the gif picture with the modified theme (as above)
and add your contribution at the bottom of the file...

hiiwave added a commit to hiiwave/jupyter_contrib_nbextensions that referenced this pull request Apr 24, 2017

toc2: update readme.md for ipython-contrib#969
Include a brief description of the new possibilities: 
Customization of background, fonts, border and highlighting colors in the toc window and navigation menus
@hiiwave

This comment has been minimized.

Copy link
Contributor

hiiwave commented Apr 24, 2017

Sure. Please take a look.

@hiiwave

This comment has been minimized.

Copy link
Contributor

hiiwave commented Apr 24, 2017

Also please feel free to edit the readme to make it proper 😄

@@ -30,9 +30,13 @@ The initial configuration can be given using the IPython-contrib nbextensions fa
- The numbering of headers (true by default)
- Moving header title and menus on the left (default: true)
- Customization of highlighting the title of currently selected/running sections.
- Customization of background, fonts, border and highlighting colors in the toc window and navigation menus. Hence it's possible to be used under notebook with a dark theme. (see thrid demo)

This comment has been minimized.

@jfbercher

jfbercher Apr 24, 2017

Member

Remove the line just before and add a dot at the end.

This comment has been minimized.

@jfbercher

jfbercher Apr 24, 2017

Member

thrid --> third

This comment has been minimized.

@hiiwave

hiiwave Apr 24, 2017

Contributor

ok.

@jcb91

This comment has been minimized.

Copy link
Member

jcb91 commented Apr 24, 2017

One last nit-pick request, could you rebase to remove the commits 2ebe344 and b8ca0c5, just to keep the history slightly smaller? Not a big deal, but we're getting a touch bloated, particularly with all the animated-gif demos 😆

@hiiwave hiiwave force-pushed the hiiwave:toc2-color branch from a85a4a2 to efd6747 Apr 25, 2017

@hiiwave

This comment has been minimized.

Copy link
Contributor

hiiwave commented Apr 25, 2017

Done 😄

@jcb91

This comment has been minimized.

Copy link
Member

jcb91 commented Apr 25, 2017

Thanks! Ok, looks good to merge to me, @jfbercher are we good to go?

@jfbercher

This comment has been minimized.

Copy link
Member

jfbercher commented Apr 25, 2017

Yes, that's fine.

@jfbercher jfbercher merged commit b7d065d into ipython-contrib:master Apr 25, 2017

2 checks passed

continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@jfbercher

This comment has been minimized.

Copy link
Member

jfbercher commented Apr 25, 2017

Thanks, @hiiwave

@hiiwave

This comment has been minimized.

Copy link
Contributor

hiiwave commented Apr 25, 2017

Thank you both too. It's really joyful that I just did my first contribution on an open source project 😄
Especially thanks @jcb91, I learned a lot from conversation on project jupyter_highlight_selected_word with you!

@marius311

This comment has been minimized.

Copy link

marius311 commented Jun 29, 2017

Thanks @hiiwave this is a really awesome thing to have! Unfortunately it doesn't seem to be working for me, I don't see any change to the colors of the sidebar TOC, it looks exactly like your "before" picture rather than your "after". I tried both with this exact commit, as well as current master, so I guess it must be something related to a different package? I have Jupyter notebook 5.0.0 and jupyterthemes 0.16.4.

If its of any help, I noticed that when I delete the <style> tag highlighted below, then it works, although I lose the nice highlighting of the current running cells, etc...

image

@jcb91

This comment has been minimized.

Copy link
Member

jcb91 commented Jul 24, 2017

@marius311 apologies for the delayed reply, if this is still not working for you, could you open a new issue please?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment