Add close ticket button at the end of ticket viewer (#932)

* Add close ticket button at the end of ticket viewer

* WIP

* standardization
This commit is contained in:
LautaroCesso 2020-11-12 14:13:52 -03:00 committed by GitHub
parent 7fb7be3860
commit 560f231e51
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 9 deletions

View File

@ -118,7 +118,7 @@ class TicketViewer extends React.Component {
<div className="ticket-viewer__comments">
{ticket.events && ticket.events.map(this.renderTicketEvent.bind(this))}
</div>
{(!ticket.closed && (editable || !assignmentAllowed)) ? this.renderResponseField() : (this.showDeleteButton())? <Button size="medium" onClick={this.onDeleteTicketClick.bind(this)}>{i18n('DELETE_TICKET')}</Button> : null}
{(!ticket.closed && (editable || !assignmentAllowed)) ? this.renderResponseField() : (this.showDeleteButton()) ? this.renderDeleteTicketButton() : null}
</div>
);
}
@ -265,9 +265,7 @@ class TicketViewer extends React.Component {
<Button type='secondary' size="medium" onClick={this.onReopenClick.bind(this)}>
{i18n('RE_OPEN')}
</Button> :
<Button type='secondary' size="medium" onClick={this.onCloseTicketClick.bind(this)}>
{i18n('CLOSE')}
</Button>}
this.renderCloseTicketButton()}
</div>
);
}
@ -454,11 +452,14 @@ class TicketViewer extends React.Component {
</div>
<div className="ticket-viewer__response-field row">
<FormField name="content" validation="TEXT_AREA" required field="textarea" fieldProps={{allowImages: allowAttachments}} />
{allowAttachments ? <FormField name="file" field="file" /> : null}
<div className="ticket-viewer__response-buttons">
{allowAttachments ? <FormField name="file" field="file" /> : null}
<SubmitButton type="secondary">{i18n('RESPOND_TICKET')}</SubmitButton>
<div>
{(this.showDeleteButton())? <Button className="ticket-viewer__delete-button" size="medium" onClick={this.onDeleteTicketClick.bind(this)}>{i18n('DELETE_TICKET')}</Button> : null}
</div>
<div className="ticket-viewer__buttons-column">
<div className="ticket-viewer__buttons-row">
{(this.showDeleteButton()) ? this.renderDeleteTicketButton() : null}
{this.renderCloseTicketButton()}
</div>
</div>
</div>
@ -468,6 +469,18 @@ class TicketViewer extends React.Component {
);
}
renderDeleteTicketButton() {
return (
<Button className="ticket-viewer__delete-button" size="medium" onClick={this.onDeleteTicketClick.bind(this)}>{i18n('DELETE_TICKET')}</Button>
);
}
renderCloseTicketButton() {
return (
<Button size="medium" onClick={this.onCloseTicketClick.bind(this)}>{i18n('CLOSE_TICKET')}</Button>
);
}
renderCustomResponses() {
let customResponsesNode = null;

View File

@ -1,7 +1,6 @@
@import "../scss/vars";
.ticket-viewer {
&__header {
background-color: $primary-blue;
border-top-right-radius: 4px;
@ -20,6 +19,22 @@
}
}
&__buttons-column {
padding-top: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
&__buttons-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
width: 250px;
}
&__edited-title-text {
font-style: italic;
font-size: 14px;
@ -193,13 +208,14 @@
&-buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
&__delete-button {
margin-left: 10px;
}
@media screen and (max-width: 1151px) {