This is an automated email from the ASF dual-hosted git repository.
paulovmr pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new c90f5fc860c kie-issues#2216: Combined editor > The divider between the
Text and Diagram editor is kept in light mode (#2227)
c90f5fc860c is described below
commit c90f5fc860c4ffe5a5316bb9d69ad6d6dfea673d
Author: Handreyrc <[email protected]>
AuthorDate: Mon Apr 15 13:50:59 2024 -0400
kie-issues#2216: Combined editor > The divider between the Text and Diagram
editor is kept in light mode (#2227)
---
.../package.json | 6 +++--
.../editor/ServerlessWorkflowCombinedEditor.tsx | 14 ++++++++++-
.../src/editor/styles.scss | 28 ++++++++++++++++++++++
.../src/editor/textEditor/SwfTextEditor.tsx | 15 ++++++++++++
pnpm-lock.yaml | 3 +++
5 files changed, 63 insertions(+), 3 deletions(-)
diff --git a/packages/serverless-workflow-combined-editor/package.json
b/packages/serverless-workflow-combined-editor/package.json
index b7a49b49ac1..6d213495266 100644
--- a/packages/serverless-workflow-combined-editor/package.json
+++ b/packages/serverless-workflow-combined-editor/package.json
@@ -18,8 +18,9 @@
"dist"
],
"scripts": {
- "build:dev": "rimraf dist && tsc -p tsconfig.json",
- "build:prod": "pnpm lint && rimraf dist && tsc -p tsconfig.json && pnpm
test",
+ "build:dev": "rimraf dist && pnpm copy:css && tsc -p tsconfig.json",
+ "build:prod": "pnpm lint && rimraf dist && pnpm copy:css && tsc -p
tsconfig.json && pnpm test",
+ "copy:css": "copyfiles -u 1 \"src/**/*.{sass,scss,css}\" dist/",
"lint": "run-script-if --bool \"$(build-env linters.run)\" --then
\"kie-tools--eslint ./src\"",
"start": "webpack serve -c ./dev-webapp/webpack.config.js --host 0.0.0.0
--env dev",
"test": "run-script-if --ignore-errors \"$(build-env
tests.ignoreFailures)\" --bool \"$(build-env tests.run)\" --then \"jest
--silent --verbose --passWithNoTests\"",
@@ -67,6 +68,7 @@
"@types/react-dom": "^17.0.5",
"@types/testing-library__jest-dom": "^5.9.1",
"copy-webpack-plugin": "^11.0.0",
+ "copyfiles": "^2.4.1",
"jest": "^26.6.3",
"jest-junit": "^14.0.0",
"jest-when": "^3.5.0",
diff --git
a/packages/serverless-workflow-combined-editor/src/editor/ServerlessWorkflowCombinedEditor.tsx
b/packages/serverless-workflow-combined-editor/src/editor/ServerlessWorkflowCombinedEditor.tsx
index 3fd2385ca7e..c1f42b1128b 100644
---
a/packages/serverless-workflow-combined-editor/src/editor/ServerlessWorkflowCombinedEditor.tsx
+++
b/packages/serverless-workflow-combined-editor/src/editor/ServerlessWorkflowCombinedEditor.tsx
@@ -68,6 +68,7 @@ import { ServerlessWorkflowCombinedEditorChannelApi,
SwfPreviewOptions } from ".
import { useSwfDiagramEditorChannelApi } from
"./hooks/useSwfDiagramEditorChannelApi";
import { UseSwfTextEditorChannelApiArgs, useSwfTextEditorChannelApi } from
"./hooks/useSwfTextEditorChannelApi";
import { colorNodes } from "./helpers/ColorNodes";
+import "./styles.scss";
interface Props {
locale: string;
@@ -469,7 +470,7 @@ const RefForwardingServerlessWorkflowCombinedEditor:
ForwardRefRenderFunction<
) : previewOptions?.editorMode === "text" ? (
renderTextEditor()
) : (
- <Drawer isExpanded={true} isInline={true}>
+ <Drawer isExpanded={true} isInline={true}
className={getThemeStyle(theme!)}>
<DrawerContent
panelContent={
<DrawerPanelContent isResizable={true}
defaultSize={previewOptions?.defaultWidth ?? "50%"}>
@@ -485,4 +486,15 @@ const RefForwardingServerlessWorkflowCombinedEditor:
ForwardRefRenderFunction<
);
};
+function getThemeStyle(theme: EditorTheme) {
+ switch (theme) {
+ case EditorTheme.DARK: {
+ return "dark";
+ }
+ default: {
+ return "";
+ }
+ }
+}
+
export const ServerlessWorkflowCombinedEditor =
forwardRef(RefForwardingServerlessWorkflowCombinedEditor);
diff --git
a/packages/serverless-workflow-combined-editor/src/editor/styles.scss
b/packages/serverless-workflow-combined-editor/src/editor/styles.scss
new file mode 100644
index 00000000000..ecbd1a18dda
--- /dev/null
+++ b/packages/serverless-workflow-combined-editor/src/editor/styles.scss
@@ -0,0 +1,28 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.dark {
+ --pf-c-drawer__splitter-handle--after--BorderColor: #b1b1b1;
+ --pf-c-drawer__splitter--hover__splitter-handle--after--BorderColor: #e0e0e0;
+ --pf-c-drawer__splitter--after--BorderColor: #3c3c3c;
+ --pf-c-drawer__splitter--BackgroundColor: black;
+ --pf-c-drawer__content--BackgroundColor: black;
+ --pf-c-drawer__panel--BackgroundColor: black;
+ --pf-c-drawer__section--BackgroundColor: black;
+}
diff --git
a/packages/serverless-workflow-text-editor/src/editor/textEditor/SwfTextEditor.tsx
b/packages/serverless-workflow-text-editor/src/editor/textEditor/SwfTextEditor.tsx
index f1c26762c0f..71fdbd51743 100644
---
a/packages/serverless-workflow-text-editor/src/editor/textEditor/SwfTextEditor.tsx
+++
b/packages/serverless-workflow-text-editor/src/editor/textEditor/SwfTextEditor.tsx
@@ -96,6 +96,8 @@ const RefForwardingSwfTextEditor:
React.ForwardRefRenderFunction<SwfTextEditorAp
return;
}
+ setBackgroundColor(theme!, container.current!);
+
const instance = controller.show(container.current, theme ??
EditorTheme.LIGHT);
const commands = initAugmentationCommands(instance,
editorEnvelopeCtx.channelApi);
@@ -123,4 +125,17 @@ const RefForwardingSwfTextEditor:
React.ForwardRefRenderFunction<SwfTextEditorAp
return <div style={{ height: "100%" }} ref={container} />;
};
+function setBackgroundColor(theme: EditorTheme, element: HTMLDivElement) {
+ switch (theme) {
+ case EditorTheme.DARK: {
+ element.style.background = "#000";
+ break;
+ }
+ default: {
+ element.style.background = "#fff";
+ break;
+ }
+ }
+}
+
export const SwfTextEditor = React.forwardRef(RefForwardingSwfTextEditor);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6ff9b27abd9..7e296f0a813 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9644,6 +9644,9 @@ importers:
copy-webpack-plugin:
specifier: ^11.0.0
version: 11.0.0([email protected])
+ copyfiles:
+ specifier: ^2.4.1
+ version: 2.4.1
jest:
specifier: ^26.6.3
version: 26.6.3
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
