CRM-16415 Font Awesome dashlet controls

----------------------------------------
* CRM-16415: Implement Font Awesome icon font
  https://issues.civicrm.org/jira/browse/CRM-16415

diff --git a/css/dashboard.css b/css/dashboard.css
index 45215905ec9ba3e5ef359b6c33fb227ef2da83a0..cae2d31f3f33519d34997e99d8dcd61e15c2f258 100644 (file)
--- a/css/dashboard.css
+++ b/css/dashboard.css
@@ -94,33 +94,23 @@
   margin:1.6em 0 0 26px;
 }
 
-#crm-container .widget-icon {
-  background-image:url('../bower_components/jquery-ui/themes/smoothness/images/ui-icons_222222_256x240.png');
-  height:16px;
-  width:16px;
-  padding-right:2px;
+#crm-container .widget-controls .crm-i {
+  font-size: 16px;
+  padding: 0 6px;
   float: left;
   border-radius: 2px;
-}
-#crm-container .widget-icon.minimize-icon {
-  background-position:-63px -17px;
+  cursor: pointer;
+  color: #222222;
 }
 
-#crm-container .widget-icon.maximize-icon {
-  background-position:-31px -18px;
+#crm-container .widget-controls .crm-i:hover {
+  color: rgba(34, 34, 34, 0.8);
 }
 
-#crm-container .widget-icon.fullscreen-icon {
-  background-position:-48px -80px;
+#crm-container .widget-controls .crm-i.fa-expand,
+#crm-container .widget-controls .crm-i.fa-times {
   float:right;
 }
-#crm-container .widget-icon.close-icon {
-  background-position: -80px -128px;
-  float:right;
-}
-#crm-container .widget-icon:hover {
-  background-color: rgba(255, 255, 255, 0.8);
-}
 
 /* CSS for Dashlets */
 

diff --git a/js/jquery/jquery.dashboard.js b/js/jquery/jquery.dashboard.js
index 44bef065ba6d0cae6411016239b001d7996bee9f..f71baa0486e1a29da9536f947cb0f7e4c8d48093 100644 (file)
--- a/js/jquery/jquery.dashboard.js
+++ b/js/jquery/jquery.dashboard.js
@@ -306,14 +306,14 @@
       };
       widget.minimize = function() {
         $('.widget-content', widget.element).slideUp(opts.animationSpeed);
-        $(widget.controls.minimize.element).addClass( 'maximize-icon' );
-        $(widget.controls.minimize.element).removeClass( 'minimize-icon' );
+        $(widget.controls.minimize.element).addClass( 'fa-caret-right' );
+        $(widget.controls.minimize.element).removeClass( 'fa-caret-down' );
         widget.minimized = true;
       };
       widget.maximize = function() {
         $('.widget-content', widget.element).slideDown(opts.animationSpeed);
-        $(widget.controls.minimize.element).removeClass( 'maximize-icon' );
-        $(widget.controls.minimize.element).addClass( 'minimize-icon' );
+        $(widget.controls.minimize.element).removeClass( 'fa-caret-right' );
+        $(widget.controls.minimize.element).addClass( 'fa-caret-down' );
         widget.minimized = false;
       };
 
@@ -422,7 +422,7 @@
 
       // Adds controls to a widget.  id is for internal use and image file name in images/dashboard/ (a .gif).
       widget.addControl = function(id, control) {
-          var markup = '<a class="widget-icon ' + id + '-icon" alt="' + control.description + '" title="' + control.description + '"></a>';
+          var markup = '<a class="crm-i ' + control.icon + '" alt="' + control.description + '" title="' + control.description + '"></a>';
           control.element = $(markup).prependTo($('.widget-controls', widget.element)).click(control.callback);
       };
 
@@ -453,19 +453,23 @@
       widget.controls = {
         settings: {
           description: ts('Configure this dashlet'),
-          callback: widget.toggleSettings
+          callback: widget.toggleSettings,
+          icon: 'fa-wrench'
         },
         minimize: {
           description: ts('Collapse or expand'),
-          callback: widget.toggleMinimize
+          callback: widget.toggleMinimize,
+          icon: 'fa-caret-down',
         },
         fullscreen: {
           description: ts('View fullscreen'),
-          callback: widget.enterFullscreen
+          callback: widget.enterFullscreen,
+          icon: 'fa-expand',
         },
         close: {
           description: ts('Remove from dashboard'),
-          callback: widget.remove
+          callback: widget.remove,
+          icon: 'fa-times'
         }
       };
       // End public properties of widget.