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 50d3805 Catalog counter (#314)
50d3805 is described below
commit 50d38057ddf5d798fbf2d2ece44adb30e1a227c4
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Tue Apr 12 17:06:04 2022 -0400
Catalog counter (#314)
---
karavan-designer/src/components/ComponentsPage.tsx | 7 ++++---
karavan-designer/src/designer/karavan.css | 11 ++++++++++-
karavan-designer/src/eip/EipPage.tsx | 7 ++++---
karavan-designer/src/kamelets/KameletsPage.tsx | 7 ++++---
karavan-vscode/webview/components/ComponentsPage.tsx | 7 ++++---
karavan-vscode/webview/eip/EipPage.tsx | 7 ++++---
karavan-vscode/webview/kamelets/KameletsPage.tsx | 7 ++++---
7 files changed, 34 insertions(+), 19 deletions(-)
diff --git a/karavan-designer/src/components/ComponentsPage.tsx
b/karavan-designer/src/components/ComponentsPage.tsx
index 203a789..f1b5dc8 100644
--- a/karavan-designer/src/components/ComponentsPage.tsx
+++ b/karavan-designer/src/components/ComponentsPage.tsx
@@ -5,7 +5,7 @@ import {
Gallery,
ToolbarItem,
TextInput,
- PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem
+ PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {ComponentCard} from "./ComponentCard";
@@ -62,8 +62,9 @@ export class ComponentsPage extends React.Component<Props,
State> {
<PageSection className="tools-section"
variant={this.props.dark ? PageSectionVariants.darker :
PageSectionVariants.light}>
<Flex className="tools" justifyContent={{default:
'justifyContentSpaceBetween'}}>
<FlexItem>
- <TextContent>
- <Text component="h1">Component Catalog</Text>
+ <TextContent className="header">
+ <Text component="h2">Component Catalog</Text>
+ <Badge isRead
className="labels">{components.length}</Badge>
</TextContent>
</FlexItem>
<FlexItem>
diff --git a/karavan-designer/src/designer/karavan.css
b/karavan-designer/src/designer/karavan.css
index 88c7730..4249a17 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -1083,9 +1083,18 @@ reactour-portal .reactour__popover button:focus-visible {
outline: none;
}
-/*Kamelets*/
+/*Catalogues*/
.karavan .kamelets-page .kamelet-card .pf-c-card__footer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
+
+.karavan .tools-section .tools .header {
+ display: flex;
+ flex-direction: row;
+}
+.karavan .tools-section .tools .header .labels {
+ height: fit-content;
+ margin-left: 3px;
+}
\ No newline at end of file
diff --git a/karavan-designer/src/eip/EipPage.tsx
b/karavan-designer/src/eip/EipPage.tsx
index fe5fa2f..dd6e301 100644
--- a/karavan-designer/src/eip/EipPage.tsx
+++ b/karavan-designer/src/eip/EipPage.tsx
@@ -5,7 +5,7 @@ import {
Gallery,
ToolbarItem,
TextInput,
- PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem
+ PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {EipCard} from "./EipCard";
@@ -57,8 +57,9 @@ export class EipPage extends React.Component<Props, State> {
<PageSection className="tools-section"
variant={this.props.dark ? PageSectionVariants.darker :
PageSectionVariants.light}>
<Flex className="tools" justifyContent={{default:
'justifyContentSpaceBetween'}}>
<FlexItem>
- <TextContent>
- <Text component="h1">Enterprise Integration
Patterns</Text>
+ <TextContent className="header">
+ <Text component="h2">Enterprise Integration
Patterns</Text>
+ <Badge isRead
className="labels">{elements.length}</Badge>
</TextContent>
</FlexItem>
<FlexItem>
diff --git a/karavan-designer/src/kamelets/KameletsPage.tsx
b/karavan-designer/src/kamelets/KameletsPage.tsx
index a3e0cd4..f4c26ce 100644
--- a/karavan-designer/src/kamelets/KameletsPage.tsx
+++ b/karavan-designer/src/kamelets/KameletsPage.tsx
@@ -5,7 +5,7 @@ import {
Gallery,
ToolbarItem,
TextInput,
- PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem
+ PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {KameletCard} from "./KameletCard";
@@ -60,8 +60,9 @@ export class KameletsPage extends React.Component<Props,
State> {
<PageSection className="tools-section"
variant={this.props.dark ? PageSectionVariants.darker :
PageSectionVariants.light}>
<Flex className="tools" justifyContent={{default:
'justifyContentSpaceBetween'}}>
<FlexItem>
- <TextContent>
- <Text component="h1">Kamelet Catalog</Text>
+ <TextContent className="header">
+ <Text component="h2">Kamelet Catalog</Text>
+ <Badge isRead
className="labels">{this.state.kamelets.length}</Badge>
</TextContent>
</FlexItem>
<FlexItem>
diff --git a/karavan-vscode/webview/components/ComponentsPage.tsx
b/karavan-vscode/webview/components/ComponentsPage.tsx
index 203a789..f1b5dc8 100644
--- a/karavan-vscode/webview/components/ComponentsPage.tsx
+++ b/karavan-vscode/webview/components/ComponentsPage.tsx
@@ -5,7 +5,7 @@ import {
Gallery,
ToolbarItem,
TextInput,
- PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem
+ PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {ComponentCard} from "./ComponentCard";
@@ -62,8 +62,9 @@ export class ComponentsPage extends React.Component<Props,
State> {
<PageSection className="tools-section"
variant={this.props.dark ? PageSectionVariants.darker :
PageSectionVariants.light}>
<Flex className="tools" justifyContent={{default:
'justifyContentSpaceBetween'}}>
<FlexItem>
- <TextContent>
- <Text component="h1">Component Catalog</Text>
+ <TextContent className="header">
+ <Text component="h2">Component Catalog</Text>
+ <Badge isRead
className="labels">{components.length}</Badge>
</TextContent>
</FlexItem>
<FlexItem>
diff --git a/karavan-vscode/webview/eip/EipPage.tsx
b/karavan-vscode/webview/eip/EipPage.tsx
index fe5fa2f..dd6e301 100644
--- a/karavan-vscode/webview/eip/EipPage.tsx
+++ b/karavan-vscode/webview/eip/EipPage.tsx
@@ -5,7 +5,7 @@ import {
Gallery,
ToolbarItem,
TextInput,
- PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem
+ PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {EipCard} from "./EipCard";
@@ -57,8 +57,9 @@ export class EipPage extends React.Component<Props, State> {
<PageSection className="tools-section"
variant={this.props.dark ? PageSectionVariants.darker :
PageSectionVariants.light}>
<Flex className="tools" justifyContent={{default:
'justifyContentSpaceBetween'}}>
<FlexItem>
- <TextContent>
- <Text component="h1">Enterprise Integration
Patterns</Text>
+ <TextContent className="header">
+ <Text component="h2">Enterprise Integration
Patterns</Text>
+ <Badge isRead
className="labels">{elements.length}</Badge>
</TextContent>
</FlexItem>
<FlexItem>
diff --git a/karavan-vscode/webview/kamelets/KameletsPage.tsx
b/karavan-vscode/webview/kamelets/KameletsPage.tsx
index a3e0cd4..f4c26ce 100644
--- a/karavan-vscode/webview/kamelets/KameletsPage.tsx
+++ b/karavan-vscode/webview/kamelets/KameletsPage.tsx
@@ -5,7 +5,7 @@ import {
Gallery,
ToolbarItem,
TextInput,
- PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem
+ PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {KameletCard} from "./KameletCard";
@@ -60,8 +60,9 @@ export class KameletsPage extends React.Component<Props,
State> {
<PageSection className="tools-section"
variant={this.props.dark ? PageSectionVariants.darker :
PageSectionVariants.light}>
<Flex className="tools" justifyContent={{default:
'justifyContentSpaceBetween'}}>
<FlexItem>
- <TextContent>
- <Text component="h1">Kamelet Catalog</Text>
+ <TextContent className="header">
+ <Text component="h2">Kamelet Catalog</Text>
+ <Badge isRead
className="labels">{this.state.kamelets.length}</Badge>
</TextContent>
</FlexItem>
<FlexItem>
