From: Andrew Hunt Date: Tue, 13 Oct 2015 17:47:27 +0000 (-0400) Subject: CRM-16415 Font Awesome dashlet controls X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=41ce1b88c32e4b6d36c7e90309fb24c7f128f401;p=civicrm-core.git 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 45215905ec..cae2d31f3f 100644 --- 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 44bef065ba..f71baa0486 100644 --- 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 = ''; + var markup = ''; 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.