Merge pull request #7720 from jdfreder/readonlyui

Readonly indicator.

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

@@ -38,8 +38,18 b' define(['
         var knw = this.new_notification_widget('kernel');
         var $kernel_ind_icon = $("#kernel_indicator_icon");
         var $modal_ind_icon = $("#modal_indicator");
+        var $readonly_ind_icon = $('#readonly-indicator');
         var $body = $('body');
 
+        // Listen for the notebook loaded event.  Set readonly indicator.
+        this.events.on('notebook_loaded.Notebook', function() {
+            if (that.notebook.writable) {
+                $readonly_ind_icon.hide();
+            } else {
+                $readonly_ind_icon.show();
+            }
+        });
+
         // Command/Edit mode
         this.events.on('edit_mode.Notebook', function () {
             that.save_widget.update_document_title();

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

@@ -30,6 +30,19 b''
     .indicator_area();
 }
 
+#readonly-indicator {
+    .pull-right();
+    .indicator_area();
+
+    margin-top: 2px;
+    margin-bottom: 0px;
+    margin-left: 0px;
+    margin-right: 0px;
+
+    // Start out hidden.
+    display: none;
+}
+
 .modal_indicator:before {
     .fa-fw();
 }

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

@@ -10711,6 +10711,22 b' ul#help_menu li a i {'
   text-align: center;
   width: auto;
 }
+#readonly-indicator {
+  float: right !important;
+  float: right;
+  color: #777777;
+  margin-left: 5px;
+  margin-right: 5px;
+  width: 11px;
+  z-index: 10;
+  text-align: center;
+  width: auto;
+  margin-top: 2px;
+  margin-bottom: 0px;
+  margin-left: 0px;
+  margin-right: 0px;
+  display: none;
+}
 .modal_indicator:before {
   width: 1.28571429em;
   text-align: center;

IPython/html/templates/notebook.html

@@ -62,6 +62,12 b' data-notebook-path="{{notebook_path}}"'
               <span class="kernel_indicator_name">Kernel</span>
               <i id="kernel_indicator_icon"></i>
             </p>
+            <i id="readonly-indicator" class="navbar-text" title='This notebook is read-only'>
+                <span class="fa-stack">
+                    <i class="fa fa-save fa-stack-1x"></i>
+                    <i class="fa fa-ban fa-stack-2x text-danger"></i>
+                </span>
+            </i>
             <i id="modal_indicator" class="navbar-text"></i>
             <span id="notification_area"></span>
             <div class="navbar-collapse collapse">