Skip to content

RECIRCLE / frontend-pilot

Go to a project
Commit 9ec117c0 by Belákovics Ádám
Options

add template view

parent 68796a64
Showing with 33 additions and 22 deletions
src/img_temp/ubuntu.jpg
src/img_temp/ubuntu.jpg

3.31 KB | W: | H:

src/img_temp/ubuntu.jpg

9.93 KB | W: | H:

src/img_temp/ubuntu.jpg
src/img_temp/ubuntu.jpg
src/img_temp/ubuntu.jpg
src/img_temp/ubuntu.jpg
  • 2-up
  • Swipe
  • Onion skin
src/views/App.js
import React, { useState } from "react"; import React, { useState } from "react";
import { Grommet, Box, ResponsiveContext } from "grommet"; import { Grommet, Box, ResponsiveContext, Grid } from "grommet";
import theme from "../style/Theme"; import theme from "../style/Theme";
import PageHeader from "./PageHeader"; import PageHeader from "./PageHeader";
import SideMenu from "./SideMenu"; import SideMenu from "./SideMenu";
...@@ -23,10 +23,23 @@ function App() { ...@@ -23,10 +23,23 @@ function App() {
showSideBar={showSideBar} showSideBar={showSideBar}
setShowSideBar={setShowSideBar} setShowSideBar={setShowSideBar}
/> />
<Box flex justify="center" direction="row" margin="small"> <Grid
<InstanceView /> areas={[
<TemplateView /> { name: "instances", start: [0, 0], end: [0, 0] },
</Box> { name: "templates", start: [1, 0], end: [1, 0] }
]}
columns={["flex", "flex"]}
rows={["flex"]}
gap="small"
margin="small"
>
<Box gridArea="instances">
<InstanceView size={size} />
</Box>
<Box gridArea="templates">
<TemplateView size={size} />
</Box>
</Grid>
</Box> </Box>
</Box> </Box>
)} )}
......
src/views/InstanceView.js
...@@ -18,7 +18,7 @@ const InstanceView = () => { ...@@ -18,7 +18,7 @@ const InstanceView = () => {
return ( return (
<LoadingWrapper loading={isLoading}> <LoadingWrapper loading={isLoading}>
<Box direction="column" margin="small" justify="evenly" align="center"> <Box margin="small" justify="evenly" align="center">
<Heading margin="small">Virtual Machines</Heading> <Heading margin="small">Virtual Machines</Heading>
<Button <Button
icon={<ChapterAdd />} icon={<ChapterAdd />}
...@@ -28,7 +28,7 @@ const InstanceView = () => { ...@@ -28,7 +28,7 @@ const InstanceView = () => {
color="darkbrand" color="darkbrand"
/> />
</Box> </Box>
<Box flex direction="row" wrap="true" justify="evenly"> <Box flex direction="row" wrap justify="evenly">
{data.map(e => ( {data.map(e => (
<Card <Card
background="brand" background="brand"
......
src/views/LoadingWrapper.js
...@@ -4,7 +4,9 @@ import { Spinning } from "grommet-controls"; ...@@ -4,7 +4,9 @@ import { Spinning } from "grommet-controls";
const LoadingWrapper = ({ loading, ...props }) => { const LoadingWrapper = ({ loading, ...props }) => {
return loading ? ( return loading ? (
<Spinning kind="three-bounce" color="brand" size="large" /> <Box margin="small" justify="center" align="center" flex>
<Spinning kind="three-bounce" color="brand" size="large" />
</Box>
) : ( ) : (
<Box {...props} /> <Box {...props} />
); );
......
src/views/TemplateView.js
...@@ -37,7 +37,7 @@ const TemplateView = () => { ...@@ -37,7 +37,7 @@ const TemplateView = () => {
return ( return (
<LoadingWrapper loading={isLoading}> <LoadingWrapper loading={isLoading}>
<Box direction="column" margin="small" justify="evenly" align="center"> <Box margin="small" justify="evenly" align="center">
<Heading margin="small">Templates</Heading> <Heading margin="small">Templates</Heading>
<Button <Button
icon={<ChapterAdd />} icon={<ChapterAdd />}
...@@ -47,24 +47,20 @@ const TemplateView = () => { ...@@ -47,24 +47,20 @@ const TemplateView = () => {
color="darkbrand" color="darkbrand"
/> />
</Box> </Box>
<Box direction="row" wrap justify="evenly"> <Box flex direction="row" wrap justify="evenly">
{mockData.map(e => ( {mockData.map(e => (
<Box margin="small"> <Box margin="small">
<Stack> <Stack anchor="bottom-left">
{e.os === "windows" ? ( {e.os === "windows" ? (
<Image <Box>
src={WindowsImage} <Image src={WindowsImage} style={{ height: "250px" }} />
fit="contain" </Box>
style={{ height: "250px" }}
/>
) : ( ) : (
<Image <Box>
src={UbuntuImage} <Image src={UbuntuImage} style={{ height: "250px" }} />
fit="contain" </Box>
style={{ height: "250px" }}
/>
)} )}
<Box background="#666666CC"> <Box background="#666666CC" style={{ width: "250px" }}>
<Text margin="small">{e.name}</Text> <Text margin="small">{e.name}</Text>
</Box> </Box>
</Stack> </Stack>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment