Add helper functions and little review size of badges
This commit is contained in:
John BOTELLA
parent
237bc23463
commit
b222c44bb9
@ -7920,3 +7920,130 @@ function roundUpToNextMultiple($n, $x = 5)
|
||||
{
|
||||
return (ceil($n)%$x === 0) ? ceil($n) : round(($n+$x/2)/$x)*$x;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $label label of badge no html : use in alt attribute for accessibility
|
||||
* @param string $html optional : label of badge with html
|
||||
* @param string $type type of badge : Primary Secondary Success Danger Warning Info Light Dark status0 status1 status2 status3 status4 status5 status6 status7 status8 status9
|
||||
* @param string $mode
|
||||
* @param array $params
|
||||
* @return string
|
||||
*/
|
||||
function badgeHelper($label, $html='', $type='primary', $mode='', $url='', $params=array())
|
||||
{
|
||||
|
||||
if(empty($html)){
|
||||
$html = $label;
|
||||
}
|
||||
|
||||
$attr=array(
|
||||
'class'=>'badge'.(!empty($mode)?' badge-'.$mode:'').(!empty($type)?' badge-'.$type:'')
|
||||
,'aria-label'=>$label
|
||||
);
|
||||
|
||||
if(!empty($url)){
|
||||
$attr['href'] = $url;
|
||||
}
|
||||
|
||||
if($mode==='dot')
|
||||
{
|
||||
$attr['class'].= ' classfortooltip';
|
||||
$attr['title'] = $html;
|
||||
$html='';
|
||||
}
|
||||
|
||||
// Override attr
|
||||
if(!empty($params['attr']) && is_array($params['attr'])){
|
||||
foreach($params['attr']as $key => $value){
|
||||
$attr[$key] = $value;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// escape all attribute
|
||||
$attr = array_map('dol_escape_htmltag', $attr);
|
||||
|
||||
$TCompiledAttr = array();
|
||||
foreach($attr as $key => $value){
|
||||
$TCompiledAttr[] = $key.'="'.$value.'"';
|
||||
}
|
||||
|
||||
$compiledAttributes = !empty($TCompiledAttr)?implode(' ',$TCompiledAttr):'';
|
||||
|
||||
$tag = !empty($url)?'a':'span';
|
||||
|
||||
|
||||
return '<'.$tag.' '.$compiledAttributes.'>'.$html.'</'.$tag.'>';
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param string $statusLabel label of badge no html : use in alt attribute for accessibility
|
||||
* @param string $html optional : label of badge with html
|
||||
* @param string $statusType status0 status1 status2 status3 status4 status5 status6 status7 status8 status9 : image name or badge name
|
||||
* @param int $displayMode for retrocompatibility 0=label only, 1=label + Picto, 2=Picto, 3=Picto + label
|
||||
* @param string $url
|
||||
* @param array $params
|
||||
* @return string
|
||||
*/
|
||||
function statusHelper($statusLabel='', $html='', $statusType='status0', $displayMode=0, $url='', $params=array())
|
||||
{
|
||||
global $conf;
|
||||
|
||||
// image's filename are still in French
|
||||
$statusImg=array(
|
||||
'status0' => 'statut0'
|
||||
,'status1' => 'statut1'
|
||||
,'status2' => 'statut2'
|
||||
,'status3' => 'statut3'
|
||||
,'status4' => 'statut4'
|
||||
,'status5' => 'statut5'
|
||||
,'status6' => 'statut6'
|
||||
,'status7' => 'statut7'
|
||||
,'status8' => 'statut8'
|
||||
,'status9' => 'statut9'
|
||||
);
|
||||
|
||||
if($displayMode==0){
|
||||
$return = !empty($html)?$html:$statusLabel;
|
||||
}
|
||||
// use status with images
|
||||
elseif(empty($conf->global->MAIN_STATUS_USES_CSS)){
|
||||
$return = '';
|
||||
$htmlLabel = '<span class="hideonsmartphone">'.(!empty($html)?$html:$statusLabel).'</span>';
|
||||
|
||||
if(!empty($statusImg[$statusType])){
|
||||
$htmlImg = img_picto($statusLabel, $statusImg[$statusType]);
|
||||
}else{
|
||||
$htmlImg = img_picto($statusLabel, $statusType);
|
||||
}
|
||||
|
||||
|
||||
|
||||
if($displayMode===1){
|
||||
$return = $htmlLabel .' '. $htmlImg;
|
||||
}
|
||||
elseif($displayMode===2){
|
||||
$return = $htmlImg;
|
||||
}
|
||||
elseif($displayMode===3){
|
||||
$return = $htmlImg .' '. $htmlLabel;
|
||||
}
|
||||
else{
|
||||
$return = !empty($html)?$html:$statusLabel;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Use new badge
|
||||
if(!empty($conf->global->MAIN_STATUS_USES_CSS) && !empty($displayMode)){
|
||||
|
||||
$mode = 'pill';
|
||||
if($displayMode == 2)$mode = 'dot';
|
||||
|
||||
$return = badgeHelper($statusLabel, $html,$statusType,$mode);
|
||||
}
|
||||
|
||||
return $return;
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ if (! defined('ISLOADEDBYSTEELSHEET')) die('Must be call by steelsheet'); ?>
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: .2em .35em;
|
||||
padding: .1em .35em;
|
||||
font-size: 80%;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1;
|
||||
@ -16,9 +16,10 @@ if (! defined('ISLOADEDBYSTEELSHEET')) die('Must be call by steelsheet'); ?>
|
||||
vertical-align: baseline;
|
||||
border-radius: .25rem;
|
||||
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
||||
border-width: 3px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: rgba(255,255,255,0);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.badge-pill {
|
||||
@ -30,7 +31,8 @@ if (! defined('ISLOADEDBYSTEELSHEET')) die('Must be call by steelsheet'); ?>
|
||||
.badge-dot {
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
padding: 0.8em;
|
||||
padding: 0.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a.badge:focus, a.badge:hover {
|
||||
@ -161,7 +163,7 @@ a.badge-dark:focus, a.badge-dark:hover {
|
||||
|
||||
<?php for ($i = 0; $i <= 9; $i++) {
|
||||
|
||||
print "\n/* STATUS-".$i." */\n";
|
||||
print "\n/* STATUS".$i." */\n";
|
||||
|
||||
$thisBadgeBackgroundColor = $thisBadgeBorderColor = ${'badgeStatus'.$i};
|
||||
|
||||
@ -173,7 +175,7 @@ a.badge-dark:focus, a.badge-dark:hover {
|
||||
$thisBadgeBackgroundColor = "#fff";
|
||||
}
|
||||
|
||||
print ".badge-status-".$i." {\n";
|
||||
print ".badge-status".$i." {\n";
|
||||
print " color: ".$thisBadgeTextColor." !important;\n";
|
||||
|
||||
if(in_array($i, $TBadgeBorderOnly)){
|
||||
@ -183,12 +185,12 @@ a.badge-dark:focus, a.badge-dark:hover {
|
||||
print " background-color: ".$thisBadgeBackgroundColor.";\n";
|
||||
print "}\n";
|
||||
|
||||
print ".badge-status-".$i.".focus, .badge-status-".$i.":focus {\n";
|
||||
print ".badge-status".$i.".focus, .badge-status".$i.":focus {\n";
|
||||
print " outline: 0;\n";
|
||||
print " box-shadow: 0 0 0 0.2rem ".colorHexToRgb($thisBadgeBackgroundColor, 0.5).";\n";
|
||||
print "}\n";
|
||||
|
||||
print ".badge-status-".$i.":focus, .badge-status-".$i.":hover {\n";
|
||||
print ".badge-status".$i.":focus, .badge-status".$i.":hover {\n";
|
||||
print " color: ".$thisBadgeTextColor." !important;\n";
|
||||
print " background-color: ".colorDarker($thisBadgeBackgroundColor, 10).";\n";
|
||||
if(in_array($i, $TBadgeBorderOnly)){
|
||||
|
||||
@ -1,3 +1,18 @@
|
||||
<?php
|
||||
|
||||
if (! defined('NOREQUIRESOC')) define('NOREQUIRESOC', '1');
|
||||
if (! defined('NOCSRFCHECK')) define('NOCSRFCHECK', 1);
|
||||
if (! defined('NOTOKENRENEWAL')) define('NOTOKENRENEWAL', 1);
|
||||
if (! defined('NOLOGIN')) define('NOLOGIN', 1); // File must be accessed by logon page so without login
|
||||
if (! defined('NOREQUIREHTML')) define('NOREQUIREHTML', 1);
|
||||
if (! defined('NOREQUIREAJAX')) define('NOREQUIREAJAX', '1');
|
||||
|
||||
session_cache_limiter('public');
|
||||
|
||||
require_once '../../../main.inc.php';
|
||||
require_once DOL_DOCUMENT_ROOT.'/core/lib/functions.lib.php';
|
||||
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@ -6,6 +21,7 @@
|
||||
<meta name="description" content="Documentation and examples for theme.">
|
||||
|
||||
<link href="../style.css.php" rel="stylesheet">
|
||||
|
||||
<link href="doc.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="docpage" >
|
||||
@ -16,7 +32,7 @@
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code class="highlighter-rouge">em</code> units.</p>
|
||||
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and em units.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
|
||||
@ -29,14 +45,14 @@
|
||||
|
||||
<figure class="highlight">
|
||||
<pre>
|
||||
<code class="language-html" data-lang="html">
|
||||
|
||||
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
|
||||
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
|
||||
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
|
||||
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
|
||||
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
|
||||
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
|
||||
</code>
|
||||
|
||||
</pre>
|
||||
</figure>
|
||||
|
||||
@ -48,11 +64,11 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html">
|
||||
<figure class="highlight"><pre>
|
||||
<button type="button" class="button">
|
||||
Notifications <span class="badge badge-primary">4</span>
|
||||
</button>
|
||||
</code></pre></figure>
|
||||
</pre></figure>
|
||||
|
||||
<div class="warning">
|
||||
<p>Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.</p>
|
||||
@ -71,14 +87,14 @@
|
||||
|
||||
<figure class="highlight">
|
||||
<pre>
|
||||
<code class="language-html" data-lang="html">
|
||||
|
||||
|
||||
<button type="button" class="btn btn-primary">
|
||||
Profile <span class="badge badge-light" aria-label="9 unread messages" >9</span>
|
||||
<span class="sr-only">unread messages</span>
|
||||
</button>
|
||||
|
||||
</code>
|
||||
|
||||
</pre>
|
||||
</figure>
|
||||
|
||||
@ -100,7 +116,7 @@
|
||||
|
||||
<figure class="highlight">
|
||||
<pre>
|
||||
<code class="language-html" data-lang="html">
|
||||
|
||||
<span class="badge badge-primary">Primary</span>
|
||||
<span class="badge badge-secondary">Secondary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
@ -109,14 +125,14 @@
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-light">Light</span>
|
||||
<span class="badge badge-dark">Dark</span>
|
||||
</code>
|
||||
|
||||
</pre>
|
||||
</figure>
|
||||
|
||||
<div class="warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -127,20 +143,20 @@
|
||||
|
||||
<div class="bd-example">
|
||||
<?php for ($i = 0; $i <= 9; $i++): ?>
|
||||
<span class="badge badge-status-<?php print $i; ?>" >status-<?php print $i; ?></span>
|
||||
<span class="badge badge-status<?php print $i; ?>" >status-<?php print $i; ?></span>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><pre><code class="language-html" data-lang="html">
|
||||
<figure class="highlight"><pre><pre>
|
||||
<?php for ($i = 0; $i <= 9; $i++): ?>
|
||||
<span class="badge badge-status-<?php print $i; ?>" >status-<?php print $i; ?></span>
|
||||
<span class="badge badge-status<?php print $i; ?>" >status<?php print $i; ?></span>
|
||||
<?php endfor; ?>
|
||||
</code></pre></figure>
|
||||
</pre></figure>
|
||||
|
||||
|
||||
<h2 id="pill-badges">Pill badges</h2>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">.badge-pill</code> modifier class to make badges more rounded (with a larger <code class="highlighter-rouge">border-radius</code> and additional horizontal <code class="highlighter-rouge">padding</code>).</p>
|
||||
<p>Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@ -154,14 +170,14 @@
|
||||
<span class="badge badge-pill badge-dark">Dark</span>
|
||||
|
||||
<?php for ($i = 0; $i <= 9; $i++): ?>
|
||||
<span class="badge badge-pill badge-status-<?php print $i; ?>" >status-<?php print $i; ?></span>
|
||||
<span class="badge badge-pill badge-status<?php print $i; ?>" >status<?php print $i; ?></span>
|
||||
<?php endfor; ?>
|
||||
|
||||
</div>
|
||||
|
||||
<figure class="highlight">
|
||||
<pre>
|
||||
<code class="language-html" data-lang="html">
|
||||
|
||||
<span class="badge badge-pill badge-primary">Primary</span>
|
||||
<span class="badge badge-pill badge-secondary">Secondary</span>
|
||||
<span class="badge badge-pill badge-success">Success</span>
|
||||
@ -171,15 +187,15 @@
|
||||
<span class="badge badge-pill badge-light">Light</span>
|
||||
<span class="badge badge-pill badge-dark">Dark</span>
|
||||
<?php for ($i = 0; $i <= 9; $i++): ?>
|
||||
<span class="badge badge-pill badge-status-<?php print $i; ?>" >status-<?php print $i; ?></span>
|
||||
<span class="badge badge-pill badge-status<?php print $i; ?>" >status<?php print $i; ?></span>
|
||||
<?php endfor; ?>
|
||||
</code></pre></figure>
|
||||
</pre></figure>
|
||||
|
||||
|
||||
|
||||
<h2 id="dot-badges">Dot badges</h2>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">.dot-pill</code> modifier class to make badges circle.</p>
|
||||
<p>.dot-pill modifier class to make badges circle.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@ -193,26 +209,26 @@
|
||||
<span class="badge badge-dot badge-dark"></span>
|
||||
|
||||
<?php for ($i = 0; $i <= 9; $i++): ?>
|
||||
<span class="badge badge-dot badge-status-<?php print $i; ?>" ></span>
|
||||
<span class="badge badge-dot badge-status<?php print $i; ?>" ></span>
|
||||
<?php endfor; ?>
|
||||
|
||||
</div>
|
||||
|
||||
<figure class="highlight">
|
||||
<pre>
|
||||
<code class="language-html" data-lang="html">
|
||||
<span class="badge badge-dot badge-primary">Primary</span>
|
||||
<span class="badge badge-dot badge-secondary">Secondary</span>
|
||||
<span class="badge badge-dot badge-success">Success</span>
|
||||
<span class="badge badge-dot badge-danger">Danger</span>
|
||||
<span class="badge badge-dot badge-warning">Warning</span>
|
||||
<span class="badge badge-dot badge-info">Info</span>
|
||||
<span class="badge badge-dot badge-light">Light</span>
|
||||
<span class="badge badge-dot badge-dark">Dark</span>
|
||||
|
||||
<span class="badge badge-dot badge-primary"></span>
|
||||
<span class="badge badge-dot badge-secondary"></span>
|
||||
<span class="badge badge-dot badge-success"></span>
|
||||
<span class="badge badge-dot badge-danger"></span>
|
||||
<span class="badge badge-dot badge-warning"></span>
|
||||
<span class="badge badge-dot badge-info"></span>
|
||||
<span class="badge badge-dot badge-light"></span>
|
||||
<span class="badge badge-dot badge-dark"></span>
|
||||
<?php for ($i = 0; $i <= 9; $i++): ?>
|
||||
<span class="badge badge-dot badge-status-<?php print $i; ?>" >status-<?php print $i; ?></span>
|
||||
<span class="badge badge-dot badge-status<?php print $i; ?>" ></span>
|
||||
<?php endfor; ?>
|
||||
</code></pre></figure>
|
||||
</pre></figure>
|
||||
|
||||
|
||||
<div class="warning">
|
||||
@ -226,7 +242,7 @@
|
||||
|
||||
<h2 id="links">Links</h2>
|
||||
|
||||
<p>Using the contextual <code class="highlighter-rouge">.badge-*</code> classes on an <code class="highlighter-rouge"><a></code> element quickly provide <em>actionable</em> badges with hover and focus states.</p>
|
||||
<p>Using the contextual .badge-* classes on an <a> element quickly provide <em>actionable</em> badges with hover and focus states.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@ -239,12 +255,12 @@
|
||||
<a href="#" class="badge badge-light">Light</a>
|
||||
<a href="#" class="badge badge-dark">Dark</a>
|
||||
<?php for ($i = 0; $i <= 9; $i++): ?>
|
||||
<a href="#" class="badge badge-status-<?php print $i; ?>" >status-<?php print $i; ?></a>
|
||||
<a href="#" class="badge badge-status<?php print $i; ?>" >status<?php print $i; ?></a>
|
||||
<?php endfor; ?>
|
||||
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html">
|
||||
<figure class="highlight"><pre>
|
||||
<a href="#" class="badge badge-primary">Primary</a>
|
||||
<a href="#" class="badge badge-secondary">Secondary</a>
|
||||
<a href="#" class="badge badge-success">Success</a>
|
||||
@ -254,16 +270,43 @@
|
||||
<a href="#" class="badge badge-light">Light</a>
|
||||
<a href="#" class="badge badge-dark">Dark</a>
|
||||
<?php for ($i = 0; $i <= 9; $i++): ?>
|
||||
<a href="#" class="badge badge-status-<?php print $i; ?>" >status-<?php print $i; ?></a>
|
||||
<a href="#" class="badge badge-status<?php print $i; ?>" >status<?php print $i; ?></a>
|
||||
<?php endfor; ?>
|
||||
</code></pre></figure>
|
||||
</pre></figure>
|
||||
|
||||
|
||||
<h2 id="helper">Use badge helper function</h2>
|
||||
<p>Using the badgeHelper function provide in core/lib/functions.lib.php. This function is recommended for code uniformisation and easy maintain</p>
|
||||
<?php print badgeHelper('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'primary') ?>
|
||||
<?php print badgeHelper('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'danger', 'pill') ?>
|
||||
<?php print badgeHelper('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'warning', 'dot') ?>
|
||||
|
||||
<figure class="highlight"><pre>
|
||||
<?php print badgeHelper('your label for accessibility', ' your label <u>with</u> <em>html</em>', 'primary') ?>
|
||||
<?php print badgeHelper('your label for accessibility', ' your label <u>with</u> <em>html</em>', 'danger', 'pill') ?>
|
||||
<?php print badgeHelper('your label for accessibility', ' your label <u>with</u> <em>html</em>', 'warning', 'dot') ?>
|
||||
</pre></figure>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2 id="helper">Use status helper function</h2>
|
||||
<p>Using the statusHelper function provide in core/lib/functions.lib.php. This function is recommended for code uniformisation and easy maintain</p>
|
||||
<?php
|
||||
$saveGlobalConf = $conf->global->MAIN_STATUS_USES_CSS;
|
||||
$conf->global->MAIN_STATUS_USES_CSS = 1;
|
||||
?>
|
||||
<h4>Using hidden global conf MAIN_STATUS_USES_CSS=1</h4>
|
||||
<p><?php print statusHelper('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'status4') ?></p>
|
||||
<p><?php print statusHelper('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'status4',1) ?></p>
|
||||
<p><?php print statusHelper('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'status4',2) ?></p>
|
||||
<p><?php print statusHelper('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'status4',3) ?></p>
|
||||
|
||||
<?php $conf->global->MAIN_STATUS_USES_CSS = 0; ?>
|
||||
<h4>Disabled hidden global conf : MAIN_STATUS_USES_CSS=0</h4>
|
||||
<p><?php print statusHelper('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'status4') ?></p>
|
||||
<p><?php print statusHelper('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'status4',1) ?></p>
|
||||
<p><?php print statusHelper('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'status4',2) ?></p>
|
||||
<p><?php print statusHelper('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'status4',3) ?></p>
|
||||
|
||||
<?php $conf->global->MAIN_STATUS_USES_CSS = $saveGlobalConf; ?>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user