extract renderAvatar

and use avatarTitle instead of sender for img title
This commit is contained in:
Bruno Windels 2020-08-20 17:32:18 +02:00
parent 7992607442
commit cff39019cb
3 changed files with 28 additions and 9 deletions

View File

@ -35,6 +35,7 @@ export class MessageTile extends SimpleTile {
return this._entry.displayName || this._entry.sender; return this._entry.displayName || this._entry.sender;
} }
// Avatar view model contract
get avatarColorNumber() { get avatarColorNumber() {
return getIdentifierColorNumber(this._entry.sender); return getIdentifierColorNumber(this._entry.sender);
} }
@ -50,6 +51,10 @@ export class MessageTile extends SimpleTile {
return avatarInitials(this.sender); return avatarInitials(this.sender);
} }
get avatarTitle() {
return this.sender;
}
get date() { get date() {
return this._date && this._date.toLocaleDateString({}, {month: "numeric", day: "numeric"}); return this._date && this._date.toLocaleDateString({}, {month: "numeric", day: "numeric"});
} }

View File

@ -19,3 +19,23 @@ export function spinner(t, extraClasses = undefined) {
t.circle({cx:"50%", cy:"50%", r:"45%", pathLength:"100"}) t.circle({cx:"50%", cy:"50%", r:"45%", pathLength:"100"})
); );
} }
/**
* @param {TemplateBuilder} t
* @param {Object} vm view model with {avatarUrl, avatarColorNumber, avatarTitle, avatarLetter}
* @param {Number} size
* @return {Element}
*/
export function renderAvatar(t, vm, size) {
const hasAvatar = !!vm.avatarUrl;
const avatarClasses = {
avatar: true,
[`usercolor${vm.avatarColorNumber}`]: !hasAvatar,
};
// TODO: handle updates from default to img or reverse
const sizeStr = size.toString();
const avatarContent = hasAvatar ?
t.img({src: vm => vm.avatarUrl, width: sizeStr, height: sizeStr, title: vm => vm.avatarTitle}) :
vm => vm.avatarLetter;
return t.div({className: avatarClasses}, [avatarContent]);
}

View File

@ -15,6 +15,8 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import {renderAvatar} from "../../../common.js";
export function renderMessage(t, vm, children) { export function renderMessage(t, vm, children) {
const classes = { const classes = {
"TextMessageView": true, "TextMessageView": true,
@ -23,16 +25,8 @@ export function renderMessage(t, vm, children) {
continuation: vm => vm.isContinuation, continuation: vm => vm.isContinuation,
}; };
const hasAvatar = !!vm.avatarUrl;
const avatarClasses = {
avatar: true,
[`usercolor${vm.avatarColorNumber}`]: !hasAvatar,
};
const avatarContent = hasAvatar ?
t.img({src: vm.avatarUrl, width: "30", height: "30", title: vm.sender}) :
vm.avatarLetter;
const profile = t.div({className: "profile"}, [ const profile = t.div({className: "profile"}, [
t.div({className: avatarClasses}, [avatarContent]), renderAvatar(t, vm, 30),
t.div({className: `sender usercolor${vm.avatarColorNumber}`}, vm.sender) t.div({className: `sender usercolor${vm.avatarColorNumber}`}, vm.sender)
]); ]);
children = [profile].concat(children); children = [profile].concat(children);