From ca8bb1780b31a57d0177148c51193130e67e791e Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi
Date: Tue, 21 Sep 2021 16:50:34 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Abstract=20some=20more=20things?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
frontend/src/components/InstanceSelectBox.tsx | 17 ++++++-
frontend/src/components/LoginBox.tsx | 2 +-
frontend/src/components/LogoutBox.tsx | 2 +-
.../src/components/ObjectPanel.module.css | 30 +++++++++++++
frontend/src/components/ObjectPanel.tsx | 44 +++++++++++++++++++
.../components/ResearchGroupPanel.module.css | 34 --------------
.../src/components/ResearchGroupPanel.tsx | 21 +++++----
7 files changed, 104 insertions(+), 46 deletions(-)
create mode 100644 frontend/src/components/ObjectPanel.module.css
create mode 100644 frontend/src/components/ObjectPanel.tsx
delete mode 100644 frontend/src/components/ResearchGroupPanel.module.css
diff --git a/frontend/src/components/InstanceSelectBox.tsx b/frontend/src/components/InstanceSelectBox.tsx
index d77bc79..748ce79 100644
--- a/frontend/src/components/InstanceSelectBox.tsx
+++ b/frontend/src/components/InstanceSelectBox.tsx
@@ -3,7 +3,8 @@ import {Box, Form, Heading, Idiomatic as I, Panel} from "@steffo/bluelib-react";
import {useInstance} from "./InstanceContext";
import {useLogin} from "./LoginContext";
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 {
@@ -43,6 +44,20 @@ export function InstanceSelectBox(): JSX.Element {
)
}
+ if(instance.validity === null) {
+ return (
+
+
+
+ )
+ }
+ if(instance.details) {
+ return (
+
+ Selected {instance.details.name} as instance.
+
+ )
+ }
return (
Select the Sophon instance you want to connect to by specifying its URL here.
diff --git a/frontend/src/components/LoginBox.tsx b/frontend/src/components/LoginBox.tsx
index fafa6e6..6db9fa4 100644
--- a/frontend/src/components/LoginBox.tsx
+++ b/frontend/src/components/LoginBox.tsx
@@ -149,7 +149,7 @@ export function LoginBox(): JSX.Element {
-
+
Login
diff --git a/frontend/src/components/LogoutBox.tsx b/frontend/src/components/LogoutBox.tsx
index 52d1529..86aa3d4 100644
--- a/frontend/src/components/LogoutBox.tsx
+++ b/frontend/src/components/LogoutBox.tsx
@@ -24,7 +24,7 @@ export function LogoutBox(): JSX.Element {
-
+
You are currently logged in as {login.userData.username}.
diff --git a/frontend/src/components/ObjectPanel.module.css b/frontend/src/components/ObjectPanel.module.css
new file mode 100644
index 0000000..059f19b
--- /dev/null
+++ b/frontend/src/components/ObjectPanel.module.css
@@ -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;
+}
\ No newline at end of file
diff --git a/frontend/src/components/ObjectPanel.tsx b/frontend/src/components/ObjectPanel.tsx
new file mode 100644
index 0000000..00dad4f
--- /dev/null
+++ b/frontend/src/components/ObjectPanel.tsx
@@ -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 {}
+
+
+export function ObjectPanel({className, ...props}: ObjectPanelProps): JSX.Element {
+ return (
+
+ )
+}
+
+
+ObjectPanel.Icon = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
+ return (
+
+ )
+}
+
+ObjectPanel.Name = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
+ return (
+
+ )
+}
+
+
+ObjectPanel.Text = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
+ return (
+
+ )
+}
+
+
+ObjectPanel.Buttons = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
+ return (
+
+ )
+}
diff --git a/frontend/src/components/ResearchGroupPanel.module.css b/frontend/src/components/ResearchGroupPanel.module.css
deleted file mode 100644
index 8541513..0000000
--- a/frontend/src/components/ResearchGroupPanel.module.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/frontend/src/components/ResearchGroupPanel.tsx b/frontend/src/components/ResearchGroupPanel.tsx
index 954135b..0712d25 100644
--- a/frontend/src/components/ResearchGroupPanel.tsx
+++ b/frontend/src/components/ResearchGroupPanel.tsx
@@ -1,11 +1,11 @@
import * as React from "react"
-import Style from "./ResearchGroupPanel.module.css"
import {Panel} from "@steffo/bluelib-react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faEnvelope, faGlobe, faQuestion} from "@fortawesome/free-solid-svg-icons";
import {ResearchGroup} from "../types";
import {UserLink} from "./UserLink";
import {Link} from "./Link";
+import {ObjectPanel} from "./ObjectPanel";
export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup): JSX.Element {
@@ -21,16 +21,19 @@ export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup):
}
return (
-
-
+
+
{accessIcon}
-
-
+
+
{name}
-
-
+
+
Created by
-
-
+
+
+
+
+
)
}