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 c8c5a88 Fix #40 #42 (#48)
c8c5a88 is described below
commit c8c5a88bef212d42a1fd38e851f0c68ad233b282
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Wed Oct 27 15:16:01 2021 -0400
Fix #40 #42 (#48)
---
karavan-designer/src/App.tsx | 1 +
karavan-designer/src/designer/karavan.css | 18 ++++++++++++++++++
karavan-designer/src/designer/ui/DslSelector.tsx | 2 +-
karavan-designer/src/designer/ui/KaravanDesigner.tsx | 2 +-
karavan-vscode/webview/App.tsx | 3 ++-
karavan-vscode/webview/index.css | 15 +++++++++++----
karavan-vscode/webview/index.tsx | 3 ++-
karavan-vscode/webview/prerender.tsx | 2 +-
8 files changed, 37 insertions(+), 9 deletions(-)
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index ac076f0..878e406 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -90,6 +90,7 @@ class App extends React.Component<Props, State> {
onSave={(name, yaml) => this.save(name, yaml)}
borderColor="#fb8824"
borderColorSelected="black"
+
dark={document.body.className.includes('vscode-dark')}
/>
</Page>
);
diff --git a/karavan-designer/src/designer/karavan.css
b/karavan-designer/src/designer/karavan.css
index 2332ec9..34eb357 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -598,4 +598,22 @@
.pf-c-popover__footer {
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;
}
\ No newline at end of file
diff --git a/karavan-designer/src/designer/ui/DslSelector.tsx
b/karavan-designer/src/designer/ui/DslSelector.tsx
index 030b4c1..de57519 100644
--- a/karavan-designer/src/designer/ui/DslSelector.tsx
+++ b/karavan-designer/src/designer/ui/DslSelector.tsx
@@ -30,7 +30,7 @@ interface Props {
onClose: any
parentId: string
parentType: string
- dark?: boolean
+ dark: boolean
}
interface State {
diff --git a/karavan-designer/src/designer/ui/KaravanDesigner.tsx
b/karavan-designer/src/designer/ui/KaravanDesigner.tsx
index ba4bb8a..8d4d325 100644
--- a/karavan-designer/src/designer/ui/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/ui/KaravanDesigner.tsx
@@ -39,7 +39,7 @@ interface Props {
yaml: string
borderColor: string
borderColorSelected: string
- dark?: boolean
+ dark: boolean
}
interface State {
diff --git a/karavan-vscode/webview/App.tsx b/karavan-vscode/webview/App.tsx
index da21b7c..1a55e5a 100644
--- a/karavan-vscode/webview/App.tsx
+++ b/karavan-vscode/webview/App.tsx
@@ -24,6 +24,7 @@ import {KameletApi} from "../designer/api/KameletApi";
import { ComponentApi } from "../designer/api/ComponentApi";
interface Props {
+ dark: boolean
}
interface State {
@@ -78,7 +79,7 @@ class App extends React.Component<Props, State> {
onSave={(name, yaml) => this.save(name, yaml)}
borderColor="#fca338"
borderColorSelected="#fee3c3"
- dark={true}
+ dark={this.props.dark}
/>
</Page>
);
diff --git a/karavan-vscode/webview/index.css b/karavan-vscode/webview/index.css
index 5ddefc3..6867cb2 100644
--- a/karavan-vscode/webview/index.css
+++ b/karavan-vscode/webview/index.css
@@ -44,6 +44,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;
}
.vscode-dark .pf-c-select__menu {
@@ -55,12 +56,12 @@ body,
color: #cccccc;
}
-.vscode-dark .karavan .dsl-page .properties .pf-c-select__toggle-typeahead {
- color: #cccccc;
+.vscode-dark .karavan .dsl-page .properties .pf-c-select__menu-item:hover {
+ color: black;
}
-.vscode-dark .pf-c-select__menu-wrapper:hover, .pf-c-select__menu-item:hover {
- background-color: black;
+.vscode-dark .karavan .dsl-page .properties .pf-c-select__toggle-typeahead {
+ color: #cccccc;
}
.vscode-dark .pf-c-switch {
@@ -129,4 +130,10 @@ body,
background-color: #3B3B3B;
border-color: #3B3B3B;
color: #CCCCCC;
+}
+
+.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;
}
\ No newline at end of file
diff --git a/karavan-vscode/webview/index.tsx b/karavan-vscode/webview/index.tsx
index baaea32..054de72 100644
--- a/karavan-vscode/webview/index.tsx
+++ b/karavan-vscode/webview/index.tsx
@@ -20,4 +20,5 @@ import App from "./App";
import "./index.css";
import "@patternfly/patternfly/patternfly.css";
-ReactDOM.render(<App />, document.getElementById("root") as HTMLElement);
+const dark = document.body.className.includes('vscode-dark');
+ReactDOM.render(<App dark={dark}/>, document.getElementById("root") as
HTMLElement);
diff --git a/karavan-vscode/webview/prerender.tsx
b/karavan-vscode/webview/prerender.tsx
index ff303ef..94198eb 100644
--- a/karavan-vscode/webview/prerender.tsx
+++ b/karavan-vscode/webview/prerender.tsx
@@ -19,7 +19,7 @@ import { renderToString } from "react-dom/server";
import App from "./App";
export default () => {
- const html = renderToString(<App></App>);
+ const html = renderToString(<App dark></App>);
return `
<!DOCTYPE html>
