stefanorigano (SRI)
e111cfd35e
Overall colors review to achieve WACG standard compliance. https://www.w3.org/WAI/standards-guidelines/wcag/ Current contextual colors work fine when used for backgrounds but fail WACG tests when are used for text. Unfortunately Bootstrap use the same palette in both scenarios without providing effective control over text colors. The 'text-emphasis-variant' mixin, indeed, allows to darken a color by a certain amount, but since the amount is not customizable per-color the final result is always either too dark or too light for colors that are not used as a reference. This commit will define a specif SCSS map called `$o-theme-text-colors` that mirrors the default '$theme-colors' structure and contain fine-tuned values to be used specifically for text. In order to keep the same classes names, we customize the default 'text-emphasis-variant' mixin, instructing it to first look for our fine-tuned colors and eventually fallback to default. This commit will also adapt all the modules that use to hardcode text colors in SCSS rather than using default utility classes. We handle this using different approaches: - Use utility classes whenever is possible (eg. 'text-info') - If apply the class directly is not possible, '@extend' it in SCSS - If '@extend' is not ideal because of code complexity (eg. ':hover' interactions), use the new 'o-text-color([color name])' scss function.
26 lines
1.0 KiB
XML
26 lines
1.0 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<templates xml:space="preserve">
|
|
|
|
<!--
|
|
AKU FIXME: use mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js component instead
|
|
@param {string} status
|
|
-->
|
|
<t t-name="mail.widgets.UserStatus">
|
|
<span>
|
|
<t t-if="status == 'online'">
|
|
<i class="o_mail_user_status o_user_online fa fa-circle" title="Online" role="img" aria-label="User is online"/>
|
|
</t>
|
|
<t t-if="status == 'away'">
|
|
<i class="fa fa-circle o_mail_user_status o_user_idle text-warning" title="Idle" role="img" aria-label="User is idle"/>
|
|
</t>
|
|
<t t-if="status == 'offline'">
|
|
<i class="o_mail_user_status fa fa-circle-o" title="Offline" role="img" aria-label="User is offline"/>
|
|
</t>
|
|
<t t-if="status == 'bot'">
|
|
<i class="o_mail_user_status o_user_online fa fa-heart" title="Bot" role="img" aria-label="User is a bot"/>
|
|
</t>
|
|
</span>
|
|
</t>
|
|
|
|
</templates>
|