tyler.durden/opensupports
1
0
Fork 0
mirror of https://github.com/opensupports/opensupports.git synced 2025-07-31 01:35:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
client/src/app-components/ticket-viewer.js
View File

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

20
client/src/app-components/ticket-viewer.scss
View File

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