Skip to content

Commit

Permalink
Merge pull request #18005 from agh1/button-icon-placement
Browse files Browse the repository at this point in the history 
Fix buggy placement of icons on buttons
  • Loading branch information
@seamuslee001
seamuslee001 authored Aug 4, 2020
2 parents 2dab9b6 + be37c14 commit da6c68c
Show file tree
Hide file tree
Showing 15 changed files with 50 additions and 93 deletions.
4 changes: 2 additions & 2 deletions CRM/Core/Controller.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -568,8 +568,8 @@ public function wizardHeader($currentPageName) {
public function addWizardStyle(&$wizard) {
$wizard['style'] = [
'barClass' => '',
'stepPrefixCurrent' => '<i class="crm-i fa-chevron-right" aria-hidden="true"></i>&nbsp;',
'stepPrefixPast' => '<i class="crm-i fa-check" aria-hidden="true"></i>&nbsp;',
'stepPrefixCurrent' => '<i class="crm-i fa-chevron-right" aria-hidden="true"></i> ',
'stepPrefixPast' => '<i class="crm-i fa-check" aria-hidden="true"></i> ',
'stepPrefixFuture' => ' ',
'subStepPrefixCurrent' => '&nbsp;&nbsp;',
'subStepPrefixPast' => '&nbsp;&nbsp;',
Expand Down
2 changes: 1 addition & 1 deletion CRM/Core/Smarty/plugins/block.crmButton.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ function smarty_block_crmButton($params, $text, &$smarty) {
if (strpos($icon, 'fa-') !== 0) {
$icon = "fa-$icon";
}
$iconMarkup = "<i class='crm-i $icon' aria-hidden=\"true\"></i>&nbsp; ";
$iconMarkup = "<i class='crm-i $icon' aria-hidden=\"true\"></i> ";
}
// All other params are treated as html attributes
CRM_Utils_Array::remove($params, 'icon', 'p', 'q', 'a', 'f', 'h', 'fb', 'fe');
Expand Down
2 changes: 1 addition & 1 deletion ang/crmMailingAB/EditCtrl/report.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
class="crm-hover-button action-item"
ng-href="{{statUrl(am.mailing, statType, 'report')}}"
title="{{ts('Reports for \'%1\'', {1: statType.title})}}"
crm-icon="clipboard"
crm-icon="fa-clipboard"
></a>
</td>
<td ng-show="abtest.ab.status == 'Testing'"></td>
Expand Down
2 changes: 1 addition & 1 deletion ang/crmUi.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -908,7 +908,7 @@
})

// Example for Font Awesome: <button crm-icon="fa-check">Save</button>
// Example for jQuery UI (deprecated): <button crm-icon="check">Save</button>
// Example for jQuery UI (deprecated): <button crm-icon="fa-check">Save</button>
.directive('crmIcon', function() {
return {
restrict: 'EA',
Expand Down
73 changes: 17 additions & 56 deletions css/civicrm.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1835,8 +1835,6 @@ input.crm-form-entityref {

.crm-container .crm-button input {
background: none;
_background: #6C6C6C;
/* IE6 only */
border: medium none;
color: #FFF;
cursor: pointer;
Expand All @@ -1851,6 +1849,12 @@ input.crm-form-entityref {
margin-left: 20px;
}

/* Reset WP backend min-height for buttons */

.wp-core-ui .crm-container .button {
min-height: 0;
}

.crm-container a.button,
.crm-container a.button:link,
.crm-container a.button:visited,
Expand All @@ -1870,11 +1874,19 @@ input.crm-form-entityref {
border: 1px solid #3e3e3e;
}

.crm-container a.button,
.crm-container a.button:link,
.crm-container a.button:visited,
.crm-container span.crm-button {
display: block;
float: left !important;
float: left;
overflow: hidden;
padding: 1px;
line-height: 135%;
}

/* Preserving the important but not sure why */
.crm-container span.crm-button {
float: left !important;
}

.crm-container button.crm-button {
Expand All @@ -1892,22 +1904,12 @@ input.crm-form-entityref {

.crm-container .crm-button input[type=button],
.crm-container .crm-button input.crm-form-submit {
padding: 3px 5px 2px;
padding: 0;
margin: 0;
background: none;
_background: #6C6C6C;
/* IE6 only */
border: none;
}

.crm-container a.button,
.crm-container a.button:link,
.crm-container a.button:visited {
display: block;
float: left;
line-height: 135%;
}

.crm-container .crm-button:hover,
.crm-container .crm-button:focus,
.crm-container input[type=submit]:hover,
Expand Down Expand Up @@ -2046,31 +2048,6 @@ input.crm-form-entityref {
margin-left: 3px;
}

.crm-container .crm-button.crm-icon-button {
padding: 2px 2px 1px 4px;
}

.crm-container .crm-button.crm-icon-button input {
padding-left: 18px;
}

.crm-container .crm-button.button-crm-i {
padding: 2px 0 1px 5px;
}

.crm-container .crm-button.button-crm-i input {
padding-left: 0;
}

.crm-container .crm-button-icon {
background-image: url("../i/icons/jquery-ui-FFFFFF.png");
height: 16px;
width: 16px;
display: block;
position: absolute;
pointer-events: none;
}

.crm-container .delete-icon {
background-position: -176px -96px;
}
Expand Down Expand Up @@ -2117,22 +2094,6 @@ a.crm-i:hover {
color: #86c661;
}

.crm-i-button {
position: relative;
}

.crm-i-button>.crm-i {
position: absolute;
pointer-events: none;
top: .4em;
left: .4em;
}

.crm-container .crm-button.crm-i-button input[type="button"],
.crm-container .crm-button.crm-i-button input.crm-form-submit {
padding-left: 1.6em;
}

.crm-container a.helpicon {
opacity: .8;
}
Expand Down
2 changes: 1 addition & 1 deletion js/crm.ajax.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -517,7 +517,7 @@
added.push(identifier);
}
// display:none causes the form to not submit when pressing "enter"
$el.parents(buttonContainers).css({height: 0, padding: 0, margin: 0, overflow: 'hidden'}).find('.crm-button-icon').hide();
$el.parents(buttonContainers).css({height: 0, padding: 0, margin: 0, overflow: 'hidden'});
});
$el.dialog('option', 'buttons', buttons);
}
Expand Down
4 changes: 2 additions & 2 deletions templates/CRM/Admin/Form/Preferences/Display.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,8 +161,8 @@
<td>
{$form.editor_id.html}
&nbsp;
<span class="crm-button crm-icon-button" style="display:inline-block;vertical-align:middle;float:none!important;">
<i class="crm-i fa-wrench" style="margin: 0 -18px 0 2px;" aria-hidden="true"></i>
<span class="crm-button" style="display:inline-block;vertical-align:middle;float:none!important;">
<i class="crm-i fa-wrench" aria-hidden="true"></i>
{$form.ckeditor_config.html}
</span>
</td>
Expand Down
4 changes: 2 additions & 2 deletions templates/CRM/Admin/Page/APIExplorer.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,8 +285,8 @@
</table>
</div>
<div class="crm-submit-buttons">
<span class="crm-button crm-i-button">
<i class="crm-i fa-bolt" aria-hidden="true"></i><input type="submit" value="{ts}Execute{/ts}" class="crm-form-submit" accesskey="S" title="{ts}Execute API call and display results{/ts}"/>
<span class="crm-button">
<i class="crm-i fa-bolt" aria-hidden="true"></i> <input type="submit" value="{ts}Execute{/ts}" class="crm-form-submit" accesskey="S" title="{ts}Execute API call and display results{/ts}"/>
</span>
</div>
Expand Down
4 changes: 2 additions & 2 deletions templates/CRM/Admin/Page/CKEditorConfig.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,10 +99,10 @@
</div>

<div class="crm-submit-buttons">
<span class="crm-button crm-i-button">
<span class="crm-button">
<i class="crm-i fa-wrench" aria-hidden="true"></i> <input type="submit" value="{ts}Save{/ts}" name="save" class="crm-form-submit" accesskey="S"/>
</span>
<span class="crm-button crm-i-button">
<span class="crm-button">
<i class="crm-i fa-times" aria-hidden="true"></i> <input type="submit" value="{ts}Revert to Default{/ts}" name="revert" class="crm-form-submit" onclick="return confirm('{$revertConfirm}');"/>
</span>
</div>
Expand Down
14 changes: 7 additions & 7 deletions templates/CRM/Contact/Form/Search/Custom/FullText.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
{if !$table and $summary.addShowAllLink.Contact}
<div class="crm-section full-text-view-all-section">
<a href="{crmURL p='civicrm/contact/search/custom' q="csid=`$csID`&reset=1&force=1&table=Contact&text=$text"}"
title="{ts}View all results for contacts{/ts}"><i class="crm-i fa-chevron-right" aria-hidden="true"></i>&nbsp;{ts}View all results for contacts{/ts}</a>
title="{ts}View all results for contacts{/ts}"><i class="crm-i fa-chevron-right" aria-hidden="true"></i> {ts}View all results for contacts{/ts}</a>
</div>{/if}
{* note we using location="below" because we don't want to use rows per page for now. And therefore don't put location="bottom" for now. *}
{if $table}{include file="CRM/common/pager.tpl" location="below"}{/if}
Expand Down Expand Up @@ -125,7 +125,7 @@
{if !$table and $summary.addShowAllLink.Activity}
<div class="crm-section full-text-view-all-section">
<a href="{crmURL p='civicrm/contact/search/custom' q="csid=`$csID`&reset=1&force=1&table=Activity&text=$text"}"
title="{ts}View all results for activities{/ts}"><i class="crm-i fa-chevron-right" aria-hidden="true"></i>&nbsp;{ts}View all results for activities{/ts}</a>
title="{ts}View all results for activities{/ts}"><i class="crm-i fa-chevron-right" aria-hidden="true"></i> {ts}View all results for activities{/ts}</a>
</div>
{/if}
{if $table}{include file="CRM/common/pager.tpl" location="below"}{/if}
Expand Down Expand Up @@ -182,7 +182,7 @@
{if !$table and $summary.addShowAllLink.Case}
<div class="crm-section full-text-view-all-section">
<a href="{crmURL p='civicrm/contact/search/custom' q="csid=`$csID`&reset=1&force=1&table=Case&text=$text"}"
title="{ts}View all results for cases{/ts}"><i class="crm-i fa-chevron-right" aria-hidden="true"></i>&nbsp;{ts}View all results for cases{/ts}</a>
title="{ts}View all results for cases{/ts}"><i class="crm-i fa-chevron-right" aria-hidden="true"></i> {ts}View all results for cases{/ts}</a>
</div>
{/if}
{if $table}{include file="CRM/common/pager.tpl" location="below"}{/if}
Expand Down Expand Up @@ -236,7 +236,7 @@
{if !$table and $summary.addShowAllLink.Contribution}
<div class="crm-section full-text-view-all-section">
<a href="{crmURL p='civicrm/contact/search/custom' q="csid=`$csID`&reset=1&force=1&table=Contribution&text=$text"}"
title="{ts}View all results for contributions{/ts}"><i class="crm-i fa-chevron-right" aria-hidden="true"></i>&nbsp;{ts}View all results for contributions{/ts}</a>
title="{ts}View all results for contributions{/ts}"><i class="crm-i fa-chevron-right" aria-hidden="true"></i> {ts}View all results for contributions{/ts}</a>
</div>
{/if}
{if $table}{include file="CRM/common/pager.tpl" location="below"}{/if}
Expand Down Expand Up @@ -293,7 +293,7 @@
{if !$table and $summary.addShowAllLink.Participant}
<div class="crm-section full-text-view-all-section"><a
href="{crmURL p='civicrm/contact/search/custom' q="csid=`$csID`&reset=1&force=1&table=Participant&text=$text"}"
title="{ts}View all results for participants{/ts}"><i class="crm-i fa-chevron-right" aria-hidden="true"></i>&nbsp;{ts}View all results for participants{/ts}</a>
title="{ts}View all results for participants{/ts}"><i class="crm-i fa-chevron-right" aria-hidden="true"></i> {ts}View all results for participants{/ts}</a>
</div>{/if}
{if $table}{include file="CRM/common/pager.tpl" location="below"}{/if}
{* END Actions/Results section *}
Expand Down Expand Up @@ -349,7 +349,7 @@
{if !$table and $summary.addShowAllLink.Membership}
<div class="crm-section full-text-view-all-section">
<a href="{crmURL p='civicrm/contact/search/custom' q="csid=`$csID`&reset=1&force=1&table=Membership&text=$text"}"
title="{ts}View all results for memberships{/ts}"><i class="crm-i fa-chevron-right" aria-hidden="true"></i>&nbsp;{ts}View all results for memberships{/ts}</a>
title="{ts}View all results for memberships{/ts}"><i class="crm-i fa-chevron-right" aria-hidden="true"></i> {ts}View all results for memberships{/ts}</a>
</div>
{/if}
{if $table}{include file="CRM/common/pager.tpl" location="below"}{/if}
Expand Down Expand Up @@ -395,7 +395,7 @@
{if !$table and $summary.addShowAllLink.File}
<div class="crm-section full-text-view-all-section">
<a href="{crmURL p='civicrm/contact/search/custom' q="csid=`$csID`&reset=1&force=1&table=File&text=$text"}"
title="{ts}View all results for files{/ts}"><i class="crm-i fa-chevron-right" aria-hidden="true"></i>&nbsp;{ts}View all results for files{/ts}</a>
title="{ts}View all results for files{/ts}"><i class="crm-i fa-chevron-right" aria-hidden="true"></i> {ts}View all results for files{/ts}</a>
</div>{/if}
{if $table}{include file="CRM/common/pager.tpl" location="below"}{/if}
{* END Actions/Results section *}
Expand Down
2 changes: 1 addition & 1 deletion templates/CRM/Event/Form/ParticipantFeeSelection.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ CRM.$(function($) {
<div class="crm-submit-buttons">{include file="CRM/common/formButtons.tpl" location="bottom"}</div>
{if !$email}
<div class="messages status no-popup">
<i class="crm-i fa-info-circle" aria-hidden="true"></i>&nbsp;{ts}You will not be able to send an automatic email receipt for this payment because there is no email address recorded for this contact. If you want a receipt to be sent when this payment is recorded, click Cancel and then click Edit from the Summary tab to add an email address before recording the payment.{/ts}
<i class="crm-i fa-info-circle" aria-hidden="true"></i> {ts}You will not be able to send an automatic email receipt for this payment because there is no email address recorded for this contact. If you want a receipt to be sent when this payment is recorded, click Cancel and then click Edit from the Summary tab to add an email address before recording the payment.{/ts}
</div>
{/if}
<table class="form-layout">
Expand Down
2 changes: 1 addition & 1 deletion templates/CRM/Event/Page/DashBoard.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
{if $actionColumn}
<td class="crm-event-isMap">
{if $values.isMap}
<a href="{$values.isMap}" title="{ts}Map event location{/ts}"><i class="crm-i fa-map-marker" aria-hidden="true"></i>&nbsp;{ts}Map{/ts}</a>
<a href="{$values.isMap}" title="{ts}Map event location{/ts}"><i class="crm-i fa-map-marker" aria-hidden="true"></i> {ts}Map{/ts}</a>
&nbsp;|&nbsp;
{/if}
{if $values.configure}
Expand Down
2 changes: 1 addition & 1 deletion templates/CRM/Report/Form/Actions.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<tr>
{include file="CRM/common/tasks.tpl" location="botton"}
{if $instanceUrl}
<td>&nbsp;&nbsp;<i class="crm-i fa-chevron-right" aria-hidden="true"></i>&nbsp;<a href="{$instanceUrl}">{ts}Existing report(s) from this template{/ts}</a></td>
<td>&nbsp;&nbsp;<i class="crm-i fa-chevron-right" aria-hidden="true"></i> <a href="{$instanceUrl}">{ts}Existing report(s) from this template{/ts}</a></td>
{/if}
</tr>
</table>
Expand Down
20 changes: 10 additions & 10 deletions templates/CRM/Tag/Page/Tag.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -463,16 +463,16 @@
<% {rdelim} %>
<div class="crm-submit-buttons">
<a href="{crmURL p="civicrm/tag/edit" q="action=add&parent_id="}<%= tagset || '' %>" class="button crm-popup">
<span><i class="crm-i fa-plus" aria-hidden="true"></i>&nbsp; {ts}Add Tag{/ts}</span>
<span><i class="crm-i fa-plus" aria-hidden="true"></i> {ts}Add Tag{/ts}</span>
</a>
<% if(tagset && adminTagsets) {ldelim} %>
<a href="{crmURL p="civicrm/tag/edit" q="action=update&id="}<%= tagset %>" class="button crm-popup tagset-action-update">
<span><i class="crm-i fa-pencil" aria-hidden="true"></i>&nbsp; {ts}Edit Set{/ts}</span>
<span><i class="crm-i fa-pencil" aria-hidden="true"></i> {ts}Edit Set{/ts}</span>
</a>
<% {rdelim} %>
<% if(tagset && !length && adminTagsets && (!is_reserved || adminReserved)) {ldelim} %>
<a href="{crmURL p="civicrm/tag/edit" q="action=delete&id="}<%= tagset %>" class="button crm-popup small-popup tagset-action-delete">
<span><i class="crm-i fa-trash" aria-hidden="true"></i>&nbsp; {ts}Delete Set{/ts}</span>
<span><i class="crm-i fa-trash" aria-hidden="true"></i> {ts}Delete Set{/ts}</span>
</a>
<% {rdelim} %>
</div>
Expand Down Expand Up @@ -519,21 +519,21 @@
<div class="crm-submit-buttons">
<% if(!tagset) {ldelim} %>
<a href="{crmURL p="civicrm/tag/edit" q="action=add&parent_id="}<%= id %>" class="button crm-popup" title="{ts}Create new tag under this one{/ts}">
<span><i class="crm-i fa-plus" aria-hidden="true"></i>&nbsp; {ts}Add Child{/ts}</span>
<span><i class="crm-i fa-plus" aria-hidden="true"></i> {ts}Add Child{/ts}</span>
</a>
<% {rdelim} %>
<a href="{crmURL p="civicrm/tag/edit" q="action=add&clone_from="}<%= id %>" class="button crm-popup" title="{ts}Duplicate this tag{/ts}">
<span><i class="crm-i fa-copy" aria-hidden="true"></i>&nbsp; {ts}Clone Tag{/ts}</span>
<span><i class="crm-i fa-copy" aria-hidden="true"></i> {ts}Clone Tag{/ts}</span>
</a>
<% if(!data.is_reserved || adminReserved) {ldelim} %>
<% if(tagsetCount) {ldelim} %>
<a href="#move" class="button move-tag-button" title="{ts}Move to a different tagset{/ts}">
<span><i class="crm-i fa-share-square-o" aria-hidden="true"></i>&nbsp; {ts}Move Tag{/ts}</span>
<span><i class="crm-i fa-share-square-o" aria-hidden="true"></i> {ts}Move Tag{/ts}</span>
</a>
<% {rdelim} %>
<% if(!hasChildren) {ldelim} %>
<a href="{crmURL p="civicrm/tag/edit" q="action=delete&id="}<%= id %>" class="button crm-popup small-popup">
<span><i class="crm-i fa-trash" aria-hidden="true"></i>&nbsp; {ts}Delete{/ts}</span>
<span><i class="crm-i fa-trash" aria-hidden="true"></i> {ts}Delete{/ts}</span>
</a>
<% {rdelim} %>
<% {rdelim} %>
Expand All @@ -551,16 +551,16 @@
<div class="crm-submit-buttons">
<% if(!reserved || adminReserved) {ldelim} %>
<a href="{crmURL p="civicrm/tag/merge" q="id="}<%= items.join() %>" class="button crm-popup small-popup" title="{ts}Combine tags into one{/ts}">
<span><i class="crm-i fa-compress" aria-hidden="true"></i>&nbsp; {ts}Merge Tags{/ts}</span>
<span><i class="crm-i fa-compress" aria-hidden="true"></i> {ts}Merge Tags{/ts}</span>
</a>
<% if(tagsetCount) {ldelim} %>
<a href="#move" class="button move-tag-button" title="{ts}Move to a different tagset{/ts}">
<span><i class="crm-i fa-share-square-o" aria-hidden="true"></i>&nbsp; {ts}Move Tags{/ts}</span>
<span><i class="crm-i fa-share-square-o" aria-hidden="true"></i> {ts}Move Tags{/ts}</span>
</a>
<% {rdelim} %>
<% if(!hasChildren) {ldelim} %>
<a href="{crmURL p="civicrm/tag/edit" q="action=delete&id="}<%= items.join() %>" class="button crm-popup small-popup">
<span><i class="crm-i fa-trash" aria-hidden="true"></i>&nbsp; {ts}Delete All{/ts}</span>
<span><i class="crm-i fa-trash" aria-hidden="true"></i> {ts}Delete All{/ts}</span>
</a>
<% {rdelim} %>
<% {rdelim} %>
Expand Down
6 changes: 1 addition & 5 deletions templates/CRM/common/formButtons.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,10 @@
{crmGetAttribute html=$html attr='crm-icon' assign='icon'}
{capture assign=iconPrefix}{$icon|truncate:3:"":true}{/capture}
{if $icon && $iconPrefix eq 'fa-'}
{assign var='buttonClass' value=' crm-i-button'}
{capture assign=iconDisp}<i class="crm-i {$icon}" aria-hidden="true"></i>{/capture}
{elseif $icon}
{assign var='buttonClass' value=' crm-icon-button'}
{capture assign=iconDisp}<span class="crm-button-icon ui-icon-{$icon}"> </span>{/capture}
{/if}
{crmGetAttribute html=$html attr='disabled' assign='disabled'}
<span class="crm-button crm-button-type-{$key|crmBtnType} crm-button{$key}{$buttonClass}{if $disabled} crm-button-disabled{/if}"{if $buttonStyle} style="{$buttonStyle}"{/if}>
<span class="crm-button crm-button-type-{$key|crmBtnType} crm-button{$key}{if $disabled} crm-button-disabled{/if}"{if $buttonStyle} style="{$buttonStyle}"{/if}>
{$iconDisp}
{$html}
</span>
Expand Down

0 comments on commit da6c68c

Please sign in to comment.