From 36cc7380a5296efea7d62039d4aa1b7445bb2606 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Mon, 17 May 2021 09:48:20 +0200
Subject: [PATCH] avatar component
---
.../components/navigation/Sidebar/index.tsx | 8 ++---
.../navigation/Sidebar/sidebar.scss | 8 +----
client/src/components/ui/Avatar/avatar.scss | 23 +++++++++++++
client/src/components/ui/Avatar/index.tsx | 34 +++++++++++++++++++
4 files changed, 61 insertions(+), 12 deletions(-)
create mode 100644 client/src/components/ui/Avatar/avatar.scss
create mode 100644 client/src/components/ui/Avatar/index.tsx
diff --git a/client/src/components/navigation/Sidebar/index.tsx b/client/src/components/navigation/Sidebar/index.tsx
index 50f3bd4..2d26b47 100644
--- a/client/src/components/navigation/Sidebar/index.tsx
+++ b/client/src/components/navigation/Sidebar/index.tsx
@@ -1,11 +1,11 @@
import Navigation from 'components/navigation/Navigation';
-import avatar from 'images/daniel-planoetscher.jpg';
+import Avatar from 'components/ui/Avatar';
import LineGraph from 'components/graphs/LineGraph';
import { NavLink, useHistory } from 'react-router-dom';
import { clearToken } from 'adapters/auth';
import './sidebar.scss';
import { useEffect, useState } from 'react';
-import { getCurrentUser, getUserImageUri, User } from 'adapters/user';
+import { getCurrentUser, User } from 'adapters/user';
interface Props {
mobileShown: boolean;
@@ -32,9 +32,7 @@ export default function Sidebar({ mobileShown, setMobileShown }: Props) {
<aside className={'site-aside' + (mobileShown ? ' shown' : '')}>
<div className="top">
<div className="profile">
- <div className="avatar">
- <img src={user && getUserImageUri(user.id)} alt="Profile" />
- </div>
+ <Avatar user={user}/>
<span className="name">{user?.realname ?? user?.username}</span>
{user?.realname && <span className="username">{user?.username}</span>}
</div>
diff --git a/client/src/components/navigation/Sidebar/sidebar.scss b/client/src/components/navigation/Sidebar/sidebar.scss
index a3a0a8c..f3d753d 100644
--- a/client/src/components/navigation/Sidebar/sidebar.scss
+++ b/client/src/components/navigation/Sidebar/sidebar.scss
@@ -41,14 +41,8 @@
.avatar {
width: 130px;
height: 130px;
- border-radius: 50%;
- overflow: hidden;
margin-bottom: 20px;
-
- img {
- width: 100%;
- height: auto;
- }
+ font-size: 64px;
}
.name {
diff --git a/client/src/components/ui/Avatar/avatar.scss b/client/src/components/ui/Avatar/avatar.scss
new file mode 100644
index 0000000..e93c4a6
--- /dev/null
+++ b/client/src/components/ui/Avatar/avatar.scss
@@ -0,0 +1,23 @@
+@use 'styles/settings.scss' as s;
+
+.avatar {
+ border-radius: 50%;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: auto;
+ }
+ .standard-image {
+ width: 100%;
+ height: 100%;
+ background: s.$secondary;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-transform: uppercase;
+ user-select: none;
+ color: s.$black;
+ font-weight: s.$weight-bold;
+ }
+}
\ No newline at end of file
diff --git a/client/src/components/ui/Avatar/index.tsx b/client/src/components/ui/Avatar/index.tsx
new file mode 100644
index 0000000..ea6dba5
--- /dev/null
+++ b/client/src/components/ui/Avatar/index.tsx
@@ -0,0 +1,34 @@
+import { getUserImageUri, User } from 'adapters/user';
+import { useCallback, useState } from 'react';
+import './avatar.scss';
+
+interface Props {
+ user?: User;
+}
+
+export default function Avatar({ user }: Props) {
+ const [error, setError] = useState(false);
+ const avatarSrc = user && getUserImageUri(user.id);
+
+ const onError = useCallback(() => {
+ setError(true);
+ }, [setError]);
+ return (
+ <div className="avatar">
+
+ {
+ !error && (
+ <img src={avatarSrc} alt={user?.username} onError={onError} />
+ )
+ }
+
+ {
+ error && (
+ <div className="standard-image">
+ {user?.username.charAt(0)}
+ </div>
+ )
+ }
+ </div>
+ )
+}
\ No newline at end of file
--
GitLab