Revize fa93df26
Přidáno uživatelem Dominik Poch před asi 2 roky(ů)
| webapp/components/annotation/AnnotationItem.tsx | ||
|---|---|---|
| 11 | 11 |
import { getNameTruncated } from '../../utils/strings';
|
| 12 | 12 |
import { ShowConfirm } from '../../utils/alerts';
|
| 13 | 13 |
|
| 14 |
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
| 15 |
import { faAngleDown, faAngleUp, faTag } from '@fortawesome/free-solid-svg-icons';
|
|
| 16 |
import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
|
|
| 17 |
import styles from '/styles/Icon.module.scss'; |
|
| 18 |
|
|
| 14 | 19 |
const { Option } = Select;
|
| 15 | 20 |
|
| 16 | 21 |
/** |
| ... | ... | |
| 79 | 84 |
<Row className=""> |
| 80 | 85 |
<Col sm="auto" className="d-flex align-items-center"> |
| 81 | 86 |
<Button |
| 82 |
icon={<TagOutlined style={{ marginLeft: 0 }} />}
|
|
| 87 |
icon={
|
|
| 88 |
<FontAwesomeIcon icon={faTag} className={styles.iconLeft} />
|
|
| 89 |
} |
|
| 83 | 90 |
onClick={() => {
|
| 84 | 91 |
setSelectedInstanceId(props.tag.instanceId); |
| 85 | 92 |
setSelectedOccurrenceId(null); |
| webapp/components/annotation/CategoryItem.tsx | ||
|---|---|---|
| 1 | 1 |
import { Col, Container, Row, Stack } from 'react-bootstrap';
|
| 2 | 2 |
import { Button, Tooltip } from 'antd';
|
| 3 |
import {
|
|
| 4 |
DownOutlined, |
|
| 5 |
QuestionCircleOutlined, |
|
| 6 |
TagOutlined, |
|
| 7 |
UpOutlined, |
|
| 8 |
} from '@ant-design/icons'; |
|
| 3 |
import { QuestionCircleOutlined } from '@ant-design/icons';
|
|
| 9 | 4 |
import { TagCategoryInfo } from '../../api';
|
| 10 | 5 |
import React, { useState } from 'react';
|
| 11 | 6 |
import { TagItem } from './TagItem';
|
| 12 | 7 |
|
| 8 |
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
| 9 |
import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons';
|
|
| 10 |
import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
|
|
| 11 |
import styles from '/styles/Icon.module.scss'; |
|
| 13 | 12 |
/** |
| 14 | 13 |
* Creates a single item for a category in a tag panel. |
| 15 | 14 |
* @param props Properties should contain a category. |
| ... | ... | |
| 24 | 23 |
/** |
| 25 | 24 |
* Button icon. |
| 26 | 25 |
*/ |
| 27 |
const [buttonIcon, setButtonIcon] = useState<React.ReactNode>(<DownOutlined />); |
|
| 26 |
const [buttonIcon, setButtonIcon] = useState<React.ReactNode>( |
|
| 27 |
<FontAwesomeIcon icon={faAngleDown} className={styles.iconLeft} />
|
|
| 28 |
); |
|
| 28 | 29 |
|
| 29 | 30 |
/** |
| 30 | 31 |
* Changes visibility of tags. |
| 31 | 32 |
*/ |
| 32 | 33 |
const changeTagsVisibility = () => {
|
| 33 |
setButtonIcon(visibleTags ? <DownOutlined /> : <UpOutlined />); |
|
| 34 |
setButtonIcon( |
|
| 35 |
visibleTags ? ( |
|
| 36 |
<FontAwesomeIcon icon={faAngleDown} className={styles.iconLeft} />
|
|
| 37 |
) : ( |
|
| 38 |
<FontAwesomeIcon icon={faAngleUp} className={styles.iconLeft} />
|
|
| 39 |
) |
|
| 40 |
); |
|
| 34 | 41 |
setVisibleTags(!visibleTags); |
| 35 | 42 |
}; |
| 36 | 43 |
|
| ... | ... | |
| 49 | 56 |
title={props.category.description}
|
| 50 | 57 |
key={props.category.description}
|
| 51 | 58 |
> |
| 52 |
<QuestionCircleOutlined />
|
|
| 59 |
<FontAwesomeIcon icon={faCircleQuestion} />
|
|
| 53 | 60 |
</Tooltip> |
| 54 | 61 |
)} |
| 55 | 62 |
</Button> |
| webapp/components/annotation/SubTagItem.tsx | ||
|---|---|---|
| 4 | 4 |
import React, { useContext } from 'react';
|
| 5 | 5 |
import { TagCategoryContext } from '../../contexts/TagCategoryContext';
|
| 6 | 6 |
import { AnnotationContext } from '../../contexts/AnnotationContext';
|
| 7 |
import { QuestionCircleOutlined } from '@ant-design/icons';
|
|
| 8 | 7 |
|
| 8 |
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
| 9 |
import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
|
|
| 10 |
import styles from '/styles/Icon.module.scss'; |
|
| 9 | 11 |
/** |
| 10 | 12 |
* Creates a single tag item in a tag panel. |
| 11 | 13 |
* @param props Properties should contain the tag. |
| ... | ... | |
| 37 | 39 |
className="w-100 text-start rounded" |
| 38 | 40 |
disabled={submitting}
|
| 39 | 41 |
> |
| 40 |
{props.subTag.name}
|
|
| 41 |
{props.subTag.description && props.subTag.description !== '' && (
|
|
| 42 |
<Tooltip |
|
| 43 |
title={props.subTag.description}
|
|
| 44 |
key={props.subTag.description}
|
|
| 45 |
> |
|
| 46 |
<QuestionCircleOutlined /> |
|
| 47 |
</Tooltip> |
|
| 48 |
)} |
|
| 42 |
<div className=" align-middle"> |
|
| 43 |
{props.subTag.name}
|
|
| 44 |
{props.subTag.description && props.subTag.description !== '' && (
|
|
| 45 |
<Tooltip |
|
| 46 |
title={props.subTag.description}
|
|
| 47 |
key={props.subTag.description}
|
|
| 48 |
> |
|
| 49 |
<FontAwesomeIcon |
|
| 50 |
icon={faCircleQuestion}
|
|
| 51 |
className={styles.iconRight}
|
|
| 52 |
/> |
|
| 53 |
</Tooltip> |
|
| 54 |
)} |
|
| 55 |
</div> |
|
| 49 | 56 |
</Button> |
| 50 | 57 |
</Row> |
| 51 | 58 |
</Container> |
| 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> |
| webapp/components/modals/UserDocumentsModal.tsx | ||
|---|---|---|
| 5 | 5 |
import { userController } from '../../controllers';
|
| 6 | 6 |
import { useUnauthRedirect } from '../../hooks';
|
| 7 | 7 |
import { LoggedUserContext } from '../../contexts/LoggedUserContext';
|
| 8 |
import {
|
|
| 9 |
CheckCircleOutlined,
|
|
| 10 |
ClockCircleOutlined, |
|
| 11 |
SyncOutlined,
|
|
| 12 |
} from '@ant-design/icons';
|
|
| 8 |
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
| 9 |
import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
|
|
| 10 |
|
|
| 11 |
import { faCircleCheck, faClock } from '@fortawesome/free-regular-svg-icons';
|
|
| 12 |
import styles from '/styles/Icon.module.scss';
|
|
| 13 | 13 |
|
| 14 | 14 |
interface ModalProps {
|
| 15 | 15 |
onCancel: () => void; |
| ... | ... | |
| 32 | 32 |
const getStateTag = (state: EState) => {
|
| 33 | 33 |
let color = 'green'; |
| 34 | 34 |
let label = 'Hotovo'; |
| 35 |
let icon = <CheckCircleOutlined />;
|
|
| 35 |
let icon = <FontAwesomeIcon icon={faCircleCheck} className={styles.iconLeft} />;
|
|
| 36 | 36 |
if (state === EState.New) {
|
| 37 | 37 |
color = 'volcano'; |
| 38 | 38 |
label = 'Nový'; |
| 39 |
icon = <ClockCircleOutlined />;
|
|
| 39 |
icon = <FontAwesomeIcon icon={faClock} className={styles.iconLeft} />;
|
|
| 40 | 40 |
} |
| 41 | 41 |
if (state === EState.InProgress) {
|
| 42 | 42 |
color = 'orange'; |
| 43 | 43 |
label = 'Rozpracováno'; |
| 44 |
icon = <SyncOutlined />;
|
|
| 44 |
icon = <FontAwesomeIcon icon={faArrowsRotate} className={styles.iconLeft} />;
|
|
| 45 | 45 |
} |
| 46 | 46 |
return ( |
| 47 | 47 |
<Tag icon={icon} color={color} key={label}>
|
| webapp/package.json | ||
|---|---|---|
| 14 | 14 |
"@beam-australia/react-env": "^3.1.1", |
| 15 | 15 |
"@fortawesome/fontawesome-svg-core": "^6.1.1", |
| 16 | 16 |
"@fortawesome/free-solid-svg-icons": "^6.1.1", |
| 17 |
"@fortawesome/free-regular-svg-icons": "^6.1.1", |
|
| 17 | 18 |
"@fortawesome/react-fontawesome": "^0.1.18", |
| 18 | 19 |
"antd": "^4.19.5", |
| 19 | 20 |
"axios": "^0.26.1", |
| webapp/pages/documents/admin/index.tsx | ||
|---|---|---|
| 30 | 30 |
import DocPreviewModal from '../../../components/modals/DocPreviewModal'; |
| 31 | 31 |
import { UserFilter } from '../../../components/types/UserFilter';
|
| 32 | 32 |
import { getColumnSearchProps, getLocaleProps } from '../../../utils/tableUtils';
|
| 33 |
import {
|
|
| 34 |
CheckCircleOutlined, |
|
| 35 |
ClockCircleOutlined, |
|
| 36 |
SyncOutlined, |
|
| 37 |
UserOutlined, |
|
| 38 |
} from '@ant-design/icons'; |
|
| 39 | 33 |
import { SweetAlertIcon } from 'sweetalert2';
|
| 40 | 34 |
import { Stack } from 'react-bootstrap';
|
| 41 | 35 |
|
| 36 |
import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
|
|
| 37 |
|
|
| 38 |
import { faCircleCheck, faClock } from '@fortawesome/free-regular-svg-icons';
|
|
| 39 |
import styles from '/styles/Icon.module.scss'; |
|
| 40 |
|
|
| 42 | 41 |
function AdminDocumentPage() {
|
| 43 | 42 |
const redirecting = useUnauthRedirect('/login');
|
| 44 | 43 |
const { logout, role } = useContext(LoggedUserContext);
|
| ... | ... | |
| 164 | 163 |
const getFinalizationStateIcon = (state: EState) => {
|
| 165 | 164 |
const color = getAnnotationStateColor(state); |
| 166 | 165 |
const label = getAnnotationStateString(state); |
| 167 |
let icon = <CheckCircleOutlined />;
|
|
| 166 |
let icon = <FontAwesomeIcon icon={faCircleCheck} className={styles.iconLeft} />;
|
|
| 168 | 167 |
if (state === 'NEW') {
|
| 169 |
icon = <ClockCircleOutlined />;
|
|
| 168 |
icon = <FontAwesomeIcon icon={faClock} className={styles.iconLeft} />;
|
|
| 170 | 169 |
} |
| 171 | 170 |
if (state === 'IN_PROGRESS') {
|
| 172 |
icon = <SyncOutlined />;
|
|
| 171 |
icon = <FontAwesomeIcon icon={faArrowsRotate} className={styles.iconLeft} />;
|
|
| 173 | 172 |
} |
| 174 | 173 |
|
| 175 | 174 |
return ( |
| webapp/pages/documents/annotator/index.tsx | ||
|---|---|---|
| 14 | 14 |
getAnnotationStateString, |
| 15 | 15 |
getAnnotationStateColor, |
| 16 | 16 |
} from '../../../utils/strings'; |
| 17 |
import {
|
|
| 18 |
CheckCircleOutlined, |
|
| 19 |
ClockCircleOutlined, |
|
| 20 |
SyncOutlined, |
|
| 21 |
} from '@ant-design/icons'; |
|
| 22 | 17 |
import { getColumnSearchProps, getLocaleProps } from '../../../utils/tableUtils';
|
| 18 |
import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
|
|
| 19 |
|
|
| 20 |
import { faCircleCheck, faClock } from '@fortawesome/free-regular-svg-icons';
|
|
| 21 |
import styles from '/styles/Icon.module.scss'; |
|
| 23 | 22 |
|
| 24 | 23 |
function UserDocumentPage() {
|
| 25 | 24 |
const redirecting = useUnauthRedirect('/login');
|
| ... | ... | |
| 59 | 58 |
render: (state: EState) => {
|
| 60 | 59 |
const color = getAnnotationStateColor(state); |
| 61 | 60 |
const label = getAnnotationStateString(state); |
| 62 |
let icon = <CheckCircleOutlined />; |
|
| 61 |
let icon = ( |
|
| 62 |
<FontAwesomeIcon icon={faCircleCheck} className={styles.iconLeft} />
|
|
| 63 |
); |
|
| 63 | 64 |
if (state === 'NEW') {
|
| 64 |
icon = <ClockCircleOutlined />;
|
|
| 65 |
icon = <FontAwesomeIcon icon={faClock} className={styles.iconLeft} />;
|
|
| 65 | 66 |
} |
| 66 | 67 |
if (state === 'IN_PROGRESS') {
|
| 67 |
icon = <SyncOutlined />; |
|
| 68 |
icon = ( |
|
| 69 |
<FontAwesomeIcon |
|
| 70 |
icon={faArrowsRotate}
|
|
| 71 |
className={styles.iconLeft}
|
|
| 72 |
/> |
|
| 73 |
); |
|
| 68 | 74 |
} |
| 69 | 75 |
|
| 70 | 76 |
return ( |
| webapp/pages/tags/index.tsx | ||
|---|---|---|
| 17 | 17 |
import { Table } from 'antd';
|
| 18 | 18 |
import { tagController } from '../../controllers';
|
| 19 | 19 |
import Search from 'antd/lib/input/Search'; |
| 20 |
import { DeleteOutlined, PlusOutlined, EditOutlined } from '@ant-design/icons';
|
|
| 21 | 20 |
import CategoryModal, {
|
| 22 | 21 |
CategoryModalValues, |
| 23 | 22 |
} from '../../components/modals/CategoryModal'; |
| ... | ... | |
| 113 | 112 |
{record.depth < 2 && (
|
| 114 | 113 |
<Tooltip title="Přidat potomka"> |
| 115 | 114 |
<Button type="primary" onClick={addChild(record)}>
|
| 116 |
<PlusOutlined />
|
|
| 115 |
<FontAwesomeIcon icon={faPlus} />
|
|
| 117 | 116 |
</Button> |
| 118 | 117 |
</Tooltip> |
| 119 | 118 |
)} |
| 120 | 119 |
<Tooltip title="Upravit"> |
| 121 | 120 |
<Button type="text" onClick={editRecord(record)}>
|
| 122 |
<EditOutlined />
|
|
| 121 |
<FontAwesomeIcon icon={faPenToSquare} />
|
|
| 123 | 122 |
</Button> |
| 124 | 123 |
</Tooltip> |
| 125 | 124 |
<Popconfirm |
| ... | ... | |
| 128 | 127 |
> |
| 129 | 128 |
<Tooltip title="Odstranit"> |
| 130 | 129 |
<Button type="primary" danger> |
| 131 |
<DeleteOutlined />
|
|
| 130 |
<FontAwesomeIcon icon={faTrashCan} />
|
|
| 132 | 131 |
</Button> |
| 133 | 132 |
</Tooltip> |
| 134 | 133 |
</Popconfirm> |
| webapp/styles/Icon.module.scss | ||
|---|---|---|
| 1 |
.iconRight {
|
|
| 2 |
padding-left: 5px; |
|
| 3 |
} |
|
| 4 |
|
|
| 5 |
.iconLeft {
|
|
| 6 |
padding-right: 5px; |
|
| 7 |
} |
|
| 8 |
|
|
| 9 |
.iconMiddle {
|
|
| 10 |
padding-left: 5px; |
|
| 11 |
padding-right: 5px; |
|
| 12 |
} |
|
Také k dispozici: Unified diff
Icons