s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

filter icon which rotate init

Browse Source
This commit is contained in:
mattyl006 2022-11-09 19:19:13 +01:00
parent a47fd25c1f
commit 4334e4dfcc
5 changed files with 60 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/filter_direction.svg
View File

@ -1,6 +1,5 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="0.5" x2="10" y2="0.5" stroke="#343434"/>
<line y1="9.5" x2="4" y2="9.5" stroke="#343434"/>
<line y1="6.5" x2="6" y2="6.5" stroke="#343434"/>
<line y1="3.5" x2="8" y2="3.5" stroke="#343434"/>
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="7" x2="4" y2="7" stroke="#343434" stroke-width="2"/>
<line y1="4" x2="6" y2="4" stroke="#343434" stroke-width="2"/>
<line y1="1" x2="8" y2="1" stroke="#343434" stroke-width="2"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 304 B

After

Width:  |  Height:  |  Size: 288 B

31
src/components/elements/ColumnFilterIcon.js Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import {Svg} from '../../utils/containers';
import arrow from '../../assets/arrow.svg';
import filterIco from '../../assets/filter_direction.svg';
import theme from '../../utils/theme';
const ColumnFilterIcon = (props) => {
const renderSecondIcon = () => {
if (props.index === props.active) {
return (
<Svg width='8px' src={filterIco} backgroundColor={theme.colors.dark}
margin='0 0 0 2px' rotate={props.rotateIcon ? '0' : '180deg'}/>
);
} else {
return (
<Svg width='8px' src={arrow} backgroundColor={theme.colors.dark}
margin='0 0 2px 0'/>
);
}
};
return (
<>
<Svg width='8px' rotate='180deg' src={arrow}
backgroundColor={theme.colors.dark} margin='2px 0 0 0'/>
{renderSecondIcon()}
</>
);
};
export default ColumnFilterIcon;

23
src/components/elements/Table.js
View File

@ -1,11 +1,11 @@
import React from 'react';
import {FlexColumn, FlexRow, Grid, Svg} from '../../utils/containers';
import {FlexColumn, FlexRow, Grid} from '../../utils/containers';
import Media from 'react-media';
import theme from '../../utils/theme';
import {ELEMENTS_PER_PAGE} from '../../utils/globals';
import {Body, Medium} from '../../utils/fonts';
import arrow from '../../assets/arrow.svg';
import styled from 'styled-components';
import ColumnFilterIcon from './ColumnFilterIcon';
const Line = styled(FlexRow)`
position: absolute;
@ -20,6 +20,8 @@ const Line = styled(FlexRow)`
const Table = (props) => {
const [, updateState] = React.useState();
const forceUpdate = React.useCallback(() => updateState({}), []);
const [activeIcon, setActiveIcon] = React.useState(null);
const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false);
const mobileRender = () => {
return (
@ -71,7 +73,14 @@ const Table = (props) => {
return (
<FlexRow key={`table-header-${i}`} alignmentX='flex-start' as='td'
onClick={() => {
props.sortByUpdate(elem);
if (activeIcon === i) {
let newRotateActiveIcon = !rotateActiveIcon;
setRotateActiveIcon(newRotateActiveIcon);
} else {
setRotateActiveIcon(false);
}
setActiveIcon(i);
props.sortByUpdate(elem, i);
forceUpdate();
}}>
<Medium textAlign={elem === 'submitter' ? 'left' : 'right'}
@ -80,12 +89,8 @@ const Table = (props) => {
{elem}
</Medium>
{elem !== '#' ?
<>
<Svg width='8px' rotate='180deg' src={arrow}
backgroundColor={theme.colors.dark} margin='2px 0 0 0'/>
<Svg width='8px' src={arrow} backgroundColor={theme.colors.dark}
margin='0 0 2px 0'/>
</> : ''}
<ColumnFilterIcon index={i} active={activeIcon} rotateIcon={rotateActiveIcon}/>
: ''}
</FlexRow>
);
})}

10
src/components/sections/Leaderboard/Leaderboard.js
View File

@ -22,6 +22,8 @@ const Leaderboard = (props) => {
const [whenSorted, setWhenSorted] = React.useState(false);
const [scoreSorted, setScoreSorted] = React.useState(false);
// const [columnIcons, setColumnIcons] = React.useState([]);
React.useEffect(() => {
challengeDataRequest(props.challengeName);
}, [props.challengeName]);
@ -97,19 +99,19 @@ const Leaderboard = (props) => {
break;
case 'entries':
if (entriesSorted) {
newEntries = newEntries.sort((a, b) => a.times - b.times);
newEntries = newEntries.sort((a, b) => b.times - a.times);
setEntriesSorted(false);
} else {
newEntries = newEntries.sort((a, b) => b.times - a.times);
newEntries = newEntries.sort((a, b) => a.times - b.times);
setEntriesSorted(true);
}
break;
case 'when':
if (whenSorted) {
newEntries = newEntries.sort((a, b) => (a.when > b.when) ? 1 : ((b.when > a.when) ? -1 : 0));
newEntries = newEntries.sort((a, b) => (a.when < b.when) ? 1 : ((b.when < a.when) ? -1 : 0));
setWhenSorted(false);
} else {
newEntries = newEntries.sort((a, b) => (a.when < b.when) ? 1 : ((b.when < a.when) ? -1 : 0));
newEntries = newEntries.sort((a, b) => (a.when > b.when) ? 1 : ((b.when > a.when) ? -1 : 0));
setWhenSorted(true);
}
break;

11
src/components/sections/MyEntries.js
View File

@ -69,31 +69,30 @@ const MyEntries = (props) => {
}
const sortByUpdate = (elem) => {
const sortByUpdate = (elem, i) => {
let newEntries = myEntries;
switch (elem) {
case '#':
break;
case 'when':
if (whenSorted) {
newEntries = newEntries.sort((a, b) => (a.when > b.when) ? 1 : ((b.when > a.when) ? -1 : 0));
newEntries = newEntries.sort((a, b) => (a.when < b.when) ? 1 : ((b.when < a.when) ? -1 : 0));
setWhenSorted(false);
} else {
newEntries = newEntries.sort((a, b) => (a.when < b.when) ? 1 : ((b.when < a.when) ? -1 : 0));
newEntries = newEntries.sort((a, b) => (a.when > b.when) ? 1 : ((b.when > a.when) ? -1 : 0));
setWhenSorted(true);
}
break;
default:
if (scoreSorted) {
newEntries = newEntries.sort((a, b) => b.evaluations[elem] - a.evaluations[elem]);
newEntries = newEntries.sort((a, b) => a.evaluations[elem] - b.evaluations[elem]);
setScoreSorted(false);
} else {
newEntries = newEntries.sort((a, b) => a.evaluations[elem] - b.evaluations[elem]);
newEntries = newEntries.sort((a, b) => b.evaluations[elem] - a.evaluations[elem]);
setScoreSorted(true);
}
break;
}
console.log(newEntries);
setMyEntries(newEntries);
};