From 99e7c753a20ee24476f24798a50e47edb218113c Mon Sep 17 00:00:00 2001
From: VIAUD Nathan <nathan.viaud@inria.fr>
Date: Tue, 24 Oct 2023 12:05:37 +0200
Subject: [PATCH] feat(condition): cancel & highlight on hover
---
src/_colors.scss | 4 ++++
.../components/ConditionElementSelector.vue | 5 -----
.../badge/components/ConditionItem.vue | 1 -
src/features/ePocFlow/nodes/ActivityNode.vue | 1 +
src/features/ePocFlow/nodes/ChapterNode.vue | 1 +
src/features/ePocFlow/nodes/PageNode.vue | 1 +
.../ePocFlow/nodes/content/DraggableNode.vue | 1 +
.../badges/components/ConditionInput.vue | 19 ++++++++++++++++++-
src/global.scss | 10 +++++++++-
src/shared/services/graph.service.ts | 10 ++++++++--
src/shared/stores/editorStore.ts | 5 +++++
11 files changed, 48 insertions(+), 10 deletions(-)
diff --git a/src/_colors.scss b/src/_colors.scss
index 6ef64b1e..03eb6197 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 4a4e586f..7a29a2ed 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 a37d29d9..d3ccd465 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 cc93d234..9351f11f 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 fd8c14b0..f687ab2b 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 b8b84763..11d0e02f 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 d2b82bcd..ea3aba7a 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 9d5931be..2d355870 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 284118bf..3d62f2c0 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 b216ed92..ff2ea6f8 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 2e0d8c8f..cd52b901 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 = '';
+ }
}
});
--
GitLab