CRM-15705 - Style crm buttons in Angular

diff --git a/css/civicrm.css b/css/civicrm.css
index 582ec02a4ee6c0da4534a892ad532ca29189329f..d2a55114aac3c427f7258fb28d1c109c248b5aa5 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -1957,16 +1957,6 @@ div.grippie {
   margin-left: .5em;
 }
 
-.crm-container .crm-button {
-  border: medium none;
-  cursor: pointer;
-  display: block;
-  float: left !important;
-  overflow: hidden;
-  text-shadow: 0 1px 0 black;
-  margin: 0 12px 0 0;
-}
-
 .crm-container .crm-button input {
   background: none;
   _background: #6C6C6C;
@@ -1995,7 +1985,6 @@ div.grippie {
 .crm-container a.button:link,
 .crm-container a.button:visited,
 .crm-container input.crm-form-submit,
-.crm-container .crm-button,
 .crm-container .ui-dialog-buttonset .ui-button,
 .crm-container input[type=button],
 .crm-container .crm-button {
@@ -2011,10 +2000,21 @@ div.grippie {
   border: 1px solid #3e3e3e;
 }
 
-.crm-container .crm-button {
+.crm-container span.crm-button {
+  display: block;
+  float: left !important;
+  overflow: hidden;
   padding: 1px;
 }
 
+.crm-container button.crm-button {
+  padding: 3px 6px;
+}
+
+.crm-container button.crm-button .icon {
+  margin-bottom: -4px;
+}
+
 .crm-container input.crm-form-submit,
 .crm-container input[type=button] {
   padding: 2px 6px;
@@ -2184,7 +2184,7 @@ div.grippie {
   background-image: url("../i/icons/jquery-ui-2786C2.png");
 }
 
-.crm-container .crm-button .icon {
+.crm-container span.crm-button .icon {
   margin-top: 3px;
 }
 
@@ -2201,8 +2201,8 @@ div.grippie {
   margin-left: 3px;
 }
 
-.crm-container input.crm-button.crm-icon-button {
-  position: relative;
+.crm-container .crm-button.crm-icon-button {
+  padding: 2px 2px 1px 4px;
 }
 
 .crm-container .crm-button.crm-icon-button input {
@@ -2226,6 +2226,7 @@ div.grippie {
 }
 .crm-container .red-icon,
 .crm-container a:hover .icon.delete-icon,
+.crm-container .crm-button:hover .icon.ui-icon-trash,
 .crm-container span:hover > .icon.delete-icon {
   background-image: url("../i/icons/jquery-ui-8A1F11.png");
 }

diff --git a/js/angular-crm-ui.js b/js/angular-crm-ui.js
index 3e1242ac63869d96b48585c13e70a7cf2efaaa2f..edcfbc472821d44d53f0cf6430c1b60aa6e48e14 100644 (file)
--- a/js/angular-crm-ui.js
+++ b/js/angular-crm-ui.js
@@ -699,6 +699,20 @@
       };
     })
 
+    // Example: <button crm-icon="check">Save</button>
+    .directive('crmIcon', function() {
+      return {
+        restrict: 'EA',
+        scope: {},
+        link: function (scope, element, attrs) {
+          $(element).prepend('<span class="icon ui-icon-' + attrs.crmIcon + '"></span> ');
+          if ($(element).is('button')) {
+            $(element).addClass('crm-button');
+          }
+        }
+      };
+    })
+
     // example: <div crm-ui-wizard-step crm-title="ts('My Title')" ng-form="mySubForm">...content...</div>
     // If there are any conditional steps, then be sure to set a weight explicitly on *all* steps to maintain ordering.
     // example: <div crm-ui-wizard-step="100" crm-title="..." ng-if="...">...content...</div>

diff --git a/partials/crmMailing/edit-unified.html b/partials/crmMailing/edit-unified.html
index f423a098a92da56b10852e1ec9ccbad9af83d7c6..ef6b847c3f0c98941aa30cde2f0c2751b546303d 100644 (file)
--- a/partials/crmMailing/edit-unified.html
+++ b/partials/crmMailing/edit-unified.html
@@ -45,8 +45,8 @@
       <div crm-mailing-block-schedule crm-mailing="mailing"/>
     </div>
 
-    <button ng-disabled="block.check() || crmMailing.$invalid" ng-click="submit()">{{ts('Submit Mailing')}}</button>
-    <button ng-disabled="block.check()" ng-click="save().then(leave)">{{ts('Save Draft')}}</button>
-    <button ng-disabled="block.check()" crm-confirm="{title:ts('Delete Draft?'), message:ts('Are you sure you want to delete the draft mailing?')}" on-yes="delete()">{{ts('Delete Draft')}}</button>
+    <button crm-icon="check" ng-disabled="block.check() || crmMailing.$invalid" ng-click="submit()">{{ts('Submit Mailing')}}</button>
+    <button crm-icon="disk" ng-disabled="block.check()" ng-click="save().then(leave)">{{ts('Save Draft')}}</button>
+    <button crm-icon="trash" ng-disabled="block.check()" crm-confirm="{title:ts('Delete Draft?'), message:ts('Are you sure you want to permanently delete this mailing?')}" on-yes="delete()">{{ts('Delete Draft')}}</button>
   </div>
 </form>

diff --git a/partials/crmMailing/edit-unified2.html b/partials/crmMailing/edit-unified2.html
index 6db14a278789412b8d654dc3ff114513028bafdf..c293c612943322c0e286206801255dc83510d462 100644 (file)
--- a/partials/crmMailing/edit-unified2.html
+++ b/partials/crmMailing/edit-unified2.html
@@ -41,8 +41,8 @@
       <div crm-mailing-block-schedule crm-mailing="mailing"/>
     </div>
 
-    <button ng-disabled="block.check() || crmMailing.$invalid" ng-click="submit()">{{ts('Submit Mailing')}}</button>
-    <button ng-disabled="block.check()" ng-click="save().then(leave)">{{ts('Save Draft')}}</button>
-    <button ng-disabled="block.check()" crm-confirm="{title:ts('Delete Draft?'), message:ts('Are you sure you want to delete the draft mailing?')}" on-yes="delete()">{{ts('Delete Draft')}}</button>
+    <button crm-icon="check" ng-disabled="block.check() || crmMailing.$invalid" ng-click="submit()">{{ts('Submit Mailing')}}</button>
+    <button crm-icon="disk" ng-disabled="block.check()" ng-click="save().then(leave)">{{ts('Save Draft')}}</button>
+    <button crm-icon="trash" ng-disabled="block.check()" crm-confirm="{title:ts('Delete Draft?'), message:ts('Are you sure you want to permanently delete this mailing?')}" on-yes="delete()">{{ts('Delete Draft')}}</button>
   </div>
 </form>

diff --git a/partials/crmMailing/edit-wizard.html b/partials/crmMailing/edit-wizard.html
index ae928342530504075d62040089b12a155af4caa7..ec07b9ecf34269f1cc03b51b179b88f105806a13 100644 (file)
--- a/partials/crmMailing/edit-wizard.html
+++ b/partials/crmMailing/edit-wizard.html
@@ -60,8 +60,8 @@
       </div>
 
       <span crm-ui-wizard-buttons style="float:right;">
-        <button ng-disabled="block.check()" crm-confirm="{title:ts('Delete Draft?'), message:ts('Are you sure you want to delete the draft mailing?')}" on-yes="delete()">{{ts('Delete Draft')}}</button>
-        <button ng-disabled="block.check()" ng-click="save().then(leave)">{{ts('Save Draft')}}</button>
+        <button crm-icon="trash" ng-disabled="block.check()" crm-confirm="{title:ts('Delete Draft?'), message:ts('Are you sure you want to permanently delete this mailing?')}" on-yes="delete()">{{ts('Delete Draft')}}</button>
+        <button crm-icon="disk" ng-disabled="block.check()" ng-click="save().then(leave)">{{ts('Save Draft')}}</button>
       </span>
     </div>
   </div>

diff --git a/partials/crmMailing/edit.html b/partials/crmMailing/edit.html
index fb72ceb98f3762e9093d4b2e7bd92f2a0defa9f8..c15023d969c3c536ed3c5a65fb4161faa21f8007 100644 (file)
--- a/partials/crmMailing/edit.html
+++ b/partials/crmMailing/edit.html
@@ -58,8 +58,8 @@
       </div>
 
       <span crm-ui-wizard-buttons style="float:right;">
-        <button ng-disabled="block.check()" crm-confirm="{title:ts('Delete Draft?'), message:ts('Are you sure you want to delete the draft mailing?')}" on-yes="delete()">{{ts('Delete Draft')}}</button>
-        <button ng-disabled="block.check()" ng-click="save().then(leave)">{{ts('Save Draft')}}</button>
+        <button crm-icon="trash" ng-disabled="block.check()" crm-confirm="{title:ts('Delete Draft?'), message:ts('Are you sure you want to permanently delete this mailing?')}" on-yes="delete()">{{ts('Delete Draft')}}</button>
+        <button crm-icon="disk" ng-disabled="block.check()" ng-click="save().then(leave)">{{ts('Save Draft')}}</button>
       </span>
     </div>
   </div>

diff --git a/partials/crmMailing/preview.html b/partials/crmMailing/preview.html
index 4c6cab28360bc0d1a66a9152426f879e177bc2df..224609a858f9406dd23f8546cc5b7f2834ea8992 100644 (file)
--- a/partials/crmMailing/preview.html
+++ b/partials/crmMailing/preview.html
@@ -35,7 +35,7 @@ Vars: mailing:obj, testContact:obj, testGroup:obj, crmMailing:FormController
         placeholder="example@example.org"
         />
     </div>
-    <button ng-disabled="crmMailing.$invalid || !testContact.email" ng-click="doSend({email: testContact.email})">{{ts('Send test')}}</button>
+    <button crm-icon="mail-closed" ng-disabled="crmMailing.$invalid || !testContact.email" ng-click="doSend({email: testContact.email})">{{ts('Send test')}}</button>
   </div>
   <div class="preview-group" ng-form>
     <div>
@@ -52,7 +52,7 @@ Vars: mailing:obj, testContact:obj, testGroup:obj, crmMailing:FormController
         <option value=""></option>
       </select>
     </div>
-    <button ng-disabled="crmMailing.$invalid || !testGroup.gid" ng-click="doSend({gid: testGroup.gid})">{{ts('Send test')}}</button>
+    <button crm-icon="mail-closed" ng-disabled="crmMailing.$invalid || !testGroup.gid" ng-click="doSend({gid: testGroup.gid})">{{ts('Send test')}}</button>
   </div>
   <div class="clear"></div>
 </div>

diff --git a/partials/crmMailingAB/edit.html b/partials/crmMailingAB/edit.html
index 9a508c0c1374ebe0ea90dc43c2a83227fc4abdbd..3722ad98fed1fe0c9cb588c59ac000cd27cc4157 100644 (file)
--- a/partials/crmMailingAB/edit.html
+++ b/partials/crmMailingAB/edit.html
@@ -172,11 +172,12 @@
       </div>
       <span crm-ui-wizard-buttons style="float:right;">
         <button
+          crm-icon="trash"
           ng-disabled="block.check()"
-          crm-confirm="{title:ts('Delete Draft?'), message:ts('Are you sure you want to delete the draft mailing?')}"
+          crm-confirm="{title:ts('Delete Draft?'), message:ts('Are you sure you want to permanently delete this mailing?')}"
           on-yes="delete()">{{ts('Delete Draft')}}
         </button>
-        <button ng-disabled="block.check()" ng-click="save().then(leave) ">{{ts('Save Draft')}}</button>
+        <button crm-icon="disk" ng-disabled="block.check()" ng-click="save().then(leave) ">{{ts('Save Draft')}}</button>
       </span>
     </div>
 </form>

diff --git a/partials/crmUi/wizard.html b/partials/crmUi/wizard.html
index b2afd777977b2cc4111c623db185eafaa86719ac..4988fbd05feafcee52b5287117baa046e4886c23 100644 (file)
--- a/partials/crmUi/wizard.html
+++ b/partials/crmUi/wizard.html
@@ -9,7 +9,7 @@
   </ul>
   <div class="crm-wizard-body" ng-transclude/>
   <div class="crm-wizard-buttons">
-    <button ng-click="crmUiWizardCtrl.previous()" ng-show="!crmUiWizardCtrl.$first()">Previous</button>
-    <button ng-click="crmUiWizardCtrl.next()" ng-show="!crmUiWizardCtrl.$last()" ng-disabled="!crmUiWizardCtrl.$validStep()">Next</button>
+    <button crm-icon="triangle-1-w" ng-click="crmUiWizardCtrl.previous()" ng-show="!crmUiWizardCtrl.$first()"></button>
+    <button crm-icon="triangle-1-e" ng-click="crmUiWizardCtrl.next()" ng-show="!crmUiWizardCtrl.$last()" ng-disabled="!crmUiWizardCtrl.$validStep()"></button>
   </div>
 </div>