From f5a02a02dd87dc5b29dbced987b785b734b81996 Mon Sep 17 00:00:00 2001 From: Paul Ivanov Date: Tue, 11 Mar 2014 18:22:03 -0700 Subject: [PATCH] semantic names for indicator icons For all of the discussion that we had about what kind of icons should and should not be used to indicate what mode the notebook is in, we never went through to make it possible to override it. With this change, it is now possible to override what icons are displayed for Command and Edit Modes. For example, @minrk liked the fighter-jet icon for Command Mode, so he can put this in his custom.css .ipython-command-mode:before { content: "\f0fb"; } --- IPython/html/static/notebook/js/notificationarea.js | 4 ++-- IPython/html/static/notebook/less/notificationarea.less | 8 ++++++++ IPython/html/static/style/style.min.css | 2 ++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/IPython/html/static/notebook/js/notificationarea.js b/IPython/html/static/notebook/js/notificationarea.js index 120c5d9c7..948a281a4 100644 --- a/IPython/html/static/notebook/js/notificationarea.js +++ b/IPython/html/static/notebook/js/notificationarea.js @@ -75,12 +75,12 @@ var IPython = (function (IPython) { // Command/Edit mode $([IPython.events]).on('edit_mode.Notebook',function () { IPython.save_widget.update_document_title(); - $modal_ind_icon.attr('class','icon-pencil').attr('title','Edit Mode'); + $modal_ind_icon.attr('class','ipython-edit-mode').attr('title','Edit Mode'); }); $([IPython.events]).on('command_mode.Notebook',function () { IPython.save_widget.update_document_title(); - $modal_ind_icon.attr('class','').attr('title','Command Mode'); + $modal_ind_icon.attr('class','ipython-command-mode').attr('title','Command Mode'); }); // Kernel events diff --git a/IPython/html/static/notebook/less/notificationarea.less b/IPython/html/static/notebook/less/notificationarea.less index 634f31b02..ad4f497ec 100644 --- a/IPython/html/static/notebook/less/notificationarea.less +++ b/IPython/html/static/notebook/less/notificationarea.less @@ -16,3 +16,11 @@ margin-right: -16px; } +.ipython-edit-mode:before { + .icon(@pencil); +} + +.ipython-command-mode:before { + .icon(' '); +} + diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index e36a823bc..183b5892f 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -1506,6 +1506,8 @@ ul#help_menu li a{overflow:hidden;padding-right:2.2em}ul#help_menu li a i{margin #notification_area{z-index:10} .indicator_area{color:#777;padding:4px 3px;margin:0;width:11px;z-index:10;text-align:center} #kernel_indicator{margin-right:-16px} +.ipython-edit-mode:before{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f040"} +.ipython-command-mode:before{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:' '} .notification_widget{color:#777;padding:1px 12px;margin:2px 4px;z-index:10;border:1px solid #ccc;border-radius:4px;background:rgba(240,240,240,0.5)}.notification_widget.span{padding-right:2px} div#pager_splitter{height:8px} #pager-container{position:relative;padding:15px 0}