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 <marat.gubaidul...@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