adding new access-status-list-element-badge css classes

[paulo-graca]

References

• Fixes Visual differentiation needed for Access Status #2402

Description

This PR adds CSS classes to access-status-badge component in order to make possible to differentiate access status based on the value itself.

Instructions for Reviewers

In order to test it you need to activate in your angular configuration:

# Item Config
item:
  showAccessStatuses: true

and for Items and Publications (if you use Entities), inspect the access status value, like: "Open Access" and you should see something like:

<span class="badge badge-secondary access-status-list-element-badge access-status-open-access-listelement-badge">Open Access</span>

List of changes in this PR:

• We just changed the HTML part of the component and replace "." with "-" of the accessStatus value.

[artlowel]

Thanks @paulo-graca

It works, but I just have an inline comment about the performance.

It would also be good to already provide default colors for the access statuses. Note that you can reuse bootstrap's own badge mixin for that e.g.:

.access-status-open-access-listelement-badge {
  @include badge-variant(map-get($theme-colors, warning));
}

this would make the access-status-open-access-listelement-badge class idential to the badge-warning class (i.e. orange)

[artlowel]

For performance reasons, it's not a good idea to put function calls in a template. Angular will re-render templates often, sometimes multiple times per second, so the exact same replace will happen many more times than necessary.

It's better to do the replace in the the map in the component ts file and map it to an object with a property for the label and the class (which is the label with the replacements). That way the replace only happens once

[paulo-graca]

Thank you @artlowel we weren't aware of this re-render issue. We will do as you suggest. Thank you for your feedback!

[paulo-graca]

@artlowel I think I've changed it in the way you suggested. I've also added an empty scss file, but without specifying anything. I think we all don't have a clear idea what access status should look like and you can confirm that on the issue discussion page (#2402).
We are currently working in a custom theme that will address this, when finished, if all agree, we can proposed it to be the default. It will be something like:

and

[artlowel]

Thanks @paulo-graca!

[artlowel]

We are currently working in a custom theme that will address this, when finished, if all agree, we can proposed it to be the default. It will be something like:

and

I like the way that looks

[dspace-bot]

Successfully created backport PR for dspace-7_x:

• [Port dspace-7_x] adding new access-status-list-element-badge css classes #2635