Show editor in read-only mode when using runtime mode production

umbraco · Jul 20, 2022 · 40eae24 · 40eae24
1 parent 930b21f
commit 40eae24
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
@@ -83,9 +83,7 @@
     vm.save = function (suppressNotification) {
       vm.page.saveButtonState = "busy";
 
-      if (vm.editor) {
-        vm.template.content = vm.editor.getValue();
-      }
+      vm.template.content = vm.editor.getValue();
 
       contentEditingHelper.contentEditorPerformSave({
         saveMethod: templateResource.save,
@@ -228,7 +226,10 @@
         onLoad: function (_editor) {
           vm.editor = _editor;
 
-          //Update the auto-complete method to use ctrl+alt+space
+          // Set read-only when using runtime mode Production
+          _editor.setReadOnly(vm.runtimeModeProduction);
+
+          // Update the auto-complete method to use ctrl+alt+space
           _editor.commands.bindKey("ctrl-alt-space", "startAutocomplete");
 
           // Unassigns the keybinding (That was previously auto-complete)

diff --git a/src/Umbraco.Web.UI.Client/src/views/templates/edit.html b/src/Umbraco.Web.UI.Client/src/views/templates/edit.html
@@ -23,15 +23,13 @@
 
             <umb-editor-container>
                 <umb-box>
-                    <umb-box-content ng-if="vm.runtimeModeProduction">
-                      <div class="umb-alert umb-alert--info">
-                        <localize key="template_runtimeModeProduction">Template content is not editable when using runtime mode <code>Production</code>.</localize>
-                      </div>
-                    </umb-box-content>
-
-                    <umb-box-content ng-if="!vm.runtimeModeProduction">
+
+                    <umb-box-content>
+                        <div class="umb-alert umb-alert--info mb3" ng-if="vm.runtimeModeProduction">
+                          <localize key="template_runtimeModeProduction">Template content is not editable when using runtime mode <code>Production</code>.</localize>
+                        </div>
 
-                        <div class="flex" style="margin-bottom: 30px;">
+                        <div class="flex mb3" ng-if="!vm.runtimeModeProduction">
 
                             <div class="flex">
 
@@ -99,7 +97,7 @@
 
                         <div
                             data-element="code-editor"
-                            auto-scale="85"
+                            auto-scale="90"
                             umb-ace-editor="vm.aceOption"
                             model="vm.template.content">
                         </div>