feat: Version 2

Closes #627, closes #1047

client/src/components/users/UserAvatar/UserAvatar.jsx

@@ -0,0 +1,113 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import upperFirst from 'lodash/upperFirst';
+import camelCase from 'lodash/camelCase';
+import initials from 'initials';
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+
+import selectors from '../../../selectors';
+import { StaticUserIds } from '../../../constants/StaticUsers';
+
+import styles from './UserAvatar.module.scss';
+
+const Sizes = {
+  TINY: 'tiny',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  MASSIVE: 'massive',
+};
+
+const COLORS = [
+  'emerald',
+  'peter-river',
+  'wisteria',
+  'carrot',
+  'alizarin',
+  'turquoise',
+  'midnight-blue',
+];
+
+const getColor = (name) => {
+  let sum = 0;
+  for (let i = 0; i < name.length; i += 1) {
+    sum += name.charCodeAt(i);
+  }
+
+  return COLORS[sum % COLORS.length];
+};
+
+const UserAvatar = React.memo(
+  ({ id, size, isDisabled, withCreatorIndicator, className, onClick }) => {
+    const selectUserById = useMemo(() => selectors.makeSelectUserById(), []);
+
+    const user = useSelector((state) => selectUserById(state, id));
+
+    const [t] = useTranslation();
+
+    const contentNode = (
+      <span
+        title={
+          user.id === StaticUserIds.DELETED
+            ? t(`common.${user.name}`, {
+                context: 'title',
+              })
+            : user.name
+        }
+        className={classNames(
+          styles.wrapper,
+          styles[`wrapper${upperFirst(size)}`],
+          onClick && styles.wrapperHoverable,
+          !user.avatar && styles[`background${upperFirst(camelCase(getColor(user.name)))}`],
+        )}
+        style={{
+          background: user.avatar && `url("${user.avatar.thumbnailUrls.cover180}") center / cover`,
+        }}
+      >
+        {!user.avatar && <span className={styles.initials}>{initials(user.name).slice(0, 2)}</span>}
+        {withCreatorIndicator && <span className={styles.creatorIndicator}>+</span>}
+      </span>
+    );
+
+    return onClick ? (
+      <button
+        data-id={id}
+        type="button"
+        disabled={isDisabled}
+        className={classNames(styles.button, className)}
+        onClick={onClick}
+      >
+        {contentNode}
+      </button>
+    ) : (
+      <span className={className}>{contentNode}</span>
+    );
+  },
+);
+
+UserAvatar.propTypes = {
+  id: PropTypes.string,
+  size: PropTypes.oneOf(Object.values(Sizes)),
+  isDisabled: PropTypes.bool,
+  withCreatorIndicator: PropTypes.bool,
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+UserAvatar.defaultProps = {
+  id: undefined,
+  size: Sizes.MEDIUM,
+  isDisabled: false,
+  withCreatorIndicator: false,
+  className: undefined,
+  onClick: undefined,
+};
+
+export default UserAvatar;

client/src/components/users/UserAvatar/UserAvatar.module.scss

@@ -0,0 +1,116 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    outline: none;
+    padding: 0;
+  }
+
+  // TODO: provide for different sizes
+  .creatorIndicator {
+    background: #fff;
+    border-radius: 50%;
+    bottom: 0;
+    color: #6a808b;
+    font-size: 12px;
+    height: 10px;
+    line-height: 10px;
+    position: absolute;
+    right: 0;
+    width: 10px;
+  }
+
+  .initials {
+    margin: 0 auto;
+    text-transform: capitalize;
+  }
+
+  .wrapper {
+    border-radius: 50%;
+    color: #fff;
+    display: inline-block;
+    line-height: 1;
+    position: relative;
+    text-align: center;
+    vertical-align: top;
+  }
+
+  .wrapperHoverable:hover {
+    opacity: 0.75;
+  }
+
+  /* Sizes */
+
+  .wrapperTiny {
+    font-size: 10px;
+    height: 24px;
+    line-height: 20px;
+    padding: 2px 0;
+    width: 24px;
+  }
+
+  .wrapperSmall {
+    font-size: 12px;
+    height: 28px;
+    padding: 8px 0;
+    width: 28px;
+  }
+
+  .wrapperMedium {
+    font-size: 14px;
+    height: 32px;
+    padding: 10px 0;
+    width: 32px;
+  }
+
+  .wrapperLarge {
+    font-size: 14px;
+    height: 36px;
+    padding: 12px 0 10px;
+    width: 36px;
+  }
+
+  .wrapperMassive {
+    font-size: 36px;
+    height: 100px;
+    padding: 32px 0 10px;
+    width: 100px;
+  }
+
+  /* Backgrounds */
+
+  .backgroundEmerald {
+    background: #2ecc71;
+  }
+
+  .backgroundPeterRiver {
+    background: #3498db;
+  }
+
+  .backgroundWisteria {
+    background: #8e44ad;
+  }
+
+  .backgroundCarrot {
+    background: #e67e22;
+  }
+
+  .backgroundAlizarin {
+    background: #e74c3c;
+  }
+
+  .backgroundTurquoise {
+    background: #1abc9c;
+  }
+
+  .backgroundMidnightBlue {
+    background: #2c3e50;
+  }
+}

client/src/components/users/UserAvatar/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import UserAvatar from './UserAvatar';
+
+export default UserAvatar;