LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

fix: input + label alignment

Browse source
This commit is contained in:
Sean Yesmunt 2019-01-08 23:29:06 -05:00
parent b67eeeaa68
commit 9658cefa55
7 changed files with 62 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/component/common/file-selector.jsx
View file

@ -63,7 +63,7 @@ class FileSelector extends React.PureComponent<Props> {
type === 'file' ? fileLabel || __('Choose File') : directoryLabel || __('Choose Directory'); type === 'file' ? fileLabel || __('Choose File') : directoryLabel || __('Choose Directory');
return ( return (
<FormRow verticallyCentered padded> <FormRow>
<Button button="primary" onClick={() => this.handleButtonClick()} label={label} /> <Button button="primary" onClick={() => this.handleButtonClick()} label={label} />
<input <input
webkitdirectory="true" webkitdirectory="true"

2
src/renderer/component/userPhoneNew/view.jsx
View file

@ -95,7 +95,7 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
</p> </p>
</header> </header>
<Form onSubmit={this.handleSubmit}> <Form onSubmit={this.handleSubmit}>
<FormRow padded verticallyCentered> <FormRow padded>
<FormField type="select" name="country-codes" onChange={this.handleSelect}> <FormField type="select" name="country-codes" onChange={this.handleSelect}>
{countryCodes.map(country => ( {countryCodes.map(country => (
<option key={country.countryCallingCode} value={country.countryCallingCode}> <option key={country.countryCallingCode} value={country.countryCallingCode}>

2
src/renderer/component/walletSend/view.jsx
View file

@ -73,7 +73,7 @@ class WalletSend extends React.PureComponent<Props> {
} }
/> />
</FormRow> </FormRow>
<FormRow padded> <FormRow>
<FormField <FormField
type="text" type="text"
name="address" name="address"

84
src/renderer/page/settings/view.jsx
View file

@ -2,7 +2,7 @@
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import * as SETTINGS from 'constants/settings'; import * as SETTINGS from 'constants/settings';
import * as React from 'react'; import * as React from 'react';
import { FormField, FormFieldPrice } from 'component/common/form'; import { FormField, FormFieldPrice, FormRow } from 'component/common/form';
import Button from 'component/button'; import Button from 'component/button';
import Page from 'component/page'; import Page from 'component/page';
import FileSelector from 'component/common/file-selector'; import FileSelector from 'component/common/file-selector';
@ -287,32 +287,38 @@ class SettingsPage extends React.PureComponent<Props, State> {
</header> </header>
<div className="card__content"> <div className="card__content">
<FormField <FormRow>
type="checkbox" <FormField
name="autoplay" type="checkbox"
onChange={this.onAutoplayChange} name="autoplay"
checked={autoplay} onChange={this.onAutoplayChange}
postfix={__('Autoplay media files')} checked={autoplay}
/> postfix={__('Autoplay media files')}
/>
</FormRow>
<FormField <FormRow>
type="checkbox" <FormField
name="auto_download" type="checkbox"
onChange={this.onAutoDownloadChange} name="auto_download"
checked={autoDownload} onChange={this.onAutoDownloadChange}
postfix={__('Automatically download new content from your subscriptions')} checked={autoDownload}
/> postfix={__('Automatically download new content from your subscriptions')}
/>
</FormRow>
<FormField <FormRow>
type="checkbox" <FormField
name="show_nsfw" type="checkbox"
onChange={this.onShowNsfwChange} name="show_nsfw"
checked={showNsfw} onChange={this.onShowNsfwChange}
postfix={__('Show NSFW content')} checked={showNsfw}
helper={__( postfix={__('Show NSFW content')}
'NSFW content may include nudity, intense sexuality, profanity, or other adult content. By displaying NSFW content, you are affirming you are of legal age to view mature content in your country or jurisdiction. ' helper={__(
)} 'NSFW content may include nudity, intense sexuality, profanity, or other adult content. By displaying NSFW content, you are affirming you are of legal age to view mature content in your country or jurisdiction. '
/> )}
/>
</FormRow>
</div> </div>
</section> </section>
@ -359,19 +365,21 @@ class SettingsPage extends React.PureComponent<Props, State> {
</header> </header>
<div className="card__content"> <div className="card__content">
<FormField <FormRow>
name="theme_select" <FormField
type="select" name="theme_select"
onChange={this.onThemeChange} type="select"
value={currentTheme} onChange={this.onThemeChange}
disabled={automaticDarkModeEnabled} value={currentTheme}
> disabled={automaticDarkModeEnabled}
{themes.map(theme => ( >
<option key={theme} value={theme}> {themes.map(theme => (
{theme} <option key={theme} value={theme}>
</option> {theme}
))} </option>
</FormField> ))}
</FormField>
</FormRow>
<FormField <FormField
type="checkbox" type="checkbox"

2
src/renderer/scss/component/_card.scss
View file

@ -93,7 +93,7 @@
position: relative; position: relative;
+ .card__content { + .card__content {
padding-top: var(--spacing-vertical-medium); margin-top: var(--spacing-vertical-medium);
} }
&:not(.card__header--flat) { &:not(.card__header--flat) {

10
src/renderer/scss/component/_form-field.scss
View file

@ -1,8 +1,4 @@
.form-field { .form-field {
&:not(:last-of-type) {
margin-bottom: var(--spacing-vertical-small);
}
&.form-field--disabled { &.form-field--disabled {
opacity: 0.4; opacity: 0.4;
pointer-events: none; pointer-events: none;
@ -91,6 +87,12 @@
padding-left: var(--spacing-vertical-small); padding-left: var(--spacing-vertical-small);
} }
// Keeps radio buttons aligned with the labels
// This can probably be done in a better way, but after setting align-items: center on the parent, the label is still off a bit.
input[type='radio'] + .form-field__postfix {
padding-top: 3px;
}
.form-field__select-wrapper { .form-field__select-wrapper {
position: relative; position: relative;
width: 20rem; width: 20rem;

10
src/renderer/scss/component/_form-row.scss
View file

@ -1,9 +1,10 @@
.form-row { .form-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-end;
&:not(&--vertically-centered) { &:not(.form-row--padded):not(:last-of-type) {
align-items: flex-end; margin-bottom: var(--spacing-vertical-medium);
} }
.form-field { .form-field {
@ -32,8 +33,9 @@
} }
.form-row--padded { .form-row--padded {
padding-top: var(--spacing-vertical-medium); // Ignore the class name, margin allows these to collapse with other items
padding-bottom: var(--spacing-vertical-medium); margin-top: var(--spacing-vertical-large);
margin-bottom: var(--spacing-vertical-large);
} }
.form-row--right { .form-row--right {