Commit 698c88cc authored by Maxime Chaillet's avatar Maxime Chaillet

use a horizontal slider to display tags on a single line.

parent 65cca554
......@@ -38,37 +38,51 @@ class NewOrEditEventPanel extends React.Component {
onEventModified={this.onEventModified}
user={user}
/>
<Grid fluid style={{ overflow: 'auto', height: '60px' }}>
<Grid fluid style={{ height: '60px' }}>
<Row>
<Col xs={4}> <CreationDate event={event} /> </Col>
<Col xs={4}> <CommentBy event={event} /> </Col>
<Col xs={3}> <EventHistory event={event} /> </Col>
<Col xs={1}>
{/* <Col xs={1}>
<Button bsSize='xsmall' onClick={() => this.setState({ optionPanelDecollaped: !this.state.optionPanelDecollaped })}>
<Glyphicon glyph='option-vertical' />
</Button>
</Col>
</Col> */}
</Row>
<Row>
<Label style={{ margin: '6px 6px 6px 12px', paddingRight: '2px' }}> Tags </Label>
<OverlayTrigger
placement='top'
overlay={<Tooltip id='tooltip'> <p> Manage tags </p> </Tooltip>}>
<a href={"/investigation/" + this.props.investigationId + "/events/tagManager"} target="_blank" style={{ fontSize: '12px' }}> <Glyphicon glyph='cog' /> </a>
</OverlayTrigger>
<TagContainer
canEnableSaveButton={this.onEventModified}
context={context}
event={event}
investigationId={this.props.investigationId}
setTagContainer={this.setTagContainer}
/>
<Panel id="optionPanel" style={{ border: 'none', marginBottom: '0px' }} expanded={this.state.optionPanelDecollaped}>
<Panel.Collapse>
<LabeledElement type='input' data={event ? event.title : null} labelText='title' onEventModified={this.onEventModified} setTitleInput={this.setTitleInput} tooltip='title of the event' />
</Panel.Collapse>
</Panel>
<Col xs={12} style={{ paddingTop: '8px', paddingBottom: '8px' }}>
<div style={{ display: 'flex' }}>
<div style={{ flex: '0 0 70px' }}>
<Label style={{ margin: '0px 6px 0px 0px', paddingRight: '2px' }}> Tags </Label>
<OverlayTrigger
placement='top'
overlay={<Tooltip id='tooltip'> <p> Manage tags </p> </Tooltip>}>
<a href={"/investigation/" + this.props.investigationId + "/events/tagManager"} target="_blank" style={{ fontSize: '12px' }}> <Glyphicon glyph='cog' /> </a>
</OverlayTrigger>
</div>
<div style={{ flex: '1 1 100px' }}>
<TagContainer
canEnableSaveButton={this.onEventModified}
context={context}
event={event}
investigationId={this.props.investigationId}
setTagContainer={this.setTagContainer}
/>
</div>
</div>
{/* <Panel id="optionPanel" style={{ border: 'none', marginBottom: '0px' }} expanded={this.state.optionPanelDecollaped}>
<Panel.Collapse>
<LabeledElement type='input' data={event ? event.title : null} labelText='title' onEventModified={this.onEventModified} setTitleInput={this.setTitleInput} tooltip='title of the event' />
</Panel.Collapse>
</Panel> */}
</Col>
</Row>
</Grid>
</div>
......@@ -80,7 +94,7 @@ class NewOrEditEventPanel extends React.Component {
onCancelButtonClicked={() => this.onCancelButtonClicked()}
onSaveButtonClicked={() => this.onSaveButtonClicked()} />
</div>
</Panel>
</Panel >
)
}
......
.arrow-prev, .arrow-next {
width: 10px
}
.customInnerWrapperClass {
transform: translate3d(0px, 0px, 0px);
transition: transform 0.4s ease 0s;
width: unset!important;
text-align: left;
user-select: none;
white-space: nowrap;
}
.customWrapperClass {
overflow: hidden;
user-select: none;
flex: 1 1 100px;
}
\ No newline at end of file
......@@ -7,6 +7,8 @@ import CreatableSelect from 'react-select/lib/Creatable';
import _ from 'lodash';
import { GUI_CONFIG } from '../../../config/gui.config';
import UserMessage from '../../UserMessage';
import ScrollMenu from 'react-horizontal-scrolling-menu';
import './TagList.css';
/**
* React component which handles tags (create, edit, remove)
......@@ -50,6 +52,12 @@ class TagList extends React.Component {
...provided,
paddingTop: '0px',
paddingBottom: '0px',
}),
menu: (provided) => ({
...provided,
bottom: '100%',
top: 'unset',
})
};
......@@ -62,8 +70,8 @@ class TagList extends React.Component {
: null;
return (
<div style={{ display: 'inline-block' }}>
<div style={{ display: 'inline-block', paddingRight: '10px', paddingTop:'5px' }}>
<div style={{ display: 'flex' }}>
<div style={{ flex: '0 0 148px' }}>
<CreatableSelect
isClearable={false}
noOptionsMessage={() => 'No existing tag'}
......@@ -72,7 +80,16 @@ class TagList extends React.Component {
options={availableTagsForSelect}
isSearchable={true} />
</div>
{selectedTags}
<div style={{ flex: '1 1 100px', overflow: 'hidden' }}>
<ScrollMenu
data={selectedTags}
arrowLeft={<div className='arrow-prev'> &#60; </div>}
arrowRight={<div className='arrow-next'> &#62; </div>}
wrapperClass='customWrapperClass'
innerWrapperClass='customInnerWrapperClass'
/>
</div>
</div>
);
......
......@@ -52,15 +52,15 @@ class TagContainer extends React.Component {
}
if (this.props.availableTagsReceptionStatus === FETCHED_STATUS) {
if (this.state.context === BASIC_EVENT_CONTEXT) {
return (<div>
{userMessage}
<TagList
selectedTags={this.state.selectedTags}
context={BASIC_EVENT_CONTEXT}
/>
</div>);
}
// if (this.state.context === BASIC_EVENT_CONTEXT) {
// return (<div>
// {userMessage}
// <TagList
// selectedTags={this.state.selectedTags}
// context={BASIC_EVENT_CONTEXT}
// />
// </div>);
// }
if (this.state.context === EDIT_EVENT_CONTEXT || this.state.context === NEW_EVENT_CONTEXT) {
return (
......@@ -245,7 +245,7 @@ class TagContainer extends React.Component {
console.log('The new tag was created successfully on ICAT+ server.');
let selectedTags = [];
if (this.props.context === DETAILED_EVENT_CONTEXT) {
if (this.props.context === EDIT_EVENT_CONTEXT || this.props.context === NEW_EVENT_CONTEXT) {
// ADD the new tag in the currently selected tags.
selectedTags = _.map(_this.state.selectedTags, _.clone);
selectedTags.push(newlyCreatedTag);
......@@ -256,7 +256,7 @@ class TagContainer extends React.Component {
let onSuccess = (data) => {
if (data.data.tags) {
this.setState({ context: nextContext, selectedTags: selectedTags });
if (this.props.context !== DETAILED_EVENT_CONTEXT) {
if (this.props.context !== NEW_EVENT_CONTEXT || this.props.context !== EDIT_EVENT_CONTEXT) {
this.setMessage(SUCCESS_MESSAGE_TYPE, 'Tag successfully created');
}
this.props.setAvailableTags(data.data.tags);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment