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

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
Conversation 4 Commits 5 Files changed 7 +32 -74
3 changed files with 32 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 354d8be3a0 - Show all commits

54
src/ui/component/common/form-components/form-field-price.jsx
View file

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

47
src/ui/page/settings/view.jsx
View file

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

5
src/ui/scss/component/_form-field.scss
View file

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