Revize fa93df26
Přidáno uživatelem Dominik Poch před asi 2 roky(ů)
| webapp/components/annotation/TagItem.tsx | ||
|---|---|---|
| 1 | 1 |
import { Container, Row, Stack } from 'react-bootstrap';
|
| 2 | 2 |
import { TagInfo } from '../../api';
|
| 3 | 3 |
import { Button, Tooltip } from 'antd';
|
| 4 |
import {
|
|
| 5 |
DownOutlined, |
|
| 6 |
QuestionCircleOutlined, |
|
| 7 |
TagOutlined, |
|
| 8 |
UpOutlined, |
|
| 9 |
} from '@ant-design/icons'; |
|
| 4 |
import { DownOutlined, QuestionCircleOutlined, TagOutlined } from '@ant-design/icons';
|
|
| 10 | 5 |
import React, { useContext, useState } from 'react';
|
| 11 | 6 |
import { SubTagItem } from './SubTagItem';
|
| 12 | 7 |
import { TagCategoryContext } from '../../contexts/TagCategoryContext';
|
| 13 | 8 |
import { AnnotationContext } from '../../contexts/AnnotationContext';
|
| 14 | 9 |
|
| 10 |
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
| 11 |
import { faAngleDown, faAngleUp, faTag } from '@fortawesome/free-solid-svg-icons';
|
|
| 12 |
import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
|
|
| 13 |
import styles from '/styles/Icon.module.scss'; |
|
| 14 |
|
|
| 15 | 15 |
/** |
| 16 | 16 |
* Creates a single tag item in a tag panel. |
| 17 | 17 |
* @param props Properties should contain the tag. |
| ... | ... | |
| 42 | 42 |
* Changes visibility of sub tags. |
| 43 | 43 |
*/ |
| 44 | 44 |
const changeSubTagsVisibility = () => {
|
| 45 |
setButtonIcon(visibleSubTags ? <DownOutlined /> : <UpOutlined />); |
|
| 45 |
setButtonIcon( |
|
| 46 |
visibleSubTags ? ( |
|
| 47 |
<FontAwesomeIcon icon={faAngleDown} className={styles.iconLeft} />
|
|
| 48 |
) : ( |
|
| 49 |
<FontAwesomeIcon icon={faAngleUp} className={styles.iconLeft} />
|
|
| 50 |
) |
|
| 51 |
); |
|
| 46 | 52 |
setVisibleSubTags(!visibleSubTags); |
| 47 | 53 |
}; |
| 48 | 54 |
|
| ... | ... | |
| 63 | 69 |
<Row> |
| 64 | 70 |
{hasSubTags && (
|
| 65 | 71 |
<Button |
| 66 |
icon={buttonIcon}
|
|
| 67 | 72 |
onClick={changeSubTagsVisibility}
|
| 68 | 73 |
className="w-100 text-start rounded" |
| 69 | 74 |
disabled={submitting}
|
| 70 | 75 |
> |
| 71 |
<TagOutlined style={{ color: props.tag.color ?? 'black' }} />
|
|
| 72 |
{props.tag.name}
|
|
| 73 |
{props.tag.description && props.tag.description !== '' && (
|
|
| 74 |
<Tooltip |
|
| 75 |
title={props.tag.description}
|
|
| 76 |
key={props.tag.description}
|
|
| 77 |
> |
|
| 78 |
<QuestionCircleOutlined /> |
|
| 79 |
</Tooltip> |
|
| 80 |
)} |
|
| 76 |
<div className=" align-middle"> |
|
| 77 |
{buttonIcon}
|
|
| 78 |
<FontAwesomeIcon |
|
| 79 |
icon={faTag}
|
|
| 80 |
style={{ color: props.tag.color ?? 'black' }}
|
|
| 81 |
className={styles.iconMiddle}
|
|
| 82 |
/> |
|
| 83 |
{props.tag.name}
|
|
| 84 |
{props.tag.description && props.tag.description !== '' && (
|
|
| 85 |
<Tooltip |
|
| 86 |
title={props.tag.description}
|
|
| 87 |
key={props.tag.description}
|
|
| 88 |
> |
|
| 89 |
<FontAwesomeIcon |
|
| 90 |
icon={faCircleQuestion}
|
|
| 91 |
className={styles.iconRight}
|
|
| 92 |
/> |
|
| 93 |
</Tooltip> |
|
| 94 |
)} |
|
| 95 |
</div> |
|
| 81 | 96 |
</Button> |
| 82 | 97 |
)} |
| 83 | 98 |
{!hasSubTags && (
|
| ... | ... | |
| 86 | 101 |
className="w-100 text-start rounded" |
| 87 | 102 |
disabled={submitting}
|
| 88 | 103 |
> |
| 89 |
<TagOutlined style={{ color: props.tag.color ?? 'black' }} />
|
|
| 90 |
{props.tag.name}
|
|
| 91 |
{props.tag.description && props.tag.description !== '' && (
|
|
| 92 |
<Tooltip |
|
| 93 |
title={props.tag.description}
|
|
| 94 |
key={props.tag.description}
|
|
| 95 |
> |
|
| 96 |
<QuestionCircleOutlined /> |
|
| 97 |
</Tooltip> |
|
| 98 |
)} |
|
| 104 |
<div className=" align-middle"> |
|
| 105 |
<FontAwesomeIcon |
|
| 106 |
icon={faTag}
|
|
| 107 |
style={{ color: props.tag.color ?? 'black' }}
|
|
| 108 |
className={styles.iconLeft}
|
|
| 109 |
/> |
|
| 110 |
{props.tag.name}
|
|
| 111 |
{props.tag.description && props.tag.description !== '' && (
|
|
| 112 |
<Tooltip |
|
| 113 |
title={props.tag.description}
|
|
| 114 |
key={props.tag.description}
|
|
| 115 |
> |
|
| 116 |
<FontAwesomeIcon |
|
| 117 |
icon={faCircleQuestion}
|
|
| 118 |
className={styles.iconRight}
|
|
| 119 |
/> |
|
| 120 |
</Tooltip> |
|
| 121 |
)} |
|
| 122 |
</div> |
|
| 99 | 123 |
</Button> |
| 100 | 124 |
)} |
| 101 | 125 |
</Row> |
Také k dispozici: Unified diff
Icons