From: Coleman Watts <coleman@civicrm.org>
Date: Sat, 14 Feb 2015 14:07:47 +0000 (-0500)
Subject: CRM-15705 - Style crm buttons in Angular
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=39f4f54ff8ac67c6be0636af8a095a7fac6aae57;p=civicrm-core.git

CRM-15705 - Style crm buttons in Angular
---

diff --git a/css/civicrm.css b/css/civicrm.css
index 582ec02a4e..d2a55114aa 100644
--- 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 3e1242ac63..edcfbc4728 100644
--- 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 f423a098a9..ef6b847c3f 100644
--- 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 6db14a2787..c293c61294 100644
--- 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 ae92834253..ec07b9ecf3 100644
--- 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 fb72ceb98f..c15023d969 100644
--- 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 4c6cab2836..224609a858 100644
--- 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 9a508c0c13..3722ad98fe 100644
--- 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 b2afd77797..4988fbd05f 100644
--- 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>