Commit b8cc4eeb authored by Maxime Chaillet's avatar Maxime Chaillet

display new and edit in the same modal. When there is one one, the panel has...

display new and edit in the same modal. When there is one one, the panel has 100% height in the modal.
parent 893aa847
......@@ -38,7 +38,6 @@ class HTMLEditor extends Component {
const config = (isEditionMode === true) ? new EditionModeConfig() : new ViewModeConfig();
return (
<div >
<Editor
init={{
plugins: config.plugins,
......@@ -58,7 +57,6 @@ class HTMLEditor extends Component {
value={editorContent}
onEditorChange={this.onEditorChange}
/>
</div>
);
}
......
......@@ -28,10 +28,10 @@ class NewOrEditEventPanel extends React.Component {
let { event, user, context, investigationId, setEditEventVisibility } = this.props;
return (
<Panel bsStyle='primary' style={{ marginBottom: '0px' }}>
<Panel bsStyle='primary' style={{ marginBottom: '0px', height: '100%', position: 'relative' }}>
<EventHeader context={context} />
<div>
<div style={{ padding: '1px' }}>
<div style={{ position: 'absolute', top: '41px', bottom: '60px', width: '100%' }} >
<div style={{ padding: '1px', position: 'absolute', top: '0px', bottom: '34px', left: '0px', right: '2px' }}>
<EventContentPanel
context={context}
event={event}
......@@ -39,49 +39,48 @@ class NewOrEditEventPanel extends React.Component {
onEventModified={this.onEventModified}
user={user}
/>
</div>
<Grid fluid style={{ overflow: 'auto', height: '60px' }}>
<Grid fluid>
<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}>
<Button bsSize='xsmall' onClick={() => this.setState({ optionPanelDecollaped: !this.state.optionPanelDecollaped })}>
<Glyphicon glyph='option-vertical' />
</Button>
</Col>
</Row>
</Grid>
<div>
<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}
/>
<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}>
<Button bsSize='xsmall' onClick={() => this.setState({ optionPanelDecollaped: !this.state.optionPanelDecollaped })}>
<Glyphicon glyph='option-vertical' />
</Button>
</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>
</Row>
</Grid>
</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>
</div>
<EventFooter
isSaveButtonEnabled={this.state.isSaveButtonEnabled}
onCancelButtonClicked={() => this.onCancelButtonClicked()}
onSaveButtonClicked={() => this.onSaveButtonClicked()} />
<div style={{ position: 'absolute', bottom: '0px', width: '100%' }}>
<EventFooter
isSaveButtonEnabled={this.state.isSaveButtonEnabled}
onCancelButtonClicked={() => this.onCancelButtonClicked()}
onSaveButtonClicked={() => this.onSaveButtonClicked()} />
</div>
</Panel>
)
}
......
......@@ -291,15 +291,31 @@ div.collapsedEventPanel-heading:hover {
/* END Logbook menu related */
@media (min-width: 1000px) {
.newEventOverlayClass {
/* .newEventOverlayClass {
background-color: transparent;
top: unset;
bottom: 60px;
height: 429px;
width: 850px;
left: unset;
padding-right: 0px; */
/* overflow-y: hidden; */
/* }
.newEventModalClass {
max-width: unset;
margin: unset;
width: 100%;
height: 100%;
padding: unset;
} */
.newEventOverlayClass {
background-color: transparent;
top: unset;
bottom: 60px;
height: 75%;
width: 850px;
left: unset;
padding-right: 0px;
/* overflow-y: hidden; */
}
.newEventModalClass {
max-width: unset;
......@@ -308,7 +324,7 @@ div.collapsedEventPanel-heading:hover {
height: 100%;
padding: unset;
}
.editEventOverlayClass {
/* .editEventOverlayClass {
background-color: transparent;
top: unset;
bottom: 570px;
......@@ -324,5 +340,33 @@ div.collapsedEventPanel-heading:hover {
width: 100%;
height: 100%;
padding: unset;
}
} */
}
/*Container, container body, iframe*/
.mce-tinymce, .mce-container-body, #code_ifr {
min-height: 100% !important;
}
/*Container body*/
.mce-container-body {
position: absolute!important;
bottom: 0;
left: 0;
right: 0;
}
/*Editing area*/
.mce-container-body .mce-edit-area {
position: absolute!important;
top: 33px;
bottom: 0px;
left: 0;
right: 0;
}
/*Footer*/
.mce-tinymce .mce-top-part {
position: absolute!important;
top: 0;
height: 32px;
left: 0;
right: 0;
}
\ No newline at end of file
......@@ -23,7 +23,7 @@ class GeneralConfig {
this.statusbar = false;
this.branding = false; // hides powered by tinymce
this.paste_data_images = true;
this.autoresize_min_height = 250; //in px
//this.autoresize_min_height = 200; //400; //in px
this.autoresize_max_height = GUI_CONFIG().NEW_EVENT_MAX_HEIGHT; //in px
this.content_css = '/tinymce/customStyles.css';
this.formats = {
......
......@@ -35,12 +35,12 @@ class EventContainer extends React.Component {
eventReceptionStatus: 'idle', //idle, fetched, countFetched, allFetched; Used to handle asynchronous data retrieval from the server
eventCountReceptionStatus: 'idle', //idle, fetched, countFetched, allFetched; Used to handle asynchronous data retrieval from the server
eventBeingEdited: null,
isNewEventVisible: false,
isNewEventVisible: 'caca',
pageEvents: [], // events currently displayed on the page
selectedEventId: 0,
sortingFilter: GUI_CONFIG().DEFAULT_SORTING_FILTER,
userSearchCriteria: [],
view: LIST_VIEW
view: LIST_VIEW,
};
this.createEvent = this.createEvent.bind(this);
......@@ -66,7 +66,6 @@ class EventContainer extends React.Component {
if (_this.state.eventReceptionStatus === 'fetched' && _this.state.eventCountReceptionStatus === 'fetched') {
return true;
}
return false;
}
......@@ -91,7 +90,7 @@ class EventContainer extends React.Component {
view={this.state.view}
/>
<OverlayBox open={this.state.isNewEventVisible} classNames={{ overlay: 'newEventOverlayClass', modal: 'newEventModalClass' }}>
{/* <OverlayBox open={this.state.isNewEventVisible} classNames={{ overlay: 'newEventOverlayClass', modal: 'newEventModalClass' }}>
<NewOrEditEventPanel
context={NEW_EVENT_CONTEXT}
createEvent={this.createEvent}
......@@ -112,9 +111,37 @@ class EventContainer extends React.Component {
//toggleMode={this.toggleMode}
user={user}
updateEvent={this.updateEvent} />
</OverlayBox> */}
<OverlayBox open={this.state.isNewEventVisible === true || this.state.eventBeingEdited} classNames={{ overlay: 'newEventOverlayClass', modal: 'newEventModalClass' }}>
<div style={{ height: this.getPanelHeightInPercent(NEW_EVENT_CONTEXT), paddingBottom: '5px' }}>
{this.state.isNewEventVisible === true ?
<NewOrEditEventPanel
context={NEW_EVENT_CONTEXT}
createEvent={this.createEvent}
investigationId={investigationId}
onNewEventUploaded={this.onNewEventUploaded}
setNewEventVisibility={this.setNewEventVisibility}
user={user}
/>
: null}
</div>
<div style={{ height: this.getPanelHeightInPercent(EDIT_EVENT_CONTEXT), paddingBottom: '5px'}}>
{this.state.eventBeingEdited ?
<NewOrEditEventPanel
context={EDIT_EVENT_CONTEXT}
event={this.state.eventBeingEdited}
investigationId={investigationId}
onEventUpdated={this.onEventUpdated}
setEditEventVisibility={this.setEditEventVisibility}
//toggleMode={this.toggleMode}
user={user}
updateEvent={this.updateEvent} />
: null}
</div>
</OverlayBox>
{(!isDataFetched(this)) ?
<Loading message='Loading logbook'></Loading>
: <div>
......@@ -151,6 +178,19 @@ class EventContainer extends React.Component {
}
}
/** Get the height percentage value for the panels for new and edition of an event */
getPanelHeightInPercent = (context) => {
if (context) {
if (context === NEW_EVENT_CONTEXT) {
return this.state.isNewEventVisible === false ? '0%' : this.state.eventBeingEdited === null ? '100%' : '50%';
}
if (context === EDIT_EVENT_CONTEXT) {
return this.state.eventBeingEdited === null ? '0%' : this.state.isNewEventVisible === true ? '50%' : '100%';
}
}
return '100%';
}
onEventClicked = (event) => {
this.setState({ eventBeingEdited: event });
}
......@@ -239,9 +279,9 @@ class EventContainer extends React.Component {
/**
* Set the visibility of the edit event panel
* @param {string} visibility the requested visibility
*/
* Set the visibility of the edit event panel
* @param {string} visibility the requested visibility
*/
setEditEventVisibility = (visibility) => {
if (visibility) {
if (visibility === EDIT_EVENT_VISIBLE) {
......
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