Tochka
/
legacy
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add fast buttons

This commit is contained in:
b1ek 2023-05-13 13:50:39 +10:00
parent 5dd5ae03c1
commit 2b41f970ef
Signed by: blek
GPG Key ID: 14546221E3595D0C
5 changed files with 51 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pairent_frontend_react/public/images/icons/caret-double-blue.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="royalblue" viewBox="0 0 16 16"><path fill="royalblue" fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/><path fill="royalblue" fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 439 B

4
pairent_frontend_react/public/images/icons/caret-double.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
<path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 450 B

3
pairent_frontend_react/public/images/icons/dots.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 275 B

2
pairent_frontend_react/src/components/FavoritesApartamentsList/index.jsx
View File

@ -52,7 +52,7 @@ const FavoritesApartamentsList = () => {
<h1 style={{textAlign: 'center'}}>Идет загрузка...</h1>
}
<ApartmentsList list={apartamentsFavorites}/>
<Pagination page={page} onChange={changePage} onViewAll={viewAll} viewAllButton={true} pages={totalPages} />
<Pagination value={page} onChange={changePage} onViewAll={viewAll} viewAllButton={true} pages={totalPages} />
</>
);
};

49
pairent_frontend_react/src/components/UI/Pagination/index.jsx
View File

@ -1,6 +1,11 @@
import React, { useState } from 'react';
import styled from 'styled-components';
import SVGIcon from '../Icon/SVGIcon';
import ISVGIcon from '../Icon/SVGIcon';
const SVGIcon = styled(ISVGIcon)`
margin: 0;
transform: translateY(2px);
`;
const PageButtonContainer = styled.div`
margin: 24px auto;
@ -39,6 +44,20 @@ const PageButton = styled.button`
}
`;
const FastButton = styled(PageButton)`
background: url(/images/icons/dots.svg) no-repeat;
background-position: center;
background-size: 20px;
transform: translateY(-5px);
&:hover, &:active {
background: url(/images/icons/caret-double-blue.svg) no-repeat;
background-position: center;
background-size: 14px;
transform: translateY(-5px);
}
`;
const range = (start, stop) => {
if (stop < start) throw 'Stop value can\'t be smaller than start value.';
@ -88,6 +107,10 @@ class Pagination extends React.Component {
}
updateValue(new_val) {
if (new_val < 0) new_val = 0;
if (new_val > this.props.pages)
new_val = this.props.pages;
this.props.onChange(new_val);
if (this.value_controlled)
return;
@ -109,8 +132,8 @@ class Pagination extends React.Component {
{
this.props.sideButtons ?
<PageButton>
<SVGIcon style={{margin:0, transform:'rotate(180deg) translateY(-2px)'}} width='16' height='16' src='/images/icons/caret-right.svg' />
<PageButton onClick={() => this.updateValue(value - 1)}>
<SVGIcon width='16' height='16' style={{ transform:'rotate(180deg) translateY(-2px)' }} src='/images/icons/caret-right.svg' />
</PageButton>
: null
}
@ -120,8 +143,20 @@ class Pagination extends React.Component {
if ( !( i == 0 | i == pages - 1) )
if ( i < value - 2 | i > value + 2 ) {
if ( i == value + 3 | i == value - 3 ) {
return <PageButton>...</PageButton>
if ( i == value - 3 | i == value + 3 ) {
return (
<FastButton
style={{transform: i == value - 3 ? 'rotate(180deg) translateY(5px)' : ''}}
onClick={() => {
if (i == value - 3) {
this.updateValue(value - 3);
} else
this.updateValue(value + 3);
}}
>
</FastButton>
);
}
return null;
}
@ -132,8 +167,8 @@ class Pagination extends React.Component {
{
this.props.sideButtons ?
<PageButton>
<SVGIcon style={{margin:0, transform: 'translateY(2px)'}} width='16' height='16' src='/images/icons/caret-right.svg' />
<PageButton onClick={() => this.updateValue(value + 1)}>
<SVGIcon width='16' height='16' src='/images/icons/caret-right.svg' />
</PageButton>
: null
}