ted/recogito-client-core
ted
/
recogito-client-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

IE11-specific style tweaks

This commit is contained in:
Rainer Simon 2020-09-06 08:52:44 +02:00
parent 095da4cc7a
commit fd4fb6cdb1
2 changed files with 40 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/editor/widgets/tag/TagWidget.jsx
View File

@ -11,17 +11,17 @@ const TagWidget = props => {
const [ showDelete, setShowDelete ] = useState(false); const [ showDelete, setShowDelete ] = useState(false);
// Every body with a 'tagging' purpose is considered a tag // Every body with a 'tagging' purpose is considered a tag
const tagBodies = props.annotation ? const tagBodies = props.annotation ?
props.annotation.bodies.filter(b => b.purpose === 'tagging') : []; props.annotation.bodies.filter(b => b.purpose === 'tagging') : [];
const toggle = tag => _ => { const toggle = tag => _ => {
if (showDelete === tag) // Removes delete button if (showDelete === tag) // Removes delete button
setShowDelete(false); setShowDelete(false);
else else
setShowDelete(tag); // Sets delete button on a different tag setShowDelete(tag); // Sets delete button on a different tag
} }
const onDelete = tag => evt => { const onDelete = tag => evt => {
evt.stopPropagation(); evt.stopPropagation();
props.onRemoveBody(tag); props.onRemoveBody(tag);
} }
@ -32,28 +32,30 @@ const TagWidget = props => {
return ( return (
<div className="r6o-widget tag"> <div className="r6o-widget tag">
{ tagBodies.length > 0 && <div>
<ul className="r6o-taglist"> { tagBodies.length > 0 &&
{ tagBodies.map(tag => <ul className="r6o-taglist">
<li key={tag.value} onClick={toggle(tag.value)}> { tagBodies.map(tag =>
<span className="label">{tag.value}</span> <li key={tag.value} onClick={toggle(tag.value)}>
<span className="label">{tag.value}</span>
{!props.readOnly && {!props.readOnly &&
<CSSTransition in={showDelete === tag.value} timeout={200} classNames="delete"> <CSSTransition in={showDelete === tag.value} timeout={200} classNames="delete">
<span className="delete-wrapper" onClick={onDelete(tag)}> <span className="delete-wrapper" onClick={onDelete(tag)}>
<span className="delete"> <span className="delete">
<CloseIcon width={12} /> <CloseIcon width={12} />
</span>
</span> </span>
</span> </CSSTransition>
</CSSTransition> }
} </li>
</li> )}
)} </ul>
</ul> }
} </div>
{ !props.readOnly && { !props.readOnly &&
<Autocomplete <Autocomplete
placeholder={i18n.t('Add tag...')} placeholder={i18n.t('Add tag...')}
onSubmit={onSubmit} onSubmit={onSubmit}
vocabulary={props.vocabulary || []} /> vocabulary={props.vocabulary || []} />
@ -63,4 +65,4 @@ const TagWidget = props => {
}; };
export default TagWidget; export default TagWidget;

18
themes/default/editor/widgets/tag/_tag.scss
View File

@ -2,6 +2,20 @@
display:none; display:none;
} }
/* IE11-specific hackery */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.r6o-widget.tag .r6o-taglist li {
height:27px;
.delete-wrapper .delete {
position:relative;
top:-4px;
}
}
}
.r6o-widget.tag { .r6o-widget.tag {
background-color:$blueish-white; background-color:$blueish-white;
border-bottom:1px solid $lightgrey-border; border-bottom:1px solid $lightgrey-border;
@ -51,12 +65,12 @@
.delete { .delete {
padding:2px 6px; padding:2px 6px;
.icon { .icon {
height:11px; height:11px;
padding-bottom:1px; padding-bottom:1px;
} }
} }
svg { svg {