Merge pull request #5332 from ivanov/semantic-icons

semantic names for indicator icons

IPython/html/static/notebook/js/notificationarea.js

@@ -44,21 +44,21 @@ var IPython = (function (IPython) {
     };
 
     NotificationArea.prototype.widget = function(name) {
-        if(this.widget_dict[name] == undefined) {
+        if(this.widget_dict[name] === undefined) {
             return this.new_notification_widget(name);
         }
         return this.get_widget(name);
     };
 
     NotificationArea.prototype.get_widget = function(name) {
-        if(this.widget_dict[name] == undefined) {
+        if(this.widget_dict[name] === undefined) {
             throw('no widgets with this name');
         }
         return this.widget_dict[name];
     };
 
     NotificationArea.prototype.new_notification_widget = function(name) {
-        if(this.widget_dict[name] != undefined) {
+        if(this.widget_dict[name] !== undefined) {
             throw('widget with that name already exists ! ');
         }
         var div = $('<div/>').attr('id','notification_'+name);
@@ -75,23 +75,26 @@ 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','edit_mode_icon').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','command_mode_icon').attr('title','Command Mode');
         });
 
+        // Implicitly start off in Command mode, switching to Edit mode will trigger event
+        $modal_ind_icon.attr('class','command-mode_icon').attr('title','Command Mode');
+
         // Kernel events
         $([IPython.events]).on('status_idle.Kernel',function () {
             IPython.save_widget.update_document_title();
-            $kernel_ind_icon.attr('class','icon-circle-blank').attr('title','Kernel Idle');
+            $kernel_ind_icon.attr('class','kernel_idle_icon').attr('title','Kernel Idle');
         });
 
         $([IPython.events]).on('status_busy.Kernel',function () {
             window.document.title='(Busy) '+window.document.title;
-            $kernel_ind_icon.attr('class','icon-circle').attr('title','Kernel Busy');
+            $kernel_ind_icon.attr('class','kernel_busy_icon').attr('title','Kernel Busy');
         });
 
         $([IPython.events]).on('status_restarting.Kernel',function () {
@@ -105,7 +108,7 @@ var IPython = (function (IPython) {
         
         // Start the kernel indicator in the busy state, and send a kernel_info request.
         // When the kernel_info reply arrives, the kernel is idle.
-        $kernel_ind_icon.attr('class','icon-circle').attr('title','Kernel Busy');
+        $kernel_ind_icon.attr('class','kernel_busy_icon').attr('title','Kernel Busy');
 
         $([IPython.events]).on('status_started.Kernel', function (evt, data) {
             data.kernel.kernel_info(function () {
@@ -148,7 +151,7 @@ var IPython = (function (IPython) {
                     }, 5000);
                 return;
             }
-            console.log('WebSocket connection failed: ', ws_url)
+            console.log('WebSocket connection failed: ', ws_url);
             msg = "A WebSocket connection could not be established." +
                 " You will NOT be able to run code. Check your" +
                 " network connection or notebook server configuration.";

IPython/html/static/notebook/less/notificationarea.less

@@ -16,3 +16,20 @@
     margin-right: -16px;
 }
 
+.edit_mode_icon:before {
+     .icon(@pencil);
+}
+
+.command_mode_icon:before {
+     .icon(' ');
+}
+
+.kernel_idle_icon:before {
+     .icon(@circle-blank);
+}
+
+.kernel_busy_icon:before {
+     .icon(@circle);
+}
+
+

IPython/html/static/style/style.min.css

@@ -1506,6 +1506,10 @@ 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}
+.edit_mode_icon:before{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f040"}
+.command_mode_icon:before{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:' '}
+.kernel_idle_icon:before{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f10c"}
+.kernel_busy_icon:before{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f111"}
 .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}