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

Closes #13

This commit is contained in:
Rainer Simon 2020-05-14 09:48:21 +02:00
parent f89eac2b87
commit 6ca6d8e969
2 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/relations/editor/RelationEditor.jsx
View File

@ -102,13 +102,15 @@ export default class RelationEditor extends Component {
render() { render() {
return( return(
<div className="r6o-relation-editor" ref={this.element}> <div className="r6o-relation-editor" ref={this.element}>
<ContentEditable <div className="input-wrapper">
className="input" <ContentEditable
html={this.state.content} className="input"
data-placeholder="Tag..." html={this.state.content}
onChange={this.onChange} data-placeholder="Tag..."
onKeyDown={this.onKeyDown} onChange={this.onChange}
/> onKeyDown={this.onKeyDown}
/>
</div>
<div className="buttons"> <div className="buttons">
<span <span

16
themes/default/relations/_editor.scss
View File

@ -18,19 +18,23 @@
box-sizing:border-box; box-sizing:border-box;
} }
.input { .input-wrapper {
height:34px; height:34px;
display:block; padding:10px 6px;
padding:1px 6px;
margin-right:68px; margin-right:68px;
font-size:15px; font-size:14px;
min-width:80px; min-width:80px;
outline:none; background-color:$blueish-white;
background-color:#fff;
cursor:text; cursor:text;
@include rounded-corners-left(3px); @include rounded-corners-left(3px);
} }
.input {
outline:none;
line-height:14px;
white-space:pre;
}
.input:empty:before { .input:empty:before {
content:attr(data-placeholder); content:attr(data-placeholder);
color:darken($lightgrey-border-darker, 15%); color:darken($lightgrey-border-darker, 15%);