Choose times for Automatic Dark Mode #2747
3 changed files with 32 additions and 74 deletions
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue