From 3244a4c37df2d67ff379bdfe06b247eaa59b9af0 Mon Sep 17 00:00:00 2001 From: Katerina Koukiou Date: Mon, 8 Nov 2021 13:16:40 +0100 Subject: [PATCH] Use Page/PageSection/Breadcrumb patternfly components to make the app aligned with the PF design guidelines --- src/app.scss | 5 +++ src/config.jsx | 31 ++++++++++++----- src/index.html | 2 +- src/recordings.jsx | 84 +++++++++++++++++++++++++++------------------- 4 files changed, 77 insertions(+), 45 deletions(-) diff --git a/src/app.scss b/src/app.scss index 87b46f4..9bb3a1c 100644 --- a/src/app.scss +++ b/src/app.scss @@ -1,3 +1,8 @@ p { font-weight: bold; } + +// Ensure UI fills the entire page (and does not run over) +.ct-page-fill { + height: 100% !important; +} diff --git a/src/config.jsx b/src/config.jsx index 513d342..2c97ea4 100644 --- a/src/config.jsx +++ b/src/config.jsx @@ -20,6 +20,7 @@ import React from "react"; import { + Breadcrumb, BreadcrumbItem, Button, Form, FormGroup, @@ -37,9 +38,10 @@ import { EmptyStateIcon, Title, EmptyStateBody, - EmptyStateVariant + EmptyStateVariant, + Page, PageSection, } from "@patternfly/react-core"; -import { AngleLeftIcon, ExclamationCircleIcon } from "@patternfly/react-icons"; +import { ExclamationCircleIcon } from "@patternfly/react-icons"; import { global_danger_color_200 } from "@patternfly/react-tokens"; const json = require('comment-json'); @@ -557,12 +559,23 @@ export function Config () { }; return ( - <> - - - - + + + {_("Session Recording")} + + + {_("Settings")} + + + }> + + + + + ); } diff --git a/src/index.html b/src/index.html index cdf58a1..e6f2acb 100644 --- a/src/index.html +++ b/src/index.html @@ -33,7 +33,7 @@ along with Cockpit; If not, see . -
+
diff --git a/src/recordings.jsx b/src/recordings.jsx index 62c835f..96a408b 100644 --- a/src/recordings.jsx +++ b/src/recordings.jsx @@ -20,6 +20,7 @@ import React from "react"; import { + Breadcrumb, BreadcrumbItem, Bullseye, Button, Card, @@ -34,6 +35,7 @@ import { EmptyStateIcon, EmptyStateVariant, ExpandableSection, + Page, PageSection, PageSectionVariants, Spinner, Title, TextInput, @@ -50,7 +52,6 @@ import { TableBody } from "@patternfly/react-table"; import { - AngleLeftIcon, CogIcon, ExclamationCircleIcon, ExclamationTriangleIcon, @@ -394,30 +395,41 @@ class Recording extends React.Component { ); } else { return ( - <> - - - - - - + + + {_("Session Recording")} + + + {_("Current recording")} + + + }> + + + + + + + ); } } @@ -890,16 +902,18 @@ export default class View extends React.Component { ); return ( - <> - {toolbar} - - + + + {toolbar} + + + ); } else { return (