Merge pull request #950 from ONLYOFFICE/feature/Bug_47151
Feature/bug 47151
This commit is contained in:
commit
8562f46186
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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}/>
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue