From 1890f70477f2490bf14946beb46c51d33b48585e Mon Sep 17 00:00:00 2001 From: Katherina Marcenko <45818654+KatvonRivia@users.noreply.github.com> Date: Mon, 2 Mar 2020 17:09:05 +0100 Subject: [PATCH] feat(animation): add framer motion to layer-selector (#273) * feat(layer-selector): add new layer selector * style(layer-selector): use emCalc * refactor(layer-selector): change from span to button, rename * refactor(styles): remove styles * refactor(font): move @font-face to main stylus file * refactor(layer-selector): rename variable --- package-lock.json | 99 ++++++++++++++++++- package.json | 1 + src/scripts/components/app/app.styl | 7 ++ src/scripts/components/app/app.tsx | 13 +-- .../layer-selector/layer-selector.styl | 12 +-- .../layer-selector/layer-selector.tsx | 78 +++++++++------ .../components/navigation/navigation.styl | 6 +- 7 files changed, 165 insertions(+), 51 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3d58e4f9c..f06f214d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -92,6 +92,21 @@ } } }, + "@emotion/is-prop-valid": { + "version": "0.8.7", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.7.tgz", + "integrity": "sha512-OPkKzUeiid0vEKjZqnGcy2mzxjIlCffin+L2C02pdz/bVlt5zZZE2VzO0D3XOPnH0NEeF21QNKSXiZphjr4xiQ==", + "optional": true, + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "@formatjs/intl-displaynames": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-1.2.0.tgz", @@ -134,6 +149,23 @@ "resolved": "https://registry.npmjs.org/@formatjs/macro/-/macro-0.2.6.tgz", "integrity": "sha512-DfdnLJf8+PwLHzJECZ1Xfa8+sI9akQnUuLN2UdkaExTQmlY0Vs36rMzEP0JoVDBMk+KdQbJNt72rPeZkBNcKWg==" }, + "@popmotion/easing": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@popmotion/easing/-/easing-1.0.2.tgz", + "integrity": "sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw==" + }, + "@popmotion/popcorn": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/@popmotion/popcorn/-/popcorn-0.4.4.tgz", + "integrity": "sha512-jYO/8319fKoNLMlY4ZJPiPu8Ea8occYwRZhxpaNn/kZsK4QG2E7XFlXZMJBsTWDw7I1i0uaqyC4zn1nwEezLzg==", + "requires": { + "@popmotion/easing": "^1.0.1", + "framesync": "^4.0.1", + "hey-listen": "^1.0.8", + "style-value-types": "^3.1.7", + "tslib": "^1.10.0" + } + }, "@sindresorhus/is": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz", @@ -4748,6 +4780,31 @@ "map-cache": "^0.2.2" } }, + "framer-motion": { + "version": "1.8.4", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-1.8.4.tgz", + "integrity": "sha512-MMtJ3m0UpSb+val+aL8snz57p47LJS8lBSzvybhXjJgQHpufTZEzbp62eXNVdBlCHnC02J5+NmHRz4AAN6J9Qg==", + "requires": { + "@emotion/is-prop-valid": "^0.8.2", + "@popmotion/easing": "^1.0.2", + "@popmotion/popcorn": "^0.4.2", + "framesync": "^4.0.4", + "hey-listen": "^1.0.8", + "popmotion": "9.0.0-beta-8", + "style-value-types": "^3.1.6", + "stylefire": "^7.0.2", + "tslib": "^1.10.0" + } + }, + "framesync": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/framesync/-/framesync-4.0.4.tgz", + "integrity": "sha512-mdP0WvVHe0/qA62KG2LFUAOiWLng5GLpscRlwzBxu2VXOp6B8hNs5C5XlFigsMgrfDrr2YbqTsgdWZTc4RXRMQ==", + "requires": { + "hey-listen": "^1.0.8", + "tslib": "^1.10.0" + } + }, "fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -5653,6 +5710,11 @@ "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==", "dev": true }, + "hey-listen": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", + "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" + }, "history": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", @@ -8898,6 +8960,19 @@ } } }, + "popmotion": { + "version": "9.0.0-beta-8", + "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.0.0-beta-8.tgz", + "integrity": "sha512-6eQzqursPvnP7ePvdfPeY4wFHmS3OLzNP8rJRvmfFfEIfpFqrQgLsM50Gd9AOvGKJtYJOFknNG+dsnzCpgIdAA==", + "requires": { + "@popmotion/easing": "^1.0.1", + "@popmotion/popcorn": "^0.4.2", + "framesync": "^4.0.4", + "hey-listen": "^1.0.8", + "style-value-types": "^3.1.6", + "tslib": "^1.10.0" + } + }, "portfinder": { "version": "1.0.25", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz", @@ -11510,6 +11585,27 @@ } } }, + "style-value-types": { + "version": "3.1.7", + "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-3.1.7.tgz", + "integrity": "sha512-jPaG5HcAPs3vetSwOJozrBXxuHo9tjZVnbRyBjxqb00c2saIoeuBJc1/2MtvB8eRZy41u/BBDH0CpfzWixftKg==", + "requires": { + "hey-listen": "^1.0.8", + "tslib": "^1.10.0" + } + }, + "stylefire": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/stylefire/-/stylefire-7.0.2.tgz", + "integrity": "sha512-LFIBP6fIA+EMqLSvM4V6zLa+O/iAcHoNJVuXkkZ5G8+T+Pd3KaQLqgxrpkeo1bwWQHqzgab8U3V3gudO231fZA==", + "requires": { + "@popmotion/popcorn": "^0.4.4", + "framesync": "^4.0.0", + "hey-listen": "^1.0.8", + "style-value-types": "^3.1.7", + "tslib": "^1.10.0" + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -13801,8 +13897,7 @@ "tslib": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz", - "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==", - "dev": true + "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==" }, "tsutils": { "version": "3.17.1", diff --git a/package.json b/package.json index 5f3909c12..1d0fe854b 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@types/react-router-dom": "^5.1.3", "@types/redux-logger": "^3.0.7", "cesium": "^1.66.0", + "framer-motion": "^1.8.4", "lodash.debounce": "^4.0.8", "react": "^16.12.0", "react-dom": "^16.12.0", diff --git a/src/scripts/components/app/app.styl b/src/scripts/components/app/app.styl index cd049af33..d65f7b373 100644 --- a/src/scripts/components/app/app.styl +++ b/src/scripts/components/app/app.styl @@ -1,11 +1,18 @@ @require '../../../variables.styl' +@font-face + font-style: normal + font-family: NotesEsa + src: url('../../../fonts/NotesEsaReg.otf') + :global(html), :global(body), :global(#app) + overflow: hidden margin: 0 height: 100% .app position: relative + overflow: hidden width: 100% height: 100% background-color: $black diff --git a/src/scripts/components/app/app.tsx b/src/scripts/components/app/app.tsx index 1976f2557..2bcf5f664 100644 --- a/src/scripts/components/app/app.tsx +++ b/src/scripts/components/app/app.tsx @@ -8,7 +8,6 @@ import {HashRouter as Router} from 'react-router-dom'; import rootReducer from '../../reducers/index'; import {languageSelector} from '../../selectors/language'; -import {showLayerSelector} from '../../selectors/show-layer-selector'; import UrlSync from '../url-sync/url-sync'; import LayerLoader from '../layer-loader/layer-loader'; import Init from '../init/init'; @@ -34,7 +33,6 @@ const App: FunctionComponent = () => ( const TranslatedApp: FunctionComponent = () => { const language = useSelector(languageSelector); - const layerSelector = useSelector(showLayerSelector); return ( @@ -43,14 +41,9 @@ const TranslatedApp: FunctionComponent = () => {
- {layerSelector ? ( - - ) : ( - - - - - )} + + + diff --git a/src/scripts/components/layer-selector/layer-selector.styl b/src/scripts/components/layer-selector/layer-selector.styl index 682adf5c0..ca4e09d38 100644 --- a/src/scripts/components/layer-selector/layer-selector.styl +++ b/src/scripts/components/layer-selector/layer-selector.styl @@ -1,22 +1,20 @@ @require '../../../variables.styl' -@font-face - font-style: normal - font-family: NotesEsa - src: url('../../../fonts/NotesEsaReg.otf') - .layerSelector position: absolute top: 0 right: 0 - display: flex - flex-direction: column min-width: emCalc(300px) max-width: emCalc(500px) width: 33% height: 100% background-color: $darkGrey2 +.content + display: flex + flex-direction: column + height: 100% + .header display: flex justify-content: space-between diff --git a/src/scripts/components/layer-selector/layer-selector.tsx b/src/scripts/components/layer-selector/layer-selector.tsx index 5f008fdc2..a2ac85678 100644 --- a/src/scripts/components/layer-selector/layer-selector.tsx +++ b/src/scripts/components/layer-selector/layer-selector.tsx @@ -1,6 +1,8 @@ import React, {FunctionComponent, useState} from 'react'; import {useDispatch, useSelector} from 'react-redux'; import {FormattedMessage} from 'react-intl'; +import {motion, AnimatePresence} from 'framer-motion'; +import {showLayerSelector as showLayerSelectorSelector} from '../../selectors/show-layer-selector'; import Button from '../button/button'; import {CloseIcon} from '../icons/close-icon'; @@ -14,6 +16,7 @@ import styles from './layer-selector.styl'; const LayerSelector: FunctionComponent = () => { const dispatch = useDispatch(); const layers = useSelector(layersSelector); + const showLayerSelector = useSelector(showLayerSelectorSelector); const [selectedMainId, setSelectedMainId] = useState('clouds'); const [selectedCompareId, setSelectedCompareId] = useState(); const selectedIds = [selectedMainId, selectedCompareId].filter( @@ -25,37 +28,50 @@ const LayerSelector: FunctionComponent = () => { ); return ( -
-
-

- -

-
- {selectedMainLayer && ( - setSelectedMainId(null)} - /> - )} - {selectedCompareLayer && ( - setSelectedCompareId(null)} - /> - )} - setSelectedMainId(layerId)} - onCompareSelect={layerId => setSelectedCompareId(layerId)} - /> -
+ + {showLayerSelector ? ( + +
+
+

+ +

+
+ {selectedMainLayer && ( + setSelectedMainId(null)} + /> + )} + {selectedCompareLayer && ( + setSelectedCompareId(null)} + /> + )} + setSelectedMainId(layerId)} + onCompareSelect={layerId => setSelectedCompareId(layerId)} + /> +
+ + ) : null} + ); }; diff --git a/src/scripts/components/navigation/navigation.styl b/src/scripts/components/navigation/navigation.styl index 306bfec2c..dc8698146 100644 --- a/src/scripts/components/navigation/navigation.styl +++ b/src/scripts/components/navigation/navigation.styl @@ -7,5 +7,9 @@ display: flex .button - &:not(:first-child) + font-size: emCalc(18px) + font-family: NotesEsa + line-height: emCalc(22px) + + .button, &:not(:first-child) padding-left: emCalc(30px)