Merge pull request #950 from ONLYOFFICE/feature/Bug_47151

Feature/bug 47151
This commit is contained in:
maxkadushkin 2021-06-28 19:08:31 +03:00 committed by GitHub
commit 8562f46186
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 21 additions and 10 deletions

View file

@ -258,6 +258,9 @@
flex: 1; flex: 1;
font-size: 17px; font-size: 17px;
margin-left: 5px; margin-left: 5px;
display: flex;
align-items: center;
justify-content: center;
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;
} }

View file

@ -444,6 +444,8 @@
"textInvalidRange": "Invalid cells range", "textInvalidRange": "Invalid cells range",
"txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"", "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
"textFilterOptions": "Filter Options", "textFilterOptions": "Filter Options",
"txtSortLow2High": "Sort Lowest to Highest",
"txtSortHigh2Low": "Sort Highest to Lowest",
"textClearFilter": "Clear Filter", "textClearFilter": "Clear Filter",
"textDeleteFilter": "Delete Filter", "textDeleteFilter": "Delete Filter",
"textSelectAll": "Select All", "textSelectAll": "Select All",

View file

@ -10,7 +10,8 @@ const FilterOptionsController = () => {
const [configFilter, setConfig] = useState(null); const [configFilter, setConfig] = useState(null);
const [listVal, setListValue] = useState([]); const [listVal, setListValue] = useState([]);
const [isValid, setIsValid] = useState(null) const [isValid, setIsValid] = useState(null);
const [checkSort, setCheckSort] = useState(null);
useEffect(() => { useEffect(() => {
function onDocumentReady() { function onDocumentReady() {
@ -36,6 +37,9 @@ const FilterOptionsController = () => {
setConfig(config); setConfig(config);
setClearDisable(config); setClearDisable(config);
setCheckSort((config.asc_getSortState() === Asc.c_oAscSortOptions.Ascending ? 'down' : '') ||
(config.asc_getSortState() === Asc.c_oAscSortOptions.Descending ? 'up' : ''));
if (Device.phone) { if (Device.phone) {
f7.sheet.open('.picker__sheet'); f7.sheet.open('.picker__sheet');
} else { } else {
@ -128,7 +132,7 @@ const FilterOptionsController = () => {
}; };
return ( return (
<FilterView onSort={onSort} listVal={listVal} isValid={isValid} onUpdateCell={onUpdateCell} <FilterView onSort={onSort} listVal={listVal} checkSort={checkSort} isValid={isValid} onUpdateCell={onUpdateCell}
onDeleteFilter={onDeleteFilter} onClearFilter={onClearFilter}/> onDeleteFilter={onDeleteFilter} onClearFilter={onClearFilter}/>
) )
}; };

View file

@ -299,12 +299,12 @@
&.sortdown { &.sortdown {
width: 22px; width: 22px;
height: 22px; height: 22px;
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}</style><polygon class="st0" points="-230 256.4 -230.7 255.7 -233 258.1 -233 242 -234 242 -234 258.1 -236.3 255.7 -237 256.4 -233.5 260 -233.5 260 -233.5 260 "/><path class="st0" d="M-226 249.55L-223.1 242h1.08l3.09 7.55h-1.14l-0.88-2.29h-3.16l-0.83 2.29H-226zM-223.82 246.45h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-223.82 246.45z"/><path class="st0" d="M-225.93 259v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21v-0.89h5.41v0.89l-4.24 5.24 -0.46 0.53h4.82V259H-225.93z"/></svg>'); .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}</style><polygon class="st0" points="-230 256.4 -230.7 255.7 -233 258.1 -233 242 -234 242 -234 258.1 -236.3 255.7 -237 256.4 -233.5 260 -233.5 260 -233.5 260 "/><path class="st0" d="M-226 249.55L-223.1 242h1.08l3.09 7.55h-1.14l-0.88-2.29h-3.16l-0.83 2.29H-226zM-223.82 246.45h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-223.82 246.45z"/><path class="st0" d="M-225.93 259v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21v-0.89h5.41v0.89l-4.24 5.24 -0.46 0.53h4.82V259H-225.93z"/></svg>');
} }
&.sortup { &.sortup {
width: 22px; width: 22px;
height: 22px; height: 22px;
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}}</style><polygon class="st0" points="-233.5 242 -233.5 242 -233.5 242 -237 245.6 -236.3 246.3 -234 243.9 -234 260 -233 260 -233 243.9 -230.7 246.3 -230 245.6 "/><path class="st0" d="M-226.53 260l2.9-7.55h1.08L-219.47 260h-1.14l-0.88-2.29h-3.16L-225.47 260H-226.53zM-224.36 256.9h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-224.36 256.9z"/><path class="st0" d="M-225.97 250.55v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21V243h5.41v0.89l-4.24 5.24 -0.46 0.53H-220v0.89H-225.97z"/></svg>'); .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}}</style><polygon class="st0" points="-233.5 242 -233.5 242 -233.5 242 -237 245.6 -236.3 246.3 -234 243.9 -234 260 -233 260 -233 243.9 -230.7 246.3 -230 245.6 "/><path class="st0" d="M-226.53 260l2.9-7.55h1.08L-219.47 260h-1.14l-0.88-2.29h-3.16L-225.47 260H-226.53zM-224.36 256.9h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-224.36 256.9z"/><path class="st0" d="M-225.97 250.55v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21V243h5.41v0.89l-4.24 5.24 -0.46 0.53H-220v0.89H-225.97z"/></svg>');
} }
// Formats // Formats

View file

@ -278,12 +278,12 @@
&.sortdown { &.sortdown {
width: 22px; width: 22px;
height: 22px; height: 22px;
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}</style><polygon class="st0" points="-230 256.4 -230.7 255.7 -233 258.1 -233 242 -234 242 -234 258.1 -236.3 255.7 -237 256.4 -233.5 260 -233.5 260 -233.5 260 "/><path class="st0" d="M-226 249.55L-223.1 242h1.08l3.09 7.55h-1.14l-0.88-2.29h-3.16l-0.83 2.29H-226zM-223.82 246.45h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-223.82 246.45z"/><path class="st0" d="M-225.93 259v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21v-0.89h5.41v0.89l-4.24 5.24 -0.46 0.53h4.82V259H-225.93z"/></svg>'); .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}</style><polygon class="st0" points="-230 256.4 -230.7 255.7 -233 258.1 -233 242 -234 242 -234 258.1 -236.3 255.7 -237 256.4 -233.5 260 -233.5 260 -233.5 260 "/><path class="st0" d="M-226 249.55L-223.1 242h1.08l3.09 7.55h-1.14l-0.88-2.29h-3.16l-0.83 2.29H-226zM-223.82 246.45h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-223.82 246.45z"/><path class="st0" d="M-225.93 259v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21v-0.89h5.41v0.89l-4.24 5.24 -0.46 0.53h4.82V259H-225.93z"/></svg>');
} }
&.sortup { &.sortup {
width: 22px; width: 22px;
height: 22px; height: 22px;
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}}</style><polygon class="st0" points="-233.5 242 -233.5 242 -233.5 242 -237 245.6 -236.3 246.3 -234 243.9 -234 260 -233 260 -233 243.9 -230.7 246.3 -230 245.6 "/><path class="st0" d="M-226.53 260l2.9-7.55h1.08L-219.47 260h-1.14l-0.88-2.29h-3.16L-225.47 260H-226.53zM-224.36 256.9h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-224.36 256.9z"/><path class="st0" d="M-225.97 250.55v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21V243h5.41v0.89l-4.24 5.24 -0.46 0.53H-220v0.89H-225.97z"/></svg>'); .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}}</style><polygon class="st0" points="-233.5 242 -233.5 242 -233.5 242 -237 245.6 -236.3 246.3 -234 243.9 -234 260 -233 260 -233 243.9 -230.7 246.3 -230 245.6 "/><path class="st0" d="M-226.53 260l2.9-7.55h1.08L-219.47 260h-1.14l-0.88-2.29h-3.16L-225.47 260H-226.53zM-224.36 256.9h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-224.36 256.9z"/><path class="st0" d="M-225.97 250.55v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21V243h5.41v0.89l-4.24 5.24 -0.46 0.53H-220v0.89H-225.97z"/></svg>');
} }
// Formats // Formats

View file

@ -32,18 +32,20 @@ const FilterOptions = (props) => {
</NavRight> </NavRight>
} }
</Navbar> </Navbar>
<List> <List>
<ListItem className='buttons'> <ListItem className='buttons'>
<Row> <Row>
<a className='button' onClick={() => props.onSort('sortdown')}> <a className={'button' + (props.checkSort === 'down' ? ' active' : '')} onClick={() => props.onSort('sortdown')}>
<Icon slot="media" icon="sortdown" /> <Icon slot="media" icon="sortdown"/>
</a> </a>
<a className='button' onClick={() => props.onSort('sortup')}> <a className={'button' + (props.checkSort === 'up' ? ' active' : '')} onClick={() => props.onSort('sortup')}>
<Icon slot="media" icon="sortup" /> <Icon slot="media" icon="sortup"/>
</a> </a>
</Row> </Row>
</ListItem> </ListItem>
</List> </List>
<List > <List >
<ListButton color="black" className={props.isValid ? 'disabled' : ''} onClick={HandleClearFilter}>{_t.textClearFilter}</ListButton> <ListButton color="black" className={props.isValid ? 'disabled' : ''} onClick={HandleClearFilter}>{_t.textClearFilter}</ListButton>
<ListButton color="red" onClick={() => props.onDeleteFilter()} id="btn-delete-filter">{_t.textDeleteFilter}</ListButton> <ListButton color="red" onClick={() => props.onDeleteFilter()} id="btn-delete-filter">{_t.textDeleteFilter}</ListButton>