From 06adc9e2cb7b56d3f12288577dad2d63840ef84f Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Wed, 16 Jun 2021 00:50:47 -0700
Subject: [PATCH] msgtplui - Move "HTML" and "Text" content into accordions.
 Use Monaco.

---
 ext/msgtplui/ang/msgtplui/Edit.html           |  1 -
 ext/msgtplui/ang/msgtpluiEditContent.aff.html | 40 +++++++++----------
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/ext/msgtplui/ang/msgtplui/Edit.html b/ext/msgtplui/ang/msgtplui/Edit.html
index a2b9d7dc99..c2ab16046d 100644
--- a/ext/msgtplui/ang/msgtplui/Edit.html
+++ b/ext/msgtplui/ang/msgtplui/Edit.html
@@ -37,7 +37,6 @@
       </ul>
       <div class="panel-body">
         <msgtplui-edit-content options="{record: $ctrl.records[$ctrl.tab], disabled: $ctrl.tab==='original'}"></msgtplui-edit-content>
-<!--        <msgtplui-edit-content options="" />-->
       </div>
     </div>
 
diff --git a/ext/msgtplui/ang/msgtpluiEditContent.aff.html b/ext/msgtplui/ang/msgtpluiEditContent.aff.html
index 7ab15875af..265dde56e7 100644
--- a/ext/msgtplui/ang/msgtpluiEditContent.aff.html
+++ b/ext/msgtplui/ang/msgtpluiEditContent.aff.html
@@ -14,28 +14,28 @@
       ng-disabled="options.disabled" />
   </div>
 
-  <div class="form-group">
-    <label for="msgtpl_text">
-      {{:: ts('Text') }} <span class="crm-marker">*</span>
-    </label>
-    <textarea
-      ng-model="options.record.msg_text"
-      class="form-control" id="msgtpl_text"
-      required
-      title="{{:: ts('Required') }}"
-      ng-disabled="options.disabled"></textarea>
+  <div crm-ui-accordion="{title: ts('HTML Content'), collapsed: false}">
+    <!-- At time of writing, changes to disabled/readOnly don't propagate dynamically. So use separate widgets. -->
+    <div ng-if="options.disabled"
+      crm-monaco="{language: 'html', readOnly: true}"
+      ng-model="options.record.msg_html">
+    </div>
+    <div ng-if="!options.disabled"
+       crm-monaco="{language: 'html'}"
+       ng-model="options.record.msg_html">
+    </div>
   </div>
 
-  <div class="form-group">
-    <label for="msgtpl_html">
-      {{:: ts('Text') }} <span class="crm-marker">*</span>
-    </label>
-    <textarea
-      ng-model="options.record.msg_html"
-      class="form-control" id="msgtpl_html"
-      required
-      title="{{:: ts('Required') }}"
-      ng-disabled="options.disabled"></textarea>
+  <div crm-ui-accordion="{title: ts('Text Content'), collapsed: true}">
+    <!-- At time of writing, changes to disabled/readOnly don't propagate dynamically. So use separate widgets. -->
+    <div ng-if="options.disabled"
+       crm-monaco="{language: 'smarty', readOnly: true}"
+       ng-model="options.record.msg_text">
+    </div>
+    <div ng-if="!options.disabled"
+       crm-monaco="{language: 'smarty'}"
+       ng-model="options.record.msg_text">
+    </div>
   </div>
 
 </ng-form>
-- 
2.25.1