Added SVG icons for relation editor
This commit is contained in:
Rainer Simon
parent
ebd47b6476
commit
9d85428e91
38
src/Icons.js
38
src/Icons.js
|
|
@ -1,11 +1,11 @@
|
|||
import React from 'react';
|
||||
|
||||
/**
|
||||
* Icons from IcoFont https://icofont.com/, licensed under the CC BY 4.0 license.
|
||||
* Icon from IcoFont https://icofont.com/, licensed under the CC BY 4.0 license.
|
||||
*/
|
||||
export const ChevronDown = props => {
|
||||
export const ChevronDownIcon = props => {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 940 940" width={props.width}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 940" width={props.width}>
|
||||
<metadata>IcoFont Icons</metadata>
|
||||
<title>simple-down</title>
|
||||
<glyph glyphName="simple-down" unicode="" horizAdvX="1000" />
|
||||
|
|
@ -14,7 +14,10 @@ export const ChevronDown = props => {
|
|||
)
|
||||
}
|
||||
|
||||
export const Close = props => {
|
||||
/**
|
||||
* Icon from IcoFont https://icofont.com/, licensed under the CC BY 4.0 license.
|
||||
*/
|
||||
export const CloseIcon = props => {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="180 150 700 800" width={props.width}>
|
||||
<metadata>IcoFont Icons</metadata>
|
||||
|
|
@ -23,4 +26,31 @@ export const Close = props => {
|
|||
<path fill="currentColor" d="M709.8 206.6c-64.39999999999998 65.50000000000003-128.89999999999998 131.20000000000002-194.19999999999993 197.6-8.600000000000023 8.699999999999989-22.400000000000034 8.800000000000011-31 0-65-66-129.70000000000005-131.8-194.5-197.6-8.600000000000023-8.699999999999989-22.400000000000034-8.599999999999994-30.900000000000034 0.09999999999999432-15.699999999999989 16.200000000000017-31.099999999999994 32.30000000000001-47.099999999999994 48.80000000000001-8.5 8.800000000000011-8.299999999999983 23 0.20000000000001705 31.69999999999999 63.099999999999966 64.19999999999999 127.89999999999998 130.10000000000002 193.59999999999997 197 8.600000000000023 8.699999999999989 8.5 22.80000000000001 0 31.599999999999966-65.19999999999999 66.40000000000009-130.2 132.5-194.7 198.10000000000002-8.5 8.700000000000045-8.5 22.800000000000068 0.20000000000001705 31.399999999999977l47.79999999999998 47.90000000000009c8.600000000000023 8.599999999999909 22.600000000000023 8.599999999999909 31.100000000000023-0.10000000000002274l194.2-197.30000000000007c8.600000000000023-8.699999999999932 22.399999999999977-8.699999999999932 31 0 64.70000000000005 65.80000000000007 129.20000000000005 131.4000000000001 194.20000000000005 197.5 8.599999999999909 8.700000000000045 22.5 8.800000000000068 31 0.10000000000002274 16-16.199999999999932 31.699999999999932-32.19999999999993 47.59999999999991-48.299999999999955 8.600000000000023-8.700000000000045 8.600000000000023-22.899999999999977 0.10000000000002274-31.600000000000023-63.799999999999955-65-128.5-130.89999999999998-194.19999999999993-197.79999999999995-8.600000000000023-8.700000000000045-8.600000000000023-22.900000000000034 0-31.600000000000023 65.19999999999993-66.40000000000003 130.0999999999999-132.5 194.5-198.20000000000005 8.599999999999909-8.699999999999989 8.5-22.799999999999955-0.10000000000002274-31.49999999999997l-47.80000000000007-48.099999999999994c-8.5-8.5-22.399999999999977-8.400000000000006-31 0.29999999999998295z"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Icon from IcoFont https://icofont.com/, licensed under the CC BY 4.0 license.
|
||||
*/
|
||||
export const CheckIcon = props => {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 980 980" width={props.width}>
|
||||
<metadata>IcoFont Icons</metadata>
|
||||
<title>verification-check</title>
|
||||
<glyph glyph-name="verification-check" unicode="" horiz-adv-x="1000" />
|
||||
<path fill="currentColor" d="M792.9 162.8c-133.19999999999993 126.69999999999999-264.9 251.89999999999998-397.29999999999995 377.8-8.800000000000011 8.299999999999955-22.600000000000023 8-31-0.8000000000000682l-139.50000000000003-146.89999999999998c-8.299999999999983-8.799999999999955-22.5-9.399999999999977-31.599999999999994-1.5-41.19999999999999 36-82 71.70000000000005-123.7 108.20000000000005-9.099999999999994 8-9.899999999999999 21.699999999999932-1.7999999999999972 30.600000000000023 92.9 102.19999999999993 185 203.5 277.7 305.4 8.100000000000023 8.899999999999977 21.900000000000034 9.5 30.80000000000001 1.2999999999999545 185.29999999999995-172.39999999999998 369.29999999999995-343.7 553.8-515.3 8.900000000000091-8.200000000000045 9.600000000000023-22.30000000000001 1.7000000000000455-31.5-36.700000000000045-42.400000000000034-72.70000000000005-84.00000000000003-108.89999999999998-125.80000000000001-7.899999999999977-9.100000000000023-21.399999999999977-9.800000000000011-30.200000000000045-1.5z"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Icon from FontAwesome https://fontawesome.com/icons/trash-alt,
|
||||
* licensed under the CC BY 4.0 license https://fontawesome.com/license
|
||||
*/
|
||||
export const TrashIcon = props => {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width={props.width}>
|
||||
<path fill="currentColor" d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"></path>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useState } from 'react';
|
||||
import DropdownMenu from './DropdownMenu';
|
||||
import TextEntryField from './TextEntryField';
|
||||
import { ChevronDown } from '../../../Icons';
|
||||
import { ChevronDownIcon } from '../../../Icons';
|
||||
|
||||
/** A single comment inside the CommentWidget **/
|
||||
const Comment = props => {
|
||||
|
|
@ -39,7 +39,7 @@ const Comment = props => {
|
|||
<div
|
||||
className={isMenuVisible ? "icon arrow-down menu-open" : "icon arrow-down"}
|
||||
onClick={() => setIsMenuVisible(!isMenuVisible)}>
|
||||
<ChevronDown width={12} />
|
||||
<ChevronDownIcon width={12} />
|
||||
</div>
|
||||
|
||||
{ isMenuVisible &&
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import { Close } from '../../../Icons';
|
||||
import { CloseIcon } from '../../../Icons';
|
||||
|
||||
/** The basic freetext tag control from original Recogito **/
|
||||
const TagWidget = props => {
|
||||
|
|
@ -41,7 +41,7 @@ const TagWidget = props => {
|
|||
<CSSTransition in={showDelete === tag.value} timeout={200} classNames="delete">
|
||||
<span className="delete-wrapper" onClick={onDelete(tag)}>
|
||||
<span className="delete">
|
||||
<Close width={14} />
|
||||
<CloseIcon width={12} />
|
||||
</span>
|
||||
</span>
|
||||
</CSSTransition>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { Component } from 'react';
|
||||
import ContentEditable from 'react-contenteditable';
|
||||
import { TrashIcon, CheckIcon } from '../../Icons';
|
||||
|
||||
/**
|
||||
* Shorthand to get the label (= first tag body value) from the
|
||||
|
|
@ -112,11 +113,15 @@ export default class RelationEditor extends Component {
|
|||
<div className="buttons">
|
||||
<span
|
||||
className="icon delete"
|
||||
onClick={this.onDelete}>{'\uf014'}</span>
|
||||
onClick={this.onDelete}>
|
||||
<TrashIcon width={14} />
|
||||
</span>
|
||||
|
||||
<span
|
||||
className="icon ok"
|
||||
onClick={this.onSubmit}>{'\uf00c'}</span>
|
||||
onClick={this.onSubmit}>
|
||||
<CheckIcon width={14} />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -8,6 +8,11 @@
|
|||
transform:translate(-50%, -50%);
|
||||
background-color:#fff;
|
||||
|
||||
svg {
|
||||
vertical-align:middle;
|
||||
shape-rendering: geometricPrecision;
|
||||
}
|
||||
|
||||
* {
|
||||
line-height:31px;
|
||||
box-sizing:border-box;
|
||||
|
|
@ -49,7 +54,7 @@
|
|||
|
||||
.delete {
|
||||
background-color:#fff;
|
||||
color:$standard-type;
|
||||
color:$lightblue-type;
|
||||
border-left:1px solid $lightgrey-border;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue