📁 Changed TDrive root folder (#16)

📁 Changed TDrive root folder

tdrive/frontend/src/app/components/user/user.jsx

@@ -0,0 +1,57 @@
+// eslint-disable-next-line no-use-before-define
+import React, { Component } from 'react';
+
+import UserService from 'app/features/users/services/current-user-service';
+import NotificationParameters from 'app/deprecated/user/notification_parameters.js';
+import ListenUsers from 'app/features/users/services/listen-users-service';
+import UserOnlineStatus from '../online-user-status/online-user-status';
+
+import './user.scss';
+
+export default class User extends Component {
+  constructor(props) {
+    super();
+  }
+  UNSAFE_componentWillMount() {
+    ListenUsers.listenUser(this.props.user.id);
+  }
+  componentWillUnmount() {
+    ListenUsers.cancelListenUser(this.props.user.id);
+  }
+  render() {
+    var user = this.props.user;
+    var notifications_disabled = false;
+    if (user && NotificationParameters.hasNotificationsDisabled(user.notifications_preferences)) {
+      notifications_disabled = true;
+    }
+    return (
+      <div
+        className={
+          'user_head ' +
+          (this.props.small ? 'small ' : '') +
+          (this.props.withBorder === undefined || this.props.withBorder ? 'border ' : '') +
+          (this.props.medium ? 'medium ' : '') +
+          (this.props.big ? 'big ' : '')
+        }
+        style={{
+          backgroundImage: `url(${UserService.getThumbnail(user)}`,
+          width: this.props.size,
+          height: this.props.size,
+        }}
+      >
+        {this.props.withStatus && (
+          <UserOnlineStatus
+            user={user}
+            notifications_disabled={notifications_disabled}
+            size={
+              (this.props.small ? 'small' : undefined) ||
+              (this.props.medium ? 'medium' : undefined) ||
+              (this.props.big ? 'big' : undefined) ||
+              'medium'
+            }
+          />
+        )}
+      </div>
+    );
+  }
+}

tdrive/frontend/src/app/components/user/user.scss

@@ -0,0 +1,50 @@
+.user_head {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: solid 1px var(--grey-background);
+  background-position: center;
+  background-size: cover;
+  background-color: var(--primary-background);
+  position: relative;
+  border: 0px solid #fff;
+
+  &.border {
+    border: 1px solid #fff;
+  }
+
+  .online_user_status {
+    position: absolute;
+    bottom: -1px;
+    right: -1px;
+  }
+
+  &.big {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--border-radius-large);
+    .online_user_status {
+      border-width: 2px;
+      bottom: -2px;
+      right: -2px;
+    }
+  }
+
+  &.medium {
+    width: 24px;
+    height: 24px;
+    .status {
+      width: 6px;
+      height: 6px;
+    }
+  }
+
+  &.small {
+    width: 16px;
+    height: 16px;
+    .status {
+      width: 4px;
+      height: 4px;
+    }
+  }
+}