From 959eb71345c0c29e1bb70d78a2126e092de79f9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean-Fran=C3=A7ois=20Bercher?= Date: Sun, 27 Nov 2016 19:03:39 +0100 Subject: [PATCH 1/2] html export: restore hover highlightof sections in toc move title/menus/icons on left, following suggestion in #650 --- .../nbextensions/toc2/main.css | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css b/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css index a58fb4dac..261039d2a 100644 --- a/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css +++ b/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css @@ -1,28 +1,21 @@ /*extracted from https://gist.github.com/magican/5574556*/ -/*#toc-level0 li > a:hover { display: block; background-color: #DAA520}*/ +/*background color for links when you mouse over it +This style is used on export, but can be overwritted in the livenotebook +by selecting a color in the nbextension-configurator*/ +#toc-level0 li > a:hover { display: block; background-color: #DAA520} #toc-level0 a {color: #333333; text-decoration: none;} #navigate_menu li a:hover {background-color: #f1f1f1} -/*#Navigate_menu { - list-style-type: none; - max-width: 500px; - min-width: 100px; - width: 250px; - overflow: auto; -} -#navigate_menu { - overflow: hidden; +/* Move menus and tooolbar to the left, following @Kevin-McIsaac suggestion */ +div#menubar-container, div#header-container { +width: auto; +padding-left: 20px; } -#Navigate_menu { - list-style-type: none; - overflow: auto; -}*/ - #navigate_menu { /*display: block;*/ list-style-type: none; @@ -164,7 +157,10 @@ color: black; } -/*.toc-item-highlight-select {background-color: Gold} +/* +These colors are now specified in js, after reading the extension's config stored in system +and updated using the nbextension-configurator +.toc-item-highlight-select {background-color: Gold} .toc-item-highlight-execute {background-color: red} .toc-item-highlight-execute.toc-item-highlight-select {background-color: Gold} */ From d25148daa9a0e7cba8daa3ec71745ff812538228 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean-Fran=C3=A7ois=20Bercher?= Date: Sun, 27 Nov 2016 23:54:22 +0100 Subject: [PATCH 2/2] toc2: move title/menu to the left as an option --- .../nbextensions/toc2/main.css | 4 ++-- .../nbextensions/toc2/main.js | 21 +++++++++++++++---- .../nbextensions/toc2/toc2.yaml | 4 ++++ 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css b/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css index 261039d2a..511e95461 100644 --- a/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css +++ b/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css @@ -10,11 +10,11 @@ by selecting a color in the nbextension-configurator*/ #navigate_menu li a:hover {background-color: #f1f1f1} -/* Move menus and tooolbar to the left, following @Kevin-McIsaac suggestion */ +/* Move menus and tooolbar to the left, following @Kevin-McIsaac suggestion div#menubar-container, div#header-container { width: auto; padding-left: 20px; -} +}*/ #navigate_menu { /*display: block;*/ diff --git a/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.js b/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.js index 728184d85..7d62d7be1 100644 --- a/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.js +++ b/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.js @@ -22,6 +22,7 @@ define(["require", "jquery", "base/js/namespace", 'services/config', "toc_section_display": "block", 'sideBar':true, 'navigate_menu':true, + 'moveMenuLeft': true, 'colors': {'hover_highlight': '#DAA520', 'selected_highlight': '#FFD700', 'running_highlight': '#FF0000'} @@ -60,12 +61,19 @@ define(["require", "jquery", "base/js/namespace", 'services/config', cfg = IPython.notebook.metadata.toc = $.extend(true, cfg, IPython.notebook.metadata.toc); // excepted colors that are taken globally (if defined) - cfg.colors = IPython.notebook.metadata.toc.colors = $.extend(true, {}, initial_cfg.colors); + cfg.colors = IPython.notebook.metadata.toc.colors = $.extend(true, {}, initial_cfg.colors); try {cfg.colors = IPython.notebook.metadata.toc.colors = $.extend(true, cfg.colors, config.data.toc2.colors); } catch(e) {} + // and moveMenuLeft taken globally (if it exists, otherwise default) + cfg.moveMenuLeft = IPython.notebook.metadata.toc.moveMenuLeft = initial_cfg.moveMenuLeft; + if (config.data.toc2) { + if (typeof config.data.toc2.moveMenuLeft !== "undefined") { + cfg.moveMenuLeft = IPython.notebook.metadata.toc.moveMenuLeft = config.data.toc2.moveMenuLeft; + } + } // create highlights style section in document - create_highlights_css() + create_additional_css() // call callbacks callback && callback(); st.config_loaded = true; @@ -112,12 +120,17 @@ define(["require", "jquery", "base/js/namespace", 'services/config', }; - function create_highlights_css() { + function create_additional_css() { var sheet = document.createElement('style') sheet.innerHTML = "#toc-level0 li > a:hover { display: block; background-color: " + cfg.colors.hover_highlight + " }\n" + ".toc-item-highlight-select {background-color: " + cfg.colors.selected_highlight + "}\n" + ".toc-item-highlight-execute {background-color: " + cfg.colors.running_highlight + "}\n" + - ".toc-item-highlight-execute.toc-item-highlight-select {background-color: " + cfg.colors.selected_highlight + "}" + ".toc-item-highlight-execute.toc-item-highlight-select {background-color: " + cfg.colors.selected_highlight + "}" + if (cfg.moveMenuLeft){ + sheet.innerHTML += "div#menubar-container, div#header-container {\n"+ + "width: auto;\n"+ + "padding-left: 20px; }" + } document.body.appendChild(sheet); } diff --git a/src/jupyter_contrib_nbextensions/nbextensions/toc2/toc2.yaml b/src/jupyter_contrib_nbextensions/nbextensions/toc2/toc2.yaml index 5fb1e816c..62948bf1a 100644 --- a/src/jupyter_contrib_nbextensions/nbextensions/toc2/toc2.yaml +++ b/src/jupyter_contrib_nbextensions/nbextensions/toc2/toc2.yaml @@ -32,6 +32,10 @@ Parameters: description: Display Table of Contents as a navigation menu input_type: checkbox default: true +- 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 - name: toc2.colors.hover_highlight input_type: color description: Hover color in toc