Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-03-09 14:10:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: buildAvatar helper to take css variable for size instead of hardcoded xs, sm, etc., fixed up picture selection modal

Browse Source
This commit is contained in:
Julian Lam
2022-09-13 15:19:47 -04:00
parent 6bffe519b3
commit f75838c906
4 changed files with 25 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
public/scss/generics.scss
View File

@@ -79,41 +79,10 @@
/* Contains the user icon class as a mixin, so there's no need to include that in the template */
@include user-icon;
&.avatar-xs {
width: 16px;
height: 16px;
@include user-icon-style($line-height-base, $font-size-base * 0.75);
}
&.avatar-sm {
width: 24px;
height: 24px;
@include user-icon-style($line-height-base, $font-size-base);
}
&.avatar-sm2x {
width: 48px;
height: 48px;
@include user-icon-style($line-height-base, $font-size-base * 2);
}
&.avatar-md {
width: 32px;
height: 32px;
@include user-icon-style($line-height-base, $font-size-base * 1.5);
}
&.avatar-lg {
width: 64px;
height: 64px;
@include user-icon-style($line-height-base, $font-size-base * 3);
}
&.avatar-xl {
width: 128px;
height: 128px;
@include user-icon-style($line-height-base * 1.15, $font-size-base * 6);
}
$size: var(--avatar-size);
width: $size;
height: $size;
@include user-icon-style($line-height-base, calc($size * 0.6));
&.avatar-rounded {
border-radius: 50%;

2
public/scss/mixins.scss
View File

@@ -68,8 +68,6 @@
@mixin user-icon-style($size: 32px, $font-size: 1.5rem, $border-radius: inherit){
border-radius: $border-radius;
width: $size;
height: $size;
line-height: $size;
font-size: $font-size;
}

14
public/src/modules/helpers.common.js
View File

@@ -292,7 +292,7 @@ module.exports = function (utils, Benchpress, relative_path) {
/**
* userObj requires:
* - uid, picture, icon:bgColor, icon:text (getUserField w/ "picture" should return all 4), username
* size: one of "xs", "sm", "md", "lg", or "xl" (required), or an integer
* size: a picture size in the form of a value with units (e.g. 64px, 4rem, etc.)
* rounded: true or false (optional, default false)
* classNames: additional class names to prepend (optional, default none)
* component: overrides the default component (optional, default none)
@@ -309,18 +309,10 @@ module.exports = function (utils, Benchpress, relative_path) {
'data-uid="' + userObj.uid + '"',
'loading="lazy"',
];
const styles = [];
const styles = [`--avatar-size: ${size};`];
classNames = classNames || '';
// Validate sizes, handle integers, otherwise fall back to `avatar-sm`
if (['xs', 'sm', 'sm2x', 'md', 'lg', 'xl'].includes(size)) {
classNames += ' avatar-' + size;
} else if (!isNaN(parseInt(size, 10))) {
styles.push('width: ' + size + 'px;', 'height: ' + size + 'px;', 'line-height: ' + size + 'px;', 'font-size: ' + (parseInt(size, 10) / 16) + 'rem;');
} else {
classNames += ' avatar-sm';
}
attributes.unshift('class="avatar ' + classNames + (rounded ? ' avatar-rounded' : '') + '"');
attributes.unshift(`class="avatar ${classNames}${rounded ? ' avatar-rounded' : ''}"`);
// Component override
if (component) {

22
src/socket.io/user/picture.js
View File

@@ -23,22 +23,36 @@ module.exports = function (SocketUser) {
throw new Error('[[error:invalid-data]]');
}
const [list, uploaded] = await Promise.all([
const [list, userObj] = await Promise.all([
plugins.hooks.fire('filter:user.listPictures', {
uid: data.uid,
pictures: [],
}),
user.getUserField(data.uid, 'uploadedpicture'),
user.getUserData(data.uid),
]);
if (uploaded) {
if (userObj.uploadedpicture) {
list.pictures.push({
type: 'uploaded',
url: uploaded,
url: userObj.uploadedpicture,
text: '[[user:uploaded_picture]]',
});
}
// Normalize list into "user object" format
list.pictures = list.pictures.map(({ type, url, text }) => ({
type,
username: text,
picture: url,
}));
list.pictures.unshift({
type: 'default',
'icon:text': userObj['icon:text'],
'icon:bgColor': userObj['icon:bgColor'],
username: '[[user:default_picture]]',
});
return list.pictures;
};
};