tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix styles (#916) 

* Fix mobile style in admin panle email settings

* Fix style in ticket query filters

* fix style in mobile in ticket query filters
This commit is contained in:
LautaroCesso 2020-11-13 13:54:54 -03:00 committed by GitHub
parent b02acfdf7b
commit 94926f90e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 124 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
client/src/app-components/ticket-query-filters.js
View File

@ -47,57 +47,51 @@ class TicketQueryFilters extends React.Component {
<div className="ticket-query-filters__search-box">
<FormField name="query" field="search-box" fieldProps={{onSearch: this.onSubmitListConfig.bind(this)}} />
</div>
<div className="ticket-query-filters__row">
<div className="ticket-query-filters__row__filter">
<span>{i18n('DATE')}</span>
<FormField
name="dateRange"
field="date-range"
fieldProps={{defaultValue: formState.dateRange}} />
</div>
<div className="ticket-query-filters__row__filter">
<span>{i18n('STATUS')}</span>
<FormField name="closed" field="select" fieldProps={{items: this.getStatusItems(), className: 'ticket-query-filters__group__container__status-drop-down'}} />
</div>
<div className="ticket-query-filters__first-row">
<FormField
label={i18n('DATE')}
name="dateRange"
field="date-range"
fieldProps={{defaultValue: formState.dateRange}} />
<FormField
label={i18n('STATUS')}
name="closed"
field="select"
fieldProps={{
items: this.getStatusItems(),
className: 'ticket-query-filters__status-drop-down'
}} />
</div>
<div className="ticket-query-filters__row">
<div className="ticket-query-filters__row__filter">
<span className="ticket-query-filters__title">{i18n('DEPARTMENTS')}</span>
<FormField
name="departments"
field="autocomplete"
fieldProps={{items: this.getDepartmentsItems()}} />
</div>
<div className="ticket-query-filters__row__filter">
<span className="ticket-query-filters__title">{i18n('OWNER')}</span>
<FormField
name="owners"
field="autocomplete"
fieldProps={{items: this.getStaffList()}} />
</div>
<div className="ticket-query-filters__second-row">
<FormField
label={i18n('DEPARTMENTS')}
name="departments"
field="autocomplete"
fieldProps={{items: this.getDepartmentsItems()}} />
<FormField
label={i18n('OWNER')}
name="owners"
field="autocomplete"
fieldProps={{items: this.getStaffList()}} />
</div>
<div className="ticket-query-filters__row">
<div className="ticket-query-filters__row__filter">
<span className="ticket-query-filters__title">{i18n('TAGS')}</span>
<FormField
name="tags"
field="tag-selector"
fieldProps={{
items: this.getTags(filters.tags),
onRemoveClick: this.removeTag.bind(this),
onTagSelected: this.addTag.bind(this)
}} />
</div>
<div className="ticket-query-filters__row__filter">
<span className="ticket-query-filters__title">{i18n('AUTHORS')}</span>
<FormField
name="authors"
field="autocomplete"
fieldProps={{
getItemListFromQuery: this.searchAuthors.bind(this),
comparerFunction: this.autorsComparer.bind(this)
}} />
</div>
<div className="ticket-query-filters__third-row">
<FormField
label={i18n('TAGS')}
name="tags"
field="tag-selector"
fieldProps={{
items: this.getTags(filters.tags),
onRemoveClick: this.removeTag.bind(this),
onTagSelected: this.addTag.bind(this)
}} />
<FormField
label={i18n('AUTHORS')}
name="authors"
field="autocomplete"
fieldProps={{
getItemListFromQuery: this.searchAuthors.bind(this),
comparerFunction: this.autorsComparer.bind(this)
}} />
</div>
<div className="ticket-query-filters__container">
<Button

43
client/src/app-components/ticket-query-filters.scss
View File

@ -42,33 +42,33 @@
}
}
&__row {
&__first-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 10%;
}
&__second-row,
&__third-row {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
}
&__filter {
display: flex;
flex-direction: column;
align-items: start;
margin-bottom: 30px;
&__status-drop-down > .drop-down__current-item {
background-color: $very-light-grey;
&__status-drop-down > .drop-down__current-item {
background-color: $very-light-grey;
&:focus {
background-color: $medium-grey;
}
}
&:focus {
background-color: $medium-grey;
}
}
&__search-box {
width: 100%;
padding: 0 50px;
margin-bottom: 30px;
}
&__staff-option {
@ -103,3 +103,16 @@
padding-bottom: 10px;
}
}
@media screen and (max-width: 992px) {
.ticket-query-filters {
&__first-row,
&__second-row,
&__third-row {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: unset;
}
}
}

56
client/src/app/admin/panel/settings/admin-panel-email-settings.js
View File

@ -77,10 +77,10 @@ class AdminPanelEmailSettings extends React.Component {
return (
<div>
{this.renderEmailSettings()}
<Header title={i18n('EMAIL_TEMPLATES')} description={i18n('EMAIL_TEMPLATES_DESCRIPTION')}/>
<Header title={i18n('EMAIL_TEMPLATES')} description={i18n('EMAIL_TEMPLATES_DESCRIPTION')} />
<div className="row">
<div className="col-md-3">
<Listing {...this.getListingProps()}/>
<Listing {...this.getListingProps()} />
</div>
{(this.state.selectedIndex !== -1) ? this.renderForm() : null}
</div>
@ -91,7 +91,7 @@ class AdminPanelEmailSettings extends React.Component {
renderLoading() {
return (
<div className="admin-panel-email-settings__loading">
<Loading backgrounded size="large"/>
<Loading backgrounded size="large" />
</div>
);
}
@ -99,27 +99,31 @@ class AdminPanelEmailSettings extends React.Component {
renderEmailSettings() {
return (
<div>
<Header title={i18n('EMAIL_SETTINGS')} description={i18n('EMAIL_SETTINGS_DESCRIPTION')}/>
<Header title={i18n('EMAIL_SETTINGS')} description={i18n('EMAIL_SETTINGS_DESCRIPTION')} />
<Form className="admin-panel-email-settings__email-form"
onSubmit={this.submitEmailAddress.bind(this)}
onChange={emailForm => this.setState({emailForm})}
values={this.state.emailForm}>
<FormField name="server-email"
label={i18n('EMAIL_SERVER_ADDRESS')}
fieldProps={{size: 'large'}}
infoMessage={i18n('EMAIL_SERVER_ADDRESS_DESCRIPTION')}/>
<SubmitButton className="admin-panel-email-settings__submit" type="secondary"
size="small">{i18n('SAVE')}</SubmitButton>
<div className="admin-panel-email-settings__email-container">
<FormField className="admin-panel-email-settings__email-server-address"
name="server-email"
label={i18n('EMAIL_SERVER_ADDRESS')}
fieldProps={{size: 'large'}}
infoMessage={i18n('EMAIL_SERVER_ADDRESS_DESCRIPTION')} />
<SubmitButton className="admin-panel-email-settings__submit" type="secondary"
size="small">{i18n('SAVE')}</SubmitButton>
</div>
</Form>
<Form values={{headerImage: this.state.headerImage}}
<Form className="admin-panel-email-settings__image-form"
values={{headerImage: this.state.headerImage}}
onChange={form => this.setState({headerImage: form.headerImage})}
onSubmit={this.onHeaderImageSubmit.bind(this)}>
<div className="admin-panel-email-settings__image-container">
<FormField className="admin-panel-email-settings__image-header-url"
label={i18n('IMAGE_HEADER_URL')} name="headerImage" required
infoMessage={i18n('IMAGE_HEADER_URL_DESCRIPTION')}
fieldProps={{size: 'large'}}/>
fieldProps={{size: 'large'}} />
<SubmitButton className="admin-panel-email-settings__image-header-submit" type="secondary"
size="small">{i18n('SAVE')}</SubmitButton>
</div>
@ -127,12 +131,12 @@ class AdminPanelEmailSettings extends React.Component {
<div className="admin-panel-email-settings__servers">
<div className="admin-panel-email-settings__box">
<Header title={i18n('SMTP_SERVER')} description={i18n('SMTP_SERVER_DESCRIPTION')}/>
<Header title={i18n('SMTP_SERVER')} description={i18n('SMTP_SERVER_DESCRIPTION')} />
<Form onSubmit={this.submitSMTP.bind(this)} onChange={smtpForm => this.setState({smtpForm})}
values={this.state.smtpForm} loading={this.state.smtpLoading}>
<FormField name="smtp-host" label={i18n('SMTP_SERVER')} fieldProps={{size: 'large'}}/>
<FormField name="smtp-user" label={i18n('SMTP_USER')} fieldProps={{size: 'large'}}/>
<FormField name="smtp-pass" label={i18n('SMTP_PASSWORD')} fieldProps={{size: 'large', autoComplete: 'off'}}/>
<FormField name="smtp-host" label={i18n('SMTP_SERVER')} fieldProps={{size: 'large'}} />
<FormField name="smtp-user" label={i18n('SMTP_USER')} fieldProps={{size: 'large'}} />
<FormField name="smtp-pass" label={i18n('SMTP_PASSWORD')} fieldProps={{size: 'large', autoComplete: 'off'}} />
<div className="admin-panel-email-settings__server-form-buttons">
<SubmitButton className="admin-panel-email-settings__submit" type="secondary"
size="small">{i18n('SAVE')}</SubmitButton>
@ -144,17 +148,17 @@ class AdminPanelEmailSettings extends React.Component {
</div>
<div className="admin-panel-email-settings__box">
<Header title={i18n('IMAP_SERVER')} description={i18n('IMAP_SERVER_DESCRIPTION')}/>
<Header title={i18n('IMAP_SERVER')} description={i18n('IMAP_SERVER_DESCRIPTION')} />
<Form onSubmit={this.submitIMAP.bind(this)} onChange={imapForm => this.setState({imapForm})}
values={this.state.imapForm} loading={this.state.imapLoading}>
<FormField name="imap-host" label={i18n('IMAP_SERVER')} fieldProps={{size: 'large'}}/>
<FormField name="imap-user" label={i18n('IMAP_USER')} fieldProps={{size: 'large'}}/>
<FormField name="imap-pass" label={i18n('IMAP_PASSWORD')} fieldProps={{size: 'large', autoComplete: 'off'}}/>
<FormField name="imap-host" label={i18n('IMAP_SERVER')} fieldProps={{size: 'large'}} />
<FormField name="imap-user" label={i18n('IMAP_USER')} fieldProps={{size: 'large'}} />
<FormField name="imap-pass" label={i18n('IMAP_PASSWORD')} fieldProps={{size: 'large', autoComplete: 'off'}} />
<FormField
name="imap-token"
label={i18n('IMAP_TOKEN')}
infoMessage={i18n('IMAP_TOKEN_DESCRIPTION')}
fieldProps={{size: 'large', icon: 'refresh', onIconClick: this.generateImapToken.bind(this)}}/>
fieldProps={{size: 'large', icon: 'refresh', onIconClick: this.generateImapToken.bind(this)}} />
<div className="admin-panel-email-settings__server-form-buttons">
<SubmitButton className="admin-panel-email-settings__submit" type="secondary"
size="small">{i18n('SAVE')}</SubmitButton>
@ -180,26 +184,26 @@ class AdminPanelEmailSettings extends React.Component {
fieldProps={{
type: 'allowed',
size: 'medium'
}}/>
}} />
<Form {...this.getFormProps()}>
<div className="row">
<div className="col-md-7">
<FormField label={i18n('SUBJECT')} name="subject" validation="TITLE" required
fieldProps={{size: 'large'}}/>
fieldProps={{size: 'large'}} />
</div>
</div>
<FormField key="text1" label={i18n('TEXT') + '1'} name="text1" validation="TEXT_AREA" required
decorator={'textarea'}
fieldProps={{className: 'admin-panel-email-settings__text-area'}}/>
fieldProps={{className: 'admin-panel-email-settings__text-area'}} />
{(this.state.form.text2) ?
<FormField key="text2" label={i18n('TEXT') + '2'} name="text2" validation="TEXT_AREA" required
decorator={'textarea'}
fieldProps={{className: 'admin-panel-email-settings__text-area'}}/> : null}
fieldProps={{className: 'admin-panel-email-settings__text-area'}} /> : null}
{(this.state.form.text3) ?
<FormField key="text3" label={i18n('TEXT') + '3'} name="text3" validation="TEXT_AREA" required
decorator={'textarea'}
fieldProps={{className: 'admin-panel-email-settings__text-area'}}/> : null}
fieldProps={{className: 'admin-panel-email-settings__text-area'}} /> : null}
<div className="admin-panel-email-settings__actions">
<div className="admin-panel-email-settings__save-button">

23
client/src/app/admin/panel/settings/admin-panel-email-settings.scss
View File

@ -35,7 +35,7 @@
}
&__image-container,
&__email-form {
&__email-container {
background-color: $very-light-grey;
display: flex;
justify-content: space-between;
@ -70,3 +70,24 @@
text-align: left;
}
}
@media screen and (max-width: 992px) {
.admin-panel-email-settings {
&__image-container > label > .input,
&__email-container > label > .input {
display: unset;
}
&__image-container,
&__email-container,
&__servers {
display: flex;
flex-direction: column;
}
&__email-server-address,
&__image-header-url {
width: 100%;
}
}
}

2
client/src/core-components/date-range.scss
View File

@ -1,5 +1,5 @@
@import "../scss/vars";
.date-range {
margin-top: 13px;
display: flex;
}