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/02/02 17:23:13 UTC
[camel-karavan] branch main updated: VSCode dark mode (#168)
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 deacc45 VSCode dark mode (#168)
deacc45 is described below
commit deacc45a1212a72b7df5021ec9a910eea15abbc7
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Wed Feb 2 12:23:08 2022 -0500
VSCode dark mode (#168)
---
karavan-core/src/core/api/CamelDefinitionApiExt.ts | 12 +--
karavan-designer/src/designer/DslElement.tsx | 2 +-
karavan-vscode/icons/run.png | Bin 16012 -> 17180 bytes
karavan-vscode/icons/run.svg | 15 +++-
karavan-vscode/webview/App.tsx | 4 +-
karavan-vscode/webview/index.css | 87 ++++++++++++---------
6 files changed, 74 insertions(+), 46 deletions(-)
diff --git a/karavan-core/src/core/api/CamelDefinitionApiExt.ts b/karavan-core/src/core/api/CamelDefinitionApiExt.ts
index f13645e..f064424 100644
--- a/karavan-core/src/core/api/CamelDefinitionApiExt.ts
+++ b/karavan-core/src/core/api/CamelDefinitionApiExt.ts
@@ -87,11 +87,11 @@ export class CamelDefinitionApiExt {
}
static findElementInIntegration = (integration: Integration, uuid: string): CamelElement | undefined => {
- const meta = CamelDefinitionApiExt.findElement(integration.spec.flows, uuid);
+ const meta = CamelDefinitionApiExt.findStep(integration.spec.flows, uuid);
return meta.step;
}
- static findElement = (steps: CamelElement[] | undefined, uuid: string, result: CamelElementMeta = new CamelElementMeta(undefined, undefined, undefined, []), parentUuid?: string): CamelElementMeta => {
+ static findStep = (steps: CamelElement[] | undefined, uuid: string, result: CamelElementMeta = new CamelElementMeta(undefined, undefined, undefined, []), parentUuid?: string): CamelElementMeta => {
if (result?.step !== undefined) return result;
if (steps !== undefined){
for (let index = 0, step: CamelElement; step = steps[index]; index++) {
@@ -105,12 +105,12 @@ export class CamelDefinitionApiExt {
ce.forEach(e => {
const cel = CamelDefinitionApiExt.getElementChildren(step, e);
if (e.multiple) {
- result = CamelDefinitionApiExt.findElement(cel, uuid, result, step.uuid);
+ result = CamelDefinitionApiExt.findStep(cel, uuid, result, step.uuid);
result.pathUuids.push(step.uuid);
} else {
const prop = (step as any)[e.name];
if (prop && prop.hasOwnProperty("uuid")) {
- result = CamelDefinitionApiExt.findElement([prop], uuid, result, prop.uuid);
+ result = CamelDefinitionApiExt.findStep([prop], uuid, result, prop.uuid);
result.pathUuids.push(prop.uuid);
}
}
@@ -122,10 +122,10 @@ export class CamelDefinitionApiExt {
}
static moveElement = (integration: Integration, source: string, target: string): Integration => {
- const sourceFindStep = CamelDefinitionApiExt.findElement(integration.spec.flows, source);
+ const sourceFindStep = CamelDefinitionApiExt.findStep(integration.spec.flows, source);
const sourceStep = sourceFindStep.step;
const sourceUuid = sourceStep?.uuid;
- const targetFindStep = CamelDefinitionApiExt.findElement(integration.spec.flows, target);
+ const targetFindStep = CamelDefinitionApiExt.findStep(integration.spec.flows, target);
const parentUuid = targetFindStep.parentUuid;
if (sourceUuid && parentUuid && sourceStep && !targetFindStep.pathUuids.includes(source)) {
CamelDefinitionApiExt.deleteStepFromIntegration(integration, sourceUuid);
diff --git a/karavan-designer/src/designer/DslElement.tsx b/karavan-designer/src/designer/DslElement.tsx
index 227d34c..2e2375c 100644
--- a/karavan-designer/src/designer/DslElement.tsx
+++ b/karavan-designer/src/designer/DslElement.tsx
@@ -326,7 +326,7 @@ export class DslElement extends React.Component<Props, State> {
render() {
const element: CamelElement = this.state.step;
return (
- <div key={"root"+element.uuid} className={"step-element"}
+ <div key={"root"+element.uuid} className={ this.isSelected() ? "step-element step-element-selected" : "step-element"}
ref={el => this.sendPosition(el)}
style={{
borderStyle: this.hasBorder() ? "dotted" : "none",
diff --git a/karavan-vscode/icons/run.png b/karavan-vscode/icons/run.png
index 647d31e..f5f9039 100644
Binary files a/karavan-vscode/icons/run.png and b/karavan-vscode/icons/run.png differ
diff --git a/karavan-vscode/icons/run.svg b/karavan-vscode/icons/run.svg
index 271f6b5..d898891 100644
--- a/karavan-vscode/icons/run.svg
+++ b/karavan-vscode/icons/run.svg
@@ -1,2 +1,13 @@
-<?xml version="1.0" standalone="no"?>
-<svg fill="#F69923" height="100%" width="100%" viewBox="0 0 448 512" aria-hidden="true" role="img" style="vertical-align: -0.125em;" aria-describedby="pf-tooltip-368" xmlns="http://www.w3.org/2000/svg"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>
\ No newline at end of file
+<?xml version="1.0"?>
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <defs>
+ <style>.cls-1 {
+ fill: none;
+ }</style>
+ </defs>
+ <g class="layer">
+ <title>Layer 1</title>
+ <path d="m2.68344,30.75179a1.30645,1.23619 0 0 1 -1.30645,-1.23619l0,-27.19628a1.30645,1.23619 0 0 1 1.93603,-1.08328l26.12897,13.59814a1.30645,1.23619 0 0 1 0,2.16643l-26.12897,13.59814a1.3071,1.23681 0 0 1 -0.62958,0.15304z" fill="#efa64f" id="svg_1"/>
+ <polygon id="svg_2" points="15.00478971004486,15.808284163475037 11.33101499080658,15.808284163475037 13.880183577537537,9.21644914150238 7.20287549495697,9.21644914150238 3.5291022062301636,18.71645200252533 7.20287549495697,18.71645200252533 3.5291022062301636,28.216448187828064 "/>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/karavan-vscode/webview/App.tsx b/karavan-vscode/webview/App.tsx
index b6faa3d..11d27c2 100644
--- a/karavan-vscode/webview/App.tsx
+++ b/karavan-vscode/webview/App.tsx
@@ -78,8 +78,8 @@ class App extends React.Component<Props, State> {
filename={this.state.filename}
yaml={this.state.yaml}
onSave={(filename, yaml) => this.save(filename, yaml)}
- borderColor="#fca338"
- borderColorSelected="#fee3c3"
+ borderColor="rgb(239, 166, 79)"
+ borderColorSelected="rgb(171, 172, 224)"
dark={this.props.dark}
/>
</Page>
diff --git a/karavan-vscode/webview/index.css b/karavan-vscode/webview/index.css
index 0d614a8..09621f4 100644
--- a/karavan-vscode/webview/index.css
+++ b/karavan-vscode/webview/index.css
@@ -6,54 +6,63 @@ body,
}
:root {
- --pf-global--primary-color--100: #fca338 !important;
+ --pf-global--primary-color--100: rgb(239, 166, 79) !important;
}
.vscode-dark .karavan {
- color: #CCCCCC;
+ color: rgb(255, 255, 255);
}
.vscode-dark .karavan .dsl-page .dsl-page-columns {
- background-color: #1C1C1D;
+ background-color: rgb(50, 50, 50);
}
.vscode-dark .karavan .dsl-page .flows .step-element .header-route {
- color: #CCCCCC;
+ color: rgb(247, 205, 159);
}
.vscode-dark .karavan .dsl-page .flows .step-element-with-steps {
- border-color: #964;
+ border-color: rgb(239, 166, 79);
}
.vscode-dark .karavan .dsl-page .flows .step-element-with-steps .header {
- border-color: #fca338;
- background: #fca338;
+ 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.5);
+}
+
+.vscode-dark .step-element .selected .text {
+ color: rgb(171, 172, 224);
+}
+
.vscode-dark .step-element .selected .header-icon {
- border-color: white;
+ border-color: rgb(88, 90, 194);
+ background: rgb(171, 172, 224);
border-width: 2px;
}
.vscode-dark .step-element .header-icon {
- background: #3B3B3B;
- border-color: #fca338;
+ background: rgb(247, 205, 159);
+ border-color: rgb(239, 166, 79);
}
.vscode-dark .step-element .header .text-bottom {
- background-color: rgb(27,27,28, 0.5);
+ background-color: rgb(50, 50, 50, 0.5);
}
.vscode-dark .karavan .dsl-page .properties {
border: none;
- background: #1C1C1D;
+ background: rgb(37, 37, 38);
}
.vscode-dark .karavan .dsl-page .properties .text-field {
- background-color: #3B3B3B;
- border-color: #3B3B3B;
- color: #CCCCCC;
+ background-color: rgb(50, 50, 50);
+ border-color: rgb(50, 50, 50);
+ color: rgb(255, 255, 255);
}
.vscode-dark .pf-c-select {
@@ -62,7 +71,7 @@ body,
--pf-c-select__toggle--before--BorderRightColor: #3B3B3B;
--pf-c-select__toggle--before--BorderBottomColor: #3B3B3B;
--pf-c-select__toggle--before--BorderLeftColor: #3B3B3B;
- --pf-c-select__toggle--Color: #CCCCCC;
+ --pf-c-select__toggle--Color: rgb(255, 255, 255);
}
.vscode-dark .pf-c-select__menu {
@@ -71,7 +80,7 @@ body,
}
.vscode-dark .karavan .dsl-page .properties .pf-c-select__menu-item {
- color: #cccccc;
+ color: rgb(255, 255, 255);
}
.vscode-dark .karavan .dsl-page .properties .pf-c-select__menu-item:hover {
@@ -79,7 +88,7 @@ body,
}
.vscode-dark .karavan .dsl-page .properties .pf-c-select__toggle-typeahead {
- color: #cccccc;
+ color: rgb(255, 255, 255);
}
.vscode-dark .pf-c-switch {
@@ -89,21 +98,21 @@ body,
}
.vscode-dark .karavan .dsl-page .graph .connections .arrow {
- stroke: #fca338;
- fill: #fca338;
+ stroke: rgb(239, 166, 79);
+ fill: rgb(239, 166, 79);
}
.vscode-dark .karavan .dsl-page .graph .connections .path {
- stroke: #fca338;
+ stroke: rgb(239, 166, 79);
}
.vscode-dark .karavan .dsl-page .graph .connections .path-incoming {
- stroke: #fca338;
+ stroke: rgb(239, 166, 79);
}
.vscode-dark .karavan .dsl-page .graph .connections .circle-outgoing,
.vscode-dark .karavan .dsl-page .graph .connections .circle-incoming {
- stroke: #fca338;
- fill: #3B3B3B;
+ stroke: rgb(239, 166, 79);
+ fill: rgb(247, 205, 159);
}
.vscode-dark .pf-c-modal-box__title-text {
@@ -115,7 +124,7 @@ body,
}
.vscode-dark .pf-c-tabs__link::after {
- border-color: #fca338;
+ border-color: rgb(239, 166, 79);
}
.vscode-dark .pf-c-tab-content .pf-c-card__header p {
@@ -123,12 +132,12 @@ body,
}
.vscode-dark .pf-c-modal-box {
- --pf-c-modal-box--BackgroundColor: #585858;
+ --pf-c-modal-box--BackgroundColor: #505050;
}
.vscode-dark .pf-c-popover {
- --pf-c-popover__content--BackgroundColor: #585858;
- --pf-c-popover__arrow--BackgroundColor: #585858;
+ --pf-c-popover__content--BackgroundColor: #505050;
+ --pf-c-popover__arrow--BackgroundColor: #505050;
}
@@ -139,7 +148,7 @@ body,
}
.vscode-dark .pf-c-tooltip {
- --pf-c-tooltip__content--BackgroundColor: #585858;
+ --pf-c-tooltip__content--BackgroundColor: #505050;
}
.vscode-dark .step-element .add-element-button {
@@ -149,18 +158,19 @@ body,
.vscode-dark .step-element .add-button,
.vscode-dark .step-element .add-button-from {
background: #252526;
+ color: rgb(239, 166, 79);
}
.vscode-dark .dsl-modal .search .text-field {
- background-color: #3B3B3B;
- border-color: #3B3B3B;
- color: #CCCCCC;
+ background-color: rgb(50, 50, 50);
+ border-color: rgb(50, 50, 50);
+ color: rgb(255, 255, 255);
}
.vscode-dark .karavan .dsl-page .properties .pf-c-text-input-group {
- background-color: #3B3B3B;
+ background-color: rgb(50, 50, 50);
border-color: #3B3B3B;
- color: #CCCCCC;
+ color: rgb(255, 255, 255);
--pf-c-text-input-group__text--before--BorderColor: transparent;
--pf-c-text-input-group__text--after--BorderBottomColor: transparent;
}
@@ -179,5 +189,12 @@ body,
.vscode-dark .karavan .pf-c-expandable-section__toggle,
.vscode-dark .karavan .pf-c-expandable-section__toggle-icon {
- color: #fca338;
+ color: rgb(239, 166, 79);
+}
+
+.vscode-dark .karavan .dsl-page .properties .expression,
+.vscode-dark .karavan .dsl-page .properties .object,
+.vscode-dark .karavan .dsl-page .properties .dataformat,
+.vscode-dark .karavan .dsl-page .properties .parameters {
+ border-style: none;
}
\ No newline at end of file