Fix error with buttons in install steps (#800)

* Fix error with buttons in install steps

* Fix error with autocomplete test
This commit is contained in:
LautaroCesso 2020-06-07 17:29:52 -03:00 committed by GitHub
parent 13019ab446
commit 21290c600f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 21 additions and 19 deletions

View File

@ -17,7 +17,7 @@ class InstallStep1Language extends React.Component {
<Header title={i18n('STEP_TITLE', {title: i18n('SELECT_LANGUAGE'), current: 1, total: 7})} description={i18n('STEP_1_DESCRIPTION')}/> <Header title={i18n('STEP_TITLE', {title: i18n('SELECT_LANGUAGE'), current: 1, total: 7})} description={i18n('STEP_1_DESCRIPTION')}/>
<LanguageSelector {...this.getLanguageSelectorProps()} /> <LanguageSelector {...this.getLanguageSelectorProps()} />
<div className="install-step-1__button"> <div className="install-step-1__button">
<Button size="extra-small" type="secondary" onClick={() => history.push('/install/step-2')}> <Button size="medium" type="secondary" onClick={() => history.push('/install/step-2')}>
{i18n('NEXT')} {i18n('NEXT')}
</Button> </Button>
</div> </div>

View File

@ -39,10 +39,10 @@ class InstallStep2Requirements extends React.Component {
<Table {...this.getTableProps()} /> <Table {...this.getTableProps()} />
<div className="install-step-2__buttons"> <div className="install-step-2__buttons">
<div className="install-step-2__previous"> <div className="install-step-2__previous">
<Button size="extra-small" onClick={this.onPreviousClick.bind(this)}>{i18n('PREVIOUS')}</Button> <Button size="medium" onClick={this.onPreviousClick.bind(this)}>{i18n('PREVIOUS')}</Button>
</div> </div>
<div className="install-step-2__next"> <div className="install-step-2__next">
<Button disabled={!this.isAllOk()} size="extra-small" type="secondary" onClick={() => history.push('/install/step-3')}> <Button disabled={!this.isAllOk()} size="medium" type="secondary" onClick={() => history.push('/install/step-3')}>
{i18n('NEXT')} {i18n('NEXT')}
</Button> </Button>
</div> </div>

View File

@ -6,7 +6,8 @@
margin: 15px 0; margin: 15px 0;
&-button { &-button {
width: 120px; min-width: 120px;
width: auto;
position: relative; position: relative;
text-align: right; text-align: right;
} }

View File

@ -33,8 +33,8 @@ class InstallStep3Database extends React.Component {
<FormField name="dbUser" label={i18n('DATABASE_USER')} fieldProps={{size: 'large'}} required/> <FormField name="dbUser" label={i18n('DATABASE_USER')} fieldProps={{size: 'large'}} required/>
<FormField name="dbPassword" label={i18n('DATABASE_PASSWORD')} fieldProps={{size: 'large', password: true}}/> <FormField name="dbPassword" label={i18n('DATABASE_PASSWORD')} fieldProps={{size: 'large', password: true}}/>
<div className="install-step-3__buttons"> <div className="install-step-3__buttons">
<Button className="install-step-3__previous" disabled={loading} size="extra-small" onClick={this.onPreviousClick.bind(this)}>{i18n('PREVIOUS')}</Button> <Button className="install-step-3__previous" disabled={loading} size="medium" onClick={this.onPreviousClick.bind(this)}>{i18n('PREVIOUS')}</Button>
<SubmitButton className="install-step-3__next" size="extra-small" type="secondary">{i18n('NEXT')}</SubmitButton> <SubmitButton className="install-step-3__next" size="medium" type="secondary">{i18n('NEXT')}</SubmitButton>
</div> </div>
</Form> </Form>
</div> </div>

View File

@ -39,7 +39,7 @@ class InstallStep4UserSystem extends React.Component {
fieldProps={{disabled: !form['mandatory-login']}}/> fieldProps={{disabled: !form['mandatory-login']}}/>
</div> </div>
<div className="install-step-4__buttons"> <div className="install-step-4__buttons">
<SubmitButton className="install-step-4__next" size="extra-small" type="secondary">{i18n('NEXT')}</SubmitButton> <SubmitButton className="install-step-4__next" size="medium" type="secondary">{i18n('NEXT')}</SubmitButton>
</div> </div>
</Form> </Form>
</div> </div>

View File

@ -42,22 +42,22 @@ class InstallStep5Settings extends React.Component {
<FormField name="smtp-host" label={i18n('SMTP_SERVER')} fieldProps={{size: 'large'}}/> <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-user" label={i18n('SMTP_USER')} fieldProps={{size: 'large'}}/>
<FormField name="smtp-pass" label={i18n('SMTP_PASSWORD')} fieldProps={{size: 'large', password: true}}/> <FormField name="smtp-pass" label={i18n('SMTP_PASSWORD')} fieldProps={{size: 'large', password: true}}/>
<SubmitButton className="install-step-5__test-connection" size="extra-small" onClick={this.onTestSMTPClick.bind(this)} disabled={loading}> <SubmitButton className="install-step-5__test-connection" size="medium" onClick={this.onTestSMTPClick.bind(this)} disabled={loading}>
{i18n('TEST_SMTP_CONNECTION')} {i18n('TEST_SMTP_CONNECTION')}
</SubmitButton> </SubmitButton>
</div> </div>
<div className="install-step-5__buttons"> <div className="install-step-5__buttons">
<SubmitButton className="install-step-5__next" size="extra-small" type="secondary">
{i18n('NEXT')}
</SubmitButton>
<Button <Button
className="install-step-5__previous" className="install-step-5__previous"
size="extra-small" size="medium"
disabled={loading} disabled={loading}
onClick={this.onPreviousClick.bind(this)} onClick={this.onPreviousClick.bind(this)}
> >
{i18n('PREVIOUS')} {i18n('PREVIOUS')}
</Button> </Button>
<SubmitButton className="install-step-5__next" size="medium" type="secondary">
{i18n('NEXT')}
</SubmitButton>
</div> </div>
</Form> </Form>
</div> </div>

View File

@ -6,11 +6,11 @@
margin-right: 20px; margin-right: 20px;
} }
&__next { &__buttons {
float: left; display: flex;
position: absolute; flex-direction: row;
margin-left: 230px; justify-content: space-around;
min-width: 70px; align-items: center;
} }
&__smtp-block { &__smtp-block {

View File

@ -28,7 +28,7 @@ class InstallStep6Admin extends React.Component {
<FormField name="email" validation="EMAIL" label={i18n('ADMIN_EMAIL')} fieldProps={{size: 'large'}} required/> <FormField name="email" validation="EMAIL" label={i18n('ADMIN_EMAIL')} fieldProps={{size: 'large'}} required/>
<FormField name="password" validation="PASSWORD" label={i18n('ADMIN_PASSWORD')} infoMessage={i18n('ADMIN_PASSWORD_DESCRIPTION')} fieldProps={{size: 'large', autoComplete: 'off'}} required/> <FormField name="password" validation="PASSWORD" label={i18n('ADMIN_PASSWORD')} infoMessage={i18n('ADMIN_PASSWORD_DESCRIPTION')} fieldProps={{size: 'large', autoComplete: 'off'}} required/>
<div className="install-step-6__buttons"> <div className="install-step-6__buttons">
<SubmitButton className="install-step-6__next" size="extra-small" type="secondary">{i18n('NEXT')}</SubmitButton> <SubmitButton className="install-step-6__next" size="medium" type="secondary">{i18n('NEXT')}</SubmitButton>
</div> </div>
</Form> </Form>
</div> </div>

View File

@ -105,7 +105,7 @@ describe('Autocomplete component with external api', function () {
expect(selectedList.length).to.equal(1); expect(selectedList.length).to.equal(1);
expect(selectedList[0].name).to.equal("argentina"); expect(selectedList[0].name).to.equal("argentina");
expect(selectedList[0].id).to.equal(10); expect(selectedList[0].id).to.equal(10);
}, 360); }, 400);
}); });
it('should sinc', function() { it('should sinc', function() {

View File

@ -68,6 +68,7 @@
} }
&_medium { &_medium {
min-width: 70px;
width: auto; width: auto;
padding: 5px 15px; padding: 5px 15px;
height: 35px; height: 35px;