mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-14 08:34:07 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

✨ Added color picker for stickies

Browse source
This commit is contained in:
Milorad FIlipović 2024-10-30 16:44:49 +01:00
parent f2c7d7c299
commit a8b9f564d5
2 changed files with 41 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/design-system/src/components/N8nSticky/Sticky.vue
View file

@ -30,9 +30,12 @@ const resWidth = computed((): number => {
const inputName = computed(() => (props.id ? `${props.id}-input` : undefined));
const styles = computed((): { height: string; width: string } => ({
const styles = computed((): { height: string; width: string; backgroundColor?: string } => ({
height: `${resHeight.value}px`,
width: `${resWidth.value}px`,
backgroundColor: String(props.backgroundColor).startsWith('#')
? props.backgroundColor
: undefined,
}));
const shouldShowFooter = computed((): boolean => resHeight.value > 100 && resWidth.value > 155);

42
packages/editor-ui/src/components/Sticky.vue
View file

@ -21,6 +21,7 @@ import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
import { useNodeBase } from '@/composables/useNodeBase';
import { useTelemetry } from '@/composables/useTelemetry';
import { useStyles } from '@/composables/useStyles';
import ColorPicker from 'n8n-design-system/components/N8nColorPicker/ColorPicker.vue';
const props = withDefaults(
defineProps<{
@ -62,6 +63,9 @@ const isTouchActive = ref<boolean>(false);
const forceActions = ref(false);
const isColorPopoverVisible = ref(false);
const stickOptions = ref<HTMLElement>();
const colorPicker = ref<HTMLElement>();
const customColor = ref<string | undefined>(undefined);
const colorPickerOpen = ref(false);
const setForceActions = (value: boolean) => {
forceActions.value = value;
@ -86,7 +90,7 @@ const nodeBase = useNodeBase({
emit: emit as (event: string, ...args: unknown[]) => void,
});
onClickOutside(stickOptions, () => setColorPopoverVisible(false));
// onClickOutside(stickOptions, () => setColorPopoverVisible(false), { ignore: [colorPicker] });
defineExpose({
deviceSupport,
@ -173,13 +177,13 @@ const deleteNode = async () => {
emit('removeNode', data.value.name);
};
const changeColor = (index: number) => {
const changeColor = (color: number | string) => {
workflowsStore.updateNodeProperties({
name: props.name,
properties: {
parameters: {
...node.value?.parameters,
color: index,
color: color,
},
position: node.value?.position ?? [0, 0],
},
@ -296,6 +300,10 @@ const onContextMenu = (e: MouseEvent): void => {
e.stopPropagation();
}
};
const onColorPickerChange = (value: string | null) => {
changeColor(customColor.value);
};
</script>
<template>
@ -362,7 +370,7 @@ const onContextMenu = (e: MouseEvent): void => {
effect="dark"
trigger="click"
placement="top"
:popper-style="{ width: '208px' }"
:popper-style="{ width: '250px' }"
:visible="isColorPopoverVisible"
@show="onShowPopover"
@hide="onHidePopover"
@ -395,8 +403,16 @@ const onContextMenu = (e: MouseEvent): void => {
? `0 0 0 1px var(--color-sticky-background-${index + 1})`
: 'none',
}"
@click="changeColor(index + 1)"
@click="changeColor(index)"
></div>
<div ref="colorPicker" class="color pick-color-button" @click="colorPickerOpen = true">
<ColorPicker
v-model="customColor"
:show-input="false"
:popper-class="'sticky-color-picker'"
@update:model-value="onColorPickerChange"
/>
</div>
</div>
</n8n-popover>
</div>
@ -498,4 +514,20 @@ const onContextMenu = (e: MouseEvent): void => {
cursor: pointer;
}
}
.pick-color-button {
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: var(--color-text-lighter);
font-size: var(--font-size-l);
font-weight: var(--font-weight-bold);
margin-left: var(--spacing-2xs);
cursor: pointer;
&:hover {
color: var(--color-primary);
}
}
</style>