steffo/sophon
steffo/sophon
1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-12-22 23:04:21 +00:00
Code Activity

🚧 Start working on "Create object" panel

Browse source
This commit is contained in:
Steffo 2021-09-22 01:42:34 +02:00 committed by Stefano Pigozzi
parent bbca2b6deb
commit b0baf55bb5
4 changed files with 41 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/components/NewResearchGroupPanel.tsx Normal file
View file

@ -0,0 +1,32 @@
import * as React from "react"
import {Field, Button, Select} from "@steffo/bluelib-react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faPlus} from "@fortawesome/free-solid-svg-icons";
import {ObjectPanel} from "./ObjectPanel";
export function NewResearchGroupPanel(): JSX.Element {
return (
<ObjectPanel>
<ObjectPanel.Icon>
<Select>
<Select.Option value={"🌐"}/>
<Select.Option value={"🎓"}/>
<Select.Option value={"🔒"}/>
</Select>
</ObjectPanel.Icon>
<ObjectPanel.Name>
<Field placeholder={"Project name"} required/>
</ObjectPanel.Name>
<ObjectPanel.Text>
</ObjectPanel.Text>
<ObjectPanel.Buttons>
<Button>
<FontAwesomeIcon icon={faPlus}/>&nbsp;Create
</Button>
</ObjectPanel.Buttons>
</ObjectPanel>
)
}

3
frontend/src/components/ObjectPanel.module.css
View file

@ -1,7 +1,8 @@
.ObjectPanel {
display: grid;
grid-template-areas: "icon name text buttons";
grid-template-columns: auto 1fr 4fr auto;
/* Not sure about this, there probably is a better way */
grid-template-columns: auto minmax(25%, 1fr) auto auto;
grid-gap: 8px;
justify-content: center;

4
frontend/src/components/ObjectPanel.tsx
View file

@ -6,8 +6,8 @@ import {BluelibHTMLProps} from "@steffo/bluelib-react/dist/types";
import classNames from "classnames"
interface ObjectPanelProps extends PanelProps {}
interface ObjectSubPanelProps extends BluelibHTMLProps<HTMLDivElement> {}
export interface ObjectPanelProps extends PanelProps {}
export interface ObjectSubPanelProps extends BluelibHTMLProps<HTMLDivElement> {}
export function ObjectPanel({className, ...props}: ObjectPanelProps): JSX.Element {

8
frontend/src/components/ResearchProjectsByGroupListBox.tsx
View file

@ -1,11 +1,12 @@
import * as React from "react"
import * as ReactDOM from "react-dom"
import {useDRFManagedList} from "../hooks/useDRF";
import {ResearchGroup, ResearchProject} from "../types";
import {ResearchProject} from "../types";
import {Loading} from "./Loading";
import {ResearchGroupPanel} from "./ResearchGroupPanel";
import {Box, Heading} from "@steffo/bluelib-react";
import {ResearchProjectPanel} from "./ResearchProjectPanel";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faPlus} from "@fortawesome/free-solid-svg-icons";
import {NewResearchGroupPanel} from "./NewResearchGroupPanel";
interface ProjectsListBoxProps {
@ -35,6 +36,7 @@ export function ResearchProjectsByGroupListBox({group_pk}: ProjectsListBoxProps)
</Heading>
<div>
{groups}
<NewResearchGroupPanel/>
</div>
</Box>
)