-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #26 from design-sparx/ft/react-n-progress
New features
- Loading branch information
Showing
20 changed files
with
454 additions
and
163 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "antd-multi-dashboard": minor | ||
| --- | ||
|
|
||
| Added react helmet to manage document heads |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "antd-multi-dashboard": minor | ||
| --- | ||
|
|
||
| Added: - added react top progress bar - added sidebar collapse transitions |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,32 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Vite + React + TS</title> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.tsx"></script> | ||
| </body> | ||
| <head> | ||
| <meta charset="UTF-8"/> | ||
| <link rel="icon" type="image/svg+xml" href="/vite.svg"/> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | ||
| <title> | ||
| Multi dashboard template with React and Ant Design v5 - AntD Dashboard by Design Sparx | ||
| </title> | ||
| <meta | ||
| name="description" | ||
| content="Explore a powerful multi-dashboard application built with React and Ant Design (v5) for efficient data visualization and management. A large number of settings, additional services and widgets."/> | ||
| <meta | ||
| name="keywords" | ||
| content="Design Sparx, antd, antd5, admin themes, react, admin themes, antd admin, antd dashboard, antd dark mode"/> | ||
| <meta property="og:locale" content="en_US"/> | ||
| <meta property="og:type" content="article"/> | ||
| <meta | ||
| property="og:title" | ||
| content="Design Sparx – Multi dashboard template with React and Ant Design v5 - AntD Dashboard by Design Sparx"/> | ||
| <meta | ||
| property="og:url" | ||
| content="https://themes.getbootstrap.com/product/good-bootstrap-5-admin-dashboard-template"/> | ||
| <meta property="og:site_name" content="Good by Keenthemes"/> | ||
| <link rel="canonical" href="https://preview.keenthemes.com/good"/> | ||
| <link rel="shortcut icon" href="/favicon.ico"/> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.tsx"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| /*react transition group css*/ | ||
| .page-enter { | ||
| opacity: 0; | ||
| } | ||
|
|
||
| .page-enter-active { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .page-exit { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .page-exit-active { | ||
| opacity: 0; | ||
| } | ||
|
|
||
| .page-enter-active, | ||
| .page-exit-active{ | ||
| transition: opacity 300ms; | ||
| } | ||
|
|
||
| .fade-enter-active, | ||
| .fade-exit-active{ | ||
| transition: opacity 300ms; | ||
| } | ||
|
|
||
| .right-to-left-enter { | ||
| transform: translateX(100%); | ||
| } | ||
| .right-to-left-enter-active { | ||
| transform: translateX(0); | ||
| transition:all 300ms ease; | ||
| } | ||
|
|
||
| .right-to-left-exit { | ||
| transform: translateX(0); | ||
| } | ||
| .right-to-left-exit-active { | ||
| transform: translateX(-100%); | ||
| transition:all 300ms ease; | ||
| } | ||
|
|
||
| .left-to-right-enter { | ||
| transform: translateX(-100%); | ||
| } | ||
| .left-to-right-enter-active { | ||
| transform: translateX(0); | ||
| transition:all 300ms ease; | ||
| } | ||
|
|
||
| .left-to-right-exit { | ||
| transform: translateX(0); | ||
| } | ||
| .left-to-right-exit-active { | ||
| transform: translateX(100%); | ||
| transition:all 300ms ease; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| type Props = { | ||
| animationDuration: number | ||
| progress: number | ||
| } | ||
|
|
||
| const Bar = ({animationDuration, progress}: Props) => ( | ||
| <div | ||
| style={{ | ||
| background: '#29d', | ||
| height: 2, | ||
| left: 0, | ||
| marginLeft: `${(-1 + progress) * 100}%`, | ||
| position: 'fixed', | ||
| top: 0, | ||
| transition: `margin-left ${animationDuration}ms linear`, | ||
| width: '100%', | ||
| zIndex: 1031, | ||
| }} | ||
| > | ||
| <div | ||
| style={{ | ||
| boxShadow: '0 0 10px #29d, 0 0 5px #29d', | ||
| display: 'block', | ||
| height: '100%', | ||
| opacity: 1, | ||
| position: 'absolute', | ||
| right: 0, | ||
| transform: 'rotate(3deg) translate(0px, -4px)', | ||
| width: 100, | ||
| }} | ||
| /> | ||
| </div> | ||
| ) | ||
|
|
||
| export default Bar |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import {ReactNode} from 'react' | ||
|
|
||
| type Props = { | ||
| animationDuration: number | ||
| isFinished: boolean | ||
| children: ReactNode | ||
| } | ||
|
|
||
| const Container = ({animationDuration, children, isFinished}: Props) => ( | ||
| <div | ||
| style={{ | ||
| opacity: isFinished ? 0 : 1, | ||
| pointerEvents: 'none', | ||
| transition: `opacity ${animationDuration}ms linear`, | ||
| }} | ||
| > | ||
| {children} | ||
| </div> | ||
| ) | ||
|
|
||
| export default Container |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import {useNProgress} from "@tanem/react-nprogress"; | ||
| import {Bar, Container, Nspinner} from "./index.ts"; | ||
|
|
||
| type Props = { | ||
| isAnimating?: boolean | ||
| } | ||
|
|
||
| const Progress = ({isAnimating}: Props) => { | ||
| const {animationDuration, isFinished, progress} = useNProgress({ | ||
| isAnimating, | ||
| }) | ||
|
|
||
|
|
||
| return ( | ||
| <Container animationDuration={animationDuration} isFinished={isFinished}> | ||
| <Bar animationDuration={animationDuration} progress={progress}/> | ||
| <Nspinner/> | ||
| {/* | ||
| This example doesn't use a spinner component so the UI stays | ||
| tidy. You're free to render whatever is appropriate for your | ||
| use-case. | ||
| */ | ||
| } | ||
| </Container> | ||
| ) | ||
| } | ||
|
|
||
| export default Progress |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import "./spinner.css" | ||
|
|
||
| const Spinner = () => ( | ||
| <div | ||
| style={{ | ||
| display: 'block', | ||
| position: 'fixed', | ||
| right: 15, | ||
| top: 15, | ||
| zIndex: 1031, | ||
| }} | ||
| > | ||
| <div | ||
| style={{ | ||
| animation: '400ms linear infinite spinner', | ||
| borderBottom: '2px solid transparent', | ||
| borderLeft: '2px solid #29d', | ||
| borderRadius: '50%', | ||
| borderRight: '2px solid transparent', | ||
| borderTop: '2px solid #29d', | ||
| boxSizing: 'border-box', | ||
| height: 36, | ||
| width: 36, | ||
| }} | ||
| /> | ||
| </div> | ||
| ) | ||
|
|
||
| export default Spinner |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import Bar from "./Bar.tsx" | ||
| import Container from "./Container.tsx" | ||
| import Progress from "./Progress.tsx" | ||
| import Spinner from "./Spinner.tsx" | ||
|
|
||
| export {Bar, Container, Progress as Nprogress, Spinner as Nspinner} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| @keyframes spinner { | ||
| 0% { | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| transform: rotate(360deg); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.