You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2022/03/28 02:07:51 UTC
[camel-karavan] branch main updated: Karavan color theme (#235)
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 f8418cd Karavan color theme (#235)
f8418cd is described below
commit f8418cdc416a8c90077ae18b3d9dc4b58296bcff
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Sun Mar 27 22:07:48 2022 -0400
Karavan color theme (#235)
* Logo
* Blue theme
* Icons for blue theme
* Flows in Integration view
* Integration view
---
karavan-app/src/main/webapp/src/Logo.tsx | 168 ++++++++++++++++++
karavan-app/src/main/webapp/src/Main.tsx | 22 +--
karavan-app/src/main/webapp/src/index.css | 36 +---
.../main/webapp/src/integrations/DesignerPage.tsx | 4 +-
karavan-app/src/main/webapp/src/logo.svg | 1 -
karavan-demo/postman/postman.yaml | 24 +--
karavan-designer/src/App.tsx | 4 +-
karavan-designer/src/designer/KaravanDesigner.tsx | 4 +-
karavan-designer/src/designer/karavan.css | 80 +++------
karavan-designer/src/index.css | 24 ---
karavan-vscode/icons/dark/add.svg | 85 +++++++++
karavan-vscode/icons/dark/run.svg | 52 ++++++
karavan-vscode/icons/icon.png | Bin 6956 -> 0 bytes
karavan-vscode/icons/icon.svg | 1 -
karavan-vscode/icons/karavan.png | Bin 0 -> 12929 bytes
karavan-vscode/icons/karavan.svg | 193 +++++++++++++++++++++
karavan-vscode/icons/light/add.svg | 52 ++++++
karavan-vscode/icons/light/run.svg | 52 ++++++
karavan-vscode/package.json | 36 +++-
karavan-vscode/src/designerView.ts | 21 +--
karavan-vscode/src/extension.ts | 14 +-
karavan-vscode/src/integrationView.ts | 32 ++--
karavan-vscode/src/utils.ts | 10 ++
karavan-vscode/webview/App.tsx | 4 +-
karavan-vscode/webview/index.css | 135 ++++----------
25 files changed, 765 insertions(+), 289 deletions(-)
diff --git a/karavan-app/src/main/webapp/src/Logo.tsx b/karavan-app/src/main/webapp/src/Logo.tsx
new file mode 100644
index 0000000..82c49d4
--- /dev/null
+++ b/karavan-app/src/main/webapp/src/Logo.tsx
@@ -0,0 +1,168 @@
+import React from "react";
+
+function Icon() {
+ return (
+ <div className="logo">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlnsXlink="http://www.w3.org/1999/xlink"
+ width="1132.022"
+ height="360.139"
+ preserveAspectRatio="xMidYMid"
+ version="1.1"
+ viewBox="0 0 1132.022 360.139"
+ >
+ <defs>
+ <linearGradient id="linearGradient1351">
+ <stop offset="0" stopColor="#dcffff" stopOpacity="1"></stop>
+ <stop offset="1" stopColor="#96d2e6" stopOpacity="1"></stop>
+ </linearGradient>
+ <circle id="path-1" cx="128" cy="128" r="128"></circle>
+ <linearGradient
+ id="linearGradient-3"
+ x1="-26.051"
+ x2="254.316"
+ y1="271.331"
+ y2="0.048"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop offset="0%" stopColor="#4790bb" stopOpacity="1"></stop>
+ <stop offset="10.996%" stopColor="#64b7db" stopOpacity="1"></stop>
+ <stop offset="94.502%" stopColor="#326ea0" stopOpacity="1"></stop>
+ </linearGradient>
+ <linearGradient
+ id="linearGradient-4"
+ x1="-32.163"
+ x2="259.338"
+ y1="277.029"
+ y2="-5.028"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop offset="0%" stopColor="#F69923"></stop>
+ <stop offset="8.048%" stopColor="#F79A23"></stop>
+ <stop offset="41.874%" stopColor="#E97826"></stop>
+ </linearGradient>
+ <linearGradient
+ id="linearGradient-5"
+ x1="217.945"
+ x2="99.459"
+ y1="67.505"
+ y2="247.005"
+ gradientTransform="scale(.96442 1.0369)"
+ gradientUnits="userSpaceOnUse"
+ xlinkHref="#linearGradient-4"
+ >
+ <stop offset="0%" stopColor="#92d6d5" stopOpacity="1"></stop>
+ <stop offset="41.191%" stopColor="#79b7cc" stopOpacity="1"></stop>
+ <stop offset="73.271%" stopColor="#5891c5" stopOpacity="1"></stop>
+ </linearGradient>
+ <mask id="mask-2" fill="#fff">
+ <use width="100%" height="100%" x="0" y="0" xlinkHref="#path-1"></use>
+ </mask>
+ <mask id="mask-2-7" fill="#fff">
+ <use width="100%" height="100%" x="0" y="0" xlinkHref="#path-1"></use>
+ </mask>
+ <linearGradient
+ id="linearGradient1345"
+ x1="233.122"
+ x2="2.24"
+ y1="56.015"
+ y2="242.78"
+ gradientUnits="userSpaceOnUse"
+ xlinkHref="#linearGradient1351"
+ ></linearGradient>
+ </defs>
+ <circle
+ cx="127.994"
+ cy="127.994"
+ r="123.111"
+ fill="url(#linearGradient-3)"
+ fillRule="nonzero"
+ mask="url(#mask-2)"
+ transform="translate(45.105 56.042)"
+ ></circle>
+ <g transform="translate(45.105 56.042)">
+ <path
+ fill="url(#linearGradient-5)"
+ fillOpacity="1"
+ fillRule="nonzero"
+ d="M98.044 75.517c-1.751-.002-3.524.01-5.292.061-2.056.06-4.817.713-8 1.785 53.775 40.834 73.108 114.497 39.875 178.514 1.129.03 2.249.123 3.385.123 60.736 0 111.492-42.323 124.609-99.071-38.542-45.178-90.813-81.314-154.578-81.412z"
+ mask="url(#mask-2)"
+ opacity="0.75"
+ ></path>
+ </g>
+ <path
+ fill="#1e4b7b"
+ fillOpacity="1"
+ fillRule="nonzero"
+ d="M84.752 77.368C66.895 83.378 32.83 104.546.079 132.81c2.487 67.334 57.028 121.313 124.548 123.07 33.233-64.016 13.901-137.68-39.875-178.513z"
+ mask="url(#mask-2)"
+ opacity="0.75"
+ transform="translate(45.105 56.042)"
+ ></path>
+ <path
+ fill="url(#linearGradient1345)"
+ fillOpacity="1"
+ fillRule="nonzero"
+ d="M128.747 54.005c-10.985 5.495 0 27.466 0 27.466C95.774 108.954 102.78 155.9 64.312 155.9c-20.97 0-42.242-24.077-64.233-38.828-.283 3.479-.785 6.972-.785 10.524 0 48.095 26.263 89.924 65.42 111.897 10.952-1.38 22.838-4.114 31.05-9.592 43.146-28.765 53.857-83.491 71.487-109.925 10.979-16.492 62.434-15.061 65.906-22.01 5.502-10.991-10.99-27.467-16.491-27.467h-43.958c-3.071 0-7.897-5.456-10.974-5.456h-16.492s-7.307-11.085-13.794-11.526c-.93-.066-1.83.053-2.7.488z"
+ mask="url(#mask-2-7)"
+ transform="translate(44.336 55.909)"
+ ></path>
+ <path
+ fill="#2d4150"
+ fillOpacity="1"
+ fillRule="nonzero"
+ d="M128 256C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128zm0-9.768c65.298 0 118.232-52.934 118.232-118.232S193.298 9.768 128 9.768 9.768 62.702 9.768 128 62.702 246.232 128 246.232z"
+ mask="url(#mask-2)"
+ transform="matrix(1.02035 0 0 1.02035 41.98 53.958)"
+ ></path>
+ <text
+ xmlSpace="preserve"
+ style={{
+ lineHeight: "1.25",
+ fontVariantLigatures: "normal",
+ fontVariantCaps: "normal",
+ fontVariantNumeric: "normal",
+ fontVariantEastAsian: "normal",
+ }}
+ x="346.913"
+ y="259.391"
+ fill="#96d2e6"
+ fillOpacity="1"
+ stroke="none"
+ strokeWidth="5.349"
+ fontFamily="M PLUS 1 Code"
+ fontSize="213.949"
+ fontStretch="normal"
+ fontStyle="normal"
+ fontVariant="normal"
+ fontWeight="normal"
+ >
+ <tspan
+ x="346.913"
+ y="259.391"
+ style={{
+ fontVariantLigatures: "normal",
+ fontVariantCaps: "normal",
+ fontVariantNumeric: "normal",
+ fontVariantEastAsian: "normal",
+ }}
+ fill="#96d2e6"
+ fillOpacity="1"
+ strokeWidth="5.349"
+ fontFamily="M PLUS 1 Code"
+ fontSize="213.949"
+ fontStretch="normal"
+ fontStyle="normal"
+ fontVariant="normal"
+ fontWeight="normal"
+ >
+ Karavan
+ </tspan>
+ </text>
+ </svg>
+ </div>
+ );
+}
+
+export default Icon;
diff --git a/karavan-app/src/main/webapp/src/Main.tsx b/karavan-app/src/main/webapp/src/Main.tsx
index b910688..b37d53b 100644
--- a/karavan-app/src/main/webapp/src/Main.tsx
+++ b/karavan-app/src/main/webapp/src/Main.tsx
@@ -35,6 +35,7 @@ import {DesignerPage} from "./integrations/DesignerPage";
import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml";
import avatarImg from './avatarImg.svg';
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
+import Icon from "./Logo";
class ToastMessage {
id: string = ''
@@ -119,18 +120,11 @@ export class Main extends React.Component<Props, State> {
<Flex direction={{default: "row"}} justifyContent={{default: "justifyContentSpaceBetween"}}
style={{width: "100%"}}>
<FlexItem style={{marginTop: "auto", marginBottom: "auto"}}>
- <Flex direction={{default: "row"}}>
- <FlexItem>
- <TextContent>
- <Text component={TextVariants.h1}>Karavan</Text>
- </TextContent>
- </FlexItem>
- <FlexItem>
- <TextContent>
- <Text component={TextVariants.h5}>{"v. " + version}</Text>
- </TextContent>
- </FlexItem>
- </Flex>
+ {/*<FlexItem>*/}
+ {/* <TextContent>*/}
+ {/* <Text component={TextVariants.h5}>{"v. " + version}</Text>*/}
+ {/* </TextContent>*/}
+ {/*</FlexItem>*/}
</FlexItem>
<FlexItem style={{marginTop: "auto", marginBottom: "auto"}}>
<PageHeaderTools>
@@ -155,13 +149,13 @@ export class Main extends React.Component<Props, State> {
</FlexItem>
</Flex>
</div>
- );
+ )
header = (version: string) => (
<PageHeader className="page-header"
onNavToggle={this.onNavToggle}
showNavToggle
- logo={<Brand className="brand" src={logo} alt="Karavan"/>}
+ logo={Icon()}
headerTools={this.toolBar(version)}
/>
);
diff --git a/karavan-app/src/main/webapp/src/index.css b/karavan-app/src/main/webapp/src/index.css
index 3e8bff9..d8711d3 100644
--- a/karavan-app/src/main/webapp/src/index.css
+++ b/karavan-app/src/main/webapp/src/index.css
@@ -1,22 +1,4 @@
-:root {
- --pf-global--primary-color--100: var(--pf-global--palette--orange-300) !important;
- --pf-global--primary-color--200: var(--pf-global--palette--orange-300) !important;
- --pf-global--primary-color--light-100: var(--pf-global--palette--orange-300) !important;
- --pf-global--primary-color--dark-100: var(--pf-global--palette--orange-300) !important;
- --pf-global--link--Color: var(--pf-global--palette--orange-300) !important;
- --pf-global--link--Color--hover: var(--pf-global--palette--orange-500) !important;
- --pf-global--link--Color--light: var(--pf-global--palette--orange-100) !important;
- --pf-global--link--Color--light--hover: var(--pf-global--palette--orange-300) !important;
- --pf-global--link--Color--dark: var(--pf-global--palette--orange-600) !important;
- --pf-global--link--Color--dark--hover: var(--pf-global--palette--orange-900) !important;
-
- --pf-global--active-color--100: var(--pf-global--palette--orange-100) !important;
- --pf-global--active-color--200: var(--pf-global--palette--orange-200) !important;
- --pf-global--active-color--300: var(--pf-global--palette--orange-300) !important;
- --pf-global--active-color--400: var(--pf-global--palette--orange-400) !important;
-
-}
#root {
margin: 0;
@@ -28,22 +10,14 @@
flex-direction: column;
}
-.logo {
- display: flex;
-}
-
-.logo .pf-c-brand {
- height: 30px;
- margin-right: 10px;
-}
-
-.logo .pf-c-title {
- color: #e97826;
-}
-
.karavan .pf-c-page__main {
overflow: hidden;
}
+.logo,
+.logo svg {
+ height: 48px;
+ width: unset;
+}
.karavan .kamelet-section {
display: flex;
diff --git a/karavan-app/src/main/webapp/src/integrations/DesignerPage.tsx b/karavan-app/src/main/webapp/src/integrations/DesignerPage.tsx
index 293e0bd..f0a16ef 100644
--- a/karavan-app/src/main/webapp/src/integrations/DesignerPage.tsx
+++ b/karavan-app/src/main/webapp/src/integrations/DesignerPage.tsx
@@ -147,8 +147,8 @@ export class DesignerPage extends React.Component<Props, State> {
filename={name}
yaml={yaml}
onSave={(name, yaml) => this.save(name, yaml)}
- borderColor="#fb8824"
- borderColorSelected="black"
+ borderColor="var(--pf-global--Color--200)"
+ borderColorSelected="var(--pf-global--primary-color--200)"
/>
}
</>
diff --git a/karavan-app/src/main/webapp/src/logo.svg b/karavan-app/src/main/webapp/src/logo.svg
deleted file mode 100644
index 65f425a..0000000
--- a/karavan-app/src/main/webapp/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 130.21 130.01" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="a" x1="333.48" x2="477" y1="702.6" y2="563.73" gradientTransform="translate(94.038 276.06) scale(.99206)" gradientUnits="userSpaceOnUse"><stop stop-color="#F69923" offset="0"/><stop stop-color="#F79A23" offset=".11"/><stop stop-color="#E97826" offset=".945"/></linearGradient><linearGradient id="b" x1="333.48" x2="477" y1="702.6" y2="563.73" gradientTransform="translate(94.038 276.06) scale(.9920 [...]
\ No newline at end of file
diff --git a/karavan-demo/postman/postman.yaml b/karavan-demo/postman/postman.yaml
index a111c3c..9c7b86d 100644
--- a/karavan-demo/postman/postman.yaml
+++ b/karavan-demo/postman/postman.yaml
@@ -18,13 +18,13 @@ spec:
message: 'Received: ${body}'
- multicast:
steps:
- - kamelet:
- name: kafka-not-secured-sink
+ - to:
+ uri: kamelet:kafka-not-secured-sink
parameters:
topic: parcels
bootstrapServers: localhost:9092
- - kamelet:
- name: postgresql-sink
+ - to:
+ uri: kamelet:postgresql-sink
parameters:
serverName: localhost
serverPort: '5432'
@@ -36,8 +36,8 @@ spec:
(:#id,:#address) ON CONFLICT (id) DO NOTHING
aggregationStrategy: >-
#class:org.apache.camel.processor.aggregate.UseOriginalAggregationStrategy
- parallelProcessing: false
- streaming: false
+ parallelProcessing: true
+ streaming: true
id: post
- route:
from:
@@ -47,8 +47,8 @@ spec:
uri: xj:identity
parameters:
transformDirection: XML2JSON
- - kamelet:
- name: kafka-not-secured-sink
+ - to:
+ uri: kamelet:kafka-not-secured-sink
parameters:
topic: payments
bootstrapServers: localhost:9092
@@ -81,8 +81,8 @@ spec:
library: jackson
- log:
message: 'Send to MQTT : ${body}'
- - kamelet:
- name: mqtt-sink
+ - to:
+ uri: kamelet:mqtt-sink
parameters:
topic: deliveries
brokerUrl: tcp://localhost:1883
@@ -97,8 +97,8 @@ spec:
library: jackson
- log:
message: 'Send to database: ${body}'
- - kamelet:
- name: postgresql-sink
+ - to:
+ uri: kamelet:postgresql-sink
parameters:
serverName: localhost
serverPort: '5432'
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index d6a154c..aa9b1dd 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -105,8 +105,8 @@ class App extends React.Component<Props, State> {
<Page className="karavan">
<KaravanDesigner key={this.state.key} filename={this.state.name} yaml={this.state.yaml}
onSave={(filename, yaml) => this.save(filename, yaml)}
- borderColor="#fb8824"
- borderColorSelected="#303284"
+ borderColor="var(--pf-global--Color--200)"
+ borderColorSelected="var(--pf-global--primary-color--200)"
dark={document.body.className.includes('vscode-dark')}
/>
</Page>
diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx b/karavan-designer/src/designer/KaravanDesigner.tsx
index 28ee491..59b3153 100644
--- a/karavan-designer/src/designer/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/KaravanDesigner.tsx
@@ -17,7 +17,7 @@
import React from 'react';
import {
Badge, Label,
- PageSection, Tab, Tabs, TabTitleIcon, TabTitleText, Tooltip,
+ PageSection, PageSectionVariants, Tab, Tabs, TabTitleIcon, TabTitleText, Tooltip,
} from '@patternfly/react-core';
import './karavan.css';
import {RouteDesigner} from "./route/RouteDesigner";
@@ -215,7 +215,7 @@ export class KaravanDesigner extends React.Component<Props, State> {
render() {
const tab = this.state.tab;
return (
- <PageSection className="page" isFilled padding={{default: 'noPadding'}}>
+ <PageSection variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light} className="page" isFilled padding={{default: 'noPadding'}}>
<Tabs className="main-tabs" activeKey={tab} onSelect={(event, tabIndex) => this.setState({tab: tabIndex.toString()})} style={{width: "100%"}}>
<Tab eventKey='routes' title={this.getTab("Routes", "Integration flows", "routes")}></Tab>
<Tab eventKey='rest' title={this.getTab("REST", "REST services", "rest")}></Tab>
diff --git a/karavan-designer/src/designer/karavan.css b/karavan-designer/src/designer/karavan.css
index ae7bb67..2032dbd 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -1,7 +1,3 @@
-.karavan {
- color: var(--pf-global--Color--100);
-}
-
.karavan .tools-section {
padding-top: 0px;
padding-bottom: 0px;
@@ -223,7 +219,7 @@
}
.karavan .main-tabs .pf-c-tabs__item.pf-m-current {
- --pf-c-tabs__link--after--BorderColor: var(--pf-global--primary-color--200);
+ --pf-c-tabs__link--after--BorderColor: var(--pf-global--primary-color--100);
}
/*Properties*/
@@ -438,7 +434,7 @@
padding: 0;
margin: auto auto auto 6px;
background: transparent;
- color: #fb8824;
+ color: var(--pf-global--primary-color--100);
}
.karavan .properties .add-button svg {
@@ -481,19 +477,19 @@
}
.karavan .dsl-page .graph .connections .arrow {
- stroke: #fb8824;
- fill: #fb8824;
+ stroke: var(--pf-global--Color--200);
+ fill: var(--pf-global--Color--200);
}
.karavan .dsl-page .graph .connections .path {
- stroke: #fb8824;
+ stroke: var(--pf-global--Color--200);
stroke-width: 1;
fill: transparent;
}
.karavan .dsl-page .graph .connections .circle-outgoing,
.karavan .dsl-page .graph .connections .circle-incoming {
- stroke: #fb8824;
+ stroke: var(--pf-global--Color--200);
stroke-width: 1;
fill: white;
}
@@ -502,21 +498,21 @@
stroke-dasharray: 5;
-webkit-animation: dashdraw .5s linear infinite;
animation: dashdraw .5s linear infinite;
- stroke: #fb8824;
+ stroke: var(--pf-global--Color--200);
strokeWidth: 1;
fill: transparent;
}
.karavan .dsl-page .graph .connections .path-direct {
stroke-dasharray: 0;
- stroke: #fb8824;
+ stroke: var(--pf-global--Color--200);
strokeWidth: 1;
fill: transparent;
}
.karavan .dsl-page .graph .connections .path-seda {
stroke-dasharray: 2;
- stroke: #fb8824;
+ stroke: var(--pf-global--Color--200);
-webkit-animation: dashdraw .5s linear infinite;
animation: dashdraw .5s linear infinite;
strokeWidth: 1;
@@ -531,7 +527,7 @@
display: flex;
flex-direction: column;
width: fit-content;
- border-color: #fb8824;
+ border-color: var(--pf-global--Color--200);
border-radius: 16px;
border-width: 1px;
min-width: 120px;
@@ -607,12 +603,12 @@
}
.step-element-selected {
- background-color: rgb(171, 172, 224, 0.1);
+ background-color: rgba(var(--pf-global--palette--blue-50), 1);
}
.step-element .selected .header-icon {
- border-color: rgb(48, 50, 132);
- background-color: rgb(171, 172, 224);
+ border-color: var(--pf-global--primary-color--100);
+ background-color: var(--pf-global--palette--blue-50);
border-width: 2px;
}
@@ -628,7 +624,7 @@
width: 50%
}
.step-element .header .text-bottom {
- background-color: rgba(250, 250, 250, 0.5);
+ background-color: rgba(255, 255, 255, 0.5);
}
.step-element .header .text-right {
padding-left: 17px;
@@ -637,7 +633,7 @@
}
.step-element .header-icon {
- border-color: #fb8824;
+ border-color: var(--pf-global--Color--200);
border-style: solid;
border-radius: 30px;
border-width: 1px;
@@ -662,13 +658,6 @@
user-select: none;
}
-.step-element .arrow-down {
- margin-top: -1px;
- font-size: 13px;
- height: 16px;
- color: #fb8824;
-}
-
.step-element .add-element-button {
top: 5px;
left: 5px;
@@ -678,7 +667,7 @@
border: 0;
padding: 0;
background: transparent;
- color: #fb8824;
+ color: var(--pf-global--primary-color--100);
visibility: hidden;
z-index: 100;
position: absolute;
@@ -702,7 +691,7 @@
padding: 0;
margin: 0;
background: transparent;
- color: #fb8824;
+ color: var(--pf-global--primary-color--100);
visibility: hidden;
z-index: 100;
}
@@ -716,7 +705,7 @@
padding: 0;
margin: 3px auto 0 auto;
background: transparent;
- color: #fca338;
+ color: var(--pf-global--primary-color--100);
visibility: hidden;
height: 100%;
display: flex;
@@ -820,24 +809,6 @@
overflow-wrap: anywhere;
}
-.pf-c-backdrop .pf-c-tabs__item.pf-m-current {
- --pf-c-tabs__link--after--BorderColor: #fca338;
-}
-
-.karavan .pf-c-button {
- --pf-c-button--m-primary--hover--BackgroundColor: #fb8824;
- --pf-c-button--m-primary--focus--BackgroundColor: #fb8824;
- --pf-c-button--m-primary--active--BackgroundColor: #fb8824;
-}
-
-.karavan .pf-c-select__menu-item-icon {
- color: #fb8824;
-}
-
-.karavan .pf-c-select__menu-wrapper:hover, .karavan .pf-c-select__menu-item:hover {
- background-color: #fca338;
-}
-
/*REST Page*/
.karavan .rest-page {
flex: 1;
@@ -886,15 +857,18 @@
.karavan .rest-page .rest-card-unselected,
.karavan .rest-page .rest-config-card-unselected,
.karavan .rest-page .method-card-unselected {
- border-color: #fb8824;
+ border-color: var(--pf-global--Color--200);
background-color: transparent;
}
.karavan .rest-page .rest-card-selected,
.karavan .rest-page .rest-config-card-selected,
.karavan .rest-page .method-card-selected {
- border-color: rgb(48, 50, 132);
- background-color: rgb(171, 172, 224, 0.1);
+ border-color: var(--pf-global--primary-color--100);
+}
+
+.karavan .rest-page .rest-card-selected .title {
+ color: var(--pf-global--primary-color--100);
}
.karavan .rest-page .rest-config-card,
@@ -937,11 +911,11 @@
}
.karavan .rest-page .method-card-unselected .method {
- background: #fca338;
+ background: var(--pf-global--Color--400);
}
.karavan .rest-page .method-card-selected .method {
- background: rgb(48, 50, 132);
+ background: var(--pf-global--primary-color--100);
}
.karavan .rest-page .rest-card .title,
@@ -986,7 +960,7 @@
font-size: 15px;
border: 0;
background: transparent;
- color: #fb8824;
+ color: var(--pf-global--primary-color--100);
z-index: 100;
}
diff --git a/karavan-designer/src/index.css b/karavan-designer/src/index.css
index 0338f83..379741d 100644
--- a/karavan-designer/src/index.css
+++ b/karavan-designer/src/index.css
@@ -5,25 +5,6 @@ body,
height: 100%;
}
-:root {
- --pf-global--primary-color--100: #fca338 !important;
- --pf-global--primary-color--200: #fb8824 !important;
- --pf-global--primary-color--light-100: #fca338 !important;
- --pf-global--primary-color--dark-100: #fca338 !important;
-
- --pf-global--link--Color: #fca338 !important;
- --pf-global--link--Color--hover: #fb8824 !important;
- --pf-global--link--Color--light: #fee3c3 !important;
- --pf-global--link--Color--light--hover: #fee3c3 !important;
- --pf-global--link--Color--dark: #fb8824 !important;
- --pf-global--link--Color--dark--hover: #fb8824 !important;
-
- --pf-global--active-color--100: #fee3c3 !important;
- --pf-global--active-color--200: #fee3c3 !important;
- --pf-global--active-color--300: #fca338 !important;
- --pf-global--active-color--400: #fca338 !important;
-}
-
#root {
margin: 0;
height: 100%;
@@ -42,8 +23,3 @@ body,
height: 30px;
margin-right: 10px;
}
-
-.logo .pf-c-title {
- color: #e97826;
-}
-
diff --git a/karavan-vscode/icons/dark/add.svg b/karavan-vscode/icons/dark/add.svg
new file mode 100644
index 0000000..1d25adb
--- /dev/null
+++ b/karavan-vscode/icons/dark/add.svg
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ version="1.1"
+ id="Capa_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 42 42"
+ style="enable-background:new 0 0 42 42;"
+ xml:space="preserve"
+ sodipodi:docname="add.svg"
+ inkscape:version="1.1.2 (b8e25be8, 2022-02-05)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"><defs
+ id="defs859" /><sodipodi:namedview
+ id="namedview857"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ showgrid="false"
+ inkscape:zoom="17.119048"
+ inkscape:cx="1.8692629"
+ inkscape:cy="21.700974"
+ inkscape:window-width="1312"
+ inkscape:window-height="969"
+ inkscape:window-x="72"
+ inkscape:window-y="25"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="Capa_1" />
+<polygon
+ points="42,19 23,19 23,0 19,0 19,19 0,19 0,23 19,23 19,42 23,42 23,23 42,23 "
+ id="polygon824"
+ style="fill:#c5c5c5;fill-opacity:1" />
+<g
+ id="g826">
+</g>
+<g
+ id="g828">
+</g>
+<g
+ id="g830">
+</g>
+<g
+ id="g832">
+</g>
+<g
+ id="g834">
+</g>
+<g
+ id="g836">
+</g>
+<g
+ id="g838">
+</g>
+<g
+ id="g840">
+</g>
+<g
+ id="g842">
+</g>
+<g
+ id="g844">
+</g>
+<g
+ id="g846">
+</g>
+<g
+ id="g848">
+</g>
+<g
+ id="g850">
+</g>
+<g
+ id="g852">
+</g>
+<g
+ id="g854">
+</g>
+</svg>
diff --git a/karavan-vscode/icons/dark/run.svg b/karavan-vscode/icons/dark/run.svg
new file mode 100644
index 0000000..796aaa5
--- /dev/null
+++ b/karavan-vscode/icons/dark/run.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ width="32px"
+ height="32px"
+ viewBox="0 0 32 32"
+ id="icon"
+ version="1.1"
+ sodipodi:docname="run.svg"
+ inkscape:version="1.1.2 (b8e25be8, 2022-02-05)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview959"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ showgrid="false"
+ inkscape:zoom="22.46875"
+ inkscape:cx="1.4242003"
+ inkscape:cy="16.534075"
+ inkscape:window-width="1296"
+ inkscape:window-height="969"
+ inkscape:window-x="72"
+ inkscape:window-y="25"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="icon" />
+ <defs
+ id="defs953">
+ <style
+ id="style951">
+ .cls-1 {
+ fill: none;
+ }
+ </style>
+ </defs>
+ <path
+ d="M7,28a1,1,0,0,1-1-1V5a1,1,0,0,1,1.4819-.8763l20,11a1,1,0,0,1,0,1.7525l-20,11A1.0005,1.0005,0,0,1,7,28ZM8,6.6909V25.3088L24.9248,16Z"
+ transform="translate(0)"
+ id="path955"
+ style="fill:#c5c5c5;fill-opacity:1" />
+ <rect
+ id="_Transparent_Rectangle_"
+ data-name="<Transparent Rectangle>"
+ class="cls-1"
+ width="32"
+ height="32" />
+</svg>
diff --git a/karavan-vscode/icons/icon.png b/karavan-vscode/icons/icon.png
deleted file mode 100644
index 99e65ed..0000000
Binary files a/karavan-vscode/icons/icon.png and /dev/null differ
diff --git a/karavan-vscode/icons/icon.svg b/karavan-vscode/icons/icon.svg
deleted file mode 100644
index 65f425a..0000000
--- a/karavan-vscode/icons/icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 130.21 130.01" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="a" x1="333.48" x2="477" y1="702.6" y2="563.73" gradientTransform="translate(94.038 276.06) scale(.99206)" gradientUnits="userSpaceOnUse"><stop stop-color="#F69923" offset="0"/><stop stop-color="#F79A23" offset=".11"/><stop stop-color="#E97826" offset=".945"/></linearGradient><linearGradient id="b" x1="333.48" x2="477" y1="702.6" y2="563.73" gradientTransform="translate(94.038 276.06) scale(.9920 [...]
\ No newline at end of file
diff --git a/karavan-vscode/icons/karavan.png b/karavan-vscode/icons/karavan.png
new file mode 100644
index 0000000..5dc9e7c
Binary files /dev/null and b/karavan-vscode/icons/karavan.png differ
diff --git a/karavan-vscode/icons/karavan.svg b/karavan-vscode/icons/karavan.svg
new file mode 100644
index 0000000..0341573
--- /dev/null
+++ b/karavan-vscode/icons/karavan.svg
@@ -0,0 +1,193 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ width="256px"
+ height="256px"
+ viewBox="0 0 256 256"
+ version="1.1"
+ preserveAspectRatio="xMidYMid"
+ id="svg50"
+ sodipodi:docname="karavan.svg"
+ inkscape:version="1.1.2 (b8e25be8, 2022-02-05)"
+ inkscape:export-filename="/Users/mgubaidu/Desktop/karavan-pf.png"
+ inkscape:export-xdpi="1832.72"
+ inkscape:export-ydpi="1832.72"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview52"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ showgrid="false"
+ inkscape:zoom="1"
+ inkscape:cx="100"
+ inkscape:cy="1.5"
+ inkscape:window-width="1716"
+ inkscape:window-height="1067"
+ inkscape:window-x="2518"
+ inkscape:window-y="1465"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="svg50" />
+ <defs
+ id="defs31">
+ <linearGradient
+ inkscape:collect="always"
+ id="linearGradient1351">
+ <stop
+ style="stop-color:#e7f1fa;stop-opacity:1"
+ offset="0"
+ id="stop1347" />
+ <stop
+ style="stop-color:#bee1f4;stop-opacity:1"
+ offset="1"
+ id="stop1349" />
+ </linearGradient>
+ <circle
+ id="path-1"
+ cx="128"
+ cy="128.00015"
+ r="128" />
+ <linearGradient
+ x1="-26.051073"
+ y1="271.33053"
+ x2="254.31574"
+ y2="0.047514945"
+ id="linearGradient-3"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ stop-color="#F69923"
+ offset="0%"
+ id="stop10"
+ style="stop-color:#4790bb;stop-opacity:1" />
+ <stop
+ stop-color="#F79A23"
+ offset="10.996%"
+ id="stop12"
+ style="stop-color:#bee1f4;stop-opacity:1" />
+ <stop
+ stop-color="#E97826"
+ offset="94.502%"
+ id="stop14"
+ style="stop-color:#004080;stop-opacity:1" />
+ </linearGradient>
+ <linearGradient
+ x1="-32.163431"
+ y1="277.02906"
+ x2="259.33836"
+ y2="-5.0281581"
+ id="linearGradient-4"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ stop-color="#F69923"
+ offset="0%"
+ id="stop17" />
+ <stop
+ stop-color="#F79A23"
+ offset="8.0478%"
+ id="stop19" />
+ <stop
+ stop-color="#E97826"
+ offset="41.874%"
+ id="stop21" />
+ </linearGradient>
+ <linearGradient
+ x1="217.94496"
+ y1="67.504837"
+ x2="97.15461"
+ y2="350.94852"
+ id="linearGradient-5"
+ gradientTransform="scale(0.96441978,1.0368929)"
+ gradientUnits="userSpaceOnUse"
+ xlink:href="#linearGradient-4">
+ <stop
+ stop-color="#F6E423"
+ offset="0%"
+ id="stop24"
+ style="stop-color:#bee1f4;stop-opacity:1" />
+ <stop
+ stop-color="#F79A23"
+ offset="41.191%"
+ id="stop26"
+ style="stop-color:#79b7cc;stop-opacity:1" />
+ <stop
+ stop-color="#E97826"
+ offset="0.9943549"
+ id="stop28"
+ style="stop-color:#002952;stop-opacity:1" />
+ </linearGradient>
+ <mask
+ id="mask-2"
+ fill="white">
+ <use
+ xlink:href="#path-1"
+ id="use33" />
+ </mask>
+ <mask
+ id="mask-2-7"
+ fill="white">
+ <use
+ xlink:href="#path-1"
+ id="use137" />
+ </mask>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient1351"
+ id="linearGradient1345"
+ x1="237.56642"
+ y1="54.904339"
+ x2="2.2396212"
+ y2="242.78015"
+ gradientUnits="userSpaceOnUse" />
+ </defs>
+ <g
+ id="g36" />
+ <circle
+ fill="url(#linearGradient-3)"
+ fill-rule="nonzero"
+ mask="url(#mask-2)"
+ cx="127.99429"
+ cy="127.99429"
+ r="123.11053"
+ id="circle38"
+ style="fill:url(#linearGradient-3)" />
+ <g
+ id="g2266">
+ <path
+ d="m 98.043695,75.516752 c -1.750682,-0.002 -3.524167,0.0098 -5.292059,0.06144 -2.05519,0.06065 -4.816316,0.713182 -7.999625,1.784532 53.775199,40.834016 73.108199,114.497516 39.875049,178.514206 1.12865,0.0293 2.24876,0.12307 3.38456,0.12307 60.7361,0 111.49261,-42.32269 124.60904,-99.07129 C 214.07872,111.75077 161.80794,75.61511 98.043301,75.516654 Z"
+ fill="url(#linearGradient-5)"
+ fill-rule="nonzero"
+ opacity="0.75"
+ mask="url(#mask-2)"
+ id="path42"
+ style="fill:url(#linearGradient-5);fill-opacity:1" />
+ </g>
+ <path
+ d="M 84.752011,77.367742 C 66.89547,83.377158 32.82977,104.54579 0.07906091,132.8108 2.5662796,200.14549 57.107277,254.12351 124.62706,255.88195 157.86021,191.86526 138.528,118.20176 84.752011,77.367742 Z"
+ fill="#28170b"
+ fill-rule="nonzero"
+ opacity="0.75"
+ mask="url(#mask-2)"
+ id="path44"
+ style="fill:#002952;fill-opacity:1" />
+ <path
+ d="m 128.74719,54.004528 c -10.98485,5.495372 0,27.466068 0,27.466068 -32.973011,27.483724 -25.9672,74.429124 -64.435392,74.429124 -20.970343,0 -42.242226,-24.0768 -64.23273709,-38.82804 -0.28309669,3.47897 -0.78535974,6.97247 -0.78535974,10.52442 0,48.09504 26.26287383,89.92436 65.41967783,111.89721 10.952683,-1.3796 22.838636,-4.11444 31.050991,-9.59255 43.14527,-28.76482 53.85703,-83.49096 71.48633,-109.92509 10.97897,-16.492 62.43429,-15.06102 65.90679,-22.01013 5.50126,-10.9907 [...]
+ fill="#ffffff"
+ fill-rule="nonzero"
+ mask="url(#mask-2-7)"
+ id="path150"
+ transform="translate(0.23096718,-1.1330964)"
+ style="fill:url(#linearGradient1345);fill-opacity:1" />
+ <path
+ d="M 128,256 C 57.307552,256 0,198.69245 0,128 0,57.307552 57.307552,0 128,0 c 70.69245,0 128,57.307552 128,128 0,70.69245 -57.30755,128 -128,128 z m 0,-9.76795 C 193.29776,246.23205 246.23205,193.29776 246.23205,128 246.23205,62.702243 193.29776,9.7679529 128,9.7679529 62.702243,9.7679529 9.7679529,62.702243 9.7679529,128 9.7679529,193.29776 62.702243,246.23205 128,246.23205 Z"
+ fill="url(#linearGradient-4)"
+ fill-rule="nonzero"
+ mask="url(#mask-2)"
+ id="path40"
+ style="fill:#002952;fill-opacity:1" />
+</svg>
diff --git a/karavan-vscode/icons/light/add.svg b/karavan-vscode/icons/light/add.svg
new file mode 100644
index 0000000..4cf9ebd
--- /dev/null
+++ b/karavan-vscode/icons/light/add.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to SVGRepo https://www.svgrepo.com -->
+
+<svg
+ version="1.1"
+ id="icon"
+ x="0px"
+ y="0px"
+ width="32px"
+ height="32px"
+ viewBox="0 0 32 32"
+ style="enable-background:new 0 0 32 32;"
+ xml:space="preserve"
+ sodipodi:docname="add.svg"
+ inkscape:version="1.1.2 (b8e25be8, 2022-02-05)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"><defs
+ id="defs833" /><sodipodi:namedview
+ id="namedview831"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ showgrid="false"
+ inkscape:zoom="22.46875"
+ inkscape:cx="1.4242003"
+ inkscape:cy="16.534075"
+ inkscape:window-width="1312"
+ inkscape:window-height="969"
+ inkscape:window-x="72"
+ inkscape:window-y="25"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="icon" />
+<style
+ type="text/css"
+ id="style824">
+ .st0{fill:none;}
+</style>
+<polygon
+ points="17,15 17,8 15,8 15,15 8,15 8,17 15,17 15,24 17,24 17,17 24,17 24,15 "
+ id="polygon826"
+ style="fill:#424242;fill-opacity:1" />
+<rect
+ class="st0"
+ width="32"
+ height="32"
+ id="rect828" />
+</svg>
diff --git a/karavan-vscode/icons/light/run.svg b/karavan-vscode/icons/light/run.svg
new file mode 100644
index 0000000..f00270f
--- /dev/null
+++ b/karavan-vscode/icons/light/run.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ width="32px"
+ height="32px"
+ viewBox="0 0 32 32"
+ id="icon"
+ version="1.1"
+ sodipodi:docname="run.svg"
+ inkscape:version="1.1.2 (b8e25be8, 2022-02-05)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview1068"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ showgrid="false"
+ inkscape:zoom="22.46875"
+ inkscape:cx="1.4242003"
+ inkscape:cy="16.534075"
+ inkscape:window-width="1296"
+ inkscape:window-height="969"
+ inkscape:window-x="123"
+ inkscape:window-y="378"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="icon" />
+ <defs
+ id="defs1062">
+ <style
+ id="style1060">
+ .cls-1 {
+ fill: none;
+ }
+ </style>
+ </defs>
+ <path
+ d="M7,28a1,1,0,0,1-1-1V5a1,1,0,0,1,1.4819-.8763l20,11a1,1,0,0,1,0,1.7525l-20,11A1.0005,1.0005,0,0,1,7,28ZM8,6.6909V25.3088L24.9248,16Z"
+ transform="translate(0)"
+ id="path1064"
+ style="fill:#424242;fill-opacity:1" />
+ <rect
+ id="_Transparent_Rectangle_"
+ data-name="<Transparent Rectangle>"
+ class="cls-1"
+ width="32"
+ height="32" />
+</svg>
diff --git a/karavan-vscode/package.json b/karavan-vscode/package.json
index a1de72c..d5701ad 100644
--- a/karavan-vscode/package.json
+++ b/karavan-vscode/package.json
@@ -2,8 +2,8 @@
"name": "karavan",
"publisher": "camel-karavan",
"displayName": "Camel Karavan Designer",
- "icon": "icons/icon.png",
- "description": "Integration Designer for Apache Camel",
+ "icon": "icons/karavan.png",
+ "description": "Apache Camel mastering tool",
"version": "0.0.13",
"license": "Apache-2.0",
"preview": true,
@@ -99,7 +99,11 @@
"commands": [
{
"command": "karavan.create-crd",
- "title": "Karavan: Create CRD"
+ "title": "Karavan: Create CRD",
+ "icon": {
+ "light": "./icons/light/add.svg",
+ "dark": "./icons/dark/add.svg"
+ }
},
{
"command": "karavan.create-yaml",
@@ -109,14 +113,17 @@
"command": "karavan.open",
"title": "Karavan: Open",
"icon": {
- "light": "./icons/icon.png",
- "dark": "./icons/icon.png"
+ "light": "./icons/karavan.svg",
+ "dark": "./icons/karavan.svg"
}
},
{
"command": "karavan.jbang-run",
"title": "Karavan: JBang Run",
- "icon": "./icons/run.png"
+ "icon": {
+ "light": "./icons/light/run.svg",
+ "dark": "./icons/dark/run.svg"
+ }
},
{
"command": "integrations.refresh",
@@ -155,11 +162,11 @@
"explorer/context": [
{
"command": "karavan.create-crd",
- "when": "explorerResourceIsFolder && explorerResourceIsRoot"
+ "when": "explorerResourceIsFolder || explorerResourceIsRoot"
},
{
"command": "karavan.create-yaml",
- "when": "explorerResourceIsFolder && explorerResourceIsRoot"
+ "when": "explorerResourceIsFolder || explorerResourceIsRoot"
},
{
"command": "karavan.open",
@@ -189,6 +196,11 @@
"group": "navigation"
},
{
+ "command": "karavan.create-crd",
+ "when": "view == integrations",
+ "group": "navigation"
+ },
+ {
"command": "kamelets.refresh",
"when": "view == kamelets",
"group": "navigation"
@@ -236,7 +248,13 @@
"visibility": "collapsed"
}
]
- }
+ },
+ "viewsWelcome": [
+ {
+ "view": "integrations",
+ "contents": "No integrations found.\n [Create Integration CRD](command:karavan.create-crd)"
+ }
+ ]
},
"scripts": {
"vscode:prepublish": "cp -r ../karavan-designer/src/designer webview && npm run package",
diff --git a/karavan-vscode/src/designerView.ts b/karavan-vscode/src/designerView.ts
index ae36e8d..80a7677 100644
--- a/karavan-vscode/src/designerView.ts
+++ b/karavan-vscode/src/designerView.ts
@@ -23,11 +23,10 @@ import { Integration } from "karavan-core/lib/model/IntegrationDefinition";
const KARAVAN_LOADED = "karavan:loaded";
const KARAVAN_PANELS: Map<string, vscode.WebviewPanel> = new Map<string, vscode.WebviewPanel>();
-const TERMINALS: Map<string, vscode.Terminal> = new Map<string, vscode.Terminal>();
export class DesignerView {
- constructor(private context: vscode.ExtensionContext, private webviewContent: string) {
+ constructor(private context: vscode.ExtensionContext, private webviewContent: string, private rootPath?: string) {
}
@@ -63,7 +62,8 @@ export class DesignerView {
}
}
- createIntegration(crd: boolean) {
+ createIntegration(crd: boolean, fullPath?: string) {
+ console.log(fullPath);
vscode.window
.showInputBox({
title: crd ? "Create Camel-K Integration CRD" : "Create Camel Integration YAML",
@@ -83,7 +83,11 @@ export class DesignerView {
i.crd = crd;
const yaml = CamelDefinitionYaml.integrationToYaml(i);
const filename = name.toLocaleLowerCase().endsWith('.yaml') ? name : name + '.yaml';
+ const relativePath = (this.rootPath ? fullPath?.replace(this.rootPath, "") : fullPath) + path.sep + filename;
+ console.log(relativePath);
+ utils.save(relativePath, yaml);
this.openKaravanWebView(filename, filename, yaml);
+ vscode.commands.executeCommand('integrations.refresh');
}
});
}
@@ -105,7 +109,7 @@ export class DesignerView {
panel.webview.html = this.webviewContent;
panel.iconPath = vscode.Uri.joinPath(
this.context.extensionUri,
- "icons/icon.svg"
+ "icons/karavan.svg"
);
// Handle messages from the webview
@@ -113,14 +117,7 @@ export class DesignerView {
message => {
switch (message.command) {
case 'save':
- if (vscode.workspace.workspaceFolders) {
- console.log(message);
- const uriFolder: vscode.Uri = vscode.workspace.workspaceFolders[0].uri;
- const uriFile: vscode.Uri = vscode.Uri.file(path.join(uriFolder.path, message.relativePath));
- fs.writeFile(uriFile.fsPath, message.yaml, err => {
- if (err) vscode.window.showErrorMessage("Error: " + err?.message);
- });
- }
+ utils.save(message.relativePath, message.yaml);
break;
case 'getData':
this.sendData(panel, filename, relativePath, yaml);
diff --git a/karavan-vscode/src/extension.ts b/karavan-vscode/src/extension.ts
index d47f3df..af5262a 100644
--- a/karavan-vscode/src/extension.ts
+++ b/karavan-vscode/src/extension.ts
@@ -43,14 +43,20 @@ export function activate(context: vscode.ExtensionContext) {
.toString()
);
- const designer = new DesignerView(context, webviewContent);
+ const rootPath = (vscode.workspace.workspaceFolders && (vscode.workspace.workspaceFolders.length > 0))
+ ? vscode.workspace.workspaceFolders[0].uri.fsPath : undefined;
+
+ const designer = new DesignerView(context, webviewContent, rootPath);
// Create new Integration CRD command
- const createCrd = vscode.commands.registerCommand("karavan.create-crd", () => designer.createIntegration(true));
+ const createCrd = vscode.commands.registerCommand("karavan.create-crd", (...args: any[]) => {
+ if (args.length > 0) designer.createIntegration(true, args[0].fsPath)
+ else designer.createIntegration(true, rootPath)
+ });
context.subscriptions.push(createCrd);
// Create new Integration YAML command
- const createYaml = vscode.commands.registerCommand("karavan.create-yaml", () => designer.createIntegration(false));
+ const createYaml = vscode.commands.registerCommand("karavan.create-yaml", (...args: any[]) => designer.createIntegration(false, args[0].fsPath));
context.subscriptions.push(createYaml);
// Open Camel-K integration in designer
@@ -62,8 +68,6 @@ export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(run);
// Register views
- const rootPath = (vscode.workspace.workspaceFolders && (vscode.workspace.workspaceFolders.length > 0))
- ? vscode.workspace.workspaceFolders[0].uri.fsPath : undefined;
const integrationView = new IntegrationView(designer, rootPath);
vscode.window.registerTreeDataProvider('integrations', integrationView);
diff --git a/karavan-vscode/src/integrationView.ts b/karavan-vscode/src/integrationView.ts
index 9c0031c..3583c74 100644
--- a/karavan-vscode/src/integrationView.ts
+++ b/karavan-vscode/src/integrationView.ts
@@ -20,12 +20,13 @@ import * as utils from "./utils";
import * as fs from "fs";
import { CamelDefinitionYaml } from "karavan-core/lib/api/CamelDefinitionYaml";
import { DesignerView } from "./designerView";
+import { Integration } from "karavan-core/lib/model/IntegrationDefinition";
export class IntegrationView implements vscode.TreeDataProvider<IntegrationItem> {
- constructor(private designer: DesignerView, private rootPath: string | undefined) {
+ constructor(private designer: DesignerView, private rootPath: string | undefined) {
- }
+ }
private _onDidChangeTreeData: vscode.EventEmitter<IntegrationItem | undefined | void> = new vscode.EventEmitter<IntegrationItem | undefined | void>();
readonly onDidChangeTreeData: vscode.Event<IntegrationItem | undefined | void> = this._onDidChangeTreeData.event;
@@ -34,15 +35,19 @@ export class IntegrationView implements vscode.TreeDataProvider<IntegrationItem>
}
getChildren(element?: IntegrationItem): vscode.ProviderResult<IntegrationItem[]> {
const integrations: IntegrationItem[] = [];
- if (this.rootPath){
+ if (element === undefined && this.rootPath) {
utils.getYamlFiles(this.rootPath).forEach(f => {
const yaml = fs.readFileSync(path.resolve(f)).toString('utf8');
- if (!f.startsWith(this.rootPath + path.sep + "target") && CamelDefinitionYaml.yamlIsIntegration(yaml)) {
+ if (!f.startsWith(this.rootPath + path.sep + "target") && CamelDefinitionYaml.yamlIsIntegration(yaml)) {
const filename = path.basename(f);
const i = CamelDefinitionYaml.yamlToIntegration(filename, yaml);
- integrations.push(new IntegrationItem(i.metadata.name, f, i.crd, {command: 'karavan.open', title:'', arguments: [{fsPath: f}]}));
+ integrations.push(new IntegrationItem(i.metadata.name, f, i.crd ? "CRD" : "", i, { command: 'karavan.open', title: '', arguments: [{ fsPath: f }] }));
}
})
+ } else if (element && element.integration) {
+ element.integration.spec.flows?.forEach(f => {
+ integrations.push(new IntegrationItem(f.dslName.replace("Definition", ""), "", f.id, undefined, undefined));
+ })
}
return Promise.resolve(integrations);
}
@@ -56,20 +61,19 @@ export class IntegrationItem extends vscode.TreeItem {
constructor(
public readonly title: string,
- private readonly fullPath: string,
- private readonly crd: boolean,
+ public readonly fullPath: string,
+ public readonly description: string,
+ public readonly integration?: Integration,
public readonly command?: vscode.Command
) {
- super(title, vscode.TreeItemCollapsibleState.None);
-
+ super(title, integration ? vscode.TreeItemCollapsibleState.Collapsed : vscode.TreeItemCollapsibleState.None);
this.tooltip = this.fullPath;
- this.description = this.crd ? "CRD" : "";
}
- iconPath = {
- light: path.join(__filename, '..', '..', 'icons', 'light', this.crd ? 'crd.svg' : 'karavan.svg'),
- dark: path.join(__filename, '..', '..', 'icons', 'dark', this.crd ? 'crd.svg' : 'karavan.svg')
- };
+ iconPath = this.integration ? {
+ light: path.join(__filename, '..', '..', 'icons', 'light', this.integration?.crd ? 'crd.svg' : 'karavan.svg'),
+ dark: path.join(__filename, '..', '..', 'icons', 'dark', this.integration?.crd ? 'crd.svg' : 'karavan.svg')
+ } : vscode.ThemeIcon.File;
contextValue = 'integration';
}
\ No newline at end of file
diff --git a/karavan-vscode/src/utils.ts b/karavan-vscode/src/utils.ts
index 6cfd788..05744ac 100644
--- a/karavan-vscode/src/utils.ts
+++ b/karavan-vscode/src/utils.ts
@@ -21,6 +21,16 @@ import { CamelDefinitionYaml } from "karavan-core/lib/api/CamelDefinitionYaml";
const TERMINALS: Map<string, vscode.Terminal> = new Map<string, vscode.Terminal>();
+export function save(relativePath: string, yaml: string){
+ if (vscode.workspace.workspaceFolders) {
+ const uriFolder: vscode.Uri = vscode.workspace.workspaceFolders[0].uri;
+ const uriFile: vscode.Uri = vscode.Uri.file(path.join(uriFolder.path, relativePath));
+ fs.writeFile(uriFile.fsPath, yaml, err => {
+ if (err) vscode.window.showErrorMessage("Error: " + err?.message);
+ });
+ }
+}
+
export function getRalativePath(fullPath: string): string {
const root = vscode.workspace.workspaceFolders ? vscode.workspace.workspaceFolders[0].uri.path : "";
diff --git a/karavan-vscode/webview/App.tsx b/karavan-vscode/webview/App.tsx
index 96b674f..52fc871 100644
--- a/karavan-vscode/webview/App.tsx
+++ b/karavan-vscode/webview/App.tsx
@@ -101,8 +101,8 @@ class App extends React.Component<Props, State> {
filename={this.state.filename}
yaml={this.state.yaml}
onSave={(filename, yaml) => this.save(filename, yaml)}
- borderColor="rgb(239, 166, 79)"
- borderColorSelected="rgb(171, 172, 224)"
+ borderColor="var(--pf-global--Color--200)"
+ borderColorSelected="var(--pf-global--primary-color--200)"
dark={this.props.dark} />
}
</Page>
diff --git a/karavan-vscode/webview/index.css b/karavan-vscode/webview/index.css
index c991c0e..3cea9c2 100644
--- a/karavan-vscode/webview/index.css
+++ b/karavan-vscode/webview/index.css
@@ -5,24 +5,8 @@ body,
height: 100%;
}
-:root {
- --pf-global--primary-color--100: rgb(239, 166, 79) !important;
- --pf-global--primary-color--200: rgb(235, 146, 40) !important;
- --pf-global--primary-color--light-100: rgb(239, 166, 79)!important;
- --pf-global--primary-color--dark-100: rgb(239, 166, 79) !important;
-
- --pf-global--link--Color: rgb(239, 166, 79) !important;
- --pf-global--link--Color--hover: rgb(235, 146, 40) !important;
- --pf-global--link--Color--light: rgb(239, 166, 79) !important;
- --pf-global--link--Color--light--hover: rgb(239, 166, 79) !important;
- --pf-global--link--Color--dark: rgb(239, 166, 79) !important;
- --pf-global--link--Color--dark--hover: rgb(235, 146, 40) !important;
-
- --pf-global--active-color--100: rgb(247, 205, 159) !important;
-}
-
-.vscode-dark .karavan {
- color: rgb(255, 255, 255);
+.vscode-dark {
+ --pf-global--primary-color--200: var(--pf-global--active-color--400) !important;
}
.vscode-dark .karavan .top-icon {
@@ -66,36 +50,26 @@ body,
}
.vscode-dark .karavan .dsl-page .flows .step-element .header-route {
- color: rgb(247, 205, 159);
+ color: var(--pf-global--Color--200);
}
.vscode-dark .karavan .dsl-page .flows .step-element-with-steps {
- border-color: rgb(239, 166, 79);
-}
-
-.vscode-dark .karavan .dsl-page .flows .step-element-with-steps .header {
- border-color: rgb(239, 166, 79);
- background: rgb(247, 205, 159);
- color: black;
-}
-
-.vscode-dark .step-element-selected {
- background-color: rgb(37, 37, 38, 0.7);
+ border-color: var(--pf-global--Color--200);
}
.vscode-dark .step-element .selected .text {
- color: rgb(171, 172, 224);
+ color: var(--pf-global--info-color--100);
}
.vscode-dark .step-element .selected .header-icon {
- border-color: rgb(171, 172, 224);
- background: rgb(171, 172, 224);
+ border-color: var(--pf-global--info-color--100);
+ background: var(--pf-global--info-color--100);
border-width: 2px;
}
.vscode-dark .step-element .header-icon {
- background: rgb(247, 205, 159);
- border-color: rgb(239, 166, 79);
+ background: var(--pf-global--BorderColor--200);
+ border-color: var(--pf-global--Color--200);
}
.vscode-dark .step-element .header .text-bottom {
@@ -113,10 +87,6 @@ body,
color: rgb(255, 255, 255);
}
-.vscode-dark .karavan .properties .add-button {
- color: var(--pf-global--active-color--100);
-}
-
.vscode-dark .pf-c-select {
--pf-c-select__toggle--BackgroundColor: #3B3B3B;
--pf-c-select__toggle--before--BorderTopColor: #3B3B3B;
@@ -143,44 +113,26 @@ body,
color: rgb(255, 255, 255);
}
-.vscode-dark .pf-c-switch {
- --pf-c-switch__toggle--BackgroundColor: #565656;
- --pf-c-switch__toggle-icon--Color: black;
- --pf-c-switch__toggle--before--BackgroundColor: black;
-}
-
.vscode-dark .karavan .dsl-page .graph .connections .arrow {
- stroke: rgb(239, 166, 79);
- fill: rgb(239, 166, 79);
+ stroke: var(--pf-global--BorderColor--light-100);
+ fill: var(--pf-global--BorderColor--light-100);
}
.vscode-dark .karavan .dsl-page .graph .connections .path {
- stroke: rgb(239, 166, 79);
+ stroke: var(--pf-global--BorderColor--light-100);
}
.vscode-dark .karavan .dsl-page .graph .connections .path-incoming {
- stroke: rgb(239, 166, 79);
+ stroke: var(--pf-global--BorderColor--light-100);
}
.vscode-dark .karavan .dsl-page .graph .connections .circle-outgoing,
.vscode-dark .karavan .dsl-page .graph .connections .circle-incoming {
- stroke: rgb(239, 166, 79);
- fill: rgb(247, 205, 159);
-}
-
-.vscode-dark .karavan .connections .caption {
- fill: #cecece;
-}
-
-.vscode-dark .pf-c-modal-box__title-text {
- color: #cecece;
-}
-
-.vscode-dark .pf-c-tabs__link {
- color: #cecece;
+ stroke: var(--pf-global--Color--200);
+ fill: var(--pf-global--BorderColor--200);
}
.vscode-dark .pf-c-tabs__link::after {
- border-color: rgb(239, 166, 79);
+ border-color: var(--pf-global--Color--200);
}
.vscode-dark .pf-c-tabs__scroll-button {
@@ -205,13 +157,6 @@ body,
--pf-c-popover__arrow--BackgroundColor: #505050;
}
-
-.vscode-dark .pf-c-popover .pf-c-title.pf-m-md,
-.vscode-dark .pf-c-popover .pf-c-popover__body,
-.vscode-dark .pf-c-popover .pf-c-button.pf-m-plain {
- color: #cecece;
-}
-
.vscode-dark .pf-c-tooltip {
--pf-c-tooltip__content--BackgroundColor: #505050;
}
@@ -219,8 +164,7 @@ body,
.vscode-dark .step-element .add-button,
.vscode-dark .step-element .add-element-button,
.vscode-dark .step-element .add-button-from {
- background: #252526;
- color: rgb(239, 166, 79);
+ background: transparent;
}
.vscode-dark .dsl-modal .search .text-field {
@@ -243,15 +187,9 @@ body,
--pf-c-chip--before--BorderColor: grey;
}
-.vscode-dark .karavan .pf-c-button {
- --pf-c-button--m-primary--hover--BackgroundColor: #fee3c3;
- --pf-c-button--m-primary--focus--BackgroundColor: #fee3c3;
- --pf-c-button--m-primary--active--BackgroundColor: #fee3c3;
-}
-
.vscode-dark .karavan .pf-c-expandable-section__toggle,
.vscode-dark .karavan .pf-c-expandable-section__toggle-icon {
- color: rgb(239, 166, 79);
+ color: var(--pf-global--Color--200);
}
.vscode-dark .karavan .properties .expression,
@@ -266,32 +204,19 @@ body,
--pf-c-modal-box--BackgroundColor: #505050;
}
-/* Bean */
-.vscode-dark .karavan .beans-page {
- --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-dark-100--BackgroundColor);
+.vscode-dark .karavan .add-flow .pf-c-button.pf-m-primary,
+.vscode-dark .karavan .add-rest .pf-c-button.pf-m-primary,
+.vscode-dark .karavan .add-bean .pf-c-button.pf-m-primary,
+.vscode-dark .karavan .add-dependency .pf-c-button.pf-m-primary {
+ background-color: var(--pf-c-button--m-primary--Color);
+ color: var(--pf-c-button--m-primary--BackgroundColor);
}
-
-.vscode-dark .beans-page .beans-page-columns .bean-card-unselected {
- border-color: rgb(239, 166, 79);
-}
-
-.vscode-dark .beans-page .beans-page-columns .bean-card-selected {
- color: rgb(171, 172, 224);
- border-color: rgb(171, 172, 224);
- background-color: rgb(37, 37, 38, 0.7);
-}
-
-.vscode-dark .beans-page .beans-page-columns .bean-card-unselected .header-icon {
- background: rgb(247, 205, 159);
- border-color: rgb(239, 166, 79);
+.vscode-dark .karavan .add-flow .pf-c-button.pf-m-secondary,
+.vscode-dark .karavan .add-rest .pf-c-button.pf-m-secondary,
+.vscode-dark .karavan .add-bean .pf-c-button.pf-m-secondary,
+.vscode-dark .karavan .add-dependency .pf-c-button.pf-m-secondary {
+ background-color: var(--pf-global--primary-color--200);
+ color: var(--pf-global--BackgroundColor--dark-200);
}
-
-.vscode-dark .beans-page .beans-page-columns .bean-card:hover {
- box-shadow: 0 0.01rem 0.001rem 0rem rgb(247 205 159 / 13%), 0 0.1rem 0.5rem 0.1rem rgb(247 205 159 / 12%);
-}
-
-.vscode-dark .beans-page .beans-page-columns .bean-card-unselected .icon {
- /* fill: white; */
-}