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 8bcc1c5c VS Code Dark Mode Fix
8bcc1c5c is described below
commit 8bcc1c5c5af738650fe77366d140a986e628afb0
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Thu Sep 19 15:10:10 2024 -0400
VS Code Dark Mode Fix
---
.../webui/src/designer/property/DslProperties.css | 5 ++++
.../property/property/ComponentPropertyField.tsx | 4 +--
.../property/property/DslPropertyField.tsx | 6 ++---
.../property/property/KameletPropertyField.tsx | 4 +--
.../src/designer/property/DslProperties.css | 5 ++++
.../property/property/ComponentPropertyField.tsx | 4 +--
.../property/property/DslPropertyField.tsx | 6 ++---
.../property/property/KameletPropertyField.tsx | 4 +--
.../src/designer/property/DslProperties.css | 5 ++++
.../property/property/ComponentPropertyField.tsx | 4 +--
.../property/property/DslPropertyField.tsx | 6 ++---
.../property/property/KameletPropertyField.tsx | 4 +--
karavan-vscode/webview/index.css | 29 ++++++++++++++++------
13 files changed, 57 insertions(+), 29 deletions(-)
diff --git a/karavan-app/src/main/webui/src/designer/property/DslProperties.css
b/karavan-app/src/main/webui/src/designer/property/DslProperties.css
index 37140289..97b97a38 100644
--- a/karavan-app/src/main/webui/src/designer/property/DslProperties.css
+++ b/karavan-app/src/main/webui/src/designer/property/DslProperties.css
@@ -263,3 +263,8 @@
.karavan .properties .component-headers .pf-v5-c-clipboard-copy.pf-m-inline {
background-color: transparent;
}
+
+.karavan .properties .value-changed {
+ background-color: yellow;
+}
+
diff --git
a/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx
b/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx
index 262e2eb5..eed5d12a 100644
---
a/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx
+++
b/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx
@@ -417,10 +417,10 @@ export function ComponentPropertyField(props: Props) {
function getLabel(property: ComponentProperty, value: any) {
- const bgColor =
PropertyUtil.hasComponentPropertyValueChanged(property, value) ? 'yellow' :
'transparent';
+ const labelClassName =
PropertyUtil.hasComponentPropertyValueChanged(property, value) ?
'value-changed' : 'transparent';
return (
<div style={{display: "flex", flexDirection: 'row', alignItems:
'center', gap: '3px'}}>
- <Text style={{backgroundColor:
bgColor}}>{property.displayName}</Text>
+ <Text className={labelClassName}>{property.displayName}</Text>
</div>
)
}
diff --git
a/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
b/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
index 0652e8bb..a7d9e2d8 100644
---
a/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
+++
b/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
@@ -209,7 +209,7 @@ export function DslPropertyField(props: Props) {
}
function getLabel(property: PropertyMeta, value: any, isKamelet: boolean) {
- const bgColor = PropertyUtil.hasDslPropertyValueChanged(property,
value) ? 'yellow' : 'transparent';
+ const labelClassName =
PropertyUtil.hasDslPropertyValueChanged(property, value) ? 'value-changed' : '';
if (!isMultiValueField(property) && property.isObject &&
!property.isArray && !["ExpressionDefinition"].includes(property.type)) {
const tooltip = value ? "Delete " + property.name : "Add " +
property.name;
const className = value ? "change-button delete-button" :
"change-button add-button";
@@ -219,7 +219,7 @@ export function DslPropertyField(props: Props) {
const icon = value ? (<DeleteIcon/>) : (<AddIcon/>);
return (
<div style={{display: "flex"}}>
- <Text style={{backgroundColor: bgColor}}>{title}</Text>
+ <Text className={labelClassName}>{title}</Text>
<Tooltip position={"top"} content={<div>{tooltip}</div>}>
<button className={className} onClick={e =>
props.onPropertyChange?.(property.name, x)}
aria-label="Add element">
@@ -234,7 +234,7 @@ export function DslPropertyField(props: Props) {
} else if (!["ExpressionDefinition"].includes(property.type)) {
return (
<div style={{display: "flex", flexDirection: 'row',
alignItems: 'center', gap: '3px'}}>
- <Text style={{backgroundColor:
bgColor}}>{CamelUtil.capitalizeName(property.displayName)}</Text>
+ <Text style={{backgroundColor:
labelClassName}}>{CamelUtil.capitalizeName(property.displayName)}</Text>
</div>
)
}
diff --git
a/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx
b/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx
index f9f1bf87..0e1e2bf0 100644
---
a/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx
+++
b/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx
@@ -241,10 +241,10 @@ export function KameletPropertyField(props: Props) {
}
function getLabel(property: Property, value: any) {
- const bgColor = hasValueChanged(property, value) ? 'yellow' :
'transparent';
+ const labelClassName = hasValueChanged(property, value) ?
'value-changed' : 'transparent';
return (
<div style={{display: "flex", flexDirection: 'row', alignItems:
'center', gap: '3px'}}>
- <Text style={{backgroundColor:
bgColor}}>{property.title}</Text>
+ <Text className={labelClassName}>{property.title}</Text>
</div>
)
}
diff --git a/karavan-designer/src/designer/property/DslProperties.css
b/karavan-designer/src/designer/property/DslProperties.css
index 37140289..97b97a38 100644
--- a/karavan-designer/src/designer/property/DslProperties.css
+++ b/karavan-designer/src/designer/property/DslProperties.css
@@ -263,3 +263,8 @@
.karavan .properties .component-headers .pf-v5-c-clipboard-copy.pf-m-inline {
background-color: transparent;
}
+
+.karavan .properties .value-changed {
+ background-color: yellow;
+}
+
diff --git
a/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx
b/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx
index 262e2eb5..eed5d12a 100644
--- a/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx
+++ b/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx
@@ -417,10 +417,10 @@ export function ComponentPropertyField(props: Props) {
function getLabel(property: ComponentProperty, value: any) {
- const bgColor =
PropertyUtil.hasComponentPropertyValueChanged(property, value) ? 'yellow' :
'transparent';
+ const labelClassName =
PropertyUtil.hasComponentPropertyValueChanged(property, value) ?
'value-changed' : 'transparent';
return (
<div style={{display: "flex", flexDirection: 'row', alignItems:
'center', gap: '3px'}}>
- <Text style={{backgroundColor:
bgColor}}>{property.displayName}</Text>
+ <Text className={labelClassName}>{property.displayName}</Text>
</div>
)
}
diff --git
a/karavan-designer/src/designer/property/property/DslPropertyField.tsx
b/karavan-designer/src/designer/property/property/DslPropertyField.tsx
index 0652e8bb..a7d9e2d8 100644
--- a/karavan-designer/src/designer/property/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/property/property/DslPropertyField.tsx
@@ -209,7 +209,7 @@ export function DslPropertyField(props: Props) {
}
function getLabel(property: PropertyMeta, value: any, isKamelet: boolean) {
- const bgColor = PropertyUtil.hasDslPropertyValueChanged(property,
value) ? 'yellow' : 'transparent';
+ const labelClassName =
PropertyUtil.hasDslPropertyValueChanged(property, value) ? 'value-changed' : '';
if (!isMultiValueField(property) && property.isObject &&
!property.isArray && !["ExpressionDefinition"].includes(property.type)) {
const tooltip = value ? "Delete " + property.name : "Add " +
property.name;
const className = value ? "change-button delete-button" :
"change-button add-button";
@@ -219,7 +219,7 @@ export function DslPropertyField(props: Props) {
const icon = value ? (<DeleteIcon/>) : (<AddIcon/>);
return (
<div style={{display: "flex"}}>
- <Text style={{backgroundColor: bgColor}}>{title}</Text>
+ <Text className={labelClassName}>{title}</Text>
<Tooltip position={"top"} content={<div>{tooltip}</div>}>
<button className={className} onClick={e =>
props.onPropertyChange?.(property.name, x)}
aria-label="Add element">
@@ -234,7 +234,7 @@ export function DslPropertyField(props: Props) {
} else if (!["ExpressionDefinition"].includes(property.type)) {
return (
<div style={{display: "flex", flexDirection: 'row',
alignItems: 'center', gap: '3px'}}>
- <Text style={{backgroundColor:
bgColor}}>{CamelUtil.capitalizeName(property.displayName)}</Text>
+ <Text style={{backgroundColor:
labelClassName}}>{CamelUtil.capitalizeName(property.displayName)}</Text>
</div>
)
}
diff --git
a/karavan-designer/src/designer/property/property/KameletPropertyField.tsx
b/karavan-designer/src/designer/property/property/KameletPropertyField.tsx
index f9f1bf87..0e1e2bf0 100644
--- a/karavan-designer/src/designer/property/property/KameletPropertyField.tsx
+++ b/karavan-designer/src/designer/property/property/KameletPropertyField.tsx
@@ -241,10 +241,10 @@ export function KameletPropertyField(props: Props) {
}
function getLabel(property: Property, value: any) {
- const bgColor = hasValueChanged(property, value) ? 'yellow' :
'transparent';
+ const labelClassName = hasValueChanged(property, value) ?
'value-changed' : 'transparent';
return (
<div style={{display: "flex", flexDirection: 'row', alignItems:
'center', gap: '3px'}}>
- <Text style={{backgroundColor:
bgColor}}>{property.title}</Text>
+ <Text className={labelClassName}>{property.title}</Text>
</div>
)
}
diff --git a/karavan-space/src/designer/property/DslProperties.css
b/karavan-space/src/designer/property/DslProperties.css
index 37140289..97b97a38 100644
--- a/karavan-space/src/designer/property/DslProperties.css
+++ b/karavan-space/src/designer/property/DslProperties.css
@@ -263,3 +263,8 @@
.karavan .properties .component-headers .pf-v5-c-clipboard-copy.pf-m-inline {
background-color: transparent;
}
+
+.karavan .properties .value-changed {
+ background-color: yellow;
+}
+
diff --git
a/karavan-space/src/designer/property/property/ComponentPropertyField.tsx
b/karavan-space/src/designer/property/property/ComponentPropertyField.tsx
index 262e2eb5..eed5d12a 100644
--- a/karavan-space/src/designer/property/property/ComponentPropertyField.tsx
+++ b/karavan-space/src/designer/property/property/ComponentPropertyField.tsx
@@ -417,10 +417,10 @@ export function ComponentPropertyField(props: Props) {
function getLabel(property: ComponentProperty, value: any) {
- const bgColor =
PropertyUtil.hasComponentPropertyValueChanged(property, value) ? 'yellow' :
'transparent';
+ const labelClassName =
PropertyUtil.hasComponentPropertyValueChanged(property, value) ?
'value-changed' : 'transparent';
return (
<div style={{display: "flex", flexDirection: 'row', alignItems:
'center', gap: '3px'}}>
- <Text style={{backgroundColor:
bgColor}}>{property.displayName}</Text>
+ <Text className={labelClassName}>{property.displayName}</Text>
</div>
)
}
diff --git a/karavan-space/src/designer/property/property/DslPropertyField.tsx
b/karavan-space/src/designer/property/property/DslPropertyField.tsx
index 0652e8bb..a7d9e2d8 100644
--- a/karavan-space/src/designer/property/property/DslPropertyField.tsx
+++ b/karavan-space/src/designer/property/property/DslPropertyField.tsx
@@ -209,7 +209,7 @@ export function DslPropertyField(props: Props) {
}
function getLabel(property: PropertyMeta, value: any, isKamelet: boolean) {
- const bgColor = PropertyUtil.hasDslPropertyValueChanged(property,
value) ? 'yellow' : 'transparent';
+ const labelClassName =
PropertyUtil.hasDslPropertyValueChanged(property, value) ? 'value-changed' : '';
if (!isMultiValueField(property) && property.isObject &&
!property.isArray && !["ExpressionDefinition"].includes(property.type)) {
const tooltip = value ? "Delete " + property.name : "Add " +
property.name;
const className = value ? "change-button delete-button" :
"change-button add-button";
@@ -219,7 +219,7 @@ export function DslPropertyField(props: Props) {
const icon = value ? (<DeleteIcon/>) : (<AddIcon/>);
return (
<div style={{display: "flex"}}>
- <Text style={{backgroundColor: bgColor}}>{title}</Text>
+ <Text className={labelClassName}>{title}</Text>
<Tooltip position={"top"} content={<div>{tooltip}</div>}>
<button className={className} onClick={e =>
props.onPropertyChange?.(property.name, x)}
aria-label="Add element">
@@ -234,7 +234,7 @@ export function DslPropertyField(props: Props) {
} else if (!["ExpressionDefinition"].includes(property.type)) {
return (
<div style={{display: "flex", flexDirection: 'row',
alignItems: 'center', gap: '3px'}}>
- <Text style={{backgroundColor:
bgColor}}>{CamelUtil.capitalizeName(property.displayName)}</Text>
+ <Text style={{backgroundColor:
labelClassName}}>{CamelUtil.capitalizeName(property.displayName)}</Text>
</div>
)
}
diff --git
a/karavan-space/src/designer/property/property/KameletPropertyField.tsx
b/karavan-space/src/designer/property/property/KameletPropertyField.tsx
index f9f1bf87..0e1e2bf0 100644
--- a/karavan-space/src/designer/property/property/KameletPropertyField.tsx
+++ b/karavan-space/src/designer/property/property/KameletPropertyField.tsx
@@ -241,10 +241,10 @@ export function KameletPropertyField(props: Props) {
}
function getLabel(property: Property, value: any) {
- const bgColor = hasValueChanged(property, value) ? 'yellow' :
'transparent';
+ const labelClassName = hasValueChanged(property, value) ?
'value-changed' : 'transparent';
return (
<div style={{display: "flex", flexDirection: 'row', alignItems:
'center', gap: '3px'}}>
- <Text style={{backgroundColor:
bgColor}}>{property.title}</Text>
+ <Text className={labelClassName}>{property.title}</Text>
</div>
)
}
diff --git a/karavan-vscode/webview/index.css b/karavan-vscode/webview/index.css
index 693a1824..88d65d1a 100644
--- a/karavan-vscode/webview/index.css
+++ b/karavan-vscode/webview/index.css
@@ -217,6 +217,10 @@ body, :root, #root, .karavan {
/* margin-bottom: 0; */
}
+.vscode-dark .karavan .properties .value-changed {
+ color: black;
+}
+
.vscode-dark .karavan .pf-v5-c-drawer__splitter {
background: var(--vscode-tab-inactiveBackground);
}
@@ -334,6 +338,14 @@ body, :root, #root, .karavan {
}
/* Modal */
+.vscode-dark .dsl-modal .pf-v5-c-page__main-section.pf-m-dark-100 {
+ --pf-v5-c-page__main-section--BackgroundColor: transparent;
+}
+
+.vscode-dark .dsl-modal .pf-v5-c-toggle-group
.pf-v5-c-toggle-group__button.pf-m-selected {
+ /* --pf-v5-c-toggle-group__button--BackgroundColor:
var(--pf-v5-global--primary-color--200); */
+}
+
.vscode-dark .dsl-modal .dsl-card .icon {
height: 24px;
background: var(--pf-v5-global--BorderColor--200);
@@ -342,6 +354,15 @@ body, :root, #root, .karavan {
padding: 4px;
}
+.vscode-dark .dsl-modal .dsl-card:hover {
+ background-color: var(--pf-v5-global--palette--black-500);
+}
+
+.vscode-dark .dsl-modal .dsl-card:hover .labels {
+ background-color: var(--pf-v5-global--palette--black-700);
+ --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
+}
+
.vscode-dark .pf-v5-c-modal-box {
--pf-v5-c-modal-box--BackgroundColor: var(--vscode-input-background);
}
@@ -467,14 +488,6 @@ color: var(--vscode-editor-foreground);
background-color: transparent;
}
-.vscode-dark .dsl-modal .pf-v5-c-page__main-section.pf-m-dark-100 {
- --pf-v5-c-page__main-section--BackgroundColor: transparent;
-}
-
-.vscode-dark .dsl-modal .pf-v5-c-toggle-group
.pf-v5-c-toggle-group__button.pf-m-selected {
- --pf-v5-c-toggle-group__button--BackgroundColor:
var(--pf-v5-global--primary-color--200);
-}
-
#root .karavan .bean-designer {
padding-bottom: 0;
}
