mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-09-19 22:37:31 -07:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

refactor(editor): Dark theme improvements (no-changelog) (#7574)

Browse source 
Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
This commit is contained in:
कारतोफ्फेलस्क्रिप्ट™ 2023-11-01 17:56:15 +01:00 committed by GitHub
parent ff279ab411
commit 100291e109
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 32 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/editor-ui/src/components/CodeNodeEditor/theme.ts
View file

@ -27,8 +27,6 @@ const BASE_STYLING = {
},
};
const cssStyleDeclaration = getComputedStyle(document.documentElement);
interface ThemeSettings {
isReadOnly?: boolean;
customMaxHeight?: string;
@ -43,8 +41,8 @@ export const codeNodeEditorTheme = ({
EditorView.theme({
'&': {
'font-size': BASE_STYLING.fontSize,
border: cssStyleDeclaration.getPropertyValue('--border-base'),
borderRadius: cssStyleDeclaration.getPropertyValue('--border-radius-base'),
border: 'var(--border-base)',
borderRadius: 'var(--border-radius-base)',
backgroundColor: 'var(--color-code-background)',
color: 'var(--color-code-foreground)',
height: '100%',
@ -95,12 +93,18 @@ export const codeNodeEditorTheme = ({
},
'.cm-diagnosticAction': {
backgroundColor: BASE_STYLING.diagnosticButton.backgroundColor,
color: cssStyleDeclaration.getPropertyValue('--color-primary'),
color: 'var(--color-primary)',
lineHeight: BASE_STYLING.diagnosticButton.lineHeight,
textDecoration: BASE_STYLING.diagnosticButton.textDecoration,
marginLeft: BASE_STYLING.diagnosticButton.marginLeft,
cursor: BASE_STYLING.diagnosticButton.cursor,
},
'.cm-diagnostic-error': {
backgroundColor: 'var(--color-background-base)',
},
'.cm-diagnosticText': {
color: 'var(--color-text-base)',
},
}),
syntaxHighlighting(
HighlightStyle.define([

18
packages/editor-ui/src/components/Node.vue
View file

@ -199,7 +199,7 @@ import NodeIcon from '@/components/NodeIcon.vue';
import TitledList from '@/components/TitledList.vue';
import { get } from 'lodash-es';
import { getStyleTokenValue, getTriggerNodeServiceName } from '@/utils';
import { getTriggerNodeServiceName } from '@/utils';
import type { INodeUi, XYPosition } from '@/Interface';
import { debounceHelper } from '@/mixins/debounce';
import { useUIStore } from '@/stores/ui.store';
@ -488,31 +488,31 @@ export default defineComponent({
[key: string]: string;
} = {};
let borderColor = getStyleTokenValue('--color-foreground-xdark');
let borderColor = '--color-foreground-xdark';
if (this.isConfigurableNode || this.isConfigNode) {
borderColor = getStyleTokenValue('--color-foreground-dark');
borderColor = '--color-foreground-dark';
}
if (this.data.disabled) {
borderColor = getStyleTokenValue('--color-foreground-base');
borderColor = '--color-foreground-base';
} else if (!this.isExecuting) {
if (this.hasIssues) {
borderColor = getStyleTokenValue('--color-danger');
borderColor = '--color-danger';
returnStyles['border-width'] = '2px';
returnStyles['border-style'] = 'solid';
} else if (this.waiting || this.showPinnedDataInfo) {
borderColor = getStyleTokenValue('--color-canvas-node-pinned-border');
borderColor = '--color-canvas-node-pinned-border';
} else if (this.nodeExecutionStatus === 'unknown') {
borderColor = getStyleTokenValue('--color-foreground-xdark');
borderColor = '--color-foreground-xdark';
} else if (this.workflowDataItems) {
returnStyles['border-width'] = '2px';
returnStyles['border-style'] = 'solid';
borderColor = getStyleTokenValue('--color-success');
borderColor = '--color-success';
}
}
returnStyles['border-color'] = borderColor;
returnStyles['border-color'] = `var(${borderColor})`;
return returnStyles;
},

3
packages/editor-ui/src/mixins/nodeBase.ts
View file

@ -27,7 +27,6 @@ import * as NodeViewUtils from '@/utils/nodeViewUtils';
import { useHistoryStore } from '@/stores/history.store';
import { useCanvasStore } from '@/stores/canvas.store';
import type { EndpointSpec } from '@jsplumb/common';
import { getStyleTokenValue } from '@/utils';
const createAddInputEndpointSpec = (
connectionName: NodeConnectionType,
@ -591,7 +590,7 @@ export const nodeBase = defineComponent({
nodeTypeData,
this.__getEndpointColor(NodeConnectionType.Main),
),
fill: getStyleTokenValue('--node-error-output-color', true),
fill: 'var(--node-error-output-color)',
},
cssClass: `dot-${type}-endpoint`,
};

4
packages/editor-ui/src/stores/ui.store.ts
View file

@ -62,7 +62,6 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
import { useSettingsStore, useUsersStore } from '@/stores/settings.store';
import { useCloudPlanStore } from '@/stores/cloudPlan.store';
import { useTelemetryStore } from '@/stores/telemetry.store';
import { getStyleTokenValue } from '@/utils/htmlUtils';
import { dismissBannerPermanently } from '@/api/ui';
import type { BannerName } from 'n8n-workflow';
@ -412,7 +411,8 @@ export const useUIStore = defineStore(STORES.UI, {
};
},
headerHeight() {
return Number(getStyleTokenValue('--header-height'));
const style = getComputedStyle(document.body);
return Number(style.getPropertyValue('--header-height'));
},
},
actions: {

7
packages/editor-ui/src/utils/htmlUtils.ts
View file

@ -33,13 +33,6 @@ export function sanitizeHtml(dirtyHtml: string) {
return sanitizedHtml;
}
export function getStyleTokenValue(name: string, cssVariable = false): string {
if (cssVariable) return `var(${name})`;
const style = getComputedStyle(document.body);
return style.getPropertyValue(name);
}
export function setPageTitle(title: string) {
window.document.title = title;
}

24
packages/editor-ui/src/utils/nodeViewUtils.ts
View file

@ -1,4 +1,3 @@
import { getStyleTokenValue } from '@/utils/htmlUtils';
import { isNumber, closestNumberDivisibleBy } from '@/utils';
import { NODE_OUTPUT_DEFAULT_KEY, STICKY_NODE_TYPE } from '@/constants';
import type { EndpointStyle, IBounds, INodeUi, XYPosition } from '@/Interface';
@ -88,7 +87,7 @@ export const CONNECTOR_FLOWCHART_TYPE: ConnectorSpec = {
};
export const CONNECTOR_PAINT_STYLE_DEFAULT: PaintStyle = {
stroke: getStyleTokenValue('--color-foreground-dark', true),
stroke: 'var(--color-foreground-dark)',
strokeWidth: 2,
outlineWidth: 12,
outlineStroke: 'transparent',
@ -96,12 +95,12 @@ export const CONNECTOR_PAINT_STYLE_DEFAULT: PaintStyle = {
export const CONNECTOR_PAINT_STYLE_PULL: PaintStyle = {
...CONNECTOR_PAINT_STYLE_DEFAULT,
stroke: getStyleTokenValue('--color-foreground-xdark', true),
stroke: 'var(--color-foreground-xdark)',
};
export const CONNECTOR_PAINT_STYLE_PRIMARY = {
...CONNECTOR_PAINT_STYLE_DEFAULT,
stroke: getStyleTokenValue('--color-primary', true),
stroke: 'var(--color-primary)',
};
export const CONNECTOR_PAINT_STYLE_DATA: PaintStyle = {
@ -109,7 +108,7 @@ export const CONNECTOR_PAINT_STYLE_DATA: PaintStyle = {
...{
dashstyle: '5 3',
},
stroke: getStyleTokenValue('--color-foreground-dark', true),
stroke: 'var(--color-foreground-dark)',
};
export const getConnectorColor = (type: ConnectionTypes, category?: string): string => {
@ -135,7 +134,7 @@ export const getConnectorPaintStylePull = (connection: Connection): PaintStyle =
}
return {
...CONNECTOR_PAINT_STYLE_PULL,
...(connectorColor ? { stroke: getStyleTokenValue(connectorColor, true) } : {}),
...(connectorColor ? { stroke: `var(${connectorColor})` } : {}),
...additionalStyles,
};
};
@ -147,7 +146,7 @@ export const getConnectorPaintStyleDefault = (connection: Connection): PaintStyl
);
return {
...CONNECTOR_PAINT_STYLE_DEFAULT,
...(connectorColor ? { stroke: getStyleTokenValue(connectorColor, true) } : {}),
...(connectorColor ? { stroke: `var(${connectorColor})` } : {}),
};
};
@ -158,7 +157,7 @@ export const getConnectorPaintStyleData = (
const connectorColor = getConnectorColor(connection.parameters.type as ConnectionTypes, category);
return {
...CONNECTOR_PAINT_STYLE_DATA,
...(connectorColor ? { stroke: getStyleTokenValue(connectorColor, true) } : {}),
...(connectorColor ? { stroke: `var(${connectorColor})` } : {}),
};
};
@ -261,8 +260,8 @@ export const getInputEndpointStyle = (
return {
width,
height,
fill: getStyleTokenValue(color),
stroke: getStyleTokenValue(color),
fill: `var(${color})`,
stroke: `var(${color})`,
lineWidth: 0,
};
};
@ -298,7 +297,7 @@ export const getOutputEndpointStyle = (
color: string,
): PaintStyle => ({
strokeWidth: nodeTypeData && nodeTypeData.outputs.length > 2 ? 7 : 9,
fill: getStyleTokenValue(color, true),
fill: `var(${color})`,
outlineStroke: 'none',
});
@ -596,10 +595,9 @@ export const getBackgroundStyles = (
'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`,
};
if (squareSize > 10.5) {
const dotColor = getStyleTokenValue('--color-canvas-dot', true);
return {
...styles,
'background-image': `radial-gradient(circle at ${dotPosition}px ${dotPosition}px, ${dotColor} ${dotSize}px, transparent 0)`,
'background-image': `radial-gradient(circle at ${dotPosition}px ${dotPosition}px, var(--color-canvas-dot) ${dotSize}px, transparent 0)`,
};
}