[PE mobile] Refactoring slide settings

This commit is contained in:
JuliaSvinareva 2021-01-18 11:50:11 +03:00
parent 26a4e263cb
commit 3b0b553e59

View file

@ -1,6 +1,6 @@
import React, {Fragment, useState} from 'react'; import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell} from 'framework7-react'; import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range} from 'framework7-react';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
// import {Device} from '../../../../../common/mobile/utils/device'; // import {Device} from '../../../../../common/mobile/utils/device';
@ -284,16 +284,17 @@ const PageTransition = props => {
<Toggle checked={isDelay} onToggleChange={() => {props.onDelayCheck(!isDelay, _effectDelay)}} /> <Toggle checked={isDelay} onToggleChange={() => {props.onDelayCheck(!isDelay, _effectDelay)}} />
</ListItem> </ListItem>
<ListItem> <ListItem>
<ListItemCell className="flex-shrink-3"> <div slot='inner' style={{width: '100%'}}>
<input type="range" className="range-slider-delay" min="0" max="300" value={stateRange} step="1" <Range min={0} max={300} step={1}
onChange={(e) => { value={stateRange}
changeRange(e.target.value); disabled={!isDelay}
props.onDelay(stateRange); onRangeChange={(value) => {changeRange(value)}}
}} disabled={!isDelay} /> onRangeChanged={(value) => {props.onDelay(value)}}
</ListItemCell> ></Range>
<ListItemCell className="width-auto flex-shrink-0"> </div>
<span>{stateRange} {_t.textSec}</span> <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
</ListItemCell> {stateRange + ' ' + _t.textSec}
</div>
</ListItem> </ListItem>
</List> </List>
<List> <List>