Simplification

InvenTree/part/templates/part/detail.html

@@ -134,16 +134,11 @@
 
 <div class='panel panel-hidden' id='panel-part-notes'>
     <div class='panel-heading'>
-        <div class='row'>
-            <div class='col-sm-6'>
-                <h4>{% trans "Notes" %}</h4>
-            </div>
-            <div class='col-sm-6'>
-                <div class='btn-group float-right'>
-                    <button type='button' id='save-notes' title='{% trans "Save" %}' class='btn btn-success'>
-                        <span class='fas fa-save'></span> {% trans "Save Changes" %}
-                    </button>
-                </div>
+        <div class='d-flex flex-wrap'>
+            <h4>{% trans "Notes" %}</h4>
+            {% include "spacer.html" %}
+            <div class='btn-group' role='group'>
+                {% include "notes_buttons.html" %}
             </div>
         </div>
     </div>
@@ -424,7 +419,6 @@
             '{% url "api-part-detail" part.pk %}',
             {
                 editable: true,
-                save_button: '#save-notes',
             }
         );
     });

InvenTree/templates/js/translated/helpers.js

@@ -266,16 +266,31 @@ function setupNotesField(element, url, options={}) {
         shortcuts: [],
     });
 
-    mde.togglePreview();
-
+    
     if (!editable) {
+        // Set readonly
         mde.codemirror.setOption('readOnly', true);
-        $('#editor-toolbar').hide();        
-    }
+        
+        // Hide the toolbar
+        $(`#${element}`).next('.EasyMDEContainer').find('.editor-toolbar').hide();     
+        
+        // Hide the "edit" and "save" buttons
+        $('#edit-notes').hide();
+        $('#save-notes').hide();
+        
+    } else {
+        mde.togglePreview();
 
-    // Add callback for "save" button
-    if (options.save_button) {
-        $(options.save_button).click(function() {
+        // Add callback for "edit" button
+        $('#edit-notes').click(function() {
+            $('#edit-notes').hide();
+            $('#save-notes').show();
+
+            mde.togglePreview();
+        });
+
+        // Add callback for "save" button
+        $('#save-notes').click(function() {
 
             var data = {};
 

InvenTree/templates/notes_buttons.html

@@ -0,0 +1,8 @@
+{% load i18n %}
+
+<button type='button' id='edit-notes' title='{% trans "Edit" %}' class='btn btn-primary'>
+    <span class='fas fa-edit'></span> {% trans "Edit" %}
+</button>
+<button type='button' id='save-notes' title='{% trans "Save" %}' class='btn btn-success' style='display: none;'>
+    <span class='fas fa-save'></span> {% trans "Save" %}
+</button>