-
Notifications
You must be signed in to change notification settings - Fork 2
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 #110 from uselagoon/lagoon-tour-with-transitions
Lagoon tour with transitions
- Loading branch information
Showing
63 changed files
with
3,109 additions
and
786 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
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,46 @@ | ||
| import React from "react"; | ||
| import Skeleton from "react-loading-skeleton"; | ||
| import { BackupsHeader, DataTable } from "./StyledBackups"; | ||
|
|
||
| const Backups = () => { | ||
| const numberOfBackupFields = | ||
| typeof window !== "undefined" | ||
| ? Math.floor((window.innerHeight * 8) / 10 / 65) | ||
| : 10; | ||
|
|
||
| const backupFieldSkeleton = ( | ||
| <div className="data-row"> | ||
| <div className="source"> | ||
| <Skeleton /> | ||
| </div> | ||
| <div className="created"> | ||
| <Skeleton /> | ||
| </div> | ||
|
|
||
| <div className="backupid"> | ||
| <Skeleton /> | ||
| </div> | ||
| <div className="download"> | ||
| <Skeleton /> | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="backups"> | ||
| <BackupsHeader> | ||
| <label className="source">Source</label> | ||
| <label className="created">Created</label> | ||
| <label className="backupid">Backup id</label> | ||
| </BackupsHeader> | ||
|
|
||
| <DataTable> | ||
| {[...Array<undefined>(numberOfBackupFields)].map( | ||
| () => backupFieldSkeleton | ||
| )} | ||
| </DataTable> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Backups; |
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
57 changes: 57 additions & 0 deletions
57
src/components/BulkDeployments/BulkDeploymentsSkeleton.tsx
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,57 @@ | ||
| import React from "react"; | ||
| import { | ||
| BulkDeploymentsDataTable, | ||
| BulkDeploymentsHeader, | ||
| } from "./StyledBulkDeployments"; | ||
| import Skeleton from "react-loading-skeleton"; | ||
|
|
||
| const BulkDeploymentsSkeleton = () => { | ||
| const numberOfItems = | ||
| typeof window !== "undefined" | ||
| ? Math.floor((window.innerHeight * 8) / 10 / 65) | ||
| : 10; | ||
| const rowItem = ( | ||
| <div className="data-row"> | ||
| <div className="project"> | ||
| <Skeleton /> | ||
| </div> | ||
| <div className="environment"> | ||
| <Skeleton /> | ||
| </div> | ||
| <div className="name"> | ||
| <Skeleton /> | ||
| </div> | ||
| <div className="priority"> | ||
| <Skeleton /> | ||
| </div> | ||
| <div className="started"> | ||
| <Skeleton /> | ||
| </div> | ||
| <div className="status"> | ||
| <Skeleton /> | ||
| </div> | ||
| <div className="duration"></div> | ||
| <div></div> | ||
| </div> | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="deployments"> | ||
| <BulkDeploymentsHeader> | ||
| <label>Project</label> | ||
| <label>Environment</label> | ||
| <label>Name</label> | ||
| <label className="priority">Priority</label> | ||
| <label>Created</label> | ||
| <label>Status</label> | ||
| <label>Duration</label> | ||
| <label></label> | ||
| </BulkDeploymentsHeader> | ||
| <BulkDeploymentsDataTable> | ||
| {[...Array<undefined>(numberOfItems)].map(() => rowItem)} | ||
| </BulkDeploymentsDataTable> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default BulkDeploymentsSkeleton; |
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,55 @@ | ||
| import React from "react"; | ||
| import { | ||
| ButtonRow, | ||
| DeploymentDetails, | ||
| FieldWrapper, | ||
| SkeletonWrapper, | ||
| } from "./StyledDeployment"; | ||
| import Skeleton from "react-loading-skeleton"; | ||
|
|
||
| const DeploymentSkeleton = () => ( | ||
| <div className="deployment"> | ||
| <DeploymentDetails> | ||
| <FieldWrapper className="created"> | ||
| <div> | ||
| <label>Created</label> | ||
| <div className="field"> | ||
| <Skeleton /> | ||
| </div> | ||
| </div> | ||
| </FieldWrapper> | ||
| <FieldWrapper className="status"> | ||
| <div> | ||
| <label>Status</label> | ||
| <div className="field"> | ||
| <Skeleton /> | ||
| </div> | ||
| </div> | ||
| </FieldWrapper> | ||
| <FieldWrapper className="duration"> | ||
| <div> | ||
| <label>Duration</label> | ||
| <div className="field"> | ||
| <Skeleton /> | ||
| </div> | ||
| </div> | ||
| </FieldWrapper> | ||
| <FieldWrapper className="logstatus"> | ||
| <div> | ||
| <label>Log view</label> | ||
| <div className="field"> | ||
| <Skeleton /> | ||
| </div> | ||
| </div> | ||
| </FieldWrapper> | ||
| </DeploymentDetails> | ||
| <ButtonRow> | ||
| <Skeleton /> | ||
| </ButtonRow> | ||
| <SkeletonWrapper> | ||
| <Skeleton count={10} style={{ height: "60px", lineHeight: "0.1" }} /> | ||
| </SkeletonWrapper> | ||
| </div> | ||
| ); | ||
|
|
||
| export default DeploymentSkeleton; |
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,45 @@ | ||
| import React from "react"; | ||
| import Skeleton from "react-loading-skeleton"; | ||
| import { StyledDeployments } from "./StyledDeployments"; | ||
|
|
||
| const DeploymentsSkeleton = () => { | ||
| const numberOfDeploymentFields = | ||
| typeof window !== "undefined" | ||
| ? Math.floor((window.innerHeight * 8) / 10 / 65) | ||
| : 10; | ||
|
|
||
| const skeletonItem = ( | ||
| <div className="data-row"> | ||
| <div className="name"> | ||
| <Skeleton /> | ||
| </div> | ||
| <div className="started"> | ||
| <Skeleton /> | ||
| </div> | ||
| <div className="status"> | ||
| <Skeleton width={"50%"} /> | ||
| </div> | ||
| <div className="duration"> | ||
| <Skeleton width={"50%"} /> | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| return ( | ||
| <StyledDeployments> | ||
| <div className="header"> | ||
| <label>Name</label> | ||
| <label>Created</label> | ||
| <label>Status</label> | ||
| <label>Duration</label> | ||
| </div> | ||
| <div className="data-table"> | ||
| {[...Array<undefined>(numberOfDeploymentFields)].map( | ||
| () => skeletonItem | ||
| )} | ||
| </div> | ||
| </StyledDeployments> | ||
| ); | ||
| }; | ||
|
|
||
| export default DeploymentsSkeleton; |
Oops, something went wrong.