TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 20:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Refactored <GhMemberAvatar> to glimmer component

Browse Source 
no issue

- cleaned up property access in template to differentiate between passed-in args and component-defined properties
- tidied up logic in `backgroundStyle` and `initials` getters
This commit is contained in:
Kevin Ansfield 2020-02-27 12:33:33 +00:00
parent ab8334dae2
commit b5d560750f
2 changed files with 23 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
ghost/admin/app/components/gh-member-avatar.js
View File

@ -1,5 +1,4 @@
import Component from '@ember/component';
import {computed} from '@ember/object';
import Component from '@glimmer/component';
import {htmlSafe} from '@ember/string';
const stringToHslColor = function (str, saturation, lightness) {
@ -12,33 +11,24 @@ const stringToHslColor = function (str, saturation, lightness) {
return 'hsl(' + h + ', ' + saturation + '%, ' + lightness + '%)';
};
export default Component.extend({
tagName: '',
containerClass: '',
member: null,
initialsClass: computed('sizeClass', function () {
return this.sizeClass || 'gh-member-list-avatar';
}),
export default class GhMemberAvatarComponent extends Component {
get memberName() {
let {member} = this.args;
return member.name || member.email || 'NM';
}
backgroundStyle: computed('member.{name,email}', function () {
let name = this.member.name || this.member.email || 'NM';
if (name) {
let color = stringToHslColor(name, 55, 55);
return htmlSafe(`background-color: ${color}`);
get backgroundStyle() {
let color = stringToHslColor(this.memberName, 55, 55);
return htmlSafe(`background-color: ${color}`);
}
get initials() {
if (this.memberName === 'NM') {
return 'NM';
}
return htmlSafe('');
}),
initials: computed('member.{name,email}', function () {
let name = this.member.name || this.member.email;
if (name) {
let names = name.split(' ');
let intials = names.length > 1 ? [names[0][0], names[names.length - 1][0]] : [names[0][0]];
return intials.join('').toUpperCase();
}
// New Member initials
return 'NM';
})
});
let names = this.memberName.split(' ');
let intials = names.length > 1 ? [names[0][0], names[names.length - 1][0]] : [names[0][0]];
return intials.join('').toUpperCase();
}
}

8
ghost/admin/app/templates/components/gh-member-avatar.hbs
View File

@ -1,6 +1,6 @@
<figure class="gh-member-gravatar {{this.containerClass}}">
<div class="gh-member-initials flex items-center justify-center br-100 {{this.containerClass}}" style={{this.backgroundStyle}}>
<span class="gh-member-avatar-label {{this.initialsClass}}">{{this.initials}}</span>
<figure class="gh-member-gravatar {{@containerClass}}">
<div class="gh-member-initials flex items-center justify-center br-100 {{@containerClass}}" style={{this.backgroundStyle}}>
<span class="gh-member-avatar-label {{or @sizeClass "gh-member-list-avatar"}}">{{this.initials}}</span>
</div>
<img class="gh-member-avatar-image" src={{gravatar this.member.email size=180}} />
<img class="gh-member-avatar-image" src={{gravatar @member.email size=180}} />
</figure>