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 87ec493 Step border colors (#240)
87ec493 is described below
commit 87ec493ca29f2b9c470b7a0c79d71aad19e83b8c
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Mon Mar 28 15:13:15 2022 -0400
Step border colors (#240)
---
.../main/webapp/src/integrations/DesignerPage.tsx | 2 -
karavan-designer/src/App.tsx | 2 -
karavan-designer/src/designer/KaravanDesigner.tsx | 16 -------
.../src/designer/beans/BeansDesigner.tsx | 2 -
.../designer/dependencies/DependenciesDesigner.tsx | 2 -
.../src/designer/error/ErrorDesigner.tsx | 2 -
.../src/designer/exception/ExceptionDesigner.tsx | 2 -
karavan-designer/src/designer/karavan.css | 5 +++
.../src/designer/rest/RestDesigner.tsx | 2 -
karavan-designer/src/designer/route/DslElement.tsx | 10 ++---
.../src/designer/route/RouteDesigner.tsx | 4 --
.../src/designer/templates/TemplatesDesigner.tsx | 2 -
karavan-vscode/package.json | 2 +-
karavan-vscode/webview/App.tsx | 2 -
karavan-vscode/webview/index.css | 51 ++++++++++------------
15 files changed, 31 insertions(+), 75 deletions(-)
diff --git a/karavan-app/src/main/webapp/src/integrations/DesignerPage.tsx
b/karavan-app/src/main/webapp/src/integrations/DesignerPage.tsx
index f0a16ef..52aa1cb 100644
--- a/karavan-app/src/main/webapp/src/integrations/DesignerPage.tsx
+++ b/karavan-app/src/main/webapp/src/integrations/DesignerPage.tsx
@@ -147,8 +147,6 @@ export class DesignerPage extends React.Component<Props,
State> {
filename={name}
yaml={yaml}
onSave={(name, yaml) => this.save(name, yaml)}
- borderColor="var(--pf-global--Color--200)"
-
borderColorSelected="var(--pf-global--primary-color--200)"
/>
}
</>
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index aa9b1dd..a000717 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -105,8 +105,6 @@ 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="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 d7bb1d1..8ead316 100644
--- a/karavan-designer/src/designer/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/KaravanDesigner.tsx
@@ -36,8 +36,6 @@ interface Props {
onSave?: (filename: string, yaml: string) => void
filename: string
yaml: string
- borderColor: string
- borderColorSelected: string
dark: boolean
}
@@ -227,38 +225,24 @@ export class KaravanDesigner extends
React.Component<Props, State> {
</Tabs>
{tab === 'routes' && <RouteDesigner
integration={this.state.integration}
onSave={(integration) =>
this.save(integration)}
-
borderColor={this.props.borderColor}
-
borderColorSelected={this.props.borderColorSelected}
dark={this.props.dark}/>}
{tab === 'rest' && <RestDesigner
integration={this.state.integration}
onSave={(integration) =>
this.save(integration)}
-
borderColor={this.props.borderColor}
-
borderColorSelected={this.props.borderColorSelected}
dark={this.props.dark}/>}
{tab === 'beans' && <BeansDesigner
integration={this.state.integration}
onSave={(integration) =>
this.save(integration)}
-
borderColor={this.props.borderColor}
-
borderColorSelected={this.props.borderColorSelected}
dark={this.props.dark}/>}
{tab === 'dependencies' && <DependenciesDesigner
integration={this.state.integration}
onSave={(integration) => this.save(integration)}
-
borderColor={this.props.borderColor}
-
borderColorSelected={this.props.borderColorSelected}
dark={this.props.dark}/>}
{tab === 'error' && <ErrorDesigner
integration={this.state.integration}
onSave={(integration) =>
this.save(integration)}
-
borderColor={this.props.borderColor}
-
borderColorSelected={this.props.borderColorSelected}
dark={this.props.dark}/>}
{tab === 'exception' && <ExceptionDesigner
integration={this.state.integration}
onSave={(integration) => this.save(integration)}
-
borderColor={this.props.borderColor}
-
borderColorSelected={this.props.borderColorSelected}
dark={this.props.dark}/>}
{tab === 'templates' && <TemplatesDesigner
integration={this.state.integration}
onSave={(integration) => this.save(integration)}
-
borderColor={this.props.borderColor}
-
borderColorSelected={this.props.borderColorSelected}
dark={this.props.dark}/>}
</PageSection>
);
diff --git a/karavan-designer/src/designer/beans/BeansDesigner.tsx
b/karavan-designer/src/designer/beans/BeansDesigner.tsx
index 99bafba..08eb58d 100644
--- a/karavan-designer/src/designer/beans/BeansDesigner.tsx
+++ b/karavan-designer/src/designer/beans/BeansDesigner.tsx
@@ -31,8 +31,6 @@ import {BeanCard} from "./BeanCard";
interface Props {
onSave?: (integration: Integration) => void
integration: Integration
- borderColor: string
- borderColorSelected: string
dark: boolean
}
diff --git
a/karavan-designer/src/designer/dependencies/DependenciesDesigner.tsx
b/karavan-designer/src/designer/dependencies/DependenciesDesigner.tsx
index e4c4f79..0de7e5b 100644
--- a/karavan-designer/src/designer/dependencies/DependenciesDesigner.tsx
+++ b/karavan-designer/src/designer/dependencies/DependenciesDesigner.tsx
@@ -30,8 +30,6 @@ import {DependencyCard} from "./DependencyCard";
interface Props {
onSave?: (integration: Integration) => void
integration: Integration
- borderColor: string
- borderColorSelected: string
dark: boolean
}
diff --git a/karavan-designer/src/designer/error/ErrorDesigner.tsx
b/karavan-designer/src/designer/error/ErrorDesigner.tsx
index 3a924dc..362ed1a 100644
--- a/karavan-designer/src/designer/error/ErrorDesigner.tsx
+++ b/karavan-designer/src/designer/error/ErrorDesigner.tsx
@@ -26,8 +26,6 @@ import CubesIcon from
'@patternfly/react-icons/dist/esm/icons/cubes-icon';
interface Props {
onSave?: (integration: Integration) => void
integration: Integration
- borderColor: string
- borderColorSelected: string
dark: boolean
}
diff --git a/karavan-designer/src/designer/exception/ExceptionDesigner.tsx
b/karavan-designer/src/designer/exception/ExceptionDesigner.tsx
index e27ad09..6784967 100644
--- a/karavan-designer/src/designer/exception/ExceptionDesigner.tsx
+++ b/karavan-designer/src/designer/exception/ExceptionDesigner.tsx
@@ -26,8 +26,6 @@ import CubesIcon from
'@patternfly/react-icons/dist/esm/icons/cubes-icon';
interface Props {
onSave?: (integration: Integration) => void
integration: Integration
- borderColor: string
- borderColorSelected: string
dark: boolean
}
diff --git a/karavan-designer/src/designer/karavan.css
b/karavan-designer/src/designer/karavan.css
index 49f753a..5c0eb03 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -545,6 +545,11 @@
position: relative;
}
+.karavan {
+ --step-border-color: var(--pf-global--Color--200);
+ --step-border-color-selected: var(--pf-global--active-color--100);
+}
+
.karavan .dsl-page .flows .children {
display: flex;
flex-wrap: wrap;
diff --git a/karavan-designer/src/designer/rest/RestDesigner.tsx
b/karavan-designer/src/designer/rest/RestDesigner.tsx
index 253dfd4..d83739a 100644
--- a/karavan-designer/src/designer/rest/RestDesigner.tsx
+++ b/karavan-designer/src/designer/rest/RestDesigner.tsx
@@ -36,8 +36,6 @@ import {RestConfigurationCard} from "./RestConfigurationCard";
interface Props {
onSave?: (integration: Integration) => void
integration: Integration
- borderColor: string
- borderColorSelected: string
dark: boolean
}
diff --git a/karavan-designer/src/designer/route/DslElement.tsx
b/karavan-designer/src/designer/route/DslElement.tsx
index b6d7f69..6d6eaf6 100644
--- a/karavan-designer/src/designer/route/DslElement.tsx
+++ b/karavan-designer/src/designer/route/DslElement.tsx
@@ -35,8 +35,6 @@ interface Props {
openSelector: (parentId: string | undefined, parentDsl: string |
undefined, showSteps: boolean) => void
moveElement: (source: string, target: string) => void
selectedUuid: string
- borderColor: string
- borderColorSelected: string
inSteps: boolean
position: number
}
@@ -236,7 +234,7 @@ export class DslElement extends React.Component<Props,
State> {
const isBorder = child.name === 'steps' &&
this.hasBorderOverSteps(step);
const style: CSSProperties = {
borderStyle: isBorder ? "dotted" : "none",
- borderColor: this.props.borderColor,
+ borderColor: "var(--step-border-color)",
borderWidth: "1px",
borderRadius: "16px",
display: this.isHorizontal() || child.name !== 'steps' ? "flex" :
"block",
@@ -281,8 +279,6 @@ export class DslElement extends React.Component<Props,
State> {
selectElement={this.props.selectElement}
moveElement={this.props.moveElement}
selectedUuid={this.state.selectedUuid}
- borderColor={this.props.borderColor}
-
borderColorSelected={this.props.borderColorSelected}
inSteps={child.name === 'steps'}
position={index}
step={element}
@@ -329,10 +325,10 @@ export class DslElement extends React.Component<Props,
State> {
ref={el => this.sendPosition(el)}
style={{
borderStyle: this.hasBorder() ? "dotted" : "none",
- borderColor: this.isSelected() ?
this.props.borderColorSelected : this.props.borderColor,
+ borderColor: this.isSelected() ?
"var(--step-border-color-selected)" : "var(--step-border-color)",
marginTop: this.isInStepWithChildren() ? "16px" : "8px",
zIndex: element.dslName === 'ToDefinition' ? 20 : 10,
- boxShadow: this.state.isDraggedOver ? "0px 0px 1px 2px "
+ this.props.borderColorSelected : "none",
+ boxShadow: this.state.isDraggedOver ? "0px 0px 1px 2px "
+ "var(--step-border-color-selected)" : "none",
}}
onMouseOver={event => event.stopPropagation()}
onClick={event => this.selectElement(event)}
diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx
b/karavan-designer/src/designer/route/RouteDesigner.tsx
index 64d9005..5ed7335 100644
--- a/karavan-designer/src/designer/route/RouteDesigner.tsx
+++ b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -37,8 +37,6 @@ import {CamelUi, RouteToCreate} from "../utils/CamelUi";
interface Props {
onSave?: (integration: Integration) => void
integration: Integration
- borderColor: string
- borderColorSelected: string
dark: boolean
}
@@ -268,8 +266,6 @@ export class RouteDesigner extends React.Component<Props,
State> {
selectElement={this.selectElement}
moveElement={this.moveElement}
selectedUuid={this.state.selectedUuid}
- borderColor={this.props.borderColor}
-
borderColorSelected={this.props.borderColorSelected}
inSteps={false}
position={index}
step={route}
diff --git a/karavan-designer/src/designer/templates/TemplatesDesigner.tsx
b/karavan-designer/src/designer/templates/TemplatesDesigner.tsx
index 7f0db03..de45550 100644
--- a/karavan-designer/src/designer/templates/TemplatesDesigner.tsx
+++ b/karavan-designer/src/designer/templates/TemplatesDesigner.tsx
@@ -26,8 +26,6 @@ import CubesIcon from
'@patternfly/react-icons/dist/esm/icons/cubes-icon';
interface Props {
onSave?: (integration: Integration) => void
integration: Integration
- borderColor: string
- borderColorSelected: string
dark: boolean
}
diff --git a/karavan-vscode/package.json b/karavan-vscode/package.json
index d5701ad..ed88f50 100644
--- a/karavan-vscode/package.json
+++ b/karavan-vscode/package.json
@@ -55,7 +55,7 @@
"properties": {
"camel.version": {
"type": "string",
- "default": "3.16.0-SNAPSHOT",
+ "default": "3.16.0",
"description": "Camel version"
},
"camel.maxMessages": {
diff --git a/karavan-vscode/webview/App.tsx b/karavan-vscode/webview/App.tsx
index 52fc871..a419744 100644
--- a/karavan-vscode/webview/App.tsx
+++ b/karavan-vscode/webview/App.tsx
@@ -101,8 +101,6 @@ class App extends React.Component<Props, State> {
filename={this.state.filename}
yaml={this.state.yaml}
onSave={(filename, yaml) => this.save(filename, yaml)}
- 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 8bec106..b85266d 100644
--- a/karavan-vscode/webview/index.css
+++ b/karavan-vscode/webview/index.css
@@ -16,6 +16,9 @@ body, :root, #root, .karavan {
--pf-c-button--m-secondary--Color: var(--vscode-focusBorder) !important;
--pf-global--Color--100: var(--vscode-foreground) !important;
+
+ --step-border-color: var(--pf-global--active-color--200);
+ --step-border-color-selected:var(--vscode-focusBorder);
}
.vscode-dark input {
@@ -66,7 +69,7 @@ body, :root, #root, .karavan {
}
.vscode-dark .karavan .loading-page {
- background-color: rgb(50, 50, 50);
+ background-color: var(--vscode-editor-background);
height: 100%;
display: flex;
flex-direction: column;
@@ -83,7 +86,7 @@ body, :root, #root, .karavan {
.vscode-dark .pf-c-tabs__scroll-button {
color: #cecece;
- background-color: rgb(50, 50, 50);
+ background-color: var(--vscode-editor-background);
}
.vscode-dark .pf-c-tabs__scroll-button::before {
@@ -97,7 +100,7 @@ body, :root, #root, .karavan {
.vscode-dark .karavan .error-page .error-page-columns,
.vscode-dark .karavan .exception-page .exception-page-columns,
.vscode-dark .karavan .templates-page .templates-page-columns {
- background-color: rgb(50, 50, 50);
+ background-color: var(--vscode-editor-background);
}
.vscode-dark .karavan .dsl-page .flows .step-element .header-route {
@@ -124,8 +127,8 @@ body, :root, #root, .karavan {
}
.vscode-dark .step-element .header .text-bottom {
- background-color: rgb(50, 50, 50, 0.5);
- /* color: var(--pf-global--palette--black-400); */
+ background-color: rgb(var(--vscode-editor-background), 0.5);
+ color: var(--vscode-editor-foreground);
}
.vscode-dark .karavan .step-element .add-button {
@@ -234,6 +237,19 @@ body, :root, #root, .karavan {
.vscode-dark .pf-c-tooltip {
--pf-c-tooltip__content--BackgroundColor: var(--vscode-tab-activeBackground);
}
+
+/* Modal */
+.vscode-dark .pf-c-modal-box {
+ --pf-c-modal-box--BackgroundColor: var(--vscode-input-background);
+}
+
+.vscode-dark .dsl-modal .search .text-field {
+ background-color: var(--vscode-editor-background);
+ border-color: var(--vscode-input-foreground);
+ color: var(--vscode-input-foreground);
+}
+
+
/*
@@ -257,9 +273,6 @@ body, :root, #root, .karavan {
color: #cecece;
}
-.vscode-dark .pf-c-modal-box {
- --pf-c-modal-box--BackgroundColor: #505050;
-}
@@ -269,11 +282,6 @@ body, :root, #root, .karavan {
background: transparent;
}
-.vscode-dark .dsl-modal .search .text-field {
- background-color: rgb(50, 50, 50);
- border-color: rgb(50, 50, 50);
- color: var(--pf-global--Color--200);
-}
@@ -295,20 +303,5 @@ body, :root, #root, .karavan {
width: 350px;
--pf-c-modal-box--BackgroundColor: #505050;
}
-
-.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 .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);
-} */
+*/
