dolibarr 21.0.0-beta
badges.inc.php
1<?php
2/* Copyright (C) 2024 MDW <mdeweerd@users.noreply.github.com>
3 * Copyright (C) 2024 Frédéric France <frederic.france@free.fr>
4 */
5if (!defined('ISLOADEDBYSTEELSHEET')) {
6 die('Must be call by steelsheet');
7}
19'
20@phan-var-force string $badgePrimary
21@phan-var-force string $badgeSecondary
22@phan-var-force string $badgeSuccess
23@phan-var-force string $badgeDanger
24@phan-var-force string $badgeWarning
25@phan-var-force string $badgeInfo
26@phan-var-force string $badgeLight
27@phan-var-force string $badgeDark
28@phan-var-force string $colorblind_deuteranopes_badgeWarning
29';
30?>
31/* Badge style is based on bootstrap framework */
32
33.badge {
34 display: inline-block;
35 padding: .1em .35em;
36 font-size: 80%;
37 font-weight: 700 !important;
38 line-height: 1;
39 text-align: center;
40 white-space: nowrap;
41 vertical-align: baseline;
42 border-radius: .25rem;
43 transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
44 border-width: 2px;
45 border-style: solid;
46 border-color: rgba(255,255,255,0);
47 box-sizing: border-box;
48}
49
50.badge-status {
51 font-size: 0.95em;
52 padding: .19em .35em; /* more than 0.19 generate a change into height of lines */
53}
54.tabBar .arearef .statusref .badge-status, .tabBar .arearefnobottom .statusref .badge-status {
55 font-size: 1.1em;
56 padding: .4em .4em;
57}
58/* Force values for small screen 767 */
59@media only screen and (max-width: 767px)
60{
61 .tabBar .arearef .statusref .badge-status, .tabBar .arearefnobottom .statusref .badge-status {
62 font-size: 0.95em;
63 padding: .3em .2em;
64 }
65}
66
67.badge-pill, .tabs .badge {
68 padding-right: .5em;
69 padding-left: .5em;
70 border-radius: 0.25rem;
71}
72
73.badge-dot {
74 padding: 0;
75 border-radius: 50%;
76 padding: 0.45em;
77 vertical-align: text-top;
78}
79
80a.badge:focus, a.badge:hover {
81 text-decoration: none;
82}
83
84.liste_titre .badge:not(.nochangebackground) {
85 background-color: <?php print $badgeSecondary; ?>;
86 color: #fff;
87}
88
89span.badgeneutral {
90 padding: 2px 7px 2px 7px;
91 background-color: #e4e4e4;
92 color: #666;
93 border-radius: 10px;
94 white-space: nowrap;
95}
96
97
98/* PRIMARY */
99.badge-primary{
100 color: #fff !important;
101 background-color: <?php print $badgePrimary; ?>;
102}
103a.badge-primary.focus, a.badge-primary:focus {
104 outline: 0;
105 box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgePrimary, 0.5); ?>;
106}
107a.badge-primary:focus, a.badge-primary:hover {
108 color: #fff !important;
109 background-color: <?php print colorDarker($badgePrimary, 10); ?>;
110}
111
112/* SECONDARY */
113.badge-secondary, .tabs .badge {
114 color: #fff !important;
115 background-color: <?php print $badgeSecondary; ?>;
116}
117a.badge-secondary.focus, a.badge-secondary:focus {
118 outline: 0;
119 box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeSecondary, 0.5); ?>;
120}
121a.badge-secondary:focus, a.badge-secondary:hover {
122 color: #fff !important;
123 background-color: <?php print colorDarker($badgeSecondary, 10); ?>;
124}
125
126/* SUCCESS */
127.badge-success {
128 color: #fff !important;
129 background-color: <?php print $badgeSuccess; ?>;
130}
131a.badge-success.focus, a.badge-success:focus {
132 outline: 0;
133 box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeSuccess, 0.5); ?>;
134}
135a.badge-success:focus, a.badge-success:hover {
136 color: #fff !important;
137 background-color: <?php print colorDarker($badgeSuccess, 10); ?>;
138}
139
140/* DANGER */
141.badge-danger {
142 color: #fff !important;
143 background-color: <?php print $badgeDanger; ?>;
144}
145a.badge-danger.focus, a.badge-danger:focus {
146 outline: 0;
147 box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeDanger, 0.5); ?>;
148}
149a.badge-danger:focus, a.badge-danger:hover {
150 color: #fff !important;
151 background-color: <?php print colorDarker($badgeDanger, 10); ?>;
152}
153
154/* WARNING */
155.badge-warning {
156 color: #fff !important;
157 background-color: <?php print $badgeWarning; ?>;
158}
159a.badge-warning.focus, a.badge-warning:focus {
160 outline: 0;
161 box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeWarning, 0.5); ?>;
162}
163a.badge-warning:focus, a.badge-warning:hover {
164 color: #212529 !important;
165 background-color: <?php print colorDarker($badgeWarning, 10); ?>;
166}
167
168/* WARNING colorblind */
169body[class*="colorblind-"] .badge-warning {
170 background-color: <?php print $colorblind_deuteranopes_badgeWarning; ?>;
171 }
172body[class*="colorblind-"] a.badge-warning.focus,body[class^="colorblind-"] a.badge-warning:focus {
173 box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($colorblind_deuteranopes_badgeWarning, 0.5); ?>;
174}
175body[class*="colorblind-"] a.badge-warning:focus, a.badge-warning:hover {
176 background-color: <?php print colorDarker($colorblind_deuteranopes_badgeWarning, 10); ?>;
177}
178
179/* INFO */
180.badge-info {
181 color: #fff !important;
182 background-color: <?php print $badgeInfo; ?>;
183}
184a.badge-info.focus, a.badge-info:focus {
185 outline: 0;
186 box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeInfo, 0.5); ?>;
187}
188a.badge-info:focus, a.badge-info:hover {
189 color: #fff !important;
190 background-color: <?php print colorDarker($badgeInfo, 10); ?>;
191}
192
193/* LIGHT */
194.badge-light {
195 color: #212529 !important;
196 background-color: <?php print $badgeLight; ?>;
197}
198a.badge-light.focus, a.badge-light:focus {
199 outline: 0;
200 box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeLight, 0.5); ?>;
201}
202a.badge-light:focus, a.badge-light:hover {
203 color: #212529 !important;
204 background-color: <?php print colorDarker($badgeLight, 10); ?>;
205}
206
207/* DARK */
208.badge-dark {
209 color: #fff !important;
210 background-color: <?php print $badgeDark; ?>;
211}
212a.badge-dark.focus, a.badge-dark:focus {
213 outline: 0;
214 box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeDark, 0.5); ?>;
215}
216a.badge-dark:focus, a.badge-dark:hover {
217 color: #fff !important;
218 background-color: <?php print colorDarker($badgeDark, 10); ?>;
219}
220
221
222@media only screen and (max-width: 570px)
223{
224 span.badge.badge-status {
225 overflow: hidden;
226 max-width: 130px;
227 text-overflow: ellipsis;
228 }
229}
230
231
232/* STATUS BADGES */
233<?php
234for ($i = 0; $i <= 10; $i++) {
235 /* Default Status */
236 _createStatusBadgeCss((string) $i, '', "STATUS".$i);
237
238 // create status for accessibility
239 _createStatusBadgeCss((string) $i, 'colorblind_deuteranopes_', "COLORBLIND STATUS".$i, 'body[class*="colorblind-"] ');
240}
241
242_createStatusBadgeCss('1b', '', "STATUS1b");
243_createStatusBadgeCss('4b', '', "STATUS4b");
244
245
255function _createStatusBadgeCss($statusName, $statusVarNamePrefix = '', $commentLabel = '', $cssPrefix = '')
256{
257 global ${$statusVarNamePrefix.'badgeStatus'.$statusName}, ${$statusVarNamePrefix.'badgeStatus_textColor'.$statusName};
258
259 if (!empty(${$statusVarNamePrefix.'badgeStatus'.$statusName})) {
260 print "\n/* ".strtoupper($commentLabel)." */\n";
261
262 $thisBadgeBackgroundColor = $thisBadgeBorderColor = ${$statusVarNamePrefix.'badgeStatus'.$statusName};
263
264 $TBadgeBorderOnly = array('0', '1b', '3', '4b', '5', '7', '10');
265 $thisBadgeTextColor = colorIsLight(${$statusVarNamePrefix.'badgeStatus'.$statusName}) ? '#212529' : '#ffffff';
266
267 if (!empty(${$statusVarNamePrefix.'badgeStatus_textColor'.$statusName})) {
268 $thisBadgeTextColor = ${$statusVarNamePrefix.'badgeStatus_textColor'.$statusName};
269 }
270
271 if (in_array((string) $statusName, $TBadgeBorderOnly)) {
272 $thisBadgeTextColor = '#212529';
273 $thisBadgeBackgroundColor = "";
274 }
275
276 if (in_array((string) $statusName, array('0', '5', '9'))) {
277 $thisBadgeTextColor = '#999999';
278 }
279 if (in_array((string) $statusName, array('6'))) {
280 $thisBadgeTextColor = '#777777';
281 }
282
283 // badge-statusX
284 print $cssPrefix.".badge-status".$statusName." {\n";
285 print " color: ".$thisBadgeTextColor." !important;\n";
286 if (in_array((string) $statusName, $TBadgeBorderOnly)) {
287 print " border-color: ".$thisBadgeBorderColor." !important;\n";
288 }
289 if ($thisBadgeBackgroundColor != '') {
290 print " background-color: ".$thisBadgeBackgroundColor." !important;\n";
291 }
292 print "}\n";
293
294 print $cssPrefix.".font-status".$statusName." {\n";
295 if ($thisBadgeBackgroundColor != '') {
296 print " color: ".$thisBadgeBackgroundColor." !important;\n";
297 }
298 print "}\n";
299
300 print $cssPrefix.".badge-status".$statusName.".focus, ".$cssPrefix.".badge-status".$statusName.":focus {\n";
301 print " outline: 0;\n";
302 print " box-shadow: 0 0 0 0.2rem ".colorHexToRgb($thisBadgeBackgroundColor, 0.5)." !important;\n";
303 print "}\n";
304
305 // badge-statusX:focus
306 print $cssPrefix.".badge-status".$statusName.":focus, ".$cssPrefix.".badge-status".$statusName.":hover {\n";
307 print " color: ".$thisBadgeTextColor." !important;\n";
308 //print " background-color: " . colorDarker($thisBadgeBackgroundColor, 10) . ";\n";
309 if (in_array((string) $statusName, $TBadgeBorderOnly)) {
310 print " border-color: ".colorDarker($thisBadgeBorderColor, 10)." !important;\n";
311 }
312 print "}\n";
313 }
314}
print $langs trans("Ref").' m titre as m m statut as status
Or an array listing all the potential status of the object: array: int of the status => translated la...
Definition index.php:171
colorHexToRgb($hex, $alpha=false, $returnArray=false)
colorDarker($hex, $percent)
colorIsLight($stringcolor)
Return true if the color is light.