📁 Changed TDrive root folder (#16)

📁 Changed TDrive root folder

tdrive/frontend/src/app/components/inputs/deprecated_checkbox.jsx

@@ -0,0 +1,95 @@
+/* eslint-disable react/prop-types */
+import React, { Component } from 'react';
+
+import './inputs.scss';
+import CheckIcon from '@material-ui/icons/CheckOutlined';
+
+export default class Checkbox extends Component {
+  constructor() {
+    super();
+  }
+  renderSwitch() {
+    var className = this.props.className || '';
+
+    if (this.props.big) {
+      className += ' big ';
+    }
+    if (this.props.medium) {
+      className += ' medium ';
+    }
+    if (this.props.small) {
+      className += ' small ';
+    }
+
+    if (
+      className.indexOf('medium') === className.indexOf('small') &&
+      className.indexOf('big') === className.indexOf('small') &&
+      className.indexOf('big') < 0
+    ) {
+      className += ' medium';
+    }
+
+    return (
+      <div
+        className={
+          ' flex justify-center items-center w-6 h-6 border-2 rounded-full text-white ' +
+          (this.props.value
+            ? 'border-blue-500 bg-blue-500 hover:border-blue-600 hover:bg-blue-600'
+            : 'border-zinc-300 hover:border-blue-300') +
+          ' ' +
+          (this.props.disabled ? 'opacity-50' : 'cursor-pointer') +
+          ' ' +
+          (className || '')
+        }
+        onClick={() => {
+          if (!this.props.label && !this.props.disabled) {
+            this.props.onChange(!this.props.value);
+          }
+        }}
+      >
+        <div className="state">
+          <CheckIcon className="m-icon-small" />
+        </div>
+      </div>
+    );
+  }
+  render() {
+    var parentClassName = '';
+
+    if (this.props.big) {
+      parentClassName += ' big ';
+    }
+    if (this.props.medium) {
+      parentClassName += ' medium ';
+    }
+    if (this.props.small) {
+      parentClassName += ' small ';
+    }
+
+    if (
+      parentClassName.indexOf('medium') === parentClassName.indexOf('small') &&
+      parentClassName.indexOf('big') === parentClassName.indexOf('small') &&
+      parentClassName.indexOf('big') < 0
+    ) {
+      parentClassName += ' medium';
+    }
+
+    if (this.props.label) {
+      return (
+        <div
+          className={'checkbox_with_label ' + (this.props.value ? 'on ' : 'off ') + parentClassName}
+          onClick={() => {
+            if (!this.props.disabled) {
+              this.props.onChange(!this.props.value);
+            }
+          }}
+        >
+          {this.renderSwitch()}
+          <div className="label">{this.props.label}</div>
+        </div>
+      );
+    } else {
+      return this.renderSwitch();
+    }
+  }
+}

tdrive/frontend/src/app/components/inputs/input-enter.jsx

@@ -0,0 +1,46 @@
+/* eslint-disable react/prop-types */
+import React, { Component } from 'react';
+
+import Input from './input.jsx';
+import Icon from 'app/components/icon/icon.jsx';
+import './inputs.scss';
+
+export default class InputEnter extends Component {
+  constructor() {
+    super();
+  }
+  render() {
+    var parentClassName = '';
+
+    if (this.props.big) {
+      parentClassName += ' big ';
+    }
+    if (this.props.medium) {
+      parentClassName += ' medium ';
+    }
+    if (this.props.small) {
+      parentClassName += ' small ';
+    }
+
+    if (
+      parentClassName.indexOf('medium') === parentClassName.indexOf('small') &&
+      parentClassName.indexOf('big') === parentClassName.indexOf('small') &&
+      parentClassName.indexOf('big') < 0
+    ) {
+      parentClassName += ' medium';
+    }
+
+    return (
+      <div className={'input_icon input_enter ' + parentClassName}>
+        <Input
+          onEchap={this.props.onEchap}
+          onEnter={this.props.onEnter}
+          autoFocus={this.props.autoFocus}
+          onKeyDown={this.props.onKeyDown}
+          {...this.props}
+        />
+        <Icon type={'enter'} />
+      </div>
+    );
+  }
+}

tdrive/frontend/src/app/components/inputs/input-icon.jsx

@@ -0,0 +1,47 @@
+/* eslint-disable react/prop-types */
+import React, { Component } from 'react';
+
+import Input from './input.jsx';
+import Icon from 'app/components/icon/icon.jsx';
+import './inputs.scss';
+
+export default class InputIcon extends Component {
+  constructor() {
+    super();
+  }
+  render() {
+    var parentClassName = '';
+
+    if (this.props.big) {
+      parentClassName += ' big ';
+    }
+    if (this.props.medium) {
+      parentClassName += ' medium ';
+    }
+    if (this.props.small) {
+      parentClassName += ' small ';
+    }
+
+    if (
+      parentClassName.indexOf('medium') === parentClassName.indexOf('small') &&
+      parentClassName.indexOf('big') === parentClassName.indexOf('small') &&
+      parentClassName.indexOf('big') < 0
+    ) {
+      parentClassName += ' medium';
+    }
+
+    return (
+      <div className={'input_icon ' + parentClassName}>
+        <Icon type={this.props.icon} />
+        <Input
+          onEchap={this.props.onEchap}
+          onEnter={this.props.onEnter}
+          autoFocus={this.props.autoFocus}
+          onKeyDown={this.props.onKeyDown}
+          ref={this.refInput}
+          {...this.props}
+        />
+      </div>
+    );
+  }
+}

tdrive/frontend/src/app/components/inputs/input-with-button.jsx

@@ -0,0 +1,54 @@
+/* eslint-disable react/prop-types */
+import React, { Component } from 'react';
+
+import Languages from 'app/features/global/services/languages-service';
+import './input-with-button.scss';
+import Icon from 'app/components/icon/icon.jsx';
+import Input from './input.jsx';
+
+export default class InputWithButton extends Component {
+  /*
+        props = {
+            value : "",
+            disabled : true|false
+        }
+    */
+  constructor(props) {
+    super(props);
+    this.props = props;
+
+    this.state = {
+      i18n: Languages,
+    };
+
+    Languages.addListener(this);
+    this.inputElement = false;
+  }
+
+  componentWillUnmount() {
+    Languages.removeListener(this);
+  }
+
+  render() {
+    return (
+      <div className="inputWithButton">
+        <Input
+          className="medium full_width"
+          refInput={obj => {
+            this.inputElement = obj;
+            this.props.refInput && this.props.refInput();
+          }}
+          {...this.props}
+        />
+        {!this.props.hideBtn && (
+          <div
+            className={'button button-icon ' + (this.props.color ? this.props.color : '')}
+            onClick={() => this.props.btnAction()}
+          >
+            <Icon type={this.props.icon} />
+          </div>
+        )}
+      </div>
+    );
+  }
+}

tdrive/frontend/src/app/components/inputs/input-with-button.scss

@@ -0,0 +1,29 @@
+.inputWithButton {
+  display: flex;
+  position: relative;
+  input.input {
+    padding-right: 50px;
+  }
+  .button-icon {
+    position: absolute;
+    height: 40px;
+    right: 0px;
+    box-sizing: border-box;
+    padding: 10px;
+    border-radius: 0px 4px 4px 0px;
+    border-left: solid 1px var(--grey-light);
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+  .danger {
+    background-color: var(--grey-background);
+    color: var(--grey-dark);
+  }
+
+  .danger:hover {
+    transition: 0.5s;
+    background-color: var(--grey-light);
+    color: var(--red);
+  }
+}

tdrive/frontend/src/app/components/inputs/input-with-color.jsx

@@ -0,0 +1,129 @@
+/* eslint-disable react/prop-types */
+import React, { Component } from 'react';
+
+import MenusManager from 'app/components/menus/menus-manager.jsx';
+import ColorPicker from 'components/color-picker/color-picker.jsx';
+import Input from 'components/inputs/input.jsx';
+import './inputs.scss';
+
+export default class InputWithColor extends Component {
+  constructor() {
+    super();
+  }
+  outsideMenuListener() {
+    this.closeColorPicker();
+  }
+  componentWillUnmount() {
+    document.removeEventListener('click', this.outsideClickListener);
+  }
+  componentDidMount() {
+    if (this.props.focusOnDidMount && this.input) {
+      this.input.focus();
+    }
+    this.outsideClickListener = event => {
+      if (
+        this.colorPickerIsOpen &&
+        this.colorpicker_dom &&
+        !this.colorpicker_dom.contains(event.target) &&
+        document.contains(event.target)
+      ) {
+        this.outsideMenuListener();
+      }
+    };
+    this.outsideClickListener = this.outsideClickListener.bind(this);
+    document.addEventListener('click', this.outsideClickListener);
+  }
+  closeColorPicker() {
+    if (!this.colorPickerIsOpen) {
+      return;
+    }
+
+    if (this.props.menu_level !== undefined) {
+      MenusManager.closeSubMenu(this.props.menu_level);
+    } else {
+      MenusManager.closeMenu();
+    }
+
+    this.colorPickerIsOpen = false;
+  }
+  openColorPicker() {
+    if (this.colorPickerIsOpen) {
+      return;
+    }
+
+    var menu = [
+      {
+        type: 'react-element',
+        reactElement: () => {
+          return (
+            <ColorPicker
+              refDom={node => (this.colorpicker_dom = node)}
+              value={this.props.value[0]}
+              onChange={color => this.selectColor(color)}
+            />
+          );
+        },
+      },
+    ];
+    var elementRect = window.getBoundingClientRect(this.color_dom);
+    elementRect.x = elementRect.x || elementRect.left;
+    elementRect.y = elementRect.y || elementRect.top;
+    if (this.props.menu_level !== undefined) {
+      MenusManager.openSubMenu(menu, elementRect, this.props.menu_level, 'bottom');
+    } else {
+      MenusManager.openMenu(menu, elementRect, 'bottom');
+    }
+
+    setTimeout(() => {
+      this.colorPickerIsOpen = true;
+    }, 200);
+  }
+  selectColor(color) {
+    this.closeColorPicker();
+    var value = [color, this.props.value[1]];
+    this.onChange(value);
+  }
+  onChange(value) {
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
+  }
+  render() {
+    if (!this.props.value[0]) {
+      this.onChange([
+        ColorPicker.colors[parseInt(Math.random() * ColorPicker.colors.length)],
+        this.props.value[1],
+      ]);
+    }
+    return (
+      <div className={'input_with_color ' + this.props.className}>
+        <div
+          className="color"
+          ref={node => (this.color_dom = node)}
+          onClick={() => {
+            this.openColorPicker();
+          }}
+        >
+          <div className="acolor" style={{ backgroundColor: this.props.value[0] }} />
+        </div>
+        <div className="right_input">
+          <Input
+            className="full_width medium"
+            refInput={obj => (this.input = obj)}
+            type="text"
+            placeholder={this.props.placeholder}
+            value={this.props.value[1]}
+            onKeyDown={e => {
+              if (e.keyCode == 13 && this.props.onEnter) {
+                this.props.onEnter();
+              }
+            }}
+            onChange={evt => {
+              if (this.onChange) this.onChange([this.props.value[0], evt.target.value]);
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+}

tdrive/frontend/src/app/components/inputs/input-with-icon.tsx

@@ -0,0 +1,203 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { Input, Col, Row } from 'antd';
+
+import Emojione from 'components/emojione/emojione';
+import MenusManager from 'app/components/menus/menus-manager.jsx';
+import EmojiPicker from 'components/emoji-picker/emoji-picker.jsx';
+
+import './inputs.scss';
+
+type PropsType = { [key: string]: any };
+type StateType = { [key: string]: any };
+
+export default class InputWithIcon extends React.Component<PropsType, StateType> {
+  outsideClickListener: (event: any) => void = () => undefined;
+  input: any;
+  emojiPickerIsOpen: any;
+  emojipicker_dom: any;
+  allChanEmojies = [
+    ':8ball:',
+    ':dart:',
+    ':joystick:',
+    ':video_game:',
+    ':bar_chart:',
+    ':crystal_ball:',
+    ':speech_balloon:',
+    ':bulb:',
+    ':deciduous_tree:',
+    ':palm_tree:',
+    ':earth_americas:',
+    ':open_file_folder:',
+    ':penguin:',
+    ':seedling:',
+    ':sailboat:',
+    ':fire_engine:',
+    ':scroll:',
+    ':newspaper:',
+    ':factory:',
+    ':package:',
+    ':mailbox:',
+    ':moneybag:',
+    ':smiley_cat:',
+    ':sunglasses:',
+  ];
+  emoji_dom: any;
+
+  UNSAFE_componentWillMount() {
+    this.randomizeEmojies();
+  }
+
+  randomizeEmojies() {
+    this.allChanEmojies.sort((a, b) => {
+      if (b === this.props.value[0]) {
+        return -1;
+      }
+      if (a === this.props.value[0]) {
+        return 1;
+      }
+      return Math.floor(Math.random() * 3) - 1;
+    });
+  }
+
+  outsideMenuListener() {
+    this.closeEmojiPicker();
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.outsideClickListener);
+  }
+
+  componentDidMount() {
+    if (this.props.focusOnDidMount && this.input) {
+      this.input.focus();
+    }
+
+    this.outsideClickListener = event => {
+      if (
+        this.emojiPickerIsOpen &&
+        this.emojipicker_dom &&
+        !this.emojipicker_dom.contains(event.target) &&
+        document.contains(event.target)
+      ) {
+        this.outsideMenuListener();
+      }
+    };
+
+    this.outsideClickListener = this.outsideClickListener.bind(this);
+    document.addEventListener('click', this.outsideClickListener);
+  }
+
+  closeEmojiPicker() {
+    if (!this.emojiPickerIsOpen) {
+      return;
+    }
+
+    if (this.props.menu_level !== undefined) {
+      MenusManager.closeSubMenu(this.props.menu_level);
+    } else {
+      MenusManager.closeMenu();
+    }
+
+    this.emojiPickerIsOpen = false;
+  }
+
+  openEmojiPicker() {
+    if (this.emojiPickerIsOpen) {
+      return;
+    }
+
+    let preferedEmojis = [this.props.value[0]];
+    if (this.props.preferedEmoji) {
+      preferedEmojis = this.props.preferedEmoji;
+    } else {
+      this.randomizeEmojies();
+      for (let i = 0; i < 5; i++) {
+        preferedEmojis[i + 1] = this.allChanEmojies[i];
+      }
+    }
+
+    const menu = [
+      {
+        type: 'react-element',
+        className: 'menu-cancel-margin',
+        reactElement: () => {
+          return (
+            <EmojiPicker
+              refDom={(node: any) => (this.emojipicker_dom = node)}
+              onChange={(emoji: any) => this.selectEmoji(emoji)}
+            />
+          );
+        },
+      },
+    ];
+    const elementRect = (window as any).getBoundingClientRect(this.emoji_dom);
+    elementRect.x = elementRect.x || elementRect.left;
+    elementRect.y = elementRect.y || elementRect.top;
+    if (this.props.menu_level !== undefined) {
+      MenusManager.openSubMenu(menu, elementRect, this.props.menu_level, 'bottom');
+    } else {
+      MenusManager.openMenu(menu, elementRect, 'bottom', {});
+    }
+
+    setTimeout(() => {
+      this.emojiPickerIsOpen = true;
+    }, 200);
+  }
+  selectEmoji(emoji: any) {
+    this.closeEmojiPicker();
+    const value = [emoji.native, this.props.value[1]];
+    this.onChange(value);
+  }
+  onChange(value: any) {
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
+  }
+  render() {
+    let icon = this.props.value[0];
+    if (!this.props.value[0]) {
+      this.onChange([this.allChanEmojies[0], this.props.value[1]]);
+      icon = this.allChanEmojies[0];
+    }
+    return (
+      <Input.Group size="small">
+        <Row wrap={false} align="middle" gutter={[8, 0]}>
+          <Col flex="none">
+            <div
+              className="emoji"
+              ref={node => (this.emoji_dom = node)}
+              onClick={() => {
+                this.openEmojiPicker();
+              }}
+            >
+              <Emojione type={icon} size={24} />
+            </div>
+          </Col>
+          <Col flex="auto">
+            {(!this.props.children && (
+              <Input
+                size={'large'}
+                style={{ paddingLeft: 15 }}
+                autoFocus
+                ref={obj => {
+                  this.input = obj;
+                  if (this.props.inputRef) this.props.inputRef(obj);
+                }}
+                type="text"
+                placeholder={this.props.placeholder}
+                value={this.props.value[1]}
+                onPressEnter={this.props.onEnter}
+                onChange={evt => {
+                  if (this.onChange) this.onChange([this.props.value[0], evt.target.value]);
+                }}
+              />
+            )) ||
+              this.props.children}
+          </Col>
+        </Row>
+      </Input.Group>
+    );
+  }
+}

tdrive/frontend/src/app/components/inputs/input-with-select.scss

@@ -0,0 +1,47 @@
+.group-container {
+  .ant-btn-icon-only {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background-color: var(--grey-background);
+    border-radius: var(--border-radius-base) 0px 0px var(--border-radius-base);
+    padding: 0;
+
+    &:hover {
+      background-color: var(--grey-background);
+    }
+  }
+
+  .ant-select {
+    max-width: 120px;
+
+    .ant-select-selector {
+      border-radius: 0 !important;
+    }
+
+    .ant-select-selector,
+    .border-radius-left {
+      border-radius: var(--border-radius-base) 0 0 var(--border-radius-base) !important;
+    }
+  }
+
+  .group-divider {
+    height: 100%;
+    margin: 0;
+    top: 0;
+    background-color: var(--black-alpha-70);
+    opacity: 0.28;
+  }
+
+  .ant-btn .small-margin-left {
+    color: var(--grey-dark);
+    &:hover {
+      color: var(--primary);
+    }
+  }
+
+  .ant-input {
+    border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
+  }
+}

tdrive/frontend/src/app/components/inputs/input-with-select.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from 'react';
+import { Input, Col, Row, Select, Typography, Button, Divider, Tooltip } from 'antd';
+import { ChannelType } from 'app/features/channels/types/channel';
+import { List, X } from 'react-feather';
+import Languages from 'app/features/global/services/languages-service';
+import './input-with-select.scss';
+
+type PropsType = {
+  channel: ChannelType | undefined;
+  onChange: (array: string[]) => void;
+  groups: string[];
+};
+
+const { Group } = Input;
+const { Option } = Select;
+const InputWithSelect = ({ groups, channel, onChange }: PropsType): JSX.Element => {
+  const [group, setGroup] = useState<string>(channel?.channel_group || '');
+  const [channelName, setChannelName] = useState<string>(channel?.name || '');
+  const [searchedGroup, setSearchedGroup] = useState<string>('');
+  const [displaySelector, setDisplaySelector] = useState<boolean>(
+    channel?.channel_group ? true : false,
+  );
+
+  useEffect(() => {
+    onChange([group || '', channelName]);
+  });
+
+  return (
+    <Group className="group-container">
+      <Row style={{ flexWrap: 'nowrap' }}>
+        {!displaySelector && (
+          <Col>
+            <Tooltip
+              placement="top"
+              title={Languages.t('components.inputs.input_with_select.button.tooltip')}
+            >
+              <Button
+                type="default"
+                onClick={() => setDisplaySelector(!displaySelector)}
+                icon={<List size={14} className="small-margin-left" />}
+              />
+            </Tooltip>
+          </Col>
+        )}
+        {displaySelector && (
+          <Col>
+            <Select
+              onBlur={() => ((group || '').length === 0 ? setDisplaySelector(false) : undefined)}
+              notFoundContent={
+                <span className="info" style={{ color: 'var(--grey-dark)' }}>
+                  {Languages.t('components.inputs.input_with_select.select.no_sections')}
+                </span>
+              }
+              dropdownMatchSelectWidth={false}
+              className={displaySelector ? 'border-radius-left' : ''}
+              allowClear
+              clearIcon={<X size={14} color="var(--grey-dark)" />}
+              onClear={() => {
+                setDisplaySelector(false);
+                setGroup('');
+              }}
+              size={'large'}
+              defaultValue={group || undefined}
+              showSearch
+              autoFocus={displaySelector}
+              placeholder={Languages.t('components.inputs.input_with_select.select.placeholder')}
+              onChange={(value: string) => setGroup(value)}
+              onSearch={(value: string) => setSearchedGroup(value)}
+              searchValue={searchedGroup.substr(0, 20)}
+            >
+              {searchedGroup.length > 0 && group !== searchedGroup && (
+                <Option value={searchedGroup}>
+                  {Languages.t('general.create')}{' '}
+                  <Typography.Text strong>{searchedGroup}</Typography.Text>
+                </Option>
+              )}
+              {groups.map((group: string, index: number) => {
+                return (
+                  <Option key={index} value={group}>
+                    {group}
+                  </Option>
+                );
+              })}
+            </Select>
+          </Col>
+        )}
+        <Col>
+          <Divider type="vertical" className="group-divider" />
+        </Col>
+        <Col flex="auto">
+          <Input
+            autoFocus={!displaySelector}
+            size={'large'}
+            maxLength={30}
+            placeholder={Languages.t('components.inputs.input_with_select.input.placeholder')}
+            value={channelName}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setChannelName(e.target.value)}
+          />
+        </Col>
+      </Row>
+    </Group>
+  );
+};
+
+export default InputWithSelect;

tdrive/frontend/src/app/components/inputs/input.jsx

@@ -0,0 +1,85 @@
+/* eslint-disable react/prop-types */
+import React, { Component } from 'react';
+
+import AutoHeight from 'components/auto-height/auto-height.jsx';
+
+import './inputs.scss';
+
+export default class Input extends Component {
+  constructor() {
+    super();
+  }
+  onKeyDown(evt) {
+    if (evt.keyCode == 13 && this.props.onEnter) {
+      this.props.onEnter();
+    }
+    if (evt.keyCode == 27 && this.props.onEchap) {
+      this.props.onEchap();
+    }
+  }
+  componentDidMount() {
+    if (this.props.autoFocus && this.node) {
+      this.node.focus();
+      this.node.setSelectionRange(0, Number.MAX_SAFE_INTEGER);
+    }
+  }
+  render() {
+    var className = this.props.className || '';
+
+    if (this.props.big) {
+      className += ' big ';
+    }
+    if (this.props.medium) {
+      className += ' medium ';
+    }
+    if (this.props.small) {
+      className += ' small ';
+    }
+
+    if (
+      className.indexOf('medium') === className.indexOf('small') &&
+      className.indexOf('big') === className.indexOf('small') &&
+      className.indexOf('big') < 0
+    ) {
+      className += ' medium';
+    }
+
+    if (this.props.autoHeight) {
+      return (
+        <AutoHeight
+          refInput={node => {
+            this.node = node;
+            this.props.refInput && this.props.refInput(node);
+          }}
+          {...this.props}
+          onKeyDown={evt => {
+            if (this.props.onKeyDown) {
+              this.props.onKeyDown(evt);
+            }
+            this.onKeyDown(evt);
+          }}
+          className={'input ' + (className || '')}
+        />
+      );
+    }
+
+    return (
+      <input
+        ref={node => {
+          this.node = node;
+          this.props.refInput && this.props.refInput(node);
+        }}
+        {...this.props}
+        onKeyDown={evt => {
+          if (this.props.onKeyDown) {
+            this.props.onKeyDown(evt);
+          }
+          this.onKeyDown(evt);
+        }}
+        className={'input ' + (className || '')}
+        onBlur={this.props.onBlur}
+        onChange={this.props.onChange}
+      />
+    );
+  }
+}

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

@@ -0,0 +1,502 @@
+/**
+INPUTS
+**/
+
+.input,
+.switch,
+.checkbox {
+  vertical-align: middle;
+  box-sizing: border-box;
+  outline: none;
+  box-sizing: border-box;
+
+  &.big {
+    font-size: 16px;
+    padding-top: 21px;
+    padding-bottom: 21px;
+    line-height: 22px;
+  }
+  &.medium {
+    font-size: 14px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    line-height: 20px;
+  }
+  &.small {
+    font-size: 14px;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    line-height: 20px;
+  }
+}
+
+.input {
+  border-radius: var(--border-radius-base);
+  border: 0px;
+  background: var(--grey-background);
+  color: var(--black);
+
+  &:hover {
+    background: #eee;
+  }
+  &:active,
+  &:focus {
+    outline: none;
+  }
+
+  &.error {
+    background: #ffeeee;
+  }
+
+  &::placeholder,
+  &:-ms-input-placeholder,
+  &::-ms-input-placeholder {
+    color: var(--grey-dark);
+  }
+
+  &.big {
+    height: 64px;
+    padding: 0 16px;
+    font-weight: 500;
+    font-size: 16px;
+  }
+  &.medium {
+    height: 40px;
+    padding: 0 16px;
+    font-weight: 500;
+    font-size: 14px;
+  }
+  &.small {
+    height: 32px;
+    padding: 0 8px;
+    font-size: 14px;
+  }
+}
+
+.switch {
+  height: 20px;
+  width: 34px;
+  background: var(--primary-background);
+  border-radius: 10px;
+  display: inline-block;
+  padding: 3px;
+  box-sizing: border-box;
+  transition: background 0.2s;
+  cursor: pointer;
+
+  &.disabled {
+    pointer-events: none;
+    background: var(--primary-background) !important;
+  }
+
+  .state {
+    background: var(--white);
+    transform: translateX(0%);
+    transition: transform 0.2s;
+  }
+
+  &.on {
+    background: var(--primary);
+    .state {
+      transform: translateX(100%);
+    }
+  }
+
+  &.big {
+    padding: 4px;
+    height: 32px;
+    width: 56px;
+    border-radius: 16px;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    .state {
+      width: 24px;
+      height: 24px;
+      border-radius: 12px;
+    }
+  }
+
+  &.medium {
+    height: 24px;
+    width: 42px;
+    border-radius: 12px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    .state {
+      width: 18px;
+      height: 18px;
+      border-radius: 9px;
+    }
+  }
+
+  &.small {
+    padding: 3px;
+    height: 20px;
+    width: 34px;
+    border-radius: 10px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    .state {
+      width: 14px;
+      height: 14px;
+      border-radius: 7px;
+    }
+  }
+}
+
+.checkbox {
+  border: 1px solid var(--grey-background);
+  border-radius: var(--border-radius-base);
+  display: inline-block;
+  padding: 0px;
+  box-sizing: border-box;
+  transition: background 0.2s;
+  cursor: pointer;
+  margin-top: 1px;
+
+  &.disabled {
+    pointer-events: none;
+    background: var(--primary-background) !important;
+  }
+
+  .state {
+    border-radius: var(--border-radius-base);
+    transform: scale(0);
+    transition: transform 0.2s, opacity 0.2s;
+    .m-icon-small {
+      color: var(--white);
+      font-size: 16px !important;
+    }
+  }
+
+  &.on {
+    background: var(--primary);
+    border-color: var(--primary);
+    .state {
+      transform: scale(1);
+    }
+  }
+
+  &.big {
+    height: 32px;
+    width: 32px;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    padding: 0;
+    .state {
+      width: 22px;
+      height: 22px;
+      .m-icon-small {
+        font-size: 30px !important;
+      }
+    }
+  }
+
+  &.medium {
+    height: 24px;
+    width: 24px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    padding: 0;
+    .state {
+      width: 18px;
+      height: 18px;
+      .m-icon-small {
+        font-size: 22px !important;
+      }
+    }
+  }
+
+  &.small {
+    height: 16px;
+    width: 16px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    padding: 0;
+    .state {
+      width: 14px;
+      height: 14px;
+      .m-icon-small {
+        font-size: 14px !important;
+      }
+    }
+  }
+}
+
+.radio {
+  background: var(--primary-background);
+  border-radius: 50%;
+  display: inline-block;
+  padding: 5px;
+  box-sizing: border-box;
+  transition: background 0.2s;
+  cursor: pointer;
+  margin-top: 1px;
+  display: inline-block;
+  vertical-align: middle;
+
+  &.disabled {
+    pointer-events: none;
+    background: var(--primary-background) !important;
+  }
+
+  .state {
+    border-radius: 50%;
+    transform: scale(0);
+    transition: transform 0.2s, opacity 0.2s;
+    background: #fff;
+  }
+
+  &.on {
+    background: var(--primary);
+    .state {
+      transform: scale(1);
+    }
+  }
+
+  &.big {
+    height: 32px;
+    width: 32px;
+    padding: 8px;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    .state {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &.medium {
+    height: 24px;
+    width: 24px;
+    padding: 6px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    .state {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  &.small {
+    height: 16px;
+    width: 16px;
+    padding: 3px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    .state {
+      width: 10px;
+      height: 10px;
+    }
+  }
+}
+
+select {
+  -webkit-appearance: none;
+}
+select,
+.select {
+  width: 100%;
+  border: solid 1px rgba(0, 0, 0, 0.3);
+  height: 40px;
+  border-radius: var(--border-radius-base);
+  background: white;
+  font-size: 14px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTkuNzEsMTAuMjEsMTIsNy45MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTMtM2ExLDEsMCwwLDAtMS40MiwwbC0zLDNhMSwxLDAsMCwwLDEuNDIsMS40MlptNC41OCw0LjU4TDEyLDE3LjA5bC0yLjI5LTIuM2ExLDEsMCwwLDAtMS40MiwxLjQybDMsM2ExLDEsMCwwLDAsMS40MiwwbDMtM2ExLDEsMCwwLDAtMS40Mi0xLjQyWiIvPjwvc3ZnPg==);
+  background-repeat: no-repeat;
+  background-size: 16px;
+  background-position: right 10px center;
+  padding: 0 10px;
+
+  &.big {
+    height: 64px;
+    font-size: 16px;
+    padding: 0 16px;
+  }
+
+  &.medium {
+    height: 40px;
+    font-size: 14px;
+    padding: 0 16px;
+  }
+
+  &.small {
+    height: 32px;
+    font-size: 14px;
+    padding: 0 8px;
+  }
+}
+.select {
+  line-height: 38px;
+  display: inline-block;
+  padding-right: 40px;
+}
+
+.emoji {
+  width: 40px;
+  height: 40px;
+  display: inline-block;
+  background: var(--grey-background);
+  border-radius: var(--border-radius-base);
+  padding: 8px;
+  font-size: 16px;
+  line-height: 16px;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--primary-background);
+  }
+}
+
+.input_with_color {
+  display: inline-flex;
+
+  .right_input {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    border-radius: var(--border-radius-base);
+  }
+
+  .color {
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    background: var(--grey-background);
+    border-radius: var(--border-radius-base);
+    margin-right: 4px;
+    padding: 14px;
+    box-sizing: border-box;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--primary-background);
+    }
+
+    .acolor {
+      width: 12px;
+      height: 12px;
+      border-radius: 6px;
+      display: inline-block;
+      background-color: #000;
+    }
+  }
+}
+
+.input_icon {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+
+  .autoheight_container {
+    padding-left: 16px !important;
+  }
+
+  .right_input {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    border-radius: var(--border-radius-base);
+  }
+
+  &.input_enter {
+    & > i {
+      position: absolute;
+      right: 0;
+      padding-top: 12px;
+      padding-right: 8px;
+      width: 24px;
+      color: var(--grey-dark);
+      font-size: 16px;
+    }
+
+    &.small {
+      input.input {
+        padding-left: 12px;
+      }
+    }
+
+    input.input {
+      padding-right: 34px;
+      padding-left: 0px;
+    }
+  }
+
+  &:not(.input_enter) {
+    & > i {
+      position: absolute;
+      padding-top: 12px;
+      padding-left: 8px;
+      width: 24px;
+      color: var(--grey-dark);
+    }
+
+    input.input {
+      padding-left: 34px;
+    }
+  }
+
+  &.big {
+    & > i {
+      position: absolute;
+      padding-top: 20px;
+      padding-left: 12px;
+      width: 32px;
+      color: var(--grey-dark);
+      font-size: 20px;
+    }
+
+    input.input {
+      padding-left: 48px;
+    }
+  }
+
+  &.small {
+    & > i {
+      position: absolute;
+      padding-top: 8px;
+      padding-left: 8px;
+      width: 24px;
+      color: var(--grey-dark);
+      font-size: 14px;
+    }
+
+    input.input {
+      padding-left: 32px;
+    }
+  }
+}
+
+.radio_with_label,
+.checkbox_with_label,
+.switch_with_label {
+  display: inline-block;
+  .label {
+    display: inline;
+    vertical-align: middle;
+    font-weight: 500;
+    margin-left: 8px;
+  }
+  &.big {
+    .label {
+      line-height: 64px;
+      margin-left: 8px;
+    }
+  }
+  &.medium {
+    .label {
+      line-height: 40px;
+      margin-left: 8px;
+    }
+  }
+  &.small {
+    .label {
+      line-height: 32px;
+      margin-left: 8px;
+      font-size: 14px;
+    }
+  }
+}

tdrive/frontend/src/app/components/inputs/radio.jsx

@@ -0,0 +1,90 @@
+/* eslint-disable react/prop-types */
+import React, { Component } from 'react';
+
+import './inputs.scss';
+
+export default class Radio extends Component {
+  constructor() {
+    super();
+  }
+  renderSwitch() {
+    var className = this.props.className || '';
+
+    if (this.props.big) {
+      className += ' big ';
+    }
+    if (this.props.medium) {
+      className += ' medium ';
+    }
+    if (this.props.small) {
+      className += ' small ';
+    }
+
+    if (
+      className.indexOf('medium') === className.indexOf('small') &&
+      className.indexOf('big') === className.indexOf('small') &&
+      className.indexOf('big') < 0
+    ) {
+      className += ' medium';
+    }
+
+    return (
+      <div
+        className={
+          'radio ' +
+          (this.props.value ? 'on' : 'off') +
+          ' ' +
+          (this.props.disabled ? 'disabled ' : '') +
+          ' ' +
+          className
+        }
+        onClick={() => {
+          if (!this.props.label && !this.props.disabled) {
+            this.props.onChange(!this.props.value);
+          }
+        }}
+      >
+        <div className="state" />
+      </div>
+    );
+  }
+  render() {
+    var parentClassName = '';
+
+    if (this.props.big) {
+      parentClassName += ' big ';
+    }
+    if (this.props.medium) {
+      parentClassName += ' medium ';
+    }
+    if (this.props.small) {
+      parentClassName += ' small ';
+    }
+
+    if (
+      parentClassName.indexOf('medium') === parentClassName.indexOf('small') &&
+      parentClassName.indexOf('big') === parentClassName.indexOf('small') &&
+      parentClassName.indexOf('big') < 0
+    ) {
+      parentClassName += ' medium';
+    }
+
+    if (this.props.label) {
+      return (
+        <div
+          className={'radio_with_label ' + (this.props.value ? 'on ' : 'off ') + parentClassName}
+          onClick={() => {
+            if (!this.props.disabled) {
+              this.props.onChange(!this.props.value);
+            }
+          }}
+        >
+          {this.renderSwitch()}
+          <div className="label">{this.props.label}</div>
+        </div>
+      );
+    } else {
+      return this.renderSwitch();
+    }
+  }
+}

tdrive/frontend/src/app/components/inputs/rounded.jsx

@@ -0,0 +1,22 @@
+/* eslint-disable react/prop-types */
+import React, { Component } from 'react';
+
+import PlusIcon from '@material-ui/icons/AddOutlined';
+
+export default class Rounded extends Component {
+  constructor() {
+    super();
+  }
+  render() {
+    return (
+      <div
+        style={this.props.style}
+        className={'rounded-btn ' + this.props.className}
+        onClick={this.props.onClick}
+      >
+        {this.props.text ? this.props.text + ' ' : ''}
+        <PlusIcon className="m-icon-small" />
+      </div>
+    );
+  }
+}

tdrive/frontend/src/app/components/inputs/switch.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Switch } from 'antd';
+
+import './inputs.scss';
+
+export default (props: {
+  big?: boolean;
+  medium?: boolean;
+  small?: boolean;
+  loading?: boolean;
+  className?: string;
+  label?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange: (value: boolean) => void;
+}) => {
+  const renderSwitch = () => {
+    let className = props.className || '';
+
+    if (props.big) {
+      className += ' big ';
+    }
+    if (props.medium) {
+      className += ' medium ';
+    }
+    if (props.small) {
+      className += ' small ';
+    }
+
+    if (
+      className.indexOf('medium') === className.indexOf('small') &&
+      className.indexOf('big') === className.indexOf('small') &&
+      className.indexOf('big') < 0
+    ) {
+      className += ' medium';
+    }
+    return (
+      <Switch
+        checked={props.checked}
+        onChange={(value: boolean) => {
+          props.onChange(value);
+        }}
+        className={className}
+        loading={props.loading}
+        disabled={props.disabled}
+      />
+    );
+  };
+
+  let parentClassName = '';
+
+  if (props.big) {
+    parentClassName += ' big ';
+  }
+  if (props.medium) {
+    parentClassName += ' medium ';
+  }
+  if (props.small) {
+    parentClassName += ' small ';
+  }
+
+  if (
+    parentClassName.indexOf('medium') === parentClassName.indexOf('small') &&
+    parentClassName.indexOf('big') === parentClassName.indexOf('small') &&
+    parentClassName.indexOf('big') < 0
+  ) {
+    parentClassName += ' medium';
+  }
+
+  if (props.label) {
+    return (
+      <div
+        className={
+          'switch_with_label ' + (props.disabled ? 'disabled' : '') + ' ' + parentClassName
+        }
+      >
+        {renderSwitch()}
+        <div className="label">{props.label}</div>
+      </div>
+    );
+  } else {
+    return renderSwitch();
+  }
+};