lainwir3d/dolibarr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #10647 from atm-john/theme_top_menu

Browse Source 
Factor css and allow use vars
This commit is contained in:
Laurent Destailleur 2019-03-11 18:08:46 +01:00 committed by GitHub
commit 3cb5b6f49c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 6778 additions and 5859 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
htdocs/core/lib/functions.lib.php
View File

@ -7827,6 +7827,7 @@ function getDictvalue($tablename, $field, $id, $checkentity = false, $rowidfield
*/
function colorIsLight($stringcolor)
{
$stringcolor = str_replace('#', '', $stringcolor);
$res = -1;
if (!empty($stringcolor))
{
@ -7897,3 +7898,213 @@ 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 default '' , pill, dot
* @param string $url the url for link
* @param array $params various params for future : recommended rather than adding more fuction arguments
* @return string html badge
*/
function dolGetBadge($label, $html = '', $type = 'primary', $mode = '', $url = '', $params = array())
{
$attr=array(
'class'=>'badge'.(!empty($mode)?' badge-'.$mode:'').(!empty($type)?' badge-'.$type:'')
);
if(empty($html)){
$html = $label;
}
if(!empty($url)){
$attr['href'] = $url;
}
if($mode==='dot')
{
$attr['class'].= ' classfortooltip';
$attr['title'] = $html;
$attr['aria-label'] = $label;
$html='';
}
// Override attr
if(!empty($params['attr']) && is_array($params['attr'])){
foreach($params['attr']as $key => $value){
$attr[$key] = $value;
}
}
// TODO: add hook
// 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 $statusLabelShort short label of badge no html
* @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=Long label, 1=Short label, 2=Picto + Short label, 3=Picto, 4=Picto + Long label, 5=Short label + Picto, 6=Long label + Picto
* @param string $url the url for link
* @param array $params various params for future : recommended rather than adding more function arguments
* @return string html status
*/
function dolGetStatus($statusLabel = '', $statusLabelShort = '', $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'
);
// TODO : add a hook
if($displayMode==0){
$return = !empty($html)?$html:$statusLabel;
}
elseif($displayMode===1){
$return = !empty($html)?$html:(!empty($statusLabelShort)?$statusLabelShort:$statusLabel);
}
// use status with images
elseif(empty($conf->global->MAIN_STATUS_USES_CSS)){
$return = '';
$htmlLabel = '<span class="hideonsmartphone">'.(!empty($html)?$html:$statusLabel).'</span>';
$htmlLabelShort = '<span class="hideonsmartphone">'.(!empty($html)?$html:(!empty($statusLabelShort)?$statusLabelShort:$statusLabel)).'</span>';
if(!empty($statusImg[$statusType])){
$htmlImg = img_picto($statusLabel, $statusImg[$statusType]);
}else{
$htmlImg = img_picto($statusLabel, $statusType);
}
if($displayMode === 2){
$return = $htmlImg .' '. $htmlLabel;
}
elseif($displayMode === 3){
$return = $htmlImg;
}
elseif($displayMode === 4){
$return = $htmlImg .' '. $htmlLabel;
}
elseif($displayMode === 5){
$return = $htmlLabelShort .' '. $htmlImg;
}
else{ // $displayMode >= 6
$return = $htmlLabel .' '. $htmlImg;
}
}
// Use new badge
elseif(!empty($conf->global->MAIN_STATUS_USES_CSS) && !empty($displayMode)){
$statusLabelShort = !empty($statusLabelShort)?$statusLabelShort:$statusLabel;
if($displayMode == 3){
$return = dolGetBadge($statusLabel, '', $statusType, 'dot');
}
elseif($displayMode === 5){
$return = dolGetBadge($statusLabelShort, $html, $statusType);
}
else{
$return = dolGetBadge($statusLabel, $html, $statusType);
}
}
return $return;
}
/**
* @param string $label label of button no html : use in alt attribute for accessibility $html is not empty
* @param string $html optional : content with html
* @param string $actionType default, delete, danger
* @param string $url the url for link
* @param string $id attribute id of button
* @param int $userRight user action right
* @param array $params various params for future : recommended rather than adding more function arguments
* @return string html button
*/
function dolGetButtonAction($label, $html = '', $actionType = 'default', $url = '', $id = '', $userRight = 1, $params = array())
{
$class = 'butAction' ;
if($actionType == 'danger' || $actionType == 'delete'){
$class = 'butActionDelete' ;
}
$attr=array(
'class' => $class
,'href' => empty($url)?'':$url
);
if(empty($html)){
$html = $label;
}else{
$attr['aria-label'] = $label;
}
if(empty($userRight)){
$attr['class'] = 'butActionRefused';
$attr['href'] = '';
}
if(empty($id)){
$attr['id'] = $id;
}
// Override attr
if(!empty($params['attr']) && is_array($params['attr'])){
foreach($params['attr'] as $key => $value){
$attr[$key] = $value;
}
}
if(isset($attr['href']) && empty($attr['href'])){
unset($attr['href']);
}
// TODO : add a hook
// 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($attr['href'])?'a':'span';
return '<div class="inline-block divButAction"><'.$tag.' '.$compiledAttributes.'>'.$html.'</'.$tag.'></div>';
}

102
htdocs/core/lib/functions2.lib.php
View File

@ -2200,6 +2200,108 @@ function colorStringToArray($stringcolor, $colorifnotfound = array(88,88,88))
return array(hexdec($reg[1]),hexdec($reg[2]),hexdec($reg[3]));
}
/**
* @param string $color the color you need to valid
* @param boolean $allow_white in case of white isn't valid
* @return boolean
*/
function colorValidateHex($color, $allow_white = true)
{
if(!$allow_white && ($color === '#fff' || $color === '#ffffff') ) return false;
if(preg_match('/^#[a-f0-9]{6}$/i', $color)) //hex color is valid
{
return true;
}
return false;
}
/**
* @param string $hex color in hex
* @param integer $steps Steps should be between -255 and 255. Negative = darker, positive = lighter
* @return string
*/
function colorAdjustBrightness($hex, $steps)
{
// Steps should be between -255 and 255. Negative = darker, positive = lighter
$steps = max(-255, min(255, $steps));
// Normalize into a six character long hex string
$hex = str_replace('#', '', $hex);
if (strlen($hex) == 3) {
$hex = str_repeat(substr($hex, 0, 1), 2).str_repeat(substr($hex, 1, 1), 2).str_repeat(substr($hex, 2, 1), 2);
}
// Split into three parts: R, G and B
$color_parts = str_split($hex, 2);
$return = '#';
foreach ($color_parts as $color) {
$color = hexdec($color); // Convert to decimal
$color = max(0, min(255, $color + $steps)); // Adjust color
$return .= str_pad(dechex($color), 2, '0', STR_PAD_LEFT); // Make two char hex code
}
return $return;
}
/**
* @param string $hex color in hex
* @param integer $percent 0 to 100
* @return string
*/
function colorDarker($hex, $percent)
{
$steps = intval(255 * $percent / 100) * -1;
return colorAdjustBrightness($hex, $steps);
}
/**
* @param string $hex color in hex
* @param integer $percent 0 to 100
* @return string
*/
function colorLighten($hex, $percent)
{
$steps = intval(255 * $percent / 100);
return colorAdjustBrightness($hex, $steps);
}
/**
* @param string $hex color in hex
* @param float $alpha 0 to 1
* @param bool $returnArray set to 1 to return an array instead of string
* @return string
*/
function colorHexToRgb($hex, $alpha = false, $returnArray = false)
{
$string = '';
$hex = str_replace('#', '', $hex);
$length = strlen($hex);
$rgb = array();
$rgb['r'] = hexdec($length == 6 ? substr($hex, 0, 2) : ($length == 3 ? str_repeat(substr($hex, 0, 1), 2) : 0));
$rgb['g'] = hexdec($length == 6 ? substr($hex, 2, 2) : ($length == 3 ? str_repeat(substr($hex, 1, 1), 2) : 0));
$rgb['b'] = hexdec($length == 6 ? substr($hex, 4, 2) : ($length == 3 ? str_repeat(substr($hex, 2, 1), 2) : 0));
if ( $alpha !== false ) {
$rgb['a'] = floatval($alpha);
$string = 'rgba('.implode(',', $rgb).')';
}
else{
$string = 'rgb('.implode(',', $rgb).')';
}
if($returnArray){
return $rgb;
}
else{
return $string;
}
}
/**
* Applies the Cartesian product algorithm to an array
* Source: http://stackoverflow.com/a/15973172

201
htdocs/theme/eldy/_badges.css.php Normal file
View File

@ -0,0 +1,201 @@
<?php
if (! defined('ISLOADEDBYSTEELSHEET')) die('Must be call by steelsheet'); ?>
/* <style type="text/css" > */
/*
Badge style is based on boostrap framework
*/
.badge {
display: inline-block;
padding: .1em .35em;
font-size: 80%;
font-weight: 700 !important;
line-height: 1;
text-align: center;
white-space: nowrap;
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: 2px;
border-style: solid;
border-color: rgba(255,255,255,0);
box-sizing: border-box;
}
.badge-pill, .tabs .badge {
padding-right: .6em;
padding-left: .6em;
border-radius: 10rem;
}
.badge-dot {
padding: 0;
border-radius: 50%;
padding: 0.6em;
vertical-align: middle;
}
a.badge:focus, a.badge:hover {
text-decoration: none;
}
/* PRIMARY */
.badge-primary{
color: #fff !important;
background-color: <?php print $badgePrimary; ?>;
}
a.badge-primary.focus, a.badge-primary:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgePrimary, 0.5); ?>;
}
a.badge-primary:focus, a.badge-primary:hover {
color: #fff !important;
background-color: <?php print colorDarker($badgePrimary, 10); ?>;
}
/* SECONDARY */
.badge-secondary, .tabs .badge {
color: #fff !important;
background-color: <?php print $badgeSecondary; ?>;
}
a.badge-secondary.focus, a.badge-secondary:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeSecondary, 0.5); ?>;
}
a.badge-secondary:focus, a.badge-secondary:hover {
color: #fff !important;
background-color: <?php print colorDarker($badgeSecondary, 10); ?>;
}
/* SUCCESS */
.badge-success {
color: #fff !important;
background-color: <?php print $badgeSuccess; ?>;
}
a.badge-success.focus, a.badge-success:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeSuccess, 0.5); ?>;
}
a.badge-success:focus, a.badge-success:hover {
color: #fff !important;
background-color: <?php print colorDarker($badgeSuccess, 10); ?>;
}
/* DANGER */
.badge-danger {
color: #fff !important;
background-color: <?php print $badgeDanger; ?>;
}
a.badge-danger.focus, a.badge-danger:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeDanger, 0.5); ?>;
}
a.badge-danger:focus, a.badge-danger:hover {
color: #fff !important;
background-color: <?php print colorDarker($badgeDanger, 10); ?>;
}
/* WARNING */
.badge-warning {
color: #212529 !important;
background-color: <?php print $badgeWarning; ?>;
}
a.badge-warning.focus, a.badge-warning:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeWarning, 0.5); ?>;
}
a.badge-warning:focus, a.badge-warning:hover {
color: #212529 !important;
background-color: <?php print colorDarker($badgeWarning, 10); ?>;
}
/* INFO */
.badge-info {
color: #fff !important;
background-color: <?php print $badgeInfo; ?>;
}
a.badge-info.focus, a.badge-info:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeInfo, 0.5); ?>;
}
a.badge-info:focus, a.badge-info:hover {
color: #fff !important;
background-color: <?php print colorDarker($badgeInfo, 10); ?>;
}
/* LIGHT */
.badge-light {
color: #212529 !important;
background-color: <?php print $badgeLight; ?>;
}
a.badge-light.focus, a.badge-light:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeLight, 0.5); ?>;
}
a.badge-light:focus, a.badge-light:hover {
color: #212529 !important;
background-color: <?php print colorDarker($badgeLight, 10); ?>;
}
/* DARK */
.badge-dark {
color: #fff !important;
background-color: <?php print $badgeDark; ?>;
}
a.badge-dark.focus, a.badge-dark:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeDark, 0.5); ?>;
}
a.badge-dark:focus, a.badge-dark:hover {
color: #fff !important;
background-color: <?php print colorDarker($badgeDark, 10); ?>;
}
/*
* STATUS BADGES
*/
/* Default Status */
<?php for ($i = 0; $i <= 9; $i++){
print "\n/* STATUS".$i." */\n";
$thisBadgeBackgroundColor = $thisBadgeBorderColor = ${'badgeStatus'.$i};
$TBadgeBorderOnly = array(0,3,5,7);
$thisBadgeTextColor = colorIsLight(${'badgeStatus'.$i})?'#212529':'#ffffff';
if(in_array($i, $TBadgeBorderOnly)){
$thisBadgeTextColor = '#212529';
$thisBadgeBackgroundColor = "#fff";
}
print ".badge-status".$i." {\n";
print " color: ".$thisBadgeTextColor." !important;\n";
if(in_array($i, $TBadgeBorderOnly)){
print " border-color: ".$thisBadgeBorderColor.";\n";
}
print " background-color: ".$thisBadgeBackgroundColor.";\n";
print "}\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 " color: ".$thisBadgeTextColor." !important;\n";
print " background-color: ".colorDarker($thisBadgeBackgroundColor, 10).";\n";
if(in_array($i, $TBadgeBorderOnly)){
print " border-color: ".colorDarker($thisBadgeBorderColor, 10).";\n";
}
print "}\n";
}

5692
htdocs/theme/eldy/_global.css.php Normal file
View File

File diff suppressed because it is too large Load Diff

129
htdocs/theme/eldy/_main_menu_fa_icons.css.php Normal file
View File

@ -0,0 +1,129 @@
<?php if (! defined('ISLOADEDBYSTEELSHEET')) die('Must be call by steelsheet'); ?>
/* <style type="text/css" > */
.mainmenu::before{
/* font part */
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 26px;
font-size: <?php echo $topMenuFontSize; ?>;
-webkit-font-smoothing: antialiased;
text-align:center;
text-decoration:none;
color: #<?php echo $colortextbackhmenu; ?>;
}
div.mainmenu.menu {
background-image: none;
}
div.mainmenu.menu::before {
content: "\f0c9";
}
.mainmenu.home::before{
content: "\f015";
}
.mainmenu.billing::before {
content: "\f0d6";
}
.mainmenu.accountancy::before {
content: "\f0d6";
}
.mainmenu.agenda::before {
content: "\f073";
}
.mainmenu.bank::before {
content: "\f19c";
}
<?php if($conf->global->MAIN_FEATURES_LEVEL == 2){ ?>
/* TESTING USAGE OF SVG WITHOUT FONT */
.mainmenu.cashdesk{
line-height: 26px;
}
.mainmenu.cashdesk .tmenuimage{
line-height: 26px;
display: inline-block;
vertical-align: middle;
height: <?php echo $topMenuFontSize; ?>;
background-color: #<?php echo $colortextbackhmenu; ?>;
width: 100%;
-webkit-mask: url(./img/fontawesome/cash-register-solid.svg) no-repeat 50% 50%; /* for old webkit browser */
mask: url(./img/fontawesome/cash-register-solid.svg) no-repeat 50% 50%;
}
<?php }else{ ?>
.mainmenu.cashdesk::before {
content: "\f788";
}
<?php } ?>
.mainmenu.takepos::before {
content: "\f217";
}
.mainmenu.companies::before {
content: "\f1ad";
}
.mainmenu.commercial::before {
content: "\f508";
}
.mainmenu.ecm::before {
content: "\f07c";
}
.mainmenu.externalsite::before {
content: "\f360";
}
.mainmenu.ftp::before {
content: "\f362";
}
.mainmenu.hrm::before {
content: "\f5ca";
}
.mainmenu.members::before {
content: "\f0c0";
}
.mainmenu.products::before {
content: "\f468";
}
.mainmenu.project::before {
content: "\f0e8";
}
.mainmenu.ticket::before {
content: "\f3ff";
}
.mainmenu.tools::before {
content: "\f0ad";
}
.mainmenu.website::before {
content: "\f542";
}

330
htdocs/theme/eldy/doc/badges.php Normal file
View File

@ -0,0 +1,330 @@
<?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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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" >
<main role="main" >
<h1 class="bd-title" id="content">Badges</h1>
<p class="bd-lead">Documentation and examples for badges, our small count and labeling component.</p>
<h2 id="example">Example</h2>
<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>
<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>
</div>
<figure class="highlight">
<pre>
&lt;h1&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h1&gt;
&lt;h2&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h2&gt;
&lt;h3&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h3&gt;
&lt;h4&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h4&gt;
&lt;h5&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h5&gt;
&lt;h6&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h6&gt;
</pre>
</figure>
<p>Badges can be used as part of links or buttons to provide a counter.</p>
<div class="bd-example">
<button type="button" class="button">
Notifications <span class="badge badge-primary">4</span>
</button>
</div>
<figure class="highlight"><pre>
&lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;
Notifications &lt;span class=&quot;badge badge-primary&quot;&gt;4&lt;/span&gt;
&lt;/button&gt;
</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>
<p>Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.</p>
<p><strong>Remember to use aria-label attribute for accessibility in Dolibarr. Don't forget to use aria-hidden on icons included in badges</strong></p>
</div>
<div class="bd-example">
<button type="button" class="button">
Profile <span class="badge badge-primary" aria-label="9 unread messages" >9</span>
<span class="sr-only">unread messages</span>
</button>
</div>
<figure class="highlight">
<pre>
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;
Profile &lt;span class=&quot;badge badge-light&quot; aria-label=&quot;9 unread messages&quot; &gt;9&lt;/span&gt;
&lt;span class=&quot;sr-only&quot;&gt;unread messages&lt;/span&gt;
&lt;/button&gt;
</pre>
</figure>
<h2 id="contextual-variations">Contextual variations</h2>
<p>Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
<div class="bd-example">
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
</div>
<figure class="highlight">
<pre>
&lt;span class=&quot;badge badge-primary&quot;&gt;Primary&lt;/span&gt;
&lt;span class=&quot;badge badge-secondary&quot;&gt;Secondary&lt;/span&gt;
&lt;span class=&quot;badge badge-success&quot;&gt;Success&lt;/span&gt;
&lt;span class=&quot;badge badge-danger&quot;&gt;Danger&lt;/span&gt;
&lt;span class=&quot;badge badge-warning&quot;&gt;Warning&lt;/span&gt;
&lt;span class=&quot;badge badge-info&quot;&gt;Info&lt;/span&gt;
&lt;span class=&quot;badge badge-light&quot;&gt;Light&lt;/span&gt;
&lt;span class=&quot;badge badge-dark&quot;&gt;Dark&lt;/span&gt;
</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 .sr-only class.</p>
</div>
<h2 id="contextual-variations">Default status</h2>
<p>Add any of the below mentioned modifier classes to change the appearance of a badge to be linked to a default status.</p>
<div class="bd-example">
<?php for ($i = 0; $i <= 9; $i++): ?>
<span class="badge badge-status<?php print $i; ?>" >status-<?php print $i; ?></span>
<?php endfor; ?>
</div>
<figure class="highlight"><pre><pre>
<?php for ($i = 0; $i <= 9; $i++): ?>
&lt;span class="badge badge-status<?php print $i; ?>" &gt;status<?php print $i; ?>&lt;/span&gt;
<?php endfor; ?>
</pre></figure>
<h2 id="pill-badges">Pill badges</h2>
<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">
<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>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<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>
<?php endfor; ?>
</div>
<figure class="highlight">
<pre>
&lt;span class=&quot;badge badge-pill badge-primary&quot;&gt;Primary&lt;/span&gt;
&lt;span class=&quot;badge badge-pill badge-secondary&quot;&gt;Secondary&lt;/span&gt;
&lt;span class=&quot;badge badge-pill badge-success&quot;&gt;Success&lt;/span&gt;
&lt;span class=&quot;badge badge-pill badge-danger&quot;&gt;Danger&lt;/span&gt;
&lt;span class=&quot;badge badge-pill badge-warning&quot;&gt;Warning&lt;/span&gt;
&lt;span class=&quot;badge badge-pill badge-info&quot;&gt;Info&lt;/span&gt;
&lt;span class=&quot;badge badge-pill badge-light&quot;&gt;Light&lt;/span&gt;
&lt;span class=&quot;badge badge-pill badge-dark&quot;&gt;Dark&lt;/span&gt;
<?php for ($i = 0; $i <= 9; $i++): ?>
&lt;span class="badge badge-pill badge-status<?php print $i; ?>" &gt;status<?php print $i; ?>&lt;/span&gt;
<?php endfor; ?>
</pre></figure>
<h2 id="dot-badges">Dot badges</h2>
<p>.dot-pill modifier class to make badges circle.</p>
<div class="bd-example">
<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; ?>" ></span>
<?php endfor; ?>
</div>
<figure class="highlight">
<pre>
&lt;span class=&quot;badge badge-dot badge-primary&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;badge badge-dot badge-secondary&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;badge badge-dot badge-success&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;badge badge-dot badge-danger&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;badge badge-dot badge-warning&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;badge badge-dot badge-info&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;badge badge-dot badge-light&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;badge badge-dot badge-dark&quot;&gt;&lt;/span&gt;
<?php for ($i = 0; $i <= 9; $i++): ?>
&lt;span class="badge badge-dot badge-status<?php print $i; ?>" &gt;&lt;/span&gt;
<?php endfor; ?>
</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>
<p>Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.</p>
<p><strong>Remember to use aria-label attribute for accessibility in Dolibarr. Don't forget to use aria-hidden on icons included in badges</strong></p>
</div>
<h2 id="links">Links</h2>
<p>Using the contextual .badge-* classes on an &lt;a&gt; element quickly provide <em>actionable</em> badges with hover and focus states.</p>
<div class="bd-example">
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<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>
<?php endfor; ?>
</div>
<figure class="highlight"><pre>
&lt;a href=&quot;#&quot; class=&quot;badge badge-primary&quot;&gt;Primary&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-secondary&quot;&gt;Secondary&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-success&quot;&gt;Success&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-danger&quot;&gt;Danger&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-warning&quot;&gt;Warning&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-info&quot;&gt;Info&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-light&quot;&gt;Light&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-dark&quot;&gt;Dark&lt;/a&gt;
<?php for ($i = 0; $i <= 9; $i++): ?>
&lt;a href=&quot;#&quot; class="badge badge-status<?php print $i; ?>" &gt;status<?php print $i; ?>&lt;/a&gt;
<?php endfor; ?>
</pre></figure>
<h2 id="helper">Use badge helper function</h2>
<p>Using the dolGetBadge function provide in core/lib/functions.lib.php. This function is recommended for code uniformisation and easy maintain</p>
<?php print dolGetBadge('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'primary') ?>
<?php print dolGetBadge('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'danger', 'pill') ?>
<?php print dolGetBadge('your label for accessibility', 'your label <u>with</u> <em>html</em>', 'warning', 'dot') ?>
<figure class="highlight"><pre>
&lt;?php print dolGetBadge('your label for accessibility', 'your label &lt;u&gt;with&lt;/u&gt; &lt;em&gt;html&lt;/em&gt;', 'danger', 'pill') ?&gt;
&lt;?php print dolGetBadge('your label for accessibility', 'your label &lt;u&gt;with&lt;/u&gt; &lt;em&gt;html&lt;/em&gt;', 'warning', 'dot') ?&gt;
</pre></figure>
<h2 id="helper">Use status helper function</h2>
<p>Using the dolGetStatus 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 dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4') ?></p>
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 1) ?></p>
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 2) ?></p>
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 3) ?></p>
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 4) ?></p>
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 5) ?></p>
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 6) ?></p>
<?php $conf->global->MAIN_STATUS_USES_CSS = 0; ?>
<h4>Disabled hidden global conf : MAIN_STATUS_USES_CSS=0</h4>
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 1) ?></p>
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 2) ?></p>
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 3) ?></p>
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 4) ?></p>
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 5) ?></p>
<p><?php print dolGetStatus('your label for accessibility', 'your label', 'your label <u>with</u> <em>html</em>', 'status4', 6) ?></p>
<?php $conf->global->MAIN_STATUS_USES_CSS = $saveGlobalConf; ?>
<figure class="highlight"><pre>
&lt;?php print dolGetStatus('your label for accessibility', 'your label', 'your label &lt;u&gt;with&lt;/u&gt; &lt;em&gt;html&lt;/em&gt;', 'status4') ?&gt;
&lt;?php print dolGetStatus('your label for accessibility', 'your label', 'your label &lt;u&gt;with&lt;/u&gt; &lt;em&gt;html&lt;/em&gt;', 'status4',1) ?&gt;
&lt;?php print dolGetStatus('your label for accessibility', 'your label', 'your label &lt;u&gt;with&lt;/u&gt; &lt;em&gt;html&lt;/em&gt;', 'status4',2) ?&gt;
&lt;?php print dolGetStatus('your label for accessibility', 'your label', 'your label &lt;u&gt;with&lt;/u&gt; &lt;em&gt;html&lt;/em&gt;', 'status4',3) ?&gt;
&lt;?php print dolGetStatus('your label for accessibility', 'your label', 'your label &lt;u&gt;with&lt;/u&gt; &lt;em&gt;html&lt;/em&gt;', 'status4',4) ?&gt;
&lt;?php print dolGetStatus('your label for accessibility', 'your label', 'your label &lt;u&gt;with&lt;/u&gt; &lt;em&gt;html&lt;/em&gt;', 'status4',5) ?&gt;
&lt;?php print dolGetStatus('your label for accessibility', 'your label', 'your label &lt;u&gt;with&lt;/u&gt; &lt;em&gt;html&lt;/em&gt;', 'status4',6) ?&gt;
</pre></figure>
</main>
</body>
</html>

5
htdocs/theme/eldy/doc/doc.css Normal file
View File

@ -0,0 +1,5 @@
/* Simple css for Doc page */
body.docpage{
background: #fff;
padding:20px;
}

3
htdocs/theme/eldy/img/fontawesome/README Normal file
View File

@ -0,0 +1,3 @@
there icons are licensed under the Creative Commons Attribution 4.0 International license https://fontawesome.com/license
Credit font Awesome

1
htdocs/theme/eldy/img/fontawesome/cash-register-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cash-register" class="svg-inline--fa fa-cash-register fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M511.1 378.8l-26.7-160c-2.6-15.4-15.9-26.7-31.6-26.7H208v-64h96c8.8 0 16-7.2 16-16V16c0-8.8-7.2-16-16-16H48c-8.8 0-16 7.2-16 16v96c0 8.8 7.2 16 16 16h96v64H59.1c-15.6 0-29 11.3-31.6 26.7L.8 378.7c-.6 3.5-.9 7-.9 10.5V480c0 17.7 14.3 32 32 32h448c17.7 0 32-14.3 32-32v-90.7c.1-3.5-.2-7-.8-10.5zM280 248c0-8.8 7.2-16 16-16h16c8.8 0 16 7.2 16 16v16c0 8.8-7.2 16-16 16h-16c-8.8 0-16-7.2-16-16v-16zm-32 64h16c8.8 0 16 7.2 16 16v16c0 8.8-7.2 16-16 16h-16c-8.8 0-16-7.2-16-16v-16c0-8.8 7.2-16 16-16zm-32-80c8.8 0 16 7.2 16 16v16c0 8.8-7.2 16-16 16h-16c-8.8 0-16-7.2-16-16v-16c0-8.8 7.2-16 16-16h16zM80 80V48h192v32H80zm40 200h-16c-8.8 0-16-7.2-16-16v-16c0-8.8 7.2-16 16-16h16c8.8 0 16 7.2 16 16v16c0 8.8-7.2 16-16 16zm16 64v-16c0-8.8 7.2-16 16-16h16c8.8 0 16 7.2 16 16v16c0 8.8-7.2 16-16 16h-16c-8.8 0-16-7.2-16-16zm216 112c0 4.4-3.6 8-8 8H168c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h176c4.4 0 8 3.6 8 8v16zm24-112c0 8.8-7.2 16-16 16h-16c-8.8 0-16-7.2-16-16v-16c0-8.8 7.2-16 16-16h16c8.8 0 16 7.2 16 16v16zm48-80c0 8.8-7.2 16-16 16h-16c-8.8 0-16-7.2-16-16v-16c0-8.8 7.2-16 16-16h16c8.8 0 16 7.2 16 16v16z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
htdocs/theme/eldy/img/fontawesome/home-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 713 B

159
htdocs/theme/eldy/main_menu_fa_icons.css
View File

@ -1,159 +0,0 @@
div.mainmenu.home::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f015";
color: white;
font-size: 1.5em;
}
div.mainmenu.billing::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0d6";
color: white;
font-size: 1.5em;
}
div.mainmenu.accountancy::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0d6";
color: white;
font-size: 1.5em;
}
div.mainmenu.agenda::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f073";
color: white;
font-size: 1.5em;
}
div.mainmenu.bank::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f19c";
color: white;
font-size: 1.5em;
}
div.mainmenu.cashdesk::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f788";
color: white;
font-size: 1.5em;
}
div.mainmenu.takepos::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f217";
color: white;
font-size: 1.5em;
}
div.mainmenu.companies::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f1ad";
color: white;
font-size: 1.5em;
}
div.mainmenu.commercial::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f508";
color: white;
font-size: 1.5em;
}
div.mainmenu.ecm::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f07c";
color: white;
font-size: 1.5em;
}
div.mainmenu.externalsite::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f360";
color: white;
font-size: 1.5em;
}
div.mainmenu.ftp::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f362";
color: white;
font-size: 1.5em;
}
div.mainmenu.hrm::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f5ca";
color: white;
font-size: 1.5em;
}
div.mainmenu.members::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0c0";
color: white;
font-size: 1.5em;
}
div.mainmenu.products::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f468";
color: white;
font-size: 1.5em;
}
div.mainmenu.mrp::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f468";
color: white;
font-size: 1.5em;
}
div.mainmenu.project::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0e8";
color: white;
font-size: 1.5em;
}
div.mainmenu.ticket::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f3ff";
color: white;
font-size: 1.5em;
}
div.mainmenu.tools::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0ad";
color: white;
font-size: 1.5em;
}
div.mainmenu.website::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f542";
color: white;
font-size: 1.5em;
}

5725
htdocs/theme/eldy/style.css.php
View File

File diff suppressed because it is too large Load Diff

78
htdocs/theme/eldy/theme_vars.php Normal file
View File

@ -0,0 +1,78 @@
<?php
/* Copyright (C) 2004-2017 Laurent Destailleur <eldy@users.sourceforge.net>
* Copyright (C) 2006 Rodolphe Quiedeville <rodolphe@quiedeville.org>
* Copyright (C) 2007-2017 Regis Houssin <regis.houssin@inodbox.com>
* Copyright (C) 2011 Philippe Grand <philippe.grand@atoo-net.com>
* Copyright (C) 2012 Juanjo Menent <jmenent@2byte.es>
* Copyright (C) 2018 Ferran Marcet <fmarcet@2byte.es>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FI8TNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/**
* \file htdocs/theme/eldy/theme_vars.css.php
* \brief File for CSS style sheet Eldy
*/
if (defined('THEME_ONLY_CONSTANT')) return;
// Colors
$colorbackhmenu1='60,70,100'; // topmenu
$colorbackvmenu1='248,248,248'; // vmenu
$colortopbordertitle1='200,200,200'; // top border of title
$colorbacktitle1='220,220,223'; // title of tables,list
$colorbacktabcard1='255,255,255'; // card
$colorbacktabactive='234,234,234';
$colorbacklineimpair1='255,255,255'; // line impair
$colorbacklineimpair2='255,255,255'; // line impair
$colorbacklinepair1='250,250,250'; // line pair
$colorbacklinepair2='250,250,250'; // line pair
$colorbacklinepairhover='230,237,244'; // line hover
$colorbacklinebreak='239,231,224'; // line break
$colorbackbody='255,255,255';
$colortexttitlenotab='100,60,20';
$colortexttitle='0,0,0';
$colortext='0,0,0';
$colortextlink='0,0,100';
$fontsize='0.86em';
$fontsizesmaller='0.75em';
$topMenuFontSize='1.1em';
$toolTipBgColor='rgba(255, 255, 255, 0.96);';
$toolTipFontColor='#333';
// Badges colors
$badgePrimary ='#007bff';
$badgeSecondary ='#6c757d';
$badgeSuccess ='#28a745';
$badgeDanger ='#dc3545';
$badgeWarning ='#ffc107';
$badgeInfo ='#17a2b8';
$badgeDark ='#343a40';
$badgeLight ='#f8f9fa';
/* default color for status : After a quick check, somme status can have oposite function according to objects
* So this badges status uses default value according to theme eldy status img
* TODO: use color definition vars above for define badges color status X -> expemple $badgeStatusValidate, $badgeStatusClosed, $badgeStatusActive ....
*/
$badgeStatus0='#cbd3d3';
$badgeStatus1='#bc9526';
$badgeStatus2='#e6f0f0';
$badgeStatus3='#bca52b';
$badgeStatus4='#277d1e';
$badgeStatus5='#cad2d2';
$badgeStatus6='#cad2d2';
$badgeStatus7='#baa32b';
$badgeStatus8='#be3013';
$badgeStatus9='#e7f0f0';