mirror of
https://github.com/Steffo99/sophon.git
synced 2024-12-23 07:14:21 +00:00
✨ Abstract some more things
This commit is contained in:
parent
5a74264170
commit
ca8bb1780b
7 changed files with 104 additions and 46 deletions
|
@ -3,7 +3,8 @@ import {Box, Form, Heading, Idiomatic as I, Panel} from "@steffo/bluelib-react";
|
||||||
import {useInstance} from "./InstanceContext";
|
import {useInstance} from "./InstanceContext";
|
||||||
import {useLogin} from "./LoginContext";
|
import {useLogin} from "./LoginContext";
|
||||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||||
import {faExclamationTriangle, faServer, faTimesCircle} from "@fortawesome/free-solid-svg-icons";
|
import {faExclamationTriangle, faServer, faTimesCircle, faUniversity} from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import {Loading} from "./Loading";
|
||||||
|
|
||||||
|
|
||||||
export function InstanceSelectBox(): JSX.Element {
|
export function InstanceSelectBox(): JSX.Element {
|
||||||
|
@ -43,6 +44,20 @@ export function InstanceSelectBox(): JSX.Element {
|
||||||
</Panel>
|
</Panel>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
if(instance.validity === null) {
|
||||||
|
return (
|
||||||
|
<Panel bluelibClassNames={"color-yellow"}>
|
||||||
|
<Loading text={"Checking..."}/>
|
||||||
|
</Panel>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if(instance.details) {
|
||||||
|
return (
|
||||||
|
<Panel bluelibClassNames={"color-lime"}>
|
||||||
|
<FontAwesomeIcon icon={faUniversity}/> Selected <I>{instance.details.name}</I> as instance.
|
||||||
|
</Panel>
|
||||||
|
)
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<Panel>
|
<Panel>
|
||||||
<FontAwesomeIcon icon={faServer}/> Select the Sophon instance you want to connect to by specifying its URL here.
|
<FontAwesomeIcon icon={faServer}/> Select the Sophon instance you want to connect to by specifying its URL here.
|
||||||
|
|
|
@ -149,7 +149,7 @@ export function LoginBox(): JSX.Element {
|
||||||
<Form.Field label={"Username"} {...username} disabled={!instance.validity}/>
|
<Form.Field label={"Username"} {...username} disabled={!instance.validity}/>
|
||||||
<Form.Field label={"Password"} type={"password"} {...password} disabled={!instance.validity}/>
|
<Form.Field label={"Password"} type={"password"} {...password} disabled={!instance.validity}/>
|
||||||
<Form.Row>
|
<Form.Row>
|
||||||
<Form.Button onClick={doLogin} disabled={!canLogin} bluelibClassNames={error ? "color-red" : ""}>
|
<Form.Button onClick={doLogin} disabled={!canLogin}>
|
||||||
Login
|
Login
|
||||||
</Form.Button>
|
</Form.Button>
|
||||||
</Form.Row>
|
</Form.Row>
|
||||||
|
|
|
@ -24,7 +24,7 @@ export function LogoutBox(): JSX.Element {
|
||||||
</p>
|
</p>
|
||||||
<Form>
|
<Form>
|
||||||
<Form.Row>
|
<Form.Row>
|
||||||
<Panel>
|
<Panel bluelibClassNames={"color-lime"}>
|
||||||
<FontAwesomeIcon icon={faUser}/> You are currently logged in as <Variable>{login.userData.username}</Variable>.
|
<FontAwesomeIcon icon={faUser}/> You are currently logged in as <Variable>{login.userData.username}</Variable>.
|
||||||
</Panel>
|
</Panel>
|
||||||
</Form.Row>
|
</Form.Row>
|
||||||
|
|
30
frontend/src/components/ObjectPanel.module.css
Normal file
30
frontend/src/components/ObjectPanel.module.css
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
.ObjectPanel {
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas: "icon name text buttons";
|
||||||
|
grid-template-columns: auto 1fr 4fr auto;
|
||||||
|
grid-gap: 8px;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ObjectPanel .Icon {
|
||||||
|
grid-area: icon;
|
||||||
|
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ObjectPanel .Name {
|
||||||
|
grid-area: name;
|
||||||
|
|
||||||
|
font-size: large;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ObjectPanel .Text {
|
||||||
|
grid-area: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ObjectPanel .Buttons {
|
||||||
|
grid-area: buttons;
|
||||||
|
}
|
44
frontend/src/components/ObjectPanel.tsx
Normal file
44
frontend/src/components/ObjectPanel.tsx
Normal file
|
@ -0,0 +1,44 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import {Panel} from "@steffo/bluelib-react";
|
||||||
|
import Style from "./ObjectPanel.module.css"
|
||||||
|
import {PanelProps} from "@steffo/bluelib-react/dist/components/panels/Panel";
|
||||||
|
import {BluelibHTMLProps} from "@steffo/bluelib-react/dist/types";
|
||||||
|
import classNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
interface ObjectPanelProps extends PanelProps {}
|
||||||
|
interface ObjectSubPanelProps extends BluelibHTMLProps<HTMLDivElement> {}
|
||||||
|
|
||||||
|
|
||||||
|
export function ObjectPanel({className, ...props}: ObjectPanelProps): JSX.Element {
|
||||||
|
return (
|
||||||
|
<Panel className={classNames(Style.ObjectPanel, className)} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
ObjectPanel.Icon = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
|
||||||
|
return (
|
||||||
|
<div className={classNames(Style.Icon, className)} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
ObjectPanel.Name = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
|
||||||
|
return (
|
||||||
|
<div className={classNames(Style.Name, className)} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
ObjectPanel.Text = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
|
||||||
|
return (
|
||||||
|
<div className={classNames(Style.Text, className)} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
ObjectPanel.Buttons = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
|
||||||
|
return (
|
||||||
|
<div className={classNames(Style.Buttons, className)} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
|
@ -1,34 +0,0 @@
|
||||||
.Panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Access {
|
|
||||||
font-size: larger;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Name {
|
|
||||||
font-size: larger;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Owner {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.Owner span {
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
|
|
||||||
}
|
|
||||||
|
|
||||||
.Buttons {
|
|
||||||
flex-grow: 0;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Buttons button {
|
|
||||||
height: 38px !important;
|
|
||||||
}
|
|
|
@ -1,11 +1,11 @@
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import Style from "./ResearchGroupPanel.module.css"
|
|
||||||
import {Panel} from "@steffo/bluelib-react";
|
import {Panel} from "@steffo/bluelib-react";
|
||||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||||
import {faEnvelope, faGlobe, faQuestion} from "@fortawesome/free-solid-svg-icons";
|
import {faEnvelope, faGlobe, faQuestion} from "@fortawesome/free-solid-svg-icons";
|
||||||
import {ResearchGroup} from "../types";
|
import {ResearchGroup} from "../types";
|
||||||
import {UserLink} from "./UserLink";
|
import {UserLink} from "./UserLink";
|
||||||
import {Link} from "./Link";
|
import {Link} from "./Link";
|
||||||
|
import {ObjectPanel} from "./ObjectPanel";
|
||||||
|
|
||||||
|
|
||||||
export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup): JSX.Element {
|
export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup): JSX.Element {
|
||||||
|
@ -21,16 +21,19 @@ export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup):
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Panel className={Style.Panel}>
|
<ObjectPanel>
|
||||||
<div className={Style.Access}>
|
<ObjectPanel.Icon>
|
||||||
{accessIcon}
|
{accessIcon}
|
||||||
</div>
|
</ObjectPanel.Icon>
|
||||||
<div className={Style.Name} title={slug}>
|
<ObjectPanel.Name>
|
||||||
<Link href={`/g/${slug}/`}>{name}</Link>
|
<Link href={`/g/${slug}/`}>{name}</Link>
|
||||||
</div>
|
</ObjectPanel.Name>
|
||||||
<div className={Style.Owner}>
|
<ObjectPanel.Text>
|
||||||
Created by <UserLink id={owner}/>
|
Created by <UserLink id={owner}/>
|
||||||
</div>
|
</ObjectPanel.Text>
|
||||||
</Panel>
|
<ObjectPanel.Buttons>
|
||||||
|
|
||||||
|
</ObjectPanel.Buttons>
|
||||||
|
</ObjectPanel>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue