This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
The following commit(s) were added to refs/heads/main by this push:
new e5942b2a App main menu redesign
e5942b2a is described below
commit e5942b2a2bfb38b60f73c81102af4ab59427d2dc
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Mon Jan 27 14:49:38 2025 -0500
App main menu redesign
---
.../src/main/webui/src/main/PageNavigation.tsx | 62 ++++++++++++----------
karavan-app/src/main/webui/src/main/main.css | 40 ++++++++++++--
2 files changed, 69 insertions(+), 33 deletions(-)
diff --git a/karavan-app/src/main/webui/src/main/PageNavigation.tsx
b/karavan-app/src/main/webui/src/main/PageNavigation.tsx
index f988d747..eb114ce0 100644
--- a/karavan-app/src/main/webui/src/main/PageNavigation.tsx
+++ b/karavan-app/src/main/webui/src/main/PageNavigation.tsx
@@ -39,7 +39,7 @@ import ResourcesIcon from
"@patternfly/react-icons/dist/js/icons/blueprint-icon"
import KnowledgebaseIcon from
"@patternfly/react-icons/dist/js/icons/book-open-icon";
import ContainersIcon from "@patternfly/react-icons/dist/js/icons/cubes-icon";
import ConfigIcon from "@patternfly/react-icons/dist/js/icons/cogs-icon";
-import ServicesIcon from "@patternfly/react-icons/dist/js/icons/services-icon";
+import ServicesIcon from "@patternfly/react-icons/dist/js/icons/tools-icon";
import {useAppConfigStore, useDevModeStore, useFileStore} from
"../api/ProjectStore";
import {shallow} from "zustand/shallow";
import {useNavigate} from "react-router-dom";
@@ -79,14 +79,13 @@ export function PageNavigation () {
new MenuItem("containers", "Containers", <ContainersIcon/>)
)
}
- pages.push(new MenuItem("knowledgebase", "Knowledgebase",
<KnowledgebaseIcon/>));
- pages.push(new MenuItem("configuration", "Configuration",
<ConfigIcon/>));
+ pages.push(new MenuItem("help", "Help", <KnowledgebaseIcon/>));
+ pages.push(new MenuItem("system", "System", <ConfigIcon/>));
return pages;
}
- return (<Flex className="nav-buttons" direction={{default: "column"}}
style={{height: "100%"}}
- spaceItems={{default: "spaceItemsNone"}}>
- <FlexItem alignSelf={{default: "alignSelfCenter"}}>
+ return (<div className="nav-buttons" style={{height: "100%", display:
"flex", flexDirection: "column"}}>
+ <div style={{alignSelf: 'center'}}>
<Bullseye>
{loading && <Spinner style={{position: "absolute"}}
diameter="40px" aria-label="Loading..."/>}
<Tooltip className="logo-tooltip" content={config.title + " "
+ config.version}
@@ -95,28 +94,35 @@ export function PageNavigation () {
</Tooltip>
</Bullseye>
- </FlexItem>
- {getMenu().map(page =>
- <FlexItem key={page.pageId} className={pageId === page.pageId ?
"nav-button-selected" : ""}>
- <Tooltip content={page.tooltip} position={"right"}>
- <Button id={page.pageId} icon={page.icon} variant={"plain"}
- className={pageId === page.pageId ?
"nav-button-selected" : ""}
- onClick={event => {
- setFile('none', undefined);
- setPodName(undefined);
- setStatus("none");
- setPageId(page.pageId);
- navigate(page.pageId);
- }}
- />
- </Tooltip>
- </FlexItem>
- )}
- <FlexItem flex={{default: "flex_2"}} alignSelf={{default:
"alignSelfCenter"}}>
+ </div>
+ {getMenu().map((page, index) => {
+ let className = "nav-button";
+ className = className.concat(pageId === page.pageId ? "
nav-button-selected" : "");
+ className = className.concat((index === getMenu().length - 1) ? "
nav-button-last" : "");
+ return (
+ <div key={page.pageId} style={{width: '100%'}}
className={pageId === page.pageId ? "nav-button-selected" : ""}>
+ <Button id={page.pageId}
+ icon={page.icon}
+ variant={"link"}
+ className={className}
+ onClick={event => {
+ setFile('none', undefined);
+ setPodName(undefined);
+ setStatus("none");
+ setPageId(page.pageId);
+ navigate(page.pageId);
+ }}
+ >
+ {page.pageId}
+ </Button>
+ </div>
+ )
+ })}
+ <div style={{alignSelf: 'center', flexGrow: '2'}}>
<Divider/>
- </FlexItem>
+ </div>
{KaravanApi.authType !== 'public' &&
- <FlexItem alignSelf={{default: "alignSelfCenter"}}>
+ <div style={{alignSelf: 'center'}}>
<Popover
hasAutoWidth
aria-label="Current user"
@@ -159,6 +165,6 @@ export function PageNavigation () {
>
<UserIcon className="avatar"/>
</Popover>
- </FlexItem>}
- </Flex>)
+ </div>}
+ </div>)
}
\ No newline at end of file
diff --git a/karavan-app/src/main/webui/src/main/main.css
b/karavan-app/src/main/webui/src/main/main.css
index 21e69898..aaf510de 100644
--- a/karavan-app/src/main/webui/src/main/main.css
+++ b/karavan-app/src/main/webui/src/main/main.css
@@ -1,5 +1,14 @@
.karavan .nav-buttons {
background: var(--pf-v5-c-page__header--BackgroundColor);
+ width: fit-content;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.karavan .nav-buttons .pf-v5-c-button svg {
+ fill: var(--pf-v5-global--Color--light-100);
}
.karavan .nav-buttons .logo {
@@ -11,13 +20,13 @@
.karavan .nav-buttons .pf-v5-c-button {
padding: 0;
- width: 64px;
+ /*width: 64px;*/
height: 64px;
color: var(--pf-v5-global--Color--light-100);
}
.karavan .nav-buttons .pf-v5-c-button svg {
- width: 24px;
+ width: 32px;
}
.karavan .nav-buttons .avatar {
@@ -25,20 +34,41 @@
height: 32px;
margin-bottom: 6px;
border: solid var(--pf-v5-global--Color--light-100) 1px;
- background-color: var(--pf-v5-global--Color--light-100);
border-radius: 32px;
padding: 6px;
+ background-color: white;
}
-.karavan .nav-buttons .pf-v5-c-button.pf-m-plain {
+.karavan .nav-buttons .nav-button {
border-left-width: 3px;
border-left-style: solid;
border-left-color: transparent;
+ border-top-width: 1px;
+ border-top-style: solid;
+ border-top-color: var(--pf-v5-global--BackgroundColor--dark-400);
border-radius: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding-left: 6px;
+ padding-right: 6px;
+ width: 100%;
}
-.karavan .nav-button-selected .pf-v5-c-button.pf-m-plain {
+.karavan .nav-buttons .nav-button .pf-v5-c-button__icon.pf-m-start {
+ margin-inline-end: initial;
+}
+
+.karavan .nav-buttons .nav-button-last {
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ border-bottom-color: var(--pf-v5-global--BackgroundColor--dark-400);
+}
+
+.karavan .nav-button-selected .pf-v5-c-button {
border-left-color: var(--pf-v5-global--active-color--400);
background-color: var(--pf-v5-global--BackgroundColor--dark-400);
}
+
