Merge pull request #11648 from atm-john/develop_chart_color

NEW more living colors for charts and option for "color bind" people
This commit is contained in:
Laurent Destailleur 2019-08-10 00:39:53 +02:00 committed by GitHub
commit dd2c35f866
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 146 additions and 39 deletions

View File

@ -1094,7 +1094,7 @@ class DolGraph
$i++;
}
// shadowSize: 0 -> Drawing is faster without shadows
$this->stringtoshow.="\n".' ], { series: { shadowSize: 0, stack: stack, lines: { fill: false, steps: steps }, bars: { barWidth: 0.6 } }'."\n";
$this->stringtoshow.="\n".' ], { series: { shadowSize: 0, stack: stack, lines: { fill: false, steps: steps }, bars: { barWidth: 0.6, fillColor: { colors: [{opacity: 0.9 }, {opacity: 0.85}] }} }'."\n";
// Xaxis
$this->stringtoshow.=', xaxis: { ticks: ['."\n";

View File

@ -947,5 +947,44 @@ function show_theme($fuser, $edit = 0, $foruserprofile = false)
*/
}
// Use MAIN_OPTIMIZEFORTEXTBROWSER
if ($foruserprofile)
{
//$default=yn($conf->global->MAIN_OPTIMIZEFORCOLORBLIND);
$default=$langs->trans('No');
print '<tr class="oddeven">';
print '<td>'.$langs->trans("MAIN_OPTIMIZEFORCOLORBLIND").'</td>';
print '<td colspan="'.($colspan-1).'">';
$colorBlindOptions = array(
0 => $langs->trans('No'),
'protanopia' => $langs->trans('Protanopia'),
'deuteranopes' => $langs->trans('Deuteranopes'),
'tritanopes' => $langs->trans('Tritanopes'),
);
if ($edit)
{
print $form->selectArray('MAIN_OPTIMIZEFORCOLORBLIND', $colorBlindOptions, $fuser->conf->MAIN_OPTIMIZEFORCOLORBLIND, 0);
}
else
{
if (!empty($fuser->conf->MAIN_OPTIMIZEFORCOLORBLIND) && isset($colorBlindOptions[$fuser->conf->MAIN_OPTIMIZEFORCOLORBLIND])){
print $colorBlindOptions[$fuser->conf->MAIN_OPTIMIZEFORCOLORBLIND];
}
else{
print yn(0);
}
}
print ' &nbsp; ('.$langs->trans("Default").': <strong>'.$default.'</strong>) ';
print $form->textwithpicto('', $langs->trans("MAIN_OPTIMIZEFORCOLORBLINDDesc"));
print '</td>';
print '</tr>';
}
else
{
}
print '</table>';
}

View File

@ -1900,6 +1900,11 @@ OnMobileOnly=On small screen (smartphone) only
DisableProspectCustomerType=Disable the "Prospect + Customer" third party type (so third party must be Prospect or Customer but can't be both)
MAIN_OPTIMIZEFORTEXTBROWSER=Simplify interface for blind person
MAIN_OPTIMIZEFORTEXTBROWSERDesc=Enable this option if you are a blind person, or if you use the application from a text browser like Lynx or Links.
MAIN_OPTIMIZEFORCOLORBLIND=Change interface's color for color blind person
MAIN_OPTIMIZEFORCOLORBLINDDesc=Enable this option if you are a color blind person, in some case interface will change color setup to increase contrast.
Protanopia=Protanopia
Deuteranopes=Deuteranopes
Tritanopes=Tritanopes
ThisValueCanOverwrittenOnUserLevel=This value can be overwritten by each user from its user page - tab '%s'
DefaultCustomerType=Default thirdparty type for "New customer" creation form
ABankAccountMustBeDefinedOnPaymentModeSetup=Note: The bank account must be defined on the module of each payment mode (Paypal, Stripe, ...) to have this feature working.

View File

@ -902,6 +902,9 @@ elseif (! empty($user->conf->MAIN_OPTIMIZEFORTEXTBROWSER))
$conf->global->MAIN_OPTIMIZEFORTEXTBROWSER=$user->conf->MAIN_OPTIMIZEFORTEXTBROWSER;
}
// set MAIN_OPTIMIZEFORCOLORBLIND
$conf->global->MAIN_OPTIMIZEFORCOLORBLIND=$user->conf->MAIN_OPTIMIZEFORCOLORBLIND;
// Set terminal output option according to conf->browser.
if (GETPOST('dol_hide_leftmenu', 'int') || ! empty($_SESSION['dol_hide_leftmenu'])) $conf->dol_hide_leftmenu=1;
if (GETPOST('dol_hide_topmenu', 'int') || ! empty($_SESSION['dol_hide_topmenu'])) $conf->dol_hide_topmenu=1;
@ -1087,6 +1090,10 @@ if (! function_exists("llxHeader"))
if ($mainmenu != 'website') $tmpcsstouse=$morecssonbody; // We do not use sidebar-collpase by default to have menuhider open by default.
}
if(!empty($conf->global->MAIN_OPTIMIZEFORCOLORBLIND)){
$tmpcsstouse.= ' colorblind-'.strip_tags($conf->global->MAIN_OPTIMIZEFORCOLORBLIND);
}
print '<body id="mainbody" class="'.$tmpcsstouse.'">' . "\n";
// top menu and left menu area

View File

@ -115,6 +115,17 @@ a.badge-warning:focus, a.badge-warning:hover {
background-color: <?php print colorDarker($badgeWarning, 10); ?>;
}
/* WARNING colorblind */
body[class^="colorblind-"] .badge-warning {
background-color: <?php print $colorblind_deuteranopes_badgeWarning; ?>;
}
body[class^="colorblind-"] a.badge-warning.focus,body[class^="colorblind-"] a.badge-warning:focus {
box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($colorblind_deuteranopes_badgeWarning, 0.5); ?>;
}
body[class^="colorblind-"] a.badge-warning:focus, a.badge-warning:hover {
background-color: <?php print colorDarker($colorblind_deuteranopes_badgeWarning, 10); ?>;
}
/* INFO */
.badge-info {
color: #fff !important;
@ -160,44 +171,66 @@ a.badge-dark:focus, a.badge-dark:hover {
/*
* STATUS BADGES
*/
/* Default Status */
<?php for ($i = 0; $i <= 9; $i++){
/* Default Status */
_createStatusBadgeCss($i, '', "STATUS".$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";
// create status for accessibility
_createStatusBadgeCss($i, 'colorblind_deuteranopes_', "COLORBLIND STATUS".$i, 'body[class*="colorblind-"] ');
}
/**
* create status badge
* @param string $statusName name of status
* @param string $statusVarNamePrefix a prefix for var ${$statusVarNamePrefix.'badgeStatus'.$statusName}
* @param string $commentLabel a comment label
* @param string $cssPrefix a css prefix
* @return void
*/
function _createStatusBadgeCss($statusName, $statusVarNamePrefix = '', $commentLabel = '', $cssPrefix = '')
{
global ${$statusVarNamePrefix.'badgeStatus'.$statusName}, ${$statusVarNamePrefix.'badgeStatus_textColor'.$statusName};
if(!empty(${$statusVarNamePrefix.'badgeStatus'.$statusName})) {
print "\n/* " . strtoupper($commentLabel) . " */\n";
$thisBadgeBackgroundColor = $thisBadgeBorderColor = ${$statusVarNamePrefix . 'badgeStatus' . $statusName};
$TBadgeBorderOnly = array(0, 3, 5, 7);
$thisBadgeTextColor = colorIsLight(${$statusVarNamePrefix . 'badgeStatus' . $statusName}) ? '#212529' : '#ffffff';
if (!empty(${$statusVarNamePrefix . 'badgeStatus_textColor' . $statusName})) {
$thisBadgeTextColor = ${$statusVarNamePrefix . 'badgeStatus_textColor' . $statusName};
}
if (in_array($statusName, $TBadgeBorderOnly)) {
$thisBadgeTextColor = '#212529';
$thisBadgeBackgroundColor = "#fff";
}
print $cssPrefix . ".badge-status" . $statusName . " {\n";
print " color: " . $thisBadgeTextColor . " !important;\n";
if (in_array($statusName, $TBadgeBorderOnly)) {
print " border-color: " . $thisBadgeBorderColor . ";\n";
}
print " background-color: " . $thisBadgeBackgroundColor . ";\n";
print "}\n";
print $cssPrefix . ".badge-status" . $statusName . ".focus, " . $cssPrefix . ".badge-status" . $statusName . ":focus {\n";
print " outline: 0;\n";
print " box-shadow: 0 0 0 0.2rem " . colorHexToRgb($thisBadgeBackgroundColor, 0.5) . ";\n";
print "}\n";
print $cssPrefix . ".badge-status" . $statusName . ":focus, " . $cssPrefix . ".badge-status" . $statusName . ":hover {\n";
print " color: " . $thisBadgeTextColor . " !important;\n";
print " background-color: " . colorDarker($thisBadgeBackgroundColor, 10) . ";\n";
if (in_array($statusName, $TBadgeBorderOnly)) {
print " border-color: " . colorDarker($thisBadgeBorderColor, 10) . ";\n";
}
print "}\n";
}
}

View File

@ -32,7 +32,13 @@
global $theme_bordercolor, $theme_datacolor, $theme_bgcolor, $theme_bgcoloronglet;
$theme_bordercolor = array(235,235,224);
$theme_datacolor = array(array(136,102,136), array(0,130,110), array(140,140,220), array(190,120,120), array(190,190,100), array(115,125,150), array(100,170,20), array(250,190,30), array(150,135,125), array(85,135,150), array(150,135,80), array(150,80,150));
$theme_datacolor = array(array(157, 56, 191), array(0, 147, 183), array(250,190,30), array(221, 75, 57), array(0,166,90), array(140,140,220), array(190,120,120), array(190,190,100), array(115,125,150), array(100,170,20), array(150,135,125), array(85,135,150), array(150,135,80), array(150,80,150));
if(!empty($conf->global->MAIN_OPTIMIZEFORCOLORBLIND)) // user is loaded by dolgraph.class.php
{
// for now we use the same configuration for all types of color blind
$theme_datacolor = array(array(248, 220, 1), array(9, 85, 187), array(42, 208, 255), array(0, 0, 0), array(169, 169, 169), array(253, 102, 136), array(120, 154, 190), array(146, 146, 55), array(0, 52, 251), array(196, 226, 161), array(222, 160, 41), array(85,135,150), array(150,135,80), array(150,80,150));
}
$theme_bgcolor = array(hexdec('F4'),hexdec('F4'),hexdec('F4'));
$theme_bgcoloronglet = array(hexdec('DE'),hexdec('E7'),hexdec('EC'));
@ -71,6 +77,11 @@ $badgeInfo ='#17a2b8';
$badgeDark ='#343a40';
$badgeLight ='#f8f9fa';
// badge color ajustement for color blind
$colorblind_deuteranopes_badgeSuccess ='#37de5d'; //! text color black
$colorblind_deuteranopes_badgeSuccess_textColor7='#000';
$colorblind_deuteranopes_badgeWarning ='#e4e411';
/* 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 ....
@ -85,3 +96,9 @@ $badgeStatus6='#cad2d2';
$badgeStatus7='#baa32b';
$badgeStatus8='#be3013';
$badgeStatus9='#e7f0f0';
// status color ajustement for color blind
$colorblind_deuteranopes_badgeStatus4=$colorblind_deuteranopes_badgeStatus7=$colorblind_deuteranopes_badgeSuccess; //! text color black
$colorblind_deuteranopes_badgeStatus_textColor4=$colorblind_deuteranopes_badgeStatus_textColor7='#000';
$colorblind_deuteranopes_badgeStatus1=$colorblind_deuteranopes_badgeWarning;
$colorblind_deuteranopes_badgeStatus_textColor1='#000';

View File

@ -152,6 +152,12 @@ if (empty($reshook)) {
$tabparam["MAIN_OPTIMIZEFORTEXTBROWSER"] = 0;
}
if (GETPOST('MAIN_OPTIMIZEFORCOLORBLIND')) {
$tabparam["MAIN_OPTIMIZEFORCOLORBLIND"] = GETPOST('MAIN_OPTIMIZEFORCOLORBLIND');
} else {
$tabparam["MAIN_OPTIMIZEFORCOLORBLIND"] = 0;
}
$result = dol_set_user_param($db, $conf, $object, $tabparam);
header('Location: ' . $_SERVER["PHP_SELF"] . '?id=' . $id);