diff --git a/src/_colors.scss b/src/_colors.scss
index 6ef64b1ed4e6cda2c40f433ba505f6377335dfe3..03eb6197150ad392c3da2472094a3d235ca9014d 100644
--- a/src/_colors.scss
+++ b/src/_colors.scss
@@ -26,6 +26,8 @@ $editor-blue: #00B3E9;
$node-active: #E1F4FA;
$editor-red: #E63312;
+$editor-green: #00D957;
+
$editor-node-ghost: #D6E2F0;
[color-scheme="light"] {
@@ -61,4 +63,6 @@ $editor-node-ghost: #D6E2F0;
--editor-red: #{$editor-red};
--inria-grey: #{$inria-grey};
--node-hover: #E9EFF6;
+
+ --editor-green: #{$editor-green};
}
\ No newline at end of file
diff --git a/src/features/badge/components/ConditionElementSelector.vue b/src/features/badge/components/ConditionElementSelector.vue
index 4a4e586fc4a4a6dc38d8cb2cc8be768d9046c1e2..7a29a2edf5ac855d3b76ce11cee3c178f2713c02 100644
--- a/src/features/badge/components/ConditionElementSelector.vue
+++ b/src/features/badge/components/ConditionElementSelector.vue
@@ -7,12 +7,7 @@ const props = defineProps<{
inputValue: string;
}>();
-const emit = defineEmits<{
- (e: 'change'): void;
-}>();
-
function onClick() {
- emit('change');
enterSelectNodeMode(props.index);
}
diff --git a/src/features/badge/components/ConditionItem.vue b/src/features/badge/components/ConditionItem.vue
index a37d29d9af205b247b5bdefeded9cfac65301a32..d3ccd465290b24519f63bda9bdaf2a68ad19f6c3 100644
--- a/src/features/badge/components/ConditionItem.vue
+++ b/src/features/badge/components/ConditionItem.vue
@@ -84,7 +84,6 @@ function handleVerbChange(value: string) {
:input-value="currentCondition.element"
:index="conditionIndex"
class="grid-item"
- @change="resetValue(true, true)"
/>
<div class="select">
Condition
diff --git a/src/features/ePocFlow/nodes/ActivityNode.vue b/src/features/ePocFlow/nodes/ActivityNode.vue
index cc93d234c508ae1f7bfb17d1ace3d6b9f5ff835f..9351f11f98c37566ba5ffc068816eaf2d6193e69 100644
--- a/src/features/ePocFlow/nodes/ActivityNode.vue
+++ b/src/features/ePocFlow/nodes/ActivityNode.vue
@@ -97,6 +97,7 @@ const activityIndex = computed(() => {
<small>{{ connectedBadges.length }}</small>
</div>
<DraggableNode
+ :id="currentNode.data.contentId"
:parent-test-id="`activity-${activityIndex}`"
:node-id="id"
:contents="data.elements"
diff --git a/src/features/ePocFlow/nodes/ChapterNode.vue b/src/features/ePocFlow/nodes/ChapterNode.vue
index fd8c14b0d2edbb2e033dc3f1bb796647e5ce1311..f687ab2b6fadb591086c128f17454d1be644299d 100644
--- a/src/features/ePocFlow/nodes/ChapterNode.vue
+++ b/src/features/ePocFlow/nodes/ChapterNode.vue
@@ -72,6 +72,7 @@ const connectedBadges = computed(() => getConnectedBadges(currentNode.data.conte
<small>{{ connectedBadges.length }}</small>
</div>
<ContentButton
+ :id="currentNode.data.contentId"
:data-testid="`chapter-${chapterIndex}`"
:icon="currentNode.data.action.icon"
:is-draggable="false"
diff --git a/src/features/ePocFlow/nodes/PageNode.vue b/src/features/ePocFlow/nodes/PageNode.vue
index b8b84763caab2084fc918dcfea7959e0fa7e879e..11d0e02f7b41e72fc8ca875331d314dd64a0ce76 100644
--- a/src/features/ePocFlow/nodes/PageNode.vue
+++ b/src/features/ePocFlow/nodes/PageNode.vue
@@ -100,6 +100,7 @@ const pageIndex = computed(() => {
<small>{{ connectedBadges.length }}</small>
</div>
<DraggableNode
+ :id="currentNode.data.contentId"
:parent-test-id="`page-${pageIndex}`"
:node-id="id"
:contents="data.elements"
diff --git a/src/features/ePocFlow/nodes/content/DraggableNode.vue b/src/features/ePocFlow/nodes/content/DraggableNode.vue
index d2b82bcd6cb55670ab487389c45faa62ff9534f6..ea3aba7a163ea2caf72134d02c18936c96253195 100644
--- a/src/features/ePocFlow/nodes/content/DraggableNode.vue
+++ b/src/features/ePocFlow/nodes/content/DraggableNode.vue
@@ -131,6 +131,7 @@ function onContextMenu(contentId: string) {
<small>{{ getConnectedBadges(element.contentId).length }}</small>
</div>
<ContentButton
+ :id="element.contentId"
:data-testid="`${parentTestId}-${index}`"
:icon="element.action.icon"
:is-draggable="!isCondition && !editorStore.selectNodeMode"
diff --git a/src/features/forms/components/inputs/badges/components/ConditionInput.vue b/src/features/forms/components/inputs/badges/components/ConditionInput.vue
index 9d5931be1a9c9d9646c6dbb4fe73f29062500015..2d355870f80b8c9014b29e13990576968b0bc7df 100644
--- a/src/features/forms/components/inputs/badges/components/ConditionInput.vue
+++ b/src/features/forms/components/inputs/badges/components/ConditionInput.vue
@@ -21,13 +21,30 @@ function getPhrase(condition: Condition): { phrase: string, id: string} {
return { phrase, id: condition.element };
}
+
+let hoveredElement = null;
+function handleMouseEnter(condition: Condition) {
+ hoveredElement = document.getElementById(condition.element);
+ hoveredElement.classList.add('highlight');
+}
+
+function handleMouseLeave() {
+ hoveredElement.classList.remove('highlight');
+ hoveredElement = null;
+}
+
</script>
<template>
<ul v-if="conditions.length > 0">
<li v-for="(condition, index) of conditions" :key="index">
{{ getPhrase(condition).phrase }}
- <a @click="goToElement(condition.element)">{{ condition.element }}</a>
+ <a
+ @mouseenter="handleMouseEnter(condition)"
+ @mouseleave="handleMouseLeave"
+ @click="goToElement(condition.element)">
+ {{ condition.element }}
+ </a>
</li>
</ul>
<button class="btn btn-form" @click="onClick">
diff --git a/src/global.scss b/src/global.scss
index 284118bfff2863a9d67b1b105cee98d68f8b1796..3d62f2c01c6ac72fb16ae031f8f9a41ce2db1e4b 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -113,6 +113,10 @@ body,
border: 2px solid var(--editor-blue);
box-shadow: 0 1px 8px 0 var(--editor-blue-shadow);
}
+ &.highlight {
+ color: var(--editor-green);
+ border: 2px solid var(--editor-green);
+ }
}
&-blue {
background-color: var(--button-blue);
@@ -243,10 +247,14 @@ hr {
}
&.active {
- border: 1px solid var(--editor-blue);
+ border: 2px solid var(--editor-blue);
box-shadow: 0 1px 8px 0 var(--editor-blue-shadow);
background-color: var(--node-active);
}
+
+ &.highlight {
+ border: 2px solid var(--editor-green) !important;
+ }
}
.input {
diff --git a/src/shared/services/graph.service.ts b/src/shared/services/graph.service.ts
index b216ed926ac32053e4ef834d58cde0f385a41d41..ff2ea6f8531ba65851965af895766456aaa31bfa 100644
--- a/src/shared/services/graph.service.ts
+++ b/src/shared/services/graph.service.ts
@@ -299,8 +299,14 @@ export function exitSelectNodeMode(selectedId?: string): void {
editorStore.exitSelectNodeMode();
setNodesSelectability(false);
- editorStore.tempConditions[openedConditionIndex].elementType = getConditionType(selectedId);
- editorStore.tempConditions[openedConditionIndex].element = getContentIdFromId(selectedId);
+ if(selectedId !== undefined) {
+
+ if(openedConditionIndex) editorStore.resetTempCondition(openedConditionIndex);
+
+ editorStore.tempConditions[openedConditionIndex].elementType = getConditionType(selectedId);
+ editorStore.tempConditions[openedConditionIndex].element = getContentIdFromId(selectedId);
+ }
+
enableGraph();
openedConditionIndex = null;
diff --git a/src/shared/stores/editorStore.ts b/src/shared/stores/editorStore.ts
index 2e0d8c8f5b3858477e5ea9e47cf47a08a60cae0b..cd52b901f51621f8f1162fee431db3bd74c62a96 100644
--- a/src/shared/stores/editorStore.ts
+++ b/src/shared/stores/editorStore.ts
@@ -228,5 +228,10 @@ export const useEditorStore = defineStore('editor', {
exitSelectNodeMode(): void {
this.selectNodeMode = false;
},
+
+ resetTempCondition(index: number) {
+ this.tempConditions[index].verb = '';
+ this.tempConditions[index].value = '';
+ }
}
});