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 685b55c Dark Theme for VS Code extension (#20)
685b55c is described below
commit 685b55c1319c6fa5cc3c532ccd344ebb0c8b90be
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Wed Oct 13 18:03:20 2021 -0400
Dark Theme for VS Code extension (#20)
---
.../main/webapp/src/integrations/DesignerPage.tsx | 9 +-
karavan-designer/src/App.tsx | 5 +-
karavan-designer/src/designer/karavan.css | 22 ++--
karavan-designer/src/designer/ui/DslElement.tsx | 26 +++--
karavan-designer/src/designer/ui/DslProperties.tsx | 6 +-
karavan-designer/src/designer/ui/DslSelector.tsx | 5 +-
.../src/designer/ui/KaravanDesigner.tsx | 6 +
karavan-designer/src/index.css | 32 +++---
karavan-vscode.png | Bin 0 -> 471981 bytes
karavan-vscode/src/extension.ts | 2 +-
karavan-vscode/webview/App.tsx | 10 +-
karavan-vscode/webview/index.css | 126 ++++++++++++++++-----
12 files changed, 182 insertions(+), 67 deletions(-)
diff --git a/karavan-app/src/main/webapp/src/integrations/DesignerPage.tsx
b/karavan-app/src/main/webapp/src/integrations/DesignerPage.tsx
index dc20b1a..089f10a 100644
--- a/karavan-app/src/main/webapp/src/integrations/DesignerPage.tsx
+++ b/karavan-app/src/main/webapp/src/integrations/DesignerPage.tsx
@@ -128,7 +128,14 @@ export class DesignerPage extends React.Component<Props,
State> {
</div>
}
{this.state.view === 'design' &&
- <KaravanDesigner key={this.state.key}
name={this.state.name} yaml={this.state.yaml} onSave={(name, yaml) =>
this.save(name, yaml)}/>
+ <KaravanDesigner
+ key={this.state.key}
+ name={this.state.name}
+ yaml={this.state.yaml}
+ onSave={(name, yaml) => this.save(name, yaml)}
+ borderColor="#fb8824"
+ borderColorSelected="black"
+ />
}
</div>
</PageSection>
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index 14e5743..e784161 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -75,7 +75,10 @@ class App extends React.Component<Props, State> {
return (
<Page className="karavan">
<KaravanDesigner key={this.state.key} name={this.state.name}
yaml={this.state.yaml}
- onSave={(name, yaml) => this.save(name,
yaml)}/>
+ onSave={(name, yaml) => this.save(name, yaml)}
+ borderColor="#fb8824"
+ borderColorSelected="black"
+ />
</Page>
);
}
diff --git a/karavan-designer/src/designer/karavan.css
b/karavan-designer/src/designer/karavan.css
index c5eb8bd..135bc35 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -181,6 +181,7 @@
display: flex;
flex-direction: row;
height: 100%;
+ background: #fafafa;
}
/*Properties*/
@@ -336,7 +337,7 @@
}
.karavan .dsl-page .flows .connections .incoming {
- border-color: #e97826;
+ border-color: #fb8824;
border-style: solid;
border-radius: 50px;
border-width: 1px;
@@ -349,7 +350,7 @@
}
.karavan .dsl-page .flows .connections .outgoing {
- border-color: #e97826;
+ border-color: #fb8824;
border-style: solid;
border-radius: 50px;
border-width: 1px;
@@ -376,7 +377,7 @@
}
.karavan .dsl-page .flows .connections .path {
- stroke: #e97826;
+ stroke: #fb8824;
stroke-width: 1;
fill: none;
}
@@ -397,7 +398,7 @@
width: fit-content;
margin-left: auto;
margin-right: auto;
- border-color: #e97826;
+ border-color: #fb8824;
border-radius: 3px;
border-width: 1px;
min-width: 160px;
@@ -412,7 +413,7 @@
display: block;
justify-content: center;
position: relative;
- border-color: #e97826;
+ border-color: #fb8824;
border-style: solid;
border-radius: 3px;
border-width: 1px;
@@ -430,7 +431,7 @@
}
.karavan .dsl-page .flows .step-element-with-steps .header {
- border-color: #e97826;
+ border-color: #fb8824;
border-style: solid;
border-radius: 3px;
border-width: 1px;
@@ -488,13 +489,14 @@
border: 0;
padding: 0;
background: transparent;
- color: #e97826;
+ color: #fb8824;
}
.step-element .arrow-down {
+ margin-top: -1px;
font-size: 13px;
height: 16px;
- color: #e97826;
+ color: #fb8824;
}
.step-element .add-button {
@@ -505,7 +507,7 @@
padding: 0;
margin: 3px 0 0 0;
background: transparent;
- color: #e97826;
+ color: #fb8824;
visibility: hidden;
z-index: 100;
position: relative;
@@ -520,7 +522,7 @@
padding: 0;
margin: 3px auto 0 auto;
background: transparent;
- color: #e97826;
+ color: #fca338;
visibility: hidden;
height: 100%;
display: flex;
diff --git a/karavan-designer/src/designer/ui/DslElement.tsx
b/karavan-designer/src/designer/ui/DslElement.tsx
index fcf082a..263574f 100644
--- a/karavan-designer/src/designer/ui/DslElement.tsx
+++ b/karavan-designer/src/designer/ui/DslElement.tsx
@@ -25,9 +25,7 @@ import {CamelElement, Otherwise, ProcessorStep, WhenStep}
from "../model/CamelMo
import {CamelApi} from "../api/CamelApi";
import {CamelUi} from "../api/CamelUi";
import {EventBus} from "../api/EventBus";
-import {DslPath} from "./DslPath";
import {CamelApiExt} from "../api/CamelApiExt";
-import {Languages} from "../api/CamelMetadata";
interface Props {
step: CamelElement,
@@ -35,6 +33,8 @@ interface Props {
selectElement: any
openSelector: any
selectedUuid: string
+ borderColor: string
+ borderColorSelected: string
}
interface State {
@@ -117,9 +117,12 @@ export class DslElement extends React.Component<Props,
State> {
getArrow = () => {
return (
- <img className={"arrow-down"} alt="arrow"
- src="data:image/svg+xml,%3Csvg
xmlns='http://www.w3.org/2000/svg' version='1.1'
xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs'
x='0' y='0' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512'
xml:space='preserve' class=''%3E%3Cg
transform='matrix(1,0,0,1,1.7053025658242404e-13,1.1368683772161603e-13)'%3E%3Cg
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath
d='M374.108,373.328c-7.829-7.792-20.492-7.762-28.284,0.067L276,443.55 [...]
- />)
+ <svg className={"arrow-down"} viewBox="0 0 483.284 483.284"
width="16" height="16"
+ preserveAspectRatio="none">
+ <polygon fill={"currentColor"}
+ points="347.5,320.858 261.888,406.469 261.888,0
221.888,0 221.888,406.962 135.784,320.858 107.5,349.142 241.642,483.284
375.784,349.142 "/>
+ </svg>
+ )
}
getHeader = () => {
@@ -127,8 +130,8 @@ export class DslElement extends React.Component<Props,
State> {
<div className="header"
style={
["choice",
"multicast"].includes(this.state.element.dslName)
- ? {width: "100%", borderWidth: this.isSelected() ?
"2px" : "1px"}
- : {borderWidth: this.isSelected() ? "2px" : "1px"}
+ ? {width: "100%", fontWeight: this.isSelected() ?
"bold" : "normal"}
+ : {fontWeight: this.isSelected() ? "bold" : "normal"}
}
ref={el => {
if (el && (this.state.step.dslName === 'fromStep' ||
this.state.step.dslName === 'toStep')) EventBus.sendPosition(this.state.step,
el.getBoundingClientRect());
@@ -162,7 +165,8 @@ export class DslElement extends React.Component<Props,
State> {
? "step-element step-element-with-steps"
: "step-element step-element-without-steps"}
style={{
- borderWidth: this.isSelected() ? "2px" : "1px",
+ borderStyle: this.isSelected() ? "dashed" : "dotted",
+ borderColor: this.isSelected() ?
this.props.borderColorSelected : this.props.borderColor,
marginTop: this.isRoot() ? "16px" : "",
zIndex: this.state.step.dslName === 'toStep' ? 20 : 10
}}
@@ -183,6 +187,8 @@ export class DslElement extends React.Component<Props,
State> {
deleteElement={this.props.deleteElement}
selectElement={this.props.selectElement}
selectedUuid={this.state.selectedUuid}
+ borderColor={this.props.borderColor}
+
borderColorSelected={this.props.borderColorSelected}
step={step}/>
{index < this.getSteps().length - 1 &&
!this.horizontal() && this.getArrow()}
</div>
@@ -216,6 +222,8 @@ export class DslElement extends React.Component<Props,
State> {
deleteElement={this.props.deleteElement}
selectElement={this.props.selectElement}
selectedUuid={this.state.selectedUuid}
+ borderColor={this.props.borderColor}
+
borderColorSelected={this.props.borderColorSelected}
step={when}/>
</div>
))}
@@ -228,6 +236,8 @@ export class DslElement extends React.Component<Props,
State> {
deleteElement={this.props.deleteElement}
selectElement={this.props.selectElement}
selectedUuid={this.state.selectedUuid}
+ borderColor={this.props.borderColor}
+
borderColorSelected={this.props.borderColorSelected}
step={this.getOtherwise()}/>
</div>
}
diff --git a/karavan-designer/src/designer/ui/DslProperties.tsx
b/karavan-designer/src/designer/ui/DslProperties.tsx
index 499aab2..bbb037b 100644
--- a/karavan-designer/src/designer/ui/DslProperties.tsx
+++ b/karavan-designer/src/designer/ui/DslProperties.tsx
@@ -25,7 +25,7 @@ import {
Switch,
NumberInput,
Button,
- TextVariants, Select, SelectVariant, SelectDirection, SelectOption,
TextArea, ExpandableSection
+ TextVariants, Select, SelectVariant, SelectDirection, SelectOption,
TextArea, ExpandableSection, PageSection
} from '@patternfly/react-core';
import '../karavan.css';
import "@patternfly/patternfly/patternfly.css";
@@ -184,6 +184,7 @@ export class DslProperties extends React.Component<Props,
State> {
fieldId={id}
labelIcon={
<Popover
+ position={"left"}
headerContent={property.title}
bodyContent={property.description}
footerContent={property.example ? "Example: " +
property.example : undefined}>
@@ -243,6 +244,7 @@ export class DslProperties extends React.Component<Props,
State> {
fieldId={id}
labelIcon={
<Popover
+ position={"left"}
headerContent={property.displayName}
bodyContent={property.description}
footerContent={property.defaultValue ? "Default: " +
property.defaultValue : undefined}>
@@ -335,6 +337,7 @@ export class DslProperties extends React.Component<Props,
State> {
fieldId={property.name}
labelIcon={property.description ?
<Popover
+ position={"left"}
headerContent={property.displayName}
bodyContent={property.description}>
<button type="button" aria-label="More info"
onClick={e => {
@@ -374,6 +377,7 @@ export class DslProperties extends React.Component<Props,
State> {
fieldId={property.name}
labelIcon={property.description ?
<Popover
+ position={"left"}
headerContent={property.displayName}
bodyContent={property.description}>
<button type="button" aria-label="More info"
onClick={e => {
diff --git a/karavan-designer/src/designer/ui/DslSelector.tsx
b/karavan-designer/src/designer/ui/DslSelector.tsx
index 56b1b49..9b6da27 100644
--- a/karavan-designer/src/designer/ui/DslSelector.tsx
+++ b/karavan-designer/src/designer/ui/DslSelector.tsx
@@ -16,7 +16,7 @@
*/
import React from 'react';
import {
- Card, CardBody, CardHeader, Gallery, Modal,
+ Card, CardBody, CardHeader, Gallery, Modal, PageSection,
Tab, Tabs, TabTitleText,
Text,
} from '@patternfly/react-core';
@@ -29,6 +29,7 @@ interface Props {
onClose: any
parentId: string
parentType: string
+ dark?: boolean
}
interface State {
@@ -74,6 +75,7 @@ export class DslSelector extends React.Component<Props,
State> {
isOpen={this.state.show}
onClose={() => this.props.onClose.call(this)}
actions={{}}>
+ <PageSection variant={this.props.dark ? "darker" : "light"}>
<Tabs style={{overflow: 'hidden'}}
activeKey={this.state.tabIndex} onSelect={this.selectTab}>
{CamelUi.getSelectorLabels(this.props.parentType).map((label, index) => (
<Tab eventKey={label[0]} key={"tab-" + label[0]}
@@ -98,6 +100,7 @@ export class DslSelector extends React.Component<Props,
State> {
</Tab>
))}
</Tabs>
+ </PageSection>
</Modal>
);
}
diff --git a/karavan-designer/src/designer/ui/KaravanDesigner.tsx
b/karavan-designer/src/designer/ui/KaravanDesigner.tsx
index 09800b6..00c6d58 100644
--- a/karavan-designer/src/designer/ui/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/ui/KaravanDesigner.tsx
@@ -37,6 +37,9 @@ interface Props {
onSave?: (name: string, yaml: string) => void
name: string
yaml: string
+ borderColor: string
+ borderColorSelected: string
+ dark?: boolean
}
interface State {
@@ -161,6 +164,8 @@ export class KaravanDesigner extends React.Component<Props,
State> {
deleteElement={this.deleteElement}
selectElement={this.selectElement}
selectedUuid={this.state.selectedUuid}
+ borderColor={this.props.borderColor}
+
borderColorSelected={this.props.borderColorSelected}
step={flow}/>
))}
<div className="add-flow">
@@ -181,6 +186,7 @@ export class KaravanDesigner extends React.Component<Props,
State> {
/>
</div>
<DslSelector
+ dark={this.props.dark}
parentId={this.state.parentId}
parentType={this.state.parentType}
show={this.state.showSelector}
diff --git a/karavan-designer/src/index.css b/karavan-designer/src/index.css
index a73153d..47ba52d 100644
--- a/karavan-designer/src/index.css
+++ b/karavan-designer/src/index.css
@@ -6,22 +6,22 @@ body,
}
: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;
+ --pf-global--primary-color--100: #fca338 !important;
+ --pf-global--primary-color--200: #fee3c3 !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;
}
diff --git a/karavan-vscode.png b/karavan-vscode.png
new file mode 100644
index 0000000..fda1786
Binary files /dev/null and b/karavan-vscode.png differ
diff --git a/karavan-vscode/src/extension.ts b/karavan-vscode/src/extension.ts
index 973272f..2fbf86e 100644
--- a/karavan-vscode/src/extension.ts
+++ b/karavan-vscode/src/extension.ts
@@ -131,7 +131,7 @@ function readKamelets(): string[] {
const uri: vscode.Uri = vscode.Uri.file(path.resolve(
path.join(__dirname, './kamelets')
))
- const yamls: string[] = fs.readdirSync(uri.fsPath).map(file =>
fs.readFileSync(uri.fsPath + "/" + file, 'utf-8'));
+ const yamls: string[] = fs.readdirSync(uri.fsPath).filter(file =>
file.endsWith("yaml")).map(file => fs.readFileSync(uri.fsPath + "/" + file,
'utf-8'));
return yamls;
}
diff --git a/karavan-vscode/webview/App.tsx b/karavan-vscode/webview/App.tsx
index bf91a7e..fd93a27 100644
--- a/karavan-vscode/webview/App.tsx
+++ b/karavan-vscode/webview/App.tsx
@@ -67,7 +67,15 @@ class App extends React.Component<Props, State> {
public render() {
return (
<Page className="karavan">
- <KaravanDesigner key={this.state.key} name={this.state.name}
yaml={this.state.yaml} onSave={(name, yaml) => this.save(name, yaml)}/>
+ <KaravanDesigner
+ key={this.state.key}
+ name={this.state.name}
+ yaml={this.state.yaml}
+ onSave={(name, yaml) => this.save(name, yaml)}
+ borderColor="#fca338"
+ borderColorSelected="#fee3c3"
+ dark={true}
+ />
</Page>
);
}
diff --git a/karavan-vscode/webview/index.css b/karavan-vscode/webview/index.css
index a73153d..2a2edd2 100644
--- a/karavan-vscode/webview/index.css
+++ b/karavan-vscode/webview/index.css
@@ -6,45 +6,117 @@ body,
}
: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--primary-color--100: #fca338 !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;
+.vscode-dark .karavan {
+ color: #CCCCCC;
+}
- --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;
+.vscode-dark .karavan .dsl-page .dsl-page-columns {
+ background-color: #252526;
+}
+.vscode-dark .karavan .dsl-page .flows .step-element-with-steps {
+ border-color: #964;
}
-#root {
- margin: 0;
- height: 100%;
+.vscode-dark .karavan .dsl-page .flows .step-element-with-steps .header {
+ border-color: #fca338;
+ background: #fca338;
+ color: black;
+}
+
+.vscode-dark .karavan .dsl-page .properties {
+ border: none;
+ background: #1C1C1D;
+}
+
+.vscode-dark .karavan .dsl-page .properties .text-field {
+ background-color: #3B3B3B;
+ border-color: #3B3B3B;
+ color: #CCCCCC;
+}
+
+.vscode-dark .pf-c-select {
+ --pf-c-select__toggle--BackgroundColor: #3B3B3B;
+ --pf-c-select__toggle--before--BorderTopColor: #3B3B3B;
+ --pf-c-select__toggle--before--BorderRightColor: #3B3B3B;
+ --pf-c-select__toggle--before--BorderBottomColor: #3B3B3B;
+ --pf-c-select__toggle--before--BorderLeftColor: #3B3B3B;
+}
+
+.vscode-dark .pf-c-select__menu {
+ background-color: #3B3B3B;
+ box-shadow: var(--pf-c-select__menu--BoxShadow);
+}
+
+.vscode-dark .karavan .dsl-page .properties .pf-c-select__menu-item {
+ color: #cccccc;
+}
+
+.vscode-dark .karavan .dsl-page .properties .pf-c-select__toggle-typeahead {
+ color: #cccccc;
+}
+
+.vscode-dark .pf-c-select__menu-wrapper:hover, .pf-c-select__menu-item:hover {
+ background-color: black;
+}
+
+.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;
}
-#root {
- display: flex;
- flex-direction: column;
+.vscode-dark .step-element .header .delete-button,
+.vscode-dark .element-builder .header .delete-button {
+ color: #585858;
}
-.logo {
- display: flex;
+.vscode-dark .karavan .dsl-page .flows .connections .path {
+ stroke: #fee3c3;
}
-.logo .pf-c-brand {
- height: 30px;
- margin-right: 10px;
+.vscode-dark .karavan .dsl-page .flows .connections .outgoing,
+.vscode-dark .karavan .dsl-page .flows .connections .incoming {
+ border-color: #fee3c3;
+ background: #fee3c3;
}
-.logo .pf-c-title {
- color: #e97826;
+
+.vscode-dark .pf-c-modal-box__title-text {
+ color: #cecece;
+}
+
+.vscode-dark .pf-c-tabs__link {
+ color: #cecece;
+}
+
+.vscode-dark .pf-c-tabs__link::after {
+ border-color: #fca338;
+}
+
+.vscode-dark .pf-c-tab-content .pf-c-card__header p {
+ color: #cecece;
+}
+
+.vscode-dark .pf-c-modal-box {
+ --pf-c-modal-box--BackgroundColor: #585858;
+}
+
+.vscode-dark .pf-c-popover {
+ --pf-c-popover__content--BackgroundColor: #585858;
+ --pf-c-popover__arrow--BackgroundColor: #585858;
+}
+
+
+.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: #585858;
+}
\ No newline at end of file
