updates compliance policy icons indicating field state

This commit is contained in:
Seyi Adebajo 2018-03-08 11:12:49 -08:00
parent e3fd6f93fd
commit c65ece4121
4 changed files with 44 additions and 22 deletions

View File

@ -1,4 +0,0 @@
/// Contains variables applicable to application components
/// Stores the color for the compliance suggestions indicator.
$compliance-suggestion-hint: set-color(orange, orange5);

View File

@ -1,9 +1,16 @@
@import '../variables';
.dataset-compliance-fields {
$compliance-suggestion-color: get-color(orange5);
$compliance-readonly-color: get-color(red7);
$compliance-review-required-color: get-color(blue5);
$compliance-ok-color: get-color(green5);
&__has-suggestions {
color: $compliance-suggestion-hint;
color: $compliance-suggestion-color;
margin-left: item-spacing(2);
&__icon {
color: $compliance-suggestion-color;
}
}
&__notification-column {
@ -39,10 +46,22 @@
}
&__icon {
color: get-color(red7);
color: $compliance-readonly-color;
opacity: 0.9;
}
}
&--review-required {
&__icon {
color: $compliance-review-required-color;
}
}
&--ok {
&__icon {
color: $compliance-ok-color;
}
}
}
.compliance-depends {

View File

@ -1,5 +1,3 @@
@import '../variables';
/// Styles a dot that indicates that user attention is required
.notification-dot {
width: 0;
@ -11,14 +9,6 @@
border-color: set-color(red, maroonflush);
border-radius: 50%;
&--has-prediction {
border-color: $compliance-suggestion-hint;
}
&--needs-review {
border-color: set-color(blue, blue5);
}
/// Adapts the notification-dot for a tab header
&--on-tab {
position: absolute;

View File

@ -92,14 +92,31 @@
{{else}}
{{#if (and row.suggestion (not row.suggestionResolution))}}
<span class="notification-dot notification-dot--has-prediction"
aria-label="Compliance fields have suggested values"></span>
<i class="fa fa-question dataset-compliance-fields__has-suggestions__icon" title="Compliance field has suggested values">
{{tooltip-on-element
text="Has suggestions"
}}
</i>
{{else}}
{{#if row.isReviewRequested}}
<span class="notification-dot notification-dot--needs-review"
aria-label="Compliance policy for field does not exist"></span>
<i class="fa fa-exclamation dataset-compliance-fields--review-required__icon" title="Compliance policy for field does not exist">
{{tooltip-on-element
text="New field"
}}
</i>
{{else}}
<i class="fa fa-check dataset-compliance-fields--ok__icon" title="All good!">
{{tooltip-on-element
text="All good!"
}}
</i>
{{/if}}
{{/if}}