Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add sorts #165

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Add sorts #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2ca6f44
add sort ascending
johnbister Nov 29, 2022
b4d3367
add sort descending
johnbister Nov 29, 2022
eb2e703
add sort remove
johnbister Nov 29, 2022
335b9a6
fix sort remove
johnbister Dec 1, 2022
2454a1f
Merge branch 'main' into add-sorts
johnbister Dec 1, 2022
e1cd390
merge main
Dec 20, 2022
f9ebd7b
changes to rotation css
Dec 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions example/src/components/OperationsSection/OperationsSection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,9 @@ const OperationsSection = () => {
const [sendAltAnimating, setSendAltAnimating] = useState(false)
const [sendAltFilledAnimating, setSendAltFilledAnimating] = useState(false)
const [sendFilledAnimating, setSendFilledAnimating] = useState(false)
const [sortAscendingAnimating, setSortAscendingAnimating] = useState(false)
const [sortDescendingAnimating, setSortDescendingAnimating] = useState(false)
const [sortRemoveAnimating, setSortRemoveAnimating] = useState(false)
const [tagAnimating, setTagAnimating] = useState(false)
const [tagEditAnimating, setTagEditAnimating] = useState(false)
const [tagExportAnimating, setTagExportAnimating] = useState(false)
Expand Down Expand Up @@ -769,6 +772,36 @@ const OperationsSection = () => {
isAnimating={sendFilledAnimating}
size={32} />
</li>
<li
className='icon-tile'
onMouseEnter={() => setSortAscendingAnimating(true)}
onMouseLeave={() => setSortAscendingAnimating(false)}
>
<h3>Sort ascending</h3>
Comment on lines +775 to +780
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feel like you should consider creating an IconTile component so if you ever need to change the structure, you won’t need to replace all these <h3>s. Probably feels pretty minor for now, but could come in handy down the road if you only need to make the changes in one place instead of for each instance.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree 110%! It's something I've planned on fixing but haven't gotten to yet. I thought I had an issue open for it but I didn't, so I'll make one now!

<icons.SortAscendingMotion
isAnimating={sortAscendingAnimating}
size={32} />
</li>
<li
className='icon-tile'
onMouseEnter={() => setSortDescendingAnimating(true)}
onMouseLeave={() => setSortDescendingAnimating(false)}
>
<h3>Sort descending</h3>
<icons.SortDescendingMotion
isAnimating={sortDescendingAnimating}
size={32} />
</li>
<li
className='icon-tile'
onMouseEnter={() => setSortRemoveAnimating(true)}
onMouseLeave={() => setSortRemoveAnimating(false)}
>
<h3>Sort remove</h3>
<icons.SortRemoveMotion
isAnimating={sortRemoveAnimating}
size={32} />
</li>
<li className='icon-tile'
onMouseEnter={() => setTagAnimating(true)}
onMouseLeave={() => setTagAnimating(false)}
Expand Down
47 changes: 47 additions & 0 deletions src/components/Operations/SortAscendingMotion/SortAscendingMotion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React, { useRef, useState, useEffect } from 'react'
import styles from './sort-ascending--motion.module.scss'

const SortAscendingMotion = (props) => {
const iconRef = useRef(null)
const [isAnimating, setIsAnimating] = useState(props.isAnimating)

let iconStyles = {
width: props.size,
height: props.size
}

React.useEffect(() => {
setIsAnimating(props.isAnimating)
}, [props.isAnimating])

const shouldAnimate = isAnimating ? styles.isAnimating : ''

return (
<div ref={iconRef} className={`${shouldAnimate}`}>
<svg
style={iconStyles}
viewBox='0 0 32 32'
className={styles.SortAscendingMotion}
>
<title>Sort Ascending</title>
<g className={styles.SortAscendingArrow}>
<path d="M18,22l1.4-1.4l3.6,3.6V4h2v20.2l3.6-3.6L30,22l-6,6L18,22z" />
</g>
<g className={styles.SortAscendingShaft}>
<path d="M23,24.2V4h2v20.2H23z M2,18h14v2H2V18z M6,12h10v2H6V12z M10,6h6v2h-6V6z" />
</g>
<g className={styles.SortAscendingLine1}>
<path d="M10,6h6v2h-6V6z" />
</g>
<g className={styles.SortAscendingLine2}>
<path d="M6,12h10v2H6V12z" />
</g>
<g className={styles.SortAscendingLine3}>
<path d="M2,18h14v2H2V18z" />
</g>
</svg>
</div>
)
}

export default SortAscendingMotion
2 changes: 2 additions & 0 deletions src/components/Operations/SortAscendingMotion/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import SortAscendingMotion from './SortAscendingMotion'
export default SortAscendingMotion
97 changes: 97 additions & 0 deletions src/components/Operations/SortAscendingMotion/sort-ascending--motion.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
@keyframes sort-ascending-arrow {
0% {
transform: translatey(0px);
}
10% {
transform: translatey(4px);
}
20% {
transform: translatey(0px);
}
100% {
transform: translatey(0px);
}
}

@keyframes sort-ascending-line1 {
0% {
transform: translateX(0px);
}
6% {
transform: translateX(-2px);
}
12% {
transform: translateX(0px);
}
100% {
transform: translateX(0px);
}
}

@keyframes sort-ascending-line2 {
4% {
transform: translateX(0px);
}
10% {
transform: translateX(-2px);
}
16% {
transform: translateX(0px);
}
100% {
transform: translateX(0px);
}
}

@keyframes sort-ascending-line3 {
8% {
transform: translateX(0px);
}
14% {
transform: translateX(-2px);
}
20% {
transform: translateX(0px);
}
100% {
transform: translateX(0px);
}
}


.SortAscendingArrow {
will-change: transform;
}

.isAnimating {
.SortAscendingArrow {
animation: sort-ascending-arrow infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s;
}
}

.SortAscendingLine1,
.SortAscendingLine2,
.SortAscendingLine3 {
will-change: transform;
transform-origin: 1rem 0rem;
}

.isAnimating {
.SortAscendingLine1 {
animation: sort-ascending-line1 infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s;
}
}

.isAnimating {
.SortAscendingLine2 {
animation: sort-ascending-line2 infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s;
}
}

.isAnimating {
.SortAscendingLine3 {
animation: sort-ascending-line3 infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s;
}
}


47 changes: 47 additions & 0 deletions src/components/Operations/SortDescendingMotion/SortDescendingMotion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React, { useRef, useState, useEffect } from 'react'
import styles from './sort-descending--motion.module.scss'

const SortDescendingMotion = (props) => {
const iconRef = useRef(null)
const [isAnimating, setIsAnimating] = useState(props.isAnimating)

let iconStyles = {
width: props.size,
height: props.size
}

React.useEffect(() => {
setIsAnimating(props.isAnimating)
}, [props.isAnimating])

const shouldAnimate = isAnimating ? styles.isAnimating : ''

return (
<div ref={iconRef} className={`${shouldAnimate}`}>
<svg
style={iconStyles}
viewBox='0 0 32 32'
className={styles.SortDescendingMotion}
>
<title>Sort descending</title>
<g className={styles.SortDescendingArrow}>
<path d="M18,22l1.4-1.4l3.6,3.6V4h2v20.2l3.6-3.6L30,22l-6,6L18,22z" />
</g>
<g className={styles.SortDescendingShaft}>
<path d="M23,24.2V4h2v20.2H23z M10,18h6v2h-6V18z M6,12h10v2H6V12z M2,6h14v2H2V6z" />
</g>
<g className={styles.SortDescendingLine1}>
<path d="M2,6h14v2H2V6z" />
</g>
<g className={styles.SortDescendingLine2}>
<path d="M6,12h10v2H6V12z" />
</g>
<g className={styles.SortDescendingLine3}>
<path d="M10,18h6v2h-6V18z" />
</g>
</svg>
</div>
)
}

export default SortDescendingMotion
2 changes: 2 additions & 0 deletions src/components/Operations/SortDescendingMotion/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import SortDescendingMotion from './SortDescendingMotion'
export default SortDescendingMotion
97 changes: 97 additions & 0 deletions src/components/Operations/SortDescendingMotion/sort-descending--motion.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
@keyframes sort-descending-arrow {
0% {
transform: translatey(0px);
}
10% {
transform: translatey(4px);
}
20% {
transform: translatey(0px);
}
100% {
transform: translatey(0px);
}
}

@keyframes sort-descending-line1 {
0% {
transform: translateX(0px);
}
6% {
transform: translateX(-2px);
}
12% {
transform: translateX(0px);
}
100% {
transform: translateX(0px);
}
}

@keyframes sort-descending-line2 {
4% {
transform: translateX(0px);
}
10% {
transform: translateX(-2px);
}
16% {
transform: translateX(0px);
}
100% {
transform: translateX(0px);
}
}

@keyframes sort-descending-line3 {
8% {
transform: translateX(0px);
}
14% {
transform: translateX(-2px);
}
20% {
transform: translateX(0px);
}
100% {
transform: translateX(0px);
}
}


.SortDescendingArrow {
will-change: transform;
}

.isAnimating {
.SortDescendingArrow {
animation: sort-descending-arrow infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s;
}
}

.SortDescendingLine1,
.SortDescendingLine2,
.SortDescendingLine3 {
will-change: transform;
transform-origin: 1rem 0rem;
}

.isAnimating {
.SortDescendingLine1 {
animation: sort-descending-line1 infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s;
}
}

.isAnimating {
.SortDescendingLine2 {
animation: sort-descending-line2 infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s;
}
}

.isAnimating {
.SortDescendingLine3 {
animation: sort-descending-line3 infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s;
}
}


50 changes: 50 additions & 0 deletions src/components/Operations/SortRemoveMotion/SortRemoveMotion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React, { useRef, useState, useEffect } from 'react'
import styles from './sort-remove--motion.module.scss'

const SortRemoveMotion = (props) => {
const iconRef = useRef(null)
const [isAnimating, setIsAnimating] = useState(props.isAnimating)

let iconStyles = {
width: props.size,
height: props.size
}

React.useEffect(() => {
setIsAnimating(props.isAnimating)
}, [props.isAnimating])

const shouldAnimate = isAnimating ? styles.isAnimating : ''

return (
<div ref={iconRef} className={`${shouldAnimate}`}>
<svg
style={iconStyles}
viewBox='0 0 32 32'
className={styles.SortRemoveMotion}
>
<title>Sort remove</title>
<g className={styles.SortRemoveShaft}>
<path d="M10,18h6v2h-6V18z M6,12h10v2H6V12z M9,6h7v2H9V6z" />
</g>
<g className={styles.SortRemoveVertical}>
<path d="M26,22l0-5.1l-2,0l0,5.1v2v5.1h2V24L26,22z" />
</g>
<g className={styles.SortRemoveHorizontal}>
<path d="M31.1,24l0-2L26,22l-2,0h-5.1v2H24h2L31.1,24z" />
</g>
<g className={styles.SortRemoveLine1}>
<path d="M2,6h7.6v2H2V6z" />
</g>
<g className={styles.SortRemoveLine2}>
<path d="M6,12h10v2H6V12z" />
</g>
<g className={styles.SortRemoveLine3}>
<path d="M10,18h6v2h-6V18z" />
</g>
</svg>
</div>
)
}

export default SortRemoveMotion
2 changes: 2 additions & 0 deletions src/components/Operations/SortRemoveMotion/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import SortRemoveMotion from './SortRemoveMotion'
export default SortRemoveMotion
Loading