Merge pull request #21712 from colemanw/workflowMarkupFixe

message_admin Style fixes
civicrm · Oct 4, 2021 · 165db98 · 165db98
2 parents bbd7780 + 441b170
commit 165db98
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 68 deletions.
diff --git a/ext/message_admin/CRM/MessageAdmin/Page/MsgtplBasePage.php b/ext/message_admin/CRM/MessageAdmin/Page/MsgtplBasePage.php
@@ -14,8 +14,15 @@ public function run() {
         break;
     }
 
-    /** @var \Civi\Angular\AngularLoader $loader */
     CRM_Utils_System::setTitle(ts('Message Templates'));
+
+    $breadCrumb = [
+      'title' => E::ts('Message Templates'),
+      'url' => CRM_Utils_System::url('civicrm/admin/messageTemplates', NULL, FALSE, '/user'),
+    ];
+    CRM_Utils_System::appendBreadCrumb([$breadCrumb]);
+
+    /** @var \Civi\Angular\AngularLoader $loader */
     $loader = \Civi::service('angularjs.loader');
     $loader->addModules(['crmMsgadm']);
     $loader->useApp(array(

diff --git a/ext/message_admin/ang/crmMsgadm/AddTranslation.html b/ext/message_admin/ang/crmMsgadm/AddTranslation.html
@@ -19,15 +19,14 @@
     <div class="radio" ng-if="!!model.langs">
       <label>
         <input type="radio" ng-model="model.selected" value="other" name="lang" ng-disabled="!model.langs"/>
-        {{:: ts('Other')}}
 
         <select
           class="form-control"
-          crm-ui-select="{dropdownAutoWidth : true, allowClear: true, placeholder: ts('- select -')}"
+          style="min-width: 200px"
+          crm-ui-select="{dropdownAutoWidth : true, allowClear: true, placeholder: ts('Other')}"
           name="selectedOther"
           ng-model="model.selectedOther"
           ng-change="model.selected='other'">
-          <!-- "ng-click" might be better than "ng-select" but doesn't seem to work w/select2 variant -->
           <option value=""></option>
           <option ng-repeat="item in model.langs | orderBy:'label'" value="{{item.name}}" ng-disabled="!item.is_allowed">{{item.label}}</option>
         </select>

diff --git a/ext/message_admin/ang/crmMsgadm/Edit.html b/ext/message_admin/ang/crmMsgadm/Edit.html
@@ -21,47 +21,47 @@
     </div>
 
     <a name="crm-msgadm-tabs"></a>
-    <div class="panel panel-info">
+    <div class="panel panel-default">
       <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')}}
+              {{:: 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')}}
+              {{:: 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')}}
+              {{:: 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')}}
+              {{:: ts('Original') }}
             </a>
           </li>
           <li role="presentation" class="navitem pull-right" ng-show="$ctrl.tab.match('txActive|original') && !$ctrl.hasDraft() && $ctrl.allowDraft()">
             <a crm-icon="fa-plus" class="nav-link text-success" ng-click="$ctrl.createDraft($ctrl.records[$ctrl.tab])">
-              {{::ts('Create draft')}}
+              {{:: ts('Create draft') }}
             </a>
           </li>
           <li role="presentation" class="navitem pull-right" ng-show="$ctrl.tab.match('txActive|original') && $ctrl.hasDraft() && $ctrl.allowDraft()">
             <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. (Note: Changes will not take full effect until you save.)')}" on-yes="$ctrl.createDraft($ctrl.records[$ctrl.tab])">
-              {{::ts('Create draft')}}
+              {{:: 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('Abandon draft?'), message: ts('Are you sure you want to abandon this draft? (Note: Changes will not take full effect until you save.)')}" on-yes="$ctrl.deleteDraft()">
-              {{ts('Abandon draft')}}
+              {{:: ts('Abandon 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? (Note: Changes will not take full effect until you save.)')}" on-yes="$ctrl.activateDraft()">
-              {{::ts('Activate draft')}}
+              {{:: ts('Activate draft') }}
             </a>
           </li>
         </ul>
@@ -72,16 +72,20 @@
     </div>
 
     <div class="btn-group pull-right">
-      <button crm-icon="fa-check" type="button" class="btn btn-primary" ng-click="$ctrl.save()">
+      <button type="button" class="btn btn-primary" ng-click="$ctrl.save()">
+        <i class="crm-i fa-check"></i>
         {{:: ts('Save') }}
       </button>
-      <button crm-icon="fa-check-circle" type="button" class="btn btn-primary" ng-click="$ctrl.save().then($ctrl.cancel)">
+      <button type="button" class="btn btn-primary" ng-click="$ctrl.save().then($ctrl.cancel)">
+        <i class="crm-i fa-check-circle"></i>
         {{:: ts('Save and Done') }}
       </button>
-      <button crm-icon="fa-times" type="button" class="btn btn-primary" ng-click="$ctrl.cancel()">
+      <button type="button" class="btn btn-primary" ng-click="$ctrl.cancel()">
+        <i class="crm-i fa-times"></i>
         {{:: ts('Cancel') }}
       </button>
-      <button crm-icon="fa-trash" type="button" class="btn btn-danger" crm-confirm="{type: 'delete', obj: {}, title: ts('Delete translation?'), message: ts('Are you sure want to delete this translation (%1)? This will remove any current and draft versions.', {1: $ctrl.lang})}" on-yes="$ctrl.delete()" ng-if="!!$ctrl.lang">
+      <button type="button" class="btn btn-danger" crm-confirm="{type: 'delete', obj: {}, title: ts('Delete translation?'), message: ts('Are you sure want to delete this translation (%1)? This will remove any current and draft versions.', {1: $ctrl.lang})}" on-yes="$ctrl.delete()" ng-if="!!$ctrl.lang">
+        <i class="crm-i fa-trash"></i>
         {{:: ts('Delete') }}
       </button>
     </div>

diff --git a/ext/message_admin/ang/crmMsgadm/EditContent.html b/ext/message_admin/ang/crmMsgadm/EditContent.html
@@ -4,7 +4,10 @@
 
   <div class="panel panel-default">
     <div class="panel-heading">
-      <a href="" ng-click="accordions.msg_subject = !accordions.msg_subject">{{::ts('Subject')}}</a>
+      <a href ng-click="accordions.msg_subject = !accordions.msg_subject">
+        <i class="crm-i fa-caret-{{ accordions.msg_subject ? 'down' : 'right' }}"></i>
+        {{:: ts('Subject') }}
+      </a>
       <input class="form-control pull-right crm-action-menu fa-code"
              tabindex="-1"
              style="z-index:1"
@@ -26,22 +29,25 @@
 
   <div class="panel panel-default">
     <div class="panel-heading">
-      <a href="" ng-click="accordions.msg_html = !accordions.msg_html">{{::ts('HTML Content')}}</a>
+      <a href ng-click="accordions.msg_html = !accordions.msg_html">
+        <i class="crm-i fa-caret-{{ accordions.msg_html ? 'down' : 'right' }}"></i>
+        {{:: ts('HTML Content') }}
+      </a>
+      <div class="btn-group btn-group-xs pull-right" role="toolbar" aria-label="{{::ts('HTML Content: Toolbar')}}" ng-show="accordions.msg_html">
+        <button type="button" class="btn btn-secondary" title="{{::ts('Open large editor')}}" ng-click="$ctrl.openFull(ts('HTML Content'), 'msg_html', {language: 'html'})">
+          <i class="crm-i fa-expand"></i>
+        </button>
+        <button type="button" class="btn btn-secondary" title="{{::ts('Open preview')}}" ng-click="$ctrl.openPreview({formatName: 'msg_html'})">
+          <i class="crm-i fa-eye"></i>
+        </button>
+      </div>
       <input class="form-control pull-right crm-action-menu fa-code"
              tabindex="-1"
              style="z-index:1"
              crm-ui-select="{placeholder: ts('Token'), data: $ctrl.tokenList, width: '12em', dropdownAutoWidth: true}"
              on-crm-ui-select="$broadcast('insert:msg_html', selection)"
              ng-show="accordions.msg_html && !$ctrl.isDisabled()"
       />
-      &nbsp;
-      <div class="btn-group btn-group-xs pull-right" role="toolbar" aria-label="{{::ts('HTML Content: Toolbar')}}" ng-show="accordions.msg_html">
-        <button crm-icon="fa-expand" type="button" class="btn btn-default" title="{{::ts('Open large editor')}}" ng-click="$ctrl.openFull(ts('HTML Content'), 'msg_html', {language: 'html'})"></button>
-        <button crm-icon="fa-eye" type="button" class="btn btn-default" title="{{::ts('Open preview')}}" ng-click="$ctrl.openPreview({formatName: 'msg_html'})"></button>
-        <!--<button type="button" class="btn btn-default" title="{{::ts('Insert token')}}" ng-click="$ctrl.insertToken('msg_html')" crm-icon="fa-plus">-->
-        <!--  {{::ts('Token')}}-->
-        <!--</button>-->
-      </div>
       <div class="clearfix"></div>
     </div>
     <div class="panel-body" uib-collapse="!accordions.msg_html">
@@ -55,22 +61,26 @@
 
   <div class="panel panel-default">
     <div class="panel-heading">
-      <a href="" ng-click="accordions.msg_text = !accordions.msg_text">{{::ts('Text Content')}}</a>
+      <a href ng-click="accordions.msg_text = !accordions.msg_text">
+        <i class="crm-i fa-caret-{{ accordions.msg_text ? 'down' : 'right' }}"></i>
+        {{:: ts('Text Content') }}
+      </a>
+      <div class="btn-group btn-group-xs pull-right" role="toolbar" aria-label="{{::ts('Text Content: Toolbar')}}" ng-show="accordions.msg_text">
+        <button type="button" class="btn btn-secondary" title="{{ ::ts('Open large editor') }}" ng-click="$ctrl.openFull(ts('Text Content'), 'msg_text', {language: 'smarty'})">
+          <i class="crm-i fa-expand"></i>
+        </button>
+        <button type="button" class="btn btn-secondary" title="{{ ::ts('Open preview') }}" ng-click="$ctrl.openPreview({formatName: 'msg_text'})">
+          <i class="crm-i fa-eye"></i>
+        </button>
+      </div>
+      &nbsp;
       <input class="form-control pull-right crm-action-menu fa-code"
              tabindex="-1"
              style="z-index:1"
              crm-ui-select="{placeholder: ts('Token'), data: $ctrl.tokenList, width: '12em', dropdownAutoWidth: true}"
              on-crm-ui-select="$broadcast('insert:msg_text', selection)"
              ng-show="accordions.msg_text && !$ctrl.isDisabled()"
       />
-      &nbsp;
-      <div class="btn-group btn-group-xs pull-right" role="toolbar" aria-label="{{::ts('Text Content: Toolbar')}}" ng-show="accordions.msg_text">
-        <button crm-icon="fa-expand" type="button" class="btn btn-default" title="{{::ts('Open large editor')}}" ng-click="$ctrl.openFull(ts('Text Content'), 'msg_text', {language: 'smarty'})"></button>
-        <button crmicon="fa-eye" type="button" class="btn btn-default" title="{{::ts('Open preview')}}" ng-click="$ctrl.openPreview({formatName: 'msg_text'})"></button>
-        <!--<button type="button" class="btn btn-default" title="{{::ts('Insert token')}}" ng-click="$ctrl.insertToken('msg_text')" crm-icon="fa-plus">-->
-        <!--  {{::ts('Token')}}-->
-        <!--</button>-->
-      </div>
       <div class="clearfix"></div>
     </div>
     <div class="panel-body" uib-collapse="!accordions.msg_text">

diff --git a/ext/message_admin/ang/crmMsgadm/ExpandedEdit.html b/ext/message_admin/ang/crmMsgadm/ExpandedEdit.html
@@ -11,20 +11,21 @@
         </div>
         <div class="navbar-form navbar-right">
           <div class="form-group">
-            <button crm-icon="fa-eye" type="button" class="btn btn-default" ng-click="model.openPreview({formatName: model.field})">
-              {{::ts('Preview')}}
+            <button type="button" class="btn btn-default" ng-click="model.openPreview({formatName: model.field})">
+              <i class="crm-i fa-eye"></i>
+              {{ ::ts('Preview') }}
             </button>
 
-            <!-- class='fa-code' is unhappy here. At least in Firefox. -->
-            <input class="form-control crm-action-menu"
+            <input class="form-control crm-action-menu fa-code"
                    tabindex="-1"
                    style="z-index:1"
                    crm-ui-select="{placeholder: ts('Token'), data: model.tokenList, width: '12em', dropdownAutoWidth: true}"
                    on-crm-ui-select="$broadcast('insert:expanded', selection)"
             />
 
-            <button crm-icon="fa-times" type="button" class="btn btn-default" ng-click="expandedEditDlg.close()">
-              {{::ts('Close')}}
+            <button type="button" class="btn btn-default" ng-click="expandedEditDlg.close()">
+              <i class="crm-i fa-times"></i>
+              {{ ::ts('Close') }}
             </button>
 
           </div>

diff --git a/ext/message_admin/ang/crmMsgadm/ListNav.html b/ext/message_admin/ang/crmMsgadm/ListNav.html
@@ -1,19 +1,17 @@
-<div class="panel panel-info">
-
-  <ul class="panel-heading nav nav-tabs">
+<nav class="bg-info">
+  <ul class="nav nav-tabs">
     <li role="presentation"
         ng-class="{active: location.path() === '/user'}"
         ng-if="checkPerm('edit message templates') || checkPerm('edit user-driven message templates')">
-      <a ng-href="#/user">{{ts('User-Driven Messages')}}</a>
+      <a ng-href="#/user">{{:: ts('User-Driven Messages') }}</a>
     </li>
     <li role="presentation"
         ng-class="{active: location.path() === '/workflow'}"
         ng-if="checkPerm('edit message templates') || checkPerm('edit system workflow message templates')">
-      <a ng-href="#/workflow">{{ts('System Workflow Messages')}}</a>
+      <a ng-href="#/workflow">{{:: ts('System Workflow Messages' )}}</a>
     </li>
   </ul>
-
-</div>
+</nav>
 
 <div class="help">
 

diff --git a/ext/message_admin/ang/crmMsgadm/User.html b/ext/message_admin/ang/crmMsgadm/User.html
@@ -13,12 +13,12 @@
     </a>
   </div>
 
-  <table>
+  <table class="table table-striped">
     <thead>
     <tr>
-      <th>{{ts('Title')}}</th>
-      <th>{{ts('Subject')}}</th>
-      <th>{{ts('Enabled?')}}</th>
+      <th>{{:: ts('Title') }}</th>
+      <th>{{:: ts('Subject') }}</th>
+      <th>{{:: ts('Enabled?') }}</th>
       <th></th>
     </tr>
     </thead>
@@ -28,10 +28,10 @@
       <td>{{record.msg_subject}}</td>
       <td>{{record.is_active ? ts('Yes') : ts('No')}}</td>
       <td class="text-right">
-        <a class="btn btn-xs btn-default" ng-href="{{$ctrl.editUrl(record, 'legacy')}}">{{ts('Edit')}}</a>
-        <a class="btn btn-xs btn-default" ng-click="$ctrl.toggle(record)" ng-if="!!record.is_active">{{ts('Disable')}}</a>
-        <a class="btn btn-xs btn-default" ng-click="$ctrl.toggle(record)" ng-if="!record.is_active">{{ts('Enable')}}</a>
-        <a class="btn btn-xs btn-danger" crm-confirm="{type: 'delete', obj: record}" on-yes="$ctrl.delete(record)">{{ts('Delete')}}</a>
+        <a class="btn btn-xs btn-default" ng-href="{{$ctrl.editUrl(record, 'legacy')}}">{{:: ts('Edit') }}</a>
+        <a class="btn btn-xs btn-default" ng-click="$ctrl.toggle(record)" ng-if="!!record.is_active">{{:: ts('Disable') }}</a>
+        <a class="btn btn-xs btn-default" ng-click="$ctrl.toggle(record)" ng-if="!record.is_active">{{:: ts('Enable') }}</a>
+        <a class="btn btn-xs btn-danger" crm-confirm="{type: 'delete', obj: record}" on-yes="$ctrl.delete(record)">{{:: ts('Delete') }}</a>
       </td>
     </tr>
     </tbody>

diff --git a/ext/message_admin/ang/crmMsgadm/Workflow.html b/ext/message_admin/ang/crmMsgadm/Workflow.html
@@ -8,18 +8,18 @@
     <input class="form-control" type="search" id="msgtpl-filter-text" ng-model="filters.text">
   </div>
 
-  <table>
+  <table class="table table-striped">
     <thead>
     <tr>
-      <th>{{ts('Title')}}</th>
+      <th>{{:: ts('Title') }}</th>
       <th></th>
     </tr>
     </thead>
     <tbody>
     <tr ng-repeat="record in $ctrl.records | filter:filters.text | orderBy:['msg_title','_is_translation','tx_language_label']">
       <td>{{record.msg_title}}</td>
       <td class="text-right">
-        <a class="btn btn-xs btn-default" ng-href="{{$ctrl.editUrl(record)}}">{{ts('Edit')}}</a>
+        <a class="btn btn-xs btn-default" ng-href="{{$ctrl.editUrl(record)}}">{{:: ts('Edit') }}</a>
       </td>
     </tr>
     </tbody>

diff --git a/ext/message_admin/ang/crmMsgadm/WorkflowTranslated.html b/ext/message_admin/ang/crmMsgadm/WorkflowTranslated.html
@@ -8,11 +8,11 @@
     <input class="form-control" type="search" id="msgtpl-filter-text" ng-model="filters.text">
   </div>
 
-  <table>
+  <table class="table table-striped">
     <thead>
     <tr>
-      <th>{{ts('Title')}}</th>
-      <th>{{ts('Locale')}}</th>
+      <th>{{:: ts('Title') }}</th>
+      <th>{{:: ts('Locale') }}</th>
       <th></th>
       <th></th>
       <th></th>
@@ -24,23 +24,23 @@
       <td>{{record.tx_language_label || ts('Standard')}}</td>
       <td>
         <span ng-if="!record.tx_language || !!record.tx_statuses.active">
-          <a class="text-success" crm-icon="fa-file-text" title="{{ts('Edit current revision, &quot;%1&quot;, &quot;%2&quot;', {1: record.msg_title, 2: record.tx_language_label || ts('Standard')})}}" ng-href="{{$ctrl.editUrl(record)}}">{{ts('Current')}}</a>
+          <a class="text-success" crm-icon="fa-file-text" title="{{ts('Edit current revision, &quot;%1&quot;, &quot;%2&quot;', {1: record.msg_title, 2: record.tx_language_label || ts('Standard')})}}" ng-href="{{$ctrl.editUrl(record)}}">{{:: ts('Current') }}</a>
         </span>
         <span ng-if="!(!record.tx_language || !!record.tx_statuses.active)">
-          <span class="text-danger" crm-icon="fa-file-text" title="{{ts('No current revision, &quot;%1&quot;, &quot;%2&quot;', {1: record.msg_title, 2: record.tx_language_label || ts('Standard')})}}">{{ts('Current')}}</span>
+          <span class="text-danger" crm-icon="fa-file-text" title="{{ts('No current revision, &quot;%1&quot;, &quot;%2&quot;', {1: record.msg_title, 2: record.tx_language_label || ts('Standard')})}}">{{:: ts('Current') }}</span>
         </span>
       </td>
       <td>
         <span ng-if="!!record.tx_statuses.draft">
-          <a class="text-warning" crm-icon="fa-file-text-o" title="{{ts('Edit draft revision, &quot;%1&quot;, &quot;%2&quot;', {1: record.msg_title, 2: record.tx_language_label || ts('Standard')})}}" ng-href="{{$ctrl.editUrl(record, 'draft')}}">{{ts('Draft')}}</a>
+          <a class="text-warning" crm-icon="fa-file-text-o" title="{{ts('Edit draft revision, &quot;%1&quot;, &quot;%2&quot;', {1: record.msg_title, 2: record.tx_language_label || ts('Standard')})}}" ng-href="{{$ctrl.editUrl(record, 'draft')}}">{{:: ts('Draft') }}</a>
         </span>
         <span ng-if="!record.tx_statuses.draft">
-          <span class="text-muted" crm-icon="fa-file-text-o" title="{{ts('No draft revision, &quot;%1&quot;, &quot;%2&quot;', {1: record.msg_title, 2: record.tx_language_label || ts('Standard')})}}">{{ts('Draft')}}</span>
+          <span class="text-muted" crm-icon="fa-file-text-o" title="{{ts('No draft revision, &quot;%1&quot;, &quot;%2&quot;', {1: record.msg_title, 2: record.tx_language_label || ts('Standard')})}}">{{:: ts('Draft') }}</span>
         </span>
       </td>
       <td>
         <span ng-if="!record.tx_language">
-          <a class="" crm-icon="fa-plus" ng-click="$ctrl.addTranslation(record)" title="{{ts('Add translation, &quot;%1&quot;', {1: record.msg_title})}}">{{ts('Translate')}}</a>
+          <a href crm-icon="fa-plus" ng-click="$ctrl.addTranslation(record)" title="{{ts('Add translation, &quot;%1&quot;', {1: record.msg_title})}}">{{:: ts('Translate') }}</a>
         </span>
       </td>
     </tr>

diff --git a/js/Common.js b/js/Common.js
@@ -368,6 +368,9 @@ if (!CRM.vars) CRM.vars = {};
         settings.width = '' + parseInt(percentage+gap-((screenWidth - 700)/7*(gap)/100), 10) + '%';
       }
     }
+    if (settings.dialogClass && !_.includes(settings.dialogClass, 'crm-container')) {
+      settings.dialogClass += ' crm-container';
+    }
     return settings;
   };