From b512432076931b1e164f895c117e104887a8b22e Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Tue, 22 Jun 2021 14:57:18 -0700
Subject: [PATCH] msgtplui - Move per-tab action-buttons into tab-bar. More
 consistent code-style.

---
 ext/msgtplui/ang/msgtplui/Edit.html | 79 ++++++++++++++++-------------
 ext/msgtplui/ang/msgtplui/Edit.js   |  3 +-
 2 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/ext/msgtplui/ang/msgtplui/Edit.html b/ext/msgtplui/ang/msgtplui/Edit.html
index 8a12bf2f5d..68d69164a7 100644
--- a/ext/msgtplui/ang/msgtplui/Edit.html
+++ b/ext/msgtplui/ang/msgtplui/Edit.html
@@ -22,44 +22,53 @@
 
     <a name="msgtplui-tabs"></a>
     <div class="panel panel-info">
-<!--    <div class="panel" ng-class="{'panel-info': $ctrl.tab === 'original', 'panel-warning': $ctrl.tab === 'txDraft', 'panel-success': $ctrl.tab.match('main|txActive')}">-->
-      <ul class="panel-heading nav nav-pills">
-        <li role="presentation" class="navitem" ng-class="{active: $ctrl.tab == 'main'}" ng-if="!$ctrl.lang">
-          <a class="nav-link text-success" ng-click="$ctrl.tab = 'main'">
-            <span crm-icon="fa-file-text"></span>
-            {{::ts('Current')}}
-          </a>
-        </li>
-        <li role="presentation" class="navitem" ng-class="{active: $ctrl.tab == 'txActive'}" ng-if="!!$ctrl.lang">
-          <a class="nav-link text-success" ng-click="$ctrl.tab = 'txActive'">
-            <span crm-icon="fa-file-text"></span>
-            {{::ts('Current')}}
-          </a>
-        </li>
-        <li role="presentation" class="navitem" ng-class="{active: $ctrl.tab == 'txDraft'}" ng-if="$ctrl.hasDraft()">
-          <a class="nav-link text-warning" ng-click="$ctrl.tab = 'txDraft'">
-            <span crm-icon="fa-file-text-o"></span>
-            {{::ts('Draft')}}
-          </a>
-        </li>
-        <li role="presentation" class="navitem" ng-class="{active: $ctrl.tab == 'original'}">
-          <a class="nav-link text-default" ng-click="$ctrl.tab = 'original'">
-            <span crm-icon="fa-file-text"></span>
-            {{::ts('Original')}}
-          </a>
-        </li>
-      </ul>
+      <div class="panel-heading" role="navigation">
+        <ul class="nav nav-pills">
+          <li role="presentation" class="navitem" ng-class="{active: $ctrl.tab == 'main'}" ng-if="!$ctrl.lang">
+            <a crm-icon="fa-file-text" class="nav-link" ng-click="$ctrl.tab = 'main'">
+              {{::ts('Current')}}
+            </a>
+          </li>
+          <li role="presentation" class="navitem" ng-class="{active: $ctrl.tab == 'txActive'}" ng-if="!!$ctrl.lang">
+            <a crm-icon="fa-file-text" class="nav-link" ng-click="$ctrl.tab = 'txActive'">
+              {{::ts('Current')}}
+            </a>
+          </li>
+          <li role="presentation" class="navitem" ng-class="{active: $ctrl.tab == 'txDraft'}" ng-if="$ctrl.hasDraft()">
+            <a crm-icon="fa-file-text-o" class="nav-link" ng-click="$ctrl.tab = 'txDraft'">
+              {{::ts('Draft')}}
+            </a>
+          </li>
+          <li role="presentation" class="navitem" ng-class="{active: $ctrl.tab == 'original'}">
+            <a crm-icon="fa-file-text-o" class="nav-link" ng-click="$ctrl.tab = 'original'">
+              {{::ts('Original')}}
+            </a>
+          </li>
+          <li role="presentation" class="navitem pull-right" ng-show="$ctrl.tab.match('txActive|original') && !$ctrl.hasDraft()">
+            <a crm-icon="fa-plus" class="nav-link text-success" ng-click="$ctrl.createDraft($ctrl.records[$ctrl.tab])">
+              {{::ts('Create draft')}}
+            </a>
+          </li>
+          <li role="presentation" class="navitem pull-right" ng-show="$ctrl.tab.match('txActive|original') && $ctrl.hasDraft()">
+            <a crm-icon="fa-plus" class="nav-link text-warning" crm-confirm="{title: ts('Create draft?'), message: ts('There is already an existing draft. If you continue, it will be replaced with a clean draft.')}" on-yes="$ctrl.createDraft($ctrl.records[$ctrl.tab])">
+              {{::ts('Create draft')}}
+            </a>
+          </li>
+          <li role="presentation" class="navitem pull-right" ng-show="$ctrl.tab === 'txDraft'">
+            <a crm-icon="fa-trash" class="nav-link text-danger" crm-confirm="{type: 'delete', obj: {}, title: ts('Delete draft?'), message: ts('Are you sure you want to delete this draft?')}" on-yes="$ctrl.deleteDraft()">
+              {{ts('Delete draft')}}
+            </a>
+          </li>
+          <li role="presentation" class="navitem pull-right" ng-show="$ctrl.tab === 'txDraft'">
+            <a crm-icon="fa-rocket" class="nav-link text-success" crm-confirm="{title: ts('Activate draft?'), message: ts('Are you sure you want to activate this draft?')}" on-yes="$ctrl.activateDraft()">
+              {{::ts('Activate draft')}}
+            </a>
+          </li>
+        </ul>
+      </div>
       <div class="panel-body">
         <msgtplui-edit-content options="{record: $ctrl.records[$ctrl.tab], tokenList: $ctrl.tokenList, disabled: true}" ng-if="$ctrl.tab==='original'"></msgtplui-edit-content>
         <msgtplui-edit-content options="{record: $ctrl.records[$ctrl.tab], tokenList: $ctrl.tokenList}" ng-if="$ctrl.tab!=='original'"></msgtplui-edit-content>
-        <div class="text-center">
-          <div class="btn-group">
-            <button type="button" class="btn btn-success" ng-if="$ctrl.tab.match('txActive|original') && !$ctrl.hasDraft()" ng-click="$ctrl.createDraft($ctrl.records[$ctrl.tab])"><i class="fa fa-clone"/> {{ts('Create draft')}}</button>
-            <button type="button" class="btn btn-warning" ng-if="$ctrl.tab.match('txActive|original') && $ctrl.hasDraft()" crm-confirm="{title: ts('Create draft?'), message: ts('There is already an existing draft. If you continue, it will be reset as a new draft.')}" on-yes="$ctrl.createDraft($ctrl.records[$ctrl.tab])"><i class="fa fa-clone"/> {{ts('Create draft')}}</button>
-            <button type="button" class="btn btn-success" ng-if="$ctrl.tab === 'txDraft'" crm-confirm="{title: ts('Activate draft?'), message: ts('Are you sure you want to activate this draft?')}" on-yes="$ctrl.activateDraft()"><i class="fa fa-rocket"/> {{ts('Activate draft')}}</button>
-            <button type="button" class="btn btn-danger" ng-if="$ctrl.tab === 'txDraft'" crm-confirm="{type: 'delete', obj: {}, title: ts('Delete draft?'), message: ts('Are you sure you want to delete this draft?')}" on-yes="$ctrl.deleteDraft()"><i class="fa fa-trash"/> {{ts('Delete draft')}}</button>
-          </div>
-        </div>
       </div>
     </div>
 
diff --git a/ext/msgtplui/ang/msgtplui/Edit.js b/ext/msgtplui/ang/msgtplui/Edit.js
index 654f670f16..c8c2fbd0c2 100644
--- a/ext/msgtplui/ang/msgtplui/Edit.js
+++ b/ext/msgtplui/ang/msgtplui/Edit.js
@@ -178,7 +178,8 @@
 
     $ctrl.switchTab = function switchTab(tgt) {
       $ctrl.tab = tgt;
-      $('html, body').animate({scrollTop: $("a[name=msgtplui-tabs]").offset().top}, 200);
+      // Experimenting with action buttons in the tab-bar. This makes the scroll unnecessary.
+      // $('html, body').animate({scrollTop: $("a[name=msgtplui-tabs]").offset().top - $('#civicrm-menu').height()}, 200);
     };
 
     $ctrl.hasDraft = function hasDraft() {
-- 
2.25.1