From 66ba38d1c6d8391b54c50153f43de69c6b9ee51a Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Tue, 3 Mar 2020 11:44:08 +0000 Subject: [PATCH] 0.2.03A1 --- .editorconfig | 0 .env | 1 + .eslintignore | 0 .eslintrc | 0 .gitignore | 6 - .prettierignore | 0 .prettierrc | 0 .stylelintrc.json | 0 .travis.yml | 0 .umirc.js | 0 .vscode/launch.json | 0 .vsls.json | 0 LICENSE | 0 comty_dev.service | 11 + config/app.settings.js | 0 config/id_rsa.enc | Bin config/keys.js | 0 config/theme.config.js | 0 config/ycore.config.js | 0 dev-server.sh | 53 ++ globals/debug.json | 0 globals/endpoints.js | 0 globals/settings.js | 0 jest.config.js | 0 manifest.json | 0 mock/_utils.js | 0 mock/route.js | 0 package.json | 2 +- public/dark_full_logo.svg | 0 public/dark_logo.svg | 0 public/favicon.ico | Bin public/full_logo.svg | 0 public/logo.svg | 0 service-worker.js | 0 setupTests.js | 0 src/@ycore/libs.js | 0 src/@ycore/libs/comty_ng/pre.js | 0 src/@ycore/libs/control_bar/pre.js | 0 src/@ycore/libs/ycore_sdcp/leagacy.js | 0 src/@ycore/libs/ycore_sdcp/pre.js | 0 src/@ycore/libs/ycore_styles/pre.js | 0 src/@ycore/libs/ycore_styles/ycore_style.scss | 0 src/@ycore/libs/yulio_id/pre.js | 2 +- src/@ycore/ycore_worker.js | 0 src/components/CoreLoader/index.js | 0 src/components/CoreLoader/styles.less | 0 src/components/CustomIcons/index.js | 0 src/components/HeaderSearch/index.js | 0 src/components/HeaderSearch/index.less | 0 src/components/Layout/ChatSider.js | 0 src/components/Layout/ChatSider.less | 0 src/components/Layout/Control.js | 0 src/components/Layout/Control.less | 0 src/components/Layout/Header.js | 0 src/components/Layout/Header.less | 0 src/components/Layout/Menu.js | 0 src/components/Layout/Menu.less | 0 src/components/Layout/Sider.js | 0 src/components/Layout/Sider.less | 0 src/components/Layout/index.js | 0 src/components/Layout/logo.scss | 0 src/components/LikeBtn/index.js | 0 src/components/LikeBtn/index.scss | 0 src/components/Loader/Loader.js | 0 src/components/Loader/Loader.less | 0 src/components/MainFeed/index.js | 0 src/components/MainSidebar/index.js | 0 src/components/MainSidebar/index.less | 0 src/components/MicroHeader/index.js | 0 src/components/MicroHeader/index.less | 0 src/components/Page/Page.js | 0 src/components/Page/Page.less | 0 src/components/Page/package.json | 0 src/components/PageTransition/animations.js | 780 ++++++++++++++++++ src/components/PageTransition/index.js | 80 ++ src/components/PageTransition/presets.js | 552 +++++++++++++ src/components/PageTransition/styles.js | 54 ++ src/components/PostCard/index.js | 0 src/components/PostCard/index.less | 0 src/components/PostCreator/index.js | 0 src/components/PostCreator/index.less | 0 src/components/ScrollBar/index.js | 0 src/components/ScrollBar/index.less | 0 src/components/UserCard/index.js | 0 src/components/UserCard/index.less | 0 src/components/UserProfile/index.js | 0 src/components/UserProfile/styles.less | 0 src/components/YulioID/formstyle.less | 0 src/components/YulioID/index.js | 2 +- src/components/YulioID/index.less | 0 src/components/index.js | 3 +- src/layouts/BaseLayout.js | 0 src/layouts/BaseLayout.less | 0 src/layouts/PrimaryLayout.js | 5 +- src/layouts/PrimaryLayout.less | 10 +- src/layouts/PublicLayout.js | 0 src/layouts/index.js | 0 src/locales/en/messages.json | 0 src/models/app.js | 0 src/pages/$page/index.js | 0 src/pages/$page/index.less | 0 src/pages/404.js | 0 src/pages/404.less | 0 src/pages/about/index.js | 0 src/pages/about/index.less | 0 src/pages/index.js | 0 src/pages/login/index.js | 0 src/pages/login/index.less | 0 src/pages/main/index.js | 0 src/pages/main/index.less | 0 src/pages/s/$search/index.js | 0 src/pages/s/$search/styles.less | 0 src/pages/settings/components/base.js | 0 src/pages/settings/components/notification.js | 0 src/pages/settings/components/security.js | 0 src/pages/settings/index.js | 0 src/pages/settings/style.less | 0 src/services/api.js | 0 src/services/index.js | 0 src/themes/default.less | 0 src/themes/fonty.css | 0 src/themes/index.less | 0 src/themes/light_ng/index.less | 0 src/themes/mixin.less | 0 src/themes/plyr.css | 0 src/themes/vars.less | 0 src/utils/index.js | 0 src/utils/model.js | 0 src/utils/request.js | 0 src/utils/theme.js | 0 tsconfig.json | 0 131 files changed, 1545 insertions(+), 16 deletions(-) mode change 100644 => 100755 .editorconfig create mode 100644 .env mode change 100644 => 100755 .eslintignore mode change 100644 => 100755 .eslintrc mode change 100644 => 100755 .gitignore mode change 100644 => 100755 .prettierignore mode change 100644 => 100755 .prettierrc mode change 100644 => 100755 .stylelintrc.json mode change 100644 => 100755 .travis.yml mode change 100644 => 100755 .umirc.js mode change 100644 => 100755 .vscode/launch.json mode change 100644 => 100755 .vsls.json mode change 100644 => 100755 LICENSE create mode 100755 comty_dev.service mode change 100644 => 100755 config/app.settings.js mode change 100644 => 100755 config/id_rsa.enc mode change 100644 => 100755 config/keys.js mode change 100644 => 100755 config/theme.config.js mode change 100644 => 100755 config/ycore.config.js create mode 100755 dev-server.sh mode change 100644 => 100755 globals/debug.json mode change 100644 => 100755 globals/endpoints.js mode change 100644 => 100755 globals/settings.js mode change 100644 => 100755 jest.config.js mode change 100644 => 100755 manifest.json mode change 100644 => 100755 mock/_utils.js mode change 100644 => 100755 mock/route.js mode change 100644 => 100755 package.json mode change 100644 => 100755 public/dark_full_logo.svg mode change 100644 => 100755 public/dark_logo.svg mode change 100644 => 100755 public/favicon.ico mode change 100644 => 100755 public/full_logo.svg mode change 100644 => 100755 public/logo.svg mode change 100644 => 100755 service-worker.js mode change 100644 => 100755 setupTests.js mode change 100644 => 100755 src/@ycore/libs.js mode change 100644 => 100755 src/@ycore/libs/comty_ng/pre.js mode change 100644 => 100755 src/@ycore/libs/control_bar/pre.js mode change 100644 => 100755 src/@ycore/libs/ycore_sdcp/leagacy.js mode change 100644 => 100755 src/@ycore/libs/ycore_sdcp/pre.js mode change 100644 => 100755 src/@ycore/libs/ycore_styles/pre.js mode change 100644 => 100755 src/@ycore/libs/ycore_styles/ycore_style.scss mode change 100644 => 100755 src/@ycore/libs/yulio_id/pre.js mode change 100644 => 100755 src/@ycore/ycore_worker.js mode change 100644 => 100755 src/components/CoreLoader/index.js mode change 100644 => 100755 src/components/CoreLoader/styles.less mode change 100644 => 100755 src/components/CustomIcons/index.js mode change 100644 => 100755 src/components/HeaderSearch/index.js mode change 100644 => 100755 src/components/HeaderSearch/index.less mode change 100644 => 100755 src/components/Layout/ChatSider.js mode change 100644 => 100755 src/components/Layout/ChatSider.less mode change 100644 => 100755 src/components/Layout/Control.js mode change 100644 => 100755 src/components/Layout/Control.less mode change 100644 => 100755 src/components/Layout/Header.js mode change 100644 => 100755 src/components/Layout/Header.less mode change 100644 => 100755 src/components/Layout/Menu.js mode change 100644 => 100755 src/components/Layout/Menu.less mode change 100644 => 100755 src/components/Layout/Sider.js mode change 100644 => 100755 src/components/Layout/Sider.less mode change 100644 => 100755 src/components/Layout/index.js mode change 100644 => 100755 src/components/Layout/logo.scss mode change 100644 => 100755 src/components/LikeBtn/index.js mode change 100644 => 100755 src/components/LikeBtn/index.scss mode change 100644 => 100755 src/components/Loader/Loader.js mode change 100644 => 100755 src/components/Loader/Loader.less mode change 100644 => 100755 src/components/MainFeed/index.js mode change 100644 => 100755 src/components/MainSidebar/index.js mode change 100644 => 100755 src/components/MainSidebar/index.less mode change 100644 => 100755 src/components/MicroHeader/index.js mode change 100644 => 100755 src/components/MicroHeader/index.less mode change 100644 => 100755 src/components/Page/Page.js mode change 100644 => 100755 src/components/Page/Page.less mode change 100644 => 100755 src/components/Page/package.json create mode 100644 src/components/PageTransition/animations.js create mode 100644 src/components/PageTransition/index.js create mode 100644 src/components/PageTransition/presets.js create mode 100644 src/components/PageTransition/styles.js mode change 100644 => 100755 src/components/PostCard/index.js mode change 100644 => 100755 src/components/PostCard/index.less mode change 100644 => 100755 src/components/PostCreator/index.js mode change 100644 => 100755 src/components/PostCreator/index.less mode change 100644 => 100755 src/components/ScrollBar/index.js mode change 100644 => 100755 src/components/ScrollBar/index.less mode change 100644 => 100755 src/components/UserCard/index.js mode change 100644 => 100755 src/components/UserCard/index.less mode change 100644 => 100755 src/components/UserProfile/index.js mode change 100644 => 100755 src/components/UserProfile/styles.less mode change 100644 => 100755 src/components/YulioID/formstyle.less mode change 100644 => 100755 src/components/YulioID/index.js mode change 100644 => 100755 src/components/YulioID/index.less mode change 100644 => 100755 src/components/index.js mode change 100644 => 100755 src/layouts/BaseLayout.js mode change 100644 => 100755 src/layouts/BaseLayout.less mode change 100644 => 100755 src/layouts/PrimaryLayout.js mode change 100644 => 100755 src/layouts/PrimaryLayout.less mode change 100644 => 100755 src/layouts/PublicLayout.js mode change 100644 => 100755 src/layouts/index.js mode change 100644 => 100755 src/locales/en/messages.json mode change 100644 => 100755 src/models/app.js mode change 100644 => 100755 src/pages/$page/index.js mode change 100644 => 100755 src/pages/$page/index.less mode change 100644 => 100755 src/pages/404.js mode change 100644 => 100755 src/pages/404.less mode change 100644 => 100755 src/pages/about/index.js mode change 100644 => 100755 src/pages/about/index.less mode change 100644 => 100755 src/pages/index.js mode change 100644 => 100755 src/pages/login/index.js mode change 100644 => 100755 src/pages/login/index.less mode change 100644 => 100755 src/pages/main/index.js mode change 100644 => 100755 src/pages/main/index.less mode change 100644 => 100755 src/pages/s/$search/index.js mode change 100644 => 100755 src/pages/s/$search/styles.less mode change 100644 => 100755 src/pages/settings/components/base.js mode change 100644 => 100755 src/pages/settings/components/notification.js mode change 100644 => 100755 src/pages/settings/components/security.js mode change 100644 => 100755 src/pages/settings/index.js mode change 100644 => 100755 src/pages/settings/style.less mode change 100644 => 100755 src/services/api.js mode change 100644 => 100755 src/services/index.js mode change 100644 => 100755 src/themes/default.less mode change 100644 => 100755 src/themes/fonty.css mode change 100644 => 100755 src/themes/index.less mode change 100644 => 100755 src/themes/light_ng/index.less mode change 100644 => 100755 src/themes/mixin.less mode change 100644 => 100755 src/themes/plyr.css mode change 100644 => 100755 src/themes/vars.less mode change 100644 => 100755 src/utils/index.js mode change 100644 => 100755 src/utils/model.js mode change 100644 => 100755 src/utils/request.js mode change 100644 => 100755 src/utils/theme.js mode change 100644 => 100755 tsconfig.json diff --git a/.editorconfig b/.editorconfig old mode 100644 new mode 100755 diff --git a/.env b/.env new file mode 100644 index 00000000..71221ab2 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +UMI_UI=none umi dev \ No newline at end of file diff --git a/.eslintignore b/.eslintignore old mode 100644 new mode 100755 diff --git a/.eslintrc b/.eslintrc old mode 100644 new mode 100755 diff --git a/.gitignore b/.gitignore old mode 100644 new mode 100755 index f10089da..d82d7140 --- a/.gitignore +++ b/.gitignore @@ -22,9 +22,3 @@ package-lock.json src/locales/_build src/locales/**/*.js recover/ - -.env -.env -.env -sockets/rs_develop -src/Untitled-1.txt diff --git a/.prettierignore b/.prettierignore old mode 100644 new mode 100755 diff --git a/.prettierrc b/.prettierrc old mode 100644 new mode 100755 diff --git a/.stylelintrc.json b/.stylelintrc.json old mode 100644 new mode 100755 diff --git a/.travis.yml b/.travis.yml old mode 100644 new mode 100755 diff --git a/.umirc.js b/.umirc.js old mode 100644 new mode 100755 diff --git a/.vscode/launch.json b/.vscode/launch.json old mode 100644 new mode 100755 diff --git a/.vsls.json b/.vsls.json old mode 100644 new mode 100755 diff --git a/LICENSE b/LICENSE old mode 100644 new mode 100755 diff --git a/comty_dev.service b/comty_dev.service new file mode 100755 index 00000000..7ac93caa --- /dev/null +++ b/comty_dev.service @@ -0,0 +1,11 @@ +[Unit] +Description=Comty_Development + +[Service] +ExecStart=npm start +Restart=always +User=root +WorkingDirectory=/ycore/development/comty-development + +[Install] +WantedBy=multi-user.target \ No newline at end of file diff --git a/config/app.settings.js b/config/app.settings.js old mode 100644 new mode 100755 diff --git a/config/id_rsa.enc b/config/id_rsa.enc old mode 100644 new mode 100755 diff --git a/config/keys.js b/config/keys.js old mode 100644 new mode 100755 diff --git a/config/theme.config.js b/config/theme.config.js old mode 100644 new mode 100755 diff --git a/config/ycore.config.js b/config/ycore.config.js old mode 100644 new mode 100755 diff --git a/dev-server.sh b/dev-server.sh new file mode 100755 index 00000000..96241675 --- /dev/null +++ b/dev-server.sh @@ -0,0 +1,53 @@ +#!/bin/sh + +pause(){ + read -p "Press [Enter] key to continue..." fackEnterKey +} + +start_cli_dev(){ + sudo npm start +} + +start_dev(){ + systemctl start comty_dev + echo "Starting dev server..." +} + +stop_dev(){ + systemctl stop comty_dev + echo "Stoping dev server..." +} + + +show_menus() { + clear + echo "~~~~~~~~~~~~~~~~~~~~~" + echo " Development Server " + echo "~~~~~~~~~~~~~~~~~~~~~" + echo "1. Start CLI Server" + echo "2. Start Server" + echo "3. Stop Server" + echo "0. Exit" +} + +read_options(){ + local choice + read -p "Enter choice [ 1 - 3] " choice + case $choice in + 0) exit 0;; + 1) start_cli_dev ;; + 2) start_dev ;; + 3) stop_dev ;; + + *) echo -e "${RED}Error...${STD}" && sleep 2 + esac +} + +trap '' SIGINT SIGQUIT SIGTSTP + +while true +do + + show_menus + read_options +done \ No newline at end of file diff --git a/globals/debug.json b/globals/debug.json old mode 100644 new mode 100755 diff --git a/globals/endpoints.js b/globals/endpoints.js old mode 100644 new mode 100755 diff --git a/globals/settings.js b/globals/settings.js old mode 100644 new mode 100755 diff --git a/jest.config.js b/jest.config.js old mode 100644 new mode 100755 diff --git a/manifest.json b/manifest.json old mode 100644 new mode 100755 diff --git a/mock/_utils.js b/mock/_utils.js old mode 100644 new mode 100755 diff --git a/mock/route.js b/mock/route.js old mode 100644 new mode 100755 diff --git a/package.json b/package.json old mode 100644 new mode 100755 index b9b95a51..14606de4 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "comty-development", "title": "Comty™", "DevBuild": true, - "version": "0.2.02", + "version": "0.2.03", "description": "", "main": "index.js", "author": "RageStudio", diff --git a/public/dark_full_logo.svg b/public/dark_full_logo.svg old mode 100644 new mode 100755 diff --git a/public/dark_logo.svg b/public/dark_logo.svg old mode 100644 new mode 100755 diff --git a/public/favicon.ico b/public/favicon.ico old mode 100644 new mode 100755 diff --git a/public/full_logo.svg b/public/full_logo.svg old mode 100644 new mode 100755 diff --git a/public/logo.svg b/public/logo.svg old mode 100644 new mode 100755 diff --git a/service-worker.js b/service-worker.js old mode 100644 new mode 100755 diff --git a/setupTests.js b/setupTests.js old mode 100644 new mode 100755 diff --git a/src/@ycore/libs.js b/src/@ycore/libs.js old mode 100644 new mode 100755 diff --git a/src/@ycore/libs/comty_ng/pre.js b/src/@ycore/libs/comty_ng/pre.js old mode 100644 new mode 100755 diff --git a/src/@ycore/libs/control_bar/pre.js b/src/@ycore/libs/control_bar/pre.js old mode 100644 new mode 100755 diff --git a/src/@ycore/libs/ycore_sdcp/leagacy.js b/src/@ycore/libs/ycore_sdcp/leagacy.js old mode 100644 new mode 100755 diff --git a/src/@ycore/libs/ycore_sdcp/pre.js b/src/@ycore/libs/ycore_sdcp/pre.js old mode 100644 new mode 100755 diff --git a/src/@ycore/libs/ycore_styles/pre.js b/src/@ycore/libs/ycore_styles/pre.js old mode 100644 new mode 100755 diff --git a/src/@ycore/libs/ycore_styles/ycore_style.scss b/src/@ycore/libs/ycore_styles/ycore_style.scss old mode 100644 new mode 100755 diff --git a/src/@ycore/libs/yulio_id/pre.js b/src/@ycore/libs/yulio_id/pre.js old mode 100644 new mode 100755 index 1303a76d..26d89307 --- a/src/@ycore/libs/yulio_id/pre.js +++ b/src/@ycore/libs/yulio_id/pre.js @@ -138,7 +138,7 @@ export function GetAuth(EncUsername, EncPassword, callback) { }; jquery.ajax(settings) .done(function (response) { - console.log(prefix, 'Server response... Dispathing data to login API...', response); + console.log(prefix, 'Server response... Dispathing data to login API...'); try { var identState = JSON.parse(response)['api_status']; if (identState == 200) { diff --git a/src/@ycore/ycore_worker.js b/src/@ycore/ycore_worker.js old mode 100644 new mode 100755 diff --git a/src/components/CoreLoader/index.js b/src/components/CoreLoader/index.js old mode 100644 new mode 100755 diff --git a/src/components/CoreLoader/styles.less b/src/components/CoreLoader/styles.less old mode 100644 new mode 100755 diff --git a/src/components/CustomIcons/index.js b/src/components/CustomIcons/index.js old mode 100644 new mode 100755 diff --git a/src/components/HeaderSearch/index.js b/src/components/HeaderSearch/index.js old mode 100644 new mode 100755 diff --git a/src/components/HeaderSearch/index.less b/src/components/HeaderSearch/index.less old mode 100644 new mode 100755 diff --git a/src/components/Layout/ChatSider.js b/src/components/Layout/ChatSider.js old mode 100644 new mode 100755 diff --git a/src/components/Layout/ChatSider.less b/src/components/Layout/ChatSider.less old mode 100644 new mode 100755 diff --git a/src/components/Layout/Control.js b/src/components/Layout/Control.js old mode 100644 new mode 100755 diff --git a/src/components/Layout/Control.less b/src/components/Layout/Control.less old mode 100644 new mode 100755 diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js old mode 100644 new mode 100755 diff --git a/src/components/Layout/Header.less b/src/components/Layout/Header.less old mode 100644 new mode 100755 diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js old mode 100644 new mode 100755 diff --git a/src/components/Layout/Menu.less b/src/components/Layout/Menu.less old mode 100644 new mode 100755 diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js old mode 100644 new mode 100755 diff --git a/src/components/Layout/Sider.less b/src/components/Layout/Sider.less old mode 100644 new mode 100755 diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js old mode 100644 new mode 100755 diff --git a/src/components/Layout/logo.scss b/src/components/Layout/logo.scss old mode 100644 new mode 100755 diff --git a/src/components/LikeBtn/index.js b/src/components/LikeBtn/index.js old mode 100644 new mode 100755 diff --git a/src/components/LikeBtn/index.scss b/src/components/LikeBtn/index.scss old mode 100644 new mode 100755 diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js old mode 100644 new mode 100755 diff --git a/src/components/Loader/Loader.less b/src/components/Loader/Loader.less old mode 100644 new mode 100755 diff --git a/src/components/MainFeed/index.js b/src/components/MainFeed/index.js old mode 100644 new mode 100755 diff --git a/src/components/MainSidebar/index.js b/src/components/MainSidebar/index.js old mode 100644 new mode 100755 diff --git a/src/components/MainSidebar/index.less b/src/components/MainSidebar/index.less old mode 100644 new mode 100755 diff --git a/src/components/MicroHeader/index.js b/src/components/MicroHeader/index.js old mode 100644 new mode 100755 diff --git a/src/components/MicroHeader/index.less b/src/components/MicroHeader/index.less old mode 100644 new mode 100755 diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js old mode 100644 new mode 100755 diff --git a/src/components/Page/Page.less b/src/components/Page/Page.less old mode 100644 new mode 100755 diff --git a/src/components/Page/package.json b/src/components/Page/package.json old mode 100644 new mode 100755 diff --git a/src/components/PageTransition/animations.js b/src/components/PageTransition/animations.js new file mode 100644 index 00000000..ec23ade1 --- /dev/null +++ b/src/components/PageTransition/animations.js @@ -0,0 +1,780 @@ +import { keyframes } from 'styled-components'; + +export default { + moveToLeft: { + keyframes: keyframes` + from { } + to { transform: translateX(-100%); } + `, + duration: 600, + timing: 'ease', + fill: 'both' + }, + moveFromLeft: { + keyframes: keyframes` + from { transform: translateX(-100%) }; + `, + duration: 600, + timing: 'ease', + fill: 'both' + }, + moveToRight: { + keyframes: keyframes` + from { } + to { transform: translateX(100%); } + `, + duration: 600, + timing: 'ease', + fill: 'both' + }, + moveFromRight: { + keyframes: keyframes` + from { transform: translateX(100%); } + `, + duration: 600, + timing: 'ease', + fill: 'both' + }, + moveToTop: { + keyframes: keyframes` + from { } + to { transform: translateY(-100%); } + `, + duration: 600, + timing: 'ease', + fill: 'both' + }, + moveFromTop: { + keyframes: keyframes` + from { transform: translateY(-100%); } + `, + duration: 600, + timing: 'ease', + fill: 'both' + }, + moveToBottom: { + keyframes: keyframes` + from { } + to { transform: translateY(100%); } + `, + duration: 600, + timing: 'ease', + fill: 'both' + }, + moveFromBottom: { + keyframes: keyframes` + from { transform: translateY(100%); } + `, + duration: 600, + timing: 'ease', + fill: 'both' + }, + fade: { + keyframes: keyframes` + from { } + to { opacity: 0.3; } + `, + duration: 600, + timing: 'ease', + fill: 'both' + }, + moveToLeftFade: { + keyframes: keyframes` + from { } + to { opacity: 0.3; transform: translateX(-100%); } + `, + duration: 700, + timing: 'ease', + fill: 'both' + }, + moveFromLeftFade: { + keyframes: keyframes` + from { opacity: 0.3; transform: translateX(-100%); } + `, + duration: 700, + timing: 'ease', + fill: 'both' + }, + moveToRightFade: { + keyframes: keyframes` + from { } + to { opacity: 0.3; transform: translateX(100%); } + `, + duration: 700, + timing: 'ease', + fill: 'both' + }, + moveFromRightFade: { + keyframes: keyframes` + from { opacity: 0.3; transform: translateX(100%); } + `, + duration: 700, + timing: 'ease', + fill: 'both' + }, + moveToTopFade: { + keyframes: keyframes` + from { } + to { opacity: 0.3; transform: translateY(-100%); } + `, + duration: 600, + timing: 'ease', + fill: 'both' + }, + moveFromTopFade: { + keyframes: keyframes` + from { opacity: 0.3; transform: translateY(-100%); } + `, + duration: 700, + timing: 'ease', + fill: 'both' + }, + moveToBottomFade: { + keyframes: keyframes` + from { } + to { opacity: 0.3; transform: translateY(100%); } + `, + duration: 700, + timing: 'ease', + fill: 'both' + }, + moveFromBottomFade: { + keyframes: keyframes` + from { opacity: 0.3; transform: translateY(100%); } + `, + duration: 700, + timing: 'ease', + fill: 'both' + }, + scaleDown: { + keyframes: keyframes` + from { } + to { opacity: 0; transform: scale(0.8); } + `, + duration: 700, + timing: 'ease', + fill: 'both' + }, + scaleUp: { + keyframes: keyframes` + from { opacity: 0; transform: scale(0.8); } + `, + duration: 700, + timing: 'ease', + fill: 'both' + }, + scaleUpDown: { + keyframes: keyframes` + from { opacity: 0; transform: scale(1.2); } + `, + duration: 500, + timing: 'ease', + fill: 'both' + }, + scaleDownUp: { + keyframes: keyframes` + from { } + to { opacity: 0; transform: scale(1.2); } + `, + duration: 500, + timing: 'ease', + fill: 'both' + }, + scaleDownCenter: { + keyframes: keyframes` + from { } + to { opacity: 0; transform: scale(0.7); } + `, + duration: 400, + timing: 'ease', + fill: 'both' + }, + scaleUpCenter: { + keyframes: keyframes` + from { opacity: 0; transform: scale(0.7); } + `, + duration: 400, + timing: 'ease', + fill: 'both' + }, + rotateRightSideFirst: { + keyframes: keyframes` + 0% { } + 40% { transform: rotateY(15deg); opacity: 0.8; animation-timing-function: ease-out; } + 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } + `, + duration: 800, + timing: 'ease-in', + fill: 'both', + origin: '0% 50%' + }, + rotateLeftSideFirst: { + keyframes: keyframes` + 0% { } + 40% { transform: rotateY(-15deg); opacity: 0.8; animation-timing-function: ease-out; } + 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } + `, + duration: 800, + timing: 'ease-in', + fill: 'both', + origin: '0% 50%' + }, + rotateTopSideFirst: { + keyframes: keyframes` + 0% { } + 40% { transform: rotateX(15deg); opacity: 0.8; animation-timing-function: ease-out; } + 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } + `, + duration: 800, + timing: 'ease-in', + fill: 'both', + origin: '0% 50%' + }, + rotateBottomSideFirst: { + keyframes: keyframes` + 0% { } + 40% { transform: rotateX(-15deg); opacity: 0.8; animation-timing-function: ease-out; } + 100% {transform: scale(0.8) translateZ(-200px); opacity:0; } + `, + duration: 800, + timing: 'ease-in', + fill: 'both', + origin: '0% 50%' + }, + flipOutRight: { + keyframes: keyframes` + from { } + to { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } + `, + duration: 500, + timing: 'ease-in', + fill: 'both', + origin: '50% 50%' + }, + flipInLeft: { + keyframes: keyframes` + from { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } + `, + duration: 500, + timing: 'ease-out', + fill: 'both', + origin: '50% 50%' + }, + flipOutLeft: { + keyframes: keyframes` + from { } + to { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } + `, + duration: 500, + timing: 'ease-in', + fill: 'both', + origin: '50% 50%' + }, + flipInRight: { + keyframes: keyframes` + from { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } + `, + duration: 500, + timing: 'ease-out', + fill: 'both', + origin: '50% 50%' + }, + flipOutTop: { + keyframes: keyframes` + from { } + to { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } + `, + duration: 500, + timing: 'ease-in', + fill: 'both', + origin: '50% 50%' + }, + flipInBottom: { + keyframes: keyframes` + from { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } + `, + duration: 500, + timing: 'ease-out', + fill: 'both', + origin: '50% 50%' + }, + flipOutBottom: { + keyframes: keyframes` + from { } + to { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } + `, + duration: 500, + timing: 'ease-in', + fill: 'both', + origin: '50% 50%' + }, + flipInTop: { + keyframes: keyframes` + from { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } + `, + duration: 500, + timing: 'ease-out', + fill: 'both', + origin: '50% 50%' + }, + rotateFall: { + keyframes: keyframes` + 0% { transform: rotateZ(0deg); } + 20% { transform: rotateZ(10deg); animation-timing-function: ease-out; } + 40% { transform: rotateZ(17deg); } + 60% { transform: rotateZ(16deg); } + 100% { transform: translateY(100%) rotateZ(17deg); } + `, + duration: 1000, + timing: 'ease-in', + fill: 'both', + origin: '0% 0%' + }, + rotateOutNewspaper: { + keyframes: keyframes` + from { } + to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; } + `, + duration: 500, + timing: 'ease-in', + fill: 'both', + origin: '50% 50%' + }, + rotateInNewspaper: { + keyframes: keyframes` + from { transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; } + `, + duration: 500, + timing: 'ease-out', + fill: 'both', + origin: '50% 50%' + }, + rotatePushLeft: { + keyframes: keyframes` + from { } + to { opacity: 0; transform: rotateY(90deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '0% 50%' + }, + rotatePushRight: { + keyframes: keyframes` + from { } + to { opacity: 0; transform: rotateY(-90deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '100% 50%' + }, + rotatePushTop: { + keyframes: keyframes` + from { } + to { opacity: 0; transform: rotateX(-90deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '50% 0%' + }, + rotatePushBottom: { + keyframes: keyframes` + from { } + to { opacity: 0; transform: rotateX(90deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '50% 100%' + }, + rotatePullRight: { + keyframes: keyframes` + from { opacity: 0; transform: rotateY(-90deg); } + `, + duration: 500, + timing: 'ease', + fill: 'both', + origin: '100% 50%' + }, + rotatePullLeft: { + keyframes: keyframes` + from { opacity: 0; transform: rotateY(90deg); } + `, + duration: 500, + timing: 'ease', + fill: 'both', + origin: '0% 50%' + }, + rotatePullTop: { + keyframes: keyframes` + from { opacity: 0; transform: rotateX(-90deg); } + `, + duration: 500, + timing: 'ease', + fill: 'both', + origin: '50% 0%' + }, + rotatePullBottom: { + keyframes: keyframes` + from { opacity: 0; transform: rotateX(90deg); } + `, + duration: 500, + timing: 'ease', + fill: 'both', + origin: '50% 100%' + }, + rotateFoldRight: { + keyframes: keyframes` + from { } + to { opacity: 0; transform: translateX(100%) rotateY(90deg); } + `, + duration: 700, + timing: 'ease', + fill: 'both', + origin: '0% 50%' + }, + rotateFoldLeft: { + keyframes: keyframes` + from { } + to { opacity: 0; transform: translateX(-100%) rotateY(-90deg); } + `, + duration: 700, + timing: 'ease', + fill: 'both', + origin: '100% 50%' + }, + rotateFoldTop: { + keyframes: keyframes` + from { } + to { opacity: 0; transform: translateY(-100%) rotateX(90deg); } + `, + duration: 700, + timing: 'ease', + fill: 'both', + origin: '50% 100%' + }, + rotateFoldBottom: { + keyframes: keyframes` + from { } + to { opacity: 0; transform: translateY(100%) rotateX(-90deg); } + `, + duration: 700, + timing: 'ease', + fill: 'both', + origin: '50% 0%' + }, + rotateUnfoldLeft: { + keyframes: keyframes` + from { opacity: 0; transform: translateX(-100%) rotateY(-90deg); } + `, + duration: 700, + timing: 'ease', + fill: 'both', + origin: '100% 50%' + }, + rotateUnfoldRight: { + keyframes: keyframes` + from { opacity: 0; transform: translateX(100%) rotateY(90deg); } + `, + duration: 700, + timing: 'ease', + fill: 'both', + origin: '0% 50%' + }, + rotateUnfoldTop: { + keyframes: keyframes` + from { opacity: 0; transform: translateY(-100%) rotateX(90deg); } + `, + duration: 700, + timing: 'ease', + fill: 'both', + origin: '50% 100%' + }, + rotateUnfoldBottom: { + keyframes: keyframes` + from { opacity: 0; transform: translateY(100%) rotateX(-90deg); } + `, + duration: 700, + timing: 'ease', + fill: 'both', + origin: '50% 0%' + }, + rotateRoomLeftOut: { + keyframes: keyframes` + from { } + to { opacity: 0.3; transform: translateX(-100%) rotateY(90deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '100% 50%' + }, + rotateRoomLeftIn: { + keyframes: keyframes` + from { opacity: 0.3; transform: translateX(100%) rotateY(-90deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '0% 50%' + }, + rotateRoomRightOut: { + keyframes: keyframes` + from { } + to { opacity: 0.3; transform: translateX(100%) rotateY(-90deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '0% 50%' + }, + rotateRoomRightIn: { + keyframes: keyframes` + from { opacity: 0.3; transform: translateX(-100%) rotateY(90deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '100% 50%' + }, + rotateRoomTopOut: { + keyframes: keyframes` + from { } + to { opacity: 0.3; transform: translateY(-100%) rotateX(-90deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '50% 100%' + }, + rotateRoomTopIn: { + keyframes: keyframes` + from { opacity: 0.3; transform: translateY(100%) rotateX(90deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '50% 0%' + }, + rotateRoomBottomOut: { + keyframes: keyframes` + from { } + to { opacity: 0.3; transform: translateY(100%) rotateX(90deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '50% 0%' + }, + rotateRoomBottomIn: { + keyframes: keyframes` + from { opacity: 0.3; transform: translateY(-100%) rotateX(-90deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '50% 100%' + }, + rotateCubeLeftOut: { + keyframes: keyframes` + 0% { } + 50% { animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } + 100% { opacity: 0.3; transform: translateX(-100%) rotateY(-90deg); } + `, + duration: 600, + timing: 'ease-in', + fill: 'both', + origin: '100% 50%' + }, + rotateCubeLeftIn: { + keyframes: keyframes` + 0% { opacity: 0.3; transform: translateX(100%) rotateY(90deg); } + 50% { animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); } + `, + duration: 600, + timing: 'ease-in', + fill: 'both', + origin: '0% 50%' + }, + rotateCubeRightOut: { + keyframes: keyframes` + 0% { } + 50% { animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); } + 100% { opacity: 0.3; transform: translateX(100%) rotateY(90deg); } + `, + duration: 600, + timing: 'ease-in', + fill: 'both', + origin: '0% 50%' + }, + rotateCubeRightIn: { + keyframes: keyframes` + 0% { opacity: 0.3; transform: translateX(-100%) rotateY(-90deg); } + 50% { animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } + `, + duration: 600, + timing: 'ease-in', + fill: 'both', + origin: '100% 50%' + }, + rotateCubeTopOut: { + keyframes: keyframes` + 0% {} + 50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } + 100% { opacity: 0.3; transform: translateY(-100%) rotateX(90deg); } + `, + duration: 600, + timing: 'ease-in', + fill: 'both', + origin: '50% 100%' + }, + rotateCubeTopIn: { + keyframes: keyframes` + 0% { opacity: 0.3; transform: translateY(100%) rotateX(-90deg); } + 50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } + `, + duration: 600, + timing: 'ease-in', + fill: 'both', + origin: '50% 0%' + }, + rotateCubeBottomOut: { + keyframes: keyframes` + 0% { } + 50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } + 100% { opacity: 0.3; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); } + `, + duration: 600, + timing: 'ease-in', + fill: 'both', + origin: '50% 0%' + }, + rotateCubeBottomIn: { + keyframes: keyframes` + 0% { opacity: 0.3; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); } + 50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } + `, + duration: 600, + timing: 'ease-in', + fill: 'both', + origin: '50% 100%' + }, + rotateCarouselLeftOut: { + keyframes: keyframes` + from { } + to { opacity: 0.3; transform: translateX(-150%) scale(0.4) rotateY(-65deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '100% 50%' + }, + rotateCarouselLeftIn: { + keyframes: keyframes` + from { opacity: 0.3; transform: translateX(200%) scale(0.4) rotateY(65deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '0% 50%' + }, + rotateCarouselRightOut: { + keyframes: keyframes` + from { } + to { opacity: 0.3; transform: translateX(200%) scale(0.4) rotateY(65deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '0% 50%' + }, + rotateCarouselRightIn: { + keyframes: keyframes` + from { opacity: 0.3; transform: translateX(-200%) scale(0.4) rotateY(-65deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '100% 50%' + }, + rotateCarouselTopOut: { + keyframes: keyframes` + from { } + to { opacity: 0.3; transform: translateY(-200%) scale(0.4) rotateX(65deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '50% 100%' + }, + rotateCarouselTopIn: { + keyframes: keyframes` + from { opacity: 0.3; transform: translateY(200%) scale(0.4) rotateX(-65deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '50% 0%' + }, + rotateCarouselBottomOut: { + keyframes: keyframes` + from { } + to { opacity: 0.3; transform: translateY(200%) scale(0.4) rotateX(-65deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '50% 0%' + }, + rotateCarouselBottomIn: { + keyframes: keyframes` + from { opacity: 0.3; transform: translateY(-200%) scale(0.4) rotateX(65deg); } + `, + duration: 800, + timing: 'ease', + fill: 'both', + origin: '50% 100%' + }, + rotateSidesOut: { + keyframes: keyframes` + from { } + to { opacity: 0; transform: translateZ(-500px) rotateY(90deg); } + `, + duration: 500, + timing: 'ease-in', + fill: 'both', + origin: '-50% 50%' + }, + rotateSidesIn: { + keyframes: keyframes` + from { opacity: 0; transform: translateZ(-500px) rotateY(-90deg); } + `, + duration: 500, + timing: 'ease-in', + fill: 'both', + origin: '150% 50%' + }, + rotateSlideOut: { + keyframes: keyframes` + 0% { } + 25% { opacity: 0.5; transform: translateZ(-500px); } + 75% { opacity: 0.5; transform: translateZ(-500px) translateX(-200%); } + 100% { opacity: 0.5; transform: translateZ(-500px) translateX(-200%); } + `, + duration: 1000, + timing: 'ease', + fill: 'both' + }, + rotateSlideIn: { + keyframes: keyframes` + 0%, 25% { opacity: 0.5; transform: translateZ(-500px) translateX(200%); } + 75% { opacity: 0.5; transform: translateZ(-500px); } + 100% { opacity: 1; transform: translateZ(0) translateX(0); } + `, + duration: 1000, + timing: 'ease', + fill: 'both' + } +}; \ No newline at end of file diff --git a/src/components/PageTransition/index.js b/src/components/PageTransition/index.js new file mode 100644 index 00000000..00025e68 --- /dev/null +++ b/src/components/PageTransition/index.js @@ -0,0 +1,80 @@ +import React, { memo } from 'react'; +import { Transition, TransitionGroup } from 'react-transition-group'; +import animations from './animations'; +import presets from './presets'; +import * as Styles from './styles'; + +function PageTransition({ + children, + enterAnimation: enterAnimationOverride, + exitAnimation: exitAnimationOverride, + preset, + transitionKey, + ...rest +}) { + const selectEnterAnimation = () => { + if (enterAnimationOverride) { + if (typeof enterAnimationOverride === 'string') { + return animations[enterAnimationOverride]; + } + return { + ...animations[enterAnimationOverride.name], + delay: enterAnimationOverride.delay, + onTop: enterAnimationOverride.onTop + }; + } + if (preset) { + return { + ...animations[presets[preset].enter.name], + delay: presets[preset].enter.delay, + onTop: presets[preset].enter.onTop + }; + } + return 'rotateSlideIn'; + }; + + const selectExitAnimation = () => { + if (exitAnimationOverride) { + if (typeof exitAnimationOverride === 'string') { + return animations[exitAnimationOverride]; + } + return { + ...animations[exitAnimationOverride.name], + delay: exitAnimationOverride.delay, + onTop: exitAnimationOverride.onTop + }; + } + if (preset) { + return { + ...animations[presets[preset].exit.name], + delay: presets[preset].exit.delay, + onTop: presets[preset].exit.onTop + }; + } + return 'rotateSlideIn'; + }; + + const enterAnimation = selectEnterAnimation(); + const exitAnimation = selectExitAnimation(); + const timeout = Math.max(enterAnimation.duration, exitAnimation.duration); + + return ( + + + + {state => ( + + {children} + + )} + + + + ); +} + +export default memo(PageTransition); \ No newline at end of file diff --git a/src/components/PageTransition/presets.js b/src/components/PageTransition/presets.js new file mode 100644 index 00000000..71af579e --- /dev/null +++ b/src/components/PageTransition/presets.js @@ -0,0 +1,552 @@ +export default { + moveToLeftFromRight: { + exit: { + name: 'moveToLeft' + }, + enter: { + name: 'moveFromRight' + } + }, + moveToRightFromLeft: { + exit: { + name: 'moveToRight' + }, + enter: { + name: 'moveFromLeft' + } + }, + moveToTopFromBottom: { + exit: { + name: 'moveToTop' + }, + enter: { + name: 'moveFromBottom' + } + }, + moveToBottomFromTop: { + exit: { + name: 'moveToBottom' + }, + enter: { + name: 'moveFromTop' + } + }, + fadeFromRight: { + exit: { + name: 'fade' + }, + enter: { + name: 'moveFromRight', + onTop: true + } + }, + fadeFromLeft: { + exit: { + name: 'fade' + }, + enter: { + name: 'moveFromLeft', + onTop: true + } + }, + fadeFromBottom: { + exit: { + name: 'fade' + }, + enter: { + name: 'moveFromBottom', + onTop: true + } + }, + fadeFromTop: { + exit: { + name: 'fade' + }, + enter: { + name: 'moveFromTop', + onTop: true + } + }, + fadeLeftFadeRight: { + exit: { + name: 'moveToLeftFade' + }, + enter: { + name: 'moveFromRightFade' + } + }, + fadeRightFadeLeft: { + exit: { + name: 'moveToRightFade' + }, + enter: { + name: 'moveFromLeftFade' + } + }, + fadeTopFadeBottom: { + exit: { + name: 'moveToTopFade' + }, + enter: { + name: 'moveFromBottomFade' + } + }, + fadeBottomFadeTop: { + exit: { + name: 'moveToBottomFade' + }, + enter: { + name: 'moveFromTopFade' + } + }, + scaleDownFromRight: { + exit: { + name: 'scaleDown' + }, + enter: { + name: 'moveFromRight', + onTop: true + } + }, + scaleDownFromLeft: { + exit: { + name: 'scaleDown' + }, + enter: { + name: 'moveFromLeft', + onTop: true + } + }, + scaleDownFromBottom: { + exit: { + name: 'scaleDown' + }, + enter: { + name: 'moveFromBottom', + onTop: true + } + }, + scaleDownFromTop: { + exit: { + name: 'scaleDown' + }, + enter: { + name: 'moveFromTop', + onTop: true + } + }, + scaleDownScaleDown: { + exit: { + name: 'scaleDown' + }, + enter: { + name: 'scaleUpDown', + delay: 300 + } + }, + scaleUpScaleUp: { + exit: { + name: 'scaleDownUp' + }, + enter: { + name: 'scaleUp', + delay: 300 + } + }, + moveToLeftScaleUp: { + exit: { + name: 'moveToLeft', + onTop: true + }, + enter: { + name: 'scaleUp' + } + }, + moveToRightScaleUp: { + exit: { + name: 'moveToRight', + onTop: true + }, + enter: { + name: 'scaleUp' + } + }, + moveToTopScaleUp: { + exit: { + name: 'moveToTop', + onTop: true + }, + enter: { + name: 'scaleUp' + } + }, + moveToBottomScaleUp: { + exit: { + name: 'moveToBottom', + onTop: true + }, + enter: { + name: 'scaleUp' + } + }, + scaleDownScaleUp: { + exit: { + name: 'scaleDownCenter' + }, + enter: { + name: 'scaleUpCenter', + delay: 400 + } + }, + glueLeftFromRight: { + exit: { + name: 'rotateRightSideFirst' + }, + enter: { + name: 'moveFromRight', + delay: 200, + onTop: true + } + }, + glueRightFromLeft: { + exit: { + name: 'rotateLeftSideFirst' + }, + enter: { + name: 'moveFromLeft', + delay: 200, + onTop: true + } + }, + glueBottomFromTop: { + exit: { + name: 'rotateTopSideFirst' + }, + enter: { + name: 'moveFromTop', + delay: 200, + onTop: true + } + }, + glueTopFromBottom: { + exit: { + name: 'rotateBottomSideFirst' + }, + enter: { + name: 'moveFromBottom', + delay: 200, + onTop: true + } + }, + flipRight: { + exit: { + name: 'flipOutRight' + }, + enter: { + name: 'flipInLeft', + delay: 500 + } + }, + flipLeft: { + exit: { + name: 'flipOutLeft' + }, + enter: { + name: 'flipInRight', + delay: 500 + } + }, + flipTop: { + exit: { + name: 'flipOutTop' + }, + enter: { + name: 'flipInBottom', + delay: 500 + } + }, + flipBottom: { + exit: { + name: 'flipOutBottom' + }, + enter: { + name: 'flipInTop', + delay: 500 + } + }, + fall: { + exit: { + name: 'rotateFall', + onTop: true + }, + enter: { + name: 'scaleUp' + } + }, + newspaper: { + exit: { + name: 'rotateOutNewspaper' + }, + enter: { + name: 'rotateInNewspaper', + delay: 500 + } + }, + pushLeftFromRight: { + exit: { + name: 'rotatePushLeft' + }, + enter: { + name: 'moveFromRight' + } + }, + pushRightFromLeft: { + exit: { + name: 'rotatePushRight' + }, + enter: { + name: 'moveFromLeft' + } + }, + pushTopFromBottom: { + exit: { + name: 'rotatePushTop' + }, + enter: { + name: 'moveFromBottom' + } + }, + pushBottomFromTop: { + exit: { + name: 'rotatePushBottom' + }, + enter: { + name: 'moveFromTop' + } + }, + pushLeftPullRight: { + exit: { + name: 'rotatePushLeft' + }, + enter: { + name: 'rotatePullRight', + delay: 180 + } + }, + pushRightPullLeft: { + exit: { + name: 'rotatePushRight' + }, + enter: { + name: 'rotatePullLeft', + delay: 180 + } + }, + pushTopPullBottom: { + exit: { + name: 'rotatePushTop' + }, + enter: { + name: 'rotatePullBottom', + delay: 180 + } + }, + pushBottomPullTop: { + exit: { + name: 'rotatePushBottom' + }, + enter: { + name: 'rotatePullTop', + delay: 180 + } + }, + foldLeftFromRight: { + exit: { + name: 'rotateFoldLeft' + }, + enter: { + name: 'moveFromRightFade' + } + }, + foldRightFromLeft: { + exit: { + name: 'rotateFoldRight' + }, + enter: { + name: 'moveFromLeftFade' + } + }, + foldTopFromBottom: { + exit: { + name: 'rotateFoldTop' + }, + enter: { + name: 'moveFromBottomFade' + } + }, + foldBottomFromTop: { + exit: { + name: 'rotateFoldBottom' + }, + enter: { + name: 'moveFromTopFade' + } + }, + moveToRightUnfoldLeft: { + exit: { + name: 'moveToRightFade' + }, + enter: { + name: 'rotateUnfoldLeft' + } + }, + moveToLeftUnfoldRight: { + exit: { + name: 'moveToLeftFade' + }, + enter: { + name: 'rotateUnfoldRight' + } + }, + moveToBottomUnfoldTop: { + exit: { + name: 'moveToBottomFade' + }, + enter: { + name: 'rotateUnfoldTop' + } + }, + moveToTopUnfoldBottom: { + exit: { + name: 'moveToTopFade' + }, + enter: { + name: 'rotateUnfoldBottom' + } + }, + roomToLeft: { + exit: { + name: 'rotateRoomLeftOut', + onTop: true + }, + enter: { + name: 'rotateRoomLeftIn' + } + }, + roomToRight: { + exit: { + name: 'rotateRoomRightOut', + onTop: true + }, + enter: { + name: 'rotateRoomRightIn' + } + }, + roomToTop: { + exit: { + name: 'rotateRoomTopOut', + onTop: true + }, + enter: { + name: 'rotateRoomTopIn' + } + }, + roomToBottom: { + exit: { + name: 'rotateRoomBottomOut', + onTop: true + }, + enter: { + name: 'rotateRoomBottomIn' + } + }, + cubeToLeft: { + exit: { + name: 'rotateCubeLeftOut', + onTop: true + }, + enter: { + name: 'rotateCubeLeftIn' + } + }, + cubeToRight: { + exit: { + name: 'rotateCubeRightOut', + onTop: true + }, + enter: { + name: 'rotateCubeRightIn' + } + }, + cubeToTop: { + exit: { + name: 'rotateCubeTopOut', + onTop: true + }, + enter: { + name: 'rotateCubeTopIn' + } + }, + cubeToBottom: { + exit: { + name: 'rotateCubeBottomOut', + onTop: true + }, + enter: { + name: 'rotateCubeBottomIn' + } + }, + carouselToLeft: { + exit: { + name: 'rotateCarouselLeftOut', + onTop: true + }, + enter: { + name: 'rotateCarouselLeftIn' + } + }, + carouselToRight: { + exit: { + name: 'rotateCarouselRightOut', + onTop: true + }, + enter: { + name: 'rotateCarouselRightIn' + } + }, + carouselToTop: { + exit: { + name: 'rotateCarouselTopOut', + onTop: true + }, + enter: { + name: 'rotateCarouselTopIn' + } + }, + carouselToBottom: { + exit: { + name: 'rotateCarouselBottomOut', + onTop: true + }, + enter: { + name: 'rotateCarouselBottomIn' + } + }, + slides: { + exit: { + name: 'rotateSidesOut' + }, + enter: { + name: 'rotateSidesIn', + delay: 200 + } + }, + slide: { + exit: { + name: 'rotateSlideOut' + }, + enter: { + name: 'rotateSlideIn' + } + } + }; \ No newline at end of file diff --git a/src/components/PageTransition/styles.js b/src/components/PageTransition/styles.js new file mode 100644 index 00000000..935fb77a --- /dev/null +++ b/src/components/PageTransition/styles.js @@ -0,0 +1,54 @@ +import styled, { css } from 'styled-components'; + +const createAnimationStyles = ({ + keyframes, + delay, + duration, + timing, + fill, + origin, + onTop +}) => css` + animation-name: ${keyframes}; + animation-delay: ${delay}; + animation-duration: ${duration}ms; + animation-timing-function: ${timing}; + animation-fill-mode: ${fill}; + transform-origin: ${origin || '50% 50%'}; + ${onTop && + css` + z-index: 1; + `} +`; + +const stateMap = { + entering: ({ enterAnimation }) => { + return css` + ${createAnimationStyles(enterAnimation)}; + `; + }, + exiting: ({ exitAnimation }) => { + return css` + ${createAnimationStyles(exitAnimation)}; + `; + } +}; + +export const PageTransitionGroup = styled.div` + position: relative; + width: 100%; + height: 100%; + perspective: 1200px; +`; + +export const PageTransition = styled.div` + backface-visibility: hidden; + height: 100%; + left: 0; + position: absolute; + top: 0; + transform-style: preserve-3d; + transform: translate3d(0, 0, 0); + width: 100%; + ${({ state }) => stateMap[state]}; +`; \ No newline at end of file diff --git a/src/components/PostCard/index.js b/src/components/PostCard/index.js old mode 100644 new mode 100755 diff --git a/src/components/PostCard/index.less b/src/components/PostCard/index.less old mode 100644 new mode 100755 diff --git a/src/components/PostCreator/index.js b/src/components/PostCreator/index.js old mode 100644 new mode 100755 diff --git a/src/components/PostCreator/index.less b/src/components/PostCreator/index.less old mode 100644 new mode 100755 diff --git a/src/components/ScrollBar/index.js b/src/components/ScrollBar/index.js old mode 100644 new mode 100755 diff --git a/src/components/ScrollBar/index.less b/src/components/ScrollBar/index.less old mode 100644 new mode 100755 diff --git a/src/components/UserCard/index.js b/src/components/UserCard/index.js old mode 100644 new mode 100755 diff --git a/src/components/UserCard/index.less b/src/components/UserCard/index.less old mode 100644 new mode 100755 diff --git a/src/components/UserProfile/index.js b/src/components/UserProfile/index.js old mode 100644 new mode 100755 diff --git a/src/components/UserProfile/styles.less b/src/components/UserProfile/styles.less old mode 100644 new mode 100755 diff --git a/src/components/YulioID/formstyle.less b/src/components/YulioID/formstyle.less old mode 100644 new mode 100755 diff --git a/src/components/YulioID/index.js b/src/components/YulioID/index.js old mode 100644 new mode 100755 index f4a1306e..9c0fce20 --- a/src/components/YulioID/index.js +++ b/src/components/YulioID/index.js @@ -92,7 +92,7 @@ class YulioID extends Component { visible={visible} className={styles.loginWrapper} > -
YulioID™
+
YulioID™

Login

diff --git a/src/components/YulioID/index.less b/src/components/YulioID/index.less old mode 100644 new mode 100755 diff --git a/src/components/index.js b/src/components/index.js old mode 100644 new mode 100755 index d4a1d2d3..1165a9fe --- a/src/components/index.js +++ b/src/components/index.js @@ -1,4 +1,5 @@ import CustomIcons from './CustomIcons' +import PageTransition from './PageTransition' import MainFeed from './MainFeed' import YulioID from './YulioID' import UserCard from './UserCard' @@ -15,4 +16,4 @@ import CoreLoader from './CoreLoader' import MicroHeader from './MicroHeader' import HeaderSearch from './HeaderSearch' -export { UserCard, HeaderSearch, YulioID, UserProfile, MyLayout, Loader, Page, ScrollBar, CoreLoader, PostCard, PostCreator, CustomIcons, MainSidebar, LikeBTN, MainFeed, MicroHeader} +export { PageTransition, UserCard, HeaderSearch, YulioID, UserProfile, MyLayout, Loader, Page, ScrollBar, CoreLoader, PostCard, PostCreator, CustomIcons, MainSidebar, LikeBTN, MainFeed, MicroHeader} diff --git a/src/layouts/BaseLayout.js b/src/layouts/BaseLayout.js old mode 100644 new mode 100755 diff --git a/src/layouts/BaseLayout.less b/src/layouts/BaseLayout.less old mode 100644 new mode 100755 diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js old mode 100644 new mode 100755 index d65a1234..a92aab15 --- a/src/layouts/PrimaryLayout.js +++ b/src/layouts/PrimaryLayout.js @@ -4,7 +4,7 @@ import React, { PureComponent, Fragment } from 'react' import PropTypes from 'prop-types' import withRouter from 'umi/withRouter' import { connect } from 'dva' -import { MyLayout, MicroHeader, HeaderSearch } from 'components' +import { MyLayout, PageTransition, HeaderSearch } from 'components' import classnames from 'classnames' import * as ycore from 'ycore' import { Layout, Drawer, Result, Button, Checkbox } from 'antd' @@ -13,7 +13,6 @@ import { config, pathMatchRegexp, langFromPath } from 'utils' import store from 'store'; import Error from '../pages/404' import styles from './PrimaryLayout.less' -import { PageTransition } from '@steveeeie/react-page-transition'; const { Content } = Layout const { ChatSider, Sider, Control } = MyLayout @@ -165,7 +164,7 @@ class PrimaryLayout extends PureComponent {
- + diff --git a/src/layouts/PrimaryLayout.less b/src/layouts/PrimaryLayout.less old mode 100644 new mode 100755 index b87825b9..facd8e35 --- a/src/layouts/PrimaryLayout.less +++ b/src/layouts/PrimaryLayout.less @@ -108,9 +108,10 @@ height: 100vh; bottom: 0; :global{ - .iXUMqo{ - overflow-y: scroll; + #scroller{ + overflow-y: scroll !important; } + } } @@ -129,7 +130,10 @@ h1{ color: @DarkMode-color_container; } - .iXUMqo{ + #scroller{ + overflow-y: hidden; + } + .gCVnuz{ color: @DarkMode-color_container !important; overflow-y: hidden; } diff --git a/src/layouts/PublicLayout.js b/src/layouts/PublicLayout.js old mode 100644 new mode 100755 diff --git a/src/layouts/index.js b/src/layouts/index.js old mode 100644 new mode 100755 diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json old mode 100644 new mode 100755 diff --git a/src/models/app.js b/src/models/app.js old mode 100644 new mode 100755 diff --git a/src/pages/$page/index.js b/src/pages/$page/index.js old mode 100644 new mode 100755 diff --git a/src/pages/$page/index.less b/src/pages/$page/index.less old mode 100644 new mode 100755 diff --git a/src/pages/404.js b/src/pages/404.js old mode 100644 new mode 100755 diff --git a/src/pages/404.less b/src/pages/404.less old mode 100644 new mode 100755 diff --git a/src/pages/about/index.js b/src/pages/about/index.js old mode 100644 new mode 100755 diff --git a/src/pages/about/index.less b/src/pages/about/index.less old mode 100644 new mode 100755 diff --git a/src/pages/index.js b/src/pages/index.js old mode 100644 new mode 100755 diff --git a/src/pages/login/index.js b/src/pages/login/index.js old mode 100644 new mode 100755 diff --git a/src/pages/login/index.less b/src/pages/login/index.less old mode 100644 new mode 100755 diff --git a/src/pages/main/index.js b/src/pages/main/index.js old mode 100644 new mode 100755 diff --git a/src/pages/main/index.less b/src/pages/main/index.less old mode 100644 new mode 100755 diff --git a/src/pages/s/$search/index.js b/src/pages/s/$search/index.js old mode 100644 new mode 100755 diff --git a/src/pages/s/$search/styles.less b/src/pages/s/$search/styles.less old mode 100644 new mode 100755 diff --git a/src/pages/settings/components/base.js b/src/pages/settings/components/base.js old mode 100644 new mode 100755 diff --git a/src/pages/settings/components/notification.js b/src/pages/settings/components/notification.js old mode 100644 new mode 100755 diff --git a/src/pages/settings/components/security.js b/src/pages/settings/components/security.js old mode 100644 new mode 100755 diff --git a/src/pages/settings/index.js b/src/pages/settings/index.js old mode 100644 new mode 100755 diff --git a/src/pages/settings/style.less b/src/pages/settings/style.less old mode 100644 new mode 100755 diff --git a/src/services/api.js b/src/services/api.js old mode 100644 new mode 100755 diff --git a/src/services/index.js b/src/services/index.js old mode 100644 new mode 100755 diff --git a/src/themes/default.less b/src/themes/default.less old mode 100644 new mode 100755 diff --git a/src/themes/fonty.css b/src/themes/fonty.css old mode 100644 new mode 100755 diff --git a/src/themes/index.less b/src/themes/index.less old mode 100644 new mode 100755 diff --git a/src/themes/light_ng/index.less b/src/themes/light_ng/index.less old mode 100644 new mode 100755 diff --git a/src/themes/mixin.less b/src/themes/mixin.less old mode 100644 new mode 100755 diff --git a/src/themes/plyr.css b/src/themes/plyr.css old mode 100644 new mode 100755 diff --git a/src/themes/vars.less b/src/themes/vars.less old mode 100644 new mode 100755 diff --git a/src/utils/index.js b/src/utils/index.js old mode 100644 new mode 100755 diff --git a/src/utils/model.js b/src/utils/model.js old mode 100644 new mode 100755 diff --git a/src/utils/request.js b/src/utils/request.js old mode 100644 new mode 100755 diff --git a/src/utils/theme.js b/src/utils/theme.js old mode 100644 new mode 100755 diff --git a/tsconfig.json b/tsconfig.json old mode 100644 new mode 100755