Animation on filter list option colors
}
+ function mkOptionSummaryTitle(option) {
+ const optionName = option.optionInfo.name || "Not Provided";
+
+ if (option.counts.total !== option.counts.visible){
+ return `${optionName}: (${option.counts.total}) ${option.counts.visible}`
+ } else {
+ return `${optionName}: ${option.counts.visible}`
+ }
+ }
+
+
$: {
const byPropName = _.keyBy($summaries, d => mkPropNameForColumnDefinition(d.column));
class:text-muted={optionSummary.counts.visible === 0}
on:click={() => onToggleFilter(optionSummary)}>
<td>
- <div style={`
- display: inline-block;
- height: 10px; width: 10px;
+ <div class="color-indicator"
+ style={`
+ opacity: ${optionSummary.counts.visible > 0 ? 1 : 0.2};
background-color: ${optionSummary.optionInfo.color}`}>
</div>
<span>{optionSummary.optionInfo.name || "Not Provided"}</span>
<ul style="display: inline-block"
class="list-inline column-values-summary">
{#each summary.optionSummaries as option}
- <li title={option.optionInfo.name}>
+ <li title={mkOptionSummaryTitle(option)}>
<span style={`
background-color: ${option.optionInfo.color};
opacity: ${option.counts.visible > 0 ? 1 : 0.2};
font-style: italic;
}
+ .color-indicator {
+ display: inline-block;
+ height: 10px; width: 10px;
+ transition: opacity 0.3s linear;
+ }
+
</style>
\ No newline at end of file
