Choose times for Automatic Dark Mode #2747

Merged
nestordominguez merged 5 commits from issue-1922 into master 2019-08-19 18:12:50 +02:00
3 changed files with 32 additions and 74 deletions
Showing only changes of commit 354d8be3a0 - Show all commits

View file

@ -47,35 +47,31 @@ export class FormFieldPrice extends React.PureComponent<Props> {
return (
<fieldset-group class="fieldset-group--smushed">
<fieldset-section>
<FormField
name={`${name}_amount`}
label={__('Price')}
type="number"
className="form-field--price-amount"
min={min}
value={price.amount}
onChange={this.handleAmountChange}
placeholder={placeholder || 5}
disabled={disabled}
step={step || 'any'}
/>
</fieldset-section>
<fieldset-section>
<FormField
label={__('Currency')}
name={`${name}_currency`}
type="select"
id={`${name}_currency`}
className="input--currency-select"
disabled={disabled}
onChange={this.handleCurrencyChange}
value={price.currency}
>
<option value="LBC">{__('LBRY Credits (LBC)')}</option>
<option value="USD">{__('US Dollars')}</option>
</FormField>
</fieldset-section>
<FormField
name={`${name}_amount`}
label={__('Price')}
type="number"
className="form-field--price-amount"
min={min}
value={price.amount}
onChange={this.handleAmountChange}
placeholder={placeholder || 5}
disabled={disabled}
step={step || 'any'}
/>
<FormField
label={__('Currency')}
name={`${name}_currency`}
type="select"
id={`${name}_currency`}
className="input--currency-select"
disabled={disabled}
onChange={this.handleCurrencyChange}
value={price.currency}
>
<option value="LBC">{__('LBRY Credits (LBC)')}</option>
<option value="USD">{__('US Dollars')}</option>
</FormField>
</fieldset-group>
);
}

View file

@ -207,7 +207,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
const connectionOptions = [1, 2, 4, 6, 10, 20];
const startHours = ['18', '19', '20', '21'];
const endHours = ['5', '6', '7', '8'];
const enabledMinutes = ['00', '15', '30', '45'];
return (
<Page>
@ -453,17 +452,14 @@ class SettingsPage extends React.PureComponent<Props, State> {
checked={automaticDarkModeEnabled}
label={__('Automatic dark mode')}
/>
<Form>
<h3>{__('From: ')}</h3>
{automaticDarkModeEnabled && (
<fieldset-group class="fieldset-group--smushed">
<FormField
type="select"
name="automatic_dark_mode_range"
disabled={!automaticDarkModeEnabled}
onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
value={darkModeTimes.from.hour}
label={__('Hours:')}
label={__('From')}
>
{startHours.map(time => (
<option key={time} value={time}>
@ -472,30 +468,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
))}
</FormField>
<FormField
label={__('minutes')}
type="select"
name="automatic_dark_mode_range"
disabled={!automaticDarkModeEnabled}
onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'min' })}
value={darkModeTimes.from.min}
>
{enabledMinutes.map(time => (
<option key={time} value={time}>
{time}
</option>
))}
</FormField>
</fieldset-group>
</Form>
<Form>
<h3>{__('To: ')}</h3>
<fieldset-group class="fieldset-group--smushed">
<FormField
type="select"
name="automatic_dark_mode_range"
disabled={!automaticDarkModeEnabled}
label={__('Hours:')}
label={__('To')}
onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
value={darkModeTimes.to.hour}
>
@ -505,22 +480,8 @@ class SettingsPage extends React.PureComponent<Props, State> {
</option>
))}
</FormField>
<FormField
label={__('minutes')}
type="select"
name="automatic_dark_mode_range"
disabled={!automaticDarkModeEnabled}
onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'min' })}
value={darkModeTimes.to.min}
>
{enabledMinutes.map(time => (
<option key={time} value={time}>
{time}
</option>
))}
</FormField>
</fieldset-group>
</Form>
)}
</fieldset-section>
</Form>
</section>

View file

@ -118,8 +118,9 @@ fieldset-group {
width: auto;
margin-bottom: 0;
&:first-of-type {
input {
&:first-child {
input,
select {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;